Can now add, edit and delete events
This commit is contained in:
parent
d912144625
commit
50741a8953
@ -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) {
|
||||
TODO()
|
||||
@ResponseBody
|
||||
fun deleteEvent(@PathVariable id: Long, @RequestBody e: EventID) {
|
||||
eventRepository.deleteById(e.id)
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -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)
|
||||
@ -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) {
|
||||
console.log(addInfo.event)
|
||||
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) {
|
||||
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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user