Show game event details as tree

Author: g3force

frontend/src/components/match/GameEventDetailsTree.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import {computed} from "vue";
+import type {GameEvent} from "@/proto/ssl_gc_game_event";
+import {gameEventDetails} from "@/helpers";
+
+const props = defineProps<{
+  gameEvent: GameEvent,
+}>()
+
+const details = computed(() => {
+  return gameEventDetails(props.gameEvent)
+})
+
+interface QTreeNode {
+  label: string,
+  children?: QTreeNode[]
+}
+
+function treeChildren(object: { [key: string]: any }): QTreeNode[] {
+  const nodes = []
+  const keys = Object.keys(object)
+  for (const key of keys) {
+    const detail = object[key];
+    if (detail !== undefined) {
+      if (typeof detail === 'object') {
+        nodes.push({
+          label: key,
+          children: treeChildren(detail)
+        })
+      } else {
+        nodes.push({
+          label: `${key}: ${detail}`
+        })
+      }
+    }
+  }
+  return nodes
+}
+
+const nodes = treeChildren(details.value)
+
+</script>
+
+<template>
+  <q-card v-if="nodes.length > 0">
+    <q-card-section>
+      <q-tree
+        :nodes="nodes"
+        node-key="label"
+        no-connectors
+        default-expand-all
+        dense
+      />
+    </q-card-section>
+  </q-card>
+</template>

frontend/src/components/match/GameEventItem.vue

@@ -3,7 +3,8 @@ import {computed} from "vue";
 import TeamBadge from "@/components/common/TeamBadge.vue";
 import {gameEventNames} from "@/helpers/texts";
 import type {GameEvent} from "@/proto/ssl_gc_game_event";
-import {gameEventDetails, gameEventForTeam, originIcon} from "@/helpers";
+import {gameEventForTeam, originIcon} from "@/helpers";
+import GameEventDetailsTree from "@/components/match/GameEventDetailsTree.vue";
 
 const props = defineProps<{
   gameEvent: GameEvent,
@@ -14,10 +15,6 @@ const label = computed(() => {
   return gameEventNames.get(props.gameEvent.type!)
 })
 
-const details = computed(() => {
-  return gameEventDetails(props.gameEvent)
-})
-
 const team = computed(() => {
   return gameEventForTeam(props.gameEvent)
 })
@@ -48,10 +45,6 @@ const origins = computed(() => {
         </div>
       </q-item-section>
     </template>
-    <q-card>
-      <q-card-section>
-        {{ details }}
-      </q-card-section>
-    </q-card>
+    <GameEventDetailsTree :game-event="props.gameEvent"/>
   </q-expansion-item>
 </template>

frontend/src/components/protocol/ProtocolItem.vue

@@ -3,10 +3,10 @@ import {computed, inject} from "vue";
 import TeamBadge from "@/components/common/TeamBadge.vue";
 import type {ProtocolEntry} from "@/proto/ssl_gc_api";
 import formatDuration from "format-duration";
-import {gameEventDetails, gameEventDetailsKeys} from "@/helpers";
 import {changeDetails} from "@/helpers/ChangeDetails";
 import type {ControlApi} from "@/providers/controlApi/ControlApi";
 import OriginIcon from "@/components/common/OriginIcon.vue";
+import GameEventDetailsTree from "@/components/match/GameEventDetailsTree.vue";
 
 const props = defineProps<{
   protocolEntry: ProtocolEntry,
@@ -29,18 +29,6 @@ const revertible = computed(() => {
 const change = computed(() => {
   return changeDetails(props.protocolEntry.change!)
 })
-const details = computed(() => {
-  if (change.value.gameEvent) {
-    return gameEventDetails(change.value.gameEvent)
-  }
-  return undefined
-})
-const detailsKeys = computed(() => {
-  if (details.value) {
-    return gameEventDetailsKeys(details.value)
-  }
-  return []
-})
 const gameEventOrigins = computed(() => {
   if (change.value.gameEvent) {
     return change.value.gameEvent.origin!.filter(o => o !== origin.value)
@@ -90,13 +78,7 @@ function revert() {
           </q-item-section>
         </template>
 
-        <q-card v-if="detailsKeys.length > 0">
-          <q-card-section>
-            <q-item-label v-for="key in detailsKeys" :key="key">
-              {{ key }}: {{ details[key] }}
-            </q-item-label>
-          </q-card-section>
-        </q-card>
+        <GameEventDetailsTree :game-event="change.gameEvent" v-if="change.gameEvent"/>
       </q-expansion-item>
     </q-item-section>
 

frontend/src/helpers/index.ts

@@ -29,14 +29,8 @@ export function gameEventForTeam(gameEvent: GameEvent): Team {
 }
 
 export function gameEventDetails(gameEvent: GameEvent) {
-  const event = gameEvent.event!
-  return (event as { [key: string]: any })[event.$case]
-}
-
-export function gameEventDetailsKeys(details: any) {
-  return Object.keys(details)
-    .filter(k => details[k] !== undefined)
-    .filter(k => k !== "byTeam")
+  const event = gameEvent.event! as { [key: string]: any }
+  return event[event.$case] as { [key: string]: any }
 }
 
 export const originIcon = (origin: string) => {