goosebit 0.1.0__py3-none-any.whl

goosebit/ui/routes.py

@@ -0,0 +1,104 @@
+import aiofiles
+from fastapi import APIRouter, Depends, Form, Security, UploadFile
+from fastapi.requests import Request
+from fastapi.responses import RedirectResponse
+from fastapi.security import OAuth2PasswordBearer
+
+from goosebit.auth import authenticate_session, validate_user_permissions
+from goosebit.permissions import Permissions
+from goosebit.settings import UPDATES_DIR
+from goosebit.ui.templates import templates
+
+oauth2_scheme = OAuth2PasswordBearer(tokenUrl="login")
+
+router = APIRouter(
+    prefix="/ui", dependencies=[Depends(authenticate_session)], include_in_schema=False
+)
+
+
+@router.get("/")
+async def ui_root(request: Request):
+    return RedirectResponse(request.url_for("home_ui"))
+
+
+@router.get(
+    "/firmware",
+    dependencies=[
+        Security(validate_user_permissions, scopes=[Permissions.FIRMWARE.READ])
+    ],
+)
+async def firmware_ui(request: Request):
+    return templates.TemplateResponse(
+        "firmware.html", context={"request": request, "title": "Firmware"}
+    )
+
+
+@router.post(
+    "/upload",
+    dependencies=[
+        Security(validate_user_permissions, scopes=[Permissions.FIRMWARE.WRITE])
+    ],
+)
+async def upload_update(
+    request: Request,
+    chunk: UploadFile = Form(...),
+    init: bool = Form(...),
+    done: bool = Form(...),
+    filename: str = Form(...),
+):
+    file = UPDATES_DIR.joinpath(filename)
+    tmpfile = file.with_suffix(".tmp")
+    contents = await chunk.read()
+    if init:
+        file.unlink(missing_ok=True)
+
+    async with aiofiles.open(tmpfile, mode="ab") as f:
+        await f.write(contents)
+    if done:
+        tmpfile.replace(file)
+
+
+@router.get(
+    "/home",
+    dependencies=[Security(validate_user_permissions, scopes=[Permissions.HOME.READ])],
+)
+async def home_ui(request: Request):
+    return templates.TemplateResponse(
+        "index.html", context={"request": request, "title": "Home"}
+    )
+
+
+@router.get(
+    "/devices",
+    dependencies=[
+        Security(validate_user_permissions, scopes=[Permissions.DEVICE.READ])
+    ],
+)
+async def devices_ui(request: Request):
+    return templates.TemplateResponse(
+        "devices.html", context={"request": request, "title": "Devices"}
+    )
+
+
+@router.get(
+    "/logs/{dev_id}",
+    dependencies=[
+        Security(validate_user_permissions, scopes=[Permissions.DEVICE.READ])
+    ],
+)
+async def logs_ui(request: Request, dev_id: str):
+    return templates.TemplateResponse(
+        "logs.html", context={"request": request, "title": "Log", "device": dev_id}
+    )
+
+
+@router.get(
+    "/tunnels",
+    dependencies=[
+        Security(validate_user_permissions, scopes=[Permissions.TUNNEL.READ])
+    ],
+)
+async def tunnels_ui(request: Request):
+    return templates.TemplateResponse(
+        "tunnels.html", context={"request": request, "title": "Tunnels"}
+    )

goosebit/ui/static/__init__.py

@@ -0,0 +1,5 @@
+from pathlib import Path
+
+from fastapi.staticfiles import StaticFiles
+
+static = StaticFiles(directory=Path(__file__).resolve().parent)

goosebit/ui/static/favicon.svg

@@ -0,0 +1 @@
+<svg width="160mm" height="160mm" version="1.1" viewBox="0 0 160 160" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-32.316 -71.486)"><g transform="translate(3.1433 .77798)" stroke="#000"><path d="m112.72 77.662a3.072 3.072 0 0 0-3.0722 3.0722 3.072 3.072 0 0 0 0.89762 2.1699v13.542h-43.886c-7.6869 0-14.133 5.0881-16.192 12.091h-12.416a3.072 3.072 0 0 0-2.159-0.89762 3.072 3.072 0 0 0-3.0722 3.0722 3.072 3.072 0 0 0 3.0722 3.0722 3.072 3.072 0 0 0 2.1699-0.89762h11.731c-0.0039 0.15084-0.02274 0.29776-0.02274 0.44958v7.3003h-11.719a3.072 3.072 0 0 0-2.159-0.89762 3.072 3.072 0 0 0-3.0722 3.0722 3.072 3.072 0 0 0 3.0722 3.0722 3.072 3.072 0 0 0 2.1699-0.89762h11.708v7.7499h-11.719a3.072 3.072 0 0 0-2.159-0.89762 3.072 3.072 0 0 0-3.0722 3.0722 3.072 3.072 0 0 0 3.0722 3.0722 3.072 3.072 0 0 0 2.1699-0.89762h11.708v7.7499h-11.719a3.072 3.072 0 0 0-2.159-0.89762 3.072 3.072 0 0 0-3.0722 3.0722 3.072 3.072 0 0 0 3.0722 3.0722 3.072 3.072 0 0 0 2.1699-0.89762h11.708v7.7499h-11.719a3.072 3.072 0 0 0-2.159-0.89762 3.072 3.072 0 0 0-3.0722 3.0722 3.072 3.072 0 0 0 3.0722 3.0722 3.072 3.072 0 0 0 2.1699-0.89762h11.708v7.7499h-11.719a3.072 3.072 0 0 0-2.159-0.89762 3.072 3.072 0 0 0-3.0722 3.0722 3.072 3.072 0 0 0 3.0722 3.0722 3.072 3.072 0 0 0 2.1699-0.89761h11.708v7.7494h-11.719a3.072 3.072 0 0 0-2.159-0.89762 3.072 3.072 0 0 0-3.0722 3.0722 3.072 3.072 0 0 0 3.0722 3.0722 3.072 3.072 0 0 0 2.1699-0.89762h11.708v7.3008c0 0.1517 0.0188 0.29835 0.02274 0.44907h-11.742a3.072 3.072 0 0 0-2.159-0.89762 3.072 3.072 0 0 0-3.0722 3.0722 3.072 3.072 0 0 0 3.0722 3.0722 3.072 3.072 0 0 0 2.1699-0.89762h12.405c1.6399 5.5765 6.0655 9.9236 11.683 11.468v15.152a3.072 3.072 0 0 0-0.89762 2.159 3.072 3.072 0 0 0 3.0722 3.0722 3.072 3.072 0 0 0 3.0722-3.0722 3.072 3.072 0 0 0-0.89762-2.1699v-14.527c0.05398 5e-4 0.10609 8e-3 0.1602 8e-3h7.5897v14.529a3.072 3.072 0 0 0-0.89762 2.159 3.072 3.072 0 0 0 3.0722 3.0722 3.072 3.072 0 0 0 3.0722-3.0722 3.072 3.072 0 0 0-0.89762-2.1699v-14.518h7.7494v14.529a3.072 3.072 0 0 0-0.89762 2.159 3.072 3.072 0 0 0 3.0722 3.0722 3.072 3.072 0 0 0 3.0722-3.0722 3.072 3.072 0 0 0-0.89762-2.1699v-14.518h7.7499v14.529a3.072 3.072 0 0 0-0.89762 2.159 3.072 3.072 0 0 0 3.0722 3.0722 3.072 3.072 0 0 0 3.0722-3.0722 3.072 3.072 0 0 0-0.89762-2.1699v-14.518h7.7499v14.529a3.072 3.072 0 0 0-0.89762 2.159 3.072 3.072 0 0 0 3.0722 3.0722 3.072 3.072 0 0 0 3.0722-3.0722 3.072 3.072 0 0 0-0.89762-2.1699v-14.518h7.7499v14.529a3.072 3.072 0 0 0-0.89762 2.159 3.072 3.072 0 0 0 3.0722 3.0722 3.072 3.072 0 0 0 3.0722-3.0722 3.072 3.072 0 0 0-0.89762-2.1699v-14.518h7.7499v14.529a3.072 3.072 0 0 0-0.89762 2.159 3.072 3.072 0 0 0 3.0722 3.0722 3.072 3.072 0 0 0 3.0722-3.0722 3.072 3.072 0 0 0-0.89762-2.1699v-14.518h7.5892c0.0543 0 0.10656-8e-3 0.16071-8e-3v14.538a3.072 3.072 0 0 0-0.89762 2.159 3.072 3.072 0 0 0 3.0722 3.0722 3.072 3.072 0 0 0 3.0722-3.0722 3.072 3.072 0 0 0-0.89762-2.1699v-15.141c5.6174-1.5445 10.043-5.8916 11.682-11.468h12.992a3.072 3.072 0 0 0 2.159 0.89762 3.072 3.072 0 0 0 3.0722-3.0722 3.072 3.072 0 0 0-3.0722-3.0722 3.072 3.072 0 0 0-2.1699 0.89762h-12.307c4e-3 -0.15072 0.0227-0.29737 0.0227-0.44907v-7.3008h12.295a3.072 3.072 0 0 0 2.159 0.89762 3.072 3.072 0 0 0 3.0722-3.0722 3.072 3.072 0 0 0-3.0722-3.0722 3.072 3.072 0 0 0-2.1699 0.89762h-12.284v-7.7494h12.295a3.072 3.072 0 0 0 2.159 0.89761 3.072 3.072 0 0 0 3.0722-3.0722 3.072 3.072 0 0 0-3.0722-3.0722 3.072 3.072 0 0 0-2.1699 0.89762h-12.284v-7.7499h12.295a3.072 3.072 0 0 0 2.159 0.89762 3.072 3.072 0 0 0 3.0722-3.0722 3.072 3.072 0 0 0-3.0722-3.0722 3.072 3.072 0 0 0-2.1699 0.89762h-12.284v-43.597c0-7.791-5.2299-14.3-12.38-16.266v-14.176a3.072 3.072 0 0 0 0.89762-2.159 3.072 3.072 0 0 0-3.0722-3.0722 3.072 3.072 0 0 0-3.0722 3.0722 3.072 3.072 0 0 0 0.89762 2.1699v13.551c-0.0542-5.05e-4 -0.10644-0.0083-0.16071-0.0083h-7.5892v-13.553a3.072 3.072 0 0 0 0.89762-2.159 3.072 3.072 0 0 0-3.0722-3.0722 3.072 3.072 0 0 0-3.0722 3.0722 3.072 3.072 0 0 0 0.89762 2.1699v13.542h-7.7499v-13.553a3.072 3.072 0 0 0 0.89762-2.159 3.072 3.072 0 0 0-3.0722-3.0722 3.072 3.072 0 0 0-3.0722 3.0722 3.072 3.072 0 0 0 0.89762 2.1699v13.542h-7.7499v-13.553a3.072 3.072 0 0 0 0.89762-2.159 3.072 3.072 0 0 0-3.0722-3.0722z" fill="#fff"/><g><path d="m83.315 71.988c-7.7785-0.10611-12.693 4.0778-12.693 4.0778s-4.8045 3.244-6.8197 5.6885c-2.0152 2.4446-3.9998 3.3161-3.9998 3.3161l-10.92 4.4292s-4.3039 2.004-4.6829 6.8874c-0.37903 4.8834 8.6052 6.8151 8.6052 6.8151l10.779 1.2867c-3.797 2.1848-6.349 6.2714-6.349 10.984v74.649c0 7.0224 5.6533 12.676 12.676 12.676h74.649c7.0224 0 12.676-5.6533 12.676-12.676v-28.141c19.08-22.042 22.782-33.839 22.782-33.839s2.3205-7.1538 4.8922-15.174c2.5717-8.0199-3.6974-6.8585-3.6974-6.8585l-24.252 6.7293c-1.207-5.7485-6.2825-10.041-12.4-10.041h-33.177c-1.9266-19.83-13.78-25.894-13.78-25.894-5.3521-3.6273-10.213-4.8599-14.287-4.9155z" fill="#121e2c"/><path d="m69.443 107.99c-3.9647 0-7.1567 3.1915-7.1567 7.1562v40.219c0.96019-8.4807 4.4328-18.052 9.6733-24.824 9.8714-12.755 9.3931-19.262 5.7521-22.552zm42.644 0c0.24496 10.488-4.3418 20.083-4.3418 20.083l44.46-13.835c-0.44487-3.5314-3.4372-6.2477-7.0931-6.2477zm-49.801 61.069v21.844c0 3.9647 3.192 7.1562 7.1567 7.1562h18.112c-8.3075-3.693-21.415-12.054-25.268-29z" fill="#29befe"/><path d="m178.96 112.14-69.703 20.837s-18.894 12.226-6.2239 35.914c0.31428-4e-3 39.979 0.0384 39.979 0.0384s5.3864-3.9688 9.3648-9.8406l-40.695-0.25269s-2.0754 0.0793-2.0075-2.3201c0.068-2.3994 1.2177-2.4825 1.2177-2.4825l44.832 0.25605s3.3352-2.6554 8.4851-11.307l-46.34-0.0399s-1.8324-0.34051-1.7768-2.6268c0.0556-2.2863 2.6305-2.585 2.6305-2.585l45.957-0.17048s2.2148 0.37311 4.94-2.6224c2.7252-2.9954 9.801-21.321 9.801-21.321s0.63122-1.6448-0.46214-1.4781zm-72.26 60.929 33.354-0.22045s-4.43 6.7245-14.346 7.0264c-14.503 0.44144-19.008-6.8059-19.008-6.8059zm-39.296-87.393 7.3033 15.24s22.892 2.1374 4.4586 29.071c-18.433 26.934-7.9015 44.329-7.9015 44.329s10.309 21.075 36.028 23.294l35.722 0.45927s7.6669 5e-3 8.9801-7.2795l-0.0255-22.663s-10.703 16.455-23.723 17.408c-9.6849 0.70923-14.934-1.1038-17.672-2.5611-2.2513-1.1981-30.046-14.686-11.338-50.201 16.735-31.77-0.73572-47.166-0.73572-47.166l-13.986 3.0599s0.67535 2.9676-1.8951 4.436c-1.9916 1.1377-5.4854 0.11131-6.6183-1.8831-1.1522-2.0285-0.22903-5.5118 1.8024-6.7625 2.7445-1.6898 5.1812-0.15486 5.1812-0.15486l12.185-2.4294s-15.541-10.99-27.765 3.8033zm2.126 14.889s-16.877-2.0953-19.634-2.9542c-2.7568-0.85892-0.37994-2.5393-0.37994-2.5393s10.175-2.8442 14.302-6.5923z" fill="#fff"/></g></g></g></svg>

goosebit/ui/static/js/devices.js

@@ -0,0 +1,370 @@
+document.addEventListener("DOMContentLoaded", function() {
+    var dataTable = new DataTable("#device-table", {
+        responsive: true,
+        paging: false,
+        scrollCollapse: true,
+        scroller: true,
+        scrollY: "65vh",
+        stateSave: true,
+        select: true,
+        rowId: "uuid",
+        ajax: {
+            url: "/api/devices/all",
+            dataSrc: "",
+        },
+        initComplete:function(){
+            updateBtnState();
+        },
+        columnDefs: [
+            {
+                targets: "_all",
+                render: function(data, type, row) {
+                    return data || "❓";
+                },
+            }
+        ],
+        columns: [
+            { data: 'name' },
+            {
+                data: 'online',
+                render: function(data, type, row) {
+                    if ( type === 'display' || type === 'filter' ) {
+                        color = data ? "success" : "danger"
+                        return `
+                        <div class="text-${color}">
+                            ●
+                        </div>
+                        `
+                    }
+                    return data;
+                }
+            },
+            { data: 'uuid' },
+            { data: 'fw' },
+            {
+                data: 'force_update',
+                render: function(data, type, row) {
+                    if ( type === 'display' || type === 'filter' ) {
+                        color = data ? "success" : "danger"
+                        return `
+                        <div class="text-${color}">
+                            ●
+                        </div>
+                        `
+                    }
+                    return data;
+                }
+            },
+            { data: 'fw_file' },
+            { data: 'last_ip' },
+            {
+                data: 'last_seen',
+                render: function(data, type, row) {
+                    if ( type === 'display' || type === 'filter' ) {
+                        return secondsToRecentDate(data);
+                    }
+                    return data;
+                }
+            },
+            { data: 'state' },
+        ],
+        layout: {
+            top1Start: {
+                buttons: [
+                    {
+                        text: '<i class="bi bi-check-all"></i>',
+                        extend: "selectAll",
+                        titleAttr: 'Select All'
+                    },
+                    {
+                        text: '<i class="bi bi-x"></i>',
+                        extend: "selectNone",
+                        titleAttr: 'Clear Selection'
+                    },
+                    {
+                        text: '<i class="bi bi-file-text"></i>',
+                        action: function (e, dt, node, config) {
+                            selectedDevice = dataTable.rows( {selected:true} ).data().toArray()[0];
+                            window.location.href = `/ui/logs/${selectedDevice["uuid"]}`;
+                        },
+                        className: "buttons-logs",
+                        titleAttr: 'View Log'
+                    },
+                ]
+            },
+            bottom1Start: {
+                buttons: [
+                    {
+                        text: '<i class="bi bi-pen" ></i>',
+                        action: function (e, dt, node, config) {
+                            const input = document.getElementById("device-selected-name");
+                            const selectedDeviceName = dt.rows( {selected:true} ).data().toArray().map(d => d["name"])[0];
+                            input.value = selectedDeviceName;
+
+                            new bootstrap.Modal('#device-rename-modal').show();
+                        },
+                        className: "buttons-rename",
+                        titleAttr: 'Rename Devices'
+                    },
+                    {
+                        text: '<i class="bi bi-gear" ></i>',
+                        action: function (e, dt, node, config) {
+                            new bootstrap.Modal('#device-config-modal').show();
+                        },
+                        className: "buttons-config",
+                        titleAttr: 'Configure Devices'
+                    },
+                    {
+                        text: '<i class="bi bi-trash" ></i>',
+                        action: function (e, dt, node, config) {
+                            selectedDevices = dt.rows( {selected:true} ).data().toArray().map(d => d["uuid"]);
+                            deleteDevices(selectedDevices);
+                        },
+                        className: "buttons-delete",
+                        titleAttr: 'Delete Devices'
+                    },
+                    {
+                        text: '<i class="bi bi-box-arrow-in-up-right"></i>',
+                        action: function (e, dt, node, config) {
+                            selectedDevices = dataTable.rows( {selected:true} ).data().toArray().map(d => d["uuid"]);
+                            forceUpdateDevices(selectedDevices);
+                        },
+                        className: "buttons-force-update",
+                        titleAttr: 'Force Update'
+                    },
+                    {
+                        text: '<i class="bi bi-pin-angle"></i>',
+                        action: function (e, dt, node, config) {
+                            selectedDevices = dataTable.rows( {selected:true} ).data().toArray().map(d => d["uuid"]);
+                            pinDevices(selectedDevices);
+                        },
+                        className: "buttons-pin",
+                        titleAttr: 'Pin Version'
+                    },
+                ]
+            }
+        },
+    });
+
+    dataTable.on('click', 'button.edit-name', function (e) {
+        let data = dataTable.row(e.target.closest('tr')).data();
+        uuid = data["uuid"];
+        updateDeviceName(uuid);
+    });
+
+    dataTable.on( 'select', function ( e, dt, type, indexes ) {
+        updateBtnState();
+    } ).on( 'deselect', function ( e, dt, type, indexes ) {
+        updateBtnState();
+    } );
+
+    setInterval(function () {
+        dataTable.ajax.reload(null, false);
+    }, TABLE_UPDATE_TIME);
+
+    updateFirmwareSelection();
+});
+
+
+function updateBtnState() {
+    dataTable = $("#device-table").DataTable();
+    if (dataTable.rows( {selected:true} ).any()){
+        document.querySelector('button.buttons-select-none').classList.remove('disabled');
+        document.querySelector('button.buttons-config').classList.remove('disabled');
+        document.querySelector('button.buttons-force-update').classList.remove('disabled');
+        document.querySelector('button.buttons-delete').classList.remove('disabled');
+        document.querySelector('button.buttons-pin').classList.remove('disabled');
+    } else {
+        document.querySelector('button.buttons-select-none').classList.add('disabled');
+        document.querySelector('button.buttons-config').classList.add('disabled');
+        document.querySelector('button.buttons-force-update').classList.add('disabled');
+        document.querySelector('button.buttons-delete').classList.add('disabled');
+        document.querySelector('button.buttons-pin').classList.add('disabled');
+    }
+    if (dataTable.rows( {selected:true} ).count() == 1){
+        document.querySelector('button.buttons-logs').classList.remove('disabled');
+        document.querySelector('button.buttons-rename').classList.remove('disabled');
+    } else {
+        document.querySelector('button.buttons-logs').classList.add('disabled');
+        document.querySelector('button.buttons-rename').classList.add('disabled');
+    }
+
+
+    if(dataTable.rows( {selected:true} ).ids().toArray().length === dataTable.rows().ids().toArray().length){
+        document.querySelector('button.buttons-select-all').classList.add('disabled');
+    } else {
+        document.querySelector('button.buttons-select-all').classList.remove('disabled');
+    }
+}
+
+function updateFirmwareSelection() {
+    const url = '/api/firmware/all';
+
+    fetch(url)
+    .then(response => {
+        if (!response.ok) {
+            throw new Error('Request failed');
+        }
+        return response.json();
+    })
+    .then(data => {
+        selectElem = document.getElementById("device-selected-fw");
+
+        optionElem = document.createElement("option");
+        optionElem.value = "latest";
+        optionElem.textContent = "latest";
+
+        selectElem.appendChild(optionElem);
+
+        data.forEach(item => {
+            optionElem = document.createElement("option");
+            optionElem.value = item["name"];
+            optionElem.textContent = item["name"];
+
+            selectElem.appendChild(optionElem);
+        });
+    })
+    .catch(error => {
+        console.error('Failed to fetch device data:', error);
+    });
+}
+
+function updateDeviceConfig() {
+    selectedDevices = dataTable.rows( {selected:true} ).data().toArray().map(d => d["uuid"]);
+    selectedFirmware = document.getElementById("device-selected-fw").value;
+
+    fetch('/api/devices/update', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            'devices': selectedDevices,
+            'firmware': selectedFirmware
+        })
+    }).then(response => {
+        if (!response.ok) {
+            throw new Error('Failed to update devices.');
+        }
+        return response.json();
+    }).catch(error => {
+        console.error('Error:', error);
+    });
+
+    setTimeout(updateDeviceList, 50);
+}
+
+function updateDeviceName() {
+    selectedDevices = dataTable.rows( {selected:true} ).data().toArray().map(d => d["uuid"]);
+    name = document.getElementById("device-selected-name").value;
+
+    fetch('/api/devices/update', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            'devices': selectedDevices,
+            'name': name
+        })
+    }).then(response => {
+        if (!response.ok) {
+            throw new Error('Failed to update devices.');
+        }
+        return response.json();
+    }).catch(error => {
+        console.error('Error:', error);
+    });
+
+    setTimeout(updateDeviceList, 50);
+}
+
+
+function forceUpdateDevices(devices) {
+    fetch('/api/devices/force_update', {
+        method: 'POST',
+         headers: {
+            'Content-Type': 'application/json'
+         },
+        body: JSON.stringify({
+            'devices': devices,
+        })
+    }).then(response => {
+        if (!response.ok) {
+            throw new Error('Failed to force device update.');
+        }
+        return response.json();
+    }).catch(error => {
+        console.error('Error:', error);
+    });
+
+    setTimeout(updateDeviceList, 50);
+}
+
+function deleteDevices(devices) {
+    fetch('/api/devices/delete', {
+        method: 'POST',
+         headers: {
+            'Content-Type': 'application/json'
+         },
+        body: JSON.stringify({
+            'devices': devices,
+        })
+    }).then(response => {
+        if (!response.ok) {
+            throw new Error('Failed to delete devices.');
+        }
+        return response.json();
+    }).catch(error => {
+        console.error('Error:', error);
+    });
+
+    setTimeout(updateDeviceList, 50);
+}
+
+function pinDevices(devices) {
+    fetch('/api/devices/update', {
+        method: 'POST',
+         headers: {
+            'Content-Type': 'application/json'
+         },
+        body: JSON.stringify({
+            'devices': devices,
+            'firmware': "pinned"
+        })
+    }).then(response => {
+        if (!response.ok) {
+            throw new Error('Failed to update devices.');
+        }
+        return response.json();
+    }).catch(error => {
+        console.error('Error:', error);
+    });
+
+    setTimeout(updateDeviceList, 50);
+}
+
+function updateDeviceList() {
+    dataTable.ajax.reload();
+}
+
+function secondsToRecentDate(t) {
+    if (t == null) {
+        return null
+    }
+    t = Number(t);
+    var d = Math.floor(t / 86400)
+    var h = Math.floor(t % 86400 / 3600);
+    var m = Math.floor(t % 86400 % 3600 / 60);
+    var s = Math.floor(t % 86400 % 3600 % 60);
+
+    if (d > 0) {
+        return d + (d == 1 ? " day" : " days");
+    } else if (h > 0) {
+        return h + (h == 1 ? " hour" : " hours");
+    } else if (m > 0) {
+        return m + (m == 1 ? " minute" : " minutes");
+    } else {
+        return s + (s == 1 ? " second" : " seconds");
+    }
+}

goosebit/ui/static/js/firmware.js

@@ -0,0 +1,131 @@
+const CHUNK_SIZE = 10 * 1024 * 1024; // 10 MB chunk size
+const form = document.getElementById('upload-form');
+const fileInput = document.getElementById('file-upload');
+const fileSubmit = document.getElementById('file-upload-submit');
+const progressBar = document.getElementById('upload-progress');
+
+form.addEventListener('submit', e => {
+    e.preventDefault();
+    sendFileChunks(fileInput.files[0])
+});
+
+const sendFileChunks = async (file) => {
+    const totalChunks = Math.ceil(file.size / CHUNK_SIZE);
+    let start = 0;
+    let uploadedChunks = 0;
+
+    fileSubmit.disabled = true
+    fileInput.disabled = true
+
+    for (let i = 0; i < totalChunks; i++) {
+        const end = Math.min(start + CHUNK_SIZE, file.size);
+        const chunk = file.slice(start, end);
+        const formData = new FormData();
+        formData.append('chunk', chunk);
+        formData.append('filename', file.name);
+        if (i == 0) {
+            formData.append('init', true);
+        } else  {
+            formData.append('init', false);
+        }
+
+        if (i == totalChunks - 1) {
+            formData.append('done', true);
+        } else {
+            formData.append('done', false);
+        }
+
+        const response = await fetch("/ui/upload", {
+            method: 'POST',
+            body: formData,
+        });
+
+        if (response.ok) {
+            uploadedChunks++;
+            const progress = (uploadedChunks / totalChunks) * 100;
+            progressBar.style.width = `${progress}%`;
+            progressBar.innerHTML = `${Math.round(progress)}%`;
+        }
+
+        start = end;
+    }
+
+    window.setTimeout(function () {
+        resetProgress()
+    }, 1000)
+};
+
+function resetProgress() {
+    fileInput.disabled = false;
+    fileSubmit.disabled = false;
+    progressBar.style.width = `0%`;
+    progressBar.innerHTML = `0%`;
+    updateFirmwareList();
+}
+
+document.addEventListener("DOMContentLoaded", function() {
+    updateFirmwareList();
+});
+
+
+function updateFirmwareList() {
+    const url = '/api/firmware/all';
+
+    fetch(url)
+    .then(response => {
+        if (!response.ok) {
+            throw new Error('Request failed');
+        }
+        return response.json();
+    })
+    .then(data => {
+        const list = document.getElementById('firmware-list');
+        list.innerHTML = "";
+
+        data.forEach(item => {
+            const listItem = document.createElement('li');
+            listItem.textContent = item["version"];
+            listItem.classList = ["list-group-item d-flex justify-content-between align-items-center"];
+
+            const btnGroup = document.createElement("div")
+            btnGroup.classList = "btn-group"
+            btnGroup.role = "group"
+
+            const deleteBtn = document.createElement('button');
+            deleteBtn.innerHTML =  "<i class='bi bi-trash'></i>";
+            deleteBtn.classList = ["btn btn-danger"];
+            deleteBtn.onclick = function() {deleteFirmware(item["name"])};
+
+            const downloadBtn = document.createElement('button');
+            downloadBtn.innerHTML = "<i class='bi bi-cloud-download'></i>";
+            downloadBtn.classList = ["btn btn-primary"];
+            downloadBtn.onclick = function() {window.location.href = `/api/download/${item["name"]}`};
+
+            btnGroup.appendChild(deleteBtn);
+            btnGroup.appendChild(downloadBtn);
+
+            listItem.appendChild(btnGroup);
+            list.appendChild(listItem);
+        });
+    })
+    .catch(error => {
+        console.error('Failed to fetch firmware data:', error);
+    });
+}
+
+function deleteFirmware(file) {
+    fetch('/api/firmware/delete', {
+        method: 'POST',
+        body: file,
+    })
+    .then(response => {
+        if (!response.ok) {
+            throw new Error('Failed to delete firmware.');
+        }
+        updateFirmwareList();
+        return response.json();
+    })
+    .catch(error => {
+        console.error('Error:', error);
+    });
+}