Rewrite dashboard with Vue

Makefile

@@ -14,6 +14,7 @@ build-min: write-version
 
 format:
 	tools/npm run-script format
+	tools/npm run-script format-vue
 
 test:
 	tools/npm run test

package-lock.json

@@ -351,15 +351,6 @@
       "integrity": "sha512-ZvO2tAcjmMi8V/5Z3JsyofMe3hasRcaw88cto5etSVMwVQfeivGAlEYmaQgceUSVYFofVjT+ioHsATjdWcFt1w==",
       "dev": true
     },
-    "@types/nanoid": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@types/nanoid/-/nanoid-2.1.0.tgz",
-      "integrity": "sha512-xdkn/oRTA0GSNPLIKZgHWqDTWZsVrieKomxJBOQUK9YDD+zfSgmwD5t4WJYra5S7XyhTw7tfvwznW+pFexaepQ==",
-      "dev": true,
-      "requires": {
-        "@types/node": "*"
-      }
-    },
     "@types/node": {
       "version": "13.9.4",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-13.9.4.tgz",
@@ -378,6 +369,47 @@
       "integrity": "sha512-4kHAkbV/OfW2kb5BLVUuUMoumB3CP8rHqlw48aHvFy5tf9ER0AfOonBlX29l/DD68G70DmyhRlSYfQPSYpC5Vw==",
       "dev": true
     },
+    "@vue/component-compiler-utils": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-3.1.2.tgz",
+      "integrity": "sha512-QLq9z8m79mCinpaEeSURhnNCN6djxpHw0lpP/bodMlt5kALfONpryMthvnrQOlTcIKoF+VoPi+lPHUYeDFPXug==",
+      "dev": true,
+      "requires": {
+        "consolidate": "^0.15.1",
+        "hash-sum": "^1.0.2",
+        "lru-cache": "^4.1.2",
+        "merge-source-map": "^1.1.0",
+        "postcss": "^7.0.14",
+        "postcss-selector-parser": "^6.0.2",
+        "prettier": "^1.18.2",
+        "source-map": "~0.6.1",
+        "vue-template-es2015-compiler": "^1.9.0"
+      },
+      "dependencies": {
+        "lru-cache": {
+          "version": "4.1.5",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
+          "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
+          "dev": true,
+          "requires": {
+            "pseudomap": "^1.0.2",
+            "yallist": "^2.1.2"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "yallist": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
+          "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
+          "dev": true
+        }
+      }
+    },
     "@webassemblyjs/ast": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.9.0.tgz",
@@ -1862,6 +1894,15 @@
       "integrity": "sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA==",
       "dev": true
     },
+    "consolidate": {
+      "version": "0.15.1",
+      "resolved": "https://registry.npmjs.org/consolidate/-/consolidate-0.15.1.tgz",
+      "integrity": "sha512-DW46nrsMJgy9kqAbPt5rKaCr7uFtpo4mSUvLHIUbJEjm0vo+aY5QLwBUq3FK4tRnJr/X0Psc0C4jf/h+HtXSMw==",
+      "dev": true,
+      "requires": {
+        "bluebird": "^3.1.1"
+      }
+    },
     "constants-browserify": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz",
@@ -1978,6 +2019,51 @@
         "randomfill": "^1.0.3"
       }
     },
+    "css-loader": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.5.2.tgz",
+      "integrity": "sha512-hDL0DPopg6zQQSRlZm0hyeaqIRnL0wbWjay9BZxoiJBpbfOW4WHfbaYQhwnDmEa0kZUc1CJ3IFo15ot1yULMIQ==",
+      "dev": true,
+      "requires": {
+        "camelcase": "^5.3.1",
+        "cssesc": "^3.0.0",
+        "icss-utils": "^4.1.1",
+        "loader-utils": "^1.2.3",
+        "normalize-path": "^3.0.0",
+        "postcss": "^7.0.27",
+        "postcss-modules-extract-imports": "^2.0.0",
+        "postcss-modules-local-by-default": "^3.0.2",
+        "postcss-modules-scope": "^2.2.0",
+        "postcss-modules-values": "^3.0.0",
+        "postcss-value-parser": "^4.0.3",
+        "schema-utils": "^2.6.5",
+        "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "schema-utils": {
+          "version": "2.6.5",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.6.5.tgz",
+          "integrity": "sha512-5KXuwKziQrTVHh8j/Uxz+QUbxkaLW9X/86NBlx/gnKgtsZA2GIVMUn17qWhRFwF8jdYb3Dig5hRO/W5mZqy6SQ==",
+          "dev": true,
+          "requires": {
+            "ajv": "^6.12.0",
+            "ajv-keywords": "^3.4.1"
+          }
+        },
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
+        }
+      }
+    },
+    "cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true
+    },
     "cyclist": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
@@ -1990,6 +2076,12 @@
       "integrity": "sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==",
       "dev": true
     },
+    "de-indent": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
+      "integrity": "sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=",
+      "dev": true
+    },
     "debug": {
       "version": "3.2.6",
       "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
@@ -2832,6 +2924,12 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "hash-sum": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
+      "integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=",
+      "dev": true
+    },
     "hash.js": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.7.tgz",
@@ -2898,6 +2996,15 @@
       "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=",
       "dev": true
     },
+    "icss-utils": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-4.1.1.tgz",
+      "integrity": "sha512-4aFq7wvWyMHKgxsH8QQtGpvbASCf+eM3wPRLI6R+MgAnTCZ6STYsRvttLvRWK0Nfif5piF394St3HeJDaljGPA==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.14"
+      }
+    },
     "ieee754": {
       "version": "1.1.13",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.13.tgz",
@@ -2922,6 +3029,12 @@
       "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
       "dev": true
     },
+    "indexes-of": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
+      "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=",
+      "dev": true
+    },
     "infer-owner": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
@@ -3615,6 +3728,23 @@
         "readable-stream": "^2.0.1"
       }
     },
+    "merge-source-map": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/merge-source-map/-/merge-source-map-1.1.0.tgz",
+      "integrity": "sha512-Qkcp7P2ygktpMPh2mCQZaf3jhN6D3Z/qVZHSdWvQ+2Ef5HgRAPBO57A77+ENm0CPx2+1Ce/MYKi3ymqdfuqibw==",
+      "dev": true,
+      "requires": {
+        "source-map": "^0.6.1"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
     "micromatch": {
       "version": "3.1.10",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
@@ -3979,12 +4109,6 @@
       "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
       "dev": true
     },
-    "nanoid": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.0.2.tgz",
-      "integrity": "sha512-WOjyy/xu3199NlQiQWlx7VbspSFlGtOxa1bRX9ebmXOnp1fje4bJfjPs1wLQ8jZbJUfD+yceJmw879ZSaVJkdQ==",
-      "dev": true
-    },
     "nanomatch": {
       "version": "1.2.9",
       "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.9.tgz",
@@ -4681,6 +4805,114 @@
       "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=",
       "dev": true
     },
+    "postcss": {
+      "version": "7.0.27",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
+      "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+      "dev": true,
+      "requires": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "dependencies": {
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+              "dev": true,
+              "requires": {
+                "has-flag": "^3.0.0"
+              }
+            }
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "postcss-modules-extract-imports": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-2.0.0.tgz",
+      "integrity": "sha512-LaYLDNS4SG8Q5WAWqIJgdHPJrDDr/Lv775rMBFUbgjTz6j34lUznACHcdRWroPvXANP2Vj7yNK57vp9eFqzLWQ==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.5"
+      }
+    },
+    "postcss-modules-local-by-default": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-3.0.2.tgz",
+      "integrity": "sha512-jM/V8eqM4oJ/22j0gx4jrp63GSvDH6v86OqyTHHUvk4/k1vceipZsaymiZ5PvocqZOl5SFHiFJqjs3la0wnfIQ==",
+      "dev": true,
+      "requires": {
+        "icss-utils": "^4.1.1",
+        "postcss": "^7.0.16",
+        "postcss-selector-parser": "^6.0.2",
+        "postcss-value-parser": "^4.0.0"
+      }
+    },
+    "postcss-modules-scope": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-2.2.0.tgz",
+      "integrity": "sha512-YyEgsTMRpNd+HmyC7H/mh3y+MeFWevy7V1evVhJWewmMbjDHIbZbOXICC2y+m1xI1UVfIT1HMW/O04Hxyu9oXQ==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.6",
+        "postcss-selector-parser": "^6.0.0"
+      }
+    },
+    "postcss-modules-values": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-3.0.0.tgz",
+      "integrity": "sha512-1//E5jCBrZ9DmRX+zCtmQtRSV6PV42Ix7Bzj9GbwJceduuf7IqP8MgeTXuRDHOWj2m0VzZD5+roFWDuU8RQjcg==",
+      "dev": true,
+      "requires": {
+        "icss-utils": "^4.0.0",
+        "postcss": "^7.0.6"
+      }
+    },
+    "postcss-selector-parser": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz",
+      "integrity": "sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==",
+      "dev": true,
+      "requires": {
+        "cssesc": "^3.0.0",
+        "indexes-of": "^1.0.1",
+        "uniq": "^1.0.1"
+      }
+    },
+    "postcss-value-parser": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.0.3.tgz",
+      "integrity": "sha512-N7h4pG+Nnu5BEIzyeaaIYWs0LI5XC40OrRh5L60z0QjFsqGWcHcbkBvpe1WYpcIS9yQ8sOi/vIPt1ejQCrMVrg==",
+      "dev": true
+    },
     "prettier": {
       "version": "1.19.1",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz",
@@ -4720,6 +4952,12 @@
       "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY=",
       "dev": true
     },
+    "pseudomap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
+      "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=",
+      "dev": true
+    },
     "public-encrypt": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.3.tgz",
@@ -5482,6 +5720,28 @@
       "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
       "dev": true
     },
+    "style-loader": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-1.1.3.tgz",
+      "integrity": "sha512-rlkH7X/22yuwFYK357fMN/BxYOorfnfq0eD7+vqlemSK4wEcejFF1dg4zxP0euBW8NrYx2WZzZ8PPFevr7D+Kw==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.2.3",
+        "schema-utils": "^2.6.4"
+      },
+      "dependencies": {
+        "schema-utils": {
+          "version": "2.6.5",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.6.5.tgz",
+          "integrity": "sha512-5KXuwKziQrTVHh8j/Uxz+QUbxkaLW9X/86NBlx/gnKgtsZA2GIVMUn17qWhRFwF8jdYb3Dig5hRO/W5mZqy6SQ==",
+          "dev": true,
+          "requires": {
+            "ajv": "^6.12.0",
+            "ajv-keywords": "^3.4.1"
+          }
+        }
+      }
+    },
     "supports-color": {
       "version": "5.4.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz",
@@ -5783,6 +6043,12 @@
         "set-value": "^2.0.1"
       }
     },
+    "uniq": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz",
+      "integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=",
+      "dev": true
+    },
     "unique-filename": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-1.1.1.tgz",
@@ -5926,6 +6192,63 @@
       "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==",
       "dev": true
     },
+    "vue": {
+      "version": "2.6.11",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.11.tgz",
+      "integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ==",
+      "dev": true
+    },
+    "vue-hot-reload-api": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
+      "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
+      "dev": true
+    },
+    "vue-loader": {
+      "version": "15.9.1",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.1.tgz",
+      "integrity": "sha512-IaPU2KOPjs/QjMlxFs/TiTtQUSbftQ7lsAvoxe21rtcQohsMhx+1AltXCNhZIpIn46PtODiAgz+o8RbMpKtmJw==",
+      "dev": true,
+      "requires": {
+        "@vue/component-compiler-utils": "^3.1.0",
+        "hash-sum": "^1.0.2",
+        "loader-utils": "^1.1.0",
+        "vue-hot-reload-api": "^2.3.0",
+        "vue-style-loader": "^4.1.0"
+      }
+    },
+    "vue-style-loader": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",
+      "integrity": "sha512-0ip8ge6Gzz/Bk0iHovU9XAUQaFt/G2B61bnWa2tCcqqdgfHs1lF9xXorFbE55Gmy92okFT+8bfmySuUOu13vxQ==",
+      "dev": true,
+      "requires": {
+        "hash-sum": "^1.0.2",
+        "loader-utils": "^1.0.2"
+      }
+    },
+    "vue-template-compiler": {
+      "version": "2.6.11",
+      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.11.tgz",
+      "integrity": "sha512-KIq15bvQDrcCjpGjrAhx4mUlyyHfdmTaoNfeoATHLAiWB+MU3cx4lOzMwrnUh9cCxy0Lt1T11hAFY6TQgroUAA==",
+      "dev": true,
+      "requires": {
+        "de-indent": "^1.0.2",
+        "he": "^1.1.0"
+      }
+    },
+    "vue-template-es2015-compiler": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
+      "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
+      "dev": true
+    },
+    "vuex": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.3.tgz",
+      "integrity": "sha512-k8vZqNMSNMgKelVZAPYw5MNb2xWSmVgCKtYKAptvm9YtZiOXnRXFWu//Y9zQNORTrm3dNj1n/WaZZI26tIX6Mw==",
+      "dev": true
+    },
     "watchpack": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",

package.json

@@ -17,31 +17,36 @@
     "build": "webpack --env.production",
     "format": "prettier --tab-width=4 --print-width 120 --single-quote --trailing-comma es5 --write '{src,tests}/**/*.{ts,js}'",
     "format-check": "prettier --tab-width=4 --print-width 120 --single-quote --trailing-comma es5 --check '{src,tests}/**/*.{ts,js}'",
-    "format-wp": "prettier --tab-width=4 --print-width 120 --single-quote --trailing-comma es5 --write 'webpack.config.js'",
+    "format-vue": "prettier --tab-width=2 --print-width 120 --single-quote --trailing-comma es5 --write '{src,tests}/**/*.vue'",
-    "format-md": "prettier --write './*.md'"
+    "format-wp": "prettier --tab-width=4 --print-width 120 --single-quote --trailing-comma es5 --write 'webpack.config.js'"
   },
   "devDependencies": {
     "@types/chai": "^4.2.11",
     "@types/dateformat": "^3.0.1",
     "@types/jquery": "^3.3.34",
     "@types/mocha": "^7.0.2",
-    "@types/nanoid": "^2.1.0",
     "@types/node": "^13.9.4",
     "@types/url-parse": "^1.4.3",
     "chai": "^4.2.0",
+    "css-loader": "^3.5.2",
     "dateformat": "^3.0.3",
     "jquery": "^3.4.1",
     "mocha": "^7.1.1",
     "mocha-junit-reporter": "^1.23.3",
-    "nanoid": "^3.0.2",
     "nyc": "^15.0.0",
     "prettier": "^1.19.1",
     "raw-loader": "^4.0.0",
+    "style-loader": "^1.1.3",
     "ts-loader": "^6.2.2",
     "ts-node": "^8.8.1",
     "typescript": "^3.8.3",
     "url-parse": "^1.4.7",
+    "vue": "^2.6.11",
+    "vue-loader": "^15.9.1",
+    "vue-template-compiler": "^2.6.11",
+    "vuex": "^3.1.3",
     "webpack": "^4.42.1",
     "webpack-cli": "^3.3.11"
-  }
+  },
+  "dependencies": {}
 }

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;
+}

tsconfig.json

@@ -3,12 +3,12 @@
     "allowJs": true,
     "experimentalDecorators": true,
     "isolatedModules": true,
-    "module": "commonjs",
+    "module": "es2015",
     "outDir": "./dist",
     "strictNullChecks": true,
     "strictPropertyInitialization": true,
-    "target": "ES2018",
+    "target": "es2015",
-    "types": ["node", "url-parse", "jquery", "nanoid", "mocha", "chai"]
+    "types": ["node", "url-parse", "jquery", "mocha", "chai"]
   },
   "include": [
     "./src/**/*"

webpack.config.js

@@ -1,4 +1,5 @@
 const path = require('path');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
 
 module.exports = (env = {}) => ({
     mode: env.production ? 'production' : 'development',
@@ -11,7 +12,7 @@ module.exports = (env = {}) => ({
         umdNamedDefine: true,
     },
     resolve: {
-        extensions: ['.ts', '.js'],
+        extensions: ['.ts', '.js', '.vue'],
     },
     module: {
         rules: [
@@ -21,6 +22,19 @@ module.exports = (env = {}) => ({
                     loader: 'ts-loader',
                 },
             },
+            {
+                test: /\.css$/,
+                use: ['style-loader', 'css-loader'],
+            },
+            {
+                test: /\.vue$/,
+                use: {
+                    loader: 'vue-loader',
+                }
+            },
         ],
     },
+    plugins: [
+        new VueLoaderPlugin(),
+    ],
 });