Display battle event changes.

src/views/pages/Changes.vue

@@ -5,10 +5,11 @@
   import Abilities from './changes/Abilities.vue';
   import Modifiers from './changes/Modifiers.vue';
   import Statuses from './changes/Statuses.vue';
+  import BattleEvents from './changes/BattleEvents.vue';
 
   const props = defineProps<{fromCommitId:string, commitId:string}>()
 
-  const tabs:string[] = ['Abilities', 'Modifiers', 'Statuses']
+  const tabs:string[] = ['Abilities', 'Modifiers', 'Statuses', 'Battle Events']
   const tabsWithContext = ['Abilities', 'Modifiers']
   const selectedTab = ref('Abilities')
 
@@ -27,6 +28,8 @@
 
   provide('createAbilityRoute', (abilityId:string, isPrevious:boolean) : object => { return { name: 'ability', params:{ commitId: isPrevious ? props.fromCommitId : props.commitId, abilityId: abilityId, } }})
   provide('createModifierRoute', (modifierId:string, isPrevious:boolean) : object => { return { name: 'modifier', params:{ commitId: isPrevious ? props.fromCommitId : props.commitId, modifierId: modifierId, } }})
+  provide('createBattleEventRoute', (battleEventId:number, isPrevious:boolean) : object => { return { name: 'battleEvent', params:{ commitId: isPrevious ? props.fromCommitId : props.commitId, objectId: battleEventId, } }})
+  provide('createBattleEventAbilityRoute', (battleEventId:number, abilityId:string, isPrevious:boolean) : object => { return { name: 'battleEventAbility', params:{ commitId: isPrevious ? props.fromCommitId : props.commitId, abilityId: abilityId, objectId: battleEventId, } }})
 </script>
 
 <template>
@@ -47,6 +50,8 @@
         :contextType="contextTypes[selectedContextType]"  />
       <Statuses v-if="selectedTab == 'Statuses'" 
         :fromCommitId="fromCommitId" :commitId="commitId" />
+      <BattleEvents v-if="selectedTab == 'Battle Events'" 
+        :fromCommitId="fromCommitId" :commitId="commitId" />
     </section>
   </main>
 </template>

src/views/pages/changes/BattleEventItem.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+  import { inject, } from 'vue';
+  import { BattleEvent } from '@/sources/battleevent';
+
+  defineProps<{battleEvent:BattleEvent, isPrevious:boolean}>()
+  const createBattleEventAbilityRoute = inject<(key:number, abilityId:string, from:boolean) => object>('createBattleEventAbilityRoute') as (key:number, abilityId:string, from:boolean) => object
+  const createBattleEventRoute = inject<(key:number, from:boolean) => object>('createBattleEventRoute') as (key:number, from:boolean) => object
+</script>
+
+<template>
+
+  <div class="block">
+    <RouterLink :to="createBattleEventRoute(battleEvent.BattleEventID, isPrevious)">
+      <em>{{ battleEvent.BattleEventName }}</em>
+    </RouterLink>
+    &nbsp;<span class="minor">{{ battleEvent.EventSubType }}</span>
+    <div class="block" v-for="abilityName in battleEvent.AbilityList">
+      <RouterLink :to="createBattleEventAbilityRoute(battleEvent.BattleEventID, abilityName, isPrevious)">
+        <em>{{ abilityName }}</em>
+      </RouterLink>
+    </div>
+  </div>
+
+</template>
+
+<style scoped>
+</style>

src/views/pages/changes/BattleEvents.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+  import { computed, ref, watch, } from 'vue';
+  import { BattleEventConfig, getBattleEvents } from '@/sources/battleevent';
+  import BattleEventItem from './BattleEventItem.vue';
+  import LoadingArea from '@/components/LoadingArea.vue';
+
+  const props = defineProps<{fromCommitId:string, commitId:string}>()
+
+  const loading = ref(true)
+  const battleEventsFrom = ref<BattleEventConfig>({} as BattleEventConfig)
+  const battleEvents = ref<BattleEventConfig>({} as BattleEventConfig)
+  watch(props, async () => 
+  {
+    loading.value = true
+    battleEventsFrom.value = await getBattleEvents(props.fromCommitId)
+    battleEvents.value = await getBattleEvents(props.commitId)
+    loading.value = false
+  }, { immediate:true })
+
+  const addedBattleEvents = computed(() => Object.values(battleEvents.value)
+    .filter(v => battleEventsFrom.value[v.BattleEventID] == undefined)
+    .sort((a, b) => a.BattleEventName > b.BattleEventName ? 1 : -1))
+
+  const removedBattleEvents = computed(() => Object.values(battleEventsFrom.value)
+    .filter(v => battleEvents.value[v.BattleEventID] == undefined)
+    .sort((a, b) => a.BattleEventName > b.BattleEventName ? 1 : -1))
+
+</script>
+
+<template>
+
+  <h2>Battle Events</h2>
+
+  <LoadingArea :loading="loading">
+    <h3>{{ addedBattleEvents.length }} Added</h3>
+    <template v-for="battleEvent in addedBattleEvents">
+      <BattleEventItem :battleEvent="battleEvent" :isPrevious="false" />
+    </template>
+
+    <h3>{{ removedBattleEvents.length }} Removed</h3>
+    <template v-for="battleEvent in removedBattleEvents">
+      <BattleEventItem :battleEvent="battleEvent" :isPrevious="true" />
+    </template>
+  </LoadingArea>
+
+</template>
+
+<style scoped>
+</style>