Add scss and styles

package-lock.json

@@ -1833,6 +1833,17 @@
         }
       }
     },
+    "clone-deep": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
+      "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
+      "dev": true,
+      "requires": {
+        "is-plain-object": "^2.0.4",
+        "kind-of": "^6.0.2",
+        "shallow-clone": "^3.0.0"
+      }
+    },
     "collection-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
@@ -3522,9 +3533,9 @@
       }
     },
     "jquery": {
-      "version": "3.4.1",
+      "version": "3.5.1",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz",
-      "integrity": "sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw==",
+      "integrity": "sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg==",
       "dev": true
     },
     "js-tokens": {
@@ -5259,6 +5270,46 @@
         "ret": "~0.1.10"
       }
     },
+    "sass": {
+      "version": "1.26.5",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.26.5.tgz",
+      "integrity": "sha512-FG2swzaZUiX53YzZSjSakzvGtlds0lcbF+URuU9mxOv7WBh7NhXEVDa4kPKN4hN6fC2TkOTOKqiqp6d53N9X5Q==",
+      "dev": true,
+      "requires": {
+        "chokidar": ">=2.0.0 <4.0.0"
+      }
+    },
+    "sass-loader": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-8.0.2.tgz",
+      "integrity": "sha512-7o4dbSK8/Ol2KflEmSco4jTjQoV988bM82P9CZdmo9hR3RLnvNc0ufMNdMrB0caq38JQ/FgF4/7RcbcfKzxoFQ==",
+      "dev": true,
+      "requires": {
+        "clone-deep": "^4.0.1",
+        "loader-utils": "^1.2.3",
+        "neo-async": "^2.6.1",
+        "schema-utils": "^2.6.1",
+        "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "schema-utils": {
+          "version": "2.6.6",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.6.6.tgz",
+          "integrity": "sha512-wHutF/WPSbIi9x6ctjGGk2Hvl0VOz5l3EKEuKbjPlB30mKZUzb9A5k9yEXRX3pwyqVLPvpfZZEllaFq/M718hA==",
+          "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
+        }
+      }
+    },
     "schema-utils": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
@@ -5327,6 +5378,15 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "shallow-clone": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
+      "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
+      "dev": true,
+      "requires": {
+        "kind-of": "^6.0.2"
+      }
+    },
     "shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",

package.json

@@ -31,12 +31,14 @@
     "chai": "^4.2.0",
     "css-loader": "^3.5.2",
     "dateformat": "^3.0.3",
-    "jquery": "^3.4.1",
+    "jquery": "^3.5.1",
     "mocha": "^7.1.1",
     "mocha-junit-reporter": "^1.23.3",
     "nyc": "^15.0.0",
     "prettier": "^1.19.1",
     "raw-loader": "^4.0.0",
+    "sass": "^1.26.5",
+    "sass-loader": "^8.0.2",
     "style-loader": "^1.1.3",
     "ts-loader": "^6.2.2",
     "ts-node": "^8.8.1",

src/DashboardView/Dashboard.vue

@@ -1,5 +1,5 @@
 <template>
-  <main id="dashboard">
+  <main id="dashboard" v-on:keyup.76="toggleLogs">
     <section id="dashboard-primary">
       <hdr></hdr>
       <village-state-list />
@@ -21,6 +21,7 @@ import QuickActions from './QuickActions';
 import VillageStateList from './VillageStateList';
 import LogList from './LogList';
 import { mapState } from 'vuex';
+import { Mutations } from './Store';
 export default {
   components: {
     'hdr': Header,
@@ -37,6 +38,11 @@ export default {
   computed: mapState({
     isLogsVisible: state => state.views.logs,
   }),
+  methods: {
+    toggleLogs() {
+      this.$store.commit(Mutations.toggleLogs);
+    },
+  },
 };
 </script>
 

src/DashboardView/Header.vue

@@ -3,14 +3,19 @@
     <h1 class="title">
       [{{ shared.name }}] {{ villageName }}
       <span class="version">- {{ shared.version }}</span>
-      <a href="#" v-on:click.prevent="pause()">
+    </h1>
+    <p>
+      <a href="#" v-on:click.prevent="pause">
         pause <span v-if="shared.pauseSeconds" v-text="shared.pauseSeconds"></span>
       </a>
-    </h1>
+      <a href="#" v-on:click.prevent="toggleLogs">logs</a>
+    </p>
   </section>
 </template>
 
 <script>
+import { Mutations } from './Store';
+
 export default {
   data() {
     return {
@@ -27,6 +32,9 @@ export default {
     pause() {
       this.shared.pause();
     },
+    toggleLogs() {
+      this.$store.commit(Mutations.toggleLogs);
+    },
   },
 };
 </script>

src/DashboardView/LogList.vue

@@ -1,8 +1,8 @@
 <template>
   <section class="log-list">
-    <p><strong>Logs</strong>, <a href="#" v-on:click.prevent="close">close</a></p>
+    <p class="summary"><strong>Logs</strong>, <a href="#" v-on:click.prevent="close">close</a></p>
     <table class="log-table">
-      <tr v-for="record in logs" class="log-record">
+      <tr v-for="record in logs" :class="rowClasses(record)">
         <td v-text="record.level"></td>
         <td v-text="formatDate(record.ts)"></td>
         <td v-text="record.message"></td>
@@ -23,6 +23,12 @@ export default {
     }),
   },
   methods: {
+    rowClasses(record) {
+      return {
+        error: record.level === 'error' || undefined,
+        warning: record.level === 'warn' || undefined,
+      };
+    },
     formatDate(ts) {
       const d = new Date(ts * 1000);
       return dateFormat(d, 'HH:MM:ss');
@@ -34,18 +40,23 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+@import 'style';
+.summary {
+  @include with-padding;
+}
 .log-list {
   background-color: white;
 }
 .log-table {
-  width: 100%;
+  @extend %table;
-  border-collapse: collapse;
+
-  margin: 6px auto 0;
+  .error {
-}
+    color: $error-color;
-.log-record > td {
+  }
-  border-top: 1px solid #ddd;
+
-  border-left: 1px solid #ddd;
+  .warning {
-  padding: 2px 4px;
+    color: $waring-color;
+  }
 }
 </style>

src/DashboardView/ResourceBalance.vue

@@ -49,11 +49,12 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+@import 'style';
 .good {
-  color: green;
+  color: $success-color;
 }
 .bad {
-  color: red;
+  color: $error-color;
 }
 </style>

src/DashboardView/Store.ts

@@ -5,6 +5,7 @@ import { LogStorage } from '../Storage/LogStorage';
 export enum Mutations {
     showLogs = 'showLogs',
     hideLogs = 'hideLogs',
+    toggleLogs = 'toggleLogs',
     updateLogs = 'updateLogs',
 }
 
@@ -23,6 +24,9 @@ export function createStore() {
             [Mutations.hideLogs](state) {
                 state.views.logs = false;
             },
+            [Mutations.toggleLogs](state) {
+                state.views.logs = !state.views.logs;
+            },
             [Mutations.updateLogs](state, { logs }) {
                 state.logs = logs;
             },

src/DashboardView/TaskList.vue

@@ -59,7 +59,8 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+@import 'style';
 .task-list {
   margin-top: 8px;
   margin-bottom: 8px;
@@ -72,14 +73,7 @@ export default {
   overflow-x: hidden;
 }
 .task-table {
-  width: 100%;
+  @extend %table;
-  border-collapse: collapse;
-  margin: 6px auto 0;
-}
-.task-item > td {
-  border-top: 1px solid #ddd;
-  border-left: 1px solid #ddd;
-  padding: 2px 4px;
 }
 .this-village {
   color: blue;

src/DashboardView/VillageResource.vue

@@ -41,11 +41,12 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+@import 'style';
 .warning {
-  color: orange;
+  color: $waring-color;
 }
 .bad {
-  color: red;
+  color: $error-color;
 }
 </style>

src/DashboardView/style.scss

@@ -0,0 +1,22 @@
+$component-padding-x: 4px;
+$component-padding-y: 2px;
+
+$success-color: #1fb840;
+$error-color: #dc3545;
+$waring-color: #d49e00;
+
+@mixin with-padding {
+  padding: $component-padding-y $component-padding-x;
+}
+
+%table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 6px auto 0;
+
+  td {
+    border-top: 1px solid #ddd;
+    border-left: 1px solid #ddd;
+    @include with-padding
+  }
+}

webpack.config.js

@@ -23,8 +23,8 @@ module.exports = (env = {}) => ({
                 },
             },
             {
-                test: /\.css$/,
+                test: /\.(c|sc|sa)ss$/i,
-                use: ['style-loader', 'css-loader'],
+                use: ['style-loader', 'css-loader', 'sass-loader'],
             },
             {
                 test: /\.vue$/,