From 2455d1e1a3e1384a58c57bc43ed12d2515373015 Mon Sep 17 00:00:00 2001
From: Nicolai Ommer <nicolai.ommer@gmail.com>
Date: Fri, 16 Feb 2024 19:46:07 +0100
Subject: [PATCH] [#137] Add light-weight protocol filter

---
 frontend/src/App.vue                          |  4 ++-
 .../src/components/protocol/ProtocolList.vue  |  7 ++---
 frontend/src/helpers/ChangeDetails.ts         |  2 +-
 frontend/src/views/ProtocolView.vue           | 30 ++++++++++++++++++-
 4 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 3144b777..e176b675 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -8,8 +8,10 @@ import ManualControlView from "@/views/ManualControlView.vue";
 import ProtocolList from "@/components/protocol/ProtocolList.vue";
 import {useQuasar} from "quasar";
 import {useUiStateStore} from "@/store/uiState";
+import {useProtocolStore} from "@/store/protocolState";
 
 const uiStore = useUiStateStore()
+const protocolStore = useProtocolStore()
 
 const toggleLeftDrawer = () => {
   uiStore.leftDrawerOpen = !uiStore.leftDrawerOpen
@@ -99,7 +101,7 @@ const dev = computed(() => {
     <q-drawer v-model="uiStore.rightDrawerOpen" side="right" bordered :width="uiStore.rightDrawerWidth">
       <div v-touch-pan.preserveCursor.prevent.mouse.horizontal="resizeRightDrawer"
            class="q-right-drawer__resizer"></div>
-      <ProtocolList dense/>
+      <ProtocolList dense :protocol-entries="protocolStore.protocolEntries"/>
     </q-drawer>
 
     <q-page-container>
diff --git a/frontend/src/components/protocol/ProtocolList.vue b/frontend/src/components/protocol/ProtocolList.vue
index 97caa232..0090c766 100644
--- a/frontend/src/components/protocol/ProtocolList.vue
+++ b/frontend/src/components/protocol/ProtocolList.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
 import ProtocolItem from "@/components/protocol/ProtocolItem.vue";
-import {useProtocolStore} from "@/store/protocolState";
+import type {ProtocolEntry} from "@/proto/ssl_gc_api";
 
 defineProps<{
   dense?: boolean,
+  protocolEntries: ProtocolEntry[],
 }>()
 
-const store = useProtocolStore()
-
 </script>
 
 <template>
@@ -17,7 +16,7 @@ const store = useProtocolStore()
     virtual-scroll-item-size="50"
     virtual-scroll-slice-ratio-before="0.5"
     virtual-scroll-slice-ratio-after="0.5"
-    :items="store.protocolEntries"
+    :items="protocolEntries"
   >
     <template v-slot="{ item, index }">
       <ProtocolItem
diff --git a/frontend/src/helpers/ChangeDetails.ts b/frontend/src/helpers/ChangeDetails.ts
index 486b8d77..82023a10 100644
--- a/frontend/src/helpers/ChangeDetails.ts
+++ b/frontend/src/helpers/ChangeDetails.ts
@@ -5,7 +5,7 @@ import type {Change, Change_UpdateConfig, Change_UpdateTeamState} from "@/proto/
 import type {GameEvent} from "@/proto/ssl_gc_game_event";
 import type {Team} from "@/proto/ssl_gc_common";
 
-interface ChangeDetails {
+export interface ChangeDetails {
   typeName: string,
   title: string,
   gameEvent?: GameEvent,
diff --git a/frontend/src/views/ProtocolView.vue b/frontend/src/views/ProtocolView.vue
index 4b86f5eb..43c39c30 100644
--- a/frontend/src/views/ProtocolView.vue
+++ b/frontend/src/views/ProtocolView.vue
@@ -1,7 +1,35 @@
 <script setup lang="ts">
 import ProtocolList from "@/components/protocol/ProtocolList.vue";
+import {useProtocolStore} from "@/store/protocolState";
+import {computed, ref} from "vue";
+import {changeDetails, type ChangeDetails} from "@/helpers/ChangeDetails";
+
+const protocolStore = useProtocolStore()
+
+const command = ref(true)
+const gameEvent = ref(true)
+const other = ref(true)
+
+const showChange = (change: ChangeDetails) => {
+  if (change.typeName === 'Command') {
+    return command.value
+  }
+  if (change.typeName === 'Game Event') {
+    return gameEvent.value
+  }
+  return other.value
+}
+
+const protocolEntries = computed(() => {
+  return protocolStore.protocolEntries.filter(entry => showChange(changeDetails(entry.change!)))
+})
 </script>
 
 <template>
-  <ProtocolList/>
+  <div class="q-ma-sm">
+    <q-checkbox v-model="command" label="Command"/>
+    <q-checkbox v-model="gameEvent" label="Game Event"/>
+    <q-checkbox v-model="other" label="Other"/>
+  </div>
+  <ProtocolList :protocol-entries="protocolEntries"/>
 </template>