Rewrite dashboard with Vue

src/Dashboard/Components/DashboardApp.vue

@@ -0,0 +1,42 @@
+<template>
+  <main id="dashboard">
+    <div id="dashboard-inner">
+      <hdr></hdr>
+      <task-list></task-list>
+    </div>
+  </main>
+</template>
+
+<script>
+import Header from './Header';
+import TaskList from './TaskList';
+export default {
+  components: {
+    hdr: Header,
+    'task-list': TaskList,
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style scoped>
+#dashboard {
+  position: absolute;
+  display: block;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 500px;
+  z-index: 9999;
+  /*overflow: hidden;*/
+}
+#dashboard * {
+  box-sizing: border-box;
+}
+#dashboard-inner {
+  background-color: white;
+  margin: 4px;
+}
+</style>

src/Dashboard/Components/Header.vue

@@ -0,0 +1,33 @@
+<template>
+  <section>
+    <h1 class="title">{{ shared.name }} - {{ villageName }}</h1>
+    <p class="version">{{ shared.version }}</p>
+  </section>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      shared: this.$root.$data,
+    };
+  },
+  computed: {
+    villageName() {
+      let village = this.shared.village;
+      return village ? village.name : 'Unknown';
+    },
+  },
+};
+</script>
+
+<style scoped>
+.title {
+  font-size: 160%;
+  margin: 8px;
+}
+.version {
+  font-size: 120%;
+  margin: 8px;
+}
+</style>

src/Dashboard/Components/TaskList.vue

@@ -0,0 +1,57 @@
+<template>
+  <section class="task-list">
+    <p class="summary">Task count: {{ shared.taskList.length }}</p>
+    <div class="container">
+      <table class="task-table">
+        <tr class="task-item" v-for="task in shared.taskList">
+          <td :title="formatDate(task.ts)">{{ formatDate(task.ts) }}</td>
+          <td :title="task.id">{{ task.id }}</td>
+          <td :title="task.name">{{ task.name }}</td>
+          <td :title="JSON.stringify(task.args)">{{ JSON.stringify(task.args) }}</td>
+        </tr>
+      </table>
+    </div>
+  </section>
+</template>
+
+<script>
+import * as dateFormat from 'dateformat';
+
+export default {
+  data() {
+    return {
+      shared: this.$root.$data,
+    };
+  },
+  methods: {
+    formatDate(ts) {
+      const d = new Date(ts * 1000);
+      return dateFormat(d, 'HH:MM:ss');
+    },
+  },
+};
+</script>
+
+<style scoped>
+.task-list {
+  margin: 8px 8px auto;
+}
+.summary {
+  margin: 10px auto 0;
+}
+.container {
+  overflow-y: scroll;
+  overflow-x: hidden;
+  max-height: 300px;
+}
+.task-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 6px auto 0;
+}
+.task-item > td {
+  border-top: 1px solid #ddd;
+  padding: 2px 4px;
+  max-width: 25%;
+}
+</style>

src/Dashboard/Dashboard.ts

@@ -1,13 +1,14 @@
 import * as URLParse from 'url-parse';
-import { markPage, waitForLoad } from '../utils';
+import { markPage, uniqId, waitForLoad } from '../utils';
 import { Scheduler } from '../Scheduler';
 import { TaskQueueRenderer } from '../TaskQueueRenderer';
 import { BuildPage } from '../Page/BuildPage';
-
 import { UpgradeBuildingTask } from '../Task/UpgradeBuildingTask';
 import { grabResources } from '../Page/ResourcesBlock';
-import { grabActiveVillageId, grabVillageList } from '../Page/VillageBlock';
+import { grabActiveVillage, grabActiveVillageId, grabVillageList } from '../Page/VillageBlock';
 import { onResourceSlotCtrlClick, showBuildingSlotIds, showResourceSlotIds } from '../Page/SlotBlock';
+import Vue from 'vue';
+import DashboardApp from './Components/DashboardApp.vue';
 
 export class Dashboard {
     private readonly version: string;
@@ -24,10 +25,6 @@ export class Dashboard {
         const p = new URLParse(window.location.href, true);
         this.log('PARSED LOCATION', p);
 
-        markPage('Dashboard', this.version);
-        this.renderTaskQueue();
-        setInterval(() => this.renderTaskQueue(), 5000);
-
         const res = grabResources();
         this.log('RES', res);
 
@@ -36,6 +33,25 @@ export class Dashboard {
 
         const villageId = grabActiveVillageId();
 
+        const state = {
+            name: 'Dashboard',
+            village: grabActiveVillage(),
+            version: this.version,
+            taskList: this.scheduler.getTaskItems(),
+        };
+
+        const appId = `app-${uniqId()}`;
+        jQuery('body').prepend(`<div id="${appId}"></div>`);
+        new Vue({
+            el: `#${appId}`,
+            data: state,
+            render: h => h(DashboardApp),
+        });
+
+        // markPage('Dashboard', this.version);
+        // this.renderTaskQueue();
+        // setInterval(() => this.renderTaskQueue(), 5000);
+
         const tasks = this.scheduler.getTaskItems();
         const buildingsInQueue = tasks
             .filter(t => t.name === UpgradeBuildingTask.name && t.args.villageId === villageId)

src/Page/VillageBlock.ts

@@ -12,14 +12,18 @@ export function grabVillageList(): VillageList {
     return villageList;
 }
 
-export function grabActiveVillageId(): number {
+export function grabActiveVillage(): Village | undefined {
     const villageList = grabVillageList();
     for (let village of villageList) {
         if (village.active) {
-            return village.id;
+            return village;
         }
     }
-    return 0;
+    return undefined;
+}
+
+export function grabActiveVillageId(): number {
+    return grabActiveVillage()?.id || 0;
 }
 
 function getVillageListItems() {

src/TaskQueueRenderer.ts

@@ -1,6 +1,6 @@
 import { TaskList } from './Storage/TaskQueue';
 import { uniqId } from './utils';
-import dateFormat = require('dateformat');
+import * as dateFormat from 'dateformat';
 
 const ID = uniqId();
 

src/utils.ts

@@ -1,7 +1,3 @@
-import { customAlphabet } from 'nanoid';
-
-const smallIdGenerator = customAlphabet('1234567890abcdef', 6);
-
 export function sleep(ms: number) {
     return new Promise(resolve => setTimeout(resolve, ms));
 }
@@ -28,8 +24,20 @@ export async function waitForLoad() {
     return new Promise(resolve => jQuery(resolve));
 }
 
+const ALPHABET = 'abcdefghijklmnopqrstuvwxyz1234567890';
+const ALPHABET_LENGTH = ALPHABET.length - 1;
+
+function generateId(count: number): string {
+    let str = '';
+    for (let i = 0; i < count; ++i) {
+        let symbolIndex = Math.floor(Math.random() * ALPHABET_LENGTH);
+        str += ALPHABET[symbolIndex];
+    }
+    return str;
+}
+
 export function uniqId(): string {
-    return 'id' + smallIdGenerator();
+    return 'id' + generateId(6);
 }
 
 export function timestamp(): number {

src/vue-shims.d.ts

@@ -0,0 +1,4 @@
+declare module '*.vue' {
+    import Vue from 'vue';
+    export default Vue;
+}