[#137] Add light-weight protocol filter

Author: g3force

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>

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

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,

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>