From a1f50aa923b34714193a0d97f1e87145dc42040f Mon Sep 17 00:00:00 2001
From: Corrado Stortini <corrado.stortini2@studio.unibo.it>
Date: Mon, 1 Sep 2025 19:36:26 +0200
Subject: [PATCH 1/2] chore: add labels with right names and ids to inputs

---
 .../ConstantInstructionItem.vue               | 33 ++++++++++--------
 ...eDevicePropertyConstantInstructionItem.vue | 14 ++++----
 .../DeviceActionInstructionItem.vue           | 34 ++++++++++---------
 .../tasks-automations/IfInstructionItem.vue   | 15 ++++++--
 .../tasks-automations/InstructionItem.vue     |  3 ++
 .../tasks-automations/InstructionItems.vue    |  8 ++++-
 .../SendNotificationInstructionItem.vue       | 12 +++++--
 .../StartTaskInstructionItem.vue              |  6 +++-
 .../tasks-automations/TriggerComponent.vue    | 19 ++++++++++-
 .../tasks-automations/WaitInstructionItem.vue | 12 ++++++-
 src/views/automations/AutomationView.vue      |  4 +--
 src/views/automations/EditAutomationView.vue  |  7 ++--
 src/views/tasks/EditTaskView.vue              | 12 +++++--
 src/views/tasks/TaskView.vue                  |  2 +-
 14 files changed, 129 insertions(+), 52 deletions(-)

diff --git a/src/components/tasks-automations/ConstantInstructionItem.vue b/src/components/tasks-automations/ConstantInstructionItem.vue
index fb5ffb1..66ae54e 100644
--- a/src/components/tasks-automations/ConstantInstructionItem.vue
+++ b/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>
diff --git a/src/components/tasks-automations/CreateDevicePropertyConstantInstructionItem.vue b/src/components/tasks-automations/CreateDevicePropertyConstantInstructionItem.vue
index 6e09334..7011f97 100644
--- a/src/components/tasks-automations/CreateDevicePropertyConstantInstructionItem.vue
+++ b/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>
diff --git a/src/components/tasks-automations/DeviceActionInstructionItem.vue b/src/components/tasks-automations/DeviceActionInstructionItem.vue
index da48a63..aeedcbb 100644
--- a/src/components/tasks-automations/DeviceActionInstructionItem.vue
+++ b/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,8 +110,8 @@
           :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
@@ -117,8 +119,8 @@
           :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
@@ -126,8 +128,8 @@
           :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>
diff --git a/src/components/tasks-automations/IfInstructionItem.vue b/src/components/tasks-automations/IfInstructionItem.vue
index eef30b7..6338c78 100644
--- a/src/components/tasks-automations/IfInstructionItem.vue
+++ b/src/components/tasks-automations/IfInstructionItem.vue
@@ -9,6 +9,7 @@
     <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"
@@ -16,32 +17,38 @@
       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"
@@ -49,6 +56,8 @@
       :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>
 
diff --git a/src/components/tasks-automations/InstructionItem.vue b/src/components/tasks-automations/InstructionItem.vue
index b6503f9..70d66e6 100644
--- a/src/components/tasks-automations/InstructionItem.vue
+++ b/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"
diff --git a/src/components/tasks-automations/InstructionItems.vue b/src/components/tasks-automations/InstructionItems.vue
index d547f79..b0672b9 100644
--- a/src/components/tasks-automations/InstructionItems.vue
+++ b/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>
diff --git a/src/components/tasks-automations/SendNotificationInstructionItem.vue b/src/components/tasks-automations/SendNotificationInstructionItem.vue
index a25a301..3f015cd 100644
--- a/src/components/tasks-automations/SendNotificationInstructionItem.vue
+++ b/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
diff --git a/src/components/tasks-automations/StartTaskInstructionItem.vue b/src/components/tasks-automations/StartTaskInstructionItem.vue
index 0566acb..dddb307 100644
--- a/src/components/tasks-automations/StartTaskInstructionItem.vue
+++ b/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
diff --git a/src/components/tasks-automations/TriggerComponent.vue b/src/components/tasks-automations/TriggerComponent.vue
index 8644f36..e148c4b 100644
--- a/src/components/tasks-automations/TriggerComponent.vue
+++ b/src/components/tasks-automations/TriggerComponent.vue
@@ -190,10 +190,13 @@ function groupsToString(deviceId: DeviceId) {
           {{ formatDate(trigger.start) }}
         </p>
         <div v-if="edit" class="justify-self-center col-span-4">
+          <label for="trigger_start" class="hidden">Starting date of period trigger</label>
           <input
             type="datetime-local"
             v-model="dateTime"
             class="input h-7 input-primary text-center"
+            name="trigger_start"
+            id="trigger_start"
           />
         </div>
 
@@ -202,12 +205,21 @@ function groupsToString(deviceId: DeviceId) {
           {{ formatDuration(trigger.periodSeconds) }}
         </p>
         <div v-else class="justify-self-center col-span-4">
+          <label for="trigger_number" class="hidden">Number of period trigger</label>
           <input
             type="number"
             v-model="time"
             class="input h-7 max-w-15 p-2 mr-2 input-primary text-center"
+            name="trigger_number"
+            id="trigger_number"
           />
-          <select v-model="timeUnit" class="select h-7 w-25 input-primary text-center">
+          <label for="trigger_time_unit" class="hidden">Time unit of period trigger</label>
+          <select
+            v-model="timeUnit"
+            class="select h-7 w-25 input-primary text-center"
+            name="trigger_time_unit"
+            id="trigger_time_unit"
+          >
             <option selected disabled>Time unit</option>
             <option value="seconds">Seconds</option>
             <option value="minutes">Minutes</option>
@@ -221,10 +233,15 @@ function groupsToString(deviceId: DeviceId) {
         <p class="col-span-full font-bold justify-self-center w-55 text-center">
           <DeviceNameAndGroup :id="selectedDevice.id" :device="selectedDevice" />
         </p>
+        <label for="trigger_selected_event" class="hidden"
+          >Select event for the device event trigger</label
+        >
         <select
           v-model="selectedEvent"
           class="col-span-full select h-7 w-50 select-primary justify-self-center text-center"
           v-if="edit"
+          name="trigger_selected_event"
+          id="trigger_selected_event"
         >
           <option selected disabled>Pick an event</option>
           <option
diff --git a/src/components/tasks-automations/WaitInstructionItem.vue b/src/components/tasks-automations/WaitInstructionItem.vue
index 32ef4df..b70750b 100644
--- a/src/components/tasks-automations/WaitInstructionItem.vue
+++ b/src/components/tasks-automations/WaitInstructionItem.vue
@@ -3,12 +3,21 @@
     <p>Wait</p>
     <p v-if="!edit" class="font-bold truncate text-center">{{ duration }}</p>
     <div v-else class="col-span-2 place-self-end">
+      <label :for="'period_' + id">Choose a number of period</label>
       <input
         type="number"
         v-model="time"
         class="input h-7 max-w-17 p-2 input-primary text-center mr-4"
+        :name="'period_' + id"
+        :id="'period_' + id"
       />
-      <select v-model="timeUnit" class="select h-7 w-28 select-primary text-center">
+      <label :for="'time_unit_' + id">Select a time unit</label>
+      <select
+        v-model="timeUnit"
+        class="select h-7 w-28 select-primary text-center"
+        :name="'time_unit_' + id"
+        :id="'time_unit_' + id"
+      >
         <option selected disabled>Time unit</option>
         <option value="seconds">Seconds</option>
         <option value="minutes">Minutes</option>
@@ -26,6 +35,7 @@ import { ref, watch } from 'vue'
 import { convertToSeconds, decomposeToLargestUnit, formatDuration } from './timeUtils'
 
 const props = defineProps<{
+  id: string
   instruction: Instruction
   colors: string
   edit: boolean
diff --git a/src/views/automations/AutomationView.vue b/src/views/automations/AutomationView.vue
index a9f5859..7cb4a1f 100644
--- a/src/views/automations/AutomationView.vue
+++ b/src/views/automations/AutomationView.vue
@@ -62,10 +62,10 @@ async function removeAutomation() {
       >
       <button class="btn btn-ghost text-error text-base" @click="removeAutomation()">Delete</button>
     </template>
-    <h1 class="text-xl">Trigger</h1>
+    <h2 class="text-xl">Trigger</h2>
     <Trigger :trigger="trigger" :edit="false" />
     <hr class="m-4" />
-    <h1 class="text-xl">Instructions</h1>
+    <h2 class="text-xl">Instructions</h2>
     <div
       v-if="instructionsStore.instructions.length === 0"
       class="flex text-center text-gray-500 justify-center items-center min-h-[50vh]"
diff --git a/src/views/automations/EditAutomationView.vue b/src/views/automations/EditAutomationView.vue
index 2468fec..4b9194c 100644
--- a/src/views/automations/EditAutomationView.vue
+++ b/src/views/automations/EditAutomationView.vue
@@ -114,18 +114,21 @@ function showToastMessage(msg: string) {
       </button>
     </template>
     <div class="mx-6">
+      <label for="name" class="hidden">Automation name</label>
       <input
         type="text"
         placeholder="Automation name"
         class="input w-full"
         v-model="automationName"
+        name="name"
+        id="name"
       />
     </div>
     <hr class="m-4" />
-    <h1 class="text-xl">Trigger</h1>
+    <h2 class="text-xl">Trigger</h2>
     <Trigger :trigger="trigger" @trigger="updateTrigger" :edit="true" />
     <hr class="m-4" />
-    <h1 class="text-xl">Instructions</h1>
+    <h2 class="text-xl">Instructions</h2>
     <div
       v-if="instructionsStore.instructions.length === 0"
       class="flex text-center text-gray-500 justify-center items-center min-h-[50vh]"
diff --git a/src/views/tasks/EditTaskView.vue b/src/views/tasks/EditTaskView.vue
index b7e6f9c..aaade43 100644
--- a/src/views/tasks/EditTaskView.vue
+++ b/src/views/tasks/EditTaskView.vue
@@ -96,10 +96,18 @@ function showToastMessage(msg: string) {
       <button type="button" class="btn btn-ghost text-base" @click="changeTask()">Save</button>
     </template>
     <div class="mx-6">
-      <input type="text" placeholder="Task name" class="input w-full" v-model="taskName" />
+      <label for="name" class="hidden">Task name</label>
+      <input
+        type="text"
+        placeholder="Task name"
+        class="input w-full"
+        v-model="taskName"
+        name="name"
+        id="name"
+      />
     </div>
     <hr class="m-4" />
-    <h1 class="text-xl">Instructions</h1>
+    <h2 class="text-xl">Instructions</h2>
     <div
       v-if="instructionsStore.instructions.length === 0"
       class="flex text-center text-gray-500 justify-center items-center min-h-[50vh]"
diff --git a/src/views/tasks/TaskView.vue b/src/views/tasks/TaskView.vue
index 4d7edf5..46b5def 100644
--- a/src/views/tasks/TaskView.vue
+++ b/src/views/tasks/TaskView.vue
@@ -61,7 +61,7 @@ async function removeTask() {
       >
       <button class="btn btn-ghost text-error text-base" @click="removeTask()">Delete</button>
     </template>
-    <h1 class="text-xl">Instructions</h1>
+    <h2 class="text-xl">Instructions</h2>
     <div
       v-if="instructionsStore.instructions.length === 0"
       class="flex text-center text-gray-500 justify-center items-center min-h-[50vh]"

From 10e139371d942522571a35f9842279f657b2b3b4 Mon Sep 17 00:00:00 2001
From: Corrado Stortini <corrado.stortini2@studio.unibo.it>
Date: Mon, 1 Sep 2025 19:41:10 +0200
Subject: [PATCH 2/2] fix: put hidden class to wait instructions labels

---
 src/components/tasks-automations/WaitInstructionItem.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/tasks-automations/WaitInstructionItem.vue b/src/components/tasks-automations/WaitInstructionItem.vue
index b70750b..69a1653 100644
--- a/src/components/tasks-automations/WaitInstructionItem.vue
+++ b/src/components/tasks-automations/WaitInstructionItem.vue
@@ -3,7 +3,7 @@
     <p>Wait</p>
     <p v-if="!edit" class="font-bold truncate text-center">{{ duration }}</p>
     <div v-else class="col-span-2 place-self-end">
-      <label :for="'period_' + id">Choose a number of period</label>
+      <label :for="'period_' + id" class="hidden">Choose a number of period</label>
       <input
         type="number"
         v-model="time"
@@ -11,7 +11,7 @@
         :name="'period_' + id"
         :id="'period_' + id"
       />
-      <label :for="'time_unit_' + id">Select a time unit</label>
+      <label :for="'time_unit_' + id" class="hidden">Select a time unit</label>
       <select
         v-model="timeUnit"
         class="select h-7 w-28 select-primary text-center"