Finished new event edit

User input now gets trimmed before saving
Alf-Melmac · May 11, 2021 · da3c8b4 · da3c8b4
1 parent 7dd08e5
commit da3c8b4
Show file tree

Hide file tree

Showing 10 changed files with 93 additions and 66 deletions.
diff --git a/src/main/java/de/webalf/slotbot/controller/website/EventWebController.java b/src/main/java/de/webalf/slotbot/controller/website/EventWebController.java
@@ -97,7 +97,7 @@ public ModelAndView getEventEditHtml(@PathVariable(value = "id") long eventId) {
 		mav.addObject(EVENTS_URL_STRING, EVENTS_URL);
 		final Event event = eventService.findById(eventId);
 		mav.addObject("event", eventDetailsAssembler.toEditDto(event));
-		mav.addObject("eventTypesFiltered", eventTypeService.findAllFiltered(event.getEventType()));
+		mav.addObject("eventTypes", eventTypeService.findAll());
 		mav.addObject("eventFieldDefaultsUrl", linkTo(methodOn(EventController.class).getEventFieldDefaults(null)).toUri().toString());
 		mav.addObject("putEventEditableUrl", linkTo(methodOn(EventController.class).updateEventEditable(eventId, null, null)).toUri().toString());
 		mav.addObject("putEventUrl", linkTo(methodOn(EventController.class).updateEvent(eventId, null)).toUri().toString());

diff --git a/src/main/java/de/webalf/slotbot/service/EventTypeService.java b/src/main/java/de/webalf/slotbot/service/EventTypeService.java
@@ -4,7 +4,6 @@
 import de.webalf.slotbot.model.EventType;
 import de.webalf.slotbot.model.dtos.EventTypeDto;
 import de.webalf.slotbot.repository.EventTypeRepository;
-import de.webalf.slotbot.util.ListUtils;
 import lombok.NonNull;
 import lombok.RequiredArgsConstructor;
 import org.springframework.beans.factory.annotation.Autowired;
@@ -31,8 +30,4 @@ public EventType find(@NonNull EventTypeDto eventTypeDto) {
 	public List<EventType> findAll() {
 		return eventTypeRepository.findAll();
 	}
-
-	public List<EventType> findAllFiltered(EventType existing) {
-		return ListUtils.getListFiltered(findAll(), existing);
-	}
 }
diff --git a/src/main/java/de/webalf/slotbot/service/UpdateInterceptorService.java b/src/main/java/de/webalf/slotbot/service/UpdateInterceptorService.java
@@ -19,6 +19,8 @@ public class UpdateInterceptorService {
 	private final EventUpdateService eventUpdateService;
 	private final MessageHelper messageHelper;
 
+	//TODO EVENT FIELD
+
 	/**
 	 * Informs the discord bot about a deletion in an event
 	 *

diff --git a/src/main/resources/static/assets/js/colorpicker.js b/src/main/resources/static/assets/js/colorpicker.js
@@ -2,19 +2,25 @@ let colorpicker;
 
 $(function () {
     "use strict";
-    $('#colorPicker').colorpicker({
+    const $colorPicker = $('#colorPicker');
+    $colorPicker.colorpicker({
         format: 'hex',
         useAlpha: false,
-        color: Math.round(Math.random() * 0x1000000) //Random color as default
+        color: initColor($colorPicker)
     })
         .on('colorpickerCreate', function (event) {
             colorpicker = event.colorpicker;
         });
 });
 
+function initColor($colorPicker) {
+    const color = $colorPicker.find('[data-target="#colorPicker"]').val();
+    return color ? color : Math.round(Math.random() * 0x1000000); //Random color if no initial color is specified
+}
+
 function setColor(value) {
     if (!colorpicker) {
-        console.error('Colorpicker not initialized');
+        return;
     }
     colorpicker.setValue(value);
 }
diff --git a/src/main/resources/static/assets/js/eventEdit.js b/src/main/resources/static/assets/js/eventEdit.js
@@ -2,7 +2,7 @@ $(function () {
     "use strict";
 
     setIndeterminateIfRequired('reserveParticipating');
-    $('#eventTypeName').trigger('input');
+    $('#eventTypeName').trigger('input'); //Show default button if available
 
     $.fn.editable.defaults.mode = 'inline';
     $.fn.editable.defaults.url = putEventEditableUrl;
@@ -53,8 +53,6 @@ $(function () {
 
     addFields($('#addField'), savedEvent.details, true);
 
-    //TODO manually save event type
-
     //Event hidden button
     $('#eventHidden').on('click', function () {
         const $icon = $(this).find('.far');
@@ -77,11 +75,25 @@ $(function () {
     });
 
     //Checkboxes
-    $(':checkbox').on('change', function () {
+    $('#eventReserveParticipating').on('change', function () {
         const $this = $(this);
         putUpdate({[$this.data('dtokey')]: $this.is(':checked')}, showSavedToast);
     });
 
+    //Event type
+    $('#btnSaveType').on('click', function () {
+        if (validateRequiredAndUnique($(this))) {
+            return;
+        }
+
+        putUpdate({
+            eventType: {
+                name: $('#eventTypeName').val(),
+                color: $('#eventTypeColor').val()
+            }
+        }, showSavedToast);
+    });
+
     //Event field
     $('#btnSaveFields').on('click', function () {
         if (validateRequiredAndUnique($(this))) {

diff --git a/src/main/resources/static/assets/js/eventFields.js b/src/main/resources/static/assets/js/eventFields.js
@@ -81,9 +81,6 @@ function addFields($addField, fields, update = false) {
     for (const field of fields) {
         $addField.trigger('click');
         fillField($('.js-field').last(), field, update);
-        /*if (update) {
-            $('.js-field').last().data('fieldid', field.id);
-        }*/
     }
 }
 
@@ -128,14 +125,14 @@ function selectionInput(input, field) {
 }
 
 const text_ =
-    '<textarea id="{selectionId}" class="form-control one-row" type="text" placeholder="Information" required>{text}</textarea>';
+    '<textarea id="{selectionId}" class="form-control one-row js-field-text" type="text" placeholder="Information" required>{text}</textarea>';
 
 function text(field) {
     return setText(setSelectionId(text_, field.title, field.text), field.text);
 }
 
 const text_with_selection =
-    '<input id="{selectionId}" class="form-control custom-select" type="text" list="{selectionId}List" required value="{text}">' +
+    '<input id="{selectionId}" class="form-control custom-select js-field-text" type="text" list="{selectionId}List" required value="{text}">' +
     '<datalist id="{selectionId}List">' +
     '   {options}' +
     '</datalist>';
@@ -146,22 +143,22 @@ function textWithSelection(field) {
 
 const boolean_ =
     '<div class="custom-control custom-checkbox">' +
-    '   <input id="{selectionId}" class="custom-control-input" type="checkbox" required>' +
+    '   <input id="{selectionId}" class="custom-control-input js-field-text" type="checkbox" required {checked}>' +
     '   <label for="{selectionId}" class="custom-control-label"></label>' +
     '</div>';
 
 function boolean(field) {
-    return setSelectionId(boolean_, field.title);
+    return setSelectionId(boolean_.replaceAll('{checked}', field.text === true ? 'checked' : ''), field.title);
 }
 
 const selection_ =
-    '<select id="{selectionId}" class="form-control custom-select" required>' +
+    '<select id="{selectionId}" class="form-control custom-select js-field-text" required>' +
     '   <option selected disabled>Auswählen...</option>' +
     '   {options}' +
     '</select>';
 
 const selection_with_text =
-    '<select id="{selectionId}" class="form-control custom-select" required>' +
+    '<select id="{selectionId}" class="form-control custom-select  js-field-text" required>' +
     '   <option selected>{text}</option>' +
     '   {options}' +
     '</select>';

diff --git a/src/main/resources/static/assets/js/eventSave.js b/src/main/resources/static/assets/js/eventSave.js
@@ -63,7 +63,7 @@ function saveEvent($saveBtn) {
                 return;
             }
             if (value !== '') {
-                indexObjWithDotNotationKey(event, key, value);
+                indexObjWithDotNotationKey(event, key, value.trim());
             }
         });
 
@@ -103,9 +103,10 @@ function getDetails(update = false) {
     let details = [];
     $('#eventDetails .js-field').each(function (fieldIndex, fieldElement) {
         const $field = $(fieldElement);
+        const $fieldText = $field.find('.js-field-text');
         const field = {
             title: $field.find('.js-field-title').val(),
-            text: $field.find('.js-field-text').val()
+            text: $fieldText.is(':checkbox') ? $fieldText.is(':checked') : $fieldText.val()
         }
         if (update) {
             field.id = $field.data('fieldid');

diff --git a/src/main/resources/templates/eventEdit.html b/src/main/resources/templates/eventEdit.html
@@ -6,6 +6,9 @@
 	<link rel="stylesheet"
 	      href="https://cdn.jsdelivr.net/npm/tempusdominus-bootstrap-4@5.39.0/build/css/tempusdominus-bootstrap-4.min.css"
 	      integrity="sha256-VL9T9QfjO/EGCzuu5CtTWWzIksAkGDTs+fO51ALqMjg=" crossorigin="anonymous">
+	<link rel="stylesheet"
+	      href="https://cdn.jsdelivr.net/npm/bootstrap-colorpicker@3.3.0/dist/css/bootstrap-colorpicker.min.css"
+	      integrity="sha256-17wSnqdRI9sWIxEZ1cMPunDErwMYQ4ZPzCkSaxjSSoE=" crossorigin="anonymous">
 	<link rel="stylesheet" th:href="@{/assets/3rd/bootstrap3-editable/css/bootstrap-editable.css}">
 	<link rel="stylesheet" th:href="@{/assets/css/sizes.css}">
 	<link rel="stylesheet" th:href="@{/assets/css/positions.css}">
@@ -66,27 +69,28 @@ <h3>Allgemeine Informationen</h3>
 				</div>
 			</div>
 			<div class="form-row">
-				<div class="form-group col-md-8">
+				<div class="form-group col-md-6">
 					<label for="eventTypeName">Event-Typ-Name</label>
 					<input id="eventTypeName" class="form-control custom-select" type="text"
-					       list="eventTypes" data-dtokey="eventType.name" placeholder="Name" required
-					       th:value="${event.eventType.name}" disabled>
+					       list="eventTypes" placeholder="Name" required th:value="${event.eventType.name}">
 					<datalist id="eventTypes">
-						<option th:each="eventType : ${eventTypesFiltered}"
+						<option th:each="eventType : ${eventTypes}"
 						        th:text="${eventType.name}" th:data-color="${eventType.color}"></option>
 					</datalist>
 				</div>
 				<div class="form-group input-group col-md-4">
 					<label for="eventTypeColor">Event-Typ-Farbe</label>
 					<div id="colorPicker" class="input-group" data-target-input="nearest">
 						<input id="eventTypeColor" class="form-control js-color-picker" type="text"
-						       data-dtokey="eventType.color" data-target="#colorPicker" required
-						       th:value="${event.eventType.color}" disabled>
+						       data-target="#colorPicker" required th:value="${event.eventType.color}">
 						<div class="input-group-append" data-target="#colorPicker">
 							<div class="input-group-text colorpicker-input-addon"><i></i></div>
 						</div>
 					</div>
 				</div>
+				<div class="col-md-2 pt-4">
+					<div id="btnSaveType" class="btn btn-primary float-right">Typ Speichern</div>
+				</div>
 			</div>
 			<div class="form-group">
 				<label for="eventDescription">Beschreibung</label>
@@ -124,18 +128,13 @@ <h3>Allgemeine Informationen</h3>
 		<hr class="solid bg-light">
 
 		<div class="row">
-			<div class="col-md-6">
+			<div class="col-md-9">
 				<h3>Details</h3>
 			</div>
 			<div class="col-md-3">
-				<div id="addDefaultFields" class="btn btn-secondary float-right" type="button"
+				<div id="addDefaultFields" class="btn btn-secondary" type="button"
 				     data-toggle="modal" data-target="#addDefaultFieldsWarning"></div>
 			</div>
-			<div class="col-md-3">
-				<button id="btnSaveFields" class="btn btn-primary float-right">
-					Felder speichern
-				</button>
-			</div>
 		</div>
 		<form>
 			<div id="eventDetails" class="js-sortable"></div>
@@ -148,6 +147,12 @@ <h3>Details</h3>
 					<span id="fieldCounterCount">0</span>/23
 				</small>
 			</div>
+
+			<div class="form-row">
+				<div class="col-md-12">
+					<div id="btnSaveFields" class="btn btn-primary float-right">Felder speichern</div>
+				</div>
+			</div>
 		</form>
 
 		<hr class="solid bg-light">
@@ -219,15 +224,8 @@ <h3>Teilnahmeplatzaufzählung</h3>
 				Slotnummern müssen eindeutig sein. Bitte korrigieren.
 			</div>
 
-			<div class="row float-right">
-				<button id="btnSaveSlotlist" class="btn btn-primary" tabindex="0" data-toggle="popover"
-				        data-trigger="focus" data-content="Alle Pflichfelder ausfüllen!">
-					Slotliste speichern
-				</button>
-			</div>
-
-			<div class="form-row">
-				<div class="form-group col-md-12 mt-2">
+			<div class="form-row mt-2">
+				<div class="form-group col-md-6">
 					<div class="custom-control custom-checkbox">
 						<input id="eventReserveParticipating" class="custom-control-input" type="checkbox"
 						       data-dtokey="reserveParticipating" th:checked="${event.reserveParticipating}">
@@ -236,11 +234,20 @@ <h3>Teilnahmeplatzaufzählung</h3>
 						</label>
 					</div>
 				</div>
+				<div class="col-md-6">
+					<div id="btnSaveSlotlist" class="btn btn-primary float-right" tabindex="0" data-toggle="popover"
+					        data-trigger="focus" data-content="Alle Pflichtfelder ausfüllen!">
+						Slotliste speichern
+					</div>
+				</div>
 			</div>
 		</form>
 	</div>
 </section>
 
+<!--Add default fields warning-->
+<div th:replace="fragments/modals.html :: addDefaultFieldsWarning"></div>
+
 <footer th:insert="fragments/general.html :: footer"></footer>
 
 <div class="position-relative" aria-live="polite" aria-atomic="true">
@@ -273,6 +280,7 @@ <h3>Teilnahmeplatzaufzählung</h3>
 <script th:inline="javascript">
 	/*<![CDATA[*/
 	const eventsUrl = /*[[${eventsUrl}]]*/ '';
+	const eventFieldDefaultsUrl = /*[[${eventFieldDefaultsUrl}]]*/ '';
 	const putEventUrl = /*[[${putEventUrl}]]*/ '';
 	const putEventEditableUrl = /*[[${putEventEditableUrl}]]*/ '';
 	const eventDetailsUrl = /*[[${eventDetailsUrl}]]*/ '';

diff --git a/src/main/resources/templates/eventWizard.html b/src/main/resources/templates/eventWizard.html
@@ -200,26 +200,7 @@ <h3>Teilnahmeplatzaufzählung</h3>
 </section>
 
 <!--Add default fields warning-->
-<div id="addDefaultFieldsWarning" class="modal fade" tabindex="-1"
-     aria-labelledby="addDefaultFieldsWarningLabel" aria-hidden="true">
-	<div class="modal-dialog">
-		<div class="modal-content">
-			<div class="modal-header border border-warning">
-				<h5 id="addDefaultFieldsWarningLabel" class="modal-title">Warnung</h5>
-				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
-					<span aria-hidden="true">&times;</span>
-				</button>
-			</div>
-			<div class="modal-body">
-				Die Default Felder überschreiben alle bereits vorhanden Felder und Werte. Fortfahren?
-			</div>
-			<div class="modal-footer">
-				<button class="btn btn-secondary" type="button" data-dismiss="modal">Schließen</button>
-				<button id="addDefaultFieldsConfirmed" class="btn btn-warning" type="button">Felder setzen</button>
-			</div>
-		</div>
-	</div>
-</div>
+<div th:replace="fragments/modals.html :: addDefaultFieldsWarning"></div>
 
 <footer th:insert="fragments/general.html :: footer"></footer>
 

diff --git a/src/main/resources/templates/fragments/modals.html b/src/main/resources/templates/fragments/modals.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="de" xmlns:th="http://www.thymeleaf.org">
+<body>
+<div th:fragment="addDefaultFieldsWarning" id="addDefaultFieldsWarning" class="modal fade" tabindex="-1"
+     aria-labelledby="addDefaultFieldsWarningLabel" aria-hidden="true">
+	<div class="modal-dialog">
+		<div class="modal-content">
+			<div class="modal-header border border-warning">
+				<h5 id="addDefaultFieldsWarningLabel" class="modal-title">Warnung</h5>
+				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+					<span aria-hidden="true">&times;</span>
+				</button>
+			</div>
+			<div class="modal-body">
+				Die Default Felder überschreiben alle bereits vorhanden Felder und Werte. Fortfahren?
+			</div>
+			<div class="modal-footer">
+				<button class="btn btn-secondary" type="button" data-dismiss="modal">Schließen</button>
+				<button id="addDefaultFieldsConfirmed" class="btn btn-warning" type="button">Felder setzen</button>
+			</div>
+		</div>
+	</div>
+</div>
+</body>
+</html>