From 7423c6c97eb5d6dc063e7185c50137bbb5e25a23 Mon Sep 17 00:00:00 2001
From: Thomas Karpiniec <tom.karpiniec@outlook.com>
Date: Tue, 22 Oct 2024 21:40:26 +1100
Subject: [PATCH] Add a menu system

---
 broadcaster-server/main.go                    | 21 +++--
 broadcaster-server/templates/footer.html      |  1 +
 broadcaster-server/templates/header.html      | 85 ++++++++++++++++++-
 .../templates/radios.partial.html             |  6 +-
 4 files changed, 102 insertions(+), 11 deletions(-)

diff --git a/broadcaster-server/main.go b/broadcaster-server/main.go
index c44ff76..5a3cbb9 100644
--- a/broadcaster-server/main.go
+++ b/broadcaster-server/main.go
@@ -2,7 +2,7 @@ package main
 
 import (
 	"bufio"
-	"embed"
+	_ "embed"
 	"flag"
 	"fmt"
 	"golang.org/x/net/websocket"
@@ -20,8 +20,9 @@ import (
 const version = "v1.0.0"
 const formatString = "2006-01-02T15:04"
 
-//go:embed templates/*
-var content embed.FS
+// //go:embed templates/*
+//var content embed.FS
+var content = os.DirFS("../broadcaster-server/")
 
 var config ServerConfig = NewServerConfig()
 
@@ -100,19 +101,27 @@ func main() {
 
 type HeaderData struct {
 	SelectedMenu string
+	Username string
 }
 
 func renderHeader(w http.ResponseWriter, selectedMenu string) {
 	tmpl := template.Must(template.ParseFS(content, "templates/header.html"))
 	data := HeaderData{
 		SelectedMenu: selectedMenu,
+		Username: "username",
+	}
+	err := tmpl.Execute(w, data)
+	if err != nil {
+		log.Fatal(err)
 	}
-	tmpl.Execute(w, data)
 }
 
 func renderFooter(w http.ResponseWriter) {
 	tmpl := template.Must(template.ParseFS(content, "templates/footer.html"))
-	tmpl.Execute(w, nil)
+	err := tmpl.Execute(w, nil)
+	if err != nil {
+		log.Fatal(err)
+	}
 }
 
 type HomeData struct {
@@ -505,7 +514,7 @@ func uploadFile(w http.ResponseWriter, r *http.Request) {
 
 func logOutPage(w http.ResponseWriter, r *http.Request) {
 	clearSessionCookie(w)
-	renderHeader(w, "logout")
+	renderHeader(w, "")
 	tmpl := template.Must(template.ParseFS(content, "templates/logout.html"))
 	tmpl.Execute(w, nil)
 	renderFooter(w)
diff --git a/broadcaster-server/templates/footer.html b/broadcaster-server/templates/footer.html
index fd8d415..df60a12 100644
--- a/broadcaster-server/templates/footer.html
+++ b/broadcaster-server/templates/footer.html
@@ -1,3 +1,4 @@
+      </div>
     </main>
   </body>
 </html>
diff --git a/broadcaster-server/templates/header.html b/broadcaster-server/templates/header.html
index 8e40467..ae59b16 100644
--- a/broadcaster-server/templates/header.html
+++ b/broadcaster-server/templates/header.html
@@ -12,9 +12,8 @@
         border-collapse: collapse;
       }
       td.clear {
-        width: 5em;
-        height: 5em;
         text-align: center;
+        background-color: #eeeeee;
       }
       .time-table {
         font-size: 90%;
@@ -26,7 +25,6 @@
       }
       .playlist-table {
         font-size: 90%;
-        width: 30em;
       }
       .stop {
         text-align: center;
@@ -34,7 +32,88 @@
       .head {
         text-align: center;
       }
+      body {
+        background-color: #447744;
+        font-family: "sans-serif";
+      }
+      main {
+        background-color: #dddddd;
+        max-width: 80em;
+        margin-left: auto;
+        margin-right: auto;
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: row;
+        border: 2px solid black;
+      }
+      .menu {
+        min-width: 12em;
+        display: flex;
+        flex-grow: 1;
+        flex-direction: column;
+        /* border: black solid; */
+        /* border-width: 0px 2px 0px 0px; */
+        text-align: center;
+      }
+      .menu-item {
+        height: 2em;
+        text-align: center;
+        line-height: 2em;
+        background-color: #aaaaaa;
+        border: black solid;
+        border-width: 1px 1px 0px 0px;
+      }
+      .menu-item a {
+        text-decoration: none;
+        color: black;
+      }
+      .menu-item.logout {
+        border-width: 1px 1px 1px 0px;
+      }
+      .menu-item:first-of-type {
+        border-width: 0px 1px 0px 0px;
+      }
+      .menu-item.selected {
+        background-color: #aaccaa;
+      }
+      .logged-in {
+        padding-top: 2em;
+        padding-bottom: 2em;
+        text-align: center;
+        border: black solid;
+        border-width: 0px 1px 0px 0px;
+      }
+      .menu-tail {
+        flex-grow: 1;
+        height: 2em;
+        line-height: 2em;
+        border: black solid;
+        border-width: 0px 1px 0px 0px;
+      }
+      .content {
+        flex-grow: 3;
+        padding: 5em;
+        padding-top: 1em;
+        overflow-wrap: break-word;
+        max-width: 50em;
+      }
     </style>
   </head>
   <body>
     <main>
+    {{if .SelectedMenu}}
+        <div class="menu">
+            <div class="menu-item {{if eq .SelectedMenu "status"}}selected{{end}}"><a href="/">Status</a></div>
+            <div class="menu-item {{if eq .SelectedMenu "files"}}selected{{end}}"><a href="/files/">Files</a></div>
+            <div class="menu-item {{if eq .SelectedMenu "playlists"}}selected{{end}}"><a href="/playlists/">Playlists</a></div>
+            <div class="menu-item {{if eq .SelectedMenu "radios"}}selected{{end}}"><a href="/radios/">Radios</a></div>
+            <div class="menu-item {{if eq .SelectedMenu "users"}}selected{{end}}"><a href="/users/">Users</a></div>
+            <div class="menu-item {{if eq .SelectedMenu "change-password"}}selected{{end}}"><a href="/change-password">Change Password</a></div>
+            <div class="menu-item logout"><a href="/logout">Log Out</a></div>
+            {{if .Username}}
+            <div class="logged-in">Logged in as:<br><i>{{.Username}}</i></div>
+            {{end}}
+            <div class="menu-tail"><small><i>broadcaster-server v1.0.0</i></small></div>
+        </div>
+    {{end}}
+    <div class="content">
diff --git a/broadcaster-server/templates/radios.partial.html b/broadcaster-server/templates/radios.partial.html
index fb36ca8..010fe0a 100644
--- a/broadcaster-server/templates/radios.partial.html
+++ b/broadcaster-server/templates/radios.partial.html
@@ -40,7 +40,7 @@
     <td class="outer {{.ChannelClass}}">
     {{.ChannelState}}
     </td>
-    <td class="outer">
+    <td class="outer" colspan="2">
     <table class="playlist-table">
         <tr>
         <td class="playlist-field">
@@ -68,12 +68,14 @@
         </tr>
     </table>
     </td>
-    <td class="outer stop">
+    <tr>
+    <td class="outer stop" colspan="3">
     <form action="/stop" method="post">
         <input type="hidden" name="radioId" value="{{.Id}}">
         <input type="submit" value="Cancel Playback" {{if .DisableCancel}} disabled {{end}}>
     </form>
     </td>
+    </tr>
 </tr>
 </table>
 {{end}}
-- 
2.39.5