infoscreen3/views/index.twig

{% extends 'layout/view.twig' %}

{% block header %}
    {% if config.useLocalAssets %}
        <script src="/assets/socket.io.min.js"></script>
    {% else %}
        <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.6.0/socket.io.min.js"></script>
    {% endif %}
{% endblock %}

{% block body %}
    <div class="ui container">
        <div class="ui basic segment">
            <h1 class="ui center aligned inverted header">
                {{ t ("infoscreen") }}
            </h1>
            <h2 class="ui center aligned inverted dividing header">{{ t("index.displays") }}</h2>

            <div class="ui three stackable cards" id="displayList">
            </div>
        </div>
    </div>

    <script>
        var socket = io.connect("{{ config.serverUrl }}/lobby");
        var intervalId = null;

        /** when connected **/
        socket.on('connect', function () {
            socket.emit("displays");
            clearInterval(intervalId);
            intervalId = setInterval(function () {
                socket.emit("displays");
            }, 15000);
        });

        socket.on("callback.displays", function (data) {
            var index = 0;
            var output = "";
            for (var i in data.displays) {
                var display = data.displays[i];
                var html = `
                <div class="ui card">
                    <h3 class="ui center aligned top attached header ">${display.name}</h3>
                    <div onclick="window.location='display/${index.toString()}'" class="image" style="background: black;">
                        <img src="${data.previewImages[i]}" />
                    </div>
                    <div class="content">
                        <div class="ui attached buttons">
                            <a href="/display/${index.toString()}" class="ui positive button">{{ t("index.normal") }}</a>
                            <div class="or" data-text="{{ t("index.splitter") }}"></div>
                            <a href="/display/${index.toString()}/css" class="ui button">{{ t("index.css") }}</a>
                            <div class="or" data-text="{{ t("index.splitter") }}"></div>
                            <a href="/display/${index.toString()}/lite" class="ui button">{{ t("index.lite") }}</a>
                            </div>
                        </div><br>
                        <a href="/admin/display/${index.toString()}" class="ui bottom attached gray button">{{ t("index.admin") }}</a>
                </div>`;
                output += html;
                index += 1;
            }

            $('#displayList').html(output);
        });

        socket.on('error', (error) => {
            alert(error);
        });

        window.onError = function (e) {
            console.log(e);
        };
    </script>
{% endblock %}