restruct: scenery info components

src/components/SceneryView/SceneryInfo/SceneryInfoGeneral.vue

@@ -0,0 +1,92 @@
+<template>
+  <section class="info-general">
+    <div v-if="station?.generalInfo === undefined">
+      <b>{{ $t('scenery.no-data') }}</b>
+    </div>
+
+    <div v-else>
+      <span>
+        <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>
+  </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;
+
+  div {
+    margin: 0 0.15em;
+  }
+}
+</style>