frontend: Make Control Server nicer

internal/component/static/assets.go

@@ -1,6 +1,7 @@
 package static
 
 import (
+	"encoding/json"
 	"html/template"
 )
 
@@ -30,11 +31,17 @@ func (assets *Assets) MustParse(value string) *template.Template {
 	return template.Must(assets.RegisterFuncs(template.New("")).Parse(value))
 }
 
-// RegisterFuncs registers two new template functions called "JS" and "CSS".
-// Both take no arguments, and return a html-safe version of the Scripts and Style tags to be included.
+// RegisterFuncs registers three new template functions called "JS", "CSS" and "json".
+//
+// "JS" and "CSS" take no arguments, and return appropriate tags to be inserted into html.
+// json takes a single argument of any type, and returns it's encoding as a string to be inserted into the page.
 func (assets *Assets) RegisterFuncs(t *template.Template) *template.Template {
 	return t.Funcs(template.FuncMap{
 		"JS":  func() template.HTML { return template.HTML(assets.Scripts) },
 		"CSS": func() template.HTML { return template.HTML(assets.Styles) },
+		"json": func(data any) (string, error) {
+			bytes, err := json.Marshal(data)
+			return string(bytes), err
+		},
 	})
 }

internal/component/static/assets_dist.go

@@ -5,17 +5,17 @@ package static
 // AssetsHomeHome contains assets for the 'HomeHome' entrypoint.
 var AssetsHomeHome = Assets{
 	Scripts: `<script type="module" src="/static/HomeHome.38d394c2.js"></script><script src="/static/HomeHome.38d394c2.js" nomodule="" defer></script><script type="module" src="/static/HomeHome.38d394c2.js"></script><script src="/static/HomeHome.38d394c2.js" nomodule="" defer></script>`,
-	Styles:  `<link rel="stylesheet" href="/static/HomeHome.518b2dbe.css"><link rel="stylesheet" href="/static/HomeHome.38d394c2.css">`,	
+	Styles:  `<link rel="stylesheet" href="/static/HomeHome.a75f04fa.css"><link rel="stylesheet" href="/static/HomeHome.38d394c2.css">`,	
 }
 
 // AssetsControlIndex contains assets for the 'ControlIndex' entrypoint.
 var AssetsControlIndex = Assets{
-	Scripts: `<script type="module" src="/static/HomeHome.38d394c2.js"></script><script src="/static/HomeHome.38d394c2.js" nomodule="" defer></script><script type="module" src="/static/ControlIndex.43f953d2.js"></script><script src="/static/ControlIndex.c70a89e1.js" nomodule="" defer></script>`,
-	Styles:  `<link rel="stylesheet" href="/static/HomeHome.518b2dbe.css"><link rel="stylesheet" href="/static/ControlIndex.6d59e220.css"><link rel="stylesheet" href="/static/ControlIndex.6d2ae968.css">`,	
+	Scripts: `<script type="module" src="/static/HomeHome.38d394c2.js"></script><script src="/static/HomeHome.38d394c2.js" nomodule="" defer></script><script type="module" src="/static/ControlIndex.cfbf936d.js"></script><script src="/static/ControlIndex.613b02c2.js" nomodule="" defer></script>`,
+	Styles:  `<link rel="stylesheet" href="/static/HomeHome.a75f04fa.css"><link rel="stylesheet" href="/static/ControlIndex.6d59e220.css"><link rel="stylesheet" href="/static/ControlIndex.6d2ae968.css">`,	
 }
 
 // AssetsControlInstance contains assets for the 'ControlInstance' entrypoint.
 var AssetsControlInstance = Assets{
-	Scripts: `<script nomodule="" defer src="/static/ControlIndex.c70a89e1.js"></script><script type="module" src="/static/ControlIndex.43f953d2.js"></script><script type="module" src="/static/HomeHome.38d394c2.js"></script><script src="/static/HomeHome.38d394c2.js" nomodule="" defer></script><script type="module" src="/static/ControlInstance.66b95713.js"></script><script src="/static/ControlInstance.9cc7166d.js" nomodule="" defer></script>`,
-	Styles:  `<link rel="stylesheet" href="/static/HomeHome.518b2dbe.css"><link rel="stylesheet" href="/static/ControlIndex.6d59e220.css"><link rel="stylesheet" href="/static/ControlIndex.6d2ae968.css"><link rel="stylesheet" href="/static/ControlInstance.38d394c2.css">`,	
+	Scripts: `<script nomodule="" defer src="/static/ControlIndex.613b02c2.js"></script><script type="module" src="/static/ControlIndex.cfbf936d.js"></script><script type="module" src="/static/HomeHome.38d394c2.js"></script><script src="/static/HomeHome.38d394c2.js" nomodule="" defer></script><script type="module" src="/static/ControlInstance.66b95713.js"></script><script src="/static/ControlInstance.9cc7166d.js" nomodule="" defer></script>`,
+	Styles:  `<link rel="stylesheet" href="/static/HomeHome.a75f04fa.css"><link rel="stylesheet" href="/static/ControlIndex.6d59e220.css"><link rel="stylesheet" href="/static/ControlIndex.6d2ae968.css"><link rel="stylesheet" href="/static/ControlInstance.38d394c2.css">`,	
 }

internal/component/static/src/base/index.css

@@ -20,6 +20,11 @@ footer {
     width: 100%;
 }
 
+.overflow table td,
+.overflow table th{
+    padding: .5em .5em;
+}
+
 .overflow table td:not(:last-child),
 .overflow table th:not(:last-child) {
     width: 1px;
@@ -34,7 +39,7 @@ footer {
 
 .hspace {
     display: block;
-    height: 2em;
+    height: 1em;
 }
 
 .pure-button-action {

internal/component/static/src/lib/highlight/index.ts

@@ -7,32 +7,19 @@ const types: Record<string, (element: HTMLElement) => HTMLElement | string> = {
         const text = element.innerText.split("/");
         return text[text.length - 1];
     },
-    "pathbuilders": () => {
-        const pathbuilders: {[name: string]: string} = (window as any).pathbuilders; // must be declared globally on page!
-        const wrapper = document.createElement("span");
+    "pathbuilder": (element) => {
+        // create a link and get the blob
+        const filename = (element.getAttribute('data-name') ?? 'pathbuilder') + ".xml"
+        const [link, blob] = make_download_link(filename, element.innerText, "application/xml")
 
-        let found_one = false
-        Object.keys(pathbuilders).forEach(name => {
-            found_one = true
-
-            const filename = name + ".xml"
-            const data = pathbuilders[name]
-            const mime = "application/xml"
-            wrapper.append(make_download_link(filename, name, data, mime))
-            wrapper.append(document.createTextNode(" "))
-        })
-
-        if (!found_one) return '(none)';
-
-        const small = document.createElement('small')
-        small.append(document.createTextNode("(click to download)"))
-        wrapper.append(small)
-        
-        return wrapper
+        link.className = "pure-button"
+        const title = filename + ' (' + blob.size + ' Bytes)';
+        link.append(title)
+        return link
     }
 }
 
-const make_download_link = (filename: string, title: string, content: string, type: string) => {
+const make_download_link = (filename: string, content: string, type: string): [HTMLAnchorElement, Blob] => {
     const blob = new Blob(
         [content],
         {
@@ -44,9 +31,8 @@ const make_download_link = (filename: string, title: string, content: string, ty
     link.target = "_blank"
     link.download = filename
     link.href = URL.createObjectURL(blob)
-    link.append(document.createTextNode(title))
 
-    return link
+    return [link, blob]
 }
 
 Object.keys(types).forEach(key => {