Merge branch 'beta' into Fix-UI-display-when-removing-the-last-task

ui/media/js/main.js

@@ -138,6 +138,33 @@ function isServerAvailable() {
     }
 }
 
+// shiftOrConfirm(e, prompt, fn)
+//   e      : MouseEvent
+//   prompt : Text to be shown as prompt. Should be a question to which "yes" is a good answer.
+//   fn     : function to be called if the user confirms the dialog or has the shift key pressed
+//
+// If the user had the shift key pressed while clicking, the function fn will be executed.
+// If the setting "confirm_dangerous_actions" in the system settings is disabled, the function 
+// fn will be executed.
+// Otherwise, a confirmation dialog is shown. If the user confirms, the function fn will also
+// be executed.
+function shiftOrConfirm(e, prompt, fn) {
+    e.stopPropagation()
+    if (e.shiftKey || !confirmDangerousActionsField.checked) {
+         fn(e)
+    } else {
+        $.confirm({ theme: 'supervan',
+            title: prompt,
+            content: 'Tip: To skip this dialog, use shift-click or disable the setting "Confirm dangerous actions" in the systems setting.',
+            buttons: {
+                yes: () => { fn(e) },
+                cancel: () => {}
+            }
+        }); 
+    }
+}
+
+
 function logMsg(msg, level, outputMsg) {
     if (outputMsg.hasChildNodes()) {
         outputMsg.appendChild(document.createElement('br'))
@@ -169,34 +196,6 @@ function playSound() {
         })
     }
 }
-function setSystemInfo(devices) {
-    let cpu = devices.all.cpu.name
-    let allGPUs = Object.keys(devices.all).filter(d => d != 'cpu')
-    let activeGPUs = Object.keys(devices.active)
-
-    function ID_TO_TEXT(d) {
-        let info = devices.all[d]
-        if ("mem_free" in info && "mem_total" in info) {
-            return `${info.name} <small>(${d}) (${info.mem_free.toFixed(1)}Gb free / ${info.mem_total.toFixed(1)} Gb total)</small>`
-        } else {
-            return `${info.name} <small>(${d}) (no memory info)</small>`
-        }
-    }
-
-    allGPUs = allGPUs.map(ID_TO_TEXT)
-    activeGPUs = activeGPUs.map(ID_TO_TEXT)
-
-    let systemInfo = `
-    <table>
-        <tr><td><label>Processor:</label></td><td class="value">${cpu}</td></tr>
-        <tr><td><label>Compatible Graphics Cards (all):</label></td><td class="value">${allGPUs.join('</br>')}</td></tr>
-        <tr><td></td><td>&nbsp;</td></tr>
-        <tr><td><label>Used for rendering 🔥:</label></td><td class="value">${activeGPUs.join('</br>')}</td></tr>
-    </table>`
-
-    let systemInfoEl = document.querySelector('#system-info')
-    systemInfoEl.innerHTML = systemInfo
-}
 
 async function healthCheck() {
     try {
@@ -231,7 +230,7 @@ async function healthCheck() {
                 break
         }
         if (serverState.devices) {
-            setSystemInfo(serverState.devices)
+            setDeviceInfo(serverState.devices)
         }
         serverState.time = Date.now()
     } catch (e) {
@@ -887,8 +886,7 @@ function createTask(task) {
     task['progressBar'] = taskEntry.querySelector('.progress-bar')
     task['stopTask'] = taskEntry.querySelector('.stopTask')
 
-    task['stopTask'].addEventListener('click', async function(e) {
-        e.stopPropagation()
+    task['stopTask'].addEventListener('click', (e) => { shiftOrConfirm(e, "Are you sure? Should this task be stopped?", async function(e) {
         if (task['isProcessing']) {
             task.isProcessing = false
             task.progressBar.classList.remove("active")
@@ -905,7 +903,7 @@ function createTask(task) {
 
             removeTask(taskEntry)
         }
-    })
+    })})
 
     task['useSettings'] = taskEntry.querySelector('.useSettings')
     task['useSettings'].addEventListener('click', function(e) {
@@ -934,10 +932,10 @@ function getPrompts() {
     prompts = prompts.filter(prompt => prompt !== '')
 
     if (activeTags.length > 0) {
-	const promptTags = activeTags.map(x => x.name).join(", ")
-	prompts = prompts.map((prompt) => `${prompt}, ${promptTags}`)
+        const promptTags = activeTags.map(x => x.name).join(", ")
+        prompts = prompts.map((prompt) => `${prompt}, ${promptTags}`)
     }
-	
+
     let promptsToMake = applySetOperator(prompts)
     promptsToMake = applyPermuteOperator(promptsToMake)
 
@@ -1056,18 +1054,16 @@ function removeTask(taskToRemove) {
     }
 }
 
-clearAllPreviewsBtn.addEventListener('click', async function() {
+clearAllPreviewsBtn.addEventListener('click', (e) => { shiftOrConfirm(e, "Are you sure? Remove all results and tasks from the results pane?", async function() {
     await stopAllTasks()
 
     let taskEntries = document.querySelectorAll('.imageTaskContainer')
-    taskEntries.forEach(task => {
-        removeTask(task)
-    })
-})
+    taskEntries.forEach(removeTask)
+})})
 
-stopImageBtn.addEventListener('click', async function() {
+stopImageBtn.addEventListener('click', (e) => { shiftOrConfirm(e, "Are you sure? Do you want to stop all the tasks?", async function(e) {
     await stopAllTasks()
-})
+})})
 
 widthField.addEventListener('change', onDimensionChange)
 heightField.addEventListener('change', onDimensionChange)