Added desktop background task viewer

file_system.go

@@ -1639,7 +1639,7 @@ func system_fs_handleWebSocketOpr(w http.ResponseWriter, r *http.Request) {
 		//Other operations that allow multiple source files to handle one by one
 		for i := 0; i < len(sourceFiles); i++ {
 			//TODO: REMOVE DEBUG
-			time.Sleep(3 * time.Second)
+			//time.Sleep(3 * time.Second)
 			vsrcFile := sourceFiles[i]
 			thisSrcFsh, subpath, err := GetFSHandlerSubpathFromVpath(vsrcFile)
 			if err != nil {

web/SystemAO/file_system/file_operation.html

@@ -806,19 +806,19 @@
             //Cancel the current ongoing task
             function cancelTask(){
                 $.ajax({
-                        url: "../../system/file_system/ongoing",
-                        method: "POST",
-                        data: {"oprid": oprId, "flag": "cancel"},
-                        success: function(data){
-                            if (data.error != undefined){
-                                console.log(data.error);
-                            }else{
-                                //Disable further operation untill task cancelled
-                                $("#advanceControlbtns").find(".button").addClass("disabled");
-                                $("#cancelButton").html(`<i class="ui loading spinner icon"></i>`);
-                            }
+                    url: "../../system/file_system/ongoing",
+                    method: "POST",
+                    data: {"oprid": oprId, "flag": "cancel"},
+                    success: function(data){
+                        if (data.error != undefined){
+                            console.log(data.error);
+                        }else{
+                            //Disable further operation untill task cancelled
+                            $("#advanceControlbtns").find(".button").addClass("disabled");
+                            $("#cancelButton").html(`<i class="ui loading spinner icon"></i>`);
                         }
-                    });
+                    }
+                });
             }
 
             function showPauseCancelButton(){

web/SystemAO/locale/desktop.json

@@ -39,6 +39,9 @@
                 "quickAccess/restart":"重新啟動伺服器",
                 "quickAccess/poweroff":"關機伺服器",
 
+                "backgroundTasks/noTasks": "沒有執行中之背景任務",
+                "backgroundTasks/refresh": "重新載入",
+
                 "contextmenu/New": "新增",
                 "contextmenu/Open": "開啟",
                 "contextmenu/Open With": "使用 … 開啟",
@@ -135,6 +138,9 @@
                 "quickAccess/restart":"重新啟動伺服器",
                 "quickAccess/poweroff":"關機伺服器",
 
+                "backgroundTasks/noTasks": "沒有執行中之背景任務",
+                "backgroundTasks/refresh": "重新載入",
+
                 "contextmenu/New": "新增",
                 "contextmenu/Open": "開啟",
                 "contextmenu/Open With": "使用 … 開啟",
@@ -232,6 +238,9 @@
                 "quickAccess/restart":"服务器重启",
                 "quickAccess/poweroff":"服务器关机",
 
+                "backgroundTasks/noTasks": "没有执行中之背景任务",
+                "backgroundTasks/refresh": "重新载入",
+
                 "contextmenu/New": "新增",
                 "contextmenu/Open": "打开",
                 "contextmenu/Open With": "使用 … 打开",

web/desktop.system

@@ -927,6 +927,9 @@
                 border: 1px solid #ebebeb;
                 padding-top:8px;
                 padding-bottom:8px;
+                max-height: 50vh;
+                overflow-y: auto;
+                overflow-x: hidden;
 
                 box-shadow: 6px 8px 13px 2px rgba(191,191,191,0.13);
                 -webkit-box-shadow: 6px 8px 13px 2px rgba(191,191,191,0.13);
@@ -954,6 +957,10 @@
                 background-color: #d6ba3e;
             }
 
+            .backgroundtaskObject.stopping .progress .bar{
+                background-color: #d63e3e;
+            }
+
             .backgroundtaskObject .circular.button i{
                 color: rgb(160, 160, 160) !important;
                 display: inline-block;
@@ -1008,8 +1015,8 @@
             ArozOS Desktop
         </div>
         <div class="quicktools statusbarpadding">
-            <div class="qtwrapper backgroundtask">
-                <i class="loading circle notch icon"></i>
+            <div id="backgroundtaskBtn" class="qtwrapper backgroundtask" onclick="showBackgroundTaskPanel()" ontouchstart="showBackgroundTaskPanel();">
+                <i class="clone icon"></i>
             </div>
             <div class="qtwrapper content" onclick="showToolPanel();" ontouchend="showToolPanel();" style="margin-right: 0.4em;">
                 <i class="content icon"></i>
@@ -1122,7 +1129,7 @@
     </div>
 
     <!-- Background Task Panel -->
-    <div id="backgroundTaskPanel" class="" style="display:;">
+    <div id="backgroundTaskPanel" class="" style="display:none;">
         <div class="backgroundtaskObject">
             <small>src > dest (test.mp4)</small>
             <div class="ui grid">
@@ -1142,7 +1149,7 @@
                     </button>
                 </div>
               </div>
-            
+              <div class="ui divider" style="margin-top: 0;"></div>
         </div>
     </div>
 
@@ -1365,6 +1372,138 @@
             });
         }
 
+        function centerTruncat(fullStr, strLen, separator) {
+            if (fullStr.length <= strLen) return fullStr;
+
+            separator = separator || '...';
+
+            var sepLen = separator.length,
+                charsToShow = strLen - sepLen,
+                frontChars = Math.ceil(charsToShow/2),
+                backChars = Math.floor(charsToShow/2);
+
+            return fullStr.substr(0, frontChars) + 
+                separator + 
+                fullStr.substr(fullStr.length - backChars);
+        };
+
+        function handleBackgroundTaskPauseToggle(oprid, btn=undefined, currentlyPaused=false){
+            console.log(oprid, currentlyPaused);
+            if (btn != undefined){
+                $(btn).addClass("disabled");
+                $(btn).html(`<i class="ui spinner loading icon"></i>`);
+            }
+            if (currentlyPaused){
+                //Resume
+                $.ajax({
+                    url: "system/file_system/ongoing",
+                    method: "POST",
+                    data: {"oprid": oprid, "flag": "continue"},
+                    success: function(data){
+                        if (data.error != undefined){
+                            console.log(data.error);
+                        }
+                        updateBackgroundgTaskList();
+                    }
+                });
+            }else{
+                //Pause
+                $.ajax({
+                    url: "system/file_system/ongoing",
+                    method: "POST",
+                    data: {"oprid": oprid, "flag": "pause"},
+                    success: function(data){
+                        if (data.error != undefined){
+                            console.log(data.error);
+                        }
+                        updateBackgroundgTaskList();
+                    }
+                });
+            }
+        }
+
+        function handleBackgroundTaskCancel(oprid, btn=undefined){
+            $.ajax({
+                url: "system/file_system/ongoing",
+                method: "POST",
+                data: {"oprid": oprid, "flag": "cancel"},
+                success: function(data){
+                    if (data.error != undefined){
+                        console.log(data.error);
+                    }else{
+                        //Disable further operation untill task cancelled
+                        if (btn != undefined){
+                            $(btn).addClass("disabled");
+                            $(btn).html(`<i class="ui spinner loading icon"></i>`);
+                        }
+                      
+                    }
+                    updateBackgroundgTaskList();
+                }
+            });
+        }
+
+        //The background task checking function will ping server side at a more 
+        //frequent interval if there is a background task running
+        var rapidIntervalTaskListing = undefined;
+        function updateBackgroundgTaskList(){
+            //Update background tasks
+            $.get("system/file_system/ongoing", function(tasks){
+                $("#backgroundTaskPanel").html("");
+                tasks.forEach(function(task){
+                    console.log(task);
+                    var pausedClass = "";
+                    var pauseIcon = "pause";
+                    var cancelBtnDisabled = "";
+                    if (task.FileOperationSignal == 1){
+                        pausedClass = "paused";
+                        pauseIcon = "play";
+                    }else if (task.FileOperationSignal == 2){
+                        pausedClass = "stopping";
+                        cancelBtnDisabled = "disabled";
+                    }
+                    $("#backgroundTaskPanel").append(`<div class="backgroundtaskObject ${pausedClass}">
+                        <small>${centerTruncat(task.Src, 22, "...")} <i class="angle right icon"></i> ${centerTruncat(task.Dest, 22, "...")} (${centerTruncat(task.LatestFile, 30, "...")})</small>
+                        <div class="ui grid">
+                            <div class="twelve wide column" style="padding-right: 0.4em;">
+                                <div class="ui mini active progress">
+                                    <div class="bar" style="width: ${task.Progress}%;">
+                                        <div class="progress">${task.Progress}%</div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="four wide column"  style="padding-top: 0.4em; padding-left: 0;" align="right">
+                                <button class="circular ui mini basic icon ${cancelBtnDisabled} button" oprid="${task.ID}" onclick="handleBackgroundTaskPauseToggle('${task.ID}', this, ${task.FileOperationSignal==1});">
+                                    <i class="${pauseIcon} icon"></i>
+                                </button>
+                                <button class="circular ui mini basic red icon ${cancelBtnDisabled} button" oprid="${task.ID}" onclick="handleBackgroundTaskCancel('${task.ID}', this);">
+                                    <i class="remove icon" style="color: red !important;"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </div>`);
+                });
+
+                if (tasks.length > 0){
+                    if (rapidIntervalTaskListing != undefined){
+                        clearTimeout(rapidIntervalTaskListing);
+                        rapidIntervalTaskListing = undefined;
+                    }
+                    rapidIntervalTaskListing = setTimeout(function(){
+                        updateBackgroundgTaskList();
+                    }, 1000);
+                    $("#backgroundtaskBtn").find("i").attr("class", "loading circle notch icon");
+                }else{
+                    $("#backgroundTaskPanel").append(`<div class="ui basic segment" style="width: 100%;">
+                        <i class="ui checkmark icon"></i> ${applocale.getString("backgroundTasks/noTasks", "No running background tasks")}
+                        <a style="cursor: pointer; float: right; margin-top: 0.2em;" onclick="updateBackgroundgTaskList();">${applocale.getString("backgroundTasks/refresh", "Refresh")}</a>
+                    </div>`);
+                    $("#backgroundtaskBtn").find("i").attr("class", "circle notch icon");
+                }
+                
+            });
+        }
+        updateBackgroundgTaskList();
       
         function checkConnection(timeout=15000, callback=undefined){
             $.ajax({
@@ -1372,6 +1511,8 @@
                 success: function(data) {
                     if (data == true) {
                         //Continue session
+                        updateBackgroundgTaskList();
+                      
                     } else {
                         //Session timeout. Redirect to system index
                         loggingOut = true;
@@ -1420,6 +1561,10 @@
             return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
         }
 
+        function showBackgroundTaskPanel(){
+            $("#backgroundTaskPanel").slideToggle("fast");
+        }
+
         function showToolPanel(){
             $("#quickAccessPanel").slideToggle("fast");
         }
@@ -6304,6 +6449,7 @@
             $("#subcontextmenu").hide();
             $("#contextmenu").hide()
             $("#quickAccessPanel").slideUp("fast");
+            $("#backgroundTaskPanel").slideUp("fast");
         }
 
         function restart(){