station-manager-2.0/src/components/Changelog.vue

<template>
  <div class="changelog">
    <h3>Changelog:</h3>
    <hr color="white" />

    <!-- Changelog -->
    <div v-for="(item, listIndex) in changeList" :key="listIndex">
      <b class="text--accent">{{ item.name }}</b> ->

      <!-- Info dla scenerii do usunięcia -->
      <span v-if="item.toRemove" class="text--accent"> do usunięcia</span>

      <!-- Info dla scenerii do ze zmianiami do zaktualizowania -->
      <span v-else>
        <span v-for="({ name: changeName, value: changeValue }, changeIndex) in item.changes" :key="changeIndex">
          <i style="color: white">{{ (HeaderTypes as any)[changeName] }}: </i>

          <span v-if="changeName == 'availability'">
            {{ getAvailabilityValue(changeValue as Availability) }}
          </span>

          <RouteList v-else-if="changeName == 'routesInfo'" :routes="changeValue" />

          <span v-else-if="typeof changeValue === 'boolean'">
            {{ changeValue ? 'TAK' : 'NIE' }}
          </span>

          <span v-else>
            {{ changeValue }}
          </span>

          <span v-if="changeIndex < item.changes.length - 1">; </span>
        </span>
      </span>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useStore } from '../store';
import { Availability, HeaderTypes } from '../types/types';
import { getAvailabilityValue } from '../types/typeUitls';
import RouteList from './RouteList.vue';

export default defineComponent({
  data() {
    return {
      store: useStore(),
      getAvailabilityValue,
      HeaderTypes,
    };
  },
  computed: {
    changeList() {
      return this.store.changeList.map((changeItem) => {
        return {
          name: changeItem.name,
          toRemove: changeItem.toRemove,
          changes: Object.keys(changeItem)
            .filter((k) => !/^(id|name)$/.test(k))
            .map((k) => ({ name: k, value: (changeItem as any)[k] })),
        };
      });
    },
    //  changelog() {
    //    return this.store.changeList
    //      .map((changeItem) => {
    //        let itemChanges = [];
    //        if (changeItem.toRemove) return `<b class='text--accent'>${changeItem.name} -></b> do usunięcia`;
    //        for (let change in changeItem) {
    //          let propChange = change as ChangeProp;
    //          if (/^(id|name)$/.test(propChange)) continue;
    //          let value = typeof changeItem[propChange] === 'boolean' ? (changeItem[propChange] ? 'TAK' : 'NIE') : changeItem[propChange];
    //          if (propChange == 'availability') value = getAvailabilityValue(changeItem[propChange] as Availability);
    //          // if (propChange == 'routesInfo') value = this.getRouteNames(changeItem[propChange] as SceneryRoutesInfo[]);
    //          itemChanges.push(`<i style='color: white'>${(HeaderTypes as any)[propChange]}:</i> ${value ?? '-'}`);
    //        }
    //        console.log(itemChanges);
    //        return `<b class='text--accent'>${changeItem.name} -></b> ` + itemChanges.join('; ');
    //      })
    //      .join(' <br /> ');
    //  },
  },
  components: { RouteList },
});
</script>

<style lang="scss" scoped></style>