Browse Source

Add qwikclock_jobs card

master
Skylar Ittner 4 years ago
parent
commit
afd8a0a194
  1. 96
      www/assets/css/other.css
  2. 78
      www/cards/js/qwikclock_jobs.js
  3. 23
      www/cards/qwikclock_jobs.html
  4. 9
      www/js/home.js

96
www/assets/css/other.css

@ -54,4 +54,100 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
#pincode-box {
font-size: 200%;
}
.btn-red, .btn-red:hover, .btn-red:active, .btn-red:focus {
background-color: #f44336;
color: white;
}
.btn-pink, .btn-pink:hover, .btn-pink:active, .btn-pink:focus {
background-color: #e91e63;
color: white;
}
.btn-purple, .btn-purple:hover, .btn-purple:active, .btn-purple:focus {
background-color: #9c27b0;
color: white;
}
.btn-deep-purple, .btn-deep-purple:hover, .btn-deep-purple:active, .btn-deep-purple:focus {
background-color: #673ab7;
color: white;
}
.btn-indigo, .btn-indigo:hover, .btn-indigo:active, .btn-indigo:focus {
background-color: #3f51b5;
color: white;
}
.btn-blue, .btn-blue:hover, .btn-blue:active, .btn-blue:focus {
background-color: #2196f3;
color: white;
}
.btn-light-blue, .btn-light-blue:hover, .btn-light-blue:active, .btn-light-blue:focus {
background-color: #03a9f4;
color: black;
}
.btn-cyan, .btn-cyan:hover, .btn-cyan:active, .btn-cyan:focus {
background-color: #00bcd4;
color: white;
}
.btn-teal, .btn-teal:hover, .btn-teal:active, .btn-teal:focus {
background-color: #009688;
color: white;
}
.btn-green, .btn-green:hover, .btn-green:active, .btn-green:focus {
background-color: #4caf50;
color: white;
}
.btn-light-green, .btn-light-green:hover, .btn-light-green:active, .btn-light-green:focus {
background-color: #8bc34a;
color: black;
}
.btn-lime, .btn-lime:hover, .btn-lime:active, .btn-lime:focus {
background-color: #cddc39;
color: black;
}
.btn-yellow, .btn-yellow:hover, .btn-yellow:active, .btn-yellow:focus {
background-color: #ffeb3b;
color: black;
}
.btn-amber, .btn-amber:hover, .btn-amber:active, .btn-amber:focus {
background-color: #ffc107;
color: black;
}
.btn-orange, .btn-orange:hover, .btn-orange:active, .btn-orange:focus {
background-color: #ff9800;
color: black;
}
.btn-deep-orange, .btn-deep-orange:hover, .btn-deep-orange:active, .btn-deep-orange:focus {
background-color: #ff5722;
color: black;
}
.btn-brown, .btn-brown:hover, .btn-brown:active, .btn-brown:focus {
background-color: #795548;
color: white;
}
.btn-grey, .btn-grey:hover, .btn-grey:active, .btn-grey:focus {
background-color: #9e9e9e;
color: white;
}
.btn-blue-grey, .btn-blue-grey:hover, .btn-blue-grey:active, .btn-blue-grey:focus {
background-color: #607d8b;
color: white;
}

78
www/cards/js/qwikclock_jobs.js

@ -0,0 +1,78 @@
/*
* 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/.
*/
function dispCurrent(card, current) {
var url = card.data("apiurl");
$.post(url, {
username: getuser(),
password: getAPIKey(),
action: "getactivejob"
}, function (resp) {
if (resp.status == "OK") {
if (resp.job == false) {
current.html('<div class="btn btn-default btn-sm">None</div>');
} else {
current.html('<div class="btn btn-' + resp.job.color + ' btn-sm">' + resp.job.name + '</div>');
}
} else {
showmsg(resp.msg, "danger");
}
}, "json").fail(function () {
card.css("display", "none");
});
}
$(".card_qwikclock_jobs").each(function () {
var card = $(this);
$(this).find(".card_title").prepend("Jobs | ");
var btnbin = $(this).find(".job-btn-bin");
var current = $(this).find(".current-job");
var url = $(this).data("apiurl");
$.post(url, {
username: getuser(),
password: getAPIKey(),
action: "getjobs"
}, function (resp) {
if (resp.status == "OK") {
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 job-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>');
}
} else {
showmsg(resp.msg, "danger");
}
}, "json").fail(function () {
card.css("display", "none");
});
dispCurrent(card, current);
setInterval(function () {
dispCurrent(card, current)
}, 2500);
});
$(".card_qwikclock_jobs").on("click", ".job-btn", function () {
var parent = $(this).parents(".card_app");
var current = parent.find(".current-job");
var url = parent.data("apiurl");
$.post(url, {
username: getuser(),
password: getAPIKey(),
action: "setjob",
job: $(this).data("jobid")
}, 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");
}
dispCurrent(parent, current);
}, "json");
});

23
www/cards/qwikclock_jobs.html

@ -0,0 +1,23 @@
<!--
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>
</div>

9
www/js/home.js

@ -1,4 +1,4 @@
/*
/*
* 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/.
@ -9,14 +9,15 @@ var loadedCardTypes = [];
var totalCardTypes = [];
var cardSettings = {
"qwikclock_punchinout": {"classes": "col-12 col-md-4 col-lg-4 col-xl-4 order-1"},
"qwikclock_myshifts": {"classes": "col-12 col-md-8 col-lg-8 col-xl-6 order-2"}
"qwikclock_punchinout": {"classes": "col-12 col-md-4 col-lg-4 col-xl-3 order-1"},
"qwikclock_myshifts": {"classes": "col-12 col-md-8 col-lg-8 col-xl-5 order-2"},
"qwikclock_jobs": {"classes": "col-12 col-md-6 col-lg-6 col-xl-4 order-5"},
};
function loadCard(type, apiurl, title) {
$.get("cards/" + type + ".html", {}, function (html) {
console.log(type + " " + apiurl + " " + title);
var cardClasses = "col-12 col-md-6 col-lg-6 col-xl-4 order-12";
var cardClasses = "col-12 col-md-6 col-lg-6 col-xl-4 order-6";
if (cardSettings.hasOwnProperty(type) && cardSettings[type].hasOwnProperty("classes")) {
cardClasses = cardSettings[type]["classes"];
}

Loading…
Cancel
Save