ui/ux improvements on time page

2025-10-04 19:16:21 +02:00
parent c093127a8c
commit 566776910a
11 changed files with 526 additions and 485 deletions
--- a/Backend/static/script.js
+++ b/Backend/static/script.js
@@ -1,14 +1,67 @@
-function editDay(element, event, formId) {
-  var form = element.closest(".grid-sub").querySelector(".all-booking-component > form");
-  form.classList.toggle("edit");
-  element.classList.toggle("edit");
-  if (element.classList.contains("edit")) {
-    event.preventDefault();
-    form.querySelectorAll("input, select").forEach((input) => {
-      input.disabled = false;
+function clearEditState() {
+  for (e of document.querySelectorAll(".edit")) {
+    e.classList.remove("edit");
+  }
+  toggleAbsenceEdit(false);
+}
+
+function editWorkday(element, event, id, isWorkDay) {
+  console.log("editWorkday called", isWorkDay);
+  event.preventDefault();
+  var form = document.getElementById(id);
+  if (form == null) {
+    form = element
+      .closest(".grid-sub")
+      .querySelector(".all-booking-component > form");
+  }
+
+  clearEditState();
+  element.closest(".grid-sub").classList.add("edit");
+  toggleAbsenceEdit(!isWorkDay);
+
+  if (isWorkDay) {
+    element.classList.add("edit");
+    if (element.classList.contains("edit")) {
+      form.querySelectorAll("input, select").forEach((input) => {
+        input.disabled = false;
+      });
+    } else {
+      form.submit();
+    }
+  } else {
+    var absenceForm = document.getElementById("absence_form");
+
+    if (id != 0) {
+      syncFields(form, absenceForm, [
+        "date_from",
+        "date_to",
+        "aw_type",
+        "aw_id",
+      ]);
+    } else {
+      absenceForm.querySelector("[name=date_from]").value = form.id.replace(
+        "time-",
+        "",
+      );
+      absenceForm.querySelector("[name=date_to]").value = form.id.replace(
+        "time-",
+        "",
+      );
+    }
+  }
+}
+
+function toggleAbsenceEdit(state) {
+  var form = document.getElementById("absence_form");
+  if (state) {
+    form.classList.remove("hidden");
+    form.scrollIntoView({
+      behavior: "smooth",
+      block: "start",
+      inline: "nearest",
    });
  } else {
-    form.submit();
+    form.classList.add("hidden");
  }
 }

@@ -21,31 +74,6 @@ function syncFields(from, to, fieldsToSync) {
  });
 }

-function editAbsence(element, event, absenceId) {
-  event.preventDefault();
-  var form = document.getElementById("absence_form");
-
-  if (absenceId != 0) {
-    var dataForm = document.getElementById(absenceId);
-    syncFields(dataForm, form, ["date_from", "date_to", "aw_type", "aw_id"]);
-  } else {
-    var dataForm = element.closest(".grid-sub").querySelector(".all-booking-component > form");
-    form.querySelector("[name=date_from]").value = dataForm.id.replace("time-", "");
-    form.querySelector("[name=date_to]").value = dataForm.id.replace("time-", "");
-  }
-  form.classList.remove("hidden");
-  form.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" });
-}
-
-function editAbwesenheit(element, event) {
-  var newBookingComponent = element.closest(".grid-sub").querySelector(".new-booking-component");
-  if (element.value == 0) {
-    newBookingComponent.style.display = "";
-  } else {
-    newBookingComponent.style.display = "none";
-  }
-}
-
 function navigateWeek(element, event, direction) {
  var dateInput = element.closest("form").querySelector("input[type=date]");
  var date = dateInput.valueAsDate;