function startApp() { var i18n = new VueI18n({ locale: navigator.language, fallbackLocale: 'en', messages: messages }); var app = new Vue({ el: '#app', i18n: i18n, data: { loading: true, saving: false, loadingIndicator: '|', uploadProgress: false, activeTab: 'status', version: { systemID: 'loading...', version: 'loading...', }, wifiStatus: { ap: { enabled: false, ip: '0.0.0.0' }, station: { enabled: false, status: 0, ip: '0.0.0.0' } }, connection: { hostname: null, accesspoint: true, station: false, ssid: null, password: null, dhcp: true, ip: null, subnetmask: null, gateway: null }, steps: [ { value: 50 }, { value: 0 }, { value: 0 }, { value: 0 }, { value: 0 }, { value: 70 }, { value: 0 }, { value: 0 }, { value: 0 }, { value: 0 }, { value: 25 }, { value: 0 }, { value: 0 }, { value: 0 } ] }, created: function() { var self = this; document.title = i18n.t('title'); self.startLoadingIndicator(); self.updateWiFiStatus(); axios.get('/api/version') .then(function(response) { if (typeof response.data == 'object') self.version = response.data; }) .catch(function(error) { console.log(error); }); axios.all([ axios.get('/api/connection') .then(function(response) { if (typeof response.data == 'object') self.connection = response.data; }) .catch(function(error) { console.log(error); })/*, axios.get('/api/actions') .then(function(response) { if (typeof response.data == 'object') self.actions = response.data; }) .catch(function(error) { console.log(error); })*/ ]) .then(axios.spread(function(acct, perms) { self.stopLoadingIndicator(); self.loading = false; })); }, methods: { applyConnection: function() { var self = this; if (self.saving) return; self.saving = true; axios.post('/api/connection', { hostname: self.connection.hostname, accesspoint: self.connection.accesspoint, station: self.connection.station, ssid: self.connection.ssid, password: self.connection.password, dhcp: self.connection.dhcp, ip: self.connection.ip, subnetmask: self.connection.subnetmask, gateway: self.connection.gateway, }) .then(function(response) { }) .catch(function(error) { console.log(error); }) .then(function() { self.saving = false; }) }, startLoadingIndicator: function() { var self = this; self.loadingStage = 0; self.loadingTimer = setInterval(function() { self.loadingStage++; switch (self.loadingStage) { case 1: self.loadingIndicator = '/'; break; case 2: self.loadingIndicator = '-'; break; case 3: self.loadingIndicator = '\\'; break; case 4: self.loadingIndicator = '|'; self.loadingStage = 0; break; } }, 250); }, stopLoadingIndicator: function() { clearInterval(this.loadingTimer); }, getWiFiStationStatus: function() { if (!this.wifiStatus.station.enabled) return 'disconnected'; switch (this.wifiStatus.station.status) { case 0: // WL_IDLE_STATUS case 2: // WL_SCAN_COMPLETED return 'connecting'; case 1: // WL_NO_SSID_AVAIL case 4: // WL_CONNECT_FAILED case 5: // WL_CONNECTION_LOST return 'error'; case 3: // WL_CONNECTED return 'connected'; case 6: // WL_DISCONNECTED default: return 'disconnected'; } }, getWiFiStationStatusText: function() { if (!this.wifiStatus.station.enabled) return i18n.t('wifiStatus.stationmode.disabled'); switch (this.wifiStatus.station.status) { case 0: // WL_IDLE_STATUS return i18n.t('wifiStatus.stationmode.idle'); case 1: // WL_NO_SSID_AVAIL return i18n.t('wifiStatus.stationmode.noSSID'); case 2: // WL_SCAN_COMPLETED return i18n.t('wifiStatus.stationmode.scanCompleted'); case 3: // WL_CONNECTED return this.wifiStatus.station.ip; case 4: // WL_CONNECT_FAILED return i18n.t('wifiStatus.stationmode.connectFailed'); case 5: // WL_CONNECTION_LOST return i18n.t('wifiStatus.stationmode.connectionLost'); case 6: // WL_DISCONNECTED default: return i18n.t('wifiStatus.stationmode.disconnected'); } }, updateWiFiStatus: function() { var self = this; if (!self.saving) { axios.get('/api/connection/status') .then(function(response) { if (typeof response.data == 'object') self.wifiStatus = response.data; }) .catch(function(error) { console.log(error); }) .then(function() { setTimeout(self.updateWiFiStatus, 5000); }); } else setTimeout(self.updateWiFiStatus, 5000); }, uploadFirmware: function() { var self = this; if (self.saving) return; self.saving = true; self.uploadProgress = 0; var data = new FormData(); data.append('file', document.getElementById('firmwareFile').files[0]); var config = { timeout: 360000, onUploadProgress: function(progressEvent) { self.uploadProgress = Math.round((progressEvent.loaded * 100) / progressEvent.total); } }; axios.post('/firmware', data, config) .then(function(response) { // TODO show "now updating, please wait" console.log("Update sent"); }) .catch(function(error) { console.log(error); //output.innerHTML = err.message; // TODO show error }) .then(function() { self.uploadProgress = false; self.saving = false; document.getElementById('firmware').reset(); }); } } }); }