rozbudowany szczegółówy RJ pociągu

src/components/Global/StopDate.vue

@@ -1,123 +0,0 @@
-<template>
-  <span class="stop-date">
-    <span
-      class="date arrival"
-      v-if="!stop.beginsHere"
-      :class="{
-        delayed: stop.arrivalDelay > 0 && (stop.confirmed || stop.stopped),
-        preponed: stop.arrivalDelay < 0 && (stop.confirmed || stop.stopped),
-        'on-time': stop.arrivalDelay == 0 && stop.confirmed
-      }"
-    >
-      <span v-if="stop.arrivalDelay != 0 && (stop.confirmed || stop.stopped)">
-        <s>{{ timestampToString(stop.arrivalTimestamp) }}</s>
-        {{ timestampToString(stop.arrivalRealTimestamp) }}
-        ({{ stop.arrivalDelay > 0 ? '+' : '' }}{{ stop.arrivalDelay }})
-      </span>
-
-      <span v-else>
-        {{ timestampToString(stop.arrivalTimestamp) }}
-      </span>
-    </span>
-
-    <span
-      class="date stop"
-      v-if="stop.stopTime || stop.stopped"
-      :class="stop.stopType.replace(', ', '-')"
-    >
-      {{ stop.stopTime }} {{ stop.stopType == '' ? 'pt' : stop.stopType }}
-    </span>
-
-    <span
-      class="date departure"
-      v-if="!stop.terminatesHere && (stop.stopTime != 0 || stop.stopped)"
-      :class="{
-        delayed: stop.departureDelay > 0 && stop.confirmed,
-        preponed: stop.departureDelay < 0 && stop.confirmed
-      }"
-    >
-      <span v-if="stop.departureDelay != 0 && stop.confirmed">
-        <s>{{ timestampToString(stop.departureTimestamp) }}</s>
-        {{ timestampToString(stop.departureRealTimestamp) }}
-
-        ({{ stop.departureDelay > 0 ? '+' : '' }}{{ stop.departureDelay }})
-      </span>
-
-      <span v-else>
-        {{ timestampToString(stop.departureTimestamp) }}
-      </span>
-    </span>
-  </span>
-</template>
-
-<script lang="ts">
-import { PropType, defineComponent } from 'vue';
-import dateMixin from '../../mixins/dateMixin';
-import { TrainStop } from '../../store/typings';
-
-export default defineComponent({
-  mixins: [dateMixin],
-
-  props: {
-    stop: {
-      type: Object as PropType<TrainStop>,
-      required: true
-    }
-  },
-
-  setup() {
-    return {};
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-$preponedClr: lime;
-$delayedClr: salmon;
-$dateClr: #525151;
-$stopExchangeClr: #db8e29;
-$stopDefaultClr: #252525;
-
-.stop-date {
-  display: flex;
-  align-items: center;
-
-  .date {
-    background: $dateClr;
-    padding: 0.3em 0.5em;
-  }
-
-  .stop {
-    &.ph,
-    &.ph-pm,
-    &.pm {
-      background: $stopExchangeClr;
-    }
-
-    background: $stopDefaultClr;
-  }
-
-  .arrival,
-  .departure {
-    &.delayed {
-      s {
-        color: #999;
-      }
-
-      span {
-        color: $delayedClr;
-      }
-    }
-
-    &.preponed {
-      s {
-        color: #999;
-      }
-
-      span {
-        color: $preponedClr;
-      }
-    }
-  }
-}
-</style>

src/components/Global/TrainModal.vue

@@ -1,132 +0,0 @@
-<template>
-  <div class="train-modal" v-if="chosenTrain" @keydown.esc="closeModal">
-    <div class="modal_background" @click="closeModal"></div>
-    <div class="modal_content" ref="content" tabindex="0">
-      <button class="btn exit" @click="closeModal">
-        <img src="/images/icon-exit.svg" alt="close card" />
-      </button>
-
-      <TrainInfo :train="chosenTrain" :extended="false" ref="trainInfo" />
-      <TrainSchedule :train="chosenTrain" tabindex="0" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import modalTrainMixin from '../../mixins/modalTrainMixin';
-import trainInfoMixin from '../../mixins/trainInfoMixin';
-import TrainInfo from '../TrainsView/TrainInfo.vue';
-import TrainSchedule from '../TrainsView/TrainSchedule.vue';
-
-export default defineComponent({
-  components: { TrainInfo, TrainSchedule },
-  mixins: [trainInfoMixin, modalTrainMixin],
-
-  data() {
-    return {
-      isTopBarVisible: false
-    };
-  },
-
-  activated() {
-    const contentEl = this.$refs['content'] as HTMLElement;
-
-    this.$nextTick(() => {
-      contentEl.focus();
-    });
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-@import '../../styles/card.scss';
-
-.top-info-bar-anim {
-  &-enter-active,
-  &-leave-active {
-    transition: all 150ms ease-in-out;
-  }
-
-  &-enter-from,
-  &-leave-to {
-    transform: translate(-50%, -50%) scale(0.8);
-    opacity: 0;
-  }
-}
-
-.exit {
-  position: absolute;
-  top: 0;
-  right: 0;
-
-  margin: 0.5em 1em;
-
-  padding: 0.25em;
-
-  z-index: 201;
-
-  img {
-    width: 1.5rem;
-    vertical-align: middle;
-  }
-}
-
-.train-modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-
-  width: 100%;
-
-  color: white;
-  z-index: 200;
-
-  display: flex;
-  justify-content: center;
-
-  text-align: left;
-}
-
-.modal_background {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-
-  cursor: pointer;
-
-  background-color: rgba(0, 0, 0, 0.55);
-}
-
-.modal_content {
-  position: relative;
-  overflow-y: scroll;
-
-  margin-top: 1em;
-
-  width: 95vw;
-  max-height: 96vh;
-
-  background-color: #1a1a1a;
-  box-shadow: 0 0 15px 10px #0e0e0e;
-}
-
-@include midScreen {
-  .exit {
-    margin: 0.5em;
-
-    img {
-      width: 1.75rem;
-    }
-  }
-}
-
-@include smallScreen {
-  .modal_content {
-    max-height: 85vh;
-  }
-}
-</style>