From 44ac688fb6597ae26bfe50848fd1ef6ccb099286 Mon Sep 17 00:00:00 2001
From: Thomas Ballmann <mail@i-2xdream.de>
Date: Sat, 22 Feb 2020 23:10:08 +0100
Subject: [PATCH] frontend nearly completed #2

---
 app/src/api/device.js      |  36 ++++---
 app/src/views/Settings.vue | 195 +++++++++++++++++++++++++++----------
 2 files changed, 165 insertions(+), 66 deletions(-)

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