Refactor

src/client/app/admin/views/dashboard.ap-log.vue

@@ -0,0 +1,109 @@
+<template>
+<div class="hyhctythnmwihguaaapnbrbszsjqxpio">
+	<table>
+		<thead>
+			<tr>
+				<th><fa :icon="faExchangeAlt"/> In/Out</th>
+				<th><fa :icon="faBolt"/> Activity</th>
+				<th><fa icon="server"/> Host</th>
+				<th><fa icon="user"/> Actor</th>
+			</tr>
+		</thead>
+		<tbody>
+			<tr v-for="log in logs" :key="log.id">
+				<td :class="log.direction">{{ log.direction == 'in' ? '<' : '>' }} {{ log.direction }}</td>
+				<td>{{ log.activity }}</td>
+				<td>{{ log.host }}</td>
+				<td>@{{ log.actor }}</td>
+			</tr>
+		</tbody>
+	</table>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faBolt, faExchangeAlt } from '@fortawesome/free-solid-svg-icons';
+
+export default Vue.extend({
+	data() {
+		return {
+			logs: [],
+			connection: null,
+			faBolt, faExchangeAlt
+		};
+	},
+
+	mounted() {
+		this.connection = this.$root.stream.useSharedConnection('apLog');
+		this.connection.on('log', this.onLog);
+		this.connection.on('logs', this.onLogs);
+		this.connection.send('requestLog', {
+			id: Math.random().toString().substr(2, 8),
+			length: 50
+		});
+	},
+
+	beforeDestroy() {
+		this.connection.dispose();
+	},
+
+	methods: {
+		onLog(log) {
+			log.id = Math.random();
+			this.logs.unshift(log);
+			if (this.logs.length > 50) this.logs.pop();
+		},
+
+		onLogs(logs) {
+			for (const log of logs.reverse()) {
+				this.onLog(log)
+			}
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.hyhctythnmwihguaaapnbrbszsjqxpio
+	display block
+	padding 12px 16px 16px 16px
+	height 250px
+	overflow auto
+	box-shadow 0 2px 4px rgba(0, 0, 0, 0.1)
+	background var(--adminDashboardCardBg)
+	border-radius 8px
+
+	> table
+		width 100%
+		max-width 100%
+		overflow auto
+		border-spacing 0
+		border-collapse collapse
+		color var(--adminDashboardCardFg)
+		font-size 14px
+
+		thead
+			border-bottom solid 1px var(--adminDashboardCardDivider)
+
+			tr
+				th
+					font-weight normal
+					text-align left
+
+		tbody
+			tr
+				&:nth-child(odd)
+					background rgba(0, 0, 0, 0.025)
+
+		th, td
+			padding 8px 16px
+			min-width 128px
+
+		td.in
+			color #d26755
+
+		td.out
+			color #55bb83
+
+</style>