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();
|
||
|
});
|
||
|
},
|
||
|
}
|
||
|
});
|
||
|
}
|