feat(effects): add reset controller button

src/components/lights/effects/EffectControllerButtonDialog.vue

@@ -54,6 +54,14 @@
           @input-valid="(v) => (propertiesValid = v)"
           @update:model-value="(p) => (properties = p)"
         />
+        <ButtonDialogReset
+          v-if="type === ButtonTypes.LightsButtonReset"
+          :default-properties="
+            button?.properties.type === ButtonTypes.LightsButtonReset ? button.properties : undefined
+          "
+          @input-valid="(v) => (propertiesValid = v)"
+          @update:model-value="(p) => (properties = p)"
+        />
         <ButtonDialogStrobe
           v-if="type === ButtonTypes.LightsButtonStrobe"
           :default-properties="
@@ -106,12 +114,14 @@ import ButtonDialogStrobe from '@/components/lights/effects/button/ButtonDialogS
 import ButtonDialogSwitch from '@/components/lights/effects/button/ButtonDialogSwitch.vue';
 import { useEffectsControllerStore } from '@/stores/effects-controller.store';
 import IconSelector from '@/components/IconSelector.vue';
+import ButtonDialogReset from '@/components/lights/effects/button/ButtonDialogReset.vue';
 
 enum ButtonTypes {
   LightsButtonColors = 'LightsButtonColors',
   LightsButtonEffectColor = 'LightsButtonEffectColor',
   LightsButtonEffectMovement = 'LightsButtonEffectMovement',
   LightsButtonNull = 'LightsButtonNull',
+  LightsButtonReset = 'LightsButtonReset',
   LightsButtonStrobe = 'LightsButtonStrobe',
   LightsButtonSwitch = 'LightsButtonSwitch',
 }

src/components/lights/effects/button/ButtonDialogReset.vue

@@ -0,0 +1,36 @@
+<template>
+  <LightsGroupsSelect v-model="lightsGroupIds" />
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue';
+import type { LightsButtonReset } from '@/api';
+import LightsGroupsSelect from '@/components/lights/effects/button/LightsGroupsSelect.vue';
+
+const props = defineProps<{
+  defaultProperties?: LightsButtonReset;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [properties: LightsButtonReset];
+  inputValid: [valid: boolean];
+}>();
+
+const lightsGroupIds = ref<number[]>(props.defaultProperties?.lightsGroupIds || []);
+
+const handleChange = () => {
+  const properties: LightsButtonReset = {
+    type: 'LightsButtonReset',
+    lightsGroupIds: lightsGroupIds.value,
+  };
+  const inputIsValid: boolean = lightsGroupIds.value.length > 0;
+
+  emit('update:modelValue', properties);
+  emit('inputValid', inputIsValid);
+};
+
+watch([lightsGroupIds], handleChange);
+onMounted(handleChange);
+</script>
+
+<style scoped></style>

src/stores/effects-controller.store.ts

@@ -125,19 +125,29 @@ export const useEffectsControllerStore = defineStore('effectsController', {
         }),
       );
     },
-    async disableLightsColors() {
+    /**
+     * Remove all color effects from the given fixtures.
+     * Uses "selectedLightsGroupIds if none given"
+     */
+    async disableLightsColors(lightGroupIds?: number[]) {
+      const ids = lightGroupIds ?? this.selectedLightsGroupIds;
       await Promise.all(
-        this.selectedLightsGroupIds.map((id) => {
+        ids.map((id) => {
           return applyLightsEffectColor({
             body: [],
             path: { id },
           });
         }),
       );
     },
-    async disableLightsMovement() {
+    /**
+     * Remove all movement effects from the given fixtures.
+     * Uses "selectedLightsGroupIds if none given"
+     */
+    async disableLightsMovement(lightGroupIds?: number[]) {
+      const ids = lightGroupIds ?? this.selectedLightsGroupIds;
       await Promise.all(
-        this.selectedLightsGroupIds.map((id) => {
+        ids.map((id) => {
           return applyLightsEffectMovement({
             body: [],
             path: { id },
@@ -241,6 +251,13 @@ export const useEffectsControllerStore = defineStore('effectsController', {
           this.setMovementEffect(button.properties.effectProps, button.properties.lightsGroupIds);
           return;
         }
+        case 'LightsButtonReset': {
+          await Promise.all([
+            this.disableLightsColors(button.properties.lightsGroupIds),
+            this.disableLightsMovement(button.properties.lightsGroupIds),
+          ]);
+          return;
+        }
         case 'LightsButtonStrobe': {
           await this.enableStrobe(button.properties.lightsGroupIds);
           return;