Merge branch 'view-edit-events' into 'master'

View edit events

See merge request s7_spruge_k/calendar!42

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();
@@ -101,9 +102,15 @@ public class CalendarController {
 			JsonObject eventJson = new JsonObject();
 			eventJson.addProperty("title", allEvents.get(i).getName());
 			eventJson.addProperty("start", allEvents.get(i).getStartDate() + "T" + allEvents.get(i).getStartTime());
+			eventJson.addProperty("description", allEvents.get(i).getDescription());
+			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());
@@ -114,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,4 +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 findByCalendarAndStartDateAndStartTime(Calendar calendar, LocalDate startDate, LocalTime startTime);
 }

src/main/resources/templates/calendar.html

@@ -58,6 +58,45 @@ a:hover {
     background-image: none;
     color: white;
 }
+
+/* The Modal (background) */
+.modal {
+  display: none; /* Hidden by default */
+  position: fixed; /* Stay in place */
+  z-index: 1; /* Sit on top */
+  padding-top: 100px; /* Location of the box */
+  left: 0;
+  top: 0;
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  overflow: auto; /* Enable scroll if needed */
+  background-color: rgb(0,0,0); /* Fallback color */
+  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+}
+
+/* Modal Content */
+.modal-content {
+  background-color: #fefefe;
+  margin: auto;
+  padding: 20px;
+  border: 1px solid #888;
+  width: 80%;
+}
+
+/* The Close Button */
+.close {
+  color: #aaaaaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+  color: #000;
+  text-decoration: none;
+  cursor: pointer;
+}
 </style>
 
 <br/>
@@ -73,6 +112,38 @@ a:hover {
 <input type="hidden" id="events" th:value="${allEvents}"/>
 
 
+<div id="myModal" class="modal">
+
+			  <!-- Modal content -->
+			  <div class="modal-content w-50">
+			    <span class="close">&times;</span>
+			    <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: 
+			    	 <textarea name="description" id="newevDescription" th:field="*{description}" placeholder="Description..." class="form-control" rows="5" readonly></textarea>
+      		
+			    	<br>
+			    	Type:
+			    	<span id="evType"></span>
+			    	<select id="newevType"  style="visibility:hidden" name="eventType" th:field="*{eventType}" class="form-control"></select>
+			    	<br>
+			    	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>
@@ -94,15 +165,86 @@ $(document).ready(function() {
         navLinks: true, // can click day/week names to navigate views
         editable: false,
         eventLimit: true, // allow "more" link when too many events
-        timeFormat: 'H:mm',
-
-
-        events: all
+        timeFormat: 'H(:mm)',
+        events: all,
+        eventRender: function(info, el, view) {
+        		
+        		var modal = document.getElementById("myModal");
+					
+					// Get the <span> element that closes the modal
+					var span = document.getElementsByClassName("close")[0];
+					
+					// When the user clicks the button, open the modal 
+					el[0].onclick = function() {
+					  modal.style.display = "block";
+					  document.getElementById("evTitle").textContent = info.title
+					  document.getElementById("newevDescription").value = info.description
+					  document.getElementById("evType").textContent = info.type
+					  document.getElementById("evDate").textContent = info.start._i
+
+					}
+					
+					// When the user clicks on <span> (x), close the modal
+					span.onclick = function() {
+					  modal.style.display = "none";
+					}
+					
+					// When the user clicks anywhere outside of the modal, close it
+					window.onclick = function(event) {
+					  if (event.target == modal) {
+					    modal.style.display = "none";
+					  }
+					}
+
+          	},
+        
     });
     
+    //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);
+    }
+    
 });
-</script>
 
+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>