add insert data

app/src/components/TimeInputComponent.vue

@@ -101,7 +101,7 @@ const onIncrementClick = (type) => {
         interval.value = setInterval(() => {
             incrementValue(type);
         }, 100);
-    }, 1000);
+    }, 500);
 
 }
 const onDecrementClick = (type) => {
@@ -110,7 +110,7 @@ const onDecrementClick = (type) => {
         interval.value = setInterval(() => {
             decrementValue(type);
         }, 100);
-    }, 1000);
+    }, 500);
 
 }
 

app/src/stores/WorkHoursStore.js

@@ -48,6 +48,7 @@ export const useWorkHoursStore = defineStore('workHours', () => {
   watch(
     () => workHours.value.map((entry, index) => ({
       index,
+      date: entry.date,
       enterHour: entry.enterHour,
       enterMinute: entry.enterMinute,
       leaveHour: entry.leaveHour,
@@ -63,6 +64,7 @@ export const useWorkHoursStore = defineStore('workHours', () => {
 
         // Sprawdzamy, czy cokolwiek się zmieniło
         else if (
+          newEntry.date !== oldEntry.date ||
           newEntry.enterHour !== oldEntry.enterHour ||
           newEntry.enterMinute !== oldEntry.enterMinute ||
           newEntry.leaveHour !== oldEntry.leaveHour ||
@@ -85,14 +87,14 @@ export const useWorkHoursStore = defineStore('workHours', () => {
   };
 
   const getWeekday = (index) => {
-    const dayNames = ['NIE', 'PON', 'WTO', 'śRO', 'CZW', 'PIĄ', 'SOB'];
+    const dayNames = ['NIE', 'PON', 'WTO', 'ŚRO', 'CZW', 'PIĄ', 'SOB'];
     const weekday = workHours.value[index].date.getDay();
     return [weekday, dayNames[weekday]];
-  }
+  };
 
   const clear = () => {
     workHours.value = [];
-  }
+  };
 
   const parseWorkHours = (userInput) => {
     const lines = userInput.split('\n').map(line => line.trim()).filter(line => line);
@@ -120,14 +122,36 @@ export const useWorkHoursStore = defineStore('workHours', () => {
         });
       }
     }
-
+    result.sort((a, b) => a.date - b.date);
     workHours.value = result;
-  }
+  };
+
+  const addWorkDay = (date) => {
+    const newEntry = {
+      date: date,
+      enterHour: 7,
+      enterMinute: 0,
+      leaveHour: 15,
+      leaveMinute: 15,
+      workHours: null,
+      workMinutes: null
+    };
+
+    const index = workHours.value.findIndex((entry) => entry.date > newEntry.date);
+
+    if (index === -1) {
+      workHours.value.push(newEntry);
+    } else {
+      workHours.value.splice(index, 0, newEntry);
+    }
+  };
+
   return {
     workHours,
     getDate,
     getWeekday,
     clear,
-    parseWorkHours
+    parseWorkHours,
+    addWorkDay,
   }
 })

app/src/views/EditView.vue

@@ -8,7 +8,8 @@
                     data-bs-target="#inputModal">WCZYTAJ</button>
                 <button type="button" class="btn btn-outline-primary mx-2" style="width: 150px;" data-bs-toggle="modal"
                     data-bs-target="#clearAllModal">USUŃ</button>
-                <button type="button" class="btn btn-outline-primary mx-2" style="width: 150px;">DODAJ</button>
+                <button type="button" class="btn btn-outline-primary mx-2" style="width: 150px;" data-bs-toggle="modal"
+                    data-bs-target="#addModal">DODAJ</button>
             </div>
 
             <!-- Toggle -->
@@ -108,6 +109,29 @@
         </div>
     </div>
 
+    <!-- modal add entry -->
+    <div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="addModalLabel" aria-hidden="true">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h1 class="modal-title fs-5" id="addModalLabel">Wklej swój tekst</h1>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+
+                    <label for="inputDate" class="form-label">wybierz date:</label>
+                    <input type="date" id="inputDate" class="form-control" v-model="newDate">
+
+
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Zamknij</button>
+                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal" :disabled="!newDate"
+                        @click="insertWorkDay">Dodaj dzień</button>
+                </div>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script setup>
@@ -118,13 +142,20 @@ import { computed, watch, ref, onMounted } from "vue";
 const rawText = ref("");
 const storeWorkHours = useWorkHoursStore();
 const showButtons = ref(false);
+const newDate = ref(null);
 
 onMounted(() => {
-    const modalElement = document.getElementById('inputModal');
+    const inputModal = document.getElementById('inputModal');
+    const addModal = document.getElementById('addModal');
 
-    if (modalElement) {
+    if (inputModal) {
-        modalElement.addEventListener('hidden.bs.modal', () => {
+        inputModal.addEventListener('hidden.bs.modal', () => {
-            clearInput();
+            rawText.value = '';
+        });
+    }
+    if (addModal) {
+        addModal.addEventListener('hidden.bs.modal', () => {
+            newDate.value = null;
         });
     }
 });
@@ -147,12 +178,13 @@ const getClassWeekday = (index) => {
 }
 
 const processInputText = () => {
-    // console.log(rawText.value);
     storeWorkHours.parseWorkHours(rawText.value);
-}
+};
 
-const clearInput = () => {
+const insertWorkDay = () => {
-    rawText.value = '';
+    const date = new Date(newDate.value);
-}
+    storeWorkHours.addWorkDay(date);
+    newDate.value = null;
+};
 
 </script>