frontend nearly completed #2

pull/1/head
Thomas Ballmann 4 years ago
parent 3200db72cf
commit 44ac688fb6

@ -4,18 +4,22 @@
// eslint-disable-next-line // eslint-disable-next-line
const _settings = { const _settings = {
// connected wifi device: {
"wifi_ssid": "", orientation: 0,
theme: "black",
// oparation mode },
"device_mode": "active", playlist: {
interval: 60
// Set rotation setting for display },
// 0 thru 3 corresponding to 4 cardinal rotations credentials: {
"device_rotation": 0,
// clound server endpoint },
"cloud_server": "" cloud: {
mode: "active",
url: "http://",
token: "###",
user: ""
}
} }
// eslint-disable-next-line // eslint-disable-next-line
@ -30,6 +34,9 @@ export default {
* @returns {PromiseLike<any> | Promise<any>} * @returns {PromiseLike<any> | Promise<any>}
*/ */
getSettings(cb) { getSettings(cb) {
return cb(_settings);
// eslint-disable-next-line
return axios return axios
.get('/api/settings') .get('/api/settings')
.then(response => cb(response.data)) .then(response => cb(response.data))
@ -64,7 +71,12 @@ export default {
}, },
/**
* connect to wifi
* @param {*} ssid
* @param {*} password
* @param {*} cb
*/
wifiConnect(ssid, password, cb) { wifiConnect(ssid, password, cb) {
return axios return axios
.post('/api/wifi/connect', { .post('/api/wifi/connect', {

@ -6,54 +6,122 @@
</v-overlay> </v-overlay>
</template> </template>
<template v-if="true"> <v-container>
<v-container> <v-snackbar
v-model="isSnackbar"
<v-snackbar :timeout="3000"
v-model="isSnackbar" color="success"
:timeout="3000" >
color="success" i8n:saved
> </v-snackbar>
i8n:saved
</v-snackbar> <v-tabs v-model="tab" centered icons-and-text>
<v-tab>Device <v-icon>$tv</v-icon></v-tab>
<v-card <v-tab>Playlist <v-icon>$playlist</v-icon></v-tab>
class="mx-auto" <v-tab>Keys <v-icon>$keys</v-icon></v-tab>
width="400" <v-tab>Cloud <v-icon>$cloud</v-icon></v-tab>
</v-tabs>
<v-card
class="mx-auto"
width="400"
> >
<v-card-text> <v-tabs-items v-model="tab">
<v-select <v-tab-item>
:items="deviceMode" <v-card-text>
v-model="settings.device_mode" <v-select
label="i8n:Device mode" :items="deviceOrientation"
placeholder="" v-model="settings.device.orientation"
></v-select> label="i8n:Orientation"
placeholder=""
<v-text-field ></v-select>
label="i8n:Cloud server"
v-model="settings.cloud_server" <v-select
placeholder="i8n:https://" :items="deviceTheme"
></v-text-field> v-model="settings.device.theme"
label="i8n:Theme"
<v-text-field placeholder=""
label="i8n:Cloud Token" ></v-select>
v-model="settings.cloud_uuid" </v-card-text>
placeholder="########-####-####-####-############" </v-tab-item>
></v-text-field> <v-tab-item>
<v-card-text class="pb-0">
<v-text-field <v-row>
label="i8n:Cloud User" <v-col cols="3" class="text-center mt-2 pb-0">
v-model="settings.cloud_user" <v-icon>$wb_sunny</v-icon><br/>
placeholder="user@domain.io" Forecast
></v-text-field> </v-col>
<v-col cols="6" class="text-center pb-0">
<v-btn class="mr-4 primary" @click="onSave">i8n:save</v-btn> <v-text-field
</v-card-text> v-model="settings.playlist.interval"
</v-card> label="Switch every"
type="number"
</v-container> dense
rounded
</template> 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> </v-layout>
</template> </template>
@ -65,18 +133,35 @@
data: () => ({ data: () => ({
isLoading: true, isLoading: true,
isSnackbar: false, isSnackbar: false,
tab: 0,
settings: {
device_mode: null, settings: null,
cloud_server: 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: [ deviceMode: [
{text: 'Active', value: 'active'}, {text: 'Active', value: 'active'},
{text: 'Passive', value: 'passive'} {text: 'Passive', value: 'passive'}
] ]
}), }),
created () { 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 => { apiDevice.getSettings(settings => {
this.settings = settings this.settings = settings
@ -99,5 +184,7 @@
</script> </script>
<style scoped> <style scoped>
>>>.v-input.text-right .v-text-field__slot > input {
text-align: right;
}
</style> </style>

Loading…
Cancel
Save