Connecting the rooms page to make reservation page

cmd/web/routes.go

@@ -29,6 +29,7 @@ func routes(app *config.AppConfig) http.Handler {
 	mux.Post("/make-reservation", handlers.Repo.PostMakeReservation)
 	mux.Get("/reservation-summary", handlers.Repo.ReservationSummary)
 	mux.Get("/choose-room/{id}", handlers.Repo.ChooseRoom)
+	mux.Get("/book-room", handlers.Repo.BookRoom)
 
 	fileServer := http.FileServer(http.Dir("./static/"))
 	mux.Handle("/static/*", http.StripPrefix("/static", fileServer))

internal/handlers/handlers.go

@@ -301,6 +301,7 @@ func (m *Repository) AvailabilityJSON(w http.ResponseWriter, r *http.Request) {
 	w.Write(out)
 }
 
+// ChooseRoom displays list of available rooms
 func (m *Repository) ChooseRoom(w http.ResponseWriter, r *http.Request) {
 	roomID, err := strconv.Atoi(chi.URLParam(r, "id"))
 	if err != nil {
@@ -320,3 +321,36 @@ func (m *Repository) ChooseRoom(w http.ResponseWriter, r *http.Request) {
 
 	http.Redirect(w, r, "/make-reservation", http.StatusSeeOther)
 }
+
+// BookRoom takes URL parameters, builds a sessional variable, and takes user to make reservation
+func (m *Repository) BookRoom(w http.ResponseWriter, r *http.Request) {
+	roomID, _ := strconv.Atoi(r.URL.Query().Get("id"))
+	sd := r.URL.Query().Get("s")
+	ed := r.URL.Query().Get("e")
+
+	var res models.Reservation
+
+	layout := "2006-01-02"
+	startDate, err := time.Parse(layout, sd)
+	if err != nil {
+		helpers.ServerError(w, err)
+		return
+	}
+	endDate, err := time.Parse(layout, ed)
+	if err != nil {
+		helpers.ServerError(w, err)
+		return
+	}
+	room, err := m.DB.GetRoomById(roomID)
+	if err != nil {
+		helpers.ServerError(w, err)
+		return
+	}
+	res.RoomID = roomID
+	res.StartDate = startDate
+	res.EndDate = endDate
+	res.Room.RoomName = room.RoomName
+
+	m.App.Session.Put(r.Context(), "reservation", res)
+	http.Redirect(w, r, "/make-reservation", http.StatusSeeOther)
+}

templates/majors.page.tmpl

@@ -32,7 +32,7 @@
 <script>
     document.getElementById("check-availability").addEventListener('click', () => {
         let html = `
-                <form action="reservation.html" method="get" novalidate class="needs-validation">
+                <form id="check-availability-form" action="/availability-json" method="post" novalidate class="needs-validation">
                     <div id="reservation-dates-modal" class="row">
                         <div class="col mb-3">
                             <input disabled required type="text" class="form-control" name="start" id="start" placeholder="Arrival">
@@ -43,7 +43,62 @@
                     </div>
                 </form>
             `;
-        Prompt().custom({title: "Choose your dates", msg: html})
+        let attention = Prompt()
+        attention.custom({
+            title: "Choose your dates",
+            msg: html,
+            willOpen: () => {
+                const elem = document.getElementById('reservation-dates-modal')
+                const rp = new DateRangePicker(elem, {
+                    "format": "yyyy-mm-dd",
+                    showOnFocus: true,
+                    minDate: new Date(),
                 });
+            },
+            didOpen: () => {
+                return [
+                    document.getElementById('start').removeAttribute("disabled"),
+                    document.getElementById('end').removeAttribute("disabled"),
+                ]
+            },
+            callback: (result) => {
+                const formElem = document.getElementById("check-availability-form");
+                let formData = new FormData(formElem);
+                formData.append("csrf_token", "{{.CSRFToken}}");
+                formData.append("room_id", "2")
+
+                fetch('/availability-json', {
+                    method: "post",
+                    body: formData,
+                })
+                    .then(response => response.json())
+                    .then(data => {
+                        if (data.ok) {
+                            console.log("room is available")
+                            attention.custom({
+                                icon: "success",
+                                // TODO: use the default ok button instead
+                                msg: '<p>Room is available</p>' +
+                                     '<p><a href="/book-room?id=' +
+                                    data.room_id +
+                                    '&s=' +
+                                    data.start_date +
+                                    '&e=' +
+                                    data.end_date +
+                                    '" class="btn btn-primary">' +
+                                     'Book now!</a></p>',
+                                showConfirmButton: false,
+                            });
+                        } else {
+                            console.log("room is not available")
+                            attention.error({
+                                msg: "No availability"
+                            });
+                        }
+                    })
+            },
+        });
+    });
+
 </script>
 {{end}}