161 lines
3.9 KiB
Vue
161 lines
3.9 KiB
Vue
<template>
|
|
<div>
|
|
<h3>{{ $t('system.firmwareTitle') }}</h3>
|
|
|
|
<div v-if="system === null" class="loading">
|
|
<LoadingIndicator></LoadingIndicator>
|
|
</div>
|
|
|
|
<div v-else>
|
|
<form @submit.prevent="uploadFirmware">
|
|
<input type="file" id="firmwareFile">
|
|
|
|
<div class="buttons">
|
|
<input type="submit" :disabled="saving" :value="saving ? $t('applyButtonSaving') : $t('applyButton')">
|
|
</div>
|
|
|
|
<div v-if="uploadProgress !== false">
|
|
{{ uploadProgress }}%
|
|
</div>
|
|
</form>
|
|
|
|
<form @submit.prevent="applySystem">
|
|
<h3>{{ $t('system.pinsTitle') }}</h3>
|
|
|
|
<div class="horizontal">
|
|
<label for="pinLEDAP">{{ $t('system.pinLEDAP') }}</label>
|
|
<input type="number" id="pinLEDAP" v-model.number="system.pins.ledAP">
|
|
</div>
|
|
|
|
<div class="horizontal">
|
|
<label for="pinLEDSTA">{{ $t('system.pinLEDSTA') }}</label>
|
|
<input type="number" id="pinLEDSTA" v-model.number="system.pins.ledSTA">
|
|
</div>
|
|
|
|
<div class="horizontal">
|
|
<label for="pinAPButton">{{ $t('system.pinAPButton') }}</label>
|
|
<input type="number" id="pinAPButton" v-model.number="system.pins.apButton">
|
|
</div>
|
|
|
|
<h3>{{ $t('system.ledStripTitle') }}</h3>
|
|
|
|
<div class="horizontal">
|
|
<label for="ledCount">{{ $t('system.ledCount') }}</label>
|
|
<input type="number" id="ledCount" v-model.number="system.ledCount">
|
|
</div>
|
|
|
|
<div class="buttons">
|
|
<input type="submit" :disabled="saving" :value="saving ? $t('applyButtonSaving') : $t('applyButton')">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from 'axios';
|
|
import LoadingIndicator from '@/components/loadingIndicator.vue';
|
|
import BaseVM from '@/BaseVM';
|
|
|
|
export default {
|
|
mixins: [BaseVM],
|
|
|
|
components: {
|
|
LoadingIndicator
|
|
},
|
|
|
|
data()
|
|
{
|
|
return {
|
|
system: null,
|
|
uploadProgress: false
|
|
}
|
|
},
|
|
|
|
|
|
mounted()
|
|
{
|
|
this.load();
|
|
},
|
|
|
|
|
|
methods: {
|
|
load()
|
|
{
|
|
const self = this;
|
|
|
|
return axios.get('/api/system', { retry: 10, retryDelay: 1000 })
|
|
.then(response =>
|
|
{
|
|
if (typeof response.data == 'object')
|
|
self.system = response.data;
|
|
})
|
|
.catch(e => self.handleAPIError('error.loadSystem', e));
|
|
},
|
|
|
|
|
|
save()
|
|
{
|
|
const self = this;
|
|
if (self.saving)
|
|
return;
|
|
|
|
self.setSaving(true);
|
|
|
|
axios.post('/api/system', self.system, { retry: 10, retryDelay: 1000, headers: { 'Content-Type': 'application/json' } })
|
|
.then(response =>
|
|
{
|
|
self.showNotification(i18n.t('rebootPending'));
|
|
})
|
|
.catch(e => self.handleAPIError('error.applySystem', e))
|
|
.then(() =>
|
|
{
|
|
self.setSaving(false);
|
|
});
|
|
},
|
|
|
|
|
|
uploadFirmware()
|
|
{
|
|
const self = this;
|
|
if (self.saving) return;
|
|
|
|
const fileElement = document.getElementById('firmwareFile');
|
|
if (fileElement.files.length == 0)
|
|
{
|
|
self.showNotification(self.$i18n.t('system.noFileSelected'), true);
|
|
return;
|
|
}
|
|
|
|
self.saving = true;
|
|
self.uploadProgress = 0;
|
|
|
|
const data = new FormData();
|
|
|
|
data.append('file', fileElement.files[0]);
|
|
|
|
var config = {
|
|
timeout: 360000,
|
|
onUploadProgress: progressEvent =>
|
|
{
|
|
self.uploadProgress = Math.round((progressEvent.loaded * 100) / progressEvent.total);
|
|
}
|
|
};
|
|
|
|
axios.post('/api/firmware', data, config)
|
|
.then(response =>
|
|
{
|
|
self.showNotification(self.$i18n.t('rebootPending'));
|
|
})
|
|
.catch(e => self.handleAPIError('error.uploadFirmware', e))
|
|
.then(() =>
|
|
{
|
|
self.uploadProgress = false;
|
|
self.saving = false;
|
|
|
|
document.getElementById('firmware').reset();
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script> |