Can now add, edit and delete events

src/main/kotlin/uk/co/neviyn/projectplanner/HtmlController.kt

@@ -143,6 +143,7 @@ class ProjectController @Autowired constructor(val projectRepository: ProjectRep
 
     @PostMapping("/addevent")
     @PreAuthorize("hasPermission(#id, 'Long', '')")
+    @ResponseBody
     fun addEventToProject(@PathVariable id: Long, @RequestBody e: NewEvent) {
         val project = projectRepository.findById(id).get()
         val event = Event(title = e.title, description = e.description, start = e.start, end = e.end, project = project)
@@ -163,8 +164,9 @@ class ProjectController @Autowired constructor(val projectRepository: ProjectRep
 
     @PostMapping("/deleteevent")
     @PreAuthorize("hasPermission(#id, 'Long', '')")
-    fun deleteEvent(@PathVariable id: Long) {
+    @ResponseBody
-        TODO()
+    fun deleteEvent(@PathVariable id: Long, @RequestBody e: EventID) {
+        eventRepository.deleteById(e.id)
     }
 
 

src/main/kotlin/uk/co/neviyn/projectplanner/Requests.kt

@@ -8,4 +8,6 @@ data class NewProject(val title: String)
 
 data class NewEvent(val title: String, val description: String, val start: Instant, val end: Instant)
 
-data class EditedEvent(val id: Long, val title: String, val description: String, val start: Instant, val end: Instant)
+data class EditedEvent(val id: Long, val title: String, val description: String, val start: Instant, val end: Instant)
+
+data class EventID(val id: Long)

src/main/resources/templates/project.html

@@ -7,11 +7,22 @@
     <link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.6.0/main.min.css" rel="stylesheet">
     <script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/fullcalendar@5.6.0/main.min.js"></script>
     <script crossorigin="anonymous" src="https://cdnjs.cloudflare.com/ajax/libs/list.js/2.3.1/list.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/flatpickr" crossorigin="anonymous"></script>
     <script th:inline="javascript">
+      let calendar;
+      let addModal;
+      let editModal;
       window.onload = function () {
-        let calendarEl = document.getElementById('calendar');
+        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
-        let calendar = new FullCalendar.Calendar(calendarEl, {
+        calendar = new FullCalendar.Calendar(calendarEl, {
           themeSystem: 'bootstrap',
           initialView: 'dayGridMonth',
           bootstrapFontAwesome: false,
@@ -19,11 +30,24 @@
           editable: true,
           nowIndicator: true,
           aspectRatio: 2.2,
-          eventAdd(addInfo) {
+          eventAdd(eventInfo) {
-            console.log(addInfo.event)
+            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) {
-            console.log(eventInfo)
             let myEvent = {
               id: eventInfo.event.id,
               title: eventInfo.event.title,
@@ -40,6 +64,27 @@
               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();
@@ -48,6 +93,25 @@
         };
         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>
     <title></title>
 </head>
@@ -110,17 +174,54 @@
                     <label for="descriptionInput">Event Description</label>
                 </div>
                 <div class="form-floating mb-3">
-                    <input class="form-control" id="startTimeInput" type="datetime-local">
+                    <input class="form-control flatpickr" id="startTimeInput" type="text">
                     <label for="startTimeInput">Start Time</label>
                 </div>
                 <div class="form-floating mb-3">
-                    <input class="form-control" id="endTimeInput" type="datetime-local">
+                    <input class="form-control flatpickr" id="endTimeInput" type="text">
                     <label for="endTimeInput">End Time</label>
                 </div>
             </div>
             <div class="modal-footer">
                 <button class="btn btn-secondary" data-bs-dismiss="modal" type="button">Close</button>
-                <button class="btn btn-primary" type="button">Add Event</button>
+                <button class="btn btn-primary" type="button" onclick="addEvent();addModal.hide()">Add Event</button>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- Modal for editing existing events -->
+<div class="modal" id="editEventModal" tabindex="-1">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Edit Event</h5>
+                <button aria-label="Close" class="btn-close" data-bs-dismiss="modal" type="button"></button>
+            </div>
+            <div class="modal-body">
+                <input id="idEdit" type="hidden"/>
+                <div class="form-floating mb-3">
+                    <input class="form-control" id="titleEdit" type="text">
+                    <label for="titleEdit">Event Title</label>
+                </div>
+                <div class="form-floating mb-3">
+                    <textarea class="form-control h-100" id="descriptionEdit" rows="3"></textarea>
+                    <label for="descriptionEdit">Event Description</label>
+                </div>
+                <div class="form-floating mb-3">
+                    <input class="form-control flatpickr" id="startTimeEdit" type="text">
+                    <label for="startTimeEdit">Start Time</label>
+                </div>
+                <div class="form-floating mb-3">
+                    <input class="form-control flatpickr" id="endTimeEdit" type="text">
+                    <label for="endTimeEdit">End Time</label>
+                </div>
+            </div>
+            <div class="modal-footer justify-content-between">
+                <button type="button" class="btn btn-danger" onclick="calendar.getEventById(document.getElementById('idEdit').value).remove();editModal.hide()">Delete Event</button>
+                <div>
+                <button class="btn btn-secondary" data-bs-dismiss="modal" type="button">Close</button>
+                <button class="btn btn-primary" type="button" onclick="editEvent();editModal.hide()">Save Changes</button>
+                </div>
             </div>
         </div>
     </div>