Browse Source

Add task action buttons

master v1.2
Skylar Ittner 4 years ago
parent
commit
fb4cc88fd1
  1. 8
      www/assets/css/other.css
  2. 6
      www/cards/js/qwikclock_jobs.js
  3. 89
      www/cards/js/taskfloor_viewtasks.js
  4. 12
      www/cards/qwikclock_jobs.html

8
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;

6
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>');
}

89
www/cards/js/taskfloor_viewtasks.js

@ -5,31 +5,70 @@
*/
$(".card_taskfloor_viewtasks").each(function () {
var card = $(this);
$(this).find(".card_title").prepend("Tasks | ");
var tasklist = $(this).find(".task-list");
var url = $(this).data("apiurl");
function loadTaskCards() {
$(".card_taskfloor_viewtasks").each(function () {
var card = $(this);
if (!$(this).find(".card_title").text().startsWith("Tasks | ")) {
$(this).find(".card_title").prepend("Tasks | ");
}
var tasklist = $(this).find(".task-list");
var url = $(this).data("apiurl");
$.post(url, {
username: getuser(),
password: getAPIKey(),
action: "gettasks"
}, function (resp) {
if (resp.status == "OK") {
tasklist.html("");
var tasks = resp.tasks;
for (var i = 0; i < tasks.length; i++) {
var taskhtml =
'<div class="list-group-item task" data-taskid="' + tasks[i]['id'] + '">'
+ '<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>'
+ '</div>'
+ '<p>' + tasks[i]['description'] + '</p>'
+ '<div class="btn-bin">';
if (tasks[i]['status'] == "0") {
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: "gettasks"
username: getuser(),
password: getAPIKey(),
action: "updatetask",
taskid: taskitem.data("taskid"),
status: $(this).data("status")
}, function (resp) {
if (resp.status == "OK") {
var tasks = resp.tasks;
for (var i = 0; i < tasks.length; i++) {
tasklist.append(
'<div class="list-group-item">'
+ '<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>'
+ '</div>'
+ '<p>' + tasks[i]['description'] + '</p>'
+ '</div>');
}
} else {
showmsg(resp.msg, "danger");
}
}, "json").fail(function () {
card.css("display", "none");
});
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");
});

12
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>
Loading…
Cancel
Save