stacjownik/src/components/SceneryView/SceneryInfo/SceneryInfoGeneral.vue

<template>
  <section class="info-general">
    <div v-if="station?.generalInfo === undefined">
      <b>{{ $t('scenery.no-data') }}</b>
    </div>

    <div v-else>
      <div>
        <span>
          <a
            v-if="station?.generalInfo"
            :href="station.generalInfo.url"
            class="forum-link"
            target="_blank"
          >
            {{ $t('scenery.forum-topic') }}
          </a>
        </span>

        <span>
          &bull;
          <b>{{ $t('scenery.abbrev') }}</b> {{ station.generalInfo.abbr }}
        </span>

        <span>
          &bull; <b>{{ $t('availability.title') }}:</b>
          {{ $t(`availability.${station.generalInfo.availability}`) }}

          <span v-if="station.generalInfo.reqLevel > -1">
            -
            {{
              $t(
                'scenery.req-level',
                { lvl: station.generalInfo.reqLevel },
                station.generalInfo.reqLevel
              )
            }}
          </span>
        </span>

        <span>
          &bull; <b>{{ $t('controls.title') }}:</b>
          {{ $t(`controls.${station.generalInfo.controlType}`) }}
        </span>

        <span>
          &bull; <b>{{ $t('signals.title') }}:</b>
          {{ $t(`signals.${station.generalInfo.signalType}`) }}
        </span>

        <span v-if="station.generalInfo.lines">
          &bull; <b>{{ $t('scenery.lines-title') }}:</b> {{ station.generalInfo.lines }}
        </span>

        <span v-if="station.generalInfo.project">
          &bull; <b>{{ $t('scenery.project-title') }}: </b>
          <a
            style="color: salmon; text-decoration: underline; font-weight: bold"
            :href="station.generalInfo.projectUrl"
            target="_blank"
          >
            {{ station.generalInfo.project }}
          </a>
        </span>

        <span v-if="additionalTools.length != 0">
          &bull; <b>{{ $t('scenery.additional-tools-title') }}: </b>
          {{ additionalTools.join(', ') }}
        </span>
      </div>
    </div>
  </section>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { Station } from '../../../typings/common';

export default defineComponent({
  props: {
    station: {
      type: Object as PropType<Station>
    }
  },

  computed: {
    additionalTools() {
      if (this.$props.station?.generalInfo === undefined) return [];
      let tools = [];

      if (this.$props.station.generalInfo.SUP) tools.push('SUP');
      if (this.$props.station.generalInfo.ASDEK) tools.push('ASDEK');

      return tools;
    }
  }
});
</script>

<style lang="scss" scoped>
.info-general {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.scenery-abbrev {
  font-size: 1.05em;
}

a.forum-link {
  text-decoration: underline;
  font-weight: bold;
}
</style>