From 587f9c5bb84420d9f71fe75e29f54b8319c90064 Mon Sep 17 00:00:00 2001
From: Thomas Karpiniec <tom.karpiniec@outlook.com>
Date: Tue, 22 Oct 2024 19:50:53 +1100
Subject: [PATCH] Split HTML into header/footer templates

---
 broadcaster-server/main.go                    | 36 ++++++++++++++-
 .../templates/change_password.html            | 13 +-----
 broadcaster-server/templates/files.html       | 13 +-----
 broadcaster-server/templates/footer.html      |  3 ++
 broadcaster-server/templates/header.html      | 40 +++++++++++++++++
 broadcaster-server/templates/index.html       | 44 +------------------
 broadcaster-server/templates/login.html       | 13 +-----
 broadcaster-server/templates/logout.html      | 13 +-----
 broadcaster-server/templates/playlist.html    | 16 ++-----
 broadcaster-server/templates/playlists.html   | 13 +-----
 broadcaster-server/templates/radio.html       | 13 +-----
 broadcaster-server/templates/radios.html      | 13 +-----
 12 files changed, 89 insertions(+), 141 deletions(-)
 create mode 100644 broadcaster-server/templates/footer.html
 create mode 100644 broadcaster-server/templates/header.html

diff --git a/broadcaster-server/main.go b/broadcaster-server/main.go
index 079f977..c44ff76 100644
--- a/broadcaster-server/main.go
+++ b/broadcaster-server/main.go
@@ -98,18 +98,37 @@ func main() {
 	}
 }
 
+type HeaderData struct {
+	SelectedMenu string
+}
+
+func renderHeader(w http.ResponseWriter, selectedMenu string) {
+	tmpl := template.Must(template.ParseFS(content, "templates/header.html"))
+	data := HeaderData{
+		SelectedMenu: selectedMenu,
+	}
+	tmpl.Execute(w, data)
+}
+
+func renderFooter(w http.ResponseWriter) {
+	tmpl := template.Must(template.ParseFS(content, "templates/footer.html"))
+	tmpl.Execute(w, nil)
+}
+
 type HomeData struct {
 	LoggedIn bool
 	Username string
 }
 
 func homePage(w http.ResponseWriter, r *http.Request) {
+	renderHeader(w, "status")
 	tmpl := template.Must(template.ParseFS(content, "templates/index.html"))
 	data := HomeData{
 		LoggedIn: true,
 		Username: "Bob",
 	}
 	tmpl.Execute(w, data)
+	renderFooter(w)
 }
 
 type LogInData struct {
@@ -136,9 +155,10 @@ func logInPage(w http.ResponseWriter, r *http.Request) {
 	data := LogInData{
 		Error: errText,
 	}
-
+	renderHeader(w, "")
 	tmpl := template.Must(template.ParseFS(content, "templates/login.html"))
 	tmpl.Execute(w, data)
+	renderFooter(w)
 }
 
 func playlistSection(w http.ResponseWriter, r *http.Request) {
@@ -244,11 +264,13 @@ func changePasswordPage(w http.ResponseWriter, r *http.Request) {
 		data.Message = ""
 		data.ShowForm = true
 	}
+	renderHeader(w, "change-password")
 	tmpl := template.Must(template.ParseFS(content, "templates/change_password.html"))
 	err = tmpl.Execute(w, data)
 	if err != nil {
 		log.Fatal(err)
 	}
+	renderFooter(w)
 }
 
 type PlaylistsPageData struct {
@@ -256,6 +278,7 @@ type PlaylistsPageData struct {
 }
 
 func playlistsPage(w http.ResponseWriter, _ *http.Request) {
+	renderHeader(w, "playlists")
 	data := PlaylistsPageData{
 		Playlists: db.GetPlaylists(),
 	}
@@ -264,6 +287,7 @@ func playlistsPage(w http.ResponseWriter, _ *http.Request) {
 	if err != nil {
 		log.Fatal(err)
 	}
+	renderFooter(w)
 }
 
 type RadiosPageData struct {
@@ -271,6 +295,7 @@ type RadiosPageData struct {
 }
 
 func radiosPage(w http.ResponseWriter, _ *http.Request) {
+	renderHeader(w, "radios")
 	data := RadiosPageData{
 		Radios: db.GetRadios(),
 	}
@@ -279,6 +304,7 @@ func radiosPage(w http.ResponseWriter, _ *http.Request) {
 	if err != nil {
 		log.Fatal(err)
 	}
+	renderFooter(w)
 }
 
 type EditPlaylistPageData struct {
@@ -306,8 +332,10 @@ func editPlaylistPage(w http.ResponseWriter, r *http.Request, id int) {
 		data.Playlist = playlist
 		data.Entries = db.GetEntriesForPlaylist(id)
 	}
+	renderHeader(w, "radios")
 	tmpl := template.Must(template.ParseFS(content, "templates/playlist.html"))
 	tmpl.Execute(w, data)
+	renderFooter(w)
 }
 
 func submitPlaylist(w http.ResponseWriter, r *http.Request) {
@@ -393,8 +421,10 @@ func editRadioPage(w http.ResponseWriter, r *http.Request, id int) {
 		}
 		data.Radio = radio
 	}
+	renderHeader(w, "radios")
 	tmpl := template.Must(template.ParseFS(content, "templates/radio.html"))
 	tmpl.Execute(w, data)
+	renderFooter(w)
 }
 
 func submitRadio(w http.ResponseWriter, r *http.Request) {
@@ -434,6 +464,7 @@ type FilesPageData struct {
 }
 
 func filesPage(w http.ResponseWriter, _ *http.Request) {
+	renderHeader(w, "files")
 	data := FilesPageData{
 		Files: files.Files(),
 	}
@@ -443,6 +474,7 @@ func filesPage(w http.ResponseWriter, _ *http.Request) {
 	if err != nil {
 		log.Fatal(err)
 	}
+	renderFooter(w)
 }
 
 func deleteFile(w http.ResponseWriter, r *http.Request) {
@@ -473,8 +505,10 @@ func uploadFile(w http.ResponseWriter, r *http.Request) {
 
 func logOutPage(w http.ResponseWriter, r *http.Request) {
 	clearSessionCookie(w)
+	renderHeader(w, "logout")
 	tmpl := template.Must(template.ParseFS(content, "templates/logout.html"))
 	tmpl.Execute(w, nil)
+	renderFooter(w)
 }
 
 func stopPage(w http.ResponseWriter, r *http.Request) {
diff --git a/broadcaster-server/templates/change_password.html b/broadcaster-server/templates/change_password.html
index 431e2a4..bab3a82 100644
--- a/broadcaster-server/templates/change_password.html
+++ b/broadcaster-server/templates/change_password.html
@@ -1,12 +1,4 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Broadcaster</title>
-  </head>
-  <body>
-    <main>
+
       <h1>Change Password</h1>
       {{if ne .Message ""}}
       <p><b>{{.Message}}</b></p>
@@ -20,6 +12,3 @@
         <input type="submit" value="Change Password">
       </form>
       {{end}}
-    </main>
-  </body>
-</html>
diff --git a/broadcaster-server/templates/files.html b/broadcaster-server/templates/files.html
index fa2614f..c86c6ce 100644
--- a/broadcaster-server/templates/files.html
+++ b/broadcaster-server/templates/files.html
@@ -1,12 +1,4 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Broadcaster</title>
-  </head>
-  <body>
-    <main>
+
       <h1>Files! List</h1>
       <p>All files can be downloaded from the <a href="/file-downloads/">public file listing</a>.</p>
       <ul>
@@ -21,6 +13,3 @@
         <input type="submit" value="Upload">
       </form>
       </p>
-    </main>
-  </body>
-</html>
diff --git a/broadcaster-server/templates/footer.html b/broadcaster-server/templates/footer.html
new file mode 100644
index 0000000..fd8d415
--- /dev/null
+++ b/broadcaster-server/templates/footer.html
@@ -0,0 +1,3 @@
+    </main>
+  </body>
+</html>
diff --git a/broadcaster-server/templates/header.html b/broadcaster-server/templates/header.html
new file mode 100644
index 0000000..8e40467
--- /dev/null
+++ b/broadcaster-server/templates/header.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Broadcaster</title>
+    <style type="text/css">
+      table.radio-status, td.outer {
+        border: 1px solid;
+      }
+      table.inner {
+        border-collapse: collapse;
+      }
+      td.clear {
+        width: 5em;
+        height: 5em;
+        text-align: center;
+      }
+      .time-table {
+        font-size: 90%;
+      }
+      .playlist-field {
+        text-align: right;
+        padding-right: 1em;
+        width: 5em;
+      }
+      .playlist-table {
+        font-size: 90%;
+        width: 30em;
+      }
+      .stop {
+        text-align: center;
+      }
+      .head {
+        text-align: center;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
diff --git a/broadcaster-server/templates/index.html b/broadcaster-server/templates/index.html
index 367d48c..b688947 100644
--- a/broadcaster-server/templates/index.html
+++ b/broadcaster-server/templates/index.html
@@ -1,40 +1,3 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Broadcaster</title>
-    <style type="text/css">
-      table.radio-status, td.outer {
-        border: 1px solid;
-      }
-      table.inner {
-        border-collapse: collapse;
-      }
-      td.clear {
-        width: 5em;
-        height: 5em;
-        text-align: center;
-      }
-      .time-table {
-        font-size: 90%;
-      }
-      .playlist-field {
-        text-align: right;
-        padding-right: 1em;
-        width: 5em;
-      }
-      .playlist-table {
-        font-size: 90%;
-        width: 30em;
-      }
-      .stop {
-        text-align: center;
-      }
-      .head {
-        text-align: center;
-      }
-    </style>
     <script type="text/javascript">
       function connectWebsocket() {
         console.log("Attempting to create websocket connection for radio status sync")
@@ -59,9 +22,7 @@
       // initial connection on page load
       connectWebsocket();
     </script>
-  </head>
-  <body>
-    <main>
+
       <h1>Welcome!</h1>
       {{if .LoggedIn}}
       <p>Your username is: {{.Username}}.</p>
@@ -76,6 +37,3 @@
       <div id="connected-radios">
         <i>Loading...</i>
       </div>
-    </main>
-  </body>
-</html>
diff --git a/broadcaster-server/templates/login.html b/broadcaster-server/templates/login.html
index 56772b9..2211b2f 100644
--- a/broadcaster-server/templates/login.html
+++ b/broadcaster-server/templates/login.html
@@ -1,12 +1,4 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Broadcaster Log In</title>
-  </head>
-  <body>
-    <main>
+
       <h1>Log In</h1>
       <form action="/login" method="post">
         {{if ne .Error ""}}
@@ -18,6 +10,3 @@
         <input type="password" id="password" name="password"><br>
         <input type="submit" value="Log In">
       </form>
-    </main>
-  </body>
-</html>
diff --git a/broadcaster-server/templates/logout.html b/broadcaster-server/templates/logout.html
index b151265..8b7ee1c 100644
--- a/broadcaster-server/templates/logout.html
+++ b/broadcaster-server/templates/logout.html
@@ -1,14 +1,3 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Broadcaster Log Out</title>
-  </head>
-  <body>
-    <main>
+
         <h1>Logged Out</h1>
         <p><a href="/login">Log In again</a></p>
-    </main>
-  </body>
-</html>
diff --git a/broadcaster-server/templates/playlist.html b/broadcaster-server/templates/playlist.html
index e609712..d778250 100644
--- a/broadcaster-server/templates/playlist.html
+++ b/broadcaster-server/templates/playlist.html
@@ -1,9 +1,4 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Broadcaster</title>
+
     <script type="text/javascript">
     function deleteItem(sender) {
       sender.parentNode.remove();
@@ -17,10 +12,8 @@
       parent.insertBefore(p, marker);
     }
     </script>
-  </head>
-  <body>
-    <main>
-      <h1>A specific playlist</h1>
+
+    <h1>A specific playlist</h1>
       <h2>
       {{if .Playlist.Id}}
       Edit Playlist
@@ -95,6 +88,3 @@
         </select>
         <a href="#" onclick="deleteItem(this)">(Delete Item)</a>
       </template>
-    </main>
-  </body>
-</html>
diff --git a/broadcaster-server/templates/playlists.html b/broadcaster-server/templates/playlists.html
index 8b83d3d..e1ba60f 100644
--- a/broadcaster-server/templates/playlists.html
+++ b/broadcaster-server/templates/playlists.html
@@ -1,12 +1,4 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Broadcaster</title>
-  </head>
-  <body>
-    <main>
+
       <h1>Playlists!</h1>
       <ul>
       {{range .Playlists}}
@@ -14,6 +6,3 @@
       {{end}}
       </ul>
       <p><a href="/playlists/new">Add New Playlist</a></p>
-    </main>
-  </body>
-</html>
diff --git a/broadcaster-server/templates/radio.html b/broadcaster-server/templates/radio.html
index 01e4f0c..c2ec9dd 100644
--- a/broadcaster-server/templates/radio.html
+++ b/broadcaster-server/templates/radio.html
@@ -1,12 +1,4 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Broadcaster</title>
-  </head>
-  <body>
-    <main>
+
       <h1>A specific radio</h1>
       <h2>
       {{if .Radio.Id}}
@@ -38,6 +30,3 @@
         </p>
       </form>
       {{end}}
-    </main>
-  </body>
-</html>
diff --git a/broadcaster-server/templates/radios.html b/broadcaster-server/templates/radios.html
index d55ea4a..0c1288f 100644
--- a/broadcaster-server/templates/radios.html
+++ b/broadcaster-server/templates/radios.html
@@ -1,12 +1,4 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Broadcaster</title>
-  </head>
-  <body>
-    <main>
+
       <h1>Radios</h1>
       <ul>
       {{range .Radios}}
@@ -14,6 +6,3 @@
       {{end}}
       </ul>
       <p><a href="/radios/new">Register New Radio</a></p>
-    </main>
-  </body>
-</html>
-- 
2.39.5