Add a menu system

diff --git a/broadcaster-server/main.go b/broadcaster-server/main.go
index c44ff7612629805fbf09b0b280df4d83d413483c..5a3cbb9dd8f07d60c3f276300ac9dbd8cf0c38bd 100644 (file)
--- 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 fd8d4157300121f6f094adc02e4c15da2d42d8ed..df60a12b9a70f2f12e5e65af30ea32b8f4f68d8d 100644 (file)
--- 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 8e40467b689d55b7fb84f15da2a2e8abdf3ee8f1..ae59b1652b2d5b241224e6a741279e70548c6658 100644 (file)
--- 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 fb36ca83a2d4249c8c3d4139167ddf3f8faaff22..010fe0a5f293c18fcbbcad363d30162e58b3cae0 100644 (file)
--- 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}}