infoscreen3/views/admin/editBundles.twig

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

{% block header %}
    {% 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 %}
    <style>
    #sortable1, #sortable2 {
        height: 100%;
    }
    </style>
{% endblock %}

{% block body %}
	<div class="ui inverted basic segment">
		<h1 class="ui inverted header">{{ t("admin.editBundleSlides.editBundles")}}</h1>

		<div class="ui grid" style="height: 100%;">
			<div class="ui eight wide column">
				<div class="ui selection dropdown" id="bundle1">
					<input type="hidden" name="bundle1">
					<i class="dropdown icon"></i>
					<div class="default text">Bundle</div>
					<div class="menu">
					</div>
				</div>
				<div class="ui slides list connectedSortable" id="sortable1" data-bundleDir="">

                </div>
			</div>
			<div class="eight wide column">
				<div class="ui selection dropdown" id="bundle2">
					<input type="hidden" name="bundle2">
					<i class="dropdown icon"></i>
					<div class="default text">Bundle</div>
					<div class="menu">
					</div>
				</div>
				<div class="ui slides list connectedSortable" id="sortable2"  data-bundleDir="">

				</div>
			</div>
		</div>
	</div>
	<script>
        var socket = io("{{ config.serverUrl }}/admin");

        function editSlide(bundleName, uuid, type) {
            switch (type) {
                case "slide":
                    window.open("/admin/edit/slide?bundle=" + bundleName + "&file=" + uuid, '_blank', 'location=no,height=800,width=1304,scrollbars=no,status=no');
                    break;
                case "webpage":
                    window.open("/admin/edit/link?bundle=" + bundleName + "&file=" + uuid, '_blank', 'location=no,height=400,width=600,scrollbars=no,status=no');
                    break;
            }
        }

        function duplicateSlide(bundleDir, uuid) {
                if (confirm('{{ t("admin.editBundleSlides.askDuplicate")}}') == true) {
                    socket.emit("admin.duplicateSlide", {bundleName: bundleDir, uuid: uuid});
                }
                return true;
            }

            function removeSlide(bundleDir, uuid) {
                if (confirm('{{ t("admin.editBundleSlides.askDelete")}}') == true) {
                    socket.emit("admin.removeSlide", {bundleName: bundleDir, uuid: uuid});
                }
                return true;
            }


        function updateBundleData() {
            loadBundleData("#sortable1", $("#bundle1").dropdown("get value"));
            loadBundleData("#sortable2", $("#bundle2").dropdown("get value"));
            }

        function loadBundleData(block, bundleDir) {
            $.getJSON("/admin/ajax/getSlides?bundle="+bundleDir, function (data) {
                var htmlData = "";

                for(var slide of data.allSlides) {
                    htmlData +=`<div class="ui green message item" data-uuid="${slide.uuid}" data-bundle="${bundleDir}">
                    <div class="ui right floated content" style="width: fit-content;">
                        <button class="ui small basic inverted icon button"
                                        onclick="editSlide('${bundleDir}','${ slide.uuid }', '${ slide.type }');"><i
                                            class="edit outline icon"></i></button>
                        <div onclick="duplicateSlide('${bundleDir}','${slide.uuid}')" class="ui small basic inverted icon button"><i class="ui copy icon"></i></div>
                        <div onclick="removeSlide('${bundleDir}','${slide.uuid}')" class="ui small basic inverted icon button"><i class="ui delete icon"></i></div>
                    </div>
                    <div class="content">
                    <i class="ui icon move"></i>
                    <span class="editable">${slide.name}</span>

                    </div>
                    </div>`;
                }
                $(block).data('bundleDir',bundleDir);
                $(block).html(htmlData);
                $('.editable').editable(function (value, settings) {
                var uuid = $(this).parent().parent().data("uuid");
                var bundle = $(this).parent().parent().data("bundle");
                socket.emit("admin.renameSlide", { uuid: uuid, name: value, bundleName: bundle });
                return (value);
            }, {
                submit: 'rename',
                tooltip: "Doubleclick to edit...",
                event: "dblclick",
                cssclass: 'ui mini nopadded form',
                cancelcssclass: 'ui tiny basic negative button',
                submitcssclass: 'ui tiny basic positive button',
                });

            });

        }

        $(function () {
            $.getJSON("/admin/ajax/getBundles", function (data) {
            var items = [];
            var boolval = true;
            for (var elem of data) {
              items.push({value: elem.dir, name: elem.name, selected: boolval});
               boolval = false;
            }

            $('#bundle1').dropdown({
                values: items,
                onChange: function (_value, _text, _item) {
                            if (_value !== "") {
                                loadBundleData("#sortable1", _value);
                            }
                        }
                });

            $('#bundle2').dropdown({
                values: items,
                onChange: function (_value, _text, _item) {
                            if (_value !== "") {
                                loadBundleData("#sortable2", _value);
                            }
                        }
                });

            });

   $("#sortable1").sortable({
    connectWith: ".connectedSortable",
    handle: ".move",
    cursor: "move",
    receive: function (ev, ui) {
        var targetBundle = $("#bundle1").dropdown("get value");
        var originBundle = ui.item[0].dataset.bundle;
        var uuid = ui.item[0].dataset.uuid;
        var sortedIDs = $("#sortable1").sortable("toArray", {attribute: "data-uuid"});
        var position =  sortedIDs.indexOf(uuid)-1;
        if (position < 0) {
            position = 0;
        }
        socket.emit("admin.moveSlide", {from: originBundle, to: targetBundle, uuid: uuid, position:position });
    },
    stop: function (event, element) {
            var sortedIDs = $("#sortable1").sortable("toArray", {attribute: "data-uuid"});
            var currentBundle = $("#bundle1").dropdown("get value");
            socket.emit("admin.reorderSlides", { bundleName: currentBundle, sortedIDs: sortedIDs });
        }
    }).disableSelection();

    $("#sortable2").sortable({
    connectWith: ".connectedSortable",
    handle: ".move",
    cursor: "move",
    receive: function (ev, ui) {
        var targetBundle = $("#bundle2").dropdown("get value");
        var originBundle = ui.item[0].dataset.bundle;
        var uuid = ui.item[0].dataset.uuid;
        var sortedIDs = $("#sortable1").sortable("toArray", {attribute: "data-uuid"});
        var position =  sortedIDs.indexOf(uuid)-1;
        if (position < 0) {
            position = 0;
        }
        socket.emit("admin.moveSlide", {from: originBundle, to: targetBundle, uuid: uuid, position: position });
    },
    stop: function (event, ui) {
            var sortedIDs = $("#sortable2").sortable("toArray", {attribute: "data-uuid"});
            var currentBundle = $("#bundle2").dropdown("get value");
            socket.emit("admin.reorderSlides", { bundleName: currentBundle, sortedIDs: sortedIDs });
        }
    }).disableSelection();
});

socket.on("connect", function () {
    socket.emit("admin.editBundles", {});
});

socket.on("callback.updateBundleData", function() {
    updateBundleData();
});


</script>

{% endblock %}