71 lines
1.2 KiB
Vue
71 lines
1.2 KiB
Vue
|
|
<template>
|
|
<div class="container">
|
|
<b-table striped hoverable :data="rows" :columns="columns"></b-table>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Vue } from "vue-property-decorator";
|
|
import { State } 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 data() {
|
|
return {
|
|
columns
|
|
};
|
|
}
|
|
|
|
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
|
|
};
|
|
});
|
|
}
|
|
}
|
|
</script>
|