allow filtering by incident type on incidents page

#264

src/ims/element/incident/incidents/_incidents.py

@@ -72,3 +72,12 @@ async def concentric_street_name_by_id(
         """
         namesByID = await self.config.store.concentricStreets(self.event.id)
         return jsonTextFromObject(namesByID)
+
+    @renderer
+    async def incident_types(
+        self, request: IRequest, tag: Tag
+    ) -> KleinRenderable:
+        types = await self.config.store.incidentTypes()
+        types = sorted(t for t in types)
+        types = tuple(t for t in types)
+        return jsonTextFromObject(types)

src/ims/element/incident/incidents/template.xhtml

@@ -17,6 +17,7 @@
     var viewIncidentReportsURL = urlReplace(url_viewIncidentReports);
 
     var concentricStreetNameByID = <json t:render="concentric_street_name_by_id" />;
+    const allIncidentTypes = <json t:render="incident_types" />;
 
     initIncidentsPage();
   </script>

src/ims/element/incident/incidents_template/template.xhtml

@@ -11,7 +11,7 @@
     </a>
   </p>
 
-  <div id="button_container" class="btn-group col-sm-5" role="group">
+  <div id="button_container" class="btn-group col-sm-7" role="group">
     <div class="btn-group new_incident" role="group">
       <a href="./new" target="_blank">
         <button
@@ -31,16 +31,16 @@
         class="btn btn-sm btn-default"
         data-toggle="dropdown"
       >
-        Show
+
         <span class="selection">All</span>
         <span class="caret" />
       </button>
       <ul class="dropdown-menu">
         <li id="show_state_all" onclick="showState('all');">
-          <span class="checkmark" /><a href="#" class="name">All   </a>
+          <span class="checkmark" /><a href="#" class="name">All States</a>
         </li>
         <li id="show_state_open" onclick="showState('open');">
-          <span class="checkmark" /><a href="#" class="name">Open  </a>
+          <span class="checkmark" /><a href="#" class="name">Open</a>
         </li>
         <li id="show_state_active" onclick="showState('active');">
           <span class="checkmark" /><a href="#" class="name">Active</a>
@@ -55,7 +55,7 @@
         class="btn btn-sm btn-default"
         data-toggle="dropdown"
       >
-        Show
+
         <span class="selection">All Days</span>
         <span class="caret" />
       </button>
@@ -78,14 +78,33 @@
       </ul>
     </div>
 
+    <div class="btn-group" role="group">
+      <button
+              id="show_type"
+              type="button"
+              class="btn btn-sm btn-default"
+              data-toggle="dropdown"
+      >
+
+        <span class="selection">All Types</span>
+        <span class="caret" />
+      </button>
+      <ul id="ul_show_type" class="dropdown-menu">
+        <li id="show_type_all" onclick="showType(null);">
+          <span class="checkmark" /><a href="#" class="name">All Types</a>
+        </li>
+        <!-- Additional li will be inserted here by JQuery -->
+      </ul>
+    </div>
+
     <div class="btn-group" role="group">
       <button
         id="show_rows"
         type="button"
         class="btn btn-sm btn-default"
         data-toggle="dropdown"
       >
-        Show
+
         <span class="selection">All Rows</span>
         <span class="caret" />
       </button>
@@ -106,7 +125,7 @@
      </div>
   </div>
 
-  <div id="search_container" class="form-group form-group-sm col-sm-7">
+  <div id="search_container" class="form-group form-group-sm col-sm-5">
     <div class="flex-input-container">
       <label class="control-label" for="search_input">
         <span class="glyphicon glyphicon-search" />

src/ims/element/incident/reports_template/template.xhtml

@@ -31,7 +31,6 @@
         class="btn btn-sm btn-default"
         data-toggle="dropdown"
       >
-        Show
         <span class="selection">All Days</span>
         <span class="caret" />
       </button>
@@ -61,7 +60,6 @@
         class="btn btn-sm btn-default"
         data-toggle="dropdown"
       >
-        Show
         <span class="selection">All Rows</span>
         <span class="caret" />
       </button>

src/ims/element/static/incidents.js

@@ -267,11 +267,24 @@ function initTableButtons() {
         .children(".col-sm-6:first")
         .replaceWith($("#button_container"));
 
+    const $typeFilter = $("#ul_show_type");
+    for (const i in allIncidentTypes) {
+        const type = allIncidentTypes[i];
+        const $sp = $("<span>", {class: "checkmark"});
+        const $a = $("<a>", {class: "name", href:"#"});
+        $a.text(type.toString());
+        const $li = $("<li>", {id: "show_type_" + i, onclick: "showType(" + i + ")"});
+        $li.append($sp, $a);
+        $typeFilter.append($li);
+    }
+
+
     // Set button defaults
 
     showState("open");
     showDays(null);
     showRows(25);
+    showType("all");
 }
 
 
@@ -343,6 +356,21 @@ function initSearch() {
                 return false
             }
 
+            switch (_showType) {
+                case null:
+                    // fallthrough
+                case "all":
+                    break;
+                default:
+                    if (_showType >= 0 && _showType < allIncidentTypes.length) {
+                        const st = allIncidentTypes[_showType];
+                        if (!(incident.incident_types??[]).includes(st)) {
+                            return false;
+                        }
+                    }
+                    break;
+            }
+
             return true;
         }
     );
@@ -401,6 +429,32 @@ function showDays(daysBackToShow) {
     incidentsTable.draw();
 }
 
+//
+// Show type button handling
+//
+
+// _showType will be one of:
+//  "all" or null (meaning show everything)
+//  a numeric index into allIncidentTypes
+let _showType = null;
+
+function showType(typeToShow) {
+    // see _showType above for values of "typeToShow"
+    const id = typeToShow??"all";
+
+    const $menu = $("#show_type");
+    const $item = $("#show_type_" + id);
+
+    // Get title from selected item
+    const selection = $item.children(".name").html();
+
+    // Update menu title to reflect selected item
+    $menu.children(".selection").html(selection);
+
+    _showType = typeToShow;
+
+    incidentsTable.draw();
+}
 
 //
 // Show rows button handling