infoscreen3/views/admin/overview.twig

{% extends 'layout/admin.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 %}
    <script>
       var socket = io("{{ config.serverUrl }}/admin");
    </script>
{% 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">
                {% for display in config.displays %}
                    <div class="ui card">
                        <iframe class="ui img fluid" src="/display/{{ loop.index0 }}/lite?videoVolume=0"></iframe>
                        <div class="content">
                            <h3 class="ui center aligned header">{{ display.name }}</h3>
                        </div>
                        <div class="extra content">
                            <a href="/admin/display/{{ loop.index0 }}" class="ui icon button"> <i
                                        class="wrench icon"></i></a>
                            <!-- Controls -->
                            <div class="ui inverted buttons">
                                <button class="ui icon button"
                                        onclick="socket.emit('controls.previous', {displayId: parseInt({{ loop.index0 }})});">
                                    <i class="step backward icon"></i>
                                </button>

                                <button id="play{{ loop.index0 }}" class="ui icon button"
                                        onclick="socket.emit('controls.play', {displayId: parseInt({{ loop.index0 }})});">
                                    <i class="play icon"></i>
                                </button>

                                <button id="pause{{ loop.index0 }}" class="ui icon button"
                                        onclick="socket.emit('controls.pause', {displayId: parseInt({{ loop.index0 }})});">
                                    <i class="pause icon"></i>
                                </button>

                                <button class="ui icon button"
                                        onclick="socket.emit('controls.next', {displayId: parseInt({{ loop.index0 }})});">
                                    <i class="step forward icon"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>

    <script>
        var serverOptions = {};
        var bundleData = {};
        var displayCount = {{ config.displays.length }};

        socket.on('callback.serverOptions', function (data) {
            for (var obj of data) {
                updateControls(obj.serverOptions);
            }
        });

        function updateControls(serverOptions) {
            var id = serverOptions.displayId;

            if (serverOptions.blackout) {
                $('#blackout' + id).removeClass('basic');
            } else {
                $('#blackout' + id).addClass('basic');
            }

            if (serverOptions.displayTime) {
                $('#toggleTime' + id).removeClass('basic');
            } else {
                $('#toggleTime' + id).addClass('basic');
            }

            if (serverOptions.isStreaming) {
                $('#stream' + id).removeClass('basic');
            } else {
                $('#stream' + id).addClass('basic');
            }

            if (serverOptions.loop) {
                $('#play' + id).addClass('green');
                $('#pause' + id).removeClass('orange');

            } else {
                $('#play' + id).removeClass('green');
                $('#pause' + id).addClass('orange');
            }
        }
    </script>
{% endblock %}