From 7d830830f6af1bcda0847da633ff44209ea35ec0 Mon Sep 17 00:00:00 2001
From: Theis Pieter Hollebeek <tphollebeek@gmail.com>
Date: Fri, 19 Jan 2024 03:59:53 +0100
Subject: [PATCH] header.js

---
 public/header.js           | 37 +++++++++++++++++++++++++++++++++++++
 public/index.html          | 17 ++++-------------
 public/login/index.html    | 14 ++------------
 public/register/index.html | 14 ++------------
 public/search/index.html   | 20 ++++++--------------
 public/upload/index.html   | 14 ++------------
 6 files changed, 53 insertions(+), 63 deletions(-)
 create mode 100644 public/header.js
diff --git a/public/header.js b/public/header.js
new file mode 100644
index 0000000..90f7a86
--- /dev/null
+++ b/public/header.js
@@ -0,0 +1,37 @@
+function displayHeader() {
+    const links = [
+        {
+            href: "/",
+            name: "Home",
+        },
+        {
+            href: "/register/",
+            name: "Register",
+        },
+        {
+            href: "/login/",
+            name: "Login",
+        },
+        {
+            href: "/upload/",
+            name: "Upload",
+        },
+    ].map(({name, href}) => {
+        if (href === window.location.pathname) {
+            return `<a href="${href}"><b>${name}</b></a>`
+        } else {
+            return `<a href="${href}">${name}</a>`
+        }
+    }).join(" - ");
+
+    document.querySelector("h1").outerHTML = `
+        <header>
+            <h1>MaoTube</h1>
+                <nav>
+                    ${links}
+                </nav>
+        </header>
+    `
+}
+
+displayHeader();
diff --git a/public/index.html b/public/index.html
index f01503e..02aed75 100644
--- a/public/index.html
+++ b/public/index.html
@@ -6,26 +6,17 @@
         <link rel="stylesheet" href="style.css">
     </head>
     <body>
-        <header>
-            <h1>MaoTube</h1>
-                <nav>
-                    <a href="/"><b>Home</b></a> -
-                    <a href="/search">Search</a> -
-                    <a href="/register">Register</a> -
-                    <a href="/login">Login</a> -
-                    <a href="/upload">Upload</a>
-                </nav>
-            <br>
-            <br>
-        </header>
+        <h1>MaoTube</h1>
         <form method="GET" target="_self" action="/search">
-            <input type="text" name="query" placeholder="...">
+            <label for="query"><p>Search</p></label>
+            <input type="text" id="query" name="query" placeholder="...">
             <input type="submit" value="Search">
         </form>
         <br>
         <img src="chairman_1.jpg" alt="The chairman" height="600">
         <img src="chairman_2.jpg" alt="The chairman" height="600">
         <img src="chairman_3.jpg" alt="The chairman" height="600">
+        <script src="/header.js"></script>
     </body>
 </html>
 
diff --git a/public/login/index.html b/public/login/index.html
index 4e29d13..934d7a0 100644
--- a/public/login/index.html
+++ b/public/login/index.html
@@ -6,18 +6,7 @@
         <link rel="stylesheet" href="/style.css">
     </head>
     <body>
-        <header>
-            <h1>MaoTube</h1>
-                <nav>
-                    <a href="/"><b>Home</b></a> -
-                    <a href="/search">Search</a> -
-                    <a href="/register">Register</a> -
-                    <a href="/login">Login</a> -
-                    <a href="/upload">Upload</a>
-                </nav>
-            <br>
-            <br>
-        </header>
+        <h1>MaoTube</h1>
         <div>
             <label for="username"><p>Username</p></label>
             <input type="text" name="username" id="username">
@@ -41,6 +30,7 @@
             </div>
         </div>
         <script src="script.js"></script>
+        <script src="/header.js"></script>
     </body>
 </html>
 
diff --git a/public/register/index.html b/public/register/index.html
index e703637..8b69018 100644
--- a/public/register/index.html
+++ b/public/register/index.html
@@ -6,18 +6,7 @@
         <link rel="stylesheet" href="/style.css">
     </head>
     <body>
-        <header>
-            <h1>MaoTube</h1>
-                <nav>
-                    <a href="/"><b>Home</b></a> -
-                    <a href="/search">Search</a> -
-                    <a href="/register">Register</a> -
-                    <a href="/login">Login</a> -
-                    <a href="/upload">Upload</a>
-                </nav>
-            <br>
-            <br>
-        </header>
+        <h1>MaoTube</h1>
         <div>
             <label for="username"><p>Username</p></label>
             <input type="text" name="username" id="username">
@@ -41,6 +30,7 @@
             </div>
         </div>
         <script src="script.js"></script>
+        <script src="/header.js"></script>
     </body>
 </html>
 
diff --git a/public/search/index.html b/public/search/index.html
index ed21770..a0f1844 100644
--- a/public/search/index.html
+++ b/public/search/index.html
@@ -6,23 +6,14 @@
         <link rel="stylesheet" href="/style.css">
     </head>
     <body>
-        <header>
-            <h1>MaoTube</h1>
-                <nav>
-                    <a href="/"><b>Home</b></a> -
-                    <a href="/search">Search</a> -
-                    <a href="/register">Register</a> -
-                    <a href="/login">Login</a> -
-                    <a href="/upload">Upload</a>
-                </nav>
-            <br>
-            <br>
-        </header>
-        <form method="GET" action="/search" target="_self">
-            <input type="text" name="query" placeholder="...">
+        <h1>MaoTube</h1>
+        <form method="GET" target="_self" action="/search">
+            <label for="query"><p>Search</p></label>
+            <input type="text" id="query" name="query" placeholder="...">
             <input type="submit" value="Search">
         </form>
         <br>
+        <br>
         <div id="result">
             <noscript>
                 <div class="mao-error">
@@ -36,6 +27,7 @@
             </div>
         </div>
         <script src="script.js"></script>
+        <script src="/header.js"></script>
     </body>
 </html>
 
diff --git a/public/upload/index.html b/public/upload/index.html
index c1f2f7a..ed868c2 100644
--- a/public/upload/index.html
+++ b/public/upload/index.html
@@ -6,18 +6,7 @@
         <link rel="stylesheet" href="/style.css">
     </head>
     <body>
-        <header>
-            <h1>MaoTube</h1>
-                <nav>
-                    <a href="/"><b>Home</b></a> -
-                    <a href="/search">Search</a> -
-                    <a href="/register">Register</a> -
-                    <a href="/login">Login</a> -
-                    <a href="/upload">Upload</a>
-                </nav>
-            <br>
-            <br>
-        </header>
+        <h1>MaoTube</h1>
         <form action="/api/upload_video" method="POST" enctype="multipart/form-data">
             <label for="username"><p>Title</p></label>
             <input type="text" name="title">
@@ -27,6 +16,7 @@
             <br>
             <input type="submit" id="submit" value="Upload">
         </form>
+        <script src="/header.js"></script>
     </body>
 </html>
 
