From 204901189d1ea15522f74eab610fe73e01959aa5 Mon Sep 17 00:00:00 2001
From: Jan Eitzinger <jan@moebiusband.org>
Date: Thu, 24 Aug 2023 09:22:12 +0200
Subject: [PATCH] Add NavbarLinks component

---
 web/frontend/src/Header.svelte      | 140 ++++++++--------------------
 web/frontend/src/NavbarLinks.svelte |  39 ++++++++
 2 files changed, 78 insertions(+), 101 deletions(-)
 create mode 100644 web/frontend/src/NavbarLinks.svelte

diff --git a/web/frontend/src/Header.svelte b/web/frontend/src/Header.svelte
index 443f1d7..eec8beb 100644
--- a/web/frontend/src/Header.svelte
+++ b/web/frontend/src/Header.svelte
@@ -17,6 +17,7 @@
         DropdownItem,
         InputGroupText,
     } from "sveltestrap";
+    import NavbarLinks from "./NavbarLinks.svelte";
 
     export let username; // empty string if auth. is disabled, otherwise the username as string
     export let authlevel; // Integer
@@ -118,122 +119,60 @@
     >
         <Nav navbar>
             {#if screenSize > 1500}
-                {#each views.filter((item) => item.requiredRole <= authlevel) as item}
-                    {#if !item.perCluster}
-                        <NavLink
-                            href={item.href}
-                            active={window.location.pathname == item.href}
-                            ><Icon name={item.icon} /> {item.title}</NavLink
-                        >
-                    {:else}
-                        <Dropdown nav inNavbar>
-                            <DropdownToggle nav caret>
-                                <Icon name={item.icon} />
-                                {item.title}
-                            </DropdownToggle>
-                            <DropdownMenu class="dropdown-menu-lg-end">
-                                {#each clusters as cluster}
-                                    <DropdownItem
-                                        href={item.href + cluster.name}
-                                        active={window.location.pathname ==
-                                            item.href + cluster.name}
-                                    >
-                                        {cluster.name}
-                                    </DropdownItem>
-                                {/each}
-                            </DropdownMenu>
-                        </Dropdown>
-                    {/if}
-                {/each}
+                <NavbarLinks
+                    {clusters}
+                    links={views.filter(
+                        (item) => item.requiredRole <= authlevel
+                    )}
+                />
             {:else if screenSize > 1300}
-                {#each views.filter((item) => item.requiredRole <= authlevel && item.menu != "Stats") as item}
-                    {#if !item.perCluster}
-                        <NavLink
-                            href={item.href}
-                            active={window.location.pathname == item.href}
-                            ><Icon name={item.icon} /> {item.title}</NavLink
-                        >
-                    {:else}
-                        <Dropdown nav inNavbar>
-                            <DropdownToggle nav caret>
-                                <Icon name={item.icon} />
-                                {item.title}
-                            </DropdownToggle>
-                            <DropdownMenu class="dropdown-menu-lg-end">
-                                {#each clusters as cluster}
-                                    <DropdownItem
-                                        href={item.href + cluster.name}
-                                        active={window.location.pathname ==
-                                            item.href + cluster.name}
-                                    >
-                                        {cluster.name}
-                                    </DropdownItem>
-                                {/each}
-                            </DropdownMenu>
-                        </Dropdown>
-                    {/if}
-                {/each}
+                <NavbarLinks
+                    {clusters}
+                    links={views.filter(
+                        (item) =>
+                            item.requiredRole <= authlevel &&
+                            item.menu != "Stats"
+                    )}
+                />
                 <Dropdown nav>
                     <DropdownToggle nav caret>
                         <Icon name="graph-up" />
                         Stats
                     </DropdownToggle>
                     <DropdownMenu class="dropdown-menu-lg-end">
-                        {#each views.filter((item) => item.requiredRole <= authlevel && item.menu == "Stats") as item}
-                            <Dropdown nav inNavbar>
-                                <DropdownToggle nav caret>
-                                    <Icon name={item.icon} />
-                                    {item.title}
-                                </DropdownToggle>
-                                <DropdownMenu class="dropdown-menu-lg-end">
-                                    {#each clusters as cluster}
-                                        <DropdownItem
-                                            href={item.href + cluster.name}
-                                            active={window.location.pathname ==
-                                                item.href + cluster.name}
-                                        >
-                                            {cluster.name}
-                                        </DropdownItem>
-                                    {/each}
-                                </DropdownMenu>
-                            </Dropdown>
-                        {/each}
+                        <NavbarLinks
+                            {clusters}
+                            links={views.filter(
+                                (item) =>
+                                    item.requiredRole <= authlevel &&
+                                    item.menu == "Stats"
+                            )}
+                        />
                     </DropdownMenu>
                 </Dropdown>
             {:else}
-                {#each views.filter((item) => item.requiredRole <= authlevel && item.menu == "none") as item}
-                    <NavLink
-                        href={item.href}
-                        active={window.location.pathname == item.href}
-                        ><Icon name={item.icon} /> {item.title}</NavLink
-                    >
-                {/each}
+                <NavbarLinks
+                    {clusters}
+                    links={views.filter(
+                        (item) =>
+                            item.requiredRole <= authlevel &&
+                            item.menu == "none"
+                    )}
+                />
                 {#each Array("Groups", "Stats") as menu}
                     <Dropdown nav>
                         <DropdownToggle nav caret>
                             {menu}
                         </DropdownToggle>
                         <DropdownMenu class="dropdown-menu-lg-end">
-                            {#each views.filter((item) => item.requiredRole <= authlevel && item.menu == menu) as item}
-                                <Dropdown nav inNavbar>
-                                    <DropdownToggle nav caret>
-                                        <Icon name={item.icon} />
-                                        {item.title}
-                                    </DropdownToggle>
-                                    <DropdownMenu class="dropdown-menu-lg-end">
-                                        {#each clusters as cluster}
-                                            <DropdownItem
-                                                href={item.href + cluster.name}
-                                                active={window.location
-                                                    .pathname ==
-                                                    item.href + cluster.name}
-                                            >
-                                                {cluster.name}
-                                            </DropdownItem>
-                                        {/each}
-                                    </DropdownMenu>
-                                </Dropdown>
-                            {/each}
+                            <NavbarLinks
+                                {clusters}
+                                links={views.filter(
+                                    (item) =>
+                                        item.requiredRole <= authlevel &&
+                                        item.menu == menu
+                                )}
+                            />
                         </DropdownMenu>
                     </Dropdown>
                 {/each}
@@ -290,4 +229,3 @@
         </NavItem>
     </Nav>
 </Navbar>
-
diff --git a/web/frontend/src/NavbarLinks.svelte b/web/frontend/src/NavbarLinks.svelte
new file mode 100644
index 0000000..6861da5
--- /dev/null
+++ b/web/frontend/src/NavbarLinks.svelte
@@ -0,0 +1,39 @@
+<script>
+    import {
+        Icon,
+        NavLink,
+        Dropdown,
+        DropdownToggle,
+        DropdownMenu,
+        DropdownItem,
+    } from "sveltestrap";
+
+    export let clusters; // array of names
+    export let links; // array of nav links
+</script>
+
+{#each links as item}
+    {#if !item.perCluster}
+        <NavLink href={item.href} active={window.location.pathname == item.href}
+            ><Icon name={item.icon} /> {item.title}</NavLink
+        >
+    {:else}
+        <Dropdown nav inNavbar>
+            <DropdownToggle nav caret>
+                <Icon name={item.icon} />
+                {item.title}
+            </DropdownToggle>
+            <DropdownMenu class="dropdown-menu-lg-end">
+                {#each clusters as cluster}
+                    <DropdownItem
+                        href={item.href + cluster.name}
+                        active={window.location.pathname ==
+                            item.href + cluster.name}
+                    >
+                        {cluster.name}
+                    </DropdownItem>
+                {/each}
+            </DropdownMenu>
+        </Dropdown>
+    {/if}
+{/each}