Clients and values table

app.js

@@ -27,26 +27,21 @@ app.use(cors());
 
 // ----- APIs ------
 
-//get settings
+// get settings
 app.get('/api/settings', function(req, res) {
   res.json({success:true, clients: jsonStore.get(store.clients), values: jsonStore.get(store.values)});
-});
-
-//get clients
-app.get('/api/clients', function(req, res) {
-  res.json({success:true, clients: jsonStore.get(store.clients)});
-});
+})
 
-//update settings
-app.post('/api/clients', function(req, res) {
+// update settings
+app.post('/api/settings', function(req, res) {
   jsonStore.put(store.clients, req.body.clients)
-  .then(data => {
-    res.json({success: true, message: "Configuration updated successfully"});
-  }).catch(err => {
-    debug(err);
+  .then(data => jsonStore.put(store.values, req.body.values))
+  .then(data => res.json({success: true, message: "Configuration updated successfully"}))
+  .catch(err => {
+    debug(err)
     res.json({success: false, message: err.message})
   })
-});
+})
 
 // catch 404 and forward to error handler
 app.use(function(req, res, next) {

config/dev.env.js

@@ -1,7 +1,10 @@
 'use strict'
 const merge = require('webpack-merge')
 const prodEnv = require('./prod.env')
+const appConfig = require('./app.js')
+
 
 module.exports = merge(prodEnv, {
-  NODE_ENV: '"development"'
+  NODE_ENV: '"development"',
+  PORT: appConfig.port
 })

package.json

@@ -27,6 +27,7 @@
     "http-errors": "~1.6.2",
     "jsonfile": "^5.0.0",
     "morgan": "~1.9.0",
+    "uniqid": "^5.0.3",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1",
     "vuetify": "^1.5.11",

src/App.vue

@@ -50,6 +50,26 @@
 
   <v-spacer></v-spacer>
 
+  <v-menu v-for="item in items" :key="item.text" bottom left>
+      <v-btn slot="activator" icon @click.native="item.func">
+        <v-tooltip bottom>
+        <v-icon dark color="primary" slot="activator">{{item.icon}}</v-icon>
+        <span>{{item.tooltip}}</span>
+      </v-tooltip>
+      </v-btn>
+
+      <v-list v-if="item.menu">
+        <v-list-tile
+          v-for="(menu, i) in item.menu"
+          :key="i"
+          @click="menu.func"
+        >
+          <v-list-tile-title>{{ menu.title }}</v-list-tile-title>
+        </v-list-tile>
+      </v-list>
+
+    </v-menu>
+
 </v-toolbar>
 <main>
   <v-content>
@@ -74,19 +94,46 @@
 <script>
 
 import ConfigApis from "@/apis/ConfigApis";
+import { mapGetters, mapMutations } from 'vuex'
 
 export default {
   name: 'app',
+  computed: mapGetters([
+    'values',
+    'clients'
+  ]),
   methods: {
     showSnackbar: function(text){
       this.snackbarText = text;
       this.snackbar = true;
     },
-    updateStatus: function(status, color){
-      this.status = status;
-      this.statusColor = color;
+    saveConfiguration: function(){
+      var self = this;
+      ConfigApis.updateSettings({
+        values: this.values,
+        clients: this.clients,
+      }).then(response => {
+        if(response.success) self.showSnackbar("New configuration successfully saved");
+        else{
+          self.showSnackbar(response.error.message);
+          console.log(response.error);
+        }
+      })
+      .catch(e => {
+        console.log(e);
+      })
+    },
+    importConfiguration : function(){
+      var self = this;
+
+      this.importFile((err, jsonObject) => {
+        if(!err){
+          self.$store.dispatch('init', jsonObject);
+          self.showSnackbar("Configuration loaded successfully")
+        }
+      });
     },
-    importFile : function(ext, callback)
+    importFile : function(callback)
     {
       var self = this;
       // Check for the various File API support.
@@ -105,20 +152,19 @@ export default {
 
             reader.addEventListener("load", function(fileReaderEvent)
             {
+              var jsonObject = {};
               var err;
               var data = fileReaderEvent.target.result;
 
-              if(ext == 'json'){
-                try {
-                  data = JSON.parse(data);
-                } catch (e) {
-                  self.showSnackbar("Error while parsing input file, check console for more info")
-                  console.log(e);
-                  err = e;
-                }
+              try {
+                jsonObject = JSON.parse(data);
+              } catch (e) {
+                self.showSnackbar("Error while parsing input file, check console for more info")
+                console.log(e);
+                err = e;
               }
 
-              callback(err, data);
+              callback(err, jsonObject);
             });
 
             reader.readAsText(file);
@@ -133,31 +179,50 @@ export default {
         alert('Unable to load a file in this browser.');
       }
     },
-    exportConfiguration: function(data, fileName, ext){
-      var contentType = ext == 'xml' ? 'text/xml' : 'application/octet-stream';
+    exportConfiguration: function(){
+      var contentType = 'application/octet-stream';
       var a = document.createElement('a');
 
-      var blob = new Blob([ext == 'xml' ? data : JSON.stringify(data)], {'type': contentType});
+      var data = {values: this.values, clients: this.clients, version: 1}
+
+      var blob = new Blob([JSON.stringify(data)], {'type': contentType});
 
       document.body.appendChild(a);
       a.href = window.URL.createObjectURL(blob);
-      a.download = fileName + "." + (ext ? ext : "json");
+      a.download = "settings.json";
       a.target="_self";
       a.click();
     }
   },
   data () {
     return {
       pages: [
-        { icon: 'widgets', title: 'Configuration', path: '/' },
-        { icon: 'settings', title: 'MQTT Clients', path: '/clients' }
+        { icon: 'wifi', title: 'MQTT Clients', path: '/clients' },
+        { icon: 'settings', title: 'Values', path: '/' }
       ],
       drawer: false,
       topbar: [],
       title: 'MQTT Clients',
       mini: true,
       snackbar: false,
-      snackbarText: ""
+      snackbarText: "",
+      items: [
+        {
+          icon: "file_download",
+          func: this.importConfiguration,
+          tooltip: "Import Configuration"
+        },
+        {
+          icon: "file_upload",
+          func: this.exportConfiguration,
+          tooltip: "Export Configuration",
+        },
+        {
+          icon: "save",
+          func: this.saveConfiguration,
+          tooltip: "Save Configuration"
+        },
+      ]
     }
   },
   mounted() {
@@ -185,8 +250,8 @@ export default {
         case 'MqttClients':
         this.title = 'MQTT Clients';
         break;
-        case 'Configuration':
-        this.title = 'Configuration';
+        case 'Values':
+        this.title = 'Values';
         break;
         default:
         this.title = '';

src/apis/ConfigApis.js

@@ -3,7 +3,8 @@ import axios from 'axios'
 import { loadProgressBar } from 'axios-progress-bar'
 
 if (process.env.NODE_ENV === 'development') {
-  axios.defaults.baseURL = axios.defaults.socketUrl + '/api'
+  // process.PORT is imported in config/dev.env.js
+  axios.defaults.baseURL = location.protocol + '//' + location.hostname + ':' + process.env.PORT + '/api'
 } else {
   axios.defaults.baseURL = '/api'
 }
@@ -17,14 +18,8 @@ export default{
         return response.data
       })
   },
-  getClients () {
-    return axios.get('/clients')
-      .then(response => {
-        return response.data
-      })
-  },
-  updateClients (data) {
-    return axios.post('/clients', data)
+  updateSettings (data) {
+    return axios.post('/settings', data)
       .then(response => {
         return response.data
       })

src/components/MqttClients.vue

@@ -8,7 +8,7 @@
           :headers="headers"
           :items="clients"
           :rows-per-page-items="[10, 20, {'text':'All','value':-1}]"
-          class="elevation-1"
+          class="elevation-0"
         >
           <template slot="items" slot-scope="props">
             <td>{{ props.item.name }}</td>
@@ -81,7 +81,8 @@
 
 <script>
 import { mapGetters } from "vuex";
-import ConfigApis from "@/apis/ConfigApis";
+
+import uniqid from 'uniqid'
 
 import DialogClient from '@/components/dialogs/Mqtt_Client'
 
@@ -133,7 +134,9 @@ export default {
       confirm('Are you sure you want to delete this item?') && this.clients.splice(index, 1)
     },
     cloneItem (item) {
-      this.clients.push(Object.assign({}, item))
+      var copy = Object.assign({}, item);
+      copy._id = uniqid();
+      this.clients.push(copy)
     },
     closeDialog () {
       this.dialogValue = false
@@ -146,23 +149,10 @@ export default {
       if (this.editedIndex > -1) {
         Object.assign(this.clients[this.editedIndex], this.editedValue)
       } else {
+        this.editedValue._id = uniqid(); //assign an unique id to the client
         this.clients.push(this.editedValue)
       }
       this.closeDialog()
-    },
-    update() {
-      if (this.$refs.form_settings.validate()) {
-        var self = this;
-        ConfigApis.updateConfig(self.getSettingsJSON())
-          .then(data => {
-            self.showSnackbar(data.message);
-          })
-          .catch(error => {
-            console.log(error);
-          });
-      } else {
-        this.showSnackbar("Your configuration contains errors, fix it");
-      }
     }
   }
 };