fix

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/Style.vue

@@ -86,4 +86,8 @@ select > option {
   color: var(--color-foreground);
   font-weight: bold;
 }
+
+.large_button {
+  padding: 10px;
+}
 </style>

src/components/AppView.vue

@@ -1,17 +1,31 @@
 <template>
-  <div
+  <div>
-    class="grid"
+    <button
-  >
+      type="button"
-    <ViewComponent
+      class="large_button"
-      v-for="(item,key) of saved_config.displays"
+      @click="settings_btn_action"
-      :key="key"
+      v-text="editing?'Close':'Settings'"
-      :config="item"
-      :data="log(item.source)"
-    />
-    <ConfigEditor
-      v-model="config"
-      :template="template"
     />
+    <div
+      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"
+        :config="item"
+        :data="log(item.source)"
+      />
+    </div>
   </div>
 </template>
 
@@ -35,14 +49,15 @@ export default {
     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;
@@ -58,6 +73,7 @@ export default {
       });
       this.saved_config = copy_object (this.config);
       this.fetch_log ();
+      this.editing = false;
     },
     fetch_log () {
       this.get_log ({
@@ -65,6 +81,12 @@ export default {
         sources: this.saved_config.sources
       });
     },
+    settings_btn_action () {
+      if (this.editing)
+        this.save_config ();
+      else
+        this.editing = true;
+    },
     ...Vuex.mapActions ({ get_log: 'get_log' })
   }
 };
@@ -78,4 +100,8 @@ export default {
   width: 100%;
   height: 100%;
 }
+
+.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);

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,7 +49,7 @@ export default {
 
 <style>
 .table_view {
-  overflow: auto;
+  overflow-y: scoll;
   width: max-content;
   max-width: 100%;
   max-height: 100vh;
@@ -54,7 +65,7 @@ tr:nth-child(odd) {
   color: var(--color-accent);
 }
 
-td {
+td, th {
   border: var(--sub-container-border);
   padding: 3px;
 }

src/components/ViewComponent.vue

@@ -10,6 +10,7 @@
     v-else
     :items="data"
     :columns="config.columns"
+    :headings="config.headings"
   />
 </template>
 

src/default.js

@@ -6,17 +6,10 @@
  */
 
 export default {
-  sources:  [
+  sources: [
-    {
+    { name: 'default', limit: 140, offset: 0 },
-      name:   'default',
+    { name: 'secondary', limit: 10, offset: 0 },
-      limit:  140,
+    { name: 'version', limit: 1, offset: 0 }
-      offset: 0
-    },
-    {
-      name:   'secondary',
-      limit:  10,
-      offset: 0
-    }
   ],
   displays: [
     {
@@ -50,12 +43,31 @@ export default {
       ]
     },
     {
-      source:  'secondary',
+      source:   'secondary',
-      type:    'table',
+      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/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

@@ -19,7 +19,7 @@
         v-else
         class="info"
       >
-        Select an app to view its Reports
+        Select an app to view its reports
       </p>
     </div>
     <div class="footer">