From 890abb560030c41d447c892e2c3b9df6cb6dfd99 Mon Sep 17 00:00:00 2001
From: Moritz Ruth <dev@moritzruth.de>
Date: Fri, 14 Mar 2025 20:59:48 +0100
Subject: [PATCH] commit 82

---
 ui/src/components/LinkButtonList.vue          | 35 +++++++++++++++++++
 .../[side].vue}                               |  8 ++---
 .../pages/for/followspot-operator/index.vue   | 28 +++++++++++++++
 ui/src/pages/index.vue                        | 24 ++-----------
 4 files changed, 70 insertions(+), 25 deletions(-)
 create mode 100644 ui/src/components/LinkButtonList.vue
 rename ui/src/pages/for/{followspot-operator.vue => followspot-operator/[side].vue} (90%)
 create mode 100644 ui/src/pages/for/followspot-operator/index.vue

diff --git a/ui/src/components/LinkButtonList.vue b/ui/src/components/LinkButtonList.vue
new file mode 100644
index 0000000..b255bf8
--- /dev/null
+++ b/ui/src/components/LinkButtonList.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="flex flex-col items-center gap-4 text-2xl pt-20">
+    <router-link
+        v-for="item in items"
+        :key="item.to"
+        class="flex items-center gap-2 rounded-xl bg-gray-900 p-5 hover:bg-gray-800 transition"
+        :class="!item.allowMobile && '<md:hidden'"
+        :to="item.to"
+    >
+      <component :is="item.icon"/>
+      <div class="font-bold">{{ item.label }}</div>
+    </router-link>
+  </div>
+</template>
+
+<style module>
+
+</style>
+
+<script lang="ts">
+  import type { Component } from "vue"
+
+  export interface LinkButtonListItem {
+    to: string
+    label: string
+    icon: Component
+    allowMobile: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  const props = defineProps<{
+    items: LinkButtonListItem[]
+  }>()
+</script>
\ No newline at end of file
diff --git a/ui/src/pages/for/followspot-operator.vue b/ui/src/pages/for/followspot-operator/[side].vue
similarity index 90%
rename from ui/src/pages/for/followspot-operator.vue
rename to ui/src/pages/for/followspot-operator/[side].vue
index 186809a..1b675d1 100644
--- a/ui/src/pages/for/followspot-operator.vue
+++ b/ui/src/pages/for/followspot-operator/[side].vue
@@ -37,14 +37,14 @@
 </style>
 
 <script lang="ts" setup>
-  import { useRoute } from "vue-router"
+  import { useRoute } from "vue-router/auto"
   import { computed } from "vue"
   import { current, getNextValidPosition, getSceneIndex, getStep, ShowPosition } from "@/state"
-  import ChangeBlinkingBox from "../../components/ChangeBlinkingBox.vue"
+  import ChangeBlinkingBox from "../../../components/ChangeBlinkingBox.vue"
   import MessageDisplay from "@/components/MessageDisplay.vue"
 
-  const route = useRoute()
-  const isLeft = computed(() => route.query.side === "left")
+  const route = useRoute("/for/followspot-operator/[side]")
+  const isLeft = computed(() => route.params.side === "left")
   const targetProperty = computed<"leftSpotTarget" | "rightSpotTarget">(() => isLeft.value ? "leftSpotTarget" : "rightSpotTarget")
   const currentTarget = computed(() => current.step[targetProperty.value])
 
diff --git a/ui/src/pages/for/followspot-operator/index.vue b/ui/src/pages/for/followspot-operator/index.vue
new file mode 100644
index 0000000..fb0ccda
--- /dev/null
+++ b/ui/src/pages/for/followspot-operator/index.vue
@@ -0,0 +1,28 @@
+<template>
+  <LinkButtonList :items="SIDES"/>
+</template>
+
+<style module>
+
+</style>
+
+<script setup lang="ts">
+  import LinkButtonList, { LinkButtonListItem } from "@/components/LinkButtonList.vue"
+  import LeftIcon from "virtual:icons/ph/arrow-square-left"
+  import RightIcon from "virtual:icons/ph/arrow-square-right"
+
+  const SIDES: LinkButtonListItem[] = [
+    {
+      to: "/for/followspot-operator/left",
+      label: "Left-hand side",
+      icon: LeftIcon,
+      allowMobile: true
+    },
+    {
+      to: "/for/followspot-operator/right",
+      label: "Right-hand side",
+      icon: RightIcon,
+      allowMobile: true
+    }
+  ]
+</script>
\ No newline at end of file
diff --git a/ui/src/pages/index.vue b/ui/src/pages/index.vue
index 389661d..59b9f22 100644
--- a/ui/src/pages/index.vue
+++ b/ui/src/pages/index.vue
@@ -1,16 +1,5 @@
 <template>
-  <div class="flex flex-col items-center gap-4 text-2xl pt-20">
-    <router-link
-        v-for="dashboard in DASHBOARDS"
-        :key="dashboard.to"
-        class="flex items-center gap-2 rounded-xl bg-gray-900 p-5 hover:bg-gray-800 transition"
-        :class="!dashboard.allowMobile && '<md:hidden'"
-        :to="dashboard.to"
-    >
-      <component :is="dashboard.icon"/>
-      <div class="font-bold">{{ dashboard.label }}</div>
-    </router-link>
-  </div>
+  <LinkButtonList :items="DASHBOARDS"/>
 </template>
 
 <style module>
@@ -18,20 +7,13 @@
 </style>
 
 <script lang="ts" setup>
-  import { type Component } from "vue"
   import FlyingSaucerIcon from "virtual:icons/ph/flying-saucer"
   import CircleWavyIcon from "virtual:icons/ph/circle-wavy"
   import FadersIcon from "virtual:icons/ph/faders"
   import StorefrontIcon from "virtual:icons/ph/storefront"
+  import LinkButtonList, { LinkButtonListItem } from "@/components/LinkButtonList.vue"
 
-  interface Dashboard {
-    to: string
-    label: string
-    icon: Component
-    allowMobile: boolean
-  }
-
-  const DASHBOARDS: Dashboard[] = [
+  const DASHBOARDS: LinkButtonListItem[] = [
     {
       to: "/for/fly-crew",
       label: "Fly crew",