Change "show all shifts" checkbox to toolbar button

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

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>

static/css/app.css

@@ -73,6 +73,11 @@
     text-align: center;
 }
 
+#showing-all {
+    display: inline-block;
+    margin-left: 10px;
+}
+
 /*
 ==============================
             THEMING

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();
-});
+});
+
+$('#showing-all').css("display", "none");