format & lint

src/components/SceneryView/SceneryInfo/SceneryInfoDispatcher.vue

@@ -3,7 +3,12 @@
     <div class="dispatcher" v-if="station.onlineInfo">
       <span
         class="dispatcher_level"
-        :style="calculateExpStyle(station.onlineInfo.dispatcherExp, station.onlineInfo.dispatcherIsSupporter)"
+        :style="
+          calculateExpStyle(
+            station.onlineInfo.dispatcherExp,
+            station.onlineInfo.dispatcherIsSupporter
+          )
+        "
       >
         {{ station.onlineInfo.dispatcherExp > 1 ? station.onlineInfo.dispatcherExp : 'L' }}
       </span>
@@ -30,7 +35,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { PropType, defineComponent } from 'vue';
 import dateMixin from '../../../mixins/dateMixin';
 import imageMixin from '../../../mixins/imageMixin';
 import routerMixin from '../../../mixins/routerMixin';
@@ -39,18 +44,18 @@ import Station from '../../../scripts/interfaces/Station';
 import StationStatusBadge from '../../Global/StationStatusBadge.vue';
 
 export default defineComponent({
-    mixins: [styleMixin, dateMixin, routerMixin, imageMixin],
-    props: {
-        station: {
-            type: Object as () => Station,
-            default: {},
-        },
-        onlineFrom: {
-            type: Number,
-            default: -1,
-        },
+  mixins: [styleMixin, dateMixin, routerMixin, imageMixin],
+  props: {
+    station: {
+      type: Object as PropType<Station>,
+      required: true
     },
-    components: { StationStatusBadge }
+    onlineFrom: {
+      type: Number,
+      default: -1
+    }
+  },
+  components: { StationStatusBadge }
 });
 </script>
 
@@ -98,4 +103,3 @@ export default defineComponent({
   }
 }
 </style>
-

src/components/SceneryView/SceneryInfo/SceneryInfoIcons.vue

@@ -76,7 +76,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { PropType, defineComponent } from 'vue';
 import imageMixin from '../../../mixins/imageMixin';
 import stationInfoMixin from '../../../mixins/stationInfoMixin';
 import styleMixin from '../../../mixins/styleMixin';
@@ -86,10 +86,10 @@ export default defineComponent({
   mixins: [stationInfoMixin, styleMixin, imageMixin],
   props: {
     station: {
-      type: Object as () => Station,
-      default: {},
-    },
-  },
+      type: Object as PropType<Station>,
+      required: true
+    }
+  }
 });
 </script>
 
@@ -118,4 +118,3 @@ export default defineComponent({
   }
 }
 </style>
-

src/components/SceneryView/SceneryInfo/SceneryInfoRoutes.vue

@@ -1,129 +1,142 @@
-<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" @click="setActiveShowLength(route.name)">
-          <span :class="{ 'no-catenary': !route.catenary, internal: route.isInternal }"> {{ route.name }}</span>
-          <span v-if="route.speed" class="speed">
-            {{ activeShowLength.includes(route.name) ? route.length + 'm' : 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, i) in station.generalInfo.routes.twoWay" @click="setActiveShowLength(route.name)">
-          <span :class="{ 'no-catenary': !route.catenary, internal: route.isInternal }">{{ route.name }}</span>
-          <span v-if="route.speed" class="speed">
-            {{ activeShowLength.includes(route.name) ? route.length + 'm' : 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: {},
-    },
-  },
-
-  methods: {
-    setActiveShowLength(name: string) {
-      if (this.activeShowLength.includes(name)) this.activeShowLength.splice(this.activeShowLength.indexOf(name), 1);
-      else this.activeShowLength.push(name);
-    },
-  },
-
-  data() {
-    return {
-      activeShowLength: [] as string[],
-    };
-  },
-});
-</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;
-    cursor: pointer;
-
-    user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-
-    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>
+<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"
+          :key="route.name"
+          @click="setActiveShowLength(route.name)"
+        >
+          <span :class="{ 'no-catenary': !route.catenary, internal: route.isInternal }">
+            {{ route.name }}</span
+          >
+          <span v-if="route.speed" class="speed">
+            {{ activeShowLength.includes(route.name) ? route.length + 'm' : 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"
+          :key="route.name"
+          @click="setActiveShowLength(route.name)"
+        >
+          <span :class="{ 'no-catenary': !route.catenary, internal: route.isInternal }">{{
+            route.name
+          }}</span>
+          <span v-if="route.speed" class="speed">
+            {{ activeShowLength.includes(route.name) ? route.length + 'm' : route.speed }}
+          </span>
+          <span v-if="route.SBL" class="sbl">SBL</span>
+        </li>
+      </ul>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent } from 'vue';
+import Station from '../../../scripts/interfaces/Station';
+
+export default defineComponent({
+  props: {
+    station: {
+      type: Object as PropType<Station>,
+      required: true
+    }
+  },
+
+  methods: {
+    setActiveShowLength(name: string) {
+      if (this.activeShowLength.includes(name))
+        this.activeShowLength.splice(this.activeShowLength.indexOf(name), 1);
+      else this.activeShowLength.push(name);
+    }
+  },
+
+  data() {
+    return {
+      activeShowLength: [] as string[]
+    };
+  }
+});
+</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;
+    cursor: pointer;
+
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+
+    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>

src/components/SceneryView/SceneryInfo/SceneryInfoSpawnList.vue

@@ -1,65 +1,71 @@
-<template>
-  <section class="info-spawn-list">
-    <h3 class="spawn-header section-header">
-      <img :src="getIcon('spawn')" alt="icon-spawn" />
-      &nbsp;{{ $t('scenery.spawns') }} &nbsp;
-      <span class="text--primary">{{ station.onlineInfo?.spawns.length || '0' }}</span>
-    </h3>
-
-    <span v-if="station.onlineInfo">
-      <span
-        class="badge spawn"
-        v-for="(spawn, i) in sortedSpawns"
-        :key="spawn.spawnName + station.onlineInfo?.dispatcherName + i"
-        :data-electrified="spawn.isElectrified"
-      >
-        <span class="spawn_name">{{ spawn.spawnName }}</span>
-        <span class="spawn_length">{{ spawn.spawnLength }}m</span>
-      </span>
-    </span>
-
-    <span class="badge spawn badge-none" v-if="!station.onlineInfo || station.onlineInfo.spawns.length == 0"
-      >{{ $t('scenery.no-spawns') }}
-    </span>
-  </section>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import imageMixin from '../../../mixins/imageMixin';
-import Station from '../../../scripts/interfaces/Station';
-
-export default defineComponent({
-  mixins: [imageMixin],
-
-  props: {
-    station: {
-      type: Object as () => Station,
-      default: {},
-    },
-  },
-
-  computed: {
-    sortedSpawns() {
-      return this.station.onlineInfo?.spawns.sort((s1, s2) => (s1.spawnLength < s2.spawnLength ? 1 : -1));
-    },
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../../styles/variables.scss';
-
-.spawn {
-  color: white;
-
-  &_length {
-    background-color: #404040;
-    color: #cfcfcf;
-  }
-
-  &[data-electrified='true'] > &_name {
-    background-color: #007599;
-  }
-}
-</style>
+<template>
+  <section class="info-spawn-list">
+    <h3 class="spawn-header section-header">
+      <img :src="getIcon('spawn')" alt="icon-spawn" />
+      &nbsp;{{ $t('scenery.spawns') }} &nbsp;
+      <span class="text--primary">{{ station.onlineInfo?.spawns.length || '0' }}</span>
+    </h3>
+
+    <span v-if="station.onlineInfo">
+      <span
+        class="badge spawn"
+        v-for="(spawn, i) in sortedSpawns"
+        :key="spawn.spawnName + station.onlineInfo?.dispatcherName + i"
+        :data-electrified="spawn.isElectrified"
+      >
+        <span class="spawn_name">{{ spawn.spawnName }}</span>
+        <span class="spawn_length">{{ spawn.spawnLength }}m</span>
+      </span>
+    </span>
+
+    <span
+      class="badge spawn badge-none"
+      v-if="!station.onlineInfo || station.onlineInfo.spawns.length == 0"
+      >{{ $t('scenery.no-spawns') }}
+    </span>
+  </section>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent } from 'vue';
+import imageMixin from '../../../mixins/imageMixin';
+import Station from '../../../scripts/interfaces/Station';
+
+export default defineComponent({
+  mixins: [imageMixin],
+
+  props: {
+    station: {
+      type: Object as PropType<Station>,
+      required: true
+    }
+  },
+
+  computed: {
+    sortedSpawns() {
+      if (!this.station.onlineInfo) return [];
+
+      return [...this.station.onlineInfo.spawns].sort((s1, s2) =>
+        s1.spawnLength < s2.spawnLength ? 1 : -1
+      );
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../../styles/variables.scss';
+
+.spawn {
+  color: white;
+
+  &_length {
+    background-color: #404040;
+    color: #cfcfcf;
+  }
+
+  &[data-electrified='true'] > &_name {
+    background-color: #007599;
+  }
+}
+</style>

src/components/SceneryView/SceneryInfo/SceneryInfoStats.vue

@@ -23,7 +23,10 @@
         <span style="color: #eee">{{ station.onlineInfo?.scheduledTrains?.length || '0' }}</span>
         /
         <span style="color: #bbb"
-          >{{ station.onlineInfo?.scheduledTrains?.filter((train) => train.stopInfo.confirmed).length || '0' }}
+          >{{
+            station.onlineInfo?.scheduledTrains?.filter((train) => train.stopInfo.confirmed)
+              .length || '0'
+          }}
         </span>
       </span>
     </span>
@@ -31,7 +34,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { PropType, defineComponent } from 'vue';
 import imageMixin from '../../../mixins/imageMixin';
 import Station from '../../../scripts/interfaces/Station';
 
@@ -39,10 +42,10 @@ export default defineComponent({
   mixins: [imageMixin],
   props: {
     station: {
-      type: Object as () => Station,
-      default: {},
-    },
-  },
+      type: Object as PropType<Station>,
+      required: true
+    }
+  }
 });
 </script>
 

src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue

@@ -1,131 +1,136 @@
-<template>
-  <section class="info-user-list">
-    <h3 class="user-header section-header">
-      <img :src="getIcon('user')" alt="icon-user" />
-      &nbsp;{{ $t('scenery.users') }} &nbsp;
-      <span class="text--primary">{{ station.onlineInfo?.currentUsers || '0' }}</span
-      >&nbsp;/&nbsp;<span class="text--primary">{{ station.onlineInfo?.maxUsers || '0' }}</span>
-    </h3>
-
-    <div
-      v-for="(train, i) in computedStationTrains"
-      class="badge user"
-      :class="train.stopStatus"
-      :key="train.trainId"
-      tabindex="0"
-      @click.prevent="selectModalTrain(train.trainId, $event.currentTarget)"
-      @keydown.enter="selectModalTrain(train.trainId, $event.currentTarget)"
-    >
-      <span class="user_train">{{ train.trainNo }}</span>
-      <span class="user_name">{{ train.driverName }}</span>
-    </div>
-
-    <div class="badge user badge-none" v-if="!computedStationTrains || computedStationTrains.length == 0">
-      {{ $t('scenery.no-users') }}
-    </div>
-  </section>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent } from 'vue';
-import imageMixin from '../../../mixins/imageMixin';
-import modalTrainMixin from '../../../mixins/modalTrainMixin';
-import routerMixin from '../../../mixins/routerMixin';
-import Station from '../../../scripts/interfaces/Station';
-import { useStore } from '../../../store/store';
-
-export default defineComponent({
-  mixins: [routerMixin, imageMixin, modalTrainMixin],
-
-  props: {
-    station: {
-      type: Object as () => Station,
-      default: {},
-    },
-  },
-
-  setup(props) {
-    const store = useStore();
-
-    const computedStationTrains = computed(() => {
-      if (!props.station) return [];
-
-      const station = props.station as Station;
-      if (!station.onlineInfo) return [];
-      if (!station.onlineInfo.stationTrains) return [];
-
-      return station.onlineInfo.stationTrains.map((train) => {
-        const scheduledTrainStatus = station.onlineInfo?.scheduledTrains?.find((st) => st.trainNo === train.trainNo);
-
-        return {
-          ...train,
-          stopStatus: scheduledTrainStatus?.stopStatus || 'no-timetable',
-        };
-      });
-    });
-
-    return { computedStationTrains, store };
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-$no-timetable: #aaa;
-$departed: springgreen;
-$stopped: #ffa600;
-$online: gold;
-$terminated: salmon;
-$disconnected: slategray;
-
-.info-user-list {
-  width: 100%;
-
-  ul {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-  }
-}
-
-.user {
-  cursor: pointer;
-
-  &_train {
-    color: black;
-    background-color: $no-timetable;
-
-    transition: background-color 200ms;
-    -ms-transition: background-color 200ms;
-    -webkit-transition: background-color 200ms;
-  }
-
-  &.no-timetable .user_train {
-    background-color: $no-timetable;
-  }
-
-  &.departed > &_train {
-    background-color: $departed;
-  }
-
-  &.stopped > &_train {
-    background-color: $stopped;
-  }
-
-  &.online > &_train {
-    background-color: $online;
-  }
-
-  &.terminated > &_train {
-    background-color: $terminated;
-  }
-
-  &.disconnected > &_train {
-    background-color: $disconnected;
-  }
-
-  &.offline {
-    background: firebrick;
-    pointer-events: none;
-  }
-}
-</style>
+<template>
+  <section class="info-user-list">
+    <h3 class="user-header section-header">
+      <img :src="getIcon('user')" alt="icon-user" />
+      &nbsp;{{ $t('scenery.users') }} &nbsp;
+      <span class="text--primary">{{ station.onlineInfo?.currentUsers || '0' }}</span
+      >&nbsp;/&nbsp;<span class="text--primary">{{ station.onlineInfo?.maxUsers || '0' }}</span>
+    </h3>
+
+    <div
+      v-for="train in computedStationTrains"
+      class="badge user"
+      :class="train.stopStatus"
+      :key="train.trainId"
+      tabindex="0"
+      @click.prevent="selectModalTrain(train.trainId, $event.currentTarget)"
+      @keydown.enter="selectModalTrain(train.trainId, $event.currentTarget)"
+    >
+      <span class="user_train">{{ train.trainNo }}</span>
+      <span class="user_name">{{ train.driverName }}</span>
+    </div>
+
+    <div
+      class="badge user badge-none"
+      v-if="!computedStationTrains || computedStationTrains.length == 0"
+    >
+      {{ $t('scenery.no-users') }}
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { PropType, computed, defineComponent } from 'vue';
+import imageMixin from '../../../mixins/imageMixin';
+import modalTrainMixin from '../../../mixins/modalTrainMixin';
+import routerMixin from '../../../mixins/routerMixin';
+import Station from '../../../scripts/interfaces/Station';
+import { useStore } from '../../../store/store';
+
+export default defineComponent({
+  mixins: [routerMixin, imageMixin, modalTrainMixin],
+
+  props: {
+    station: {
+      type: Object as PropType<Station>,
+      required: true
+    }
+  },
+
+  setup(props) {
+    const store = useStore();
+
+    const computedStationTrains = computed(() => {
+      if (!props.station) return [];
+
+      const station = props.station as Station;
+      if (!station.onlineInfo) return [];
+      if (!station.onlineInfo.stationTrains) return [];
+
+      return station.onlineInfo.stationTrains.map((train) => {
+        const scheduledTrainStatus = station.onlineInfo?.scheduledTrains?.find(
+          (st) => st.trainNo === train.trainNo
+        );
+
+        return {
+          ...train,
+          stopStatus: scheduledTrainStatus?.stopStatus || 'no-timetable'
+        };
+      });
+    });
+
+    return { computedStationTrains, store };
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+$no-timetable: #aaa;
+$departed: springgreen;
+$stopped: #ffa600;
+$online: gold;
+$terminated: salmon;
+$disconnected: slategray;
+
+.info-user-list {
+  width: 100%;
+
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+}
+
+.user {
+  cursor: pointer;
+
+  &_train {
+    color: black;
+    background-color: $no-timetable;
+
+    transition: background-color 200ms;
+    -ms-transition: background-color 200ms;
+    -webkit-transition: background-color 200ms;
+  }
+
+  &.no-timetable .user_train {
+    background-color: $no-timetable;
+  }
+
+  &.departed > &_train {
+    background-color: $departed;
+  }
+
+  &.stopped > &_train {
+    background-color: $stopped;
+  }
+
+  &.online > &_train {
+    background-color: $online;
+  }
+
+  &.terminated > &_train {
+    background-color: $terminated;
+  }
+
+  &.disconnected > &_train {
+    background-color: $disconnected;
+  }
+
+  &.offline {
+    background: firebrick;
+    pointer-events: none;
+  }
+}
+</style>