refactor home with htmx

mpoegel · Apr 27, 2024 · ef7491f · ef7491f
1 parent 833a865
commit ef7491f
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 42 deletions.
diff --git a/pkg/pizza/server.go b/pkg/pizza/server.go
@@ -111,7 +111,7 @@ func NewServer(config Config, metricsReg MetricsRegistry) (*Server, error) {
 	}
 
 	r.HandleFunc("/", s.HandleIndex)
-	r.HandleFunc("/submit", s.HandleSubmit)
+	r.HandleFunc("/rsvp", s.HandleRSVP)
 	r.HandleFunc("/wrapped", s.HandledWrapped)
 	r.PathPrefix("/static/").Handler(http.StripPrefix("/static/", http.FileServer(http.Dir(config.StaticDir))))
 	r.HandleFunc("/login", s.HandleLogin)
@@ -236,29 +236,19 @@ func (s *Server) HandleIndex(w http.ResponseWriter, r *http.Request) {
 	}
 }
 
-func (s *Server) HandleSubmit(w http.ResponseWriter, r *http.Request) {
-	s.submitPostMetric.Increment()
-
+func (s *Server) HandleRSVP(w http.ResponseWriter, r *http.Request) {
 	claims, ok := s.authenticateRequest(r)
 	if !ok {
-		http.Redirect(w, r, "/login", http.StatusFound)
+		template.Must(template.ParseFiles(path.Join(s.config.StaticDir, "html/snippets/rsvp_fail.html"))).Execute(w, nil)
 		return
 	}
 
-	plate, err := template.ParseFiles(path.Join(s.config.StaticDir, "html/submit.html"))
-	if err != nil {
-		Log.Error("template submit failure", zap.Error(err))
-		s.Handle500(w, r)
-		return
-	}
-	data := PageData{}
-
 	Log.Debug("incoming submit request", zap.Stringer("url", r.URL))
 
 	form := r.URL.Query()
 	dates, ok := form["date"]
 	if !ok {
-		s.Handle4xx(w, r)
+		template.Must(template.ParseFiles(path.Join(s.config.StaticDir, "html/snippets/rsvp_fail.html"))).Execute(w, nil)
 		return
 	}
 	email := strings.ToLower(claims.Email)
@@ -285,7 +275,7 @@ func (s *Server) HandleSubmit(w http.ResponseWriter, r *http.Request) {
 		num, err := strconv.ParseInt(d, 10, 64)
 		if err != nil {
 			Log.Error("failed parsing date int from rsvp form", zap.String("date", d))
-			s.Handle500(w, r)
+			template.Must(template.ParseFiles(path.Join(s.config.StaticDir, "html/snippets/rsvp_fail.html"))).Execute(w, nil)
 			return
 		}
 		pendingDates[i] = time.Unix(num, 0)
@@ -297,24 +287,20 @@ func (s *Server) HandleSubmit(w http.ResponseWriter, r *http.Request) {
 		if err != nil && err == ErrEventNotFound {
 			if err = s.calendar.CreateEvent(newEvent); err != nil {
 				Log.Error("could not create event", zap.String("eventID", d), zap.String("email", email))
-				s.Handle500(w, r)
+				template.Must(template.ParseFiles(path.Join(s.config.StaticDir, "html/snippets/rsvp_error.html"))).Execute(w, nil)
 				return
 			}
 			err = s.calendar.InviteToEvent(d, email, friendName)
 		}
 		if err != nil {
 			Log.Error("invite failed", zap.String("eventID", d), zap.String("email", email))
-			s.Handle500(w, r)
+			template.Must(template.ParseFiles(path.Join(s.config.StaticDir, "html/snippets/rsvp_error.html"))).Execute(w, nil)
 			return
 		}
 		Log.Debug("event updated", zap.String("eventID", d), zap.String("email", email), zap.String("name", friendName))
 	}
 
-	if err = plate.Execute(w, data); err != nil {
-		Log.Error("template execution failure", zap.Error(err))
-		s.Handle500(w, r)
-		return
-	}
+	template.Must(template.ParseFiles(path.Join(s.config.StaticDir, "html/snippets/rsvp_success.html"))).Execute(w, nil)
 }
 
 func (s *Server) Handle4xx(w http.ResponseWriter, r *http.Request) {

diff --git a/static/css/index.css b/static/css/index.css
@@ -24,7 +24,7 @@ a {
 }
 
 .guestLevel {
-    text-align: right;
+    text-align: left;
     width: 50%;
 }
 
@@ -39,18 +39,32 @@ a {
     margin: 1px;
 }
 
+.friday-time {
+    padding-top: 20px;
+    padding-bottom: 5px;
+}
+
+.btn {
+    color: black;
+}
+
+.btn-rsvp {
+    display: flex;
+    justify-content: flex-end;
+}
+
 @media (max-width: 600px) {
     body {
         font-size: 1.5em;
         width: 100%;
     }
 
-    #submit {
-        margin-top: 50px;
-        width: 150px;
+    #friday-table {
+        width: 100%;
     }
 
-    #submit input {
+    .btn-rsvp .btn {
+        margin-top: 50px;
         width: 150px;
         font-size: 1.1em;
     }
@@ -66,7 +80,7 @@ a {
         width: 600px;
     }
 
-    #submit {
-        margin-left: 0px;
+    #friday-table {
+        width: 50%;
     }
-}
+}
diff --git a/static/html/index.html b/static/html/index.html
@@ -3,6 +3,7 @@
 
 <head>
     <link rel="stylesheet" href="/static/css/index.css">
+    <script src="https://unpkg.com/htmx.org@1.9.12"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 
@@ -12,19 +13,20 @@ <h2>RSVP For Pizza</h2>
     {{if .LoggedIn}}
     <p>Hi {{.Name}}</p>
 
-    <form method="get" action="/submit">
+    <table id="friday-table">
         {{range .FridayTimes}}
-        <input type="checkbox" id="{{.Date}}" name="date" value="{{.ID}}">
-        <label for="{{.Date}}">{{.Date}}</label><br>
-        <div class="guestLevel">{{range .Guests}}<span class="guest" title="{{.}}">&nbsp;</span>{{end}}<br></div>
-        {{else}}
-        <p>There are no upcoming pizza fridays.</p>
+        <tr>
+            <td class="friday-time">
+                <label for="{{.Date}}">{{.Date}}</label><br>
+                <div class="guestLevel">{{range .Guests}}<span class="guest" title="{{.}}">&nbsp;</span>{{end}}<br>
+                </div>
+                <div class="btn-rsvp">
+                    <button class="btn" hx-post="/rsvp?date={{.ID}}" hx-swap="outerHTML">RSVP</button>
+                </div>
+            </td>
+        </tr>
         {{end}}
-        <br>
-        <div id="submit">
-            <input type="submit" value="Submit">
-        </div>
-    </form>
+    </table>
 
     <br><br>
     {{if .IsAdmin}}
@@ -38,4 +40,4 @@ <h2>RSVP For Pizza</h2>
 
 </body>
 
-</html>
+</html>
diff --git a/static/html/snippets/rsvp_error.html b/static/html/snippets/rsvp_error.html
@@ -0,0 +1,3 @@
+<div>
+    <p>Pizza goblins are trying to steal the secret recipe.</p>
+</div>
diff --git a/static/html/snippets/rsvp_fail.html b/static/html/snippets/rsvp_fail.html
@@ -0,0 +1,3 @@
+<div>
+    <p>Sorry, no pizza for you.</p>
+</div>
diff --git a/static/html/snippets/rsvp_success.html b/static/html/snippets/rsvp_success.html
@@ -0,0 +1,3 @@
+<div>
+    <p>You've been invited for pizza!</p>
+</div>