89 lines
1.7 KiB
Vue
89 lines
1.7 KiB
Vue
<template>
|
|
<div class="container">
|
|
<b-table striped hoverable :data="rows" :columns="columns"></b-table>
|
|
<br />
|
|
<b-field grouped>
|
|
<b-select v-model="target" placeholder="Target">
|
|
<option value="@channel">
|
|
Channel
|
|
</option>
|
|
</b-select>
|
|
<b-input v-model="text" placeholder="Message" expanded></b-input>
|
|
<p class="control">
|
|
<button @click="sendTxt" class="button is-primary">Send</button>
|
|
</p>
|
|
</b-field>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Vue } from "vue-property-decorator";
|
|
import { State, Getter } from "vuex-class";
|
|
import { RoomState } from "@/store/room";
|
|
|
|
const columns = [
|
|
{
|
|
field: "time",
|
|
label: "Time",
|
|
width: 300
|
|
},
|
|
{
|
|
field: "type",
|
|
label: "Type",
|
|
width: 100
|
|
},
|
|
{
|
|
field: "message",
|
|
label: "Message"
|
|
}
|
|
];
|
|
|
|
interface LogRow {
|
|
time: string;
|
|
type: string;
|
|
message: string;
|
|
}
|
|
|
|
@Component({})
|
|
export default class RoomLog extends Vue {
|
|
@State("room") private room!: RoomState;
|
|
|
|
private target!: "@channel" | string;
|
|
private text!: string;
|
|
|
|
private data() {
|
|
return {
|
|
columns,
|
|
target: "@channel",
|
|
text: ""
|
|
};
|
|
}
|
|
|
|
private get rows(): LogRow[] {
|
|
return this.room.messages.map(v => {
|
|
let fullType = v.type;
|
|
let msg = "* no message *";
|
|
if (v.type == "message" && v.message) {
|
|
fullType += "/" + v.message.type;
|
|
if (v.message.message && v.message.message != "") {
|
|
msg = v.message.message;
|
|
}
|
|
}
|
|
if (v.type == "event" && v.event) {
|
|
fullType += "/" + v.event.type;
|
|
if (v.event.message && v.event.message != "") {
|
|
msg = v.event.message;
|
|
}
|
|
}
|
|
return {
|
|
time: v.time,
|
|
type: fullType,
|
|
message: msg
|
|
};
|
|
});
|
|
}
|
|
|
|
private sendTxt() {}
|
|
}
|
|
</script>
|