Refactor server and templates package

internal/dis/component/server/assets/src/base/index.css

@@ -0,0 +1,123 @@
+body {
+    font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+
+header,
+main,
+footer {
+    margin: 2em;
+}
+
+nav.pure-menu, nav.breadcrumbs {
+    padding-top: 1em;
+    padding-bottom: 1em;
+    border-bottom: 1px solid black;
+}
+
+nav.breadcrumbs {
+    padding-left: 1em;
+    font-size: small;
+}
+
+nav.breadcrumbs a:not(:last-child)::after {
+    cursor: default;
+    content: " > ";
+    color: black;
+}
+nav.breadcrumbs a {
+    text-decoration: none;
+    color: blue !important;
+}
+nav.breadcrumbs a.active {
+    font-weight: bold;
+}
+
+footer {
+    font-size: small;
+    border-top: 1px solid black;
+    padding-top: 1em;
+}
+
+footer a {
+    color: blue !important;
+}
+
+time {
+    font-style: italic;
+}
+
+.padding {
+    padding: 1em;
+}
+
+.overflow {
+    overflow-x: auto;
+}
+
+.overflow table {
+    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;
+    text-align: left;
+    white-space: nowrap;
+}
+
+.overflow table td:last-child,
+.overflow table th:last-child {
+    white-space: nowrap;
+}
+
+.hspace {
+    display: block;
+    height: 1em;
+}
+.pure-form-group {
+    display: inline;
+}
+
+.pure-button-action {
+    background-color: rgb(66, 184, 221) !important;
+}
+
+.pure-button-success {
+    background-color: rgb(28, 184, 65) !important;
+}
+
+.pure-button-danger {
+    background: rgb(202, 60, 60) !important;
+}
+
+.pure-button-warning {
+    background: rgb(223, 117, 20) !important;
+}
+
+.pure-button-xsmall {
+    font-size: 70%;
+}
+
+.pure-button-small {
+    font-size: 85%;
+}
+
+.pure-button-large {
+    font-size: 110%;
+}
+
+.pure-button-xlarge {
+    font-size: 125%;
+}
+
+.error-message {
+    background-color: pink;
+    border: 1px solid red;
+    padding: 2px;
+    color: red;
+}

internal/dis/component/server/assets/src/base/index.ts

@@ -0,0 +1,4 @@
+import "purecss/build/pure.css"
+import "purecss/build/grids-responsive.css"
+
+import "./index.css"

internal/dis/component/server/assets/src/entry/Admin/index.css

@@ -0,0 +1,21 @@
+.wisski {
+    padding: 1em;
+}
+
+.wisski h3 {
+    padding: 0;
+}
+
+.wisski a.pure-button {
+    float: right;
+    position: relative;
+    bottom: 1em;
+}
+
+.wisski.running {
+    background-color: #9ADA07;
+}
+
+.wisski.stopped {
+    background-color: #ff7a7a;
+}

internal/dis/component/server/assets/src/entry/Admin/index.ts

@@ -0,0 +1,6 @@
+import "~/src/lib/remote"
+import "~/src/lib/highlight"
+
+// include the user styles!
+import "../User/index.ts"
+import "../User/index.css"

internal/dis/component/server/assets/src/entry/Default/index.css

@@ -0,0 +1,3 @@
+a.wisskilink {
+    color: blue !important;
+}

internal/dis/component/server/assets/src/entry/User/index.css

@@ -0,0 +1,6 @@
+/* textarea on the /user/ssh/add form */
+textarea#key {
+    width: 50%;
+    height: 10em;
+    resize: both; 
+}

internal/dis/component/server/assets/src/entry/User/index.ts

@@ -0,0 +1 @@
+import "~/src/lib/copy"

internal/dis/component/server/assets/src/lib/autolink/index.css

@@ -0,0 +1,22 @@
+.header-link {
+    position: relative;
+    left: 0.5em;
+    opacity: 0;
+    font-size: 0.8em;
+
+    transition: opacity 0.2s ease-in-out 0.1s;
+    -webkit-transition: opacity 0.2s ease-in-out 0.1s;
+    -moz-transition: opacity 0.2s ease-in-out 0.1s;
+    -ms-transition: opacity 0.2s ease-in-out 0.1s;
+
+    text-decoration: none;
+}
+
+h2:hover .header-link,
+h3:hover .header-link,
+h4:hover .header-link,
+h5:hover .header-link,
+h6:hover .header-link {
+    color: black !important;
+    opacity: 1;
+}

internal/dis/component/server/assets/src/lib/autolink/index.ts

@@ -0,0 +1,21 @@
+import "./index.css"
+
+/** Adapted from http://blog.parkermoore.de/2014/08/01/header-anchor-links-in-vanilla-javascript-for-github-pages-and-jekyll/ */
+const anchorForId = (id: string) => {
+    const anchor = document.createElement("a")
+    anchor.className = "header-link"
+    anchor.href = "#" + id
+    anchor.innerHTML = "#"
+    return anchor
+}
+
+const linkifyAnchors = (level: number) => {
+    const headers = document.getElementsByTagName("h" + level);
+    Array.from(headers).forEach((header) => {
+        if (typeof header.id === "undefined" || header.id === "") return
+        header.appendChild(anchorForId(header.id))
+    })
+}
+
+// linkify all the anchors from 1 ... 6
+(new Array(6)).fill(0).forEach((_, i) => linkifyAnchors(i + 1))

internal/dis/component/server/assets/src/lib/copy/index.css

@@ -0,0 +1,3 @@
+.copy {
+    user-select: all;
+}

internal/dis/component/server/assets/src/lib/copy/index.ts

@@ -0,0 +1,8 @@
+import "./index.css"
+
+document.querySelectorAll('.copy').forEach((elem: Element) => {
+    elem.addEventListener('click', () => {
+        if (!navigator.clipboard) return;
+         navigator.clipboard.writeText((elem as HTMLElement).innerText);
+    })
+})

internal/dis/component/server/assets/src/lib/highlight/index.ts

@@ -0,0 +1,61 @@
+import dayjs from "dayjs"
+const types: Record<string, (element: HTMLElement) => HTMLElement | string> = {
+    "date": (element) => {
+        const value =  dayjs(element.innerText);
+        const text = value.format('YYYY-MM-DD HH:mm:ss ([UTC]Z)')
+
+        // if the date is the zero date, then it is assumed to be invalid
+        if (value.unix() === 0) {
+            const code = document.createElement('code')
+            code.style.color = 'gray'
+            code.append(text)
+            return code
+        }
+        return text
+    },
+    "path": (element) => {
+        const text = element.innerText.split("/");
+        return text[text.length - 1];
+    },
+    "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")
+
+        link.className = "pure-button"
+        const title = filename + ' (' + blob.size + ' Bytes)';
+        link.append(title)
+        return link
+    }
+}
+
+const make_download_link = (filename: string, content: string, type: string): [HTMLAnchorElement, Blob] => {
+    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)
+
+    return [link, blob]
+}
+
+Object.keys(types).forEach(key => {
+    const f = types[key];
+    const elements = document.querySelectorAll("code." + key) as NodeListOf<HTMLElement>
+    elements.forEach(element => {
+        const newElement = f(element)
+        if (typeof newElement === 'string') {
+            element.innerHTML = ""
+            element.appendChild(document.createTextNode(newElement))
+            return
+        }
+
+        element.parentNode!.replaceChild(newElement, element)
+    })
+})

internal/dis/component/server/assets/src/lib/remote/index.css

@@ -0,0 +1,42 @@
+.modal-terminal {
+    width: 66vw;
+    height: 66vh;
+
+    position: fixed;
+    left: 17vw;
+    top: 17vh;
+
+    background-color: white;
+
+    background-clip: padding-box;
+    -webkit-background-clip: padding-box;
+
+    border-left: 17vw solid rgba(0, 0, 0, 0.8);
+    border-right: 17vw solid rgba(0, 0, 0, 0.8);
+    margin-left: -17vw;
+    margin-right: -17vw;
+
+    border-top: 17vh solid rgba(0, 0, 0, 0.8);
+    border-bottom: 17vh solid rgba(0, 0, 0, 0.8);
+    margin-top: -17vh;
+    margin-bottom: -17vh;
+
+    overflow: auto;
+
+    z-index: 1000;
+}
+
+.modal-terminal button {
+    position: fixed;
+    top: 17vh;
+    right: 17vw;
+
+    z-index: 1001;
+}
+
+.modal-terminal pre,
+.modal-terminal button
+{
+    margin: 5px;
+}
+

internal/dis/component/server/assets/src/lib/remote/index.ts

@@ -0,0 +1,208 @@
+import "./index.css"
+import connectSocket from './socket';
+
+type Println = ((line: string, flush?: boolean) => void) & {
+    paintedFrames: number;
+    missedFrames: number;
+}
+
+/**
+ * makeTextBuffer returns a println() function that efficiently writes text into target, and keeps at most size elements in the traceback.
+ * scrollContainer is used to scroll on every painted update.
+ */
+function makeTextBuffer(target: HTMLElement, scrollContainer: HTMLElement, size: number): Println {
+    let lastAnimationFrame: number | null = null; // last scheduled animation frame
+
+    const buffer: Array<string> = []; // the internal buffer of lines
+    const paint = () => {
+        println.paintedFrames++
+        target.innerText = buffer.join("\n")
+        scrollContainer.scrollTop = scrollContainer.scrollHeight
+        lastAnimationFrame = null
+    }
+
+    const println = (line: string, flush?: boolean) => {
+        // add the line 
+        buffer.push(line)
+        if (size !== 0 && buffer.length > size) {
+            buffer.splice(0, buffer.length - size)
+        }
+
+        // and update the browser in the next animation frame
+        if (lastAnimationFrame !== null) {
+            println.missedFrames++
+            window.cancelAnimationFrame(lastAnimationFrame)
+        }
+
+        // force a repaint!
+        if(flush) return paint(); 
+
+        // schedule an animation frame
+        lastAnimationFrame = window.requestAnimationFrame(paint);
+    }
+    println.paintedFrames = 0;
+    println.missedFrames = 0;
+
+    return println;
+}
+
+const remote_action = document.getElementsByClassName('remote-action')
+Array.from(remote_action).forEach((element) => {
+    const action = element.getAttribute('data-action') as string;
+    const reload = element.getAttribute('data-force-reload');
+    const param = element.getAttribute('data-param') as string | undefined;
+    
+    const confirmElementName = element.getAttribute('data-confirm-param');
+    const confirmElement = (confirmElementName ? document.querySelector(confirmElementName) : null) as HTMLInputElement | null;
+
+    const bufferSize = (function () {
+        const number = parseInt(element.getAttribute('data-buffer') ?? "", 10) ?? 0;
+        return (isFinite(number) && number > 0) ? number : 0;
+    })()
+
+    const validate = function() {
+        if (!confirmElement) return true
+        return confirmElement.value === param;
+    }
+
+    if (confirmElement) {
+        const runValidation = () => {
+            if (validate()) {
+                element.removeAttribute('disabled')
+            } else {
+                element.setAttribute('disabled', 'disabled')
+            }
+        }
+        confirmElement.addEventListener('change', runValidation)
+        runValidation()
+    }
+
+    element.addEventListener('click', function (ev) {
+        ev.preventDefault();
+
+        // do nothing if the validation fails
+        if (!validate()) return;
+
+        // create a modal dialog and append it to the body
+        const modal = document.createElement("div")
+        modal.className = "modal-terminal"
+        document.body.append(modal)
+
+        // create a <pre> to write stuff into
+        const target = document.createElement("pre")
+        const println = makeTextBuffer(target, modal, bufferSize)
+        modal.append(target)
+
+        
+        // create a button to eventually close everything
+        const button = document.createElement("button")
+        button.className = "pure-button pure-button-success"
+        button.append(typeof reload === 'string' ? "Close & Reload" : "Close")
+        button.addEventListener('click', function (event) {
+            event.preventDefault();
+
+            if (typeof reload === 'string') {
+                button.setAttribute('disabled', 'disabled')
+                target.innerHTML = 'Reloading page ...'
+                if (reload === '') {
+                    location.reload()
+                } else {
+                    location.href = reload
+                }
+                return;
+            }
+
+            modal.parentNode?.removeChild(modal);
+        })
+        
+        const onbeforeunload = window.onbeforeunload;
+        window.onbeforeunload = () => "A remote session is in progress. Are you sure you want to leave?";
+
+        // when closing, add a button to the modal!
+        let didClose = false
+        const close = function () {
+            if (didClose) return
+            didClose = true
+
+            window.onbeforeunload = onbeforeunload;
+            modal.append(button)
+            // DEBUG: print terminal stats!
+            // const quota = (println.paintedFrames / (println.missedFrames + println.paintedFrames)) * 100
+            // println(`Terminal: painted=${println.paintedFrames} missed=${println.missedFrames} (${quota}%)`, true)
+        }
+
+        println("Connecting ...", true)
+
+        // connect to the socket and send the action
+        connectSocket((socket) => {
+            println("Connected", true)
+            socket.send(action);
+            if (typeof param === 'string') {
+                socket.send(param);
+            }
+        }, (data) => {
+            println(data);
+        }).then(() => {
+            println("Connection closed.", true)
+            close();
+        }).catch(() => {
+            println("Connection errored.", true)
+            close();
+        });
+    });
+})
+
+const remote_link = document.getElementsByClassName('remote-link')
+Array.from(remote_link).forEach((element) => {
+    const action = element.getAttribute('data-action') as string;
+    const param = element.getAttribute('data-params') as string | undefined;
+    const params = param?.split(" ");
+
+    element.addEventListener('click', function (ev) {
+        ev.preventDefault();
+
+        getValue(action, params).then(v => {
+            window.open(v);
+        }).catch(e => {
+            console.error(e);
+        })
+    });
+})
+
+async function getValue(action: string, params?: Array<string>): Promise<any> {
+    return new Promise((rs, rj) => {
+        let buffer = "";
+        var resolve = function() {
+            const index = buffer.indexOf('\n')
+            if (index < 0) {
+                rj("invalid buffer");
+                return
+            }
+            
+            // check that the server sent back true
+            const ok = buffer.substring(0, index) === 'true';
+            if(!ok) {
+                rj(buffer);
+                return
+            }
+
+            // parse the rest as json
+            const value = JSON.parse(buffer.substring(index+1))
+            rs(value);
+        }
+
+        connectSocket((socket) => {
+            socket.send(action);
+            if (params) {
+                params.forEach(p => socket.send(p))
+            }
+        }, (data) => {
+            buffer += data + "\n";
+        }).then(() => {
+            resolve();
+        }).catch(() => {
+            buffer = "false\n";
+            resolve();
+        });
+    })
+}

internal/dis/component/server/assets/src/lib/remote/socket.ts

@@ -0,0 +1,11 @@
+export default function connectSocket(onOpen: (socket: WebSocket) => void, onData: (data: any) => void): Promise<CloseEvent> {
+    return new Promise((rs, rj) => {
+        const socket = new WebSocket(location.href.replace('http', 'ws'));
+
+        socket.onclose = rs;
+        socket.onerror = rj;
+
+        socket.onmessage = (ev) => onData(ev.data)
+        socket.onopen = () => onOpen(socket);
+    });
+}