webug/templates/edit.html

{% extends "layout/default.html" %}

{% block extend_head %}
<script src="{{ url_for('static', filename='js/socket.io.js') }}"></script>
<style>
    body {
        color: #EAEAEA;
    }

    display:before {
        content: attr(title);
    }

    displaylist:before {
        content: "Displays";

        background-color: #333;
        padding: 1em;
    }

    displaylist {
        display: grid;
        grid-template-rows: auto 1fr;

        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;

        background-color: #242424;

        transition: transform .2s ease, opacity .2s ease;
        transform: scale(1);
        opacity: 1;
    }

    displaylist[hidden], displaylist:focus {
        transform: scale(.96);
        opacity: 0;
    }

    scrollcontainer {
        display: block;
        overflow: auto;
    }

    displaylist list {
        display: grid;
        gap: 1em;

        padding: 1em;
    }

    displaylist list > a {
        border: 2px solid #333;
        padding: 1em;
    }

    displaylist fallback {
        padding: 1em;
    }

    list:not(:empty) + fallback {
        display: none;
    }

    fallback {
        display: grid;

        place-content: center;
        text-align: center;

        gap: 1em;
    }

    button {
        display: grid;
        place-content: center;
        place-items: center;
        
        cursor: pointer;

        border: 2px solid #333;

        color: #919191;

        background-color: transparent;

        padding: 1em;

        transition: .2s ease background-color, .2s ease color;
    }

    button:hover, button:focus {
        background-color: #000;
        color: #EAEAEA;
    }
</style>
{% endblock %}

{% block content %}
<displaylist hidden>
    <scrollcontainer>
        <list></list>
        <fallback>
            <span>
                There is no running displays.<br>
                Create new display to continue.
            </span>
            <button>
                <i class="fas fa-plus fa-2x"></i>
                <span>New display</span>
            </button>
        </fallback>
    </scrollcontainer>
</displaylist>
<display></display>
<script>
    const displayList = document.getElementsByTagName("displaylist")[0];
    const display = document.getElementsByTagName("display")[0];
    const socket = io();

    socket.on("connect", () => {
        socket.emit("display", {action: "list"});
    });

    socket.on("display", (json) => {
        switch(json.action) {
            default:
                console.warn("Unknown data: " + json);
                break;
            case "list":
                onDisplayList(json.value);
                break;
        }
    });

    function onDisplayList(list) {
        function add(item) {
            let displayOption = document.createElement("a");
            displayOption.innerText = item;
            displayList.getElementsByTagName("list")[0].appendChild(displayOption);
        }

        displayList.getElementsByTagName("list")[0].innerHTML = "";
        for (item in list) {
            add(item);
        }

        displayList.hidden = false;
    }
</script>
{% endblock %}