|
|
|
@ -6,54 +6,122 @@
|
|
|
|
|
</v-overlay>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<template v-if="true">
|
|
|
|
|
<v-container>
|
|
|
|
|
|
|
|
|
|
<v-snackbar
|
|
|
|
|
v-model="isSnackbar"
|
|
|
|
|
:timeout="3000"
|
|
|
|
|
color="success"
|
|
|
|
|
>
|
|
|
|
|
i8n:saved
|
|
|
|
|
</v-snackbar>
|
|
|
|
|
|
|
|
|
|
<v-card
|
|
|
|
|
class="mx-auto"
|
|
|
|
|
width="400"
|
|
|
|
|
<v-container>
|
|
|
|
|
<v-snackbar
|
|
|
|
|
v-model="isSnackbar"
|
|
|
|
|
:timeout="3000"
|
|
|
|
|
color="success"
|
|
|
|
|
>
|
|
|
|
|
i8n:saved
|
|
|
|
|
</v-snackbar>
|
|
|
|
|
|
|
|
|
|
<v-tabs v-model="tab" centered icons-and-text>
|
|
|
|
|
<v-tab>Device <v-icon>$tv</v-icon></v-tab>
|
|
|
|
|
<v-tab>Playlist <v-icon>$playlist</v-icon></v-tab>
|
|
|
|
|
<v-tab>Keys <v-icon>$keys</v-icon></v-tab>
|
|
|
|
|
<v-tab>Cloud <v-icon>$cloud</v-icon></v-tab>
|
|
|
|
|
</v-tabs>
|
|
|
|
|
|
|
|
|
|
<v-card
|
|
|
|
|
class="mx-auto"
|
|
|
|
|
width="400"
|
|
|
|
|
>
|
|
|
|
|
<v-card-text>
|
|
|
|
|
<v-select
|
|
|
|
|
:items="deviceMode"
|
|
|
|
|
v-model="settings.device_mode"
|
|
|
|
|
label="i8n:Device mode"
|
|
|
|
|
placeholder=""
|
|
|
|
|
></v-select>
|
|
|
|
|
|
|
|
|
|
<v-text-field
|
|
|
|
|
label="i8n:Cloud server"
|
|
|
|
|
v-model="settings.cloud_server"
|
|
|
|
|
placeholder="i8n:https://"
|
|
|
|
|
></v-text-field>
|
|
|
|
|
|
|
|
|
|
<v-text-field
|
|
|
|
|
label="i8n:Cloud Token"
|
|
|
|
|
v-model="settings.cloud_uuid"
|
|
|
|
|
placeholder="########-####-####-####-############"
|
|
|
|
|
></v-text-field>
|
|
|
|
|
|
|
|
|
|
<v-text-field
|
|
|
|
|
label="i8n:Cloud User"
|
|
|
|
|
v-model="settings.cloud_user"
|
|
|
|
|
placeholder="user@domain.io"
|
|
|
|
|
></v-text-field>
|
|
|
|
|
|
|
|
|
|
<v-btn class="mr-4 primary" @click="onSave">i8n:save</v-btn>
|
|
|
|
|
</v-card-text>
|
|
|
|
|
</v-card>
|
|
|
|
|
|
|
|
|
|
</v-container>
|
|
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
<v-tabs-items v-model="tab">
|
|
|
|
|
<v-tab-item>
|
|
|
|
|
<v-card-text>
|
|
|
|
|
<v-select
|
|
|
|
|
:items="deviceOrientation"
|
|
|
|
|
v-model="settings.device.orientation"
|
|
|
|
|
label="i8n:Orientation"
|
|
|
|
|
placeholder=""
|
|
|
|
|
></v-select>
|
|
|
|
|
|
|
|
|
|
<v-select
|
|
|
|
|
:items="deviceTheme"
|
|
|
|
|
v-model="settings.device.theme"
|
|
|
|
|
label="i8n:Theme"
|
|
|
|
|
placeholder=""
|
|
|
|
|
></v-select>
|
|
|
|
|
</v-card-text>
|
|
|
|
|
</v-tab-item>
|
|
|
|
|
<v-tab-item>
|
|
|
|
|
<v-card-text class="pb-0">
|
|
|
|
|
<v-row>
|
|
|
|
|
<v-col cols="3" class="text-center mt-2 pb-0">
|
|
|
|
|
<v-icon>$wb_sunny</v-icon><br/>
|
|
|
|
|
Forecast
|
|
|
|
|
</v-col>
|
|
|
|
|
<v-col cols="6" class="text-center pb-0">
|
|
|
|
|
<v-text-field
|
|
|
|
|
v-model="settings.playlist.interval"
|
|
|
|
|
label="Switch every"
|
|
|
|
|
type="number"
|
|
|
|
|
dense
|
|
|
|
|
rounded
|
|
|
|
|
filled
|
|
|
|
|
suffix="seconds"
|
|
|
|
|
class="text-right"
|
|
|
|
|
></v-text-field>
|
|
|
|
|
</v-col>
|
|
|
|
|
<v-col cols="3" class="text-center mt-2 pb-0">
|
|
|
|
|
<v-icon>$calendar_today</v-icon><br/>
|
|
|
|
|
Calendar
|
|
|
|
|
</v-col>
|
|
|
|
|
</v-row>
|
|
|
|
|
|
|
|
|
|
<ul class="mt-5" v-if="0">
|
|
|
|
|
<li>calendar</li>
|
|
|
|
|
<li>weather forecast</li>
|
|
|
|
|
<li>unsplash.com</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</v-card-text>
|
|
|
|
|
</v-tab-item>
|
|
|
|
|
<v-tab-item>
|
|
|
|
|
<v-card-text>
|
|
|
|
|
<v-text-field
|
|
|
|
|
label="i8n:OpenWeatherMap"
|
|
|
|
|
v-model="settings.credentials.open_weather_map"
|
|
|
|
|
placeholder="###"
|
|
|
|
|
></v-text-field>
|
|
|
|
|
|
|
|
|
|
<v-text-field
|
|
|
|
|
label="i8n:Calendar"
|
|
|
|
|
v-model="settings.credentials._"
|
|
|
|
|
placeholder="###"
|
|
|
|
|
></v-text-field>
|
|
|
|
|
</v-card-text>
|
|
|
|
|
</v-tab-item>
|
|
|
|
|
<v-tab-item>
|
|
|
|
|
<v-card-text>
|
|
|
|
|
<v-select
|
|
|
|
|
:items="deviceMode"
|
|
|
|
|
v-model="settings.cloud.mode"
|
|
|
|
|
label="i8n:Device mode"
|
|
|
|
|
placeholder=""
|
|
|
|
|
></v-select>
|
|
|
|
|
|
|
|
|
|
<v-text-field
|
|
|
|
|
label="i8n:Cloud server"
|
|
|
|
|
v-model="settings.cloud.url"
|
|
|
|
|
placeholder="i8n:https://"
|
|
|
|
|
></v-text-field>
|
|
|
|
|
|
|
|
|
|
<v-text-field
|
|
|
|
|
label="i8n:Cloud Token"
|
|
|
|
|
v-model="settings.cloud.token"
|
|
|
|
|
placeholder="########-####-####-####-############"
|
|
|
|
|
></v-text-field>
|
|
|
|
|
|
|
|
|
|
<v-text-field
|
|
|
|
|
label="i8n:Cloud User"
|
|
|
|
|
v-model="settings.cloud_user"
|
|
|
|
|
placeholder="user@domain.io"
|
|
|
|
|
></v-text-field>
|
|
|
|
|
</v-card-text>
|
|
|
|
|
</v-tab-item>
|
|
|
|
|
</v-tabs-items>
|
|
|
|
|
</v-card>
|
|
|
|
|
</v-container>
|
|
|
|
|
</v-layout>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
@ -65,18 +133,35 @@
|
|
|
|
|
data: () => ({
|
|
|
|
|
isLoading: true,
|
|
|
|
|
isSnackbar: false,
|
|
|
|
|
|
|
|
|
|
settings: {
|
|
|
|
|
device_mode: null,
|
|
|
|
|
cloud_server: null
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
tab: 0,
|
|
|
|
|
|
|
|
|
|
settings: null,
|
|
|
|
|
|
|
|
|
|
// 0 thru 3 corresponding to 4 cardinal rotations
|
|
|
|
|
deviceOrientation: [
|
|
|
|
|
{text: 'Nord', value: 0},
|
|
|
|
|
{text: 'East', value: 1},
|
|
|
|
|
{text: 'South', value: 2},
|
|
|
|
|
{text: 'West', value: 3},
|
|
|
|
|
],
|
|
|
|
|
deviceTheme: [
|
|
|
|
|
{text: 'Black', value: 'black'},
|
|
|
|
|
{text: 'White', value: 'white'},
|
|
|
|
|
],
|
|
|
|
|
deviceMode: [
|
|
|
|
|
{text: 'Active', value: 'active'},
|
|
|
|
|
{text: 'Passive', value: 'passive'}
|
|
|
|
|
]
|
|
|
|
|
}),
|
|
|
|
|
created () {
|
|
|
|
|
this.$vuetify.icons.values.tv = {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/tv/baseline.svg')}
|
|
|
|
|
this.$vuetify.icons.values.playlist = {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/live_tv/baseline.svg')} // slideshow | playlist_play | live_tv | queue_play_next
|
|
|
|
|
this.$vuetify.icons.values.keys = {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/insert_link/baseline.svg')}
|
|
|
|
|
this.$vuetify.icons.values.cloud = {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/cloud/baseline.svg')}
|
|
|
|
|
this.$vuetify.icons.values.calendar_today = {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/calendar_today/baseline.svg')}
|
|
|
|
|
this.$vuetify.icons.values.wb_sunny = {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/wb_sunny/baseline.svg')}
|
|
|
|
|
this.$vuetify.icons.values.update = {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/update/baseline.svg')}
|
|
|
|
|
|
|
|
|
|
apiDevice.getSettings(settings => {
|
|
|
|
|
this.settings = settings
|
|
|
|
|
|
|
|
|
@ -99,5 +184,7 @@
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
|
|
|
|
|
>>>.v-input.text-right .v-text-field__slot > input {
|
|
|
|
|
text-align: right;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|