infoscreen3/views/admin/dashboard.twig

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

{% block header %}
    <script src="/socket.io/socket.io.js"></script>
    <script src="/js/sharedScript.js"></script>
    {% if config.useLocalAssets %}
        <script src="/assets/jquery.jeditable.min.js"></script>
        <script src="/assets/vue.js"></script>
    {% else %}
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jeditable.js/2.0.6/jquery.jeditable.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.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="">

                    </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="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/{{ displayId }}?isPreview=1"></iframe>
                    </div>
                </div>

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

    <!-- menu -->
    <div class="ui primary bottom fixed two item pointing menu" style="height: 5vh;">
        <div class="item">
            <div class="ui basic text"> {{ t("admin.dashboard.statusMessage") }}</div>
            <div class="ui fluid action input">
                <input id="statusMessageAdmin" value="" placeholder=""/>
                <div class="ui small basic green button" onclick="setStatusMessage();">{{ t("actions.set") }}</div>
            </div>
        </div>
        <div class="item">
            <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>
            <div style="width: 1rem;"></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>
    <template id="allBundlesTemplate">
        {% verbatim %}  
        <div class="ui slides list">
            <div v-for="bundle in bundleDirs" class="ui green message item">             
                <div class="ui right floated content" style="width: fit-content;">
                    <button class="ui small basic inverted icon button" @click="editBundleProperties(bundle.dir)">
                    <i class="edit icon"></i></button>
                    <button class="ui small basic inverted icon button" @click="editBundleSlides(bundle.dir)">
                        <i class="list icon"></i></button>
                    <button class="ui small basic inverted icon button" @click="changeBundle(bundle.dir)">
                        <i class="play icon"></i></button>
                </div>
                <div class="content">
                    <div>{{ bundle.name }}</div>
                </div>
            </div>                           
        </div>
        {% endverbatim %}
    </template>

    <script>
        var socket = io("{{ config.serverUrl }}:{{ config.serverListenPort }}/admin-{{ displayId }}");
        var displayId = {{ displayId }};
    </script>
    <script src="/js/dashboard.js"></script>
    <script>
        var allBundlesVue = new Vue({
            el: "#allBundles",
            template: "#allBundlesTemplate",
            data: {
                bundleDirs: [],
                current: "default",
            },
            methods: {
                editBundleProperties: function (bundle) {
                    window.open("/admin/edit/bundleProperties?bundle=" + bundle, '_blank', 'width=400,height=800,scrollbars=yes,status=no,location=no');
                },
                editBundleSlides: function (name) {
                    window.open("/admin/edit/bundleSlides?bundle=" + name, '_blank', 'width=400,height=800,scrollbars=yes,status=no,location=no');
                },
                changeBundle: function (name) {
                    if (confirm('{{ t("admin.dashboard.askChangeBundle") }}') == true) {
                        emit("admin.setBundle", {bundle: name});
                    }
                    return true;
                }
            }
        });
    </script>
{% endblock %}