infoscreen3/views/admin/dashboard.twig

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

{% block header %}
    <script src="/socket.io/socket.io.js"></script>
    {% if config.useLocalAssets %}
        <script src="/assets/jquery.jeditable.min.js"></script>
    {% else %}
        <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;">
        <span class="header item">
          {{ t("infoscreen") }}
        </span>

        <div id="displays" class="ui 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 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 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>
                    {% endif %}
                    <div id="allBundles" class="ui list"></div>
                </div>
            </div>

            <div class="ui five wide column">
                <div class="ui inverted basic segment" style="height: 95vh; overflow-y: auto">
                    <h1 class="ui inverted header">
                        {{ t("admin.dashboard.slidesInRotation") }}
                    </h1>
                    {% if permission.dashboard.addSlides %}
                        <button class="ui basic inverted button" onclick="createNew();">{{ t("actions.createNew") }}
                        </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 list">

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

            <div class="center aligned six wide column">

                <div class="row">
                    <div id="previewContainer" class="ui inverted segment">
                        <h2 class="ui inverted nopadded header"> {{ t("admin.dashboard.preview") }}</h2>
                        <iframe style="overflow-scrolling: unset; overflow: unset;" class="nopadded" id="preview"
                                src="/admin/preview?uid={{ uid }}"></iframe>
                    </div>
                </div>

                <div class="row">
                    <div id="programContainer" class="ui inverted segment">
                        <h2 class="ui inverted nopadded header currentDisplay"> {{ t("admin.dashboard.program") }} </h2>
                        <iframe class="nopadded" id="program" src="/display/0"></iframe>
                    </div>
                </div>

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

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

        <div class="right menu">
            <div class="ui inverted buttons">
                <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>

            <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', {streamName: 'STREAM_NAME' });">
                    {{ t("actions.startStream") }}
                </button>
            {% endif %}
            <button class="ui red basic button"
                    onclick="forceReload()">
                {{ t("actions.forceReload") }}
            </button>
        </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.connect("{{ config.serverUrl }}:{{ config.serverListenPort }}/admin");
        var displayId = {{ displayId }};
    </script>
    <script src="/js/dashboard.js"></script>
{% endblock %}