UI: Device Table hide/show decommissioned devices

Disco.Web/ClientSource/Scripts/Modules/Disco-DataTableHelpers.js

@@ -101,7 +101,32 @@
                 }
             };
 
-            $table.dataTable(dataTableOptions);
+            var $dataTable = $table.dataTable(dataTableOptions);
+
+            // Contains Decommissioned Devces?
+            var $tbody = $table.children('tbody');
+            var $decommissionedDevices = $tbody.children('tr.decommissioned');
+
+            if ($decommissionedDevices.length > 0) {
+                var wrapper = $(this).closest('.dataTables_wrapper');
+
+                var $host = $('<div class="dataTables_decommissioned"><label><input type="checkbox" /><span></span></label></div>').prependTo(wrapper);
+                var $span = $host.find('span').text('Hide Decommissioned (' + $decommissionedDevices.length + ')');
+
+                wrapper.on('change', '.dataTables_decommissioned input', function () {
+                    var $this = $(this);
+
+                    if ($this.is(':checked')) {
+                        $table.addClass('hideDecommissioned');
+                    } else {
+                        $table.removeClass('hideDecommissioned');
+                    }
+
+                    scrollCheck.apply($table[0]);
+                    return false;
+                });
+            }
+
             dataTables.push(this);
         });
 

Disco.Web/ClientSource/Style/BundleSite.css

@@ -4384,6 +4384,12 @@ table.genericData td.id a {
 .dataTables_wrapper {
   position: relative;
 }
+.dataTables_wrapper > .a {
+  position: absolute;
+  margin-top: -24px;
+  right: 320px;
+  opacity: 0.3;
+}
 .dataTables_wrapper .dataTables_filter {
   position: absolute;
   height: 20px;
@@ -4413,6 +4419,20 @@ table.genericData td.id a {
   padding: 0;
   height: 1.4em;
 }
+.dataTables_wrapper .dataTables_decommissioned {
+  position: absolute;
+  height: 20px;
+  margin-top: -20px;
+  right: 320px;
+  font-size: .9em;
+  -moz-opacity: 0.3;
+  opacity: 0.3;
+}
+.dataTables_wrapper .dataTables_decommissioned input {
+  font-size: .8em;
+  padding: 0;
+  height: 1.2em;
+}
 .dataTables_wrapper .dataTables_paginate {
   text-align: right;
   background-color: #f4f4f4;
@@ -4495,7 +4515,8 @@ table.genericData td.id a {
 }
 .dataTables_wrapper:hover .dataTables_filter,
 .dataTables_wrapper:hover .dataTables_length,
-.dataTables_wrapper:hover .dataTables_paginate a {
+.dataTables_wrapper:hover .dataTables_paginate a,
+.dataTables_wrapper:hover .dataTables_decommissioned {
   -moz-opacity: 1;
   opacity: 1;
 }
@@ -4675,6 +4696,9 @@ div.jobTable > div.allClosed_container a.button {
 table.deviceTable tr.decommissioned {
   background-color: #ededed;
 }
+table.deviceTable.hideDecommissioned tr.decommissioned {
+  display: none;
+}
 textarea {
   font-size: 12px;
   font-family: "Segoe UI", Arial, Verdana, Tahoma, sans-serif;

Disco.Web/ClientSource/Style/Site.css

@@ -617,6 +617,12 @@ table.genericData td.id a {
 .dataTables_wrapper {
   position: relative;
 }
+.dataTables_wrapper > .a {
+  position: absolute;
+  margin-top: -24px;
+  right: 320px;
+  opacity: 0.3;
+}
 .dataTables_wrapper .dataTables_filter {
   position: absolute;
   height: 20px;
@@ -646,6 +652,20 @@ table.genericData td.id a {
   padding: 0;
   height: 1.4em;
 }
+.dataTables_wrapper .dataTables_decommissioned {
+  position: absolute;
+  height: 20px;
+  margin-top: -20px;
+  right: 320px;
+  font-size: .9em;
+  -moz-opacity: 0.3;
+  opacity: 0.3;
+}
+.dataTables_wrapper .dataTables_decommissioned input {
+  font-size: .8em;
+  padding: 0;
+  height: 1.2em;
+}
 .dataTables_wrapper .dataTables_paginate {
   text-align: right;
   background-color: #f4f4f4;
@@ -728,7 +748,8 @@ table.genericData td.id a {
 }
 .dataTables_wrapper:hover .dataTables_filter,
 .dataTables_wrapper:hover .dataTables_length,
-.dataTables_wrapper:hover .dataTables_paginate a {
+.dataTables_wrapper:hover .dataTables_paginate a,
+.dataTables_wrapper:hover .dataTables_decommissioned {
   -moz-opacity: 1;
   opacity: 1;
 }
@@ -908,6 +929,9 @@ div.jobTable > div.allClosed_container a.button {
 table.deviceTable tr.decommissioned {
   background-color: #ededed;
 }
+table.deviceTable.hideDecommissioned tr.decommissioned {
+  display: none;
+}
 textarea {
   font-size: 12px;
   font-family: "Segoe UI", Arial, Verdana, Tahoma, sans-serif;

Disco.Web/ClientSource/Style/Site.less

@@ -554,6 +554,14 @@ table {
 .dataTables_wrapper {
     position: relative;
 
+    & > .a {
+        position: absolute;
+        margin-top: -24px;
+        right: 320px;
+
+        opacity: 0.3;
+    }
+
     .dataTables_filter {
         position: absolute;
         height: 20px;
@@ -588,6 +596,23 @@ table {
         opacity: 0.3;
     }
 
+    .dataTables_decommissioned {
+        position: absolute;
+        height: 20px;
+        margin-top: -20px;
+        right: 320px;
+        font-size: .9em;
+
+        input {
+            font-size: .8em;
+            padding: 0;
+            height: 1.2em;
+        }
+
+        -moz-opacity: 0.3;
+        opacity: 0.3;
+    }
+
     .dataTables_paginate {
         text-align: right;
         background-color: @TableDataBorderColour;
@@ -685,7 +710,7 @@ table {
     }
 
     &:hover {
-        .dataTables_filter, .dataTables_length, .dataTables_paginate a {
+        .dataTables_filter, .dataTables_length, .dataTables_paginate a, .dataTables_decommissioned {
             -moz-opacity: 1;
             opacity: 1;
         }
@@ -889,6 +914,10 @@ table.deviceTable {
     tr.decommissioned {
         background-color: @SubtleColour;
     }
+
+    &.hideDecommissioned tr.decommissioned {
+        display: none;
+    }
 }
 
 textarea {