fix

lib/db/index.js

@@ -38,6 +38,9 @@ async function init (use_fake_seed) {
 
   // await db.seed.run ({ specific: 'fake.js' });
   await job (db);
+  setInterval (() => {
+    job (db);
+  }, 3600e3);
 }
 
 function get_db () {

lib/db/job.js

@@ -40,6 +40,8 @@ async function batch_update (knex, ids, data) {
 }
 
 module.exports = async (knex) => {
+  console.log ('-- running database cleanup --');
+
   const apps = await knex ('app')
     .select ('id', 'name', 'reduction');
 

package.json

@@ -18,7 +18,7 @@
     "core-js": "^3.6.5",
     "express": "^4.17.1",
     "express-http-proxy": "^1.6.2",
-    "faker": "^4.1.0",
+    "faker": "^5.1.0",
     "knex": "^0.21.2",
     "lodash.chunk": "^4.2.0",
     "sqlite3": "^5.0.0",
@@ -26,7 +26,7 @@
     "vue-chartjs": "^3.5.0",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0",
-    "yargs": "^15.4.1"
+    "yargs": "^16.1.0"
   },
   "devDependencies": {
     "@sapphirecode/eslint-config": "^2.1.16",
@@ -38,7 +38,7 @@
     "@vue/cli-service": "^4.4.0",
     "babel-eslint": "^10.1.0",
     "eslint": "^7.5.0",
-    "eslint-plugin-vue": "^6.2.2",
+    "eslint-plugin-vue": "^7.1.0",
     "vue-template-compiler": "^2.6.11"
   },
   "license": "GPL-3.0-or-later",

spec/api.json

@@ -0,0 +1,28 @@
+{
+  "openapi":"3.0.2",
+  "info": {
+    "title":"API Title",
+    "version":"1.0"
+  },
+  "servers": [
+    {"url":"https://appreports.scode.ovh/v1"}
+  ],
+  "paths": {
+    "/app": {
+      "get": {
+        "description": "list all apps",
+        "parameters": [],
+        "responses": {
+          "200": {
+            "description": "OK",
+            "content": {
+              "application/json": {
+                
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/App.vue

@@ -1,34 +1,15 @@
 <template>
   <div id="app">
-    <p
-      id="build-info"
-      v-text="version"
-    />
+    <Style />
     <router-view />
   </div>
 </template>
 
 <script>
-import version from '../version';
+import Style from './Style.vue';
 
-export default {
-  data () {
-    return { version: `build: ${version}` };
-  }
-};
+export default { components: { Style } };
 </script>
 
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
-#build-info {
-  font-size: 10pt;
-  text-align: left;
-}
+<style scoped>
 </style>

src/Style.vue

@@ -0,0 +1,93 @@
+<template>
+  <div :class="classes" />
+</template>
+
+<script>
+import Vuex from 'vuex';
+
+export default {
+  computed: {
+    classes () {
+      if (this.theme !== '')
+        return { [this.theme]: true };
+      return {};
+    },
+    ...Vuex.mapState ({ theme: (state) => state.theme })
+  }
+};
+</script>
+
+<style>
+:root {
+  /* generated with adobe color (compound) */
+  --Color-A: #1254B8;
+  --Color-B: #355585;
+  --Color-C: #00D8EB;
+  --Color-D: #F0632F;
+  --Color-E: #BD311E;
+  --Color-0: #000;
+  --Color-1: #222;
+
+  --color-background: var(--Color-0);
+  --color-background-1: var(--Color-1);
+  --color-foreground: var(--Color-B);
+  --color-contrast: var(--Color-A);
+  --color-high-contrast: var(--Color-C);
+  --color-focus: var(--Color-D);
+  --color-accent: var(--Color-E);
+
+  --background: var(--color-background);
+  --background-1: var(--color-background-1);
+  --container-border: 1px solid var(--color-high-contrast);
+  --sub-container-border: 1px solid var(--color-contrast);
+  --accent-border: 1px solid var(--color-accent);
+  --font-family: Avenir, Helvetica, Arial, sans-serif;
+}
+
+body {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  background: var(--background);
+  color: var(--color-foreground);
+
+  font-family: var(--font-family);
+}
+
+button {
+  border: var(--accent-border);
+  background: inherit;
+  color: inherit;
+  cursor: pointer;
+  transition:
+    border-color ease-in-out .1s,
+    color ease-in-out .1s;
+}
+
+button:hover {
+  border-color: var(--color-focus);
+  color: var(--color-focus);
+}
+
+input {
+  border: var(--accent-border);
+  background: inherit;
+  color: inherit;
+}
+
+select {
+  border: var(--accent-border);
+  background: inherit;
+  color: inherit;
+}
+
+select > option {
+  background: var(--background-1);
+  color: var(--color-foreground);
+  font-weight: bold;
+}
+
+.large_button {
+  padding: 10px;
+}
+</style>

src/components/AppView.vue

@@ -1,11 +1,24 @@
 <template>
+  <div>
+    <button
+      type="button"
+      class="large_button"
+      @click="settings_btn_action"
+      v-text="editing?'Close':'Settings'"
+    />
     <div
-    class="grid"
+      v-if="editing"
+      class="spacer"
     >
       <ConfigEditor
         v-model="config"
         :template="template"
       />
+    </div>
+    <div
+      v-else
+      class="grid"
+    >
       <ViewComponent
         v-for="(item,key) of saved_config.displays"
         :key="key"
@@ -13,30 +26,38 @@
         :data="log(item.source)"
       />
     </div>
+  </div>
 </template>
 
 <script>
 import Vuex from 'vuex';
 import { copy_object } from '@sapphirecode/utilities';
-import ViewComponent from '../components/ViewComponent.vue';
-import ConfigEditor from '../components/ConfigEditor.vue';
 import default_config from '../default';
 import default_template from '../template';
+import ViewComponent from './ViewComponent.vue';
+import ConfigEditor from './ConfigEditor.vue';
 
 export default {
   components: { ViewComponent, ConfigEditor },
+  props:      {
+    app: {
+      type:     Number,
+      required: true
+    }
+  },
   data () {
     return {
       config:       copy_object (default_config),
       saved_config: copy_object (default_config),
-      template:     default_template
+      template:     default_template,
+      editing:      false
     };
   },
   computed: { ...Vuex.mapGetters ({ log: 'log' }) },
   mounted () {
     this.fetch_log ();
     document.body.addEventListener ('keydown', (ev) => {
-      if (ev.key === 's' && ev.ctrlKey) {
+      if (ev.key === 's' && ev.ctrlKey && this.editing) {
         this.save_config ();
         ev.preventDefault ();
         return false;
@@ -52,13 +73,20 @@ export default {
       });
       this.saved_config = copy_object (this.config);
       this.fetch_log ();
+      this.editing = false;
     },
     fetch_log () {
       this.get_log ({
-        app_id:  this.$route.params.id,
+        app_id:  this.app,
         sources: this.saved_config.sources
       });
     },
+    settings_btn_action () {
+      if (this.editing)
+        this.save_config ();
+      else
+        this.editing = true;
+    },
     ...Vuex.mapActions ({ get_log: 'get_log' })
   }
 };
@@ -73,7 +101,7 @@ export default {
   height: 100%;
 }
 
-p {
-  display: inline-block;
+.spacer {
+  margin: 10px;
 }
 </style>

src/components/ChartView.vue

@@ -33,15 +33,19 @@ export default {
           yAxisID:         index,
           borderColor:     y.color,
           backgroundColor: y.fill,
-          spanGaps:        true
+          spanGaps:        true,
+          lineTension:     0
         };
         let last = null;
         for (let i = 0; i < this.data.length; i++) {
           const data = this.data[i];
           const val = resolve_data (data, y.field);
+          const next = this.data.length - 1 === i
+            ? val
+            : resolve_data (this.data[i + 1], y.field);
           if (
             !this.remove_duplicates
-            || last !== val
+            || last !== val || next !== val
             || this.data.length - 1 === i
           )
             res.data.push (val);
@@ -66,7 +70,16 @@ export default {
               if (typeof y.max_value === 'number')
                 range.suggestedMax = y.max_value;
 
-              return { id: index, ticks: range };
+              return {
+                id:         index,
+                ticks:      range,
+                scaleLabel: {
+                  labelString: y.label,
+                  display:     true,
+                  lineHeight:  1,
+                  padding:     0.1
+                }
+              };
             }
           )
         }

src/components/ConfigEditor.vue

@@ -196,7 +196,7 @@ export default {
 }
 
 .editor {
-  border: 1px solid black;
+  border: var(--sub-container-border);
   margin-left: 10px;
   grid-column: editor;
 }

src/components/TableView.vue

@@ -4,6 +4,13 @@
     class="table_view"
   >
     <table>
+      <tr v-if="headings.length > 0">
+        <th
+          v-for="(heading,key) of headings"
+          :key="key"
+          v-text="heading"
+        />
+      </tr>
       <tr
         v-for="(item,key) of items"
         :key="key"
@@ -30,6 +37,10 @@ export default {
     columns: {
       type:     Array,
       required: true
+    },
+    headings: {
+      type:    Array,
+      default: () => []
     }
   },
   methods: { resolve_data }
@@ -38,8 +49,7 @@ export default {
 
 <style>
 .table_view {
-  overflow: auto;
-  border: 1px solid blue;
+  overflow-y: scoll;
   width: max-content;
   max-width: 100%;
   max-height: 100vh;
@@ -51,11 +61,12 @@ table {
 }
 
 tr:nth-child(odd) {
-  background-color: #ddd;
+  background-color: var(--color-background-1);
+  color: var(--color-accent);
 }
 
-td {
-  border: 1px solid black;
-  margin: 0;
+td, th {
+  border: var(--sub-container-border);
+  padding: 3px;
 }
 </style>

src/components/ViewComponent.vue

@@ -10,6 +10,7 @@
     v-else
     :items="data"
     :columns="config.columns"
+    :headings="config.headings"
   />
 </template>
 
@@ -32,6 +33,5 @@ export default {
 };
 </script>
 
-<style>
-
+<style scoped>
 </style>

src/default.js

@@ -7,16 +7,9 @@
 
 export default {
   sources: [
-    {
-      name:   'default',
-      limit:  140,
-      offset: 0
-    },
-    {
-      name:   'secondary',
-      limit:  10,
-      offset: 0
-    }
+    { name: 'default', limit: 140, offset: 0 },
+    { name: 'secondary', limit: 10, offset: 0 },
+    { name: 'version', limit: 1, offset: 0 }
   ],
   displays: [
     {
@@ -52,10 +45,29 @@ export default {
     {
       source:   'secondary',
       type:     'table',
+      headings: [
+        'timestamp',
+        'temperature',
+        'humidity',
+        'light',
+        'fan'
+      ],
       columns: [
         'timestamp',
-        'data'
+        'data/temperature',
+        'data/humidity',
+        'data/light',
+        'data/latch'
       ]
+    },
+    {
+      source:            'version',
+      type:              'table',
+      headings:          [ 'hardware version' ],
+      columns:           [ 'message' ],
+      x:                 '',
+      y:                 [],
+      remove_duplicates: false
     }
   ]
 };

src/router/index.js

@@ -9,7 +9,6 @@
 
 import Vue from 'vue';
 import VueRouter from 'vue-router';
-import AppView from '../views/AppView.vue';
 import NotFound from '../views/NotFound.vue';
 import Home from '../views/Home.vue';
 
@@ -23,8 +22,7 @@ const routes = [
   },
   {
     path:      '/app/:id',
-    name:      'AppView',
-    component: AppView
+    redirect: '/'
   },
   {
     path:      '/404',

src/store/index.js

@@ -8,10 +8,12 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
 
+import version from '../../version';
+
 Vue.use (Vuex);
 
 export default new Vuex.Store ({
-  state:     { log: {} },
+  state:     { log: {}, version, theme: '' },
   mutations: {
     set_log (state, log) {
       state.log = log;
@@ -41,13 +43,11 @@ export default new Vuex.Store ({
           .then ((res) => res.json ())
           .then ((json) => json.map ((entry) => {
             entry.data = JSON.parse (entry.data);
-            const time
-            = (/(?<y>[0-9]+-[0-9]+-[0-9]+)T(?<t>[0-9]+:[0-9]+:[0-9]+)/u)
-              .exec (
-                new Date (entry.timestamp)
-                  .toISOString ()
-              );
-            entry.timestamp = `${time.groups.y} ${time.groups.t}`;
+            const time = new Date (entry.timestamp);
+            time.setMinutes (time.getMinutes () - time.getTimezoneOffset ());
+            entry.timestamp = time.toISOString ()
+              .replace ('T', ' ')
+              .substr (0, 19);
             return entry;
           }));
         logs[source.name] = log;

src/template.js

@@ -47,6 +47,12 @@ export default {
               'chart'
             ]
           },
+          {
+            name:  'headings',
+            type:  'array',
+            child: { type: 'string' },
+            if:    { prop: 'type', op: '=', val: 'table' }
+          },
           {
             name:  'columns',
             type:  'array',

src/views/Home.vue

@@ -1,21 +1,49 @@
 <template>
-  <ul>
-    <li
+  <div class="main_view">
+    <div class="app_list">
+      <div
         v-for="(app,key) in apps"
         :key="key"
-    >
-      <a
-        :href="'/app/' + app.id"
+        class="app_list_item"
+        @click="active = app.id"
         v-text="app.name"
       />
-    </li>
-  </ul>
+    </div>
+    <div class="data_view">
+      <AppView
+        v-if="active !== null"
+        class="data_view_display"
+        :app="active"
+      />
+      <p
+        v-else
+        class="info"
+      >
+        Select an app to view its reports
+      </p>
+    </div>
+    <div class="footer">
+      <p
+        class="build_info"
+        v-text="version"
+      />
+    </div>
+  </div>
 </template>
 
 <script>
+import Vuex from 'vuex';
+import AppView from '../components/AppView.vue';
+
 export default {
+  components: { AppView },
   data () {
-    return { apps: [] };
+    return { apps: [], active: null };
+  },
+  computed: {
+    ...Vuex.mapState (
+      { version: ({ version }) => `appreports build: ${version}` }
+    )
   },
   async mounted () {
     this.apps = await fetch ('/app')
@@ -25,5 +53,53 @@ export default {
 </script>
 
 <style>
+.main_view {
+  display: grid;
+  grid-template-areas:
+    'sidebar main'
+    'footer footer';
 
+  grid-template-columns: minmax(min-content,max-content) 1fr;
+  grid-template-rows: minmax(80vh, auto) 1fr;
+}
+
+.app_list {
+  grid-area: sidebar;
+  border: var(--container-border);
+}
+
+.app_list_item {
+  cursor: pointer;
+  margin: 0;
+  padding: 5px;
+  border: var(--sub-container-border);
+  transition: .1s color ease-in-out;
+}
+
+.app_list_item:hover {
+  color: var(--color-focus);
+}
+
+.app_list_item:active {
+  color: var(--color-accent);
+}
+
+.data_view {
+  grid-area: main;
+  border: var(--container-border);
+  padding: 10px;
+}
+
+.footer {
+  grid-area: footer;
+}
+
+.info {
+  color: var(--color-focus);
+}
+
+.build_info {
+  font-size: 10pt;
+  text-align: left;
+}
 </style>