infoscreen3/views/admin/dashboard.twig

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

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

{% endblock %}

{% block body %}
    <!-- top menu -->
    <div class="ui primary top attached pointing menu" style="height: 5vh;">
        <a class="header item" href="/admin">
            {{ t("infoscreen") }}
        </a>

        <div id="displays" class="ui scrolling dropdown item">
            <div class="ui small breadcrumb">
                <span class="section">{{ t("navs.display") }}</span>
                <i class="right chevron icon divider"></i>
                <span class="section currentDisplay"></span>
            </div>
            <i class="dropdown icon"></i>
        </div>

        <div id="bundles" class="ui scrolling dropdown item">
            <div class="ui small breadcrumb">
                <span class="section">{{ t("navs.bundle") }}</span>
                <i class="right chevron icon divider"></i>
                <span id="currentBundle" class="section"></span>
            </div>
            <i class="dropdown icon"></i>
        </div>

        <div id="transitions" class="ui scrolling dropdown item">
            <div class="ui small breadcrumb">
                <span class="section">{{ t("navs.transition") }}</span>
                <i class="right chevron icon divider"></i>
                <span id="currentTransition" class="section"></span>
            </div>
            <i class="dropdown icon"></i>
        </div>

        <div class="right menu">
            <div class="item">
                <a href="/logout" class="ui red basic button">{{ t("auth.logout") }}</a>
            </div>
        </div>
    </div>

    <!-- Grids -->
    <div class="column">
        <div class="ui three column grid">

            <div class="ui five wide column">
                <div class="ui inverted basic segment" style="height: 90vh; overflow-y: auto">
                    <h1 class="ui inverted header">
                        {{ t("admin.dashboard.allBundles") }}
                    </h1>
                    {% if permission.dashboard.addBundle %}
                        <button class="ui basic inverted button"
                                onclick="createNewBundle();">  {{ t("actions.createNew") }}</button>
                        <button class="ui basic inverted button"
                                onclick="editBundles();">  {{ t("actions.edit") }}</button>

                    {% endif %}
                    <div id="allBundles" class="ui slides list" >

                    </div>
                </div>
            </div>

            <div class="ui five wide column">
                <div class="ui inverted basic segment" style="height: 90vh; overflow-y: auto">
                    <h1 class="ui inverted header">
                        {{ t("admin.dashboard.slidesInRotation") }}
                    </h1>
                    {% if permission.dashboard.addSlides %}
                        <button class="ui basic inverted button" onclick="createNewSlide();">{{ t("actions.createNew") }}
                        </button>
                        <button class="ui basic inverted button" onclick="createNewVideo();">{{ t("actions.addVideo") }}
                        </button>
                    {% endif %}
                    {% if permission.dashboard.addWebPage %}
                        <button class="ui basic inverted button" onclick="addLink();">{{ t("actions.addWebPage") }}
                        </button>
                    {% endif %}
                    <div id="bundleSlides" class="ui sortable slides list">

                    </div>
                </div>
            </div>

            <div class="center aligned six wide column">
                <div class="row">
                    <div id="programContainer" class="ui nopadded basic segment">
                        <h2 class="ui inverted nopadded header currentDisplay"> {{ t("admin.dashboard.program") }} </h2>
                        <iframe class="nopadded" id="program" src="/display/{{ displayId }}?isPreview=1"></iframe>
                    </div>

                    <div class="ui nopadded segment">

                    </div>

                <div class="row">
                    <div class="ui inverted segment">                    
                        <h4> {{ t("admin.dashboard.statusMessage") }}</h4>
                        <div class="ui fluid grey inverted action input">
                        <textarea style="width: 100%;" id="statusMessageAdmin" placeholder="{{ t("admin.dashboard.statusMessage") }}" data-max="2"></textarea>
                        <button class="ui small green button" onclick="setStatusMessage();">{{ t("actions.set") }}</button>
                        <button class="ui small red button" onclick="clearStatusMessage();">{{ t("actions.clear") }}</button>
                    </div>

                    <div class="ui form">
                        <div class="inline fields" style="gap: 1rem;">
                            <!-- Toggle checkbox for scrolling -->
                            <div class="field">
                            <div class="ui mini toggle checkbox">
                                <input type="checkbox" name="statusMessageScrolling" id="statusMessageScrolling">
                                <label for="statusMessageScrolling" style="color: var(--label-color) !important;">
                                {{ t("admin.dashboard.statusMessageScrolling") }}
                                </label>
                            </div>
                            </div>
                            <!-- Number inpu for scroll duration -->
                            <div class="field">
                            <label for="statusMessageScrollingDuration"
                                style="color: var(--label-color) !important; line-height:3em; font-weight:normal; font-size:14px ">
                                {{ t("admin.dashboard.statusMessageScrollingDuration") }}
                            </label>
                            <div class="ui mini input">
                                <input type="number" 
                                    id="statusMessageScrollingDuration" 
                                    name="statusMessageScrollingDuration" 
                                    min="1" max="99" value="15">
                            </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

    <!-- menu -->
    <div class="ui primary bottom fixed one item pointing menu" style="height: 5vh;">
        <div class="item">

            <div class="ui inverted buttons">
                            <div class="ui text center">
                            <button class="ui icon button" onclick="emit('controls.previous');">
                                <i class="step backward icon"></i>
                            </button>

                            <button id="play" class="ui icon button" onclick="emit('controls.play');">
                                <i class="play icon"></i>
                            </button>

                            <button id="pause" class="ui icon button" onclick="emit('controls.pause');">
                                <i class="pause icon"></i>
                            </button>

                            <button class="ui  icon button" onclick="emit('controls.next');">
                                <i class="step forward icon"></i>
                            </button>
                            </div>
                        </div>

                        <div class="ui buttons">
                        <button id="blackout" class="ui black basic button" onclick="emit('controls.blackout');">
                            {{ t("actions.blackout") }}
                        </button>
                        <button id="toggleTime" class="ui teal basic button" onclick="emit('controls.time.toggle');">
                            {{ t("actions.displayTime") }}
                        </button>
                        {% if config.mediaServer %}
                            <button id="stream" class="ui blue basic button"
                                    onclick="emit('controls.startStream');">
                                {{ t("actions.startStream") }}
                            </button>
                        {% endif %}
                        <button class="ui red basic button"
                                onclick="forceReload()">
                            {{ t("actions.forceReload") }}
                        </button>
                        </div>
        </div>
    </div>
    <!-- menu -->
    <!-- modal -->
    <div id="newBundle" class="ui modal">
        <div class="header">{{ t("actions.createNew") }}</div>
        <div class="ui scrolling content form">
            <label>{{ t("admin.dashboard.bundleDirName") }}</label>
            <input class="ui input" type="text" id="newBundleDirName" value="" required/>
            <label>{{ t("admin.dashboard.bundleName") }}</label>
            <input class="ui input" type="text" id="newBundleName" value="" required/>

        </div>
        <div class="actions">
            <div class="ui ok button">{{ t("actions.save") }}</div>
            <div class="ui cancel button">{{ t("actions.cancel") }}</div>
        </div>
    </div>

    <script>
        var socket = io("{{ config.serverUrl }}/admin-{{ displayId }}");
        var displayId = {{ displayId }};
        var serverUrl = "{{ config.serverUrl }}";
        var askMessage = '{{ t("admin.dashboard.askChangeBundle") }}';
    </script>
    <script src="/js/dashboard.js"></script>
{% endblock %}