Finished event view-editing

src/main/java/com/example/calendar/controller/CalendarController.java

@@ -2,6 +2,7 @@ package com.example.calendar.controller;
 
 import java.time.LocalDate;
 import java.time.LocalTime;
+import java.time.format.DateTimeFormatter;
 import java.util.ArrayList;
 import java.util.Arrays;
 import java.util.List;
@@ -75,7 +76,7 @@ public class CalendarController {
 	
 	
 	@GetMapping({"/", "/calendar"})
-	public String calendarGet(Model models)
+	public String calendarGet(Model models, Event event)
 	{
 
 		User currUser = findCurrentUser();
@@ -105,7 +106,11 @@ public class CalendarController {
 			eventJson.addProperty("type", allEvents.get(i).getEventType().name());
 			eventArray.add(eventJson);
 		}
+		
+		List<EventType> allEventTypes = Arrays.asList(EventType.values());
+		
 		models.addAttribute("currentTime", LocalTime.now().toString());
+		models.addAttribute("eventTypes", allEventTypes);
 		models.addAttribute("currentDate", LocalDate.now().toString());
 		models.addAttribute("currentMonth", LocalDate.now().getMonth());
 		models.addAttribute("currentDay", LocalDate.now().getDayOfWeek());
@@ -116,6 +121,26 @@ public class CalendarController {
 	}
 	
 	
+	@PostMapping(value="/calendar", params="action=edit")
+	public String eventEdit(Model model, Event event, String oldDate){
+		User currUser = findCurrentUser();
+
+		String[] dateTimeParts = oldDate.split("T");
+		LocalDate localDate = LocalDate.parse(dateTimeParts[0]);
+		LocalTime localTime = LocalTime.parse(dateTimeParts[1]);
+		Calendar c1 = calendarRepo.findByName(currUser.getActiveCalendar());
+		Event e1 = eventRepo.findByCalendarAndStartDateAndStartTime(c1, localDate, localTime);
+		
+		e1.setName(event.getName());
+		e1.setDescription(event.getDescription());
+		e1.setStartDate(event.getStartDate());
+		e1.setStartTime(event.getStartTime());
+		e1.setEventType(event.getEventType());
+		eventRepo.save(e1);
+		return "redirect:/calendar";
+	}
+	
+	
 	@GetMapping(value="/add-new-calendar")
 	public String addNewCalendarGet(Calendar calendar)
 	{

src/main/java/com/example/calendar/repo/EventRepo.java

 package com.example.calendar.repo;
 
 import java.time.LocalDate;
+import java.time.LocalTime;
 import java.util.ArrayList;
 
 import org.springframework.data.repository.CrudRepository;
@@ -13,5 +14,5 @@ import com.example.calendar.models.Event;
 public interface EventRepo extends CrudRepository<Event, Integer> {
 	ArrayList<Event> findAllByCalendar(Calendar calendar);
 	ArrayList<Event> findAllByStartDate(LocalDate startDate);
-	Event findByCalendarAndStartDate(Calendar calendar, LocalDate startDate);
+	Event findByCalendarAndStartDateAndStartTime(Calendar calendar, LocalDate startDate, LocalTime startTime);
 }

src/main/resources/templates/calendar.html

@@ -117,22 +117,33 @@ a:hover {
 			  <!-- Modal content -->
 			  <div class="modal-content w-50">
 			    <span class="close">&times;</span>
-			    <form action="#" th:action="@{/view-calendars}" th:object="${model}" method="post">
-			    	Title: <input name="evTitle" type="text" id="evTitle" th:value="${evTitle}" readonly/>
+			    <form action="#" th:action="@{/calendar}" th:object="${event}" method="post">
+			    	Title: 
+			    	<span id="evTitle"></span>
+			    	<input name="name" type="hidden" id="newevTitle" th:field="*{name}"/>
 			    	<br>
-			    	Description:  <input name="evDescription" type="text"  th:value="${evDescription}" readonly/>
-			    	 <textarea name="evDescription" th:field="*{evDescription}" id="evDescription" placeholder="Description..." class="form-control" rows="5" readonly></textarea>
+			    	Description: 
+			    	 <textarea name="description" id="newevDescription" th:field="*{description}" placeholder="Description..." class="form-control" rows="5" readonly></textarea>
+      		
 			    	<br>
-			    	Type: <input name="evType" type="text" id="evType" th:value="${evType}" readonly/>
+			    	Type:
+			    	<span id="evType"></span>
+			    	<select id="newevType"  style="visibility:hidden" name="eventType" th:field="*{eventType}" class="form-control"></select>
 			    	<br>
-			    	Date: <input name="evDate" type="text" id="evDate" th:value="${evDate}" readonly/>
-			    	<br>
-			    	<input id="editbtn" class="btn btn-lg btn-success btn-block" type="button" value="Edit"/>
+			    	Date:
+			    	<span id="evDate"></span>
+			    	<input name="oldDate" type="hidden" id="oldDateSbm" th:value="${oldDate}"/>
+			    	<input name="startDate" id="newevDate" type="hidden"  th:field="*{startDate}" /> 
+			    	<input name ="startTime" id="newevTime" type="hidden" th:field="*{startTime}" />
+			    	<br><hr>
+			    	<input onclick="editEvent()" id="editbtn" class="btn btn-lg btn-success btn-block" type="button" value="Edit"/>
+			    	<button name="action" class="btn btn-lg btn-primary btn-block" id="savebtn" style="visibility:hidden" type="submit" value="edit">Save</button>
 			    	</form>
 			  </div>
 			</div>
 			
-			
+<input type="hidden" id="eventTypes" th:value="${eventTypes}"/>
+		
 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
@@ -165,10 +176,9 @@ $(document).ready(function() {
 					
 					// When the user clicks the button, open the modal 
 					el[0].onclick = function() {
-						console.log(info)
 					  modal.style.display = "block";
 					  document.getElementById("evTitle").textContent = info.title
-					  document.getElementById("evDescription").textContent = info.description
+					  document.getElementById("newevDescription").value = info.description
 					  document.getElementById("evType").textContent = info.type
 					  document.getElementById("evDate").textContent = info.start._i
 
@@ -190,13 +200,50 @@ $(document).ready(function() {
         
     });
     
-    
-    var btn = document.getElementById("editbtn");
-    btn.onclick = function() {
-    	  //open hidden fields and save/cancel button
-    	}
+    //loading event types
+    var y = document.getElementById("newevType");
+
+    var allEventTypesS = document.getElementById("eventTypes").value;
+    allEventTypes = allEventTypesS.replace(' ','').replace('[','').replace(']','').split(",");
+    for(let k = 0; k < allEventTypes.length;k++){
+    	option = document.createElement("option");
+    	option.text = allEventTypes[k];
+    	y.add(option);
+    }
     
 });
+
+function editEvent(){
+	var newTitle = document.getElementById("newevTitle")
+	var oldTitle = document.getElementById("evTitle")
+	newTitle.type = "text"
+	oldTitle.style.display = "none"
+	newTitle.value  = oldTitle.textContent 
+	
+	document.getElementById("newevDescription").removeAttribute('readonly');
+	
+	var newType = document.getElementById("newevType")
+	var oldType = document.getElementById("evType")
+	newType.style.visibility = "visible"
+	oldType.style.display = "none"
+	newType.value  = oldType.textContent
+	
+	
+	var newTime = document.getElementById("newevTime")
+	var newDate = document.getElementById("newevDate")
+	var oldDate = document.getElementById("evDate")
+	newTime.type = "time"
+	newDate.type = "date"
+	oldDate.style.display = "none"
+	var dateTime = oldDate.textContent .split("T");
+	newTime.value  = dateTime[1]
+	newDate.value = dateTime[0]
+	
+	document.getElementById("editbtn").style.visibility = "hidden"
+	document.getElementById("savebtn").style.visibility = "visible"
+	
+	document.getElementById("oldDateSbm").value = oldDate.textContent
+}
 </script>
 </body>
 </html>