watchtower/docs/template-preview.md

<style>
    #tplprev {
        margin: 0;
        display: flex; 
        flex-direction: column; 
        row-gap: 1rem; 
        box-sizing: border-box; 
        position: relative; 
        margin-right: -13.3rem
    }
    #tplprev textarea {
        box-decoration-break: slice;
        overflow: auto;
        padding: 0.77em 1.18em;
        scrollbar-color: var(--md-default-fg-color--lighter) transparent;
        scrollbar-width: thin;
        touch-action: auto;
        word-break: normal;
        height: 420px;
        flex: 1;
    }
    #tplprev .controls {
        display: flex; 
        flex-direction: row; 
        column-gap: 0.5rem
    }
    #tplprev textarea, #tplprev input {
        background-color: var(--md-code-bg-color);
        border-width: 0;
        border-radius: 0.1rem;
        color: var(--md-code-fg-color);
        font-feature-settings: "kern";
        font-family: var(--md-code-font-family);
    }
    .numfield {
        font-size: .7rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    #tplprev button {
        border-radius: 0.1rem;
        color: var(--md-primary-bg-color);
        background-color: var(--md-primary-fg-color);
        flex:1; 
        min-width: 12ch; 
        padding: 0.5rem
    }
    #tplprev button:hover {
        background-color: var(--md-accent-fg-color);
    }
    #tplprev input[type="number"] { width: 5ch; flex: 1; font-size: 1rem; }
    #tplprev fieldset {
        margin-top: -0.5rem;
        display: flex;
        flex: 1;
        column-gap: 0.5rem;
    }
    #tplprev .template-wrapper {
        display: flex; 
        flex:1; 
        column-gap: 1rem;
    }
    #tplprev .result-wrapper {
        flex: 1; 
        display: flex
    }
    #result {
        font-size: 0.7rem;
        background-color: var(--md-code-bg-color);
        scrollbar-color: var(--md-default-fg-color--lighter) transparent;
        scrollbar-width: thin;
        touch-action: auto;
        overflow: auto;
        padding: 0.77em 1.18em;
        margin:0;
        height: 540px;
        flex:1; 
        width:100%
    }
    #result b {color: var(--md-code-hl-special-color)}
    #result i {color: var(--md-code-hl-keyword-color)}
    #tplprev .loading {
        position: absolute; 
        inset: 0; 
        display: flex; 
        padding: 1rem; 
        box-sizing: border-box; 
        background: var(--md-code-bg-color); 
        margin-top: 0
    }
</style>
<script src="../assets/wasm_exec.js"></script>
<script>
    let wasmLoaded = false;
    const updatePreview = () => {
        if (!wasmLoaded) return;
        const form = document.querySelector('#tplprev');
        const input = form.template.value;
        console.log('Input: %o', input);
        const arrFromCount = (key) => Array.from(Array(form[key]?.valueAsNumber ?? 0), () => key);
        const states = form.report.value === "yes" ? [
            ...arrFromCount("skipped"),
            ...arrFromCount("scanned"),
            ...arrFromCount("updated"),
            ...arrFromCount("failed" ),
            ...arrFromCount("fresh"  ),
            ...arrFromCount("stale"  ),
        ] : [];
        console.log("States: %o", states);
        const levels = form.log.value === "yes" ? [
            ...arrFromCount("error"),
            ...arrFromCount("warning"),
            ...arrFromCount("info"),
            ...arrFromCount("debug"),
        ] : [];
        console.log("Levels: %o", levels);
        const output = WATCHTOWER.tplprev(input, states, levels);
        console.log('Output: \n%o', output);
        if (output.startsWith('Error: ')) {
            document.querySelector('#result').innerHTML = `<b>Error</b>: ${output.substring(7)}`;
        } else if (output.length) {
            document.querySelector('#result').innerText = output;
        } else {
            document.querySelector('#result').innerHTML = '<i>empty (would not be sent as a notification)</i>';
        }
    }
    const formSubmitted = (e) => {
        //e.preventDefault();
        //updatePreview();
    }
    let debounce;
    const inputUpdated = () => {
        if(debounce) clearTimeout(debounce);
        debounce = setTimeout(() => updatePreview(), 400);
    }
    const formChanged = (e) =>  {
        console.log('form changed: %o', e);
        const targetToggle = e.target.dataset['toggle'];
        if (targetToggle) {
            e.target.form[targetToggle].value = e.target.checked ? "yes" : "no";
        }
        updatePreview()
    }
    const go = new Go();
    WebAssembly.instantiateStreaming(fetch("../assets/tplprev.wasm"), go.importObject).then((result) => {
        go.run(result.instance);
        document.querySelector('#tplprev .loading').style.display = "none";
        wasmLoaded = true;
        updatePreview();
    });
</script>
<form id="tplprev" onchange="formChanged(event)" onsubmit="formSubmitted(event)">
<pre class="loading">loading wasm...</pre>
<div class="template-wrapper">
<textarea name="template" type="text" onkeyup="inputUpdated()">{{- with .Report -}}
  {{- if ( or .Updated .Failed ) -}}
{{len .Scanned}} Scanned, {{len .Updated}} Updated, {{len .Failed}} Failed
    {{- range .Updated}}
- {{.Name}} ({{.ImageName}}): {{.CurrentImageID.ShortID}} updated to {{.LatestImageID.ShortID}}
    {{- end -}}
    {{- range .Fresh}}
- {{.Name}} ({{.ImageName}}): {{.State}}
    {{- end -}}
    {{- range .Skipped}}
- {{.Name}} ({{.ImageName}}): {{.State}}: {{.Error}}
    {{- end -}}
    {{- range .Failed}}
- {{.Name}} ({{.ImageName}}): {{.State}}: {{.Error}}
      {{- end -}}
  {{- end -}}
{{- end -}}
{{- if (and .Entries .Report) }}

Logs:
{{ end -}}
{{range .Entries -}}{{.Time.Format "2006-01-02T15:04:05Z07:00"}} [{{.Level}}] {{.Message}}{{"\n"}}{{- end -}}</textarea>
</div>
<div class="controls">
<fieldset>
    <input type="hidden" name="report" value="yes" />
    <legend><label><input type="checkbox" data-toggle="report" checked /> Container report</label></legend>
    <label class="numfield">
        Skipped:
        <input type="number" name="skipped" value="3" />
    </label>
    <label class="numfield">
        Scanned:
        <input type="number" name="scanned" value="3" />
    </label>
    <label class="numfield">
        Updated:
        <input type="number" name="updated" value="3" />
    </label>
    <label class="numfield">
        Failed:
        <input type="number" name="failed" value="3" />
    </label>
    <label class="numfield">
        Fresh:
        <input type="number" name="fresh" value="3" />
    </label>
    <label class="numfield">
        Stale:
        <input type="number" name="stale" value="3" />
    </label>
</fieldset>
<fieldset>
    <input type="hidden" name="log" value="yes" />
    <legend><label><input type="checkbox" data-toggle="log" checked /> Log entries</label></legend>
    <label class="numfield">
        Error: 
        <input type="number" name="error" value="1" />
    </label>
    <label class="numfield">
        Warning:
        <input type="number" name="warning" value="2" />
    </label>
    <label class="numfield">
        Info:
        <input type="number" name="info" value="3" />
    </label>
    <label class="numfield">
        Debug:
        <input type="number" name="debug" value="4" />
    </label>
</fieldset>
<button type="submit">Update preview</button>
</div>
<div style="result-wrapper">
    <pre id="result"></pre>
</div>
</form>
<script>
const loadQueryVals = () => {
    const form = document.querySelector('#tplprev');
    const params =  new URLSearchParams(location.search);
    for(const [key, value] of params){
        form[key].value = value;
        const toggleInput = form.querySelector(`[data-toggle="${key}"]`);
        if (toggleInput) {
            toggleInput.checked = value === "yes";
        }
    }
}
if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", loadQueryVals());
} else {
    loadQueryVals();
}
</script>