Add download button for pathbuilders

internal/component/control/html/instance.html

@@ -13,15 +13,16 @@
     <b>URL:</b> <a href="{{ .Info.URL }}" target="_blank" rel="noopener noreferrer">{{ .Info.URL }}</a> <br />
     <hr />
     <b>Running:</b> <code>{{ .Info.Running }}</code> <br />
-    <b>Last Rebuild:</b> <code>{{ .Info.LastRebuild }}</code> <br />
+    <!-- <b>OwnerEmail:</b> <code>{{ .Instance.OwnerEmail }}</code> <br /> -->
     <hr />
-    <b>Created:</b> <code>{{ .Instance.Created }}</code> <br />
-    <b>OwnerEmail:</b> <code>{{ .Instance.OwnerEmail }}</code> <br />
+    <b>Created:</b> <code class="date">{{ .Instance.Created.Format "2006-01-02T15:04:05Z07:00" }}</code> <br />
+    <b>Last Rebuild:</b> <code class="date">{{ .Info.LastRebuild.Format "2006-01-02T15:04:05Z07:00" }}</code> <br />
     <hr />
     <b>FilesystemBase:</b> <code>{{ .Instance.FilesystemBase }}</code> <br />
     <b>AutoBlindUpdateEnabled:</b> <code>{{ .Instance.AutoBlindUpdateEnabled }}</code> <br />
     <hr />
-    <b>Pathbuilders:</b> <code>{{ .Info.Pathbuilders }}</code> <br />
+    <b>Pathbuilders:</b> <code class="pathbuilders">{{ .Info.Pathbuilders }}</code><br />
+    <script>window.pathbuilders={{ .Info.Pathbuilders }};</script>
     <hr />
 	<b>SqlDatabase:</b> <code>{{ .Instance.SqlDatabase }}</code> <br />
 	<b>SqlUsername:</b> <code>{{ .Instance.SqlUsername }}</code> <br />
@@ -34,4 +35,5 @@
     Generated at <code>{{ .Time }}</code>
 </footer>
 
-<script src="/dis/static/autolink.js"></script>
+<script src="/dis/static/autolink.js"></script>
+<script src="/dis/static/instance.js"></script>

internal/component/control/html/static/autolink.js

@@ -1,24 +1,19 @@
-/** adding links to each item, see http://blog.parkermoore.de/2014/08/01/header-anchor-links-in-vanilla-javascript-for-github-pages-and-jekyll/ */
-var anchorForId = function (id) {
-    var anchor = document.createElement("a");
-    anchor.className = "header-link";
-    anchor.href = "#" + id;
-    anchor.innerHTML = "#";
-    return anchor;
-};
+/** Adapted from http://blog.parkermoore.de/2014/08/01/header-anchor-links-in-vanilla-javascript-for-github-pages-and-jekyll/ */
+const anchorForId = (id) => {
+    const anchor = document.createElement("a")
+    anchor.className = "header-link"
+    anchor.href = "#" + id
+    anchor.innerHTML = "#"
+    return anchor
+}
 
-var linkifyAnchors = function (level) {
-    var headers = document.getElementsByTagName("h" + level);
-    for (var h = 0; h < headers.length; h++) {
-        var header = headers[h];
+const linkifyAnchors = (level) => {
+    const headers = document.getElementsByTagName("h" + level);
+    Array.from(headers).forEach((header) => {
+        if (typeof header.id === "undefined" || header.id === "") return
+        header.appendChild(anchorForId(header.id))
+    })
+}
 
-        if (typeof header.id !== "undefined" && header.id !== "") {
-            header.appendChild(anchorForId(header.id));
-        }
-    }
-};
-
-
-for (var level = 1; level <= 6; level++) {
-    linkifyAnchors(level);
-}
+// linkify all the anchors from 1 ... 6
+Array(6).forEach((_, i) => linkifyAnchors(i + 1))

internal/component/control/html/static/instance.js

@@ -0,0 +1,60 @@
+const types = {
+    "date": (element) => {
+        return (new Date(element.innerText)).toString()
+    },
+    "pathbuilders": (element) => {
+        const pathbuilders = window.pathbuilders; // read from context!
+        const wrapper = document.createElement("span");
+
+        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
+    }
+}
+
+const make_download_link = (filename, title, content, type) => {
+    const blob = new Blob(
+        [content],
+        {
+            type: type ?? "text/plain"
+        }
+    );
+
+    const link = document.createElement("a")
+    link.target = "_blank"
+    link.download = filename
+    link.href = URL.createObjectURL(blob)
+    link.append(document.createTextNode(title))
+
+    return link
+}
+
+Object.keys(types).forEach(key => {
+    const f = types[key];
+    const elements = document.querySelectorAll("code." + key)
+    elements.forEach(element => {
+        const newElement = f(element)
+        if (typeof newElement === 'string') {
+            element.innerHTML = ""
+            element.appendChild(document.createTextNode(newElement))
+            return
+        }
+
+        element.parentNode.replaceChild(newElement, element)
+    })
+})