move taglist a from go tmpl to svelte component

web/frontend/rollup.config.mjs

@@ -62,6 +62,7 @@ export default [
     entrypoint('jobs', 'src/jobs.entrypoint.js'),
     entrypoint('user', 'src/user.entrypoint.js'),
     entrypoint('list', 'src/list.entrypoint.js'),
+    entrypoint('taglist', 'src/tags.entrypoint.js'),
     entrypoint('job', 'src/job.entrypoint.js'),
     entrypoint('systems', 'src/systems.entrypoint.js'),
     entrypoint('node', 'src/node.entrypoint.js'),

web/frontend/src/Tags.root.svelte

@@ -0,0 +1,50 @@
+<!--
+    @component Tag List Svelte Component. Displays All Tags, Allows deletion.
+
+    Properties:
+    - `authlevel Int!`: Current Users Authority Level
+    - `tagmap Object!`: Map of Appwide Tags
+ -->
+
+<script>
+  // import { Card, CardHeader, CardTitle } from "@sveltestrap/sveltestrap";
+
+  // export let authlevel;
+  export let tagmap;
+</script>
+
+<div class="container">
+    <div class="row justify-content-center">
+        <div class="col-10">
+        {#each Object.entries(tagmap) as [tagType, tagList]}
+            <div class="my-3 p-2 bg-secondary rounded text-white"> <!-- text-capitalize -->
+                Tag Type: <b>{tagType}</b>
+                <span style="float: right; padding-bottom: 0.4rem; padding-top: 0.4rem;" class="badge bg-light text-secondary">
+                    {tagList.length} Tag{(tagList.length != 1)?'s':''}
+                </span>
+            </div>
+            {#each tagList as tag (tag.id)}
+                {#if tag.scope == "global"}
+                    <a class="btn btn-outline-secondary" href="/monitoring/jobs/?tag={tag.id}" role="button">
+                        {tag.name}
+                        <span class="badge bg-primary mr-1">{tag.count} Job{(tag.count != 1)?'s':''}</span>
+                        <span style="background-color:#c85fc8;" class="badge text-dark">Global</span>
+                    </a>
+                {:else if tag.scope == "admin"}
+                    <a class="btn btn-outline-secondary" href="/monitoring/jobs/?tag={tag.id}" role="button">
+                        {tag.name}
+                        <span class="badge bg-primary mr-1">{tag.count} Job{(tag.count != 1)?'s':''}</span>
+                        <span style="background-color:#19e5e6;" class="badge text-dark">Admin</span>
+                    </a>
+                {:else}
+                    <a class="btn btn-outline-secondary" href="/monitoring/jobs/?tag={tag.id}" role="button">
+                        {tag.name}
+                        <span class="badge bg-primary mr-1">{tag.count} Job{(tag.count != 1)?'s':''}</span>
+                        <span class="badge bg-warning text-dark">Private</span>
+                    </a>
+                {/if}
+            {/each}
+        {/each}
+        </div>
+    </div>
+</div>

web/frontend/src/tags.entrypoint.js

@@ -0,0 +1,12 @@
+import {} from './header.entrypoint.js'
+import Tags from './Tags.root.svelte'
+
+new Tags({
+    target: document.getElementById('svelte-app'),
+    props: {
+        // authlevel: authlevel,
+        tagmap: tagmap,
+    }
+})
+
+

web/templates/monitoring/taglist.tmpl

@@ -1,37 +1,13 @@
 {{define "content"}}
-    <div class="container">
+    <div id="svelte-app"></div>
-        <div class="row  justify-content-center">
+{{end}}
-            <div class="col-10">
+{{define "stylesheets"}}
-            {{ range $tagType, $tagList := .Infos.tagmap }}
+    <link rel='stylesheet' href='/build/taglist.css'>
-                <div class="my-3 p-2 bg-secondary rounded text-white"> <!-- text-capitalize -->
+{{end}}
-                    Tag Type: <b>{{ $tagType }}</b>
+{{define "javascript"}}
-                    <span style="float: right; padding-bottom: 0.4rem; padding-top: 0.4rem;" class="badge bg-light text-secondary">
+    <script>
-                        {{len $tagList}} Tag{{if ne (len $tagList) 1}}s{{end}}
+        const authlevel = {{ .User.GetAuthLevel }};
-                    </span>
+        const tagmap = {{ .Infos.tagmap }};
-                </div>
+    </script>
-                {{ range $tagList }}
+    <script src='/build/taglist.js'></script>
-                    {{if eq .scope "global"}}
-                        <a class="btn btn-outline-secondary" href="/monitoring/jobs/?tag={{ .id }}" role="button">
-                            {{ .name }}
-                            <span class="badge bg-primary mr-1">{{ .count }} Job{{if ne .count 1}}s{{end}}</span>
-                            <span style="background-color:#c85fc8;" class="badge text-dark">Global</span>
-                        </a>
-                    {{else if eq .scope "admin"}}
-                        <a class="btn btn-outline-secondary" href="/monitoring/jobs/?tag={{ .id }}" role="button">
-                            {{ .name }}
-                            <span class="badge bg-primary mr-1">{{ .count }} Job{{if ne .count 1}}s{{end}}</span>
-                            <span style="background-color:#19e5e6;" class="badge text-dark">Admin</span>
-                        </a>
-                    {{else}}
-                        <a class="btn btn-outline-secondary" href="/monitoring/jobs/?tag={{ .id }}" role="button">
-                            {{ .name }}
-                            <span class="badge bg-primary mr-1">{{ .count }} Job{{if ne .count 1}}s{{end}}</span>
-                            <span class="badge bg-warning text-dark">Private</span>
-                        </a>
-                    {{end}}
-                {{end}}
-            {{end}}
-            </div>
-        </div>
-    </div>
 {{end}}