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

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

    <!-- Changelog -->
    <ul>
      <li 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>

            <span v-else-if="changeName == 'routesInfo'"> zmiana parametrów szlaków</span>

            <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>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { Availability, AvailabilityTypes, HeaderTypes } from '../types/sceneries.types';
import { useSceneriesStore } from '../stores/sceneries.store';

export default defineComponent({
  data() {
    return {
      sceneriesStore: useSceneriesStore(),
      HeaderTypes,
    };
  },

  computed: {
    changeList() {
      return this.sceneriesStore.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] })),
        };
      });
    },
  },

  methods: {
    getAvailabilityValue(availability: Availability) {
      return AvailabilityTypes[availability];
    },
  },
});
</script>

<style lang="scss" scoped>
ul {
  height: 200px;
  overflow: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

h3 {
  margin: 0;
}
</style>