commit 82

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>

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 route = useRoute("/for/followspot-operator/[side]")
-  const isLeft = computed(() => route.query.side === "left")
+  const isLeft = computed(() => route.params.side === "left")
   const targetProperty = computed<"leftSpotTarget" | "rightSpotTarget">(() => isLeft.value ? "leftSpotTarget" : "rightSpotTarget")
   const currentTarget = computed(() => current.step[targetProperty.value])
 

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>

ui/src/pages/index.vue

@@ -1,16 +1,5 @@
 <template>
-  <div class="flex flex-col items-center gap-4 text-2xl pt-20">
+  <LinkButtonList :items="DASHBOARDS"/>
-    <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>
 </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 {
+  const DASHBOARDS: LinkButtonListItem[] = [
-    to: string
-    label: string
-    icon: Component
-    allowMobile: boolean
-  }
-
-  const DASHBOARDS: Dashboard[] = [
     {
       to: "/for/fly-crew",
       label: "Fly crew",