Browse Source

Lots of things

Add QC shifts, add proper icon, check for app permissions, 
adjust styles, fix UI bugs, prepare login UI for quick access mode
master
Skylar Ittner 4 years ago
parent
commit
875457953f
  1. 19
      assets/css/other.css
  2. BIN
      assets/img/logo_64.png
  3. 41
      cards/js/qwikclock_myshifts.js
  4. 14
      cards/js/qwikclock_punchinout.js
  5. 7
      cards/js/taskfloor_viewmessages.js
  6. 7
      cards/js/taskfloor_viewtasks.js
  7. 9
      cards/qwikclock_myshifts.html
  8. 6
      cards/taskfloor_viewmessages.html
  9. 6
      cards/taskfloor_viewtasks.html
  10. 11
      index.html
  11. 2
      js/functions.js
  12. 14
      js/home.js
  13. 3
      main.js
  14. 36
      pages/login.html

19
assets/css/other.css

@ -6,4 +6,23 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
#card-box .col {
padding: 15px;
}
#userlist .row {
overflow-y: auto;
/*
160px obtained from trial-and-error adjustments, if the login screen
is changed, this might need to be updated
*/
max-height: calc(100vh - 160px);
}
.quick-user {
padding: 15px 5px;
text-align: center;
}
.nav-tabs {
border-bottom: 1px solid #ddd;
}

BIN
assets/img/logo_64.png

Before

Width: 64  |  Height: 64  |  Size: 2.7 KiB

After

Width: 64  |  Height: 64  |  Size: 1014 B

41
cards/js/qwikclock_myshifts.js

@ -0,0 +1,41 @@
/*
* 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/.
*/
$(".card_qwikclock_myshifts").each(function () {
var card = $(this);
$(this).find(".card_title").prepend("Shifts | ");
var shiftbox = $(this).find(".shift-box");
var shifttable = $(this).find(".shift-table");
var url = $(this).data("apiurl");
$.post(url, {
username: getuser(),
password: getAPIKey(),
action: "getassignedshifts"
}, function (resp) {
if (resp.status == "OK") {
var shifts = resp.shifts;
if (shifts.length > 0) {
shifttable.html('<thead><tr><th>Shift</th><th><i class="fas fa-play d-sm-none d-lg-inline"></i> Start</th><th><i class="fas fa-stop d-sm-none d-lg-inline"></i> End</th><th><i class="far fa-calendar-alt d-sm-none d-lg-inline"></i> Days</th></tr></thead>');
shifttable.append("<tbody>");
for (var shift in shifts) {
var days = "";
for (var day in shifts[shift]["day_list"]) {
days += " " + shifts[shift]["day_list"][day];
}
days = days.trim();
shifttable.append('<tr><td>' + shifts[shift]['shiftname'] + '</td><td>' + shifts[shift]['start_f'] + '</td><td>' + shifts[shift]['end_f'] + '</td><td>' + days + '</td></tr>');
}
shifttable.append("</tbody>");
} else {
shifttable.html('<div class="alert alert-primary"><i class="fas fa-info-circle"></i> No shifts assigned.</div>');
}
} else {
showmsg(resp.msg, "danger");
}
}, "json").fail(function () {
card.css("display", "none");
});
});

14
cards/js/qwikclock_punchinout.js

@ -4,6 +4,20 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
$(".card_qwikclock_punchinout").each(function () {
var card = $(this);
var url = $(this).data("apiurl");
$.post(url, {
username: getuser(),
password: getAPIKey(),
action: "ping"
}, function (resp) {
// We didn't get a 403
}, "json").fail(function () {
card.css("display", "none");
});
});
$(".card_qwikclock_punchinout").on("click", ".start_btn", function () {
var parent = $(this).parents(".card_app");
var url = parent.data("apiurl");

7
cards/js/taskfloor_viewmessages.js

@ -6,7 +6,8 @@
$(".card_taskfloor_viewmessages").each(function () {
$(this).find(".card_title").append(" Messages");
var card = $(this);
$(this).find(".card_title").prepend("Messages | ");
var msglist = $(this).find(".message-list");
var url = $(this).data("apiurl");
$.post(url, {
@ -27,5 +28,7 @@ $(".card_taskfloor_viewmessages").each(function () {
} else {
showmsg(resp.msg, "danger");
}
}, "json");
}, "json").fail(function () {
card.css("display", "none");
});
});

7
cards/js/taskfloor_viewtasks.js

@ -6,7 +6,8 @@
$(".card_taskfloor_viewtasks").each(function () {
$(this).find(".card_title").append(" Tasks");
var card = $(this);
$(this).find(".card_title").prepend("Tasks | ");
var tasklist = $(this).find(".task-list");
var url = $(this).data("apiurl");
$.post(url, {
@ -28,5 +29,7 @@ $(".card_taskfloor_viewtasks").each(function () {
} else {
showmsg(resp.msg, "danger");
}
}, "json");
}, "json").fail(function () {
card.css("display", "none");
});
});

9
cards/qwikclock_myshifts.html

@ -0,0 +1,9 @@
<!--
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/.
-->
<h3 class="card-header" style="background-color: #2196F3; color: white;"><i class="far fa-calendar-alt"></i> <span class="card_title">QwikClock | Shifts</span></h3>
<table class="table table-striped table-responsive shift-table" style="width: 100%;">
</table>

6
cards/taskfloor_viewmessages.html

@ -3,8 +3,6 @@ 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/.
-->
<h3 class="card-header"><i class="far fa-comments"></i> <span class="card_title">TaskFloor Messages</span></h3>
<div class="card-body">
<div class="list-group message-list">
</div>
<h3 class="card-header" style="background-color: #607d8b; color: white;"><i class="far fa-comments"></i> <span class="card_title">TaskFloor Messages</span></h3>
<div class="list-group message-list">
</div>

6
cards/taskfloor_viewtasks.html

@ -3,8 +3,6 @@ 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/.
-->
<h3 class="card-header"><i class="fas fa-tasks"></i> <span class="card_title">TaskFloor Tasks</span></h3>
<div class="card-body">
<div class="list-group task-list">
</div>
<h3 class="card-header" style="background-color: #607d8b; color: white;"><i class="fas fa-tasks"></i> <span class="card_title">TaskFloor Tasks</span></h3>
<div class="list-group task-list">
</div>

11
index.html

@ -11,19 +11,18 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="assets/css/other.css" rel="stylesheet" />
<div class="btn btn-outline-primary btn-sm" id="sign-out-btn" style="display: none; position: fixed; top: 10px; right: 10px; z-index: 9999999;" onclick="document.location.href = 'index.html'"><i class="fas fa-sign-out-alt"></i> Log out</div>
<div class="btn btn-outline-success btn-sm" id="refresh-btn" style="display: none; position: fixed; top: 10px; left: 10px; z-index: 9999999;" onclick="openScreen('home')"><i class="fas fa-sync"></i> Refresh</div>
<div style="position: absolute; top: 0; left: 0; width: 99%; z-index: 9999999; padding: 10px;">
<div class="btn btn-outline-primary btn-sm" id="sign-out-btn" style="display: none; position: fixed; top: 10px; right: 10px;" onclick="document.location.href = 'index.html'"><i class="fas fa-sign-out-alt"></i> Log out</div>
<div class="row justify-content-center" id="alert-box">
<div id="alert-box">
</div>
</div>
<div id="content-frame" style="position: absolute; top: 0; left: 0; height: 100%; width: 100%; padding-top: 30px;">
</div>
<div style="position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; z-index: 9999999;" id="timeout-bar-box">
<div style="position: fixed; bottom: 0; left: 0; width: 100%; height: 3px; z-index: 9999999;" id="timeout-bar-box">
<div id="timeout-bar" style="width: 0%; background-color: #2196F3; height: 100%;"></div>
</div>
@ -35,5 +34,5 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
<script src="js/settings.js"></script>
<script src="js/session.js"></script>
<script>
openScreen("login");
openScreen("login");
</script>

2
js/functions.js

@ -44,7 +44,7 @@ function showmsg(text, style, details, timeout) {
}
$("#alert-box")
.hide()
.html('<div class="alert alert-' + style + ' alert-dismissible fade show" role="alert"><h5 class="alert-heading">' + text + '</h5>' + details + '<button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">&times;</span></button></div>')
.html('<div class="alert alert-' + style + ' alert-dismissible fade show" role="alert" style="position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 9999999;"><h5 class="alert-heading">' + text + '</h5>' + details + '<button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">&times;</span></button></div>')
.fadeIn("fast");
clearTimeout(msgtimeout);
if (timeout !== false) {

14
js/home.js

@ -8,10 +8,19 @@ var loadedCardTypes = [];
var totalCardTypes = [];
var cardSettings = {
"qwikclock_punchinout": {"classes": "col-sm-12 col-md-4 col-lg-4 col-xl-4 order-1"},
"qwikclock_myshifts": {"classes": "col-sm-12 col-md-8 col-lg-8 col-xl-6 order-2"}
};
function loadCard(type, apiurl, title) {
$.get("cards/" + type + ".html", {}, function (html) {
console.log(type + " " + apiurl + " " + title);
var box = $('<div class="col col-sm-12 col-md-6 col-lg-6 col-xl-4" id=""></div>');
var cardClasses = "col-sm-12 col-md-6 col-lg-6 col-xl-4 order-12";
if (cardSettings.hasOwnProperty(type) && cardSettings[type].hasOwnProperty("classes")) {
cardClasses = cardSettings[type]["classes"];
}
var box = $('<div class="col ' + cardClasses + '" id=""></div>');
var card = $('<div class="card card_app card_' + type + '" style="width: 100%;" data-title="' + title + '" data-apiurl="' + apiurl + '"></div>');
$(card).html(html);
$(box).html(card);
@ -69,4 +78,5 @@ getApps(function (apps) {
startSessionTimeout();
$("#sign-out-btn").css("display", "inline-block");
$("#sign-out-btn").css("display", "inline-block");
$("#refresh-btn").css("display", "inline-block");

3
main.js

@ -8,7 +8,6 @@
nw.Window.open('index.html', {
"id": "station_mainwindow"
}, function (win) {
win.setMinimumSize(780, 640);
win.setMinimumSize(640, 480);
win.setPosition("center");
});

36
pages/login.html

@ -1,6 +1,6 @@
<div class="container" style="height: 100%;">
<div class="row justify-content-center align-items-center" style="height: 100%;">
<div class="col-auto">
<div class="col-12 col-sm-10 col-md-8 col-lg-6">
<div class="card" style="width: 100%;">
<h3 class="card-header"><i class="fas fa-lock"></i> Login</h3>
<ul class="nav nav-tabs">
@ -16,6 +16,40 @@
</ul>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane fade" id="userlist">
<div class="row justify-content-around">
<div class="col-4 col-lg-3 quick-user">
<i class="far fa-user fa-3x"></i>
<br />
Caroline Herschel
</div>
<div class="col-4 col-lg-3 quick-user">
<i class="far fa-user fa-3x"></i>
<br />
Edmond Halley
</div>
<div class="col-4 col-lg-3 quick-user">
<i class="far fa-user fa-3x"></i>
<br />
Jocelyn Bell Burnell
</div>
<div class="col-4 col-lg-3 quick-user">
<i class="far fa-user fa-3x"></i>
<br />
Max Born
</div>
<div class="col-4 col-lg-3 quick-user">
<i class="far fa-user fa-3x"></i>
<br />
Patty Jo Watson
</div>
<div class="col-4 col-lg-3 quick-user">
<i class="far fa-user fa-3x"></i>
<br />
Sarah Boysen
</div>
</div>
</div>
<div class="tab-pane fade active show" id="userpass">
<div id="userpass_form">
<div class="input-group">

Loading…
Cancel
Save