first commit

2022-12-10 12:25:13 +01:00
commit 06cedbd790
36 changed files with 3550 additions and 0 deletions
@@ -0,0 +1,43 @@
+let logicHandler = new LogicHandler()
+let modalHandler = new LectureModalHandler()
+
+function renderLectureModal(id) {
+   id = typeof id == "undefined" ? "Create" : id
+
+   let lecture = id == "Create" ? getEmptyLecture() : logicHandler.getItem("lectures", id)
+
+   let lectureDateList = logicHandler.getAsDataListWithRange("lectureDates", "startDate", "endDate", lecture.lectureDates)
+   let lecturerList = logicHandler.getAsDataList("lecturers", "lastName", lecture.lecturers)
+   let studyClassList = logicHandler.getAsDataList("studyClasses", "name", [lecture.studyClass])
+
+   document.body.append(modalHandler.getLectureModal(lecture, lectureDateList, lecturerList, studyClassList))
+   document.body.append(modalHandler.getLectureModalButton(id))
+   let htmlButton = document.getElementById("lectureButton" + id)
+   htmlButton.click()
+   htmlButton.remove()
+}
+
+function cancelLectureModal(id) {
+   document.getElementById("lectureModal" + id).remove()
+}
+
+function saveLecture(id) {
+   logicHandler.saveItem("lecture", id)
+}
+
+function removeLecture(id) {
+   logicHandler.removeItem("lectures", id)
+   document.getElementById("row" + id).remove()
+}
+
+function getEmptyLecture() {
+   return {
+      id: "Create",
+      lectureName: "",
+      moduleName: "",
+      duration: "",
+      lectureDates: [],
+      lecturers: [],
+      studyClass: ""
+   }
+}
@@ -0,0 +1,72 @@
+class LectureModalHandler {
+
+   getLectureModal(lecture, lectureDateList, lecturerList, studyClassList) {
+      let heading = lecture.id == "Create" ? "Neue Vorlesung erstellen" : `Vorlesung #${lecture.id} bearbeiten`
+      let modal = `
+      <div class="modal modal-lg fade" id="lectureModal${lecture.id}" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="lectureModalLabel${lecture.id}" aria-hidden="true">
+         <div class="modal-dialog modal-dialog-scrollable">
+            <div class="modal-content">
+               <div class="modal-header">
+                  <h1 class="modal-title fs-5" id="lectureModalLabel${lecture.id}">${heading}</h1>
+                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Abbrechen" onclick="cancelLectureModal('${lecture.id}')"></button>
+               </div>
+               <div class="modal-body">
+                  <p class="error"><i class="bi bi-exclamation-circle"></i> Bitte alle Felder ausfüllen.</p>
+                  <form id="lectureForm${lecture.id}">
+                     <div class="mb-3">
+                        <label for="lectureNameInput" class="form-label">Vorlesungs-Name</label>
+                        <input type="text" class="form-control modalInput" id="lectureNameInput" name="lectureName" value="${lecture.lectureName}" >
+                     </div>
+                     <div class="mb-3">
+                        <label for="moduleNameInput" class="form-label">Modul-Name</label>
+                        <input type="text" class="form-control modalInput" id="moduleNameInput" name="moduleName" value="${lecture.moduleName}" >
+                     </div>
+                     <div class="mb-3">
+                        <label for="durationInput" class="form-label">Dauer</label>
+                        <input type="number" min="0" class="form-control modalInput" id="durationInput" name="duration" value="${lecture.duration}" >
+                     </div>
+                     <div class="mb-3">
+                        <label for="lectureDatesInput" class="form-label">Termine</label>
+                        <select  class="form-select modalInput" id="lectureDatesInput" name="lectureDates" multiple >
+                           ${lectureDateList}
+                        </select>
+                     </div>
+                     <div class="mb-3">
+                        <label for="lecturersInput" class="form-label">Dozenten</label>
+                        <select class="form-select modalInput" id="lecturersInput" name="lecturers" multiple >
+                           ${lecturerList}
+                        </select>
+                     </div>
+                     <div class="mb-3">
+                        <label for="studyClassInput" class="form-label">Jahrgang</label>
+                        <select class="form-select modalInput" id="studyClassInput" name="studyClass" >
+                           <option selected disabled hidden>Bitte wählen</option>
+                           ${studyClassList}
+                        </select>
+                     </div>
+                  </form>
+               </div>
+               <div class="modal-footer">
+                  <button type="button" class="btn btn-primary" data-bs-dismiss="modal" onclick="cancelLectureModal('${lecture.id}')">Abbrechen</button>
+                  <button type="button" class="btn btn-secondary" onclick="saveLecture('${lecture.id}')">Speichern</button>
+               </div>
+            </div>
+         </div>
+      </div>
+      `
+
+      let htmlModal = document.createElement("div")
+      htmlModal.innerHTML = modal
+      return htmlModal
+   }
+
+   getLectureModalButton(id) {
+      let button = `
+      <button type="button" data-bs-toggle="modal" data-bs-target="#lectureModal${id}" id="lectureButton${id}" style="display: none;"></button>
+      `
+
+      let htmlButton = document.createElement("div")
+      htmlButton.innerHTML = button
+      return htmlButton
+   }
+}
@@ -0,0 +1,55 @@
+window.addEventListener("load", function () {
+   let logicHandler = new LogicHandler()
+
+   let lectures = logicHandler.getItems("lectures")
+
+   if (lectures != null) {
+      lectures.forEach(lecture => {
+
+         let lecturers = logicHandler.getItems("lecturers").filter(lecturer => { return lecture.lecturers.indexOf(lecturer.id.toString()) > -1 })
+         lecturers.forEach((lecturer, idx) => lecturers[idx] = " " + lecturer.lastName)
+
+         let lectureDates = logicHandler.getItems("lectureDates").filter(lectureDate => { return lecture.lectureDates.indexOf(lectureDate.id.toString()) > -1 })
+         lectureDates.forEach((lectureDate, idx) => lectureDates[idx] = ` ${logicHandler.formatDateTime(lectureDate.startDate)} - ${logicHandler.formatDateTime(lectureDate.endDate)}`)
+
+         let studyClass = logicHandler.getItem("studyClasses", lecture.studyClass)
+         studyClass = typeof studyClass == "undefined" ? "" : studyClass.name
+
+         let content = `
+         <th scope="row">${lecture.id}</th>
+         <td>${lecture.lectureName}</td>
+         <td>${lecture.moduleName}</td>
+         <td>${lecture.duration}</td>
+         <td>${lectureDates}</td>
+         <td>${lecturers}</td>
+         <td>${studyClass}</td>
+         <td>
+            <div class="action-row">
+               <button class="action-button edit" onclick="renderLectureModal(${lecture.id})">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
+                     class="bi bi-pencil" viewBox="0 0 16 16">
+                     <path
+                        d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z" />
+                  </svg>
+               </button>
+               <button class="action-button delete" onclick="removeLecture(${lecture.id})">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
+                     class="bi bi-trash" viewBox="0 0 16 16">
+                     <path
+                        d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
+                     <path fill-rule="evenodd"
+                        d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
+                  </svg>
+               </button>
+            </div>
+         </td>
+         `
+         let row = document.createElement("tr")
+         row.id = "row" + lecture.id
+         row.innerHTML = content
+         document.getElementById("lecturesTable").appendChild(row)
+
+         document.getElementsByClassName("sidebar")[0].style.minHeight = `${document.body.offsetHeight - 66}px`
+      })
+   }
+})