Moved project page js to a separate file

src/main/resources/static/js/project.js

@@ -0,0 +1,104 @@
+let calendar;
+let addModal;
+let editModal;
+window.onload = function () {
+  flatpickr("#startTimeInput", {enableTime: true})
+  flatpickr("#endTimeInput", {enableTime: true})
+  const startTimeEdit = flatpickr("#startTimeEdit", {enableTime: true})
+  const endTimeEdit = flatpickr("#endTimeEdit", {enableTime: true})
+  addModal = new bootstrap.Modal(document.getElementById('newEventModal'))
+  editModal = new bootstrap.Modal(document.getElementById('editEventModal'))
+  let calendarEl = document.getElementById('calendar')
+  // noinspection JSUnusedGlobalSymbols
+  calendar = new FullCalendar.Calendar(calendarEl, {
+    themeSystem: 'bootstrap',
+    initialView: 'dayGridMonth',
+    bootstrapFontAwesome: false,
+    fixedWeekCount: false,
+    editable: true,
+    nowIndicator: true,
+    aspectRatio: 2.2,
+    eventAdd(eventInfo) {
+      let myEvent = {
+        id: eventInfo.event.id,
+        title: eventInfo.event.title,
+        description: eventInfo.event.extendedProps.description,
+        start: eventInfo.event.start,
+        end: eventInfo.event.end
+      }
+      fetch(window.location.origin + window.location.pathname + "/addevent", {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json;charset=utf-8',
+          'X-CSRF-TOKEN': csrf_token
+        },
+        body: JSON.stringify(myEvent)
+      })
+    },
+    eventChange(eventInfo) {
+      let myEvent = {
+        id: eventInfo.event.id,
+        title: eventInfo.event.title,
+        description: eventInfo.event.extendedProps.description,
+        start: eventInfo.event.start,
+        end: eventInfo.event.end
+      }
+      fetch(window.location.origin + window.location.pathname + "/editevent", {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json;charset=utf-8',
+          'X-CSRF-TOKEN': csrf_token
+        },
+        body: JSON.stringify(myEvent)
+      })
+    },
+    eventRemove(eventInfo) {
+      let myEvent = {
+        id: eventInfo.event.id
+      }
+      fetch(window.location.origin + window.location.pathname + "/deleteevent", {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json;charset=utf-8',
+          'X-CSRF-TOKEN': csrf_token
+        },
+        body: JSON.stringify(myEvent)
+      })
+    },
+    eventClick(eventInfo) {
+      document.getElementById('idEdit').value = eventInfo.event.id
+      document.getElementById('titleEdit').value = eventInfo.event.title
+      document.getElementById('descriptionEdit').value = eventInfo.event.extendedProps.description
+      startTimeEdit.setDate(eventInfo.event.start)
+      endTimeEdit.setDate(eventInfo.event.end)
+      editModal.show()
+    },
+    events: window.location.origin + window.location.pathname + "/events"
+  });
+  calendar.render();
+  const options = {
+    valueNames: ['username'],
+  };
+  new List('user-list', options);
+};
+
+function addEvent() {
+  let myEvent = {
+    title: document.getElementById('titleInput').value,
+    description: document.getElementById('descriptionInput').value,
+    start: document.getElementById('startTimeInput').value,
+    end: document.getElementById('endTimeInput').value
+  }
+  calendar.addEvent(myEvent)
+}
+
+function editEvent() {
+  let myEvent = calendar.getEventById(document.getElementById('idEdit').value)
+  let title = document.getElementById('titleEdit').value
+  let description = document.getElementById('descriptionEdit').value
+  let start = document.getElementById('startTimeEdit').value
+  let end = document.getElementById('endTimeEdit').value
+  if (myEvent.title !== title) myEvent.setProp('title', title)
+  if (myEvent.description !== description) myEvent.setExtendedProp('description', description)
+  myEvent.setDates(start, end)
+}

src/main/resources/templates/project.html

@@ -10,111 +10,9 @@
     <link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet">
     <script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
     <script th:inline="javascript">
-      let calendar;
+      let csrf_token = /*[[${_csrf.token}]]*/ 'csrf_token'
-      let addModal;
-      let editModal;
-      window.onload = function () {
-        flatpickr("#startTimeInput", {enableTime: true})
-        flatpickr("#endTimeInput", {enableTime: true})
-        const startTimeEdit = flatpickr("#startTimeEdit", {enableTime: true})
-        const endTimeEdit = flatpickr("#endTimeEdit", {enableTime: true})
-        addModal = new bootstrap.Modal(document.getElementById('newEventModal'))
-        editModal = new bootstrap.Modal(document.getElementById('editEventModal'))
-        let calendarEl = document.getElementById('calendar')
-        // noinspection JSUnusedGlobalSymbols
-        calendar = new FullCalendar.Calendar(calendarEl, {
-          themeSystem: 'bootstrap',
-          initialView: 'dayGridMonth',
-          bootstrapFontAwesome: false,
-          fixedWeekCount: false,
-          editable: true,
-          nowIndicator: true,
-          aspectRatio: 2.2,
-          eventAdd(eventInfo) {
-            let myEvent = {
-              id: eventInfo.event.id,
-              title: eventInfo.event.title,
-              description: eventInfo.event.extendedProps.description,
-              start: eventInfo.event.start,
-              end: eventInfo.event.end
-            }
-            fetch(window.location.origin + window.location.pathname + "/addevent", {
-              method: 'POST',
-              headers: {
-                'Content-Type': 'application/json;charset=utf-8',
-                'X-CSRF-TOKEN': /*[[${_csrf.token}]]*/ 'csrf_token'
-              },
-              body: JSON.stringify(myEvent)
-            })
-          },
-          eventChange(eventInfo) {
-            let myEvent = {
-              id: eventInfo.event.id,
-              title: eventInfo.event.title,
-              description: eventInfo.event.extendedProps.description,
-              start: eventInfo.event.start,
-              end: eventInfo.event.end
-            }
-            fetch(window.location.origin + window.location.pathname + "/editevent", {
-              method: 'POST',
-              headers: {
-                'Content-Type': 'application/json;charset=utf-8',
-                'X-CSRF-TOKEN': /*[[${_csrf.token}]]*/ 'csrf_token'
-              },
-              body: JSON.stringify(myEvent)
-            })
-          },
-          eventRemove(eventInfo) {
-            let myEvent = {
-              id: eventInfo.event.id
-            }
-            fetch(window.location.origin + window.location.pathname + "/deleteevent", {
-              method: 'POST',
-              headers: {
-                'Content-Type': 'application/json;charset=utf-8',
-                'X-CSRF-TOKEN': /*[[${_csrf.token}]]*/ 'csrf_token'
-              },
-              body: JSON.stringify(myEvent)
-            })
-          },
-          eventClick(eventInfo) {
-            document.getElementById('idEdit').value = eventInfo.event.id
-            document.getElementById('titleEdit').value = eventInfo.event.title
-            document.getElementById('descriptionEdit').value = eventInfo.event.extendedProps.description
-            startTimeEdit.setDate(eventInfo.event.start)
-            endTimeEdit.setDate(eventInfo.event.end)
-            editModal.show()
-          },
-          events: window.location.origin + window.location.pathname + "/events"
-        });
-        calendar.render();
-        const options = {
-          valueNames: ['username'],
-        };
-        new List('user-list', options);
-      };
-
-      function addEvent() {
-        let myEvent = {
-          title: document.getElementById('titleInput').value,
-          description: document.getElementById('descriptionInput').value,
-          start: document.getElementById('startTimeInput').value,
-          end: document.getElementById('endTimeInput').value
-        }
-        calendar.addEvent(myEvent)
-      }
-
-      function editEvent() {
-        let myEvent = calendar.getEventById(document.getElementById('idEdit').value)
-        let title = document.getElementById('titleEdit').value
-        let description = document.getElementById('descriptionEdit').value
-        let start = document.getElementById('startTimeEdit').value
-        let end = document.getElementById('endTimeEdit').value
-        if (myEvent.title !== title) myEvent.setProp('title', title)
-        if (myEvent.description !== description) myEvent.setExtendedProp('description', description)
-        myEvent.setDates(start, end)
-      }
     </script>
+    <script type="text/javascript" th:src="@{/js/project.js}"></script>
     <title></title>
 </head>
 <body>