feat(prettier): use shared GEWIS config

.prettierrc.mjs

@@ -0,0 +1,8 @@
+import prettier from '@gewis/eslint-config/prettier.mjs';
+
+/**
+ * @type {import("prettier").Config}
+ */
+export default {
+  ...prettier,
+};

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}',
+    },
+  },
 });

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[]>([]);

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() }}

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>

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>

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>

src/components/handlers/LightsControllerItemComponent.vue

@@ -4,25 +4,19 @@
       {{ 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">
             {{ group.name }}
           </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>

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>

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>

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>

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>

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();
 

src/components/lights/effects/color/EffectBeatFadeOut.vue

@@ -18,31 +18,22 @@ 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"
       :checked="enableFade"
       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>
 

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>

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>

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>

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>

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>

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>

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>

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>