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

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

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");
+    });
+});

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");

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");
+    });
 });

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");
+    });
 });

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>

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>
+<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="card-body">
+<div class="list-group message-list">
-    <div class="list-group message-list">
-    </div>
 </div>

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>
+<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="card-body">
+<div class="list-group task-list">
-    <div class="list-group task-list">
-    </div>
 </div>

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 id="alert-box">
-    <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>
 </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>

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) {

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");

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");
-    
 });

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">