|
|
@ -1,15 +1,31 @@
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
<v-layout fluid fill-height>
|
|
|
|
<v-row class="fluid fill-height">
|
|
|
|
<template v-if="isLoading">
|
|
|
|
<template v-if="isLoading">
|
|
|
|
<v-overlay :absolute="true" :value="true">
|
|
|
|
<v-overlay
|
|
|
|
<v-progress-circular indeterminate size="64"></v-progress-circular>
|
|
|
|
:absolute="true"
|
|
|
|
|
|
|
|
:value="true"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<v-progress-circular
|
|
|
|
|
|
|
|
indeterminate
|
|
|
|
|
|
|
|
size="64"
|
|
|
|
|
|
|
|
/>
|
|
|
|
</v-overlay>
|
|
|
|
</v-overlay>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<v-container>
|
|
|
|
<v-container>
|
|
|
|
<v-snackbar v-model="isSnackbar" :timeout="3000" color="success">i8n:saved</v-snackbar>
|
|
|
|
<v-snackbar
|
|
|
|
|
|
|
|
v-model="isSnackbar"
|
|
|
|
<v-tabs v-model="tab" centered icons-and-text>
|
|
|
|
:timeout="3000"
|
|
|
|
|
|
|
|
color="success"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
i8n:saved
|
|
|
|
|
|
|
|
</v-snackbar>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<v-tabs
|
|
|
|
|
|
|
|
v-model="tab"
|
|
|
|
|
|
|
|
centered
|
|
|
|
|
|
|
|
icons-and-text
|
|
|
|
|
|
|
|
>
|
|
|
|
<v-tab>
|
|
|
|
<v-tab>
|
|
|
|
Device
|
|
|
|
Device
|
|
|
|
<v-icon>$tv</v-icon>
|
|
|
|
<v-icon>$tv</v-icon>
|
|
|
@ -30,69 +46,88 @@
|
|
|
|
-->
|
|
|
|
-->
|
|
|
|
</v-tabs>
|
|
|
|
</v-tabs>
|
|
|
|
|
|
|
|
|
|
|
|
<v-card v-if="settings" class="mx-auto" width="400">
|
|
|
|
<v-card
|
|
|
|
|
|
|
|
v-if="settings"
|
|
|
|
|
|
|
|
class="mx-auto"
|
|
|
|
|
|
|
|
width="400"
|
|
|
|
|
|
|
|
>
|
|
|
|
<v-tabs-items v-model="tab">
|
|
|
|
<v-tabs-items v-model="tab">
|
|
|
|
<v-tab-item>
|
|
|
|
<v-tab-item>
|
|
|
|
<v-card-text>
|
|
|
|
<v-card-text>
|
|
|
|
<v-select
|
|
|
|
<v-select
|
|
|
|
:items="deviceOrientation"
|
|
|
|
|
|
|
|
v-model="settings.device.angle"
|
|
|
|
v-model="settings.device.angle"
|
|
|
|
|
|
|
|
:items="deviceOrientation"
|
|
|
|
label="i8n:Orientation"
|
|
|
|
label="i8n:Orientation"
|
|
|
|
placeholder
|
|
|
|
placeholder
|
|
|
|
></v-select>
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
|
|
<v-select
|
|
|
|
<v-select
|
|
|
|
:items="deviceTheme"
|
|
|
|
|
|
|
|
v-model="settings.device.theme"
|
|
|
|
v-model="settings.device.theme"
|
|
|
|
|
|
|
|
:items="deviceTheme"
|
|
|
|
label="i8n:Theme"
|
|
|
|
label="i8n:Theme"
|
|
|
|
placeholder
|
|
|
|
placeholder
|
|
|
|
></v-select>
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
|
|
<v-dialog v-model="dialogSystemUpdate" max-width="400">
|
|
|
|
<v-dialog
|
|
|
|
<template v-slot:activator="{ on }">
|
|
|
|
v-model="dialogSystemUpdate"
|
|
|
|
<v-btn class="my-5" block small outlined color="warning" v-on="on">System update</v-btn>
|
|
|
|
max-width="400"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<template #activator="{ on }">
|
|
|
|
|
|
|
|
<v-btn
|
|
|
|
|
|
|
|
class="my-5"
|
|
|
|
|
|
|
|
block
|
|
|
|
|
|
|
|
small
|
|
|
|
|
|
|
|
outlined
|
|
|
|
|
|
|
|
color="warning"
|
|
|
|
|
|
|
|
v-on="on"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
System update
|
|
|
|
|
|
|
|
</v-btn>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<v-card :loading="system.updateProgress > 0">
|
|
|
|
<v-card :loading="system.updateProgress > 0">
|
|
|
|
<template v-slot:progress>
|
|
|
|
<template #progress>
|
|
|
|
<v-progress-linear
|
|
|
|
<v-progress-linear
|
|
|
|
v-model="system.updateProgress"
|
|
|
|
v-model="system.updateProgress"
|
|
|
|
:indeterminate="system.updateProgress === 100"
|
|
|
|
:indeterminate="system.updateProgress === 100"
|
|
|
|
height="10"
|
|
|
|
height="10"
|
|
|
|
></v-progress-linear>
|
|
|
|
/>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<v-card-title class="headline">System update</v-card-title>
|
|
|
|
<v-card-title class="headline">
|
|
|
|
|
|
|
|
System update
|
|
|
|
|
|
|
|
</v-card-title>
|
|
|
|
<v-card-text>
|
|
|
|
<v-card-text>
|
|
|
|
<!--
|
|
|
|
|
|
|
|
<v-alert border="left" type="warning" outlined>
|
|
|
|
|
|
|
|
Sed in libero ut nibh placerat accumsan. Phasellus leo dolor, tempus non, auctor et
|
|
|
|
|
|
|
|
</v-alert>
|
|
|
|
|
|
|
|
-->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<v-file-input
|
|
|
|
<v-file-input
|
|
|
|
v-model="system.firmware"
|
|
|
|
v-model="system.firmware"
|
|
|
|
show-size
|
|
|
|
show-size
|
|
|
|
accept="application/octet-stream"
|
|
|
|
accept="application/octet-stream"
|
|
|
|
label="Firmware"
|
|
|
|
label="Firmware"
|
|
|
|
></v-file-input>
|
|
|
|
/>
|
|
|
|
</v-card-text>
|
|
|
|
</v-card-text>
|
|
|
|
<v-card-actions>
|
|
|
|
<v-card-actions>
|
|
|
|
<v-btn text href="https://github.com/paperdash" target="_blank">Get firmware</v-btn>
|
|
|
|
|
|
|
|
<v-spacer></v-spacer>
|
|
|
|
|
|
|
|
<v-btn
|
|
|
|
<v-btn
|
|
|
|
|
|
|
|
text
|
|
|
|
|
|
|
|
href="https://github.com/paperdash"
|
|
|
|
|
|
|
|
target="_blank"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
Get firmware
|
|
|
|
|
|
|
|
</v-btn>
|
|
|
|
|
|
|
|
<v-spacer />
|
|
|
|
|
|
|
|
<v-btn
|
|
|
|
|
|
|
|
ref="firmware"
|
|
|
|
outlined
|
|
|
|
outlined
|
|
|
|
color="warning"
|
|
|
|
color="warning"
|
|
|
|
ref="firmware"
|
|
|
|
|
|
|
|
@click="onSystemUpdate()"
|
|
|
|
@click="onSystemUpdate()"
|
|
|
|
>Update system</v-btn>
|
|
|
|
>
|
|
|
|
|
|
|
|
Update system
|
|
|
|
<!--
|
|
|
|
</v-btn>
|
|
|
|
<v-btn color="green darken-1" text @click="dialogSystemUpdate = false">Disagree</v-btn>
|
|
|
|
|
|
|
|
<v-btn color="green darken-1" text @click="dialogSystemUpdate = false">Agree</v-btn>
|
|
|
|
|
|
|
|
-->
|
|
|
|
|
|
|
|
</v-card-actions>
|
|
|
|
</v-card-actions>
|
|
|
|
</v-card>
|
|
|
|
</v-card>
|
|
|
|
|
|
|
|
|
|
|
|
<v-dialog :value="system.updateResult !== null" persistent max-width="400">
|
|
|
|
<v-dialog
|
|
|
|
|
|
|
|
:value="system.updateResult !== null"
|
|
|
|
|
|
|
|
persistent
|
|
|
|
|
|
|
|
max-width="400"
|
|
|
|
|
|
|
|
>
|
|
|
|
<v-card>
|
|
|
|
<v-card>
|
|
|
|
<v-card-title class="headline">
|
|
|
|
<v-card-title class="headline">
|
|
|
|
update result...
|
|
|
|
update result...
|
|
|
@ -100,8 +135,13 @@
|
|
|
|
</v-card-title>
|
|
|
|
</v-card-title>
|
|
|
|
|
|
|
|
|
|
|
|
<v-card-actions>
|
|
|
|
<v-card-actions>
|
|
|
|
<v-spacer></v-spacer>
|
|
|
|
<v-spacer />
|
|
|
|
<v-btn text @click="onUpdateDone()">OK</v-btn>
|
|
|
|
<v-btn
|
|
|
|
|
|
|
|
text
|
|
|
|
|
|
|
|
@click="onUpdateDone()"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
OK
|
|
|
|
|
|
|
|
</v-btn>
|
|
|
|
</v-card-actions>
|
|
|
|
</v-card-actions>
|
|
|
|
</v-card>
|
|
|
|
</v-card>
|
|
|
|
</v-dialog>
|
|
|
|
</v-dialog>
|
|
|
@ -111,11 +151,17 @@
|
|
|
|
<v-tab-item>
|
|
|
|
<v-tab-item>
|
|
|
|
<v-card-text class="pb-0">
|
|
|
|
<v-card-text class="pb-0">
|
|
|
|
<v-row>
|
|
|
|
<v-row>
|
|
|
|
<v-col cols="3" class="text-center mt-2 pb-0">
|
|
|
|
<v-col
|
|
|
|
|
|
|
|
cols="3"
|
|
|
|
|
|
|
|
class="text-center mt-2 pb-0"
|
|
|
|
|
|
|
|
>
|
|
|
|
<v-icon>$wb_sunny</v-icon>
|
|
|
|
<v-icon>$wb_sunny</v-icon>
|
|
|
|
<br />Forecast
|
|
|
|
<br>Forecast
|
|
|
|
</v-col>
|
|
|
|
</v-col>
|
|
|
|
<v-col cols="6" class="text-center pb-0">
|
|
|
|
<v-col
|
|
|
|
|
|
|
|
cols="6"
|
|
|
|
|
|
|
|
class="text-center pb-0"
|
|
|
|
|
|
|
|
>
|
|
|
|
<v-text-field
|
|
|
|
<v-text-field
|
|
|
|
v-model="settings.playlist.timer"
|
|
|
|
v-model="settings.playlist.timer"
|
|
|
|
label="Switch every"
|
|
|
|
label="Switch every"
|
|
|
@ -125,15 +171,21 @@
|
|
|
|
filled
|
|
|
|
filled
|
|
|
|
suffix="seconds"
|
|
|
|
suffix="seconds"
|
|
|
|
class="text-right"
|
|
|
|
class="text-right"
|
|
|
|
></v-text-field>
|
|
|
|
/>
|
|
|
|
</v-col>
|
|
|
|
</v-col>
|
|
|
|
<v-col cols="3" class="text-center mt-2 pb-0">
|
|
|
|
<v-col
|
|
|
|
|
|
|
|
cols="3"
|
|
|
|
|
|
|
|
class="text-center mt-2 pb-0"
|
|
|
|
|
|
|
|
>
|
|
|
|
<v-icon>$calendar_today</v-icon>
|
|
|
|
<v-icon>$calendar_today</v-icon>
|
|
|
|
<br />Calendar
|
|
|
|
<br>Calendar
|
|
|
|
</v-col>
|
|
|
|
</v-col>
|
|
|
|
</v-row>
|
|
|
|
</v-row>
|
|
|
|
|
|
|
|
|
|
|
|
<ul class="mt-5" v-if="0">
|
|
|
|
<ul
|
|
|
|
|
|
|
|
v-if="0"
|
|
|
|
|
|
|
|
class="mt-5"
|
|
|
|
|
|
|
|
>
|
|
|
|
<li>calendar</li>
|
|
|
|
<li>calendar</li>
|
|
|
|
<li>weather forecast</li>
|
|
|
|
<li>weather forecast</li>
|
|
|
|
<li>unsplash.com</li>
|
|
|
|
<li>unsplash.com</li>
|
|
|
@ -143,30 +195,30 @@
|
|
|
|
<v-tab-item>
|
|
|
|
<v-tab-item>
|
|
|
|
<v-card-text>
|
|
|
|
<v-card-text>
|
|
|
|
<v-text-field
|
|
|
|
<v-text-field
|
|
|
|
label="i8n:OpenWeatherMap API key"
|
|
|
|
|
|
|
|
v-model="settings.weather.api"
|
|
|
|
v-model="settings.weather.api"
|
|
|
|
|
|
|
|
label="i8n:OpenWeatherMap API key"
|
|
|
|
placeholder="###"
|
|
|
|
placeholder="###"
|
|
|
|
></v-text-field>
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
|
|
<weather-find-location
|
|
|
|
<weather-find-location
|
|
|
|
:api="settings.weather.api"
|
|
|
|
:api="settings.weather.api"
|
|
|
|
:location.sync="settings.weather.location"
|
|
|
|
:location.sync="settings.weather.location"
|
|
|
|
:lang="settings.weather.lang"
|
|
|
|
:lang="settings.weather.lang"
|
|
|
|
:unit="settings.weather.unit"
|
|
|
|
:unit="settings.weather.unit"
|
|
|
|
></weather-find-location>
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
|
|
<v-select
|
|
|
|
<v-select
|
|
|
|
:items="weatherLang"
|
|
|
|
|
|
|
|
v-model="settings.weather.lang"
|
|
|
|
v-model="settings.weather.lang"
|
|
|
|
|
|
|
|
:items="weatherLang"
|
|
|
|
label="i8n:Lang"
|
|
|
|
label="i8n:Lang"
|
|
|
|
placeholder
|
|
|
|
placeholder
|
|
|
|
></v-select>
|
|
|
|
/>
|
|
|
|
<v-select
|
|
|
|
<v-select
|
|
|
|
:items="weatherUnit"
|
|
|
|
|
|
|
|
v-model="settings.weather.unit"
|
|
|
|
v-model="settings.weather.unit"
|
|
|
|
|
|
|
|
:items="weatherUnit"
|
|
|
|
label="i8n:Units"
|
|
|
|
label="i8n:Units"
|
|
|
|
placeholder
|
|
|
|
placeholder
|
|
|
|
></v-select>
|
|
|
|
/>
|
|
|
|
</v-card-text>
|
|
|
|
</v-card-text>
|
|
|
|
</v-tab-item>
|
|
|
|
</v-tab-item>
|
|
|
|
<!--
|
|
|
|
<!--
|
|
|
@ -196,26 +248,37 @@
|
|
|
|
</v-tabs-items>
|
|
|
|
</v-tabs-items>
|
|
|
|
|
|
|
|
|
|
|
|
<v-card-actions>
|
|
|
|
<v-card-actions>
|
|
|
|
<v-btn text to="/">i8n:cancel</v-btn>
|
|
|
|
<v-btn
|
|
|
|
|
|
|
|
text
|
|
|
|
|
|
|
|
to="/"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
i8n:cancel
|
|
|
|
|
|
|
|
</v-btn>
|
|
|
|
|
|
|
|
|
|
|
|
<v-spacer></v-spacer>
|
|
|
|
<v-spacer />
|
|
|
|
|
|
|
|
|
|
|
|
<v-btn text color="primary" @click="onSave()">i8n:Save</v-btn>
|
|
|
|
<v-btn
|
|
|
|
|
|
|
|
text
|
|
|
|
|
|
|
|
color="primary"
|
|
|
|
|
|
|
|
@click="onSave()"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
i8n:Save
|
|
|
|
|
|
|
|
</v-btn>
|
|
|
|
</v-card-actions>
|
|
|
|
</v-card-actions>
|
|
|
|
</v-card>
|
|
|
|
</v-card>
|
|
|
|
</v-container>
|
|
|
|
</v-container>
|
|
|
|
</v-layout>
|
|
|
|
</v-row>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
import apiDevice from "../api/device";
|
|
|
|
import apiDevice from '../api/device'
|
|
|
|
import weatherFindLocation from "./../components/WeatherFindLocation";
|
|
|
|
import weatherFindLocation from './../components/WeatherFindLocation'
|
|
|
|
import axios from "axios";
|
|
|
|
import axios from 'axios'
|
|
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
name: "Settings",
|
|
|
|
name: 'Settings',
|
|
|
|
components: {
|
|
|
|
components: {
|
|
|
|
weatherFindLocation
|
|
|
|
weatherFindLocation,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
data: () => ({
|
|
|
|
data: () => ({
|
|
|
|
isLoading: true,
|
|
|
|
isLoading: true,
|
|
|
@ -226,162 +289,162 @@ export default {
|
|
|
|
|
|
|
|
|
|
|
|
// 0 thru 3 corresponding to 4 cardinal rotations
|
|
|
|
// 0 thru 3 corresponding to 4 cardinal rotations
|
|
|
|
deviceOrientation: [
|
|
|
|
deviceOrientation: [
|
|
|
|
{ text: "Nord", value: 0 },
|
|
|
|
{ text: 'Nord', value: 0 },
|
|
|
|
{ text: "East", value: 1 },
|
|
|
|
{ text: 'East', value: 1 },
|
|
|
|
{ text: "South", value: 2 },
|
|
|
|
{ text: 'South', value: 2 },
|
|
|
|
{ text: "West", value: 3 }
|
|
|
|
{ text: 'West', value: 3 },
|
|
|
|
],
|
|
|
|
],
|
|
|
|
deviceTheme: [
|
|
|
|
deviceTheme: [
|
|
|
|
{ text: "Black", value: "black" },
|
|
|
|
{ text: 'Black', value: 'black' },
|
|
|
|
{ text: "White", value: "white" }
|
|
|
|
{ text: 'White', value: 'white' },
|
|
|
|
],
|
|
|
|
],
|
|
|
|
deviceMode: [
|
|
|
|
deviceMode: [
|
|
|
|
{ text: "Active", value: "active" },
|
|
|
|
{ text: 'Active', value: 'active' },
|
|
|
|
{ text: "Passive", value: "passive" }
|
|
|
|
{ text: 'Passive', value: 'passive' },
|
|
|
|
],
|
|
|
|
],
|
|
|
|
|
|
|
|
|
|
|
|
// @see https://openweathermap.org/current#multi
|
|
|
|
// @see https://openweathermap.org/current#multi
|
|
|
|
weatherLang: [
|
|
|
|
weatherLang: [
|
|
|
|
{ text: "English", value: "en" },
|
|
|
|
{ text: 'English', value: 'en' },
|
|
|
|
{ text: "Deutsch", value: "de" }
|
|
|
|
{ text: 'Deutsch', value: 'de' },
|
|
|
|
],
|
|
|
|
],
|
|
|
|
weatherUnit: [
|
|
|
|
weatherUnit: [
|
|
|
|
{ text: "Imperial", value: "" },
|
|
|
|
{ text: 'Imperial', value: '' },
|
|
|
|
{ text: "Metrisch", value: "metric" }
|
|
|
|
{ text: 'Metrisch', value: 'metric' },
|
|
|
|
],
|
|
|
|
],
|
|
|
|
|
|
|
|
|
|
|
|
dialogSystemUpdate: false,
|
|
|
|
dialogSystemUpdate: false,
|
|
|
|
system: {
|
|
|
|
system: {
|
|
|
|
firmware: null,
|
|
|
|
firmware: null,
|
|
|
|
updateProgress: 0,
|
|
|
|
updateProgress: 0,
|
|
|
|
updateResult: null
|
|
|
|
updateResult: null,
|
|
|
|
}
|
|
|
|
},
|
|
|
|
}),
|
|
|
|
}),
|
|
|
|
created () {
|
|
|
|
created () {
|
|
|
|
this.$vuetify.icons.values.tv = {
|
|
|
|
this.$vuetify.icons.values.tv = {
|
|
|
|
component: () =>
|
|
|
|
component: () =>
|
|
|
|
import(
|
|
|
|
import(
|
|
|
|
/* webpackChunkName: "icons" */ "!vue-svg-loader!@material-icons/svg/svg/tv/baseline.svg"
|
|
|
|
/* webpackChunkName: "icons" */ '!vue-svg-loader!@material-icons/svg/svg/tv/baseline.svg'
|
|
|
|
)
|
|
|
|
),
|
|
|
|
};
|
|
|
|
}
|
|
|
|
this.$vuetify.icons.values.playlist = {
|
|
|
|
this.$vuetify.icons.values.playlist = {
|
|
|
|
component: () =>
|
|
|
|
component: () =>
|
|
|
|
import(
|
|
|
|
import(
|
|
|
|
/* webpackChunkName: "icons" */ "!vue-svg-loader!@material-icons/svg/svg/live_tv/baseline.svg"
|
|
|
|
/* webpackChunkName: "icons" */ '!vue-svg-loader!@material-icons/svg/svg/live_tv/baseline.svg'
|
|
|
|
)
|
|
|
|
),
|
|
|
|
}; // slideshow | playlist_play | live_tv | queue_play_next
|
|
|
|
} // slideshow | playlist_play | live_tv | queue_play_next
|
|
|
|
this.$vuetify.icons.values.keys = {
|
|
|
|
this.$vuetify.icons.values.keys = {
|
|
|
|
component: () =>
|
|
|
|
component: () =>
|
|
|
|
import(
|
|
|
|
import(
|
|
|
|
/* webpackChunkName: "icons" */ "!vue-svg-loader!@material-icons/svg/svg/insert_link/baseline.svg"
|
|
|
|
/* webpackChunkName: "icons" */ '!vue-svg-loader!@material-icons/svg/svg/insert_link/baseline.svg'
|
|
|
|
)
|
|
|
|
),
|
|
|
|
};
|
|
|
|
}
|
|
|
|
this.$vuetify.icons.values.cloud = {
|
|
|
|
this.$vuetify.icons.values.cloud = {
|
|
|
|
component: () =>
|
|
|
|
component: () =>
|
|
|
|
import(
|
|
|
|
import(
|
|
|
|
/* webpackChunkName: "icons" */ "!vue-svg-loader!@material-icons/svg/svg/cloud/baseline.svg"
|
|
|
|
/* webpackChunkName: "icons" */ '!vue-svg-loader!@material-icons/svg/svg/cloud/baseline.svg'
|
|
|
|
)
|
|
|
|
),
|
|
|
|
};
|
|
|
|
}
|
|
|
|
this.$vuetify.icons.values.calendar_today = {
|
|
|
|
this.$vuetify.icons.values.calendar_today = {
|
|
|
|
component: () =>
|
|
|
|
component: () =>
|
|
|
|
import(
|
|
|
|
import(
|
|
|
|
/* webpackChunkName: "icons" */ "!vue-svg-loader!@material-icons/svg/svg/calendar_today/baseline.svg"
|
|
|
|
/* webpackChunkName: "icons" */ '!vue-svg-loader!@material-icons/svg/svg/calendar_today/baseline.svg'
|
|
|
|
)
|
|
|
|
),
|
|
|
|
};
|
|
|
|
}
|
|
|
|
this.$vuetify.icons.values.wb_sunny = {
|
|
|
|
this.$vuetify.icons.values.wb_sunny = {
|
|
|
|
component: () =>
|
|
|
|
component: () =>
|
|
|
|
import(
|
|
|
|
import(
|
|
|
|
/* webpackChunkName: "icons" */ "!vue-svg-loader!@material-icons/svg/svg/wb_sunny/baseline.svg"
|
|
|
|
/* webpackChunkName: "icons" */ '!vue-svg-loader!@material-icons/svg/svg/wb_sunny/baseline.svg'
|
|
|
|
)
|
|
|
|
),
|
|
|
|
};
|
|
|
|
}
|
|
|
|
this.$vuetify.icons.values.system_update = {
|
|
|
|
this.$vuetify.icons.values.system_update = {
|
|
|
|
component: () =>
|
|
|
|
component: () =>
|
|
|
|
import(
|
|
|
|
import(
|
|
|
|
/* webpackChunkName: "icons" */ "!vue-svg-loader!@material-icons/svg/svg/system_update_alt/baseline.svg"
|
|
|
|
/* webpackChunkName: "icons" */ '!vue-svg-loader!@material-icons/svg/svg/system_update_alt/baseline.svg'
|
|
|
|
)
|
|
|
|
),
|
|
|
|
};
|
|
|
|
}
|
|
|
|
this.$vuetify.icons.values.file = {
|
|
|
|
this.$vuetify.icons.values.file = {
|
|
|
|
component: () =>
|
|
|
|
component: () =>
|
|
|
|
import(
|
|
|
|
import(
|
|
|
|
/* webpackChunkName: "icons" */ "!vue-svg-loader!@material-icons/svg/svg/attach_file/baseline.svg"
|
|
|
|
/* webpackChunkName: "icons" */ '!vue-svg-loader!@material-icons/svg/svg/attach_file/baseline.svg'
|
|
|
|
)
|
|
|
|
),
|
|
|
|
};
|
|
|
|
}
|
|
|
|
this.$vuetify.icons.values.warning = {
|
|
|
|
this.$vuetify.icons.values.warning = {
|
|
|
|
component: () =>
|
|
|
|
component: () =>
|
|
|
|
import(
|
|
|
|
import(
|
|
|
|
/* webpackChunkName: "icons" */ "!vue-svg-loader!@material-icons/svg/svg/warning/baseline.svg"
|
|
|
|
/* webpackChunkName: "icons" */ '!vue-svg-loader!@material-icons/svg/svg/warning/baseline.svg'
|
|
|
|
)
|
|
|
|
),
|
|
|
|
};
|
|
|
|
}
|
|
|
|
this.$vuetify.icons.values.clear = {
|
|
|
|
this.$vuetify.icons.values.clear = {
|
|
|
|
component: () =>
|
|
|
|
component: () =>
|
|
|
|
import(
|
|
|
|
import(
|
|
|
|
/* webpackChunkName: "icons" */ "!vue-svg-loader!@material-icons/svg/svg/clear/baseline.svg"
|
|
|
|
/* webpackChunkName: "icons" */ '!vue-svg-loader!@material-icons/svg/svg/clear/baseline.svg'
|
|
|
|
)
|
|
|
|
),
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
apiDevice.getSettings(settings => {
|
|
|
|
apiDevice.getSettings(settings => {
|
|
|
|
this.settings = settings;
|
|
|
|
this.settings = settings
|
|
|
|
|
|
|
|
|
|
|
|
this.isLoading = false;
|
|
|
|
this.isLoading = false
|
|
|
|
});
|
|
|
|
})
|
|
|
|
},
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
methods: {
|
|
|
|
onSave () {
|
|
|
|
onSave () {
|
|
|
|
this.isLoading = true;
|
|
|
|
this.isLoading = true
|
|
|
|
|
|
|
|
|
|
|
|
apiDevice.putSettings(this.settings, data => {
|
|
|
|
apiDevice.putSettings(this.settings, data => {
|
|
|
|
console.log(data);
|
|
|
|
console.log(data)
|
|
|
|
this.isLoading = false;
|
|
|
|
this.isLoading = false
|
|
|
|
this.isSnackbar = true;
|
|
|
|
this.isSnackbar = true
|
|
|
|
|
|
|
|
|
|
|
|
this.$router.push("/");
|
|
|
|
this.$router.push('/')
|
|
|
|
});
|
|
|
|
})
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
onSystemUpdate () {
|
|
|
|
onSystemUpdate () {
|
|
|
|
let self = this;
|
|
|
|
const self = this
|
|
|
|
self.system.updateProgress = 0;
|
|
|
|
self.system.updateProgress = 0
|
|
|
|
|
|
|
|
|
|
|
|
const config = {
|
|
|
|
const config = {
|
|
|
|
onUploadProgress: function (progressEvent) {
|
|
|
|
onUploadProgress: function (progressEvent) {
|
|
|
|
let percentCompleted = Math.round(
|
|
|
|
const percentCompleted = Math.round(
|
|
|
|
(progressEvent.loaded * 100) / progressEvent.total
|
|
|
|
(progressEvent.loaded * 100) / progressEvent.total,
|
|
|
|
);
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
|
|
self.system.updateProgress = percentCompleted;
|
|
|
|
self.system.updateProgress = percentCompleted
|
|
|
|
|
|
|
|
},
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let formData = new FormData();
|
|
|
|
const formData = new FormData()
|
|
|
|
formData.append("update", this.system.firmware);
|
|
|
|
formData.append('update', this.system.firmware)
|
|
|
|
|
|
|
|
|
|
|
|
axios
|
|
|
|
axios
|
|
|
|
.post("/update", formData, config)
|
|
|
|
.post('/update', formData, config)
|
|
|
|
.then(response => {
|
|
|
|
.then(response => {
|
|
|
|
console.log(response.data);
|
|
|
|
console.log(response.data)
|
|
|
|
|
|
|
|
|
|
|
|
self.system.updateProgress = null;
|
|
|
|
self.system.updateProgress = null
|
|
|
|
self.system.updateResult = response.data.success;
|
|
|
|
self.system.updateResult = response.data.success
|
|
|
|
})
|
|
|
|
})
|
|
|
|
.catch(response => {
|
|
|
|
.catch(response => {
|
|
|
|
console.log(response);
|
|
|
|
console.log(response)
|
|
|
|
|
|
|
|
|
|
|
|
self.system.updateProgress = null;
|
|
|
|
self.system.updateProgress = null
|
|
|
|
self.system.updateResult = false;
|
|
|
|
self.system.updateResult = false
|
|
|
|
});
|
|
|
|
})
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
onUpdateDone () {
|
|
|
|
onUpdateDone () {
|
|
|
|
if (this.system.updateResult === true) {
|
|
|
|
if (this.system.updateResult === true) {
|
|
|
|
window.location = "/";
|
|
|
|
window.location = '/'
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
this.system.firmware = null;
|
|
|
|
this.system.firmware = null
|
|
|
|
this.system.updateProgress = 0;
|
|
|
|
this.system.updateProgress = 0
|
|
|
|
this.system.updateResult = null;
|
|
|
|
this.system.updateResult = null
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
<style scoped>
|
|
|
|