build(dev): finished timeblocks rework

app/src/plugins/tm@modal/task/_components/_components/a-task-timeblocks.vue

@@ -392,7 +392,8 @@ export default {
       this._update(subtask);
     },
 
-    deleteTimeblockWithoutId(i) {
+    deleteTimeblockWithoutId(index) {
+      console.log(index);
       this.$emit('delete-timeblock');
     },
 

app/src/plugins/tm@modal/task/_components/employees/a-employee-select.vue

@@ -15,25 +15,27 @@
       @update:model-value="handleUpdateEmployee"
     />
 
-    <v-text-field
-      :model-value="modelValue.duration"
-      class="employee-select__duration-field"
-      variant="solo"
-      type="number"
-      label="Časový odhad"
-      :class="{ error: v$.duration.$error }"
-      :error-messages="v$.duration.$errors.map((e: any) => String(e.$message))"
-      append-inner-icon="mdi-clock-outline"
-      @update:model-value="handleUpdateDuration"
-    />
+    <div class="employee-select__duration-container">
+      <v-text-field
+        :model-value="modelValue.duration"
+        class="employee-select__duration-field"
+        variant="solo"
+        type="number"
+        label="Časový odhad"
+        :class="{ error: v$.duration.$error }"
+        :error-messages="v$.duration.$errors.map((e: any) => String(e.$message))"
+        append-inner-icon="mdi-clock-outline"
+        @update:model-value="handleUpdateDuration"
+      />
 
-    <button
-      class="employee-select__delete-button"
-      :disabled="!modelValue.id"
-      @click="handleClearEmployee"
-    >
-      <v-icon icon="mdi-close" />
-    </button>
+      <button
+        class="employee-select__delete-button"
+        :disabled="!modelValue.id"
+        @click="handleClearEmployee"
+      >
+        <v-icon icon="mdi-close" />
+      </button>
+    </div>
   </div>
 </template>
 
@@ -160,6 +162,16 @@ defineExpose({
   align-items: start
   gap: 10px
 
+  @media (max-width: 768px)
+    flex-direction: column
+    gap: 5px
+
+  &__duration-container
+    display: flex
+    justify-content: space-between
+    align-items: start
+    gap: 10px
+
   &__select-field
     width: 100%
 

app/src/plugins/tm@modal/task/_components/employees/a-employee-timeblock-header.vue

@@ -73,6 +73,17 @@
         hide-details
         @input="$emit('updateEndTime', $event)"
       />
+
+      <div class="timeblock__time-overview">
+        <p>
+          Naplánovaný čas:
+          <span>{{ plannedTime }}h</span>
+        </p>
+        <p>
+          Volný čas:
+          <span>{{ freeTime }}h</span>
+        </p>
+      </div>
     </div>
     <div
       v-if="!isTimeRangeValid || endTimeErrorMessage"
@@ -115,10 +126,14 @@ interface Props {
   hasStartTimeError: boolean;
   hasEndTimeError: boolean;
   endTimeErrorMessage?: string;
+  plannedTime: string | number;
+  freeTime: string | number;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   endTimeErrorMessage: '',
+  plannedTime: '',
+  freeTime: '',
 });
 
 defineEmits<{
@@ -231,6 +246,20 @@ const isCurrentDay = computed(() => {
     width: 140px !important
     flex-grow: 0
 
+.timeblock__time-overview
+  height: 44px
+  display: flex
+  flex-direction: column
+  justify-content: space-between
+
+  p
+    font-size: 14px
+    font-weight: 400
+
+    span
+      font-weight: 500
+      color: #7f39fb
+
 .error-input
   ::v-deep input
     border-bottom: 2px solid #ff5252 !important

app/src/plugins/tm@modal/task/_components/employees/a-employee-timeblock-timeline.vue

@@ -180,13 +180,13 @@ const getTimePosition = (date: Date): number => {
   const hour = date.getHours();
   const minute = date.getMinutes();
   const totalHours = hour + minute / 60;
-  return (totalHours - props.startHour) * props.hourWidth;
+  return (totalHours - props.startHour) * props.hourWidth + 1;
 };
 
 const getTimeWidth = (start: Date, end: Date): number => {
   const startHour = start.getHours() + start.getMinutes() / 60;
   const endHour = end.getHours() + end.getMinutes() / 60;
-  return (endHour - startHour) * props.hourWidth;
+  return (endHour - startHour) * props.hourWidth - 2;
 };
 
 // Expose refs for parent component
@@ -252,6 +252,7 @@ defineExpose({
   top: 5px
   height: 50px
   background: #7f39fb
+  border: 1px solid #6a1bf7
   opacity: 0.6
   border-radius: 2px
   z-index: 2
@@ -299,4 +300,3 @@ defineExpose({
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3)
   pointer-events: none
 </style>
-

app/src/plugins/tm@modal/task/_components/employees/a-employee-timeblock.vue

@@ -11,6 +11,8 @@
       :has-start-time-error="hasStartTimeError"
       :has-end-time-error="hasEndTimeError"
       :end-time-error-message="endTimeErrorMessage"
+      :planned-time="_scheduledTime"
+      :free-time="_freeTime"
       @previous-day="previousDay"
       @next-day="nextDay"
       @update-date="updateDate"