Add task action buttons

www/assets/css/other.css

@@ -56,6 +56,14 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
     font-size: 200%;
 }
 
+.btn-bin {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.bin-btn {
+    margin: 5px 5px;
+}
 
 .btn-red, .btn-red:hover, .btn-red:active, .btn-red:focus {
     background-color: #f44336;

www/cards/js/qwikclock_jobs.js

@@ -28,7 +28,7 @@ function dispCurrent(card, current) {
 $(".card_qwikclock_jobs").each(function () {
     var card = $(this);
     $(this).find(".card_title").prepend("Jobs | ");
-    var btnbin = $(this).find(".job-btn-bin");
+    var btnbin = $(this).find(".btn-bin");
     var current = $(this).find(".current-job");
     var url = $(this).data("apiurl");
     $.post(url, {
@@ -40,9 +40,9 @@ $(".card_qwikclock_jobs").each(function () {
             var jobs = resp.jobs;
             if (jobs.length > 0) {
                 for (var job in jobs) {
-                    btnbin.append('<div class="btn job-btn btn-' + jobs[job]['color'] + '" data-jobid="' + jobs[job]['id'] + '">' + jobs[job]['name'] + '</div>');
+                    btnbin.append('<div class="btn bin-btn btn-' + jobs[job]['color'] + '" data-jobid="' + jobs[job]['id'] + '">' + jobs[job]['name'] + '</div>');
                 }
-                btnbin.append('<div class="btn job-btn btn-red" data-jobid="-1"><i class="fas fa-times"></i> None</div>');
+                btnbin.append('<div class="btn bin-btn btn-red" data-jobid="-1"><i class="fas fa-times"></i> None</div>');
             } else {
                 btnbin.html('<div class="alert alert-primary"><i class="fas fa-info-circle"></i> No jobs available.</div>');
             }

www/cards/js/taskfloor_viewtasks.js

@@ -5,31 +5,70 @@
  */
 
 
-$(".card_taskfloor_viewtasks").each(function () {
+function loadTaskCards() {
-    var card = $(this);
+    $(".card_taskfloor_viewtasks").each(function () {
-    $(this).find(".card_title").prepend("Tasks | ");
+        var card = $(this);
-    var tasklist = $(this).find(".task-list");
+        if (!$(this).find(".card_title").text().startsWith("Tasks | ")) {
-    var url = $(this).data("apiurl");
+            $(this).find(".card_title").prepend("Tasks | ");
-    $.post(url, {
+        }
-	username: getuser(),
+        var tasklist = $(this).find(".task-list");
-	password: getAPIKey(),
+        var url = $(this).data("apiurl");
-	action: "gettasks"
+        $.post(url, {
-    }, function (resp) {
+            username: getuser(),
-	if (resp.status == "OK") {
+            password: getAPIKey(),
-	    var tasks = resp.tasks;
+            action: "gettasks"
-	    for (var i = 0; i < tasks.length; i++) {
+        }, function (resp) {
-		tasklist.append(
+            if (resp.status == "OK") {
-			'<div class="list-group-item">'
+                tasklist.html("");
-			+ '<div class="d-flex w-100 justify-content-between">'
+                var tasks = resp.tasks;
-			+ '<h5 class="mb-1"><i class="fas fa-' + tasks[i]['icon'] + ' fa-fw"></i> ' + tasks[i]['title'] + '</h5>'
+                for (var i = 0; i < tasks.length; i++) {
-			+ '</div>'
+                    var taskhtml =
-			+ '<p>' + tasks[i]['description'] + '</p>'
+                            '<div class="list-group-item task" data-taskid="' + tasks[i]['id'] + '">'
-			+ '</div>');
+                            + '<div class="d-flex w-100 justify-content-between">'
-	    }
+                            + '<h5 class="mb-1"><i class="fas fa-' + tasks[i]['icon'] + ' fa-fw"></i> ' + tasks[i]['title'] + '</h5>'
-	} else {
+                            + '</div>'
-	    showmsg(resp.msg, "danger");
+                            + '<p>' + tasks[i]['description'] + '</p>'
-	}
+                            + '<div class="btn-bin">';
-    }, "json").fail(function () {
+                    if (tasks[i]['status'] == "0") {
-	card.css("display", "none");
+                        taskhtml += '<div class="btn btn-primary status-btn bin-btn" data-status="start"><i class="fas fa-play"></i> Start</div>';
+                    } else if (tasks[i]['status'] == "1") {
+                        taskhtml += '<div class="btn btn-success status-btn bin-btn" data-status="finish"><i class="fas fa-stop"></i> Finish</div>';
+                        taskhtml += '<div class="btn btn-warning status-btn bin-btn" data-status="pause"><i class="fas fa-pause"></i> Pause</div>';
+                        taskhtml += '<div class="btn btn-danger status-btn bin-btn" data-status="problem"><i class="fas fa-exclamation"></i> Problem</div>';
+                    } else if (tasks[i]['status'] == "3" || tasks[i]['status'] == "4") {
+                        taskhtml += '<div class="btn btn-primary status-btn bin-btn" data-status="resume"><i class="fas fa-play"></i> Continue</div>';
+                    }
+
+                    taskhtml += '</div>\n</div>';
+                    tasklist.append(taskhtml);
+                }
+            } else {
+                showmsg(resp.msg, "danger");
+            }
+        }, "json").fail(function () {
+            card.css("display", "none");
+        });
     });
+}
+
+loadTaskCards();
+
+$(".card_taskfloor_viewtasks").on("click", ".status-btn", function () {
+    var cardapp = $(this).parents(".card_app");
+    var taskitem = $(this).parents(".task");
+    var url = cardapp.data("apiurl");
+    $.post(url, {
+        username: getuser(),
+        password: getAPIKey(),
+        action: "updatetask",
+        taskid: taskitem.data("taskid"),
+        status: $(this).data("status")
+    }, function (resp) {
+        if (resp.status == "OK") {
+            showmsg('<i class="fas fa-check"></i> ' + resp.msg, "success");
+        } else {
+            showmsg('<i class="fas fa-times"></i> ' + resp.msg, "danger");
+        }
+        loadTaskCards();
+    }, "json");
 });

www/cards/qwikclock_jobs.html

@@ -3,21 +3,11 @@ This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at http://mozilla.org/MPL/2.0/.
 -->
-<style>
-    .job-btn-bin {
-        display: flex;
-        flex-wrap: wrap;
-    }
-
-    .job-btn {
-        margin: 5px 5px;
-    }
-</style>
 <h3 class="card-header" style="background-color: #2196F3; color: white;"><i class="fas fa-briefcase"></i> <span class="card_title">QwikClock | Jobs</span></h3>
 <div class="card-body">
     <p>Current Job: <span class="current-job"></span>
     <p>Select a Job:</p>
-    <div class="job-btn-bin" style="width: 100%;">
+    <div class="btn-bin" style="width: 100%;">
 
     </div>
 </div>