diff --git a/WebDisplay/deploy/manifest-internal.yaml b/WebDisplay/deploy/manifest-internal.yaml index 7a4d1a2..0cedf8b 100644 --- a/WebDisplay/deploy/manifest-internal.yaml +++ b/WebDisplay/deploy/manifest-internal.yaml @@ -47,6 +47,11 @@ spec: secretKeyRef: name: display-internal-config key: ALARM_DEVICE + - name: CALENDAR_EMBED_URL + valueFrom: + secretKeyRef: + name: display-internal-config + key: CALENDAR_EMBED_URL restartPolicy: Always terminationGracePeriodSeconds: 30 dnsPolicy: ClusterFirst diff --git a/WebDisplay/deploy/manifest.yaml b/WebDisplay/deploy/manifest.yaml index 1e39b98..7254622 100644 --- a/WebDisplay/deploy/manifest.yaml +++ b/WebDisplay/deploy/manifest.yaml @@ -35,6 +35,8 @@ spec: value: - name: ALARM_DEVICE value: + - name: CALENDAR_EMBED_URL + value: restartPolicy: Always terminationGracePeriodSeconds: 30 dnsPolicy: ClusterFirst diff --git a/WebDisplay/src/environment.ts b/WebDisplay/src/environment.ts index eee8904..968da2d 100644 --- a/WebDisplay/src/environment.ts +++ b/WebDisplay/src/environment.ts @@ -18,4 +18,8 @@ export default class Environment { public static getAlarmDevice(): string { return '#ALARM_DEVICE#'; } + + public static getCalendarEmbedUrl(): string { + return '#CALENDAR_EMBED_URL#'; + } } diff --git a/WebDisplay/src/pages/kiosk.vue b/WebDisplay/src/pages/kiosk.vue index 01ec7bf..351cf2b 100644 --- a/WebDisplay/src/pages/kiosk.vue +++ b/WebDisplay/src/pages/kiosk.vue @@ -4,6 +4,7 @@ import { useLaundryStore } from '@/stores/laundryStore'; import { usePowerStore } from '@/stores/powerStore'; import { useHomeAssistantStore } from '@/stores/homeAssistantStore'; + import Environment from '@/environment'; const weatherStore = useWeatherStore(); weatherStore.start(); @@ -111,6 +112,17 @@ +
+
+ +
+
@@ -118,17 +130,13 @@ .kiosk-container { height: 100%; padding: 0; - background-color: #020c25; - color: #9acef1; + background-color: #212428; + color: #1f1f1f; display: grid; grid-template-columns: 250px 1fr; grid-template-rows: 1fr; - gap: 15px 15px; grid-auto-flow: row; - grid-template-areas: - 'kiosk-sidebar . ' - 'kiosk-sidebar . ' - 'kiosk-sidebar . '; + grid-template-areas: 'kiosk-sidebar kiosk-content'; } .kiosk-row { @@ -141,7 +149,7 @@ .kiosk-sidebar { padding: 5px; - background-color: #13213e; + background-color: #121212; grid-area: kiosk-sidebar; display: grid; @@ -159,6 +167,16 @@ 'kiosk-garage-door kiosk-house-alarm'; } + .kiosk-content { + height: 100%; + padding: 0; + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(2, 1fr); + grid-auto-flow: row; + grid-template-areas: 'kiosk-calendar .'; + } + .kiosk-time { font-size: 2.8rem; grid-area: kiosk-time; @@ -211,6 +229,10 @@ font-size: 1.3rem; } + .kiosk-calendar { + grid-area: kiosk-calendar; + } + .true { color: #d09f27; }