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

<template>
  <section class="info-routes" v-if="station.generalInfo">
    <div class="routes one-way" v-if="station.generalInfo.routes.oneWay.length > 0">
      <b>{{ $t('scenery.one-way-routes') }}</b>

      <ul class="routes-list">
        <li v-for="route in station.generalInfo.routes.oneWay">
          <span :class="{ 'no-catenary': !route.catenary, internal: route.isInternal }"> {{ route.name }}</span>
          <span v-if="route.speed" class="speed">{{ route.speed }}</span>
          <span v-if="route.SBL" class="sbl">SBL</span>
        </li>
      </ul>
    </div>

    <div class="routes two-way" v-if="station.generalInfo.routes.twoWay.length > 0">
      <b>{{ $t('scenery.two-way-routes') }}</b>

      <ul class="routes-list">
        <li v-for="route in station.generalInfo.routes.twoWay">
          <span :class="{ 'no-catenary': !route.catenary, internal: route.isInternal }">{{ route.name }}</span>
          <span v-if="route.speed" class="speed">{{ route.speed }}</span>
          <span v-if="route.SBL" class="sbl">SBL</span>
        </li>
      </ul>
    </div>
  </section>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import Station from '../../../scripts/interfaces/Station';

export default defineComponent({
  props: {
    station: {
      type: Object as () => Station,
      default: {},
    },
  },
});
</script>

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

  margin: 1em 0;
}

.routes {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

  padding: 0.25em;
}

ul.routes-list {
  margin: 0.45em 0.25em;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  li {
    margin: 0.5em 0.25em;

    span {
      padding: 0.2em 0.25em;
      background-color: #007599;
      font-weight: bold;

      &.no-catenary {
        background-color: #686868;
      }

      &.internal {
        text-decoration: underline;
      }

      &.speed {
        background-color: #404040;
        color: #cfcfcf;
      }

      &.sbl {
        color: var(--clr-primary);
        background-color: #404040;
      }

      &:last-child {
        border-radius: 0 0.5em 0.5em 0;
      }

      &:first-child {
        border-radius: 0.5em 0 0 0.5em;
      }

      &:only-child {
        border-radius: 0.5em;

      }
    }
  }
}
</style>