147 lines
3.9 KiB
JavaScript
147 lines
3.9 KiB
JavaScript
function startApp()
|
|
{
|
|
var app = new Vue({
|
|
el: '#app',
|
|
|
|
data: {
|
|
},
|
|
|
|
created: function()
|
|
{
|
|
var self = this;
|
|
|
|
self.notificationTimer = null;
|
|
|
|
// Sequential loading of all the settings makes sure
|
|
// we don't overload the ESP8266 with requests, as that
|
|
// can cause it to run out of memory easily.
|
|
// This is a horrible way to implement it, but I don't feel like
|
|
// including a big library or working out a clean short solution
|
|
// at the moment, and it works :)
|
|
self.loadStatus().then(function()
|
|
{
|
|
self.loadConnection().then(function()
|
|
{
|
|
self.loadSystem().then(function()
|
|
{
|
|
self.stopLoadingIndicator();
|
|
self.loading = false;
|
|
});
|
|
});
|
|
});
|
|
},
|
|
|
|
methods: {
|
|
|
|
|
|
|
|
loadConnection: function()
|
|
{
|
|
var self = this;
|
|
return axios.get('/api/connection', { retry: 10, retryDelay: 1000 })
|
|
.then(function(response)
|
|
{
|
|
if (typeof response.data == 'object')
|
|
self.connection = response.data;
|
|
})
|
|
.catch(self.handleAPIError.bind(self, 'error.loadConnection'));
|
|
},
|
|
|
|
loadSystem: function()
|
|
{
|
|
var self = this;
|
|
return axios.get('/api/system', { retry: 10, retryDelay: 1000 })
|
|
.then(function(response)
|
|
{
|
|
if (typeof response.data == 'object')
|
|
self.system = response.data;
|
|
})
|
|
.catch(self.handleAPIError.bind(self, 'error.loadSystem'));
|
|
},
|
|
|
|
|
|
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,
|
|
}, { retry: 10, retryDelay: 1000, headers: { 'Content-Type': 'application/json' } })
|
|
.then(function(response)
|
|
{
|
|
})
|
|
.catch(self.handleAPIError.bind(self, 'error.applyConnection'))
|
|
.then(function()
|
|
{
|
|
self.saving = false;
|
|
});
|
|
},
|
|
|
|
applySystem: function()
|
|
{
|
|
var self = this;
|
|
if (self.saving) return;
|
|
|
|
self.saving = true;
|
|
|
|
axios.post('/api/system', self.system, { retry: 10, retryDelay: 1000, headers: { 'Content-Type': 'application/json' } })
|
|
.then(function(response)
|
|
{
|
|
self.showNotification(i18n.t('rebootPending'));
|
|
})
|
|
.catch(self.handleAPIError.bind(self, 'error.applySystem'))
|
|
.then(function()
|
|
{
|
|
self.saving = false;
|
|
});
|
|
},
|
|
|
|
|
|
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('/api/firmware', data, config)
|
|
.then(function(response)
|
|
{
|
|
self.showNotification(i18n.t('rebootPending'));
|
|
})
|
|
.catch(self.handleAPIError.bind(self, 'error.uploadFirmware'))
|
|
.then(function()
|
|
{
|
|
self.uploadProgress = false;
|
|
self.saving = false;
|
|
|
|
document.getElementById('firmware').reset();
|
|
});
|
|
},
|
|
}
|
|
});
|
|
} |