Show Button, when Upgrade Version is available ! (check from the server, the version number

- for debug: added led button to see when is calling the server and the IndexedDb.

src/components/admin/TableOnlyView/index.ts

@@ -0,0 +1 @@
+export {default as tableOnlyView} from './tableOnlyView.vue'

src/components/admin/TableOnlyView/tableOnlyView.ts

@@ -0,0 +1,63 @@
+import Vue from 'vue'
+import { Component } from 'vue-property-decorator'
+
+import { GlobalStore, UserStore } from '@store'
+
+
+@Component({})
+export default class TableOnlyView extends Vue {
+  public loading: boolean = false
+  public serverPagination: {
+    page: number ,
+    rowsNumber: number // specifying this determines pagination is server-side
+  } = {page: 1, rowsNumber: 10}
+
+  public serverData: any [] = []
+  public columns: any[] = [
+    {
+      name: 'chiave',
+      required: true,
+      label: 'Chiave',
+      align: 'left',
+      field: 'chiave',
+      sortable: true
+    },
+    { name: 'valore', label: 'Valore', field: 'valore', sortable: false }
+  ]
+
+  public filter: string = ''
+  public selected: any[] = []
+
+
+  request(props) {
+    this.loading = true
+    setTimeout(() => {
+      this.serverPagination = props.pagination
+      let
+        table = this.$refs.table,
+        rows = GlobalStore.state.cfgServer.slice(),
+        { page, rowsPerPage, sortBy, descending } = props.pagination
+
+      // if (props.filter) {
+      //   rows = table.filterMethod(rows, props.filter)
+      // }
+      // if (sortBy) {
+      //   rows = table.sortMethod(rows, sortBy, descending)
+      // }
+
+      this.serverPagination.rowsNumber = rows.length
+      if (rowsPerPage) {
+        rows = rows.slice((page - 1) * rowsPerPage, page * rowsPerPage)
+      }
+      this.serverData = rows
+      this.loading = false
+    }, 1500)
+  }
+
+  mounted() {
+    this.request({
+      pagination: this.serverPagination,
+      filter: this.filter
+    })
+  }
+}

src/components/admin/TableOnlyView/tableOnlyView.vue

@@ -0,0 +1,29 @@
+<template>
+    <q-page padding class="docs-table">
+        <p class="caption">TableOnlyView</p>
+        <q-table
+                ref="table"
+                color="primary"
+                title="Parametri di Configurazione Server"
+                :data="serverData"
+                :columns="columns"
+                :filter="filter"
+                selection="multiple"
+                :selected.sync="selected"
+                row-key="chiave"
+                :pagination.sync="serverPagination"
+                @request="request"
+                :loading="loading"
+        >
+            <template slot="top-right" slot-scope="props">
+                <q-search hide-underline v-model="filter" />
+            </template>
+        </q-table>
+    </q-page>
+</template>
+<script lang="ts" src="./tableOnlyView.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './tableOnlyView.scss';
+</style>

src/components/admin/cfgServer/cfgServer.ts

@@ -0,0 +1,68 @@
+import Vue from 'vue'
+import { Component, Watch } from 'vue-property-decorator'
+
+import { GlobalStore, UserStore } from '@store'
+
+
+@Component({})
+export default class CfgServer extends Vue {
+  public loading: boolean = false
+  public paginationControl: {
+    page: number,
+    rowsPerPage: number // specifying this determines pagination is server-side
+  } = { page: 1, rowsPerPage: 20 }
+
+  public pagination: {
+    page: number
+  } = {page: 1 }
+
+  public serverData: any [] = GlobalStore.state.cfgServer.slice() // [{ chiave: 'chiave1', valore: 'valore 1' }]
+  public columns: any[] = [
+    {
+      name: 'chiave',
+      required: true,
+      label: 'Chiave',
+      align: 'left',
+      field: 'chiave',
+      sortable: true
+    },
+    { name: 'valore', label: 'Valore', field: 'valore', sortable: false }
+  ]
+
+  public visibleColumns: ['chiave', 'valore']
+  public separator: 'horizontal'
+  public filter: string = ''
+  public selected: any[] = []
+  public dark: boolean = true
+
+  public keysel: string = ''
+
+  get tableClass () {
+    if (this.dark) {
+      return 'bg-black'
+    }
+  }
+
+  selItem(item) {
+    console.log('item', item)
+    this.keysel = item.chiave
+    console.log('this.keysel', this.keysel)
+  }
+
+  SaveValue(newVal, valinitial) {
+    console.log('SaveValue', newVal, 'selected', this.selected)
+
+    const mydata = {
+      chiave: this.keysel,
+      valore: newVal
+    }
+    // Save on Server
+    GlobalStore.actions.saveCfgServerKey(mydata)
+  }
+
+  created() {
+    this.serverData = GlobalStore.state.cfgServer.slice() // [{ chiave: 'chiave1', valore: 'valore 1' }]
+    // this.serverData = GlobalStore.state.cfgServer.slice()
+  }
+
+}

src/components/admin/cfgServer/cfgServer.vue

@@ -0,0 +1,32 @@
+<template>
+    <q-table
+            :data="serverData"
+            :columns="columns"
+            :filter="filter"
+            title="Configurazione Server"
+            row-key="chiave"
+    >
+        <q-tr slot="body" slot-scope="props" :props="props">
+            <q-td key="chiave" :props="props">
+                {{ props.row.chiave }}
+                <q-popup-edit v-model="props.row.chiave" disable>
+                    <q-field count>
+                        <q-input v-model="props.row.chiave" />
+                    </q-field>
+                </q-popup-edit>
+            </q-td>
+            <q-td key="valore" :props="props">
+                {{ props.row.valore }}
+                <q-popup-edit v-model="props.row.valore" title="Aggiorna Valore" buttons @save="SaveValue" @show="selItem(props.row)">
+                    <q-input v-model="props.row.valore"/>
+                </q-popup-edit>
+            </q-td>
+        </q-tr>
+    </q-table>
+</template>
+<script lang="ts" src="./cfgServer.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './cfgServer.scss';
+</style>

src/components/admin/cfgServer/index.ts

@@ -0,0 +1 @@
+export {default as cfgServer} from './cfgServer.vue'