From 982ceb87fa9014796b1b11a80c57ebc55da4badf Mon Sep 17 00:00:00 2001
From: Gijsdeman <github@deman.dev>
Date: Sun, 3 Nov 2024 20:07:36 +0100
Subject: [PATCH] feat(prettier): use shared GEWIS config

---
 .prettierrc.json                              |  8 ---
 .prettierrc.mjs                               |  8 +++
 src/assets/preset.ts                          |  6 +-
 src/components/audio/ArtificialBeatDialog.vue | 10 +--
 src/components/audit/AuditBlock.vue           |  7 +-
 src/components/auth/DevSettings.vue           |  2 +-
 src/components/handlers/AudioHandlerBlock.vue | 10 +--
 src/components/handlers/LightHandlerBlock.vue |  2 +-
 .../LightsControllerItemComponent.vue         | 18 ++---
 .../handlers/ScreenHandlerBlock.vue           |  8 +--
 .../handlers/SubscriberItemContent.vue        |  2 +-
 .../lights/effects/EffectHistoryCard.vue      |  7 +-
 .../effects/LightsGroupToggleButton.vue       |  4 +-
 src/components/lights/effects/SavedEffect.vue | 12 +---
 .../effects/color/EffectBeatFadeOut.vue       | 17 ++---
 .../effects/color/EffectSingleFlood.vue       |  4 +-
 .../lights/effects/color/EffectSparkle.vue    |  4 +-
 .../effects/color/EffectStaticColor.vue       | 24 ++-----
 .../lights/effects/color/EffectWave.vue       |  4 +-
 .../effects/movement/EffectClassicRotate.vue  |  4 +-
 .../effects/movement/EffectRandomPosition.vue |  4 +-
 .../effects/movement/EffectSearchLight.vue    |  4 +-
 .../effects/movement/EffectTableRotate.vue    |  4 +-
 .../effects/props/SelectorRatioSlider.vue     |  9 +--
 src/components/lights/fixtures/FixtureType.ts |  2 +-
 .../lights/scenes/SceneDeleteButton.vue       |  2 +-
 src/components/modes/SubscribersDetails.vue   | 10 +--
 .../modes/centurion/InitializeCenturion.vue   | 10 ++-
 .../modes/centurion/TapeDetails.vue           |  8 +--
 .../modes/centurion/TapeTimeline.vue          |  4 +-
 .../modes/time-trail-race/PlayerRegister.vue  |  4 +-
 .../modes/time-trail-race/PlayerScore.vue     |  4 +-
 .../modes/time-trail-race/PlayerTimer.vue     |  4 +-
 .../TimeTrailRaceInitialize.vue               |  8 +--
 .../time-trail-race/TimeTrailRaceStepper.vue  | 12 ++--
 src/components/poster/PosterCard.vue          | 12 +---
 src/components/prime/ConfirmWrapper.vue       |  4 +-
 src/components/prime/StepperWrapper.vue       |  4 +-
 src/components/shortcuts/ShortcutBlock.vue    | 38 +++++------
 src/layout/AppContainer.vue                   | 10 ++-
 src/layout/AppLayout.vue                      |  5 +-
 src/layout/AppMenu.vue                        | 20 +++---
 src/layout/AppMenuItem.vue                    | 11 ++--
 src/layout/AppTopbar.vue                      |  4 +-
 src/main.ts                                   | 12 ++--
 src/router/index.ts                           | 66 +++++++++----------
 src/stores/audit.store.ts                     | 14 ++--
 src/stores/auth.store.ts                      | 14 ++--
 src/stores/color.store.ts                     |  6 +-
 src/stores/effects-controller.store.ts        | 32 ++++-----
 src/stores/handlers.store.ts                  | 44 ++++++-------
 src/stores/layout.store.ts                    | 10 +--
 src/stores/modes/centurion.store.ts           | 30 ++++-----
 src/stores/modes/time-trail-race.store.ts     | 48 +++++---------
 src/stores/poster-store.ts                    | 14 ++--
 src/stores/scene-controller.store.ts          | 16 ++---
 src/stores/socket.store.ts                    |  8 ++-
 src/stores/socket/currently-playing.store.ts  |  6 +-
 src/stores/socket/music-beat.store.ts         |  6 +-
 src/stores/subscriber.store.ts                |  8 +--
 src/utils/fetchInterceptor.ts                 |  2 +-
 src/utils/toastHandler.ts                     |  4 +-
 src/utils/validation-schema.ts                |  4 +-
 src/views/Base/AuthView.vue                   | 10 +--
 src/views/Lights/EffectsController.vue        |  7 +-
 src/views/Lights/FixtureOverview.vue          | 31 ++++-----
 src/views/Modes/TimeTrailRaceModeView.vue     |  8 +--
 src/views/Poster/PosterList.vue               |  5 +-
 68 files changed, 305 insertions(+), 458 deletions(-)
 delete mode 100644 .prettierrc.json
 create mode 100644 .prettierrc.mjs

diff --git a/.prettierrc.json b/.prettierrc.json
deleted file mode 100644
index e56064e..0000000
--- a/.prettierrc.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/prettierrc",
-  "semi": true,
-  "tabWidth": 2,
-  "singleQuote": true,
-  "printWidth": 100,
-  "trailingComma": "none"
-}
diff --git a/.prettierrc.mjs b/.prettierrc.mjs
new file mode 100644
index 0000000..9295365
--- /dev/null
+++ b/.prettierrc.mjs
@@ -0,0 +1,8 @@
+import prettier from '@gewis/eslint-config/prettier.mjs';
+
+/**
+ * @type {import("prettier").Config}
+ */
+export default {
+  ...prettier,
+};
diff --git a/src/assets/preset.ts b/src/assets/preset.ts
index cb2665d..0e7abba 100644
--- a/src/assets/preset.ts
+++ b/src/assets/preset.ts
@@ -14,7 +14,7 @@ export const AuraPreset = definePreset(Aura, {
       700: '{rose.700}',
       800: '{rose.800}',
       900: '{rose.900}',
-      950: '{rose.950}'
-    }
-  }
+      950: '{rose.950}',
+    },
+  },
 });
diff --git a/src/components/audio/ArtificialBeatDialog.vue b/src/components/audio/ArtificialBeatDialog.vue
index 7706a44..029bf79 100644
--- a/src/components/audio/ArtificialBeatDialog.vue
+++ b/src/components/audio/ArtificialBeatDialog.vue
@@ -16,9 +16,7 @@
         <Spinner />
       </div>
       <div class="flex flex-column gap-1">
-        <div
-          class="h-8rem border-1 flex flex-column flex-wrap justify-content-center align-items-center"
-        >
+        <div class="h-8rem border-1 flex flex-column flex-wrap justify-content-center align-items-center">
           <p v-if="getBpm() != null">{{ getBpm() }} BPM</p>
           <p v-else>Tap to set BPM</p>
           <span>
@@ -50,11 +48,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { splitArrayIntoChunks } from '@/utils/arrayUtils';
-import {
-  getArtificalBeatGenerator,
-  startArtificialBeatGenerator,
-  stopArtificialBeatGenerator
-} from '@/api';
+import { getArtificalBeatGenerator, startArtificialBeatGenerator, stopArtificialBeatGenerator } from '@/api';
 
 const visible = ref<boolean>(false);
 const taps = ref<Date[]>([]);
diff --git a/src/components/audit/AuditBlock.vue b/src/components/audit/AuditBlock.vue
index 2910d6a..d12ebdc 100644
--- a/src/components/audit/AuditBlock.vue
+++ b/src/components/audit/AuditBlock.vue
@@ -1,12 +1,7 @@
 <template>
   <AppContainer icon="pi-book" title="Logs">
     <div v-if="store.dashboardEntries.length > 0">
-      <DataTable
-        class="mb-3"
-        data-key="id"
-        :loading="store.loading"
-        :value="store.dashboardEntries"
-      >
+      <DataTable class="mb-3" data-key="id" :loading="store.loading" :value="store.dashboardEntries">
         <Column field="createdAt" header="Timestamp">
           <template #body="slotProps">
             {{ new Date(slotProps.data.createdAt).toLocaleString() }}
diff --git a/src/components/auth/DevSettings.vue b/src/components/auth/DevSettings.vue
index e8569e7..820e1a4 100644
--- a/src/components/auth/DevSettings.vue
+++ b/src/components/auth/DevSettings.vue
@@ -27,7 +27,7 @@ function updateLogin() {
   authStore.MockLogin({
     id: userId.value,
     name: userName.value,
-    roles: selectedRoles.value
+    roles: selectedRoles.value,
   });
 }
 </script>
diff --git a/src/components/handlers/AudioHandlerBlock.vue b/src/components/handlers/AudioHandlerBlock.vue
index abb65be..db81926 100644
--- a/src/components/handlers/AudioHandlerBlock.vue
+++ b/src/components/handlers/AudioHandlerBlock.vue
@@ -6,18 +6,12 @@
     >
       <div v-for="audio in subscriberStore.audios.value" :key="audio.id">
         <SubscriberItemContent
-          :current-handler="
-            handlersStore.fetchAudioHandlers.find(
-              (h) => !!h.entities.find((e) => e.id === audio.id)
-            )
-          "
+          :current-handler="handlersStore.fetchAudioHandlers.find((h) => !!h.entities.find((e) => e.id === audio.id))"
           :disabled="!authStore.isInSecurityGroup('handler', 'privileged')"
           :loading="handlersStore.isGettingAudio || handlersStore.isSettingAudio"
           :possible-handlers="handlersStore.audioHandlers"
           :subscriber="audio"
-          @change="
-            (newHandler: string | null) => handlersStore.setAudioHandler(audio.id, newHandler)
-          "
+          @change="(newHandler: string | null) => handlersStore.setAudioHandler(audio.id, newHandler)"
         />
       </div>
     </div>
diff --git a/src/components/handlers/LightHandlerBlock.vue b/src/components/handlers/LightHandlerBlock.vue
index a853da3..ce84d02 100644
--- a/src/components/handlers/LightHandlerBlock.vue
+++ b/src/components/handlers/LightHandlerBlock.vue
@@ -22,6 +22,6 @@ const subscriberStore = storeToRefs(useSubscriberStore());
 const controllers = computed(() =>
   subscriberStore.lightsGroups.value
     .map((g) => g.controller)
-    .filter((c1, index, all) => index === all.findIndex((c2) => c1.id === c2.id))
+    .filter((c1, index, all) => index === all.findIndex((c2) => c1.id === c2.id)),
 );
 </script>
diff --git a/src/components/handlers/LightsControllerItemComponent.vue b/src/components/handlers/LightsControllerItemComponent.vue
index 4e9462c..c248459 100644
--- a/src/components/handlers/LightsControllerItemComponent.vue
+++ b/src/components/handlers/LightsControllerItemComponent.vue
@@ -4,9 +4,7 @@
       {{ controller.name }}
       <i :class="['pi text-sm ml-2', connectedIcon]" :title="connectedText" />
     </h6>
-    <div
-      class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-2 xxl:grid-cols-3 gap-5"
-    >
+    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-2 xxl:grid-cols-3 gap-5">
       <div v-for="group in lightsGroups" :key="group.id">
         <div class="mb-2">
           <h6 class="mb-0">
@@ -14,15 +12,11 @@
           </h6>
         </div>
         <SubscriberHandlerChangeSelect
-          :current-handler="
-            handlersStore.lightsHandlers.find((h) => !!h.entities.find((e) => e.id === group.id))
-          "
+          :current-handler="handlersStore.lightsHandlers.find((h) => !!h.entities.find((e) => e.id === group.id))"
           :disabled="!authStore.isInSecurityGroup('handler', 'privileged')"
           :loading="handlersStore.gettingLights || handlersStore.settingLights"
           :possible-handlers="handlersStore.lightsHandlers"
-          @change="
-            (newHandler: string | null) => handlersStore.setLightsHandler(group.id, newHandler)
-          "
+          @change="(newHandler: string | null) => handlersStore.setLightsHandler(group.id, newHandler)"
         />
       </div>
     </div>
@@ -44,9 +38,7 @@ const props = defineProps<{
 }>();
 
 const subscriberStore = storeToRefs(useSubscriberStore());
-const lightsGroups = subscriberStore.lightsGroups.value.filter(
-  (g) => g.controller.id === props.controller.id
-);
+const lightsGroups = subscriberStore.lightsGroups.value.filter((g) => g.controller.id === props.controller.id);
 const handlersStore = useHandlersStore();
 const authStore = useAuthStore();
 
@@ -64,7 +56,7 @@ const connectedIcon = computed(() => {
     'pi-sort-alt': connected.value,
     'text-green-300': connected.value,
     'pi-sort-alt-slash': !connected.value,
-    'text-400': !connected.value
+    'text-400': !connected.value,
   };
 });
 </script>
diff --git a/src/components/handlers/ScreenHandlerBlock.vue b/src/components/handlers/ScreenHandlerBlock.vue
index ed1d68e..dc05396 100644
--- a/src/components/handlers/ScreenHandlerBlock.vue
+++ b/src/components/handlers/ScreenHandlerBlock.vue
@@ -6,16 +6,12 @@
     >
       <div v-for="screen in subscriberStore.screens.value" :key="screen.id">
         <SubscriberItemContent
-          :current-handler="
-            handlersStore.screenHandlers.find((h) => !!h.entities.find((e) => e.id === screen.id))
-          "
+          :current-handler="handlersStore.screenHandlers.find((h) => !!h.entities.find((e) => e.id === screen.id))"
           :disabled="!authStore.isInSecurityGroup('handler', 'privileged')"
           :loading="handlersStore.gettingScreens || handlersStore.settingScreens"
           :possible-handlers="handlersStore.screenHandlers"
           :subscriber="screen"
-          @change="
-            (newHandler: string | null) => handlersStore.setScreenHandler(screen.id, newHandler)
-          "
+          @change="(newHandler: string | null) => handlersStore.setScreenHandler(screen.id, newHandler)"
         />
       </div>
     </div>
diff --git a/src/components/handlers/SubscriberItemContent.vue b/src/components/handlers/SubscriberItemContent.vue
index bfe56d7..37588d8 100644
--- a/src/components/handlers/SubscriberItemContent.vue
+++ b/src/components/handlers/SubscriberItemContent.vue
@@ -52,7 +52,7 @@ const connectedIcon = computed(() => {
     'pi-sort-alt': connected.value,
     'text-green-300': connected.value,
     'pi-sort-alt-slash': !connected.value,
-    'text-400': !connected.value
+    'text-400': !connected.value,
   };
 });
 </script>
diff --git a/src/components/lights/effects/EffectHistoryCard.vue b/src/components/lights/effects/EffectHistoryCard.vue
index 698a69a..93010d2 100644
--- a/src/components/lights/effects/EffectHistoryCard.vue
+++ b/src/components/lights/effects/EffectHistoryCard.vue
@@ -23,7 +23,7 @@ const props = defineProps<{
 
 const store = useHandlersStore();
 const lightGroups = props.effect.lightGroupIds.map((id: number) =>
-  store.getRegisteredLights().find((g) => g.id === id)
+  store.getRegisteredLights().find((g) => g.id === id),
 );
 const effectsControllerStore = useEffectsControllerStore();
 
@@ -32,10 +32,7 @@ const setEffect = () => {
     effectsControllerStore.setColorEffect(props.effect.colorEffect, props.effect.lightGroupIds);
   }
   if (props.effect.movementEffect !== undefined) {
-    effectsControllerStore.setMovementEffect(
-      props.effect.movementEffect,
-      props.effect.lightGroupIds
-    );
+    effectsControllerStore.setMovementEffect(props.effect.movementEffect, props.effect.lightGroupIds);
   }
 };
 </script>
diff --git a/src/components/lights/effects/LightsGroupToggleButton.vue b/src/components/lights/effects/LightsGroupToggleButton.vue
index 3baaf4a..0922978 100644
--- a/src/components/lights/effects/LightsGroupToggleButton.vue
+++ b/src/components/lights/effects/LightsGroupToggleButton.vue
@@ -5,9 +5,7 @@
       <div>
         <ul>
           <li>Pars: {{ lightsGroup.pars.length }}</li>
-          <li>
-            MH's: {{ lightsGroup.movingHeadRgbs.length + lightsGroup.movingHeadWheels.length }}
-          </li>
+          <li>MH's: {{ lightsGroup.movingHeadRgbs.length + lightsGroup.movingHeadWheels.length }}</li>
         </ul>
       </div>
     </div>
diff --git a/src/components/lights/effects/SavedEffect.vue b/src/components/lights/effects/SavedEffect.vue
index 1315d4b..7c43614 100644
--- a/src/components/lights/effects/SavedEffect.vue
+++ b/src/components/lights/effects/SavedEffect.vue
@@ -5,11 +5,7 @@
         <div>
           {{ effect.type }}
         </div>
-        <ColorBox
-          v-for="color in colors"
-          :key="color"
-          :color="colorStore.getHexColor(color as RgbColor)"
-        />
+        <ColorBox v-for="color in colors" :key="color" :color="colorStore.getHexColor(color as RgbColor)" />
       </div>
     </template>
   </Chip>
@@ -18,11 +14,7 @@
 <script setup lang="ts">
 import ColorBox from '@/components/lights/effects/ColorBox.vue';
 import { useColorStore } from '@/stores/color.store';
-import {
-  type LightsEffectsColorCreateParams,
-  type LightsEffectsMovementCreateParams,
-  RgbColor
-} from '@/api';
+import { type LightsEffectsColorCreateParams, type LightsEffectsMovementCreateParams, RgbColor } from '@/api';
 
 const colorStore = useColorStore();
 
diff --git a/src/components/lights/effects/color/EffectBeatFadeOut.vue b/src/components/lights/effects/color/EffectBeatFadeOut.vue
index 92c4227..6fbedbf 100644
--- a/src/components/lights/effects/color/EffectBeatFadeOut.vue
+++ b/src/components/lights/effects/color/EffectBeatFadeOut.vue
@@ -18,18 +18,14 @@ const handleAddEffect = () => {
     props: {
       colors: colors.value,
       enableFade: enableFade.value,
-      nrBlacks: addBlacks.value ? 1 : 0
-    }
+      nrBlacks: addBlacks.value ? 1 : 0,
+    },
   });
 };
 </script>
 
 <template>
-  <EffectSettingsDialog
-    :can-save="colors.length > 0"
-    effect-name="BeatFadeOut"
-    @save="handleAddEffect"
-  >
+  <EffectSettingsDialog :can-save="colors.length > 0" effect-name="BeatFadeOut" @save="handleAddEffect">
     <SelectorLightsColor @colors-updated="(c: RgbColor[]) => (colors = c)" />
     <SelectorBoolean
       id="enableFade"
@@ -37,12 +33,7 @@ const handleAddEffect = () => {
       name="Enable fade"
       @click="() => (enableFade = !enableFade)"
     />
-    <SelectorBoolean
-      id="addBlacks"
-      :checked="addBlacks"
-      name="Add blacks"
-      @click="() => (addBlacks = !addBlacks)"
-    />
+    <SelectorBoolean id="addBlacks" :checked="addBlacks" name="Add blacks" @click="() => (addBlacks = !addBlacks)" />
   </EffectSettingsDialog>
 </template>
 
diff --git a/src/components/lights/effects/color/EffectSingleFlood.vue b/src/components/lights/effects/color/EffectSingleFlood.vue
index 75c2be0..6b72430 100644
--- a/src/components/lights/effects/color/EffectSingleFlood.vue
+++ b/src/components/lights/effects/color/EffectSingleFlood.vue
@@ -27,8 +27,8 @@ const handleAddEffect = () => {
   store.setColorEffect({
     type: ColorEffects_SingleFlood.SINGLE_FLOOD,
     props: {
-      dimMilliseconds: dimMilliseconds.value
-    }
+      dimMilliseconds: dimMilliseconds.value,
+    },
   });
 };
 </script>
diff --git a/src/components/lights/effects/color/EffectSparkle.vue b/src/components/lights/effects/color/EffectSparkle.vue
index 5f457ed..f04bd70 100644
--- a/src/components/lights/effects/color/EffectSparkle.vue
+++ b/src/components/lights/effects/color/EffectSparkle.vue
@@ -53,8 +53,8 @@ const handleAddEffect = () => {
       colors: colors.value,
       ratio: ratio.value,
       dimDuration: dimDuration.value,
-      cycleTime: cycleTime.value
-    }
+      cycleTime: cycleTime.value,
+    },
   });
 };
 </script>
diff --git a/src/components/lights/effects/color/EffectStaticColor.vue b/src/components/lights/effects/color/EffectStaticColor.vue
index 8a2f5f0..ee63250 100644
--- a/src/components/lights/effects/color/EffectStaticColor.vue
+++ b/src/components/lights/effects/color/EffectStaticColor.vue
@@ -1,23 +1,9 @@
 <template>
-  <EffectSettingsDialog
-    :can-save="colors.length === 1"
-    effect-name="StaticColor"
-    @save="handleAddEffect"
-  >
+  <EffectSettingsDialog :can-save="colors.length === 1" effect-name="StaticColor" @save="handleAddEffect">
     <SelectorLightsColor single-color @colors-updated="(c) => (colors = c)" />
     <Select v-model="gobo" :options="gobos" placeholder="Select a gobo" show-clear />
-    <Select
-      v-model="goboRotate"
-      :options="goboRotates"
-      placeholder="Select a gobo rotate effect"
-      show-clear
-    />
-    <SelectorBoolean
-      id="beat-toggle"
-      :checked="beatToggle"
-      name="Beat Toggle"
-      @click="beatToggle = !beatToggle"
-    />
+    <Select v-model="goboRotate" :options="goboRotates" placeholder="Select a gobo rotate effect" show-clear />
+    <SelectorBoolean id="beat-toggle" :checked="beatToggle" name="Beat Toggle" @click="beatToggle = !beatToggle" />
     <SelectorRatioSlider
       id="relative-brightness"
       :max="1"
@@ -71,8 +57,8 @@ const handleAddEffect = () => {
       gobo: gobo.value ? gobo.value : undefined,
       goboRotate: goboRotate.value ? goboRotate.value : undefined,
       beatToggle: beatToggle.value,
-      relativeBrightness: relativeBrightness.value
-    }
+      relativeBrightness: relativeBrightness.value,
+    },
   });
 };
 </script>
diff --git a/src/components/lights/effects/color/EffectWave.vue b/src/components/lights/effects/color/EffectWave.vue
index d4ba0c4..1d62387 100644
--- a/src/components/lights/effects/color/EffectWave.vue
+++ b/src/components/lights/effects/color/EffectWave.vue
@@ -42,8 +42,8 @@ const handleAddEffect = () => {
     props: {
       color: colors.value[0],
       nrWaves: nrWaves.value,
-      cycleTime: cycleTime.value
-    }
+      cycleTime: cycleTime.value,
+    },
   });
 };
 </script>
diff --git a/src/components/lights/effects/movement/EffectClassicRotate.vue b/src/components/lights/effects/movement/EffectClassicRotate.vue
index 2e6a199..70752cd 100644
--- a/src/components/lights/effects/movement/EffectClassicRotate.vue
+++ b/src/components/lights/effects/movement/EffectClassicRotate.vue
@@ -38,8 +38,8 @@ const handleAddEffect = () => {
     type: MovementEffects_ClassicRotate.CLASSIC_ROTATE,
     props: {
       cycleTime: cycleTime.value,
-      offsetFactor: offsetFactor.value
-    }
+      offsetFactor: offsetFactor.value,
+    },
   });
 };
 </script>
diff --git a/src/components/lights/effects/movement/EffectRandomPosition.vue b/src/components/lights/effects/movement/EffectRandomPosition.vue
index 5d92bf7..86cebd5 100644
--- a/src/components/lights/effects/movement/EffectRandomPosition.vue
+++ b/src/components/lights/effects/movement/EffectRandomPosition.vue
@@ -27,8 +27,8 @@ const handleAddEffect = () => {
   store.setMovementEffect({
     type: MovementEffects_RandomPosition.RANDOM_POSITION,
     props: {
-      beatsToMove: beatsToMove.value
-    }
+      beatsToMove: beatsToMove.value,
+    },
   });
 };
 </script>
diff --git a/src/components/lights/effects/movement/EffectSearchLight.vue b/src/components/lights/effects/movement/EffectSearchLight.vue
index a4e8b10..0103f70 100644
--- a/src/components/lights/effects/movement/EffectSearchLight.vue
+++ b/src/components/lights/effects/movement/EffectSearchLight.vue
@@ -49,8 +49,8 @@ const handleAddEffect = () => {
     props: {
       cycleTime: cycleTime.value,
       offsetFactor: offsetFactor.value,
-      radiusFactor: radiusFactor.value
-    }
+      radiusFactor: radiusFactor.value,
+    },
   });
 };
 </script>
diff --git a/src/components/lights/effects/movement/EffectTableRotate.vue b/src/components/lights/effects/movement/EffectTableRotate.vue
index 5031444..34747e3 100644
--- a/src/components/lights/effects/movement/EffectTableRotate.vue
+++ b/src/components/lights/effects/movement/EffectTableRotate.vue
@@ -38,8 +38,8 @@ const handleAddEffect = () => {
     type: MovementEffects_TableRotate.TABLE_ROTATE,
     props: {
       cycleTime: cycleTime.value,
-      offsetFactor: offsetFactor.value
-    }
+      offsetFactor: offsetFactor.value,
+    },
   });
 };
 </script>
diff --git a/src/components/lights/effects/props/SelectorRatioSlider.vue b/src/components/lights/effects/props/SelectorRatioSlider.vue
index 37bd341..c4287dd 100644
--- a/src/components/lights/effects/props/SelectorRatioSlider.vue
+++ b/src/components/lights/effects/props/SelectorRatioSlider.vue
@@ -11,14 +11,7 @@
           :model-value="value"
           @blur="(event) => handleNumberInputChange(event.value)"
         />
-        <Slider
-          class="w-full"
-          :max="max"
-          :min="min"
-          :model-value="value"
-          :step="step"
-          @change="onChange"
-        />
+        <Slider class="w-full" :max="max" :min="min" :model-value="value" :step="step" @change="onChange" />
       </div>
     </div>
   </div>
diff --git a/src/components/lights/fixtures/FixtureType.ts b/src/components/lights/fixtures/FixtureType.ts
index a4543a3..1f8a187 100644
--- a/src/components/lights/fixtures/FixtureType.ts
+++ b/src/components/lights/fixtures/FixtureType.ts
@@ -1,5 +1,5 @@
 export enum FixtureType {
   PAR,
   MOVING_HEAD_RGB,
-  MOVING_HEAD_WHEEL
+  MOVING_HEAD_WHEEL,
 }
diff --git a/src/components/lights/scenes/SceneDeleteButton.vue b/src/components/lights/scenes/SceneDeleteButton.vue
index a967ddd..ffb38b1 100644
--- a/src/components/lights/scenes/SceneDeleteButton.vue
+++ b/src/components/lights/scenes/SceneDeleteButton.vue
@@ -24,7 +24,7 @@ const openDialog = () => {
     acceptLabel: 'Yes',
     accept() {
       store.deleteScene(props.id);
-    }
+    },
   });
 };
 </script>
diff --git a/src/components/modes/SubscribersDetails.vue b/src/components/modes/SubscribersDetails.vue
index cf8e8a3..ba9f43f 100644
--- a/src/components/modes/SubscribersDetails.vue
+++ b/src/components/modes/SubscribersDetails.vue
@@ -27,14 +27,10 @@ const props = defineProps<{
   selectedLightGroups: number[];
 }>();
 
-const audios = computed(() =>
-  subscriberStore.audios.filter((a) => props.selectedAudios.includes(a.id))
-);
-const screens = computed(() =>
-  subscriberStore.screens.filter((a) => props.selectedScreens.includes(a.id))
-);
+const audios = computed(() => subscriberStore.audios.filter((a) => props.selectedAudios.includes(a.id)));
+const screens = computed(() => subscriberStore.screens.filter((a) => props.selectedScreens.includes(a.id)));
 const lightGroups = computed(() =>
-  subscriberStore.lightsGroups.filter((a) => props.selectedLightGroups.includes(a.id))
+  subscriberStore.lightsGroups.filter((a) => props.selectedLightGroups.includes(a.id)),
 );
 
 function formatArray(array: string[]): string {
diff --git a/src/components/modes/centurion/InitializeCenturion.vue b/src/components/modes/centurion/InitializeCenturion.vue
index a04f2f8..9a98938 100644
--- a/src/components/modes/centurion/InitializeCenturion.vue
+++ b/src/components/modes/centurion/InitializeCenturion.vue
@@ -40,9 +40,7 @@
     <template #3>
       <div class="flex flex-col gap-2 mt-3 sm:mt-0">
         <div class="max-w-lg mx-auto">
-          <div class="sm:text-lg text-center mb-3 font-semibold">
-            Confirm centurion initialization
-          </div>
+          <div class="sm:text-lg text-center mb-3 font-semibold">Confirm centurion initialization</div>
           <TapeDetails v-if="selectedTape" :tape="selectedTape" />
           <SubscriberDetails
             class="mt-3"
@@ -97,7 +95,7 @@ const availableTapes = computed<GroupedTape[] | undefined>(() => {
       accumulated[tape.artist] = {
         label: tape.artist,
         code: tape.artist,
-        items: []
+        items: [],
       };
     }
     accumulated[tape.artist].items.push(tape);
@@ -113,7 +111,7 @@ const availableTapes = computed<GroupedTape[] | undefined>(() => {
 const initializationSteps = computed<StepperStep[]>(() => [
   { value: 'Mixtape', nextDisabled: selectedTape.value === undefined },
   { value: 'Subscribers', nextDisabled: selectedAudios.value.length === 0 },
-  { value: 'Confirmation', confirmFunction: initialize }
+  { value: 'Confirmation', confirmFunction: initialize },
 ]);
 
 // Initialize the centurion
@@ -123,7 +121,7 @@ const initialize = async () => {
     selectedTape.value!.artist,
     selectedAudios.value,
     selectedScreens.value,
-    selectedLightGroups.value
+    selectedLightGroups.value,
   );
 };
 </script>
diff --git a/src/components/modes/centurion/TapeDetails.vue b/src/components/modes/centurion/TapeDetails.vue
index 5dec544..a890431 100644
--- a/src/components/modes/centurion/TapeDetails.vue
+++ b/src/components/modes/centurion/TapeDetails.vue
@@ -3,8 +3,8 @@
     You are about to start
     <span class="font-semibold">{{ $props.tape.name }}</span> from
     <span class="font-semibold">{{ $props.tape.artist }}</span
-    >. This mixtape has <span class="font-semibold">{{ $props.tape.horns }}</span> horns and a
-    duration of <span class="font-semibold">{{ formatDuration($props.tape.duration) }}</span
+    >. This mixtape has <span class="font-semibold">{{ $props.tape.horns }}</span> horns and a duration of
+    <span class="font-semibold">{{ formatDuration($props.tape.duration) }}</span
     >, for an average of 1 horn every <span class="font-semibold">{{ timePerHorn }}</span> seconds.
   </div>
 </template>
@@ -18,7 +18,5 @@ const props = defineProps<{
   tape: MixTapeResponse;
 }>();
 
-const timePerHorn = computed(
-  () => Math.round((props.tape.duration / props.tape.horns) * 1000) / 1000
-);
+const timePerHorn = computed(() => Math.round((props.tape.duration / props.tape.horns) * 1000) / 1000);
 </script>
diff --git a/src/components/modes/centurion/TapeTimeline.vue b/src/components/modes/centurion/TapeTimeline.vue
index 9960e87..d745557 100644
--- a/src/components/modes/centurion/TapeTimeline.vue
+++ b/src/components/modes/centurion/TapeTimeline.vue
@@ -67,7 +67,7 @@ const timelineItems = ref(
       disabled: computed(() => isDisabled()),
       command: async () => {
         await store.skipCenturion(event.timestamp);
-      }
+      },
     };
 
     if (event.type === 'horn') {
@@ -81,7 +81,7 @@ const timelineItems = ref(
 
     timelineItems.push(timelineItem);
     return timelineItems;
-  }, [] as Array<TimelineItem>) ?? []
+  }, [] as Array<TimelineItem>) ?? [],
 );
 </script>
 
diff --git a/src/components/modes/time-trail-race/PlayerRegister.vue b/src/components/modes/time-trail-race/PlayerRegister.vue
index a311443..4fe5edc 100644
--- a/src/components/modes/time-trail-race/PlayerRegister.vue
+++ b/src/components/modes/time-trail-race/PlayerRegister.vue
@@ -31,7 +31,7 @@ const registerPlayer = () => {
   store.registerPlayer({
     name: playerName.value,
     alcoholFree: isAlcoholFree.value,
-    bac: isBac.value
+    bac: isBac.value,
   });
   playerName.value = '';
 };
@@ -42,7 +42,7 @@ watch(playerName, (newPlayerName) => {
 });
 
 defineExpose({
-  registerPlayer
+  registerPlayer,
 });
 </script>
 
diff --git a/src/components/modes/time-trail-race/PlayerScore.vue b/src/components/modes/time-trail-race/PlayerScore.vue
index 7229eec..606ba05 100644
--- a/src/components/modes/time-trail-race/PlayerScore.vue
+++ b/src/components/modes/time-trail-race/PlayerScore.vue
@@ -1,8 +1,6 @@
 <template>
   <div v-if="store.getCurrentPlayer !== undefined" class="flex flex-col gap-2">
-    <div class="text-2xl text-center font-semibold">
-      {{ store.getCurrentPlayer.name }}'s final score
-    </div>
+    <div class="text-2xl text-center font-semibold">{{ store.getCurrentPlayer.name }}'s final score</div>
     <div class="w-max-lg mx-auto">
       <table>
         <tbody>
diff --git a/src/components/modes/time-trail-race/PlayerTimer.vue b/src/components/modes/time-trail-race/PlayerTimer.vue
index bb7c854..08e0f5d 100644
--- a/src/components/modes/time-trail-race/PlayerTimer.vue
+++ b/src/components/modes/time-trail-race/PlayerTimer.vue
@@ -12,9 +12,7 @@ const interval = ref<number>();
 const timeTrailStore = useTimeTrailRaceStore();
 
 const timeString = computed(() => {
-  const totalDiffMs = timeTrailStore.startTime
-    ? now.value.getTime() - timeTrailStore.startTime.getTime()
-    : Number.NaN;
+  const totalDiffMs = timeTrailStore.startTime ? now.value.getTime() - timeTrailStore.startTime.getTime() : Number.NaN;
   return toStopwatchString(totalDiffMs);
 });
 
diff --git a/src/components/modes/time-trail-race/TimeTrailRaceInitialize.vue b/src/components/modes/time-trail-race/TimeTrailRaceInitialize.vue
index 5829d81..9827ecf 100644
--- a/src/components/modes/time-trail-race/TimeTrailRaceInitialize.vue
+++ b/src/components/modes/time-trail-race/TimeTrailRaceInitialize.vue
@@ -27,9 +27,7 @@
     <template #3>
       <div class="flex flex-col gap-2 mt-3 sm:mt-0">
         <div class="max-w-lg mx-auto">
-          <div class="sm:text-lg text-center mb-3 font-semibold">
-            Confirm time trail race initialization
-          </div>
+          <div class="sm:text-lg text-center mb-3 font-semibold">Confirm time trail race initialization</div>
           <div class="text-justify">
             You are about to start to start a time trail race session called
             <span class="font-semibold">{{ sessionName }}</span
@@ -67,7 +65,7 @@ const confirmModalLoading = ref<boolean>(false);
 const initializationSteps = computed<StepperStep[]>(() => [
   { value: 'Session', nextDisabled: sessionName.value === '' },
   { value: 'Subscribers', nextDisabled: selectedAudios.value.length === 0 },
-  { value: 'Confirmation', confirmFunction: initialize }
+  { value: 'Confirmation', confirmFunction: initialize },
 ]);
 
 const initialize = async () => {
@@ -76,7 +74,7 @@ const initialize = async () => {
     sessionName.value,
     selectedAudios.value,
     selectedScreens.value,
-    selectedLightGroups.value
+    selectedLightGroups.value,
   );
   confirmModalOpen.value = false;
   confirmModalLoading.value = false;
diff --git a/src/components/modes/time-trail-race/TimeTrailRaceStepper.vue b/src/components/modes/time-trail-race/TimeTrailRaceStepper.vue
index d9ad26c..7fc6a61 100644
--- a/src/components/modes/time-trail-race/TimeTrailRaceStepper.vue
+++ b/src/components/modes/time-trail-race/TimeTrailRaceStepper.vue
@@ -46,7 +46,7 @@ const timeTrailSteps = computed<StepperStep[]>(() => [
     nextText: 'Register player',
     nextIcon: null,
     nextDisabled: timeTrailStore.loading || currentStep.value != '1' || !canRegister.value,
-    nextFunction: registerPlayer.value?.registerPlayer
+    nextFunction: registerPlayer.value?.registerPlayer,
   },
   {
     value: 'Ready',
@@ -57,7 +57,7 @@ const timeTrailSteps = computed<StepperStep[]>(() => [
     nextText: 'Player ready',
     nextIcon: null,
     nextDisabled: timeTrailStore.loading || currentStep.value != '2',
-    nextFunction: timeTrailStore.ready
+    nextFunction: timeTrailStore.ready,
   },
   {
     value: 'Start',
@@ -68,7 +68,7 @@ const timeTrailSteps = computed<StepperStep[]>(() => [
     nextText: 'Start!',
     nextIcon: null,
     nextDisabled: timeTrailStore.loading || currentStep.value != '3',
-    nextFunction: timeTrailStore.start
+    nextFunction: timeTrailStore.start,
   },
   {
     value: 'Finish',
@@ -79,7 +79,7 @@ const timeTrailSteps = computed<StepperStep[]>(() => [
     nextText: 'Finish!',
     nextIcon: null,
     nextDisabled: timeTrailStore.loading || currentStep.value != '4',
-    nextFunction: timeTrailStore.finish
+    nextFunction: timeTrailStore.finish,
   },
   {
     value: 'Reveal',
@@ -90,8 +90,8 @@ const timeTrailSteps = computed<StepperStep[]>(() => [
     confirmText: 'Reveal score',
     confirmIcon: null,
     confirmDisabled: timeTrailStore.loading || currentStep.value != '5',
-    confirmFunction: timeTrailStore.revealScore
-  }
+    confirmFunction: timeTrailStore.revealScore,
+  },
 ]);
 
 const currentStep = computed(() => {
diff --git a/src/components/poster/PosterCard.vue b/src/components/poster/PosterCard.vue
index 3c26e86..6f1e36f 100644
--- a/src/components/poster/PosterCard.vue
+++ b/src/components/poster/PosterCard.vue
@@ -16,13 +16,7 @@
           :value="poster.source"
         >
           <template #item="slotProps">
-            <Image
-              :alt="poster.name"
-              class="w-full"
-              image-class="w-full rounded-lg"
-              preview
-              :src="slotProps.data"
-            />
+            <Image :alt="poster.name" class="w-full" image-class="w-full rounded-lg" preview :src="slotProps.data" />
           </template>
         </Carousel>
         <Image
@@ -45,9 +39,7 @@
       </a>
     </div>
     <div v-else>
-      <div
-        class="w-full flex justify-center items-center rounded-lg aspect-video bg-surface-300 text-primary-contrast"
-      >
+      <div class="w-full flex justify-center items-center rounded-lg aspect-video bg-surface-300 text-primary-contrast">
         {{ capitalize(poster.type) }}
       </div>
     </div>
diff --git a/src/components/prime/ConfirmWrapper.vue b/src/components/prime/ConfirmWrapper.vue
index ddfca96..23e5030 100644
--- a/src/components/prime/ConfirmWrapper.vue
+++ b/src/components/prime/ConfirmWrapper.vue
@@ -25,11 +25,11 @@ const confirmDialog = () => {
       if (props.onAccept) {
         props.onAccept();
       }
-    }
+    },
   });
 };
 
 defineExpose({
-  confirmDialog
+  confirmDialog,
 });
 </script>
diff --git a/src/components/prime/StepperWrapper.vue b/src/components/prime/StepperWrapper.vue
index b5f2e9e..7fd8213 100644
--- a/src/components/prime/StepperWrapper.vue
+++ b/src/components/prime/StepperWrapper.vue
@@ -48,9 +48,7 @@
                 :label="steps[index].nextText"
                 @click="
                   steps[index].nextFunction?.();
-                  steps[index].overrideNextFunction
-                    ? null
-                    : activateCallback((index + 2).toString());
+                  steps[index].overrideNextFunction ? null : activateCallback((index + 2).toString());
                 "
               />
               <Button
diff --git a/src/components/shortcuts/ShortcutBlock.vue b/src/components/shortcuts/ShortcutBlock.vue
index 1940be3..f3f1a67 100644
--- a/src/components/shortcuts/ShortcutBlock.vue
+++ b/src/components/shortcuts/ShortcutBlock.vue
@@ -77,9 +77,9 @@ const sceneMenuItems = computed<IShortcutItem[]>(() =>
       command: async () => {
         await handlersStore.setLightsHandler(lightGroupIds, 'ScenesHandler');
         await sceneStore.applyScene(s.id);
-      }
+      },
     };
-  })
+  }),
 );
 
 // Add items based on the user's security groups
@@ -98,10 +98,10 @@ const defaults = computed<IShortcutItem[] | boolean>(() => {
           icon: 'pi-power-off',
           command: () => {
             handlersStore.reset();
-          }
-        }
-      ]
-    }
+          },
+        },
+      ],
+    },
   ].filter(Boolean) as IShortcutItem[];
 });
 
@@ -123,7 +123,7 @@ const lights = computed<IShortcutItem[] | boolean>(() => {
           command: () => {
             const ids = subscriberStore.lightsGroups.map((g) => g.id);
             handlersStore.setLightsHandler(ids);
-          }
+          },
         },
         ...sceneMenuItems.value,
         {
@@ -132,10 +132,10 @@ const lights = computed<IShortcutItem[] | boolean>(() => {
           command: () => {
             const ids = subscriberStore.lightsGroups.map((g) => g.id);
             handlersStore.setLightsHandler(ids, 'RandomEffectsHandler');
-          }
-        }
-      ]
-    }
+          },
+        },
+      ],
+    },
   ].filter(Boolean) as IShortcutItem[];
 });
 
@@ -161,10 +161,10 @@ const modes = computed<IShortcutItem[] | boolean>(() => {
               disableAllModes().then(async () => {
                 await Promise.all([
                   centurionModeStore.getCurrentCenturion(),
-                  timeTrailRaceModeStore.getTimeTrailMode()
+                  timeTrailRaceModeStore.getTimeTrailMode(),
                 ]);
               });
-            }
+            },
           },
         showCenturion && {
           label: 'Centurion',
@@ -172,7 +172,7 @@ const modes = computed<IShortcutItem[] | boolean>(() => {
           route: '/modes/centurion',
           loading: centurionModeStore.loading,
           enabledIcon: centurionModeStore.enabled,
-          disabledIcon: centurionModeStore.disabled
+          disabledIcon: centurionModeStore.disabled,
         },
         showTimeTrail && {
           label: 'Spoelbakkenrace',
@@ -180,15 +180,15 @@ const modes = computed<IShortcutItem[] | boolean>(() => {
           route: '/modes/timeTrailRace',
           loading: timeTrailRaceModeStore.loading,
           enabledIcon: timeTrailRaceModeStore.enabled,
-          disabledIcon: timeTrailRaceModeStore.disabled
-        }
-      ]
-    }
+          disabledIcon: timeTrailRaceModeStore.disabled,
+        },
+      ],
+    },
   ].filter(Boolean) as IShortcutItem[];
 });
 
 const menus = computed<Array<Array<IShortcutItem>>>(
-  () => [defaults.value, lights.value, modes.value].filter(Boolean) as Array<Array<IShortcutItem>>
+  () => [defaults.value, lights.value, modes.value].filter(Boolean) as Array<Array<IShortcutItem>>,
 );
 </script>
 
diff --git a/src/layout/AppContainer.vue b/src/layout/AppContainer.vue
index ddb9f0b..69e6669 100644
--- a/src/layout/AppContainer.vue
+++ b/src/layout/AppContainer.vue
@@ -2,9 +2,7 @@
   <Card>
     <template #title>
       <div class="flex justify-between mb-4 items-center">
-        <div class="uppercase mb-0">
-          <i :class="['pi mr-3', icon]" style="font-size: 1.25rem" />{{ title }}
-        </div>
+        <div class="uppercase mb-0"><i :class="['pi mr-3', icon]" style="font-size: 1.25rem" />{{ title }}</div>
         <slot name="header" />
       </div>
     </template>
@@ -18,12 +16,12 @@
 defineProps({
   title: {
     type: String,
-    default: ''
+    default: '',
   },
   icon: {
     type: String,
-    default: ''
-  }
+    default: '',
+  },
 });
 </script>
 
diff --git a/src/layout/AppLayout.vue b/src/layout/AppLayout.vue
index 9d21155..3dde5a2 100644
--- a/src/layout/AppLayout.vue
+++ b/src/layout/AppLayout.vue
@@ -3,7 +3,7 @@
     class="layout-wrapper"
     :class="[
       'layout-static',
-      { 'layout-static-inactive': !menuDesktopActive, 'layout-mobile-active': menuMobileActive }
+      { 'layout-static-inactive': !menuDesktopActive, 'layout-mobile-active': menuMobileActive },
     ]"
   >
     <AppTopbar />
@@ -62,8 +62,7 @@ const isOutsideClicked = (event: Event) => {
   const sidebar = document.querySelector('.layout-sidebar');
   const sidebarButton = document.querySelector('.layout-topbar-button');
 
-  const isInside =
-    sidebar!.contains(event.target as Node) || sidebarButton!.contains(event.target as Node);
+  const isInside = sidebar!.contains(event.target as Node) || sidebarButton!.contains(event.target as Node);
 
   return !isInside;
 };
diff --git a/src/layout/AppMenu.vue b/src/layout/AppMenu.vue
index eeb5d16..0f20be8 100644
--- a/src/layout/AppMenu.vue
+++ b/src/layout/AppMenu.vue
@@ -29,12 +29,12 @@ const model = computed<MenuItem[]>(() => {
       label: 'Home',
       items: [
         { label: 'Dashboard', icon: 'pi pi-fw pi-home', to: '/' },
-        showAudit && { label: 'Logs', icon: 'pi pi-fw pi-book', to: '/audit' }
-      ].filter(Boolean)
+        showAudit && { label: 'Logs', icon: 'pi pi-fw pi-book', to: '/audit' },
+      ].filter(Boolean),
     },
     showPosters && {
       label: 'Screens',
-      items: [{ label: 'Posters', icon: 'pi pi-fw pi-image', to: '/poster/list' }]
+      items: [{ label: 'Posters', icon: 'pi pi-fw pi-image', to: '/poster/list' }],
     },
     {
       label: 'Lights',
@@ -43,10 +43,10 @@ const model = computed<MenuItem[]>(() => {
         showScenes && {
           label: 'Scenes',
           icon: 'pi pi-fw pi-sliders-h',
-          to: '/lights/scenesController'
+          to: '/lights/scenesController',
         },
-        showFixtures && { label: 'Fixtures', icon: 'pi pi-fw pi-bolt', to: '/lights/fixtures' }
-      ].filter(Boolean)
+        showFixtures && { label: 'Fixtures', icon: 'pi pi-fw pi-bolt', to: '/lights/fixtures' },
+      ].filter(Boolean),
     },
     (showCenturion || showTimeTrail) && {
       label: 'Modes',
@@ -54,11 +54,11 @@ const model = computed<MenuItem[]>(() => {
         showTimeTrail && {
           label: 'Spoelbakkenrace',
           icon: 'pi pi-fw pi-hourglass',
-          to: '/modes/timetrailrace'
+          to: '/modes/timetrailrace',
         },
-        showCenturion && { label: 'Centurion', icon: 'pi pi-fw pi-crown', to: '/modes/centurion' }
-      ].filter(Boolean)
-    }
+        showCenturion && { label: 'Centurion', icon: 'pi pi-fw pi-crown', to: '/modes/centurion' },
+      ].filter(Boolean),
+    },
   ].filter(Boolean) as MenuItem[];
 });
 </script>
diff --git a/src/layout/AppMenuItem.vue b/src/layout/AppMenuItem.vue
index c12b617..2bd587d 100644
--- a/src/layout/AppMenuItem.vue
+++ b/src/layout/AppMenuItem.vue
@@ -29,7 +29,6 @@
 import { useRoute } from 'vue-router';
 import { useLayoutStore } from '@/stores/layout.store';
 
-// eslint-disable-next-line import/exports-last
 export interface MenuItem {
   label: string;
   icon?: string;
@@ -40,20 +39,20 @@ export interface MenuItem {
 defineProps({
   item: {
     type: Object as () => MenuItem,
-    default: () => ({})
+    default: () => ({}),
   },
   index: {
     type: Number,
-    default: 0
+    default: 0,
   },
   root: {
     type: Boolean,
-    default: true
+    default: true,
   },
   parentItemKey: {
     type: String,
-    default: null
-  }
+    default: null,
+  },
 });
 
 const layoutStore = useLayoutStore();
diff --git a/src/layout/AppTopbar.vue b/src/layout/AppTopbar.vue
index 482ecce..2e0f382 100644
--- a/src/layout/AppTopbar.vue
+++ b/src/layout/AppTopbar.vue
@@ -15,8 +15,8 @@
           'pi',
           {
             'pi-moon': !darkMode,
-            'pi-sun': darkMode
-          }
+            'pi-sun': darkMode,
+          },
         ]"
       />
     </div>
diff --git a/src/main.ts b/src/main.ts
index b00a258..6b64d0b 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -55,8 +55,8 @@ const app = createApp(App);
 // define options
 const timeagoOptions = {
   converterOptions: {
-    includeSeconds: true
-  }
+    includeSeconds: true,
+  },
 };
 
 app.use(router);
@@ -64,15 +64,15 @@ app.use(PrimeVue, {
   theme: {
     preset: AuraPreset,
     options: {
-      darkModeSelector: '.dark-mode'
-    }
-  }
+      darkModeSelector: '.dark-mode',
+    },
+  },
 });
 app.use(ToastService);
 app.use(ConfirmationService);
 
 client.setConfig({
-  baseUrl: '/api'
+  baseUrl: '/api',
 });
 
 app.use(createPinia());
diff --git a/src/router/index.ts b/src/router/index.ts
index e54860b..01f5512 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -25,16 +25,16 @@ const router = createRouter({
             {
               path: 'callback',
               component: () => import('@/views/Base/AuthView.vue'),
-              name: 'authCallback'
-            }
-          ]
+              name: 'authCallback',
+            },
+          ],
         },
         {
           path: '/unauthorized',
           component: () => import('@/views/Base/UnauthorizedView.vue'),
-          name: 'unauthorized'
-        }
-      ]
+          name: 'unauthorized',
+        },
+      ],
     },
     {
       path: '',
@@ -43,7 +43,7 @@ const router = createRouter({
         {
           path: '',
           component: () => import('@/views/Base/DashboardView.vue'),
-          name: 'dashboard'
+          name: 'dashboard',
         },
         {
           path: '/poster',
@@ -51,13 +51,13 @@ const router = createRouter({
             {
               path: 'list',
               component: () => import('@/views/Poster/PosterList.vue'),
-              name: 'posterList'
-            }
+              name: 'posterList',
+            },
           ],
           meta: {
             securityGroup: 'poster',
-            securitySection: 'base'
-          }
+            securitySection: 'base',
+          },
         },
         {
           path: '/modes',
@@ -68,8 +68,8 @@ const router = createRouter({
               name: 'centurionMode',
               meta: {
                 securityGroup: 'centurion',
-                securitySection: 'privileged'
-              }
+                securitySection: 'privileged',
+              },
             },
             {
               path: 'timeTrailRace',
@@ -77,10 +77,10 @@ const router = createRouter({
               name: 'timeTrailRaceMode',
               meta: {
                 securityGroup: 'timetrail',
-                securitySection: 'base'
-              }
-            }
-          ]
+                securitySection: 'base',
+              },
+            },
+          ],
         },
         {
           path: '/lights',
@@ -91,8 +91,8 @@ const router = createRouter({
               name: 'lightEffects',
               meta: {
                 securityGroup: 'effects',
-                securitySection: 'base'
-              }
+                securitySection: 'base',
+              },
             },
             {
               path: 'scenesController',
@@ -100,8 +100,8 @@ const router = createRouter({
               name: 'lightsScenesController',
               meta: {
                 securityGroup: 'scenes',
-                securitySection: 'base'
-              }
+                securitySection: 'base',
+              },
             },
             {
               path: 'fixtures',
@@ -109,10 +109,10 @@ const router = createRouter({
               name: 'fixturesOverview',
               meta: {
                 securityGroup: 'handler',
-                securitySection: 'base'
-              }
-            }
-          ]
+                securitySection: 'base',
+              },
+            },
+          ],
         },
         {
           path: '/audit',
@@ -120,17 +120,17 @@ const router = createRouter({
           name: 'AuditLogs',
           meta: {
             securityGroup: 'audit',
-            securitySection: 'base'
-          }
-        }
-      ]
+            securitySection: 'base',
+          },
+        },
+      ],
     },
     {
       path: '/:pathMatch(.*)*',
       component: () => import('@/views/Base/NotFoundView.vue'),
-      name: 'notFound'
-    }
-  ]
+      name: 'notFound',
+    },
+  ],
 });
 
 router.beforeEach(async (to, from, next) => {
@@ -144,7 +144,7 @@ router.beforeEach(async (to, from, next) => {
     await authStore.MockLogin({
       id: 'dev',
       name: 'dev',
-      roles: [SecurityGroup.ADMIN]
+      roles: [SecurityGroup.ADMIN],
     });
     await authStore.initStores();
   }
diff --git a/src/stores/audit.store.ts b/src/stores/audit.store.ts
index 5caff78..ae98e29 100644
--- a/src/stores/audit.store.ts
+++ b/src/stores/audit.store.ts
@@ -27,7 +27,7 @@ export const useAuditStore = defineStore('audit', {
     take: 5,
     skip: 0,
     count: 0,
-    loading: true
+    loading: true,
   }),
   getters: {},
   actions: {
@@ -45,8 +45,8 @@ export const useAuditStore = defineStore('audit', {
       const logs = await getAuditLogs({
         query: {
           take: this.take,
-          skip: this.skip
-        }
+          skip: this.skip,
+        },
       });
       this.dashboardEntries = logs.data!.records;
       this.count = logs.data!.pagination.count;
@@ -63,8 +63,8 @@ export const useAuditStore = defineStore('audit', {
       const logs = await getAuditLogs({
         query: {
           take: this.take,
-          skip: this.skip
-        }
+          skip: this.skip,
+        },
       });
       this.entries = logs.data!.records;
       this.count = logs.data!.pagination.count;
@@ -106,6 +106,6 @@ export const useAuditStore = defineStore('audit', {
     async destroy() {
       const socketStore = useSocketStore();
       socketStore.backofficeSocket?.removeListener('audit_log_create', this.handleAuditLogAddition);
-    }
-  }
+    },
+  },
 });
diff --git a/src/stores/auth.store.ts b/src/stores/auth.store.ts
index 07f444d..3404977 100644
--- a/src/stores/auth.store.ts
+++ b/src/stores/auth.store.ts
@@ -13,7 +13,7 @@ import {
   type ISecurityGroups,
   type ISecuritySections,
   type OidcParameters,
-  SecurityGroup
+  SecurityGroup,
 } from '@/api';
 import { useSceneControllerStore } from '@/stores/scene-controller.store';
 import { useAuditStore } from '@/stores/audit.store';
@@ -37,13 +37,13 @@ export const useAuthStore = defineStore('auth', {
     name: null,
     roles: [],
     development: false,
-    securityGroups: undefined
+    securityGroups: undefined,
   }),
   getters: {
     getName: (state) => state.name,
     getRoles: (state) => state.roles,
     getDevelopment: (state) => state.development,
-    getSecurityGroups: (state) => state.securityGroups
+    getSecurityGroups: (state) => state.securityGroups,
   },
   actions: {
     /**
@@ -67,7 +67,7 @@ export const useAuthStore = defineStore('auth', {
      */
     async OIDCLogin(oidcParameters: OidcParameters): Promise<void> {
       authOidc({
-        body: oidcParameters
+        body: oidcParameters,
       }).then((user) => {
         this.name = user.data!.name;
         this.roles = user.data!.roles;
@@ -81,7 +81,7 @@ export const useAuthStore = defineStore('auth', {
     async MockLogin(user: AuthUser): Promise<void> {
       this.development = true;
       await authMock({
-        body: user
+        body: user,
       }).then((user) => {
         this.name = user.data!.name;
         this.roles = user.data!.roles;
@@ -125,6 +125,6 @@ export const useAuthStore = defineStore('auth', {
      */
     isInSecurityGroup(group: keyof ISecurityGroups, section: keyof ISecuritySections): boolean {
       return _.intersection(this.roles, this.securityGroups![group][section]).length > 0;
-    }
-  }
+    },
+  },
 });
diff --git a/src/stores/color.store.ts b/src/stores/color.store.ts
index ed42033..0cbce06 100644
--- a/src/stores/color.store.ts
+++ b/src/stores/color.store.ts
@@ -7,7 +7,7 @@ interface ColorStore {
 
 export const useColorStore = defineStore('color', {
   state: (): ColorStore => ({
-    colors: []
+    colors: [],
   }),
   actions: {
     async init(): Promise<void> {
@@ -17,6 +17,6 @@ export const useColorStore = defineStore('color', {
       const color = this.colors.find((c1) => c1.color === c);
       if (!color) return '';
       return color.spec.hex;
-    }
-  }
+    },
+  },
 });
diff --git a/src/stores/effects-controller.store.ts b/src/stores/effects-controller.store.ts
index 1aca9f9..dca75b6 100644
--- a/src/stores/effects-controller.store.ts
+++ b/src/stores/effects-controller.store.ts
@@ -6,7 +6,7 @@ import {
   enableStrobeOnLightsGroup,
   type LightsEffectsColorCreateParams,
   type LightsEffectsMovementCreateParams,
-  type LightsGroupResponse
+  type LightsGroupResponse,
 } from '@/api';
 
 interface PushedEffect {
@@ -24,7 +24,7 @@ interface EffectsControllerStore {
 export const useEffectsControllerStore = defineStore('effectsController', {
   state: (): EffectsControllerStore => ({
     selectedLightsGroupIds: [],
-    pastPushedEffects: []
+    pastPushedEffects: [],
   }),
   getters: {},
   actions: {
@@ -47,13 +47,13 @@ export const useEffectsControllerStore = defineStore('effectsController', {
       ids.map(async (id) => {
         await applyLightsEffectColor({
           body: [effect],
-          path: { id }
+          path: { id },
         });
       });
       const pastEffect: PushedEffect = {
         colorEffect: { ...effect },
         lightGroupIds: [...ids],
-        timestamp: new Date()
+        timestamp: new Date(),
       };
       this.pastPushedEffects = [pastEffect, ...this.pastPushedEffects.slice(0, 9)];
     },
@@ -62,13 +62,13 @@ export const useEffectsControllerStore = defineStore('effectsController', {
       ids.map(async (id) => {
         await applyLightsEffectMovement({
           body: [effect],
-          path: { id }
+          path: { id },
         });
       });
       const pastEffect: PushedEffect = {
         movementEffect: { ...effect },
         lightGroupIds: [...ids],
-        timestamp: new Date()
+        timestamp: new Date(),
       };
       this.pastPushedEffects = [pastEffect, ...this.pastPushedEffects.slice(0, 9)];
     },
@@ -76,18 +76,18 @@ export const useEffectsControllerStore = defineStore('effectsController', {
       await Promise.all(
         this.selectedLightsGroupIds.map((id) => {
           return enableStrobeOnLightsGroup({
-            path: { id }
+            path: { id },
           });
-        })
+        }),
       );
     },
     async disableStrobe() {
       await Promise.all(
         this.selectedLightsGroupIds.map((id) => {
           return disableStrobeOnLightsGroup({
-            path: { id }
+            path: { id },
           });
-        })
+        }),
       );
     },
     async disableLightsColors() {
@@ -95,9 +95,9 @@ export const useEffectsControllerStore = defineStore('effectsController', {
         this.selectedLightsGroupIds.map((id) => {
           return applyLightsEffectColor({
             body: [],
-            path: { id }
+            path: { id },
           });
-        })
+        }),
       );
     },
     async disableLightsMovement() {
@@ -105,12 +105,12 @@ export const useEffectsControllerStore = defineStore('effectsController', {
         this.selectedLightsGroupIds.map((id) => {
           return applyLightsEffectMovement({
             body: [],
-            path: { id }
+            path: { id },
           });
-        })
+        }),
       );
-    }
-  }
+    },
+  },
 });
 
 export { type PushedEffect };
diff --git a/src/stores/handlers.store.ts b/src/stores/handlers.store.ts
index 738a6d0..396914a 100644
--- a/src/stores/handlers.store.ts
+++ b/src/stores/handlers.store.ts
@@ -13,13 +13,10 @@ import {
   type ScreenResponse,
   setAudioHandler,
   setLightsHandler,
-  setScreenHandler
+  setScreenHandler,
 } from '@/api';
 
-type Handler =
-  | HandlerResponse_ScreenResponse_
-  | HandlerResponse_AudioResponse_
-  | HandlerResponse_LightsGroupResponse_;
+type Handler = HandlerResponse_ScreenResponse_ | HandlerResponse_AudioResponse_ | HandlerResponse_LightsGroupResponse_;
 
 /**
  * HandlerStore
@@ -56,7 +53,7 @@ export const useHandlersStore = defineStore('handlers', {
       gettingScreens: false,
       settingScreens: false,
       gettingLights: false,
-      settingLights: false
+      settingLights: false,
     }) as HandlersStore,
   getters: {
     fetchAudioHandlers: (state) => state.audioHandlers,
@@ -67,7 +64,7 @@ export const useHandlersStore = defineStore('handlers', {
     isGettingScreens: (state) => state.gettingScreens,
     isSettingScreens: (state) => state.settingScreens,
     isGettingLights: (state) => state.gettingLights,
-    isSettingLights: (state) => state.settingLights
+    isSettingLights: (state) => state.settingLights,
   },
   actions: {
     /**
@@ -115,10 +112,7 @@ export const useHandlersStore = defineStore('handlers', {
       const socketStore = useSocketStore();
       socketStore.backofficeSocket?.on('handler_audio_update', this.getAudioHandlers.bind(this));
       socketStore.backofficeSocket?.on('handler_screen_update', this.getScreenHandlers.bind(this));
-      socketStore.backofficeSocket?.on(
-        'handler_lightsgroup_update',
-        this.getLightsHandlers.bind(this)
-      );
+      socketStore.backofficeSocket?.on('handler_lightsgroup_update', this.getLightsHandlers.bind(this));
 
       this.gettingAudio = this.gettingScreens = this.gettingLights = false;
     },
@@ -135,14 +129,14 @@ export const useHandlersStore = defineStore('handlers', {
             async (i) =>
               await setAudioHandler({
                 body: { name: newHandler != null ? newHandler : '' },
-                path: { id: i }
-              })
-          )
+                path: { id: i },
+              }),
+          ),
         );
       } else {
         await setAudioHandler({
           body: { name: newHandler != null ? newHandler : '' },
-          path: { id }
+          path: { id },
         });
       }
       this.settingAudio = false;
@@ -161,14 +155,14 @@ export const useHandlersStore = defineStore('handlers', {
           id.map((i) =>
             setLightsHandler({
               body: { name: newHandler != null ? newHandler : '' },
-              path: { id: i }
-            })
-          )
+              path: { id: i },
+            }),
+          ),
         );
       } else {
         await setLightsHandler({
           body: { name: newHandler != null ? newHandler : '' },
-          path: { id }
+          path: { id },
         });
       }
       this.settingLights = false;
@@ -187,14 +181,14 @@ export const useHandlersStore = defineStore('handlers', {
           id.map((i) =>
             setScreenHandler({
               body: { name: newHandler != null ? newHandler : '' },
-              path: { id: i }
-            })
-          )
+              path: { id: i },
+            }),
+          ),
         );
       } else {
         await setScreenHandler({
           body: { name: newHandler != null ? newHandler : '' },
-          path: { id }
+          path: { id },
         });
       }
 
@@ -241,8 +235,8 @@ export const useHandlersStore = defineStore('handlers', {
       await this.getLightsHandlers();
       await this.getScreenHandlers();
       this.gettingAudio = this.gettingScreens = this.gettingLights = false;
-    }
-  }
+    },
+  },
 });
 
 export { type Handler };
diff --git a/src/stores/layout.store.ts b/src/stores/layout.store.ts
index 661b86f..25158e1 100644
--- a/src/stores/layout.store.ts
+++ b/src/stores/layout.store.ts
@@ -8,7 +8,7 @@ enum TailwindWidth {
   md = 768,
   lg = 992,
   xl = 1200,
-  xxl = 1600
+  xxl = 1600,
 }
 
 /**
@@ -47,13 +47,13 @@ export const useLayoutStore = defineStore('layout', {
     menuMobileActive: false,
     menuDesktopActive: false,
     darkMode: useDarkMode(),
-    windowWidth: window.innerWidth
+    windowWidth: window.innerWidth,
   }),
   getters: {
     getMenuMobileActive: (state) => state.menuMobileActive,
     getMenuDesktopActive: (state) => state.menuDesktopActive,
     getDarkMode: (state) => state.darkMode,
-    getWindowWidth: (state) => state.windowWidth
+    getWindowWidth: (state) => state.windowWidth,
   },
   actions: {
     /**
@@ -111,8 +111,8 @@ export const useLayoutStore = defineStore('layout', {
      */
     unmountResizeListener() {
       window.removeEventListener('resize', this.changeWidth);
-    }
-  }
+    },
+  },
 });
 
 export { TailwindWidth };
diff --git a/src/stores/modes/centurion.store.ts b/src/stores/modes/centurion.store.ts
index 8f8161b..69c986c 100644
--- a/src/stores/modes/centurion.store.ts
+++ b/src/stores/modes/centurion.store.ts
@@ -10,7 +10,7 @@ import {
   disableCenturion,
   startCenturion,
   stopCenturion,
-  skipCenturion
+  skipCenturion,
 } from '@/api';
 
 /**
@@ -35,7 +35,7 @@ export const useCenturionStore = defineStore('centurion', {
     tapes: null,
     loading: true,
     playing: false,
-    skipping: false
+    skipping: false,
   }),
   getters: {
     enabled(): boolean {
@@ -48,7 +48,7 @@ export const useCenturionStore = defineStore('centurion', {
     getTapes: (state) => state.tapes,
     isLoading: (state) => state.loading,
     isPlaying: (state) => state.playing,
-    isSkipping: (state) => state.skipping
+    isSkipping: (state) => state.skipping,
   },
   actions: {
     /**
@@ -77,20 +77,14 @@ export const useCenturionStore = defineStore('centurion', {
       this.playing = this.currentTape?.playing ?? false;
 
       const socketStore = useSocketStore();
-      socketStore.backofficeSocket?.on(
-        'mode_centurion_update',
-        this.getCurrentCenturion.bind(this)
-      );
+      socketStore.backofficeSocket?.on('mode_centurion_update', this.getCurrentCenturion.bind(this));
     },
     /**
      * Destroy the store
      */
     async destroy() {
       const socketStore = useSocketStore();
-      socketStore.backofficeSocket?.removeListener(
-        'mode_centurion_update',
-        this.getCurrentCenturion.bind(this)
-      );
+      socketStore.backofficeSocket?.removeListener('mode_centurion_update', this.getCurrentCenturion.bind(this));
     },
     /**
      * Initialize the centurion
@@ -105,7 +99,7 @@ export const useCenturionStore = defineStore('centurion', {
       tapeArtist: string,
       audioIds: number[],
       screenIds: number[],
-      lightsGroupIds: number[]
+      lightsGroupIds: number[],
     ) {
       this.loading = true;
 
@@ -115,8 +109,8 @@ export const useCenturionStore = defineStore('centurion', {
           centurionArtist: tapeArtist,
           audioIds: audioIds,
           screenIds: screenIds,
-          lightsGroupIds: lightsGroupIds
-        }
+          lightsGroupIds: lightsGroupIds,
+        },
       });
       await this.getCurrentCenturion(false);
       this.loading = false;
@@ -153,10 +147,10 @@ export const useCenturionStore = defineStore('centurion', {
       this.skipping = true;
       await skipCenturion({
         body: {
-          seconds: seconds
-        }
+          seconds: seconds,
+        },
       });
       this.skipping = false;
-    }
-  }
+    },
+  },
 });
diff --git a/src/stores/modes/time-trail-race.store.ts b/src/stores/modes/time-trail-race.store.ts
index 761464b..f8c48d7 100644
--- a/src/stores/modes/time-trail-race.store.ts
+++ b/src/stores/modes/time-trail-race.store.ts
@@ -17,7 +17,7 @@ import {
   type RaceStartedEvent,
   type RegisterPlayerParams,
   type ScoreboardItem,
-  TimeTrailRaceState
+  TimeTrailRaceState,
 } from '@/api';
 import { useSocketStore } from '@/stores/socket.store';
 
@@ -42,7 +42,7 @@ interface TimeTrailRaceStore {
 export const useTimeTrailRaceStore = defineStore('time-trail-race', {
   state: (): TimeTrailRaceStore => ({
     scoreboard: [],
-    loading: true
+    loading: true,
   }),
   getters: {
     enabled(): boolean {
@@ -56,7 +56,7 @@ export const useTimeTrailRaceStore = defineStore('time-trail-race', {
     getScoreboard: (state) => state.scoreboard,
     getCurrentPlayer: (state) => state.currentPlayer,
     getLoading: (state) => state.loading,
-    getStartTime: (state) => state.startTime
+    getStartTime: (state) => state.startTime,
   },
   actions: {
     /**
@@ -87,7 +87,7 @@ export const useTimeTrailRaceStore = defineStore('time-trail-race', {
       sessionName: string,
       audioIds: number[],
       screenIds: number[],
-      lightsGroupIds: number[]
+      lightsGroupIds: number[],
     ) {
       this.loading = true;
 
@@ -96,8 +96,8 @@ export const useTimeTrailRaceStore = defineStore('time-trail-race', {
           lightsGroupIds: lightsGroupIds,
           screenIds: screenIds,
           audioIds: audioIds,
-          sessionName: sessionName
-        }
+          sessionName: sessionName,
+        },
       }).then(() => {
         this.sessionName = sessionName;
         this.state = TimeTrailRaceState.INITIALIZED;
@@ -112,7 +112,7 @@ export const useTimeTrailRaceStore = defineStore('time-trail-race', {
     async registerPlayer(params: RegisterPlayerParams) {
       this.loading = true;
       const register = await raceRegisterPlayer({
-        body: params
+        body: params,
       });
       this.handleRegisterPlayer(register.data!);
       this.loading = false;
@@ -216,10 +216,7 @@ export const useTimeTrailRaceStore = defineStore('time-trail-race', {
       await this.getTimeTrailMode();
 
       const socketStore = useSocketStore();
-      socketStore.backofficeSocket?.on(
-        'race-player-registered',
-        this.handleRegisterPlayer.bind(this)
-      );
+      socketStore.backofficeSocket?.on('race-player-registered', this.handleRegisterPlayer.bind(this));
       socketStore.backofficeSocket?.on('race-player-ready', this.handleReady.bind(this));
       socketStore.backofficeSocket?.on('race-player-start', this.handleStart.bind(this));
       socketStore.backofficeSocket?.on('race-player-finish', this.handleFinish.bind(this));
@@ -241,26 +238,11 @@ export const useTimeTrailRaceStore = defineStore('time-trail-race', {
      */
     destroy() {
       const socketStore = useSocketStore();
-      socketStore.backofficeSocket?.removeListener(
-        'race-player-registered',
-        this.handleRegisterPlayer.bind(this)
-      );
-      socketStore.backofficeSocket?.removeListener(
-        'race-player-ready',
-        this.handleReady.bind(this)
-      );
-      socketStore.backofficeSocket?.removeListener(
-        'race-player-start',
-        this.handleStart.bind(this)
-      );
-      socketStore.backofficeSocket?.removeListener(
-        'race-player-finish',
-        this.handleFinish.bind(this)
-      );
-      socketStore.backofficeSocket?.removeListener(
-        'race-scoreboard',
-        this.handleRevealScore.bind(this)
-      );
-    }
-  }
+      socketStore.backofficeSocket?.removeListener('race-player-registered', this.handleRegisterPlayer.bind(this));
+      socketStore.backofficeSocket?.removeListener('race-player-ready', this.handleReady.bind(this));
+      socketStore.backofficeSocket?.removeListener('race-player-start', this.handleStart.bind(this));
+      socketStore.backofficeSocket?.removeListener('race-player-finish', this.handleFinish.bind(this));
+      socketStore.backofficeSocket?.removeListener('race-scoreboard', this.handleRevealScore.bind(this));
+    },
+  },
 });
diff --git a/src/stores/poster-store.ts b/src/stores/poster-store.ts
index 8922e52..0a06128 100644
--- a/src/stores/poster-store.ts
+++ b/src/stores/poster-store.ts
@@ -6,7 +6,7 @@ import {
   type ErrorPoster,
   getPosters,
   setPosterBorrelMode,
-  forceUpdatePosters
+  forceUpdatePosters,
 } from '@/api';
 
 /**
@@ -25,12 +25,12 @@ export const usePosterStore = defineStore('poster', {
   state: (): PosterStore => ({
     posters: [],
     borrelModeActive: false,
-    loading: true
+    loading: true,
   }),
   getters: {
     fetchPosters: (state) => state.posters,
     isLoading: (state) => state.loading,
-    isBorrelModeActive: (state) => state.borrelModeActive
+    isBorrelModeActive: (state) => state.borrelModeActive,
   },
   actions: {
     /**
@@ -38,7 +38,7 @@ export const usePosterStore = defineStore('poster', {
      */
     async getPosters() {
       getPosters({
-        query: { alwaysReturnBorrelPosters: true }
+        query: { alwaysReturnBorrelPosters: true },
       }).then((posters) => {
         this.posters = posters.data!.posters;
         this.borrelModeActive = posters.data!.borrelMode;
@@ -51,7 +51,7 @@ export const usePosterStore = defineStore('poster', {
     async setBorrelMode(enabled: boolean) {
       this.loading = true;
       await setPosterBorrelMode({
-        body: { enabled }
+        body: { enabled },
       }).then(() => {
         this.loading = false;
         this.borrelModeActive = enabled;
@@ -74,6 +74,6 @@ export const usePosterStore = defineStore('poster', {
 
       await this.getPosters();
       this.loading = false;
-    }
-  }
+    },
+  },
 });
diff --git a/src/stores/scene-controller.store.ts b/src/stores/scene-controller.store.ts
index d8aa8fa..86f475f 100644
--- a/src/stores/scene-controller.store.ts
+++ b/src/stores/scene-controller.store.ts
@@ -6,7 +6,7 @@ import {
   createScene,
   deleteScene,
   applyScene,
-  clearScene
+  clearScene,
 } from '@/api';
 
 interface SceneControllerStore {
@@ -19,13 +19,13 @@ export const useSceneControllerStore = defineStore('scene-controller', {
   state: (): SceneControllerStore => ({
     scenes: [],
     favoriteScenes: [],
-    loading: true
+    loading: true,
   }),
   getters: {},
   actions: {
     async init() {
       const scenes = await getAllScenes({
-        query: { favorite: true }
+        query: { favorite: true },
       });
       this.favoriteScenes = scenes.data!;
       this.loading = false;
@@ -43,7 +43,7 @@ export const useSceneControllerStore = defineStore('scene-controller', {
     async createScene(body: CreateSceneParams) {
       this.loading = true;
       await createScene({
-        body: body
+        body: body,
       });
       await this.fetchScenes();
       this.loading = false;
@@ -51,7 +51,7 @@ export const useSceneControllerStore = defineStore('scene-controller', {
     async deleteScene(id: number) {
       this.loading = true;
       await deleteScene({
-        path: { id }
+        path: { id },
       });
       await this.fetchScenes();
       this.loading = false;
@@ -59,7 +59,7 @@ export const useSceneControllerStore = defineStore('scene-controller', {
     async applyScene(id: number) {
       this.loading = true;
       await applyScene({
-        path: { id }
+        path: { id },
       });
       this.loading = false;
     },
@@ -67,6 +67,6 @@ export const useSceneControllerStore = defineStore('scene-controller', {
       this.loading = true;
       await clearScene();
       this.loading = false;
-    }
-  }
+    },
+  },
 });
diff --git a/src/stores/socket.store.ts b/src/stores/socket.store.ts
index c6c20c8..03f7376 100644
--- a/src/stores/socket.store.ts
+++ b/src/stores/socket.store.ts
@@ -9,7 +9,7 @@ interface SocketStore {
 export const useSocketStore = defineStore('socket', {
   state: (): SocketStore => ({
     rootSocket: undefined,
-    backofficeSocket: undefined
+    backofficeSocket: undefined,
   }),
   getters: {},
   actions: {
@@ -19,6 +19,7 @@ export const useSocketStore = defineStore('socket', {
 
       const promise1 = new Promise<void>((resolve) => {
         rootSocket.on('connect', () => {
+          // eslint-disable-next-line
           console.info('SocketIO: connected to /');
           this.rootSocket = rootSocket;
           resolve();
@@ -26,12 +27,13 @@ export const useSocketStore = defineStore('socket', {
       });
       const promise2 = new Promise<void>((resolve) => {
         backofficeSocket.on('connect', () => {
+          // eslint-disable-next-line
           console.info('SocketIO: connected to /backoffice');
           this.backofficeSocket = backofficeSocket;
           resolve();
         });
       });
       return Promise.all([promise1, promise2]);
-    }
-  }
+    },
+  },
 });
diff --git a/src/stores/socket/currently-playing.store.ts b/src/stores/socket/currently-playing.store.ts
index 6e2399a..1d6e6d2 100644
--- a/src/stores/socket/currently-playing.store.ts
+++ b/src/stores/socket/currently-playing.store.ts
@@ -10,7 +10,7 @@ interface CurrentlyPlayingStore {
 export const useCurrentlyPlayingStore = defineStore('currently-playing', {
   state: (): CurrentlyPlayingStore => ({
     currentlyPlaying: null,
-    initialized: false
+    initialized: false,
   }),
   getters: {},
   actions: {
@@ -34,6 +34,6 @@ export const useCurrentlyPlayingStore = defineStore('currently-playing', {
       if (!store.backofficeSocket) return;
 
       store.backofficeSocket.removeListener('beat', this.handleChangeTrack.bind(this));
-    }
-  }
+    },
+  },
 });
diff --git a/src/stores/socket/music-beat.store.ts b/src/stores/socket/music-beat.store.ts
index 0230702..c0d1e44 100644
--- a/src/stores/socket/music-beat.store.ts
+++ b/src/stores/socket/music-beat.store.ts
@@ -9,7 +9,7 @@ interface MusicBeatStore {
 export const useMusicBeatStore = defineStore('music-beat', {
   state: (): MusicBeatStore => ({
     beat: false,
-    initialized: false
+    initialized: false,
   }),
   getters: {},
   actions: {
@@ -29,6 +29,6 @@ export const useMusicBeatStore = defineStore('music-beat', {
       if (!store.backofficeSocket) return;
 
       store.backofficeSocket.removeListener('beat', this.handleBeat);
-    }
-  }
+    },
+  },
 });
diff --git a/src/stores/subscriber.store.ts b/src/stores/subscriber.store.ts
index d01e3a8..f091040 100644
--- a/src/stores/subscriber.store.ts
+++ b/src/stores/subscriber.store.ts
@@ -7,7 +7,7 @@ import {
   getLightsGroups,
   getScreens,
   type LightsGroupResponse,
-  type ScreenResponse
+  type ScreenResponse,
 } from '@/api';
 
 interface SubscriberStore {
@@ -20,7 +20,7 @@ export const useSubscriberStore = defineStore('subscribers', {
   state: (): SubscriberStore => ({
     audios: [],
     screens: [],
-    lightsGroups: []
+    lightsGroups: [],
   }),
   getters: {},
   actions: {
@@ -40,6 +40,6 @@ export const useSubscriberStore = defineStore('subscribers', {
       socketStore.backofficeSocket?.on('connect_audio', this.getAudios.bind(this));
       socketStore.backofficeSocket?.on('connect_screen', this.getScreens.bind(this));
       socketStore.backofficeSocket?.on('connect_lightgroups', this.getLightGroups.bind(this));
-    }
-  }
+    },
+  },
 });
diff --git a/src/utils/fetchInterceptor.ts b/src/utils/fetchInterceptor.ts
index 9d5a6a4..67c5557 100644
--- a/src/utils/fetchInterceptor.ts
+++ b/src/utils/fetchInterceptor.ts
@@ -15,7 +15,7 @@ client.interceptors.response.use((response) => {
       .then((err: HttpApiException) => {
         toastError({
           title: err.name,
-          body: err.message
+          body: err.message,
         });
         httpException = err;
       });
diff --git a/src/utils/toastHandler.ts b/src/utils/toastHandler.ts
index 093abf2..19ba4ed 100644
--- a/src/utils/toastHandler.ts
+++ b/src/utils/toastHandler.ts
@@ -10,7 +10,7 @@ enum ToastSeverity {
   SUCCESS = 'success',
   INFO = 'info',
   WARN = 'warn',
-  ERROR = 'error'
+  ERROR = 'error',
 }
 
 function toast(severity: ToastSeverity, message: ToastMessage) {
@@ -18,7 +18,7 @@ function toast(severity: ToastSeverity, message: ToastMessage) {
     severity: severity,
     summary: message.title,
     detail: message.body,
-    life: message.lifeTime ?? 5000
+    life: message.lifeTime ?? 5000,
   });
 }
 
diff --git a/src/utils/validation-schema.ts b/src/utils/validation-schema.ts
index c624abd..de807ed 100644
--- a/src/utils/validation-schema.ts
+++ b/src/utils/validation-schema.ts
@@ -7,6 +7,6 @@ export const userDetailsSchema = toTypedSchema(
     lastName: yup.string().required(),
     email: yup.string().email(),
     userType: yup.string().required(),
-    isActive: yup.boolean().required().default(true)
-  })
+    isActive: yup.boolean().required().default(true),
+  }),
 );
diff --git a/src/views/Base/AuthView.vue b/src/views/Base/AuthView.vue
index 383cb24..88eb8fb 100644
--- a/src/views/Base/AuthView.vue
+++ b/src/views/Base/AuthView.vue
@@ -34,11 +34,7 @@ onMounted(async () => {
     }
 
     let queryParameters = new URLSearchParams(route.hash.substring(1));
-    if (
-      !queryParameters.get('code') ||
-      !queryParameters.get('state') ||
-      !queryParameters.get('session_state')
-    ) {
+    if (!queryParameters.get('code') || !queryParameters.get('state') || !queryParameters.get('session_state')) {
       await router.push({ name: 'auth' });
     }
 
@@ -56,7 +52,7 @@ onMounted(async () => {
       .OIDCLogin({
         code: queryParameters.get('code')!,
         state: queryParameters.get('state')!,
-        session_state: queryParameters.get('session_state')!
+        session_state: queryParameters.get('session_state')!,
       })
       .then(() => {
         router.push(url!);
@@ -77,7 +73,7 @@ onMounted(async () => {
       state: state,
       response_mode: 'fragment',
       response_type: 'code',
-      scope: 'openid'
+      scope: 'openid',
     });
 
     window.location.href = oidcParameters.data!.authUrl + '?' + queryParameters.toString();
diff --git a/src/views/Lights/EffectsController.vue b/src/views/Lights/EffectsController.vue
index 8d97be1..080667a 100644
--- a/src/views/Lights/EffectsController.vue
+++ b/src/views/Lights/EffectsController.vue
@@ -97,10 +97,7 @@
         <template #content>
           <div class="overflow-y-scroll w-full">
             <div class="flex flex-row gap-5">
-              <div
-                v-for="effect in effectsControllerStore.pastPushedEffects"
-                :key="effect.timestamp.getTime()"
-              >
+              <div v-for="effect in effectsControllerStore.pastPushedEffects" :key="effect.timestamp.getTime()">
                 <EffectHistoryCard :effect="effect" />
               </div>
             </div>
@@ -136,7 +133,7 @@ const subscriberStore = useSubscriberStore();
 
 const activeLightGroups = handlersStore.getRegisteredLights('SetEffectsHandler');
 const inactiveLightGroups = subscriberStore.lightsGroups.filter(
-  (l1) => !activeLightGroups.find((l2) => l1.id === l2.id)
+  (l1) => !activeLightGroups.find((l2) => l1.id === l2.id),
 );
 </script>
 
diff --git a/src/views/Lights/FixtureOverview.vue b/src/views/Lights/FixtureOverview.vue
index 1f5a8de..bda4ed8 100644
--- a/src/views/Lights/FixtureOverview.vue
+++ b/src/views/Lights/FixtureOverview.vue
@@ -1,11 +1,7 @@
 <template>
   <AppContainer icon="pi pi-fw pi-bolt" title="Fixture Overview">
     <div>
-      <DataTable
-        v-model:expanded-rows="expandedRows"
-        data-key="id"
-        :value="subscriberStore.lightsGroups"
-      >
+      <DataTable v-model:expanded-rows="expandedRows" data-key="id" :value="subscriberStore.lightsGroups">
         <template #header>
           <div class="flex flex-wrap justify-end gap-5">
             <Button icon="pi pi-plus" label="Expand All" text @click="expandAll" />
@@ -24,9 +20,7 @@
             <span v-if="activeLightsGroupIds.has(slotProps.data.id)">
               {{ getHandler(slotProps.data.id) }}
             </span>
-            <InlineMessage v-else severity="warn">
-              No handler set, all actions disabled
-            </InlineMessage>
+            <InlineMessage v-else severity="warn"> No handler set, all actions disabled </InlineMessage>
           </template>
         </Column>
         <Column header="Actions">
@@ -41,7 +35,7 @@
                     await freezeLightsGroup({ path: { id: slotProps.data.id } });
                     toastSuccess({
                       title: 'Success',
-                      body: `Successfully froze lights group '${slotProps.data.name}'`
+                      body: `Successfully froze lights group '${slotProps.data.name}'`,
                     });
                   }
                 "
@@ -57,7 +51,7 @@
                     await unfreezeLightsGroup({ path: { id: slotProps.data.id } });
                     toastSuccess({
                       title: 'Success',
-                      body: `Successfully unfroze lights group '${slotProps.data.name}'`
+                      body: `Successfully unfroze lights group '${slotProps.data.name}'`,
                     });
                   }
                 "
@@ -96,10 +90,7 @@
                     <i class="pi pi-play" />
                   </Button>
                   <Button
-                    :disabled="
-                      !activeLightsGroupIds.has(slotProps.data.id) ||
-                      !slotProps2.data.fixture.canReset
-                    "
+                    :disabled="!activeLightsGroupIds.has(slotProps.data.id) || !slotProps2.data.fixture.canReset"
                     size="small"
                     title="Hardware reset"
                     @click="handleHardwareReset(slotProps2.data.type, slotProps2.data.id)"
@@ -132,7 +123,7 @@ import {
   unfreezeGroupPar,
   unfreezeLightsGroup,
   unfreezeMovingHeadRgb,
-  unfreezeMovingHeadWheel
+  unfreezeMovingHeadWheel,
 } from '@/api';
 import { FixtureType } from '@/components/lights/fixtures/FixtureType';
 import { toastSuccess } from '@/utils/toastHandler';
@@ -145,7 +136,7 @@ const expandedRows = ref<Record<number, boolean> | null>({});
 const expandAll = () => {
   expandedRows.value = subscriberStore.lightsGroups.reduce(
     (rows: Record<number, boolean>, group: LightsGroupResponse) => (rows[group.id] ? rows : {}),
-    {}
+    {},
   );
 };
 const collapseAll = () => {
@@ -156,7 +147,7 @@ const getGroupFixtures = (g: LightsGroupResponse) =>
   [
     ...g.pars.map((p) => ({ ...p, type: FixtureType.PAR })),
     ...g.movingHeadRgbs.map((m) => ({ ...m, type: FixtureType.MOVING_HEAD_RGB })),
-    ...g.movingHeadWheels.map((m) => ({ ...m, type: FixtureType.MOVING_HEAD_WHEEL }))
+    ...g.movingHeadWheels.map((m) => ({ ...m, type: FixtureType.MOVING_HEAD_WHEEL })),
   ].sort((a, b) => a.firstChannel - b.firstChannel);
 
 const handleFreeze = async (type: FixtureType, id: number) => {
@@ -173,7 +164,7 @@ const handleFreeze = async (type: FixtureType, id: number) => {
   }
   toastSuccess({
     title: 'Success',
-    body: 'Successfully froze fixture'
+    body: 'Successfully froze fixture',
   });
 };
 
@@ -191,7 +182,7 @@ const handleUnfreeze = async (type: FixtureType, id: number) => {
   }
   toastSuccess({
     title: 'Success',
-    body: 'Successfully unfroze fixture'
+    body: 'Successfully unfroze fixture',
   });
 };
 
@@ -209,7 +200,7 @@ const handleHardwareReset = async (type: FixtureType, id: number) => {
   }
   toastSuccess({
     title: 'Success',
-    body: 'Successfully sent hardware reset signal'
+    body: 'Successfully sent hardware reset signal',
   });
 };
 
diff --git a/src/views/Modes/TimeTrailRaceModeView.vue b/src/views/Modes/TimeTrailRaceModeView.vue
index ab878a4..06bb65d 100644
--- a/src/views/Modes/TimeTrailRaceModeView.vue
+++ b/src/views/Modes/TimeTrailRaceModeView.vue
@@ -1,11 +1,5 @@
 <template>
-  <div
-    :class="
-      timeTrailInitialized
-        ? 'grid grid-cols-1 xl:grid-cols-2 gap-10'
-        : 'grid lg:grid-cols-6 xxl:grid-cols-4'
-    "
-  >
+  <div :class="timeTrailInitialized ? 'grid grid-cols-1 xl:grid-cols-2 gap-10' : 'grid lg:grid-cols-6 xxl:grid-cols-4'">
     <div v-if="!timeTrailInitialized" class="hidden lg:flex" />
     <AppContainer
       :class="timeTrailInitialized ? '' : 'lg:col-span-4 xxl:col-span-2'"
diff --git a/src/views/Poster/PosterList.vue b/src/views/Poster/PosterList.vue
index 8c876d9..0ad7e7a 100644
--- a/src/views/Poster/PosterList.vue
+++ b/src/views/Poster/PosterList.vue
@@ -7,10 +7,7 @@
       <div v-if="store.isLoading">
         <Spinner />
       </div>
-      <div
-        v-else
-        class="grid gap-4 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 pb-5"
-      >
+      <div v-else class="grid gap-4 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 pb-5">
         <div v-for="poster in store.fetchPosters" :key="poster.name">
           <PosterCard :poster="poster" />
         </div>