chore: add labels with right names and ids to inputs

src/components/tasks-automations/ConstantInstructionItem.vue

@@ -28,18 +28,23 @@
     <div class="modal-box max-w-sm">
       <p class="card-title mx-2 mb-2">Set constant</p>
       <form @submit.prevent="handleConfirm">
-        <label for="name" class="fieldset-legend text-sm mx-3 mt-2">Name</label>
+        <label :for="'name_' + id" class="fieldset-legend text-sm mx-3 mt-2">Name</label>
         <input
-          name="name"
-          id="name"
+          :name="'name_' + id"
+          :id="'name_' + id"
           type="text"
           class="input mt-2 mx-2"
           placeholder="Name"
           v-model="variableForm.name"
         />
 
-        <label for="type" class="fieldset-legend text-sm mx-3">Types</label>
-        <select name="type" id="type" v-model="variableForm.type" class="select mt-2 mx-2">
+        <label :for="'type_' + id" class="fieldset-legend text-sm mx-3">Types</label>
+        <select
+          :name="'type_' + id"
+          :id="'type_' + id"
+          v-model="variableForm.type"
+          class="select mt-2 mx-2"
+        >
           <option selected disabled>Pick a Type</option>
           <option
             v-for="type in Object.values(Type).filter((type) => type !== Type.VoidType)"
@@ -50,39 +55,39 @@
           </option>
         </select>
 
-        <label for="value" class="fieldset-legend text-sm mx-3">Value</label>
+        <label :for="'value_' + id" class="fieldset-legend text-sm mx-3">Value</label>
         <input
           v-if="variableType().type === 'number'"
           :type="variableType().type"
           :class="['mt-2 mx-2', variableType().class]"
           :step="variableForm.type === Type.DoubleType ? 'any' : '1'"
           v-model.number="variableForm.value"
-          name="value"
-          id="value"
+          :name="'value_' + id"
+          :id="'value_' + id"
         />
         <input
           v-else-if="variableType().type === 'color'"
           :type="variableType().type"
           :class="['mt-2 mx-2', variableType().class]"
           v-model="variableForm.value"
-          name="value"
-          id="value"
+          :name="'value_' + id"
+          :id="'value_' + id"
         />
         <input
           v-else-if="variableType().type === 'text'"
           :type="variableType().type"
           :class="['mt-2 mx-2', variableType().class]"
           v-model="variableForm.value"
-          name="value"
-          id="value"
+          :name="'value_' + id"
+          :id="'value_' + id"
         />
         <input
           v-else-if="variableType().type === 'checkbox'"
           :type="variableType().type"
           :class="['mt-2 mx-2', variableType().class]"
           v-model="variableForm.value"
-          name="value"
-          id="value"
+          :name="'value_' + id"
+          :id="'value_' + id"
         />
         <div class="modal-action w-full">
           <button type="submit" class="btn col-start-3 btn-primary">Confirm</button>

src/components/tasks-automations/CreateDevicePropertyConstantInstructionItem.vue

@@ -64,14 +64,14 @@
       <p class="card-title mx-2 mb-2">Device property</p>
       <form @submit.prevent="handleConfirm">
         <!-- Selection of a property -->
-        <label for="properties" class="fieldset-legend text-sm mx-3"
+        <label :for="'properties_' + id" class="fieldset-legend text-sm mx-3"
           >{{ device.name }} properties</label
         >
         <select
           v-model="variableForm.devicePropertyId"
           class="select mt-2 mx-2"
-          name="properties"
-          id="properties"
+          :name="'properties_' + id"
+          :id="'properties_' + id"
         >
           <option disabled>Pick a property</option>
           <option
@@ -84,13 +84,15 @@
           </option>
         </select>
         <!-- Change constant name -->
-        <label for="constant_name" class="fieldset-legend text-sm mx-3">Constant name</label>
+        <label :for="'constant_name_' + id" class="fieldset-legend text-sm mx-3"
+          >Constant name</label
+        >
         <input
           type="text"
           class="input mt-2 mx-2"
           v-model="variableForm.name"
-          name="constant_name"
-          id="constant_name"
+          :name="'constant_name_' + id"
+          :id="'constant_name_' + id"
         />
         <div class="modal-action w-full">
           <button type="submit" class="btn btn-primary">Confirm</button>

src/components/tasks-automations/DeviceActionInstructionItem.vue

@@ -30,12 +30,14 @@
       <p class="card-title mx-2 mb-2">Device action</p>
       <form @submit.prevent="handleConfirm">
         <!-- Selection of an action -->
-        <label for="actions" class="fieldset-legend text-sm mx-3">{{ device.name }} actions</label>
+        <label :for="'actions_' + id" class="fieldset-legend text-sm mx-3"
+          >{{ device.name }} actions</label
+        >
         <select
           v-model="variableForm.deviceActionId"
           class="select mt-2 mx-2"
-          name="actions"
-          id="actions"
+          :name="'actions_' + id"
+          :id="'actions_' + id"
         >
           <option disabled>Pick an action</option>
           <option
@@ -49,7 +51,7 @@
         </select>
         <!-- Change of the action input -->
         <label
-          for="input"
+          :for="'input_' + id"
           class="fieldset-legend text-sm mx-3"
           v-if="variableType().type !== 'null'"
           >Input</label
@@ -65,8 +67,8 @@
             :min="variableType().constraints.min"
             :max="variableType().constraints.max"
             v-model.number="variableForm.input"
-            name="input"
-            id="input"
+            :name="'input_' + id"
+            :id="'input_' + id"
           />
           <div class="flex justify-between px-2.5 mt-2 text-xs">
             <span>{{ variableType().constraints.min }}</span>
@@ -82,16 +84,16 @@
           :min="variableType().constraints.min"
           :max="variableType().constraints.max"
           :step="selectedAction?.inputTypeConstraints.type === Type.DoubleType ? 'any' : '1'"
-          name="input"
-          id="input"
+          :name="'input_' + id"
+          :id="'input_' + id"
         />
 
         <select
           v-else-if="variableType().type === 'select'"
           :class="['mt-2 mx-2', variableType().class]"
           v-model="variableForm.input"
-          name="input"
-          id="input"
+          :name="'input_' + id"
+          :id="'input_' + id"
         >
           <option
             v-for="value in variableType().constraints.values"
@@ -108,26 +110,26 @@
           :class="['mt-2 mx-2', variableType().class]"
           :type="variableType().type"
           v-model="variableForm.input"
-          name="input"
-          id="input"
+          :name="'input_' + id"
+          :id="'input_' + id"
         />
 
         <input
           v-else-if="variableType().type === 'color'"
           :class="['mt-2 mx-2', variableType().class]"
           :type="variableType().type"
           v-model="variableForm.input"
-          name="input"
-          id="input"
+          :name="'input_' + id"
+          :id="'input_' + id"
         />
 
         <input
           v-else-if="variableType().type === 'text'"
           :class="['mt-2 mx-2', variableType().class]"
           :type="variableType().type"
           v-model="variableForm.input"
-          name="input"
-          id="input"
+          :name="'input_' + id"
+          :id="'input_' + id"
         />
         <div class="modal-action w-full">
           <button type="submit" class="btn btn-primary">Confirm</button>

src/components/tasks-automations/IfInstructionItem.vue

@@ -9,46 +9,55 @@
     <p class="truncate font-bold col-span-4 text-center" v-if="!edit">
       {{ instruction.condition.rightConstantName }}
     </p>
+    <label v-if="edit" :for="'left_constant_' + id" class="hidden">Left constant</label>
     <input
       v-if="edit"
       type="text"
       class="input input-primary place-self-center h-7 text-center"
       placeholder="Constant name"
       :class="depth > 1 ? 'w-full col-span-3' : 'w-17 md:w-25 col-span-3'"
       v-model="instruction.condition.leftConstantName"
+      :name="'left_constant_' + id"
+      :id="'left_constant_' + id"
     />
     <label
       v-if="edit"
-      for="negate"
+      :for="'negate_' + id"
       class="label text-sm md:text-base text-base-content place-self-center"
       :class="depth > 1 ? 'row-start-2 col-start-2 mr-3' : 'col-span-2'"
     >
       Not
       <input
-        name="negate"
-        id="negate"
+        :name="'negate_' + id"
+        :id="'negate_' + id"
         type="checkbox"
         class="checkbox checkbox-primary checkbox-sm md:checkbox-md"
         v-model="instruction.condition.negate"
       />
     </label>
+    <label v-if="edit" :for="'operator' + id" class="hidden">Condition operator</label>
     <select
       v-if="edit"
       v-model="instruction.condition.conditionOperatorType"
       class="select select-primary w-17 md:w-20 place-self-center h-7"
       :class="depth > 1 ? 'row-start-2 col-start-3 ml-1' : 'col-span-3'"
+      :name="'operator' + id"
+      :id="'operator' + id"
     >
       <option v-for="operator in ConditionOperatorType" :key="operator" :value="operator">
         {{ getOperator(operator) }}
       </option>
     </select>
+    <label v-if="edit" :for="'right_constant_' + id" class="hidden">Right constant</label>
     <input
       v-if="edit"
       type="text"
       class="input input-primary place-self-center h-7 text-center"
       :class="depth > 1 ? 'row-start-3 col-start-2 col-span-3 w-full' : 'col-span-3 w-17 md:w-25'"
       placeholder="Constant name"
       v-model="instruction.condition.rightConstantName"
+      :name="'right_constant_' + id"
+      :id="'right_constant_' + id"
     />
   </InstructionLayout>
 

src/components/tasks-automations/InstructionItem.vue

@@ -33,18 +33,21 @@
   />
   <SendNotificationInstructionItem
     v-else-if="instruction.type === InstructionType.SendNotificationInstruction"
+    :id="id"
     :instruction="instruction"
     :colors="colors"
     :edit="edit"
   />
   <WaitInstructionItem
     v-else-if="instruction.type === InstructionType.WaitInstruction"
+    :id="id"
     :instruction="instruction"
     :colors="colors"
     :edit="edit"
   />
   <StartTaskInstructionItem
     v-else-if="instruction.type === InstructionType.StartTaskInstruction"
+    :id="id"
     :instruction="instruction"
     :colors="colors"
     :edit="edit"

src/components/tasks-automations/InstructionItems.vue

@@ -148,7 +148,13 @@ function addSendNotification() {
             onclick="devices_info.showModal()"
           ></button>
         </h3>
-        <select v-model="selectedGroup" class="select my-2 col-span-3 text-lg">
+        <label for="device_groups_filter" class="hidden">Device groups filter</label>
+        <select
+          v-model="selectedGroup"
+          class="select my-2 col-span-3 text-lg"
+          name="device_groups_filter"
+          id="device_groups_filter"
+        >
           <option selected :value="undefined">All devices</option>
           <option v-for="group in groups" :key="group.id" :value="group">{{ group.name }}</option>
         </select>

src/components/tasks-automations/SendNotificationInstructionItem.vue

@@ -2,10 +2,13 @@
   <InstructionLayout :colors="colors" :edit="edit" :instruction="props.instruction">
     <p class="truncate">Send notification to</p>
     <p v-if="!edit" class="font-bold text-center truncate">{{ selectedUser?.nickname }}</p>
+    <label :for="'email_' + id" class="hidden" v-if="edit">User</label>
     <select
       v-model="instruction.email"
-      v-else
+      v-if="edit"
       class="select text-center truncate h-7 select-primary"
+      :name="'email_' + id"
+      :id="'email_' + id"
     >
       <!-- Show all the users -->
       <option
@@ -18,13 +21,17 @@
       </option>
     </select>
 
-    <label class="label mb-2 text-secondary-content col-span-2">Message sent</label>
+    <label class="label mb-2 text-secondary-content col-span-2" :for="'message_' + id"
+      >Message sent</label
+    >
     <div class="row-start-3 col-span-full">
       <textarea
         placeholder="Message sent"
         class="w-full textarea textarea-primary border-primary!"
         :disabled="!edit"
         v-model="instruction.message"
+        :name="'message_' + id"
+        :id="'message_' + id"
       />
     </div>
   </InstructionLayout>
@@ -38,6 +45,7 @@ import type { User } from '@/model/users-management/User'
 import { useUsersStore } from '@/stores/users'
 
 const props = defineProps<{
+  id: string
   instruction: Instruction
   colors: string
   edit: boolean

src/components/tasks-automations/StartTaskInstructionItem.vue

@@ -2,10 +2,13 @@
   <InstructionLayout :colors="colors" :edit="edit" :instruction="props.instruction" v-if="tasks">
     <p>Start task</p>
     <p v-if="!edit" class="font-bold truncate text-center">{{ taskName }}</p>
+    <label :for="'task_' + id" v-if="edit" class="hidden">Task to start</label>
     <select
       v-model="(instruction.instruction as StartTaskInstruction).taskId"
-      v-else
+      v-if="edit"
       class="select h-7 text-center select-primary"
+      :name="'task_' + id"
+      :id="'task_' + id"
     >
       <option selected disabled>Choose a task</option>
       <option :value="task.id" v-for="task in tasks" :key="task.id">{{ task.name }}</option>
@@ -21,6 +24,7 @@ import { type Task } from '@/model/scripts/Script'
 import { useTasksStore } from '@/stores/tasks'
 
 const props = defineProps<{
+  id: string
   instruction: Instruction
   colors: string
   edit: boolean