feat(ui): camera and event type filters (#106)

jakowenko · Sep 23, 2021 · c914308 · c914308
1 parent 81a7f42
commit c914308
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 11 deletions.
diff --git a/api/src/controllers/match.controller.js b/api/src/controllers/match.controller.js
@@ -63,12 +63,14 @@ module.exports.get = async (req, res) => {
 
   const filteredIds = db
     .prepare(
-      `SELECT t.id, detector, value FROM (
-          SELECT match.id,  json_extract(value, '$.detector') detector, json_extract(value, '$.results') results
+      `SELECT t.id, t.event, detector, value FROM (
+          SELECT match.id, event, json_extract(value, '$.detector') detector, json_extract(value, '$.results') results
           FROM match, json_each( match.response)
           ) t, json_each(t.results)
         WHERE json_extract(value, '$.name') IN (${database.params(filters.names)})
         AND json_extract(value, '$.match') IN (${database.params(filters.matches)})
+        AND json_extract(t.event, '$.camera') IN (${database.params(filters.cameras)})
+        AND json_extract(t.event, '$.type') IN (${database.params(filters.types)})
         AND json_extract(value, '$.confidence') >= ?
         AND json_extract(value, '$.box.width') >= ?
         AND json_extract(value, '$.box.height') >= ?
@@ -78,6 +80,8 @@ module.exports.get = async (req, res) => {
     .bind(
       filters.names,
       filters.matches.map((obj) => (obj === 'match' ? 1 : 0)),
+      filters.cameras,
+      filters.types,
       filters.confidence,
       filters.width,
       filters.height,
@@ -169,7 +173,7 @@ module.exports.filters = async (req, res) => {
   const detectors = db
     .prepare(
       `SELECT json_extract(value, '$.detector') name
-        FROM match, json_each( match.response)
+        FROM match, json_each(match.response)
         GROUP BY name
         ORDER BY name ASC`
     )
@@ -180,7 +184,7 @@ module.exports.filters = async (req, res) => {
     .prepare(
       `SELECT json_extract(value, '$.name') name FROM (
           SELECT json_extract(value, '$.results') results
-          FROM match, json_each( match.response)
+          FROM match, json_each(match.response)
           ) t, json_each(t.results)
         GROUP BY name
         ORDER BY name ASC`
@@ -192,13 +196,33 @@ module.exports.filters = async (req, res) => {
     .prepare(
       `SELECT IIF(json_extract(value, '$.match') == 1, 'match', 'miss') name FROM (
           SELECT json_extract(value, '$.results') results
-          FROM match, json_each( match.response)
+          FROM match, json_each(match.response)
           ) t, json_each(t.results)
         GROUP BY name
         ORDER BY name ASC`
     )
     .all()
     .map((obj) => obj.name);
 
-  res.send({ total: total.count, detectors, names, matches });
+  const cameras = db
+    .prepare(
+      `SELECT json_extract(event, '$.camera') name
+      FROM match
+      GROUP BY name
+      ORDER BY name ASC`
+    )
+    .all()
+    .map((obj) => obj.name);
+
+  const types = db
+    .prepare(
+      `SELECT json_extract(event, '$.type') name
+      FROM match
+      GROUP BY name
+      ORDER BY name ASC`
+    )
+    .all()
+    .map((obj) => obj.name);
+
+  res.send({ total: total.count, detectors, names, matches, cameras, types });
 };
diff --git a/frontend/src/components/Header.vue b/frontend/src/components/Header.vue
@@ -175,7 +175,41 @@
         </div>
         <div class="p-col-4 p-md-2 p-lg-2">
           <div class="p-fluid">
-            <label class="p-d-block p-mb-1">Min confidence (%):</label>
+            <label class="p-d-block p-mb-1">Camera</label>
+            <MultiSelect
+              v-model="selected.cameras"
+              :options="dropdowns.cameras"
+              v-on:change="emitter.emit('updateFilter')"
+            >
+              <template v-slot:value="slotProps">
+                <div v-for="(option, index) of slotProps.value" :key="option" class="p-d-inline-flex p-mr-1">
+                  <div>{{ option + addComma(slotProps.value.length, index) }}</div>
+                </div>
+              </template>
+              <template v-slot:option="slotProps">
+                <div>{{ slotProps.option }}</div>
+              </template>
+            </MultiSelect>
+          </div>
+        </div>
+        <div class="p-col custom-col">
+          <div class="p-fluid">
+            <label class="p-d-block p-mb-1">Type</label>
+            <MultiSelect v-model="selected.types" :options="dropdowns.types" v-on:change="emitter.emit('updateFilter')">
+              <template v-slot:value="slotProps">
+                <div v-for="(option, index) of slotProps.value" :key="option" class="p-d-inline-flex p-mr-1">
+                  <div>{{ option + addComma(slotProps.value.length, index) }}</div>
+                </div>
+              </template>
+              <template v-slot:option="slotProps">
+                <div>{{ slotProps.option }}</div>
+              </template>
+            </MultiSelect>
+          </div>
+        </div>
+        <div class="p-col custom-col-xsm">
+          <div class="p-fluid">
+            <label class="p-d-block p-mb-1" v-tooltip.left="'Minimum confidence (%)'">%</label>
             <InputText
               v-model="filters.confidence"
               type="number"
@@ -261,6 +295,8 @@ export default {
       names: [],
       matches: [],
       detectors: [],
+      cameras: [],
+      types: [],
       confidence: 0,
       width: 0,
       height: 0,
@@ -375,7 +411,7 @@ export default {
   watch: {
     dropdowns: {
       handler(value) {
-        ['names', 'detectors', 'matches'].forEach((key) => {
+        ['names', 'detectors', 'matches', 'cameras', 'types'].forEach((key) => {
           if (
             JSON.stringify(
               this.selected[key] ? this.selected[key].flatMap((item) => (value[key].includes(item) ? item : [])) : [],
@@ -389,9 +425,9 @@ export default {
     },
     selected: {
       handler(value) {
-        this.filters.names = value?.names || [];
-        this.filters.matches = value?.matches || [];
-        this.filters.detectors = value?.detectors || [];
+        ['names', 'detectors', 'matches', 'cameras', 'types'].forEach((key) => {
+          this.filters[key] = value?.[key] || [];
+        });
       },
       deep: true,
     },