Merge pull request #72 from kasimos/addBackgroundDeleteMaster

Add button to delete selected background file

locales/de/translation.json

@@ -68,6 +68,8 @@
       "backgroundfile": "Datei auswählen",
       "msgupload": "Hier können Sie einen neuen Hintergrund (.jpg oder .mp4) hochladen.",
       "background": "Hintergrund",
+      "backgroundDelete": "Hintergrund löschen",
+      "backgroundDeleteAsk": "Sind Sie sicher, dass sie die folgende Hintergrundsdatei permanent aus allen Paketen löschen wollen: ",
       "transition": "Standardübergang (wird beim Neustart angewendet)",
       "time": "Zeit / Datum anzeigen",
       "duration": "Anzeigedauer",

locales/en/translation.json

@@ -68,6 +68,8 @@
       "backgroundfile": "Select a file",
       "msgupload": "You can upload a new background (.jpg or .mp4) here.",
       "background": "Background",
+      "backgroundDelete": "Delete Background",
+      "backgroundDeleteAsk": "Are you sure you want to permanently delete the following background file from all bundles: ",
       "transition": "Default transition (applied on restart)",
       "time": "Display time",
       "duration": "Default duration",

locales/fi/translation.json

@@ -66,6 +66,8 @@
       "msg1": "Suurin osa asetuksista otetaan käyttöön seuraavan dian vaihtuessa.",
       "name": "Nimi",
       "background": "Tausta",
+      "backgroundDelete": "Poista Tausta",
+      "backgroundDeleteAsk": "Haluatko varmasti poistaa seuraavan taustatiedoston pysyvästi kaikista diapaketeista: ",
       "transition": "Oletussiirtymä",
       "backgroundfile": "Valitse tiedosto",
       "msgupload": "Voit ladata uuden taustakuvan  (.jpg or .mp4) alta.",

modules/adminLobby.js

@@ -1,4 +1,6 @@
-import cli from './cli.js'
+import fs from 'fs';
+import cli from './cli.js';
+import { checkAndSanitizeFilePathName } from './utils.js';
 
 export default class adminLobby {
 
@@ -89,6 +91,17 @@ export default class adminLobby {
                 }
             });
 
+            socket.on('admin.deleteBackground', function (data) {
+                try {
+                    data.name = checkAndSanitizeFilePathName(data.name);
+                    fs.unlinkSync("./data/backgrounds/" + data.name);
+                    cli.success("delete " + data.name);
+                    socket.emit("callback.admin.reload", {});
+                } catch (err) {
+                    cli.error(err, "delete background");
+                    socket.emit("callback.admin.reload", {error: err});
+                }
+            });
 
             socket.on('controls.previous', function (data) {
                 getAdminView(data.displayId).controls("previous");

public/js/dashboard.js

@@ -382,7 +382,7 @@ function updateSlides(slides) {
     
 }
 function editBundleProperties(bundle) {
-    window.open("/admin/edit/bundleProperties?bundle=" + bundle, '_blank', 'width=400,height=800,scrollbars=yes,status=no,location=no');
+    window.open("/admin/edit/bundleProperties?bundle=" + bundle, '_blank', 'width=450,height=800,scrollbars=yes,status=no,location=no');
 }
 
 function editBundleSlides(name) {

views/admin/editBundleProperties.twig

@@ -1,7 +1,11 @@
 {% extends 'layout/admin.twig' %}
 
 {% block header %}
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.6.0/socket.io.min.js"></script>
+    {% 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 src="/js/sharedScript.js"></script>
 {% endblock %}
 
@@ -23,11 +27,14 @@
             </div>
             <div class="field">
                 <label>{{ t("admin.editBundleProperties.background") }}</label>
-                <select name="background">
-                    {% for image in backgroundImages %}
-                        <option value="{{ image }}" {% if image == bundleData.background %} selected {% endif %}>{{ image }}</option>
-                    {% endfor %}
-                </select>
+                <div class="ui action input">
+                    <select name="background">
+                        {% for image in backgroundImages %}
+                            <option value="{{ image }}" {% if image == bundleData.background %} selected {% endif %}>{{ image }}</option>
+                        {% endfor %}
+                    </select>
+                    <button class="ui red button" name="dUpload" type="button" onclick="deleteBackground()">{{ t("admin.editBundleProperties.backgroundDelete") }}</button>
+                </div>
             </div>
             <div class="field">
                 <div class="ui action input">
@@ -166,6 +173,7 @@
 
     <script>
 
+        var socket = io("{{ config.serverUrl }}/admin");
         $(function () {
 
             var transitionArray = [];
@@ -205,5 +213,20 @@
             $(element).css("background", $(element).val());
         }
 
+        function deleteBackground(element) {
+            console.log(element);
+            const bgName = document.querySelector('[name="background"]').selectedOptions[0].value;
+            let confirmed = confirm('{{ t("admin.editBundleProperties.backgroundDeleteAsk") }}' + bgName +'?');
+            if (confirmed) {
+                socket.emit("admin.deleteBackground", {
+                    name: bgName
+                });
+            }
+        }
+
+        socket.on("callback.admin.reload", function() {
+             document.location.reload(true);
+        });
+
     </script>
 {% endblock %}