infoscreen3/views/admin/link.twig

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

{% block header %}
    <script src="/socket.io/socket.io.js"></script>
    <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 basic button" onclick="save();">{{ t("actions.save") }}</div>
            <div class="ui basic button" onclick="window.close()">{{ t("actions.cancel") }}</div>
        </form>
    </div>
    <script>
        var socket = io.connect("{{ config.serverUrl }}:{{ config.serverListenPort }}/admin-{{ displayId }}");

        $(function () {
            $("#time").checkbox();

        });

        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')
            };
            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 %}