Add wifi management component

ui/src/components/Login.vue

@@ -0,0 +1,73 @@
+<template>
+<div class="col-md-4 offset-md-4 col-sm-6 offset-sm-4 box">
+    <h3 class="text-center">Login</h3>
+    <hr />
+    <div v-if="!authFail" class="alert alert-warning" role="alert">
+        Login is required to access to settings
+    </div>
+    <div v-if="authFail" class="alert alert-danger" role="alert">
+        Username or password is not correct
+    </div>
+    <form @submit.prevent="onLoginSubmit">
+        <div class="form-group">
+            <input type="text" ref="username" value="cosmicpi" class="form-control" placeholder="Username">
+        </div>
+        <div class="form-group">
+            <input type="password" ref="password" value="MuonsFROMSp8ce" class="form-control" placeholder="Password">
+        </div>
+        <button type="submit" ref="submit" class="btn btn-primary btn-lg btn-block">Login</button>
+    </form>
+</div>
+</template>
+
+<script>
+import Vue from 'vue';
+
+
+export default {
+    name: 'Login',
+    data() {
+        return {
+            authFail: false,
+        }
+    },
+    methods: {
+        getToken(user, pass) {
+            return user + '_' + pass;
+        },
+        enable(enabled) {
+            this.$refs.username.disabled = !enabled;
+            this.$refs.password.disabled = !enabled;
+            this.$refs.submit.disabled = !enabled;
+        },
+        onLoginSubmit() {
+            let params = {
+                token: this.getToken(this.$refs.username.value, this.$refs.password.value),
+            }
+
+            this.enable(false);
+            Vue.http.get('auth', { params }).then(response => {
+                this.enable(true);
+                if (response.status === 200) {
+                    this.authFail = false;
+                    this.$store.commit('setAuth', params.token);
+                } else {
+                    this.authFail = true;
+                }
+            }).catch(() => {
+                this.enable(true);
+                this.authFail = true;
+            });
+        }
+    },
+}
+</script>
+
+<style>
+.box {
+    border: 1px solid #ddd;
+    background-color: #f5f5f5;
+    padding: 20px;
+    border-radius: 5px; 
+}
+</style>

ui/src/components/Settings.vue

@@ -1,11 +0,0 @@
-<template>
-<div class="row">
-    TODO
-</div>
-</template>
-
-<script>
-export default {
-    name: 'Settings'
-}
-</script>

ui/src/components/dashboard/TimeSeries.vue

@@ -51,6 +51,14 @@ export default {
             },
             options: {
                 animation: false,
+                legend: {
+                    display: false
+                },
+                scales: {
+                    xAxes: [{
+                        display: false
+                    }]
+                },
             },
         });
 

ui/src/components/settings/Settings.vue

@@ -0,0 +1,22 @@
+<template>
+<div class="row">
+    <Login v-if="!isLogged"></Login>
+    <Wifi v-if="isLogged"></Wifi>
+</div>
+</template>
+
+<script>
+import Login from '../Login.vue'
+import Wifi from './Wifi.vue'
+
+
+export default {
+    components: { Login, Wifi },
+    name: 'Settings',
+    computed: {
+        isLogged() {
+            return this.$store.getters.isLogged();
+        },
+    },
+}
+</script>

ui/src/components/settings/Wifi.vue

@@ -0,0 +1,83 @@
+<template>
+<div class="col-md-4 offset-md-4 col-sm-6 offset-sm-4 box">
+    <h3 class="text-center">Wifi</h3>
+    <hr />
+    <div v-if="connected" class="alert alert-success">
+        Great, you are already connected to wifi network <b>{{ currentWifi }}</b>!
+    </div>
+    <div v-if="response" class="alert alert-warning">
+        {{ response }}
+    </div>
+
+    <form @submit.prevent="onFormSubmit">
+        <div class="form-group">
+            <label for="inputSSID">SSID:</label>
+            <select class="form-control" ref="ssid" id="inputSSID">
+                <option v-for="wifi in wifiList" :key="wifi" :value="wifi">{{ wifi }}</option>
+            </select>
+        </div>
+        <div class="form-group">
+            <label for="inputPassword">Password</label>
+            <input type="password" ref="pass" class="form-control" id="inputPassword">
+        </div>
+        <button type="submit" ref="submit" class="btn btn-primary btn-lg btn-block">Connect</button>
+    </form>
+</div>
+</template>
+
+<script>
+import Vue from 'vue';
+
+
+export default {
+    name: 'Wifi',
+    data() {
+        return {
+            response: '',
+        }
+    },
+    computed: {
+        wifiList() {
+            return this.$store.getters.getWifiList();
+        },
+        currentWifi() {
+            return this.$store.getters.getCurrentWifi();
+        },
+        connected() {
+            return this.currentWifi.length > 0;
+        }
+    },
+    methods: {
+        enable(enabled) {
+            this.$refs.ssid.disabled = !enabled;
+            this.$refs.pass.disabled = !enabled;
+            this.$refs.submit.disabled = !enabled;
+        },
+        onFormSubmit() {
+            let wifiDetails = {
+                ssid: this.$refs.ssid.value,
+                pass: this.$refs.pass.value,
+            };
+            let params = {
+                token: this.$store.getters.getToken(),
+            };
+            this.enable(false);
+            Vue.http.post('wifi', wifiDetails, { params, emulateJSON: true, }).then(response => {
+                this.response = response.body.message;
+            });
+        }
+    },
+    created() {
+        this.$store.dispatch('requestWifi');
+    },
+}
+</script>
+
+<style>
+.box {
+    border: 1px solid #ddd;
+    background-color: #f5f5f5;
+    padding: 20px;
+    border-radius: 5px; 
+}
+</style>

ui/src/main.js

@@ -23,6 +23,6 @@ new Vue({
     router,
     store,
     template: '<App/>',
-    components: { App }
+    components: { App },
 })
   

ui/src/router.js

@@ -1,8 +1,8 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import Dashboard from './components/Dashboard.vue'
+import Dashboard from './components/dashboard/Dashboard.vue'
 import About from './components/About.vue'
-import Settings from './components/Settings.vue'
+import Settings from './components/settings/Settings.vue'
 
 
 Vue.use(Router)

ui/src/store.js

@@ -9,6 +9,11 @@ Vue.use(Vuex);
 
 const state = {
     series: [],
+    token: null,
+    wifi: { 
+        available: [], 
+        current: '', 
+    },
 }
 
 const getters = {
@@ -26,25 +31,55 @@ const getters = {
             return last[key];
         } 
         return 'NA';
-    }
+    },
+    isLogged: (state) => () => {
+        return (state.token !== null);
+    },
+    getToken: (state) => () => {
+        return state.token;
+    },
+    getWifiList: (state) => () => {
+        let wifis = state.wifi.available;
+        let filtered = wifis.filter(function(item, pos) {
+            return wifis.indexOf(item) == pos;
+        })
+        return filtered;
+    },
+    getCurrentWifi: (state) => () => {
+        return state.wifi.current;
+    },
 }
 
 const actions = {
     requestSeries({ commit }) {
-        Vue.http.get('data?format=json').then(response => {
+        Vue.http.get('series?format=json').then(response => {
             commit('setSeries', response.body);
         });
     },
     addRandomValues({ commit }) {
         commit('setSeries', [ { 'UTCUnixTime': 123123, 'TemperatureC': 26.0 } ]);
-    }
+    },
+    requestWifi({ commit }) {
+        let params = {
+            token: state.token,
+        };
+        Vue.http.get('wifi', { params }).then(response => {
+            commit('setWifi', response.body);
+        });
+    },
 }
 
 const mutations = {
     setSeries(state, data) {
         state.series.push(...data);
         state.series = state.series.slice(-SERIES_MAX_SIZE);
-    }
+    },
+    setAuth(state, token) {
+        state.token = token;
+    },
+    setWifi(state, data) {
+        state.wifi = data;
+    },
 }
 
 export default new Vuex.Store({