From 2b52a15f96efc74dc4134cc867ff23c715b6241c Mon Sep 17 00:00:00 2001
From: Chris Kaczor <chris@kaczorzoo.net>
Date: Fri, 20 Dec 2024 16:36:29 +0000
Subject: [PATCH] Add long press button for actions

---
 WebDisplay/components.d.ts                    |  1 +
 WebDisplay/nginx/entrypoint.sh                |  3 +-
 WebDisplay/src/components/LongPressButton.vue | 79 +++++++++++++++++++
 WebDisplay/src/environment.ts                 |  4 -
 WebDisplay/src/pages/kiosk.vue                | 10 ++-
 5 files changed, 88 insertions(+), 9 deletions(-)
 create mode 100644 WebDisplay/src/components/LongPressButton.vue

diff --git a/WebDisplay/components.d.ts b/WebDisplay/components.d.ts
index b4d2b18..b5ea2fc 100644
--- a/WebDisplay/components.d.ts
+++ b/WebDisplay/components.d.ts
@@ -15,6 +15,7 @@ declare module 'vue' {
     DashboardItem: typeof import('./src/components/DashboardItem.vue')['default']
     Indoor: typeof import('./src/components/Indoor.vue')['default']
     IndoorSummary: typeof import('./src/components/IndoorSummary.vue')['default']
+    LongPressButton: typeof import('./src/components/LongPressButton.vue')['default']
     NationalDays: typeof import('./src/components/NationalDays.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
diff --git a/WebDisplay/nginx/entrypoint.sh b/WebDisplay/nginx/entrypoint.sh
index 076cf65..8e3b7b6 100644
--- a/WebDisplay/nginx/entrypoint.sh
+++ b/WebDisplay/nginx/entrypoint.sh
@@ -4,5 +4,4 @@ sed -i -e "s~#API_PREFIX#~$API_PREFIX~g" /usr/share/nginx/html/assets/*
 sed -i -e "s~#HOME_ASSISTANT_URL#~$HOME_ASSISTANT_URL~g" /usr/share/nginx/html/assets/*
 sed -i -e "s~#HOME_ASSISTANT_TOKEN#~$HOME_ASSISTANT_TOKEN~g" /usr/share/nginx/html/assets/*
 sed -i -e "s~#GARAGE_DEVICE#~$GARAGE_DEVICE~g" /usr/share/nginx/html/assets/*
-sed -i -e "s~#ALARM_DEVICE#~$ALARM_DEVICE~g" /usr/share/nginx/html/assets/*
-sed -i -e "s~#CALENDAR_EMBED_URL#~$CALENDAR_EMBED_URL~g" /usr/share/nginx/html/assets/*
+sed -i -e "s~#ALARM_DEVICE#~$ALARM_DEVICE~g" /usr/share/nginx/html/assets/*
\ No newline at end of file
diff --git a/WebDisplay/src/components/LongPressButton.vue b/WebDisplay/src/components/LongPressButton.vue
new file mode 100644
index 0000000..9bc017b
--- /dev/null
+++ b/WebDisplay/src/components/LongPressButton.vue
@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+    import { ref } from 'vue';
+
+    const emit = defineEmits(['longPress']);
+    const props = defineProps(['duration', 'increment', 'progressSize']);
+
+    const current = ref(0 as number);
+    const loading = ref(false);
+
+    let interval: NodeJS.Timeout;
+
+    function mousedown() {
+        loading.value = true;
+
+        increment();
+
+        interval = setInterval(increment, props.increment);
+    }
+
+    function mouseup() {
+        reset();
+    }
+
+    function reset() {
+        clearInterval(interval);
+
+        loading.value = false;
+        current.value = 0;
+    }
+
+    function increment() {
+        current.value = current.value + props.increment;
+
+        if (current.value >= props.duration) {
+            emit('longPress');
+
+            reset();
+        }
+    }
+
+    function progress() {
+        if (current.value >= props.duration) {
+            return 100;
+        }
+
+        return (current.value / props.duration) * 100;
+    }
+</script>
+
+<template>
+    <button
+        :class="{ 'loading-button': loading }"
+        @mousedown="mousedown"
+        @mouseup="mouseup">
+        <span v-show="!loading">
+            <slot name="default"></slot>
+        </span>
+
+        <v-progress-circular
+            v-if="loading"
+            :size="props.progressSize"
+            :model-value="progress()"></v-progress-circular>
+    </button>
+</template>
+
+<style scoped>
+    .loading-button {
+        display: inline-flex;
+        flex-direction: column;
+        align-items: center;
+    }
+</style>
+
+<style>
+    .v-progress-circular__underlay {
+        stroke: #ebebeb !important;
+        z-index: 1;
+    }
+</style>
diff --git a/WebDisplay/src/environment.ts b/WebDisplay/src/environment.ts
index 968da2d..eee8904 100644
--- a/WebDisplay/src/environment.ts
+++ b/WebDisplay/src/environment.ts
@@ -18,8 +18,4 @@ 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 338336f..6543bda 100644
--- a/WebDisplay/src/pages/kiosk.vue
+++ b/WebDisplay/src/pages/kiosk.vue
@@ -5,6 +5,7 @@
     import { usePowerStore } from '@/stores/powerStore';
     import { useHomeAssistantStore } from '@/stores/homeAssistantStore';
     import CalendarAgenda from '@/components/CalendarAgenda.vue';
+    import LongPressButton from '@/components/LongPressButton.vue';
 
     const weatherStore = useWeatherStore();
     weatherStore.start();
@@ -104,10 +105,13 @@
                     {{ laundryStore.current.dryer ? 'On' : 'Off' }}
                 </div>
             </div>
-            <div
+            <LongPressButton
                 class="kiosk-garage-door text-center pt-4"
                 v-if="homeAssistantStore?.garageState"
-                v-on:click="homeAssistantStore.toggleGarage()"
+                :duration="2000"
+                :increment="100"
+                :progress-size="38"
+                v-on:longPress="homeAssistantStore.toggleGarage()"
                 :class="homeAssistantStore.garageState === 'closed' ? 'normal' : 'warning'">
                 <v-icon
                     class="kiosk-device-icon"
@@ -115,7 +119,7 @@
                 <div class="kiosk-device-text">
                     {{ capitalize(homeAssistantStore.garageState) }}
                 </div>
-            </div>
+            </LongPressButton>
             <div
                 class="kiosk-house-alarm text-center pt-4"
                 v-if="homeAssistantStore?.houseAlarmState"