infoscreen3/views/admin/link.twig

{% extends 'layout/edit.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>
        let bundle = "{{ bundle }}";
        let file = "{{ file }}";
        let displayId = {{ displayId }};
    </script>
{% endblock %}

{% block body %}
    <div class="ui segment">
        <form class="ui form">
            <div class="field">
                <label>{{ t("admin.addLink.name") }}</label>
                <input type="text" id="name" placeholder="weblink 1" required>
            </div>
            <div class="field">
                <label>{{ t("admin.addLink.url") }}</label>
                <input type="text" id="weburl" placeholder="http://user:pass@localhost.lan/path" required>
            </div>
            <div class="field">
                <label>{{ t("admin.addLink.zoom") }}</label>
                <input type="number" id="zoom" step="0.1" min="0.5" value="1.0"/>
            </div>
            <div class="field">
                <label>{{ t("admin.addLink.duration") }}</label>
                <input type="number" id="duration" min="5"/>
            </div>
            <div class="field">
                <div id="displaytime" class="ui toggle checkbox">
                    <input type="checkbox"/>
                    <label>{{ t("admin.addLink.displayTime") }}</label>
                </div>
            </div>
            <div class="ui green button" onclick="save();">{{ t("actions.save") }}</div>

            <div class="ui red basic buttons">
                <div onclick="announce({{ displayId }})" class="ui button">{{ t("actions.announce") }}</div>
                <div class="ui floating dropdown icon button" id="dropdownAnnounce">
                    <i class="dropdown icon"></i>
                    <div class="menu">
                        <div onclick="announce(null)" class="item"><i
                                    class="exclamation icon"></i> {{ t("actions.announceAll") }}</div>
                    </div>
                </div>
            </div>
            <div class="ui basic button" onclick="window.close()">{{ t("actions.cancel") }}</div>
        </form>
    </div>
    <script>
        var socket = io("{{ config.serverUrl }}/admin-{{ displayId }}");

        $(function () {
            $("#time").checkbox();
            $("#dropdownAnnounce").dropdown();
        });

        function announce(dispId) {
            var duration = null;
            var zoom = 1.0;
            if ($.isNumeric($("#duration").val())) {
                duration = parseInt($("#duration").val());

            }
            if ($.isNumeric($("#zoom").val())) {
                zoom = parseFloat($("#zoom").val());
            }

            var obj = {
                json: {
                    type: "webPage",
                    webUrl: $("#weburl").val(),
                    zoom: zoom,
                    displayTime: $("#displaytime").checkbox('is checked')
                },
                displayId: dispId,
                duration: duration,
                transition: null,
                png: null,

            };
            socket.emit("admin.overrideWebPage", obj);
        }

        function save() {
            var duration = null;
            var zoom = 1.0;
            if ($.isNumeric($("#duration").val())) {
                duration = parseInt($("#duration").val());

            }
            if ($.isNumeric($("#zoom").val())) {
                zoom = parseFloat($("#zoom").val());
            }

            var obj = {
                filename: file,
                bundleName: bundle,
                name: $("#name").val(),
                webUrl: $("#weburl").val(),
                duration: duration,
                zoom: zoom,
                displayTime: $("#displaytime").checkbox('is checked'),
                epochStart: -1,
                epochEnd: -1
            };
            socket.emit("edit.saveLink", obj);
        }

        socket.on("connect", function () {
            socket.emit("admin.editLink", {bundleName: bundle, fileName: file});
        });


        socket.on("callback.webpage", function (data) {
            var json = data.json;

            var zoom = json.zoom || 1;

            $("#name").val(json.name);
            $("#weburl").val(json.webUrl);
            $("#zoom").val(json.zoom + "");
            $("#duration").val(json.duration + "");
            if (json.displayTime) {
                $("#displaytime").checkbox('set checked', true);
            } else {
                $("#displaytime").checkbox('set unchecked', false);
            }

        });

        socket.on("callback.saveLink", function (data) {
            if (!data.err) {
                window.close();
            } else {
                alert(data.err);
            }
        });


    </script>

{% endblock %}