From 030a265ed2c67131ce90da6b61d65e19899191cc Mon Sep 17 00:00:00 2001
From: Skylar Ittner <admin@netsyms.com>
Date: Sat, 18 Nov 2017 16:03:16 -0700
Subject: [PATCH] Change "show all shifts" checkbox to toolbar button

---
 lang/en_us.php      |  2 ++
 pages/shifts.php    | 21 +++++++++++++--------
 static/css/app.css  |  5 +++++
 static/js/shifts.js | 19 ++++++++++++++-----
 4 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/lang/en_us.php b/lang/en_us.php
index c63c33b..35124db 100644
--- a/lang/en_us.php
+++ b/lang/en_us.php
@@ -60,6 +60,8 @@ define("STRINGS", [
     "friday" => "Friday",
     "saturday" => "Saturday",
     "show all shifts" => "Show all shifts",
+    "showing all shifts" => "Showing all shifts",
+    "show only my shifts" => "Show only my shifts",
     "new shift" => "New Shift",
     "edit shift" => "Edit Shift",
     "shift added" => "Shift added.",
diff --git a/pages/shifts.php b/pages/shifts.php
index 36ae7ce..69a0011 100644
--- a/pages/shifts.php
+++ b/pages/shifts.php
@@ -16,16 +16,20 @@ $totalpunches = count($punches);
 ?>
 
 <p class="page-header h5"><i class="fa fa-clock-o fa-fw"></i> <?php lang("shifts") ?></p>
-<?php
-if (account_has_permission($_SESSION['username'], "QWIKCLOCK_MANAGE")) {
-    ?>
-    <div class="btn-group mgn-btm-10px">
+
+<div class="btn-group mgn-btm-10px">
+    <?php
+    if (account_has_permission($_SESSION['username'], "QWIKCLOCK_MANAGE")) {
+        ?>
         <a href="app.php?page=editshift" class="btn btn-success"><i class="fa fa-calendar-plus-o"></i> <?php lang("new shift"); ?></a>
         <a href="app.php?page=assignshift" class="btn btn-info"><i class="fa fa-calendar-check-o"></i> <?php lang("assign shift"); ?></a>
-    </div>
-    <?php
-}
-?>
+        <?php
+    }
+    ?>
+    <span class="btn btn-grey" id="show_btn" data-showall=""><i class="fa fa-filter"></i> <span><?php lang("show all shifts") ?></span></span>
+</div>
+<div class="text-grey" id="showing-all"><i class="fa fa-info-circle"></i> <?php lang("showing all shifts"); ?></div>
+
 <table id="shifttable" class="table table-bordered table-striped">
     <thead>
         <tr>
@@ -56,4 +60,5 @@ if (account_has_permission($_SESSION['username'], "QWIKCLOCK_MANAGE")) {
      * it needs to inject the filter checkbox
      */
     var lang_show_all_shifts = "<?php lang("show all shifts") ?>";
+    var lang_show_my_shifts = "<?php lang("show only my shifts") ?>";
 </script>
\ No newline at end of file
diff --git a/static/css/app.css b/static/css/app.css
index dafcb90..7049ef4 100644
--- a/static/css/app.css
+++ b/static/css/app.css
@@ -73,6 +73,11 @@
     text-align: center;
 }
 
+#showing-all {
+    display: inline-block;
+    margin-left: 10px;
+}
+
 /*
 ==============================
             THEMING
diff --git a/static/js/shifts.js b/static/js/shifts.js
index d51483e..a016f08 100644
--- a/static/js/shifts.js
+++ b/static/js/shifts.js
@@ -35,15 +35,24 @@ var shifttable = $('#shifttable').DataTable({
     ajax: {
         url: "lib/getshifttable.php",
         data: function (d) {
-            if ($('#show_all_checkbox').is(':checked')) {
+            if ($('#show_btn').data("showall") == 1) {
                 d.show_all = 1;
             }
         },
     }
 });
 
-$('#shifttable_filter').append("<div class=\"checkbox inblock\"><label><input type=\"checkbox\" id=\"show_all_checkbox\"> " + lang_show_all_shifts + "</label></div>");
-
-$('#show_all_checkbox').click(function () {
+$('#show_btn').click(function () {
+    if ($('#show_btn').data("showall") == 1) {
+        $('#show_btn').data("showall", "");
+        $('#showing-all').css("display", "none");
+        $('#show_btn span').text(lang_show_all_shifts);
+    } else {
+        $('#show_btn').data("showall", "1");
+        $('#showing-all').css("display", "inline-block");
+        $('#show_btn span').text(lang_show_my_shifts);
+    }
     shifttable.ajax.reload();
-});
\ No newline at end of file
+});
+
+$('#showing-all').css("display", "none");
\ No newline at end of file