Zmiana wyglądu listy pociągów

src/App.scss

@@ -87,7 +87,6 @@
 
 .train-logo {
   position:  relative;
-  z-index: 2;
 }
 
 .header {

src/components/TrainsView/TrainInfo.vue

@@ -1,6 +1,64 @@
 <template>
   <div class="train-info">
-    <div class="wrapper">
+    <!-- SIMPLE VIEW -->
+    <div v-if="simpleView">
+      <div class="simple-view wrapper">
+        <span>
+          <span v-if="train.timetableData">
+            <div>
+              <strong>{{ train.timetableData.category }} {{ train.trainNo }}</strong>
+              |
+              {{ train.driverName }}
+            </div>
+
+            <div>
+              <strong>{{ train.timetableData.route.replace('|', ' - ') }}</strong>
+            </div>
+
+            <div style="margin-top: 0.5em">
+              <span style="color: #ccc">
+                {{ train.locoType }}
+              </span>
+              |
+              <span style="color: gold"> {{ train.timetableData.routeDistance }} km </span>
+              |
+              <span> {{ confirmedPercentage(train.timetableData.followingStops) }}% trasy </span>
+            </div>
+          </span>
+
+          <span v-else>
+            <span>
+              {{ train.trainNo }} |
+              <span style="color: gold">
+                {{ $t('trains.no-timetable') }}
+              </span>
+            </span>
+          </span>
+        </span>
+
+        <span> </span>
+
+        <span class="info-stats">
+          <span v-for="(stat, i) in STATS.main" :key="stat.name">
+            <span v-if="i > 0"> &bull; </span>
+            <span>{{ $t(`trains.option-${stat.name}`).toUpperCase() }}</span
+            >:
+            <span class="text--primary">{{ `${~~(train[stat.name] * (stat.multiplier || 1))}${stat.unit}` }} </span>
+          </span>
+
+          <!-- <span
+            >MASA: <span class="text--primary">{{}}m</span></span
+          >
+          &bull;
+          <span>DŁUGOŚĆ: <span class="text--primary">300m</span></span>
+          &bull;
+          <span>PRĘDKOŚĆ: <span class="text--primary">120km/h</span></span> -->
+        </span>
+      </div>
+    </div>
+
+    <!-- EXTENDED VIEW -->
+    <div class="extended-view wrapper" v-else>
       <span class="info">
         <div class="info_timetable" v-if="!train.timetableData">
           <div class="timetable_general">
@@ -88,7 +146,7 @@
 
         <div class="stats-position">
           <span v-for="stat in STATS.position" :key="stat.name">
-            <div><img :src="require(`@/assets/icon-${stat.name}.svg`)" :alt="stat.name" /> -</div>
+            <div><img :src="require(`@/assets/icon-${stat.name}.svg`)" :alt="stat.name" /></div>
             {{ (train[stat.prop] || '---') + (stat.unit || '') }}
           </span>
         </div>
@@ -108,6 +166,11 @@ export default defineComponent({
       type: Object as () => Train,
       required: true,
     },
+
+    simpleView: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data: () => ({
@@ -174,6 +237,10 @@ export default defineComponent({
         .join(' > ');
     },
 
+    confirmedPercentage(stops: TrainStop[]) {
+      return ((stops.filter((stop) => stop.confirmed).length / stops.length) * 100).toFixed(0);
+    },
+
     displayLocoInfo(locoType: string) {
       if (locoType.includes('EN')) return `${this.$t('trains.EZT')}`;
       if (locoType.includes('SN')) return `${this.$t('trains.SZT')}`;
@@ -212,8 +279,35 @@ export default defineComponent({
 
 .wrapper {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
+  padding: 1em;
-  grid-template-rows: 1fr;
+
+  &.extended-view {
+    grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
+    grid-template-rows: 1fr;
+  }
+
+  &.simple-view {
+    grid-template-columns: 2fr 1fr 2fr;
+    grid-template-rows: 1fr;
+
+    &:hover {
+      background: #424242;
+    }
+
+    .info-stats {
+      text-align: right;
+    }
+
+    @include smallScreen() {
+      grid-template-columns: 1fr;
+      gap: 1em 0;
+      text-align: center;
+
+      .info-stats {
+        text-align: center;
+      }
+    }
+  }
 
   @include smallScreen() {
     font-size: 1.2em;
@@ -295,9 +389,7 @@ export default defineComponent({
   justify-content: center;
   flex-flow: column;
 
-  grid-row: span 2;
+  padding-top: 1em;
-
-  padding: 2em 0;
 
   &-info {
     text-align: center;
@@ -311,6 +403,10 @@ export default defineComponent({
   &-loco {
     width: 100%;
     text-align: center;
+
+    img.train-image {
+      width: 15em;
+    }
   }
 
   &-cars {
@@ -332,7 +428,7 @@ export default defineComponent({
   flex-direction: column;
   justify-content: space-between;
 
-  padding: 1em 0;
+  padding-top: 1em;
 
   &-main {
     display: flex;

src/components/TrainsView/TrainStats.vue

@@ -254,7 +254,7 @@ export default defineComponent({
 .train-stats {
   position: relative;
   top: 0;
-  z-index: 99;
+  z-index: 15;
 }
 
 .stats {

src/components/TrainsView/TrainTable.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="train-table">
-    <train-timetable-card test="test" />
+    <transition name="anim" mode="out-in">
-
+      <div :key="timetableLoaded">
-    <transition name="train-list-anim" mode="out-in">
-      <div :key="Number(timetableLoaded) + currentPage">
         <div class="traffic-warning" v-if="distanceLimitExceeded">
           {{ $t('trains.distance-exceeded') }}
         </div>
@@ -15,79 +13,30 @@
         <div class="table-info loading" v-if="trains.length == 0 && !timetableLoaded">
           {{ $t('trains.loading') }}
         </div>
-        <!-- 
+
-            :ref="(el) => registerReference(el, train.timetableData?.timetableId)"
- -->
         <ul class="train-list">
           <li
             class="train-row"
             v-for="train in currentTrains"
             :key="train.trainNo + train.driverId"
             tabindex="0"
-            @click="showTrainTimetable(train.timetableData?.timetableId)"
+            @click="showTrainTimetable(train)"
-            @keydown.enter="showTrainTimetable(train.timetableData?.timetableId)"
+            @keydown.enter="showTrainTimetable(train)"
           >
-            <TrainInfo :train="train" />
+            <TrainInfo :train="train" :simpleView="true" />
-            <!-- <TrainSchedule
-              v-if="train.timetableData?.timetableId == chosenSchedule"
-              :followingStops="train.timetableData?.followingStops"
-            /> -->
           </li>
         </ul>
       </div>
     </transition>
 
-    <!-- <transition name="train-list-anim">
+    <span v-if="chosenTrain">
-      <div class="paginator" v-if="timetableLoaded && currentTrains.length > 0">
+      <train-timetable-card :train="chosenTrain" @close="closeTimetableCard" ref="card" />
-        <span
+    </span>
-          class="paginator_item"
-          :tabindex="currentPage == 0 ? -1 : 0"
-          :class="{ disabled: currentPage == 0 }"
-          @click="changePageTo(0)"
-          @keydown.enter="changePageTo(0)"
-        >
-          1&lt;
-        </span>
-
-        <span
-          class="paginator_item"
-          :tabindex="currentPage == 0 ? -1 : 0"
-          :class="{ disabled: currentPage == 0 }"
-          @click="changePageTo(currentPage - 1)"
-          @keydown.enter="changePageTo(currentPage - 1)"
-        >
-          &lt;
-        </span>
-
-        <span class="paginator_item page-number">
-          {{ currentPage + 1 }}
-        </span>
-
-        <span
-          class="paginator_item"
-          :tabindex="currentPage == paginatorPageCount - 1 ? -1 : 0"
-          :class="{ disabled: currentPage == paginatorPageCount - 1 }"
-          @click="changePageTo(currentPage + 1)"
-          @keydown.enter="changePageTo(currentPage + 1)"
-        >
-          &gt;
-        </span>
-        <span
-          class="paginator_item"
-          :tabindex="currentPage == paginatorPageCount - 1 ? -1 : 0"
-          :class="{ disabled: currentPage == paginatorPageCount - 1 }"
-          @click="changePageTo(paginatorPageCount - 1)"
-          @keydown.enter="changePageTo(paginatorPageCount - 1)"
-        >
-          &gt;{{ paginatorPageCount }}
-        </span>
-      </div>
-    </transition> -->
   </div>
 </template>
 
 <script lang="ts">
-import { computed, ComputedRef, defineComponent, inject, Ref, ref, watch } from '@vue/runtime-core';
+import { Component, computed, ComputedRef, defineComponent, inject, Ref, ref, watch } from '@vue/runtime-core';
 import { useStore } from '@/store';
 
 import defaultVehicleIconsJSON from '@/data/defaultVehicleIcons.json';
@@ -124,6 +73,8 @@ export default defineComponent({
     },
 
     defaultVehicleIcons: defaultVehicleIconsJSON,
+
+    chosenTrain: null as Train | null,
   }),
 
   setup(props) {
@@ -134,37 +85,25 @@ export default defineComponent({
     const searchedTrain = inject('searchedTrain') as Ref<string>;
     const searchedDriver = inject('searchedDriver') as Ref<string>;
 
-    const chosenSchedule = ref(0);
-
-    // PAGINATION
-    const PAGE_CAPACITY = 5;
-
-    const currentPage = ref(0);
-    const paginatorPageCount = computed(() => Math.ceil(props.trains.length / PAGE_CAPACITY));
-
     const currentTrains = computed(() => {
       return props.trains;
 
       //.slice(currentPage.value * PAGE_CAPACITY, currentPage.value * PAGE_CAPACITY + PAGE_CAPACITY);
     });
 
-    watch([searchedTrain, searchedDriver], () => {
+    // watch([searchedTrain, searchedDriver], () => {
-      currentPage.value = 0;
+    //   currentPage.value = 0;
-    });
+    // });
 
-    watch(paginatorPageCount, (value) => {
+    // watch(paginatorPageCount, (value) => {
-      if (currentPage.value >= value)
+    //   if (currentPage.value >= value)
-        currentPage.value = paginatorPageCount.value - 1 < 0 ? 0 : paginatorPageCount.value - 1;
+    //     currentPage.value = paginatorPageCount.value - 1 < 0 ? 0 : paginatorPageCount.value - 1;
-    });
+    // });
 
     return {
       searchedTrain,
       searchedDriver,
-      chosenSchedule,
-
       currentTrains,
-      paginatorPageCount,
-      currentPage,
 
       sorterActive: inject('sorterActive') as { id: string | number; dir: number },
       timetableLoaded: computed(() => timetableDataStatus.value === DataStatus.Loaded),
@@ -200,20 +139,18 @@ export default defineComponent({
       }, 10);
     },
 
-    showTrainTimetable(timetableId: number | undefined) {
+    showTrainTimetable(train: Train) {
-      if(!timetableId) return;
+      this.chosenTrain = train;
 
-      console.log("Gituwa", timetableId);
+      this.$nextTick(() => {
+        const cardRef = this.$refs.card;
 
-      // if (!timetableId && this.trains.length == 1) this.searchedTrain = '';
+        (cardRef as any).$refs['card-inner'].focus();
-      // if (!timetableId) return;
+      });
-      // this.searchedTrain =
-      //   this.searchedTrain == trainNo.toString() && this.chosenSchedule != 0 ? '' : trainNo.toString();
-      // this.chosenSchedule = this.chosenSchedule == timetableId ? 0 : timetableId;
     },
 
-    changePageTo(index: number) {
+    closeTimetableCard() {
-      this.currentPage = index < 0 ? 0 : index >= this.paginatorPageCount ? this.paginatorPageCount - 1 : index;
+      this.chosenTrain = null;
     },
   },
 });
@@ -222,15 +159,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '../../styles/responsive.scss';
 
-.unfold-timetable-anim {
+.anim {
-  &-leave-active,
-  &-enter-active {
-    transition: all 150ms ease-out;
-    overflow: hidden;
-  }
-}
-
-.train-list-anim {
   &-enter-from,
   &-leave-to {
     opacity: 0;
@@ -279,7 +208,6 @@ img.train-image {
   }
 
   &-row {
-    padding: 1em;
     margin-bottom: 1em;
 
     background-color: var(--clr-secondary);

src/components/TrainsView/TrainTimetableCard.vue

@@ -1,32 +1,77 @@
 <template>
-  <div>
+  <div class="bg-dimmer" @click="close"></div>
-  </div>
+  <section class="train-timetable-card card">
+
+
+    <train-info :train="train" />
+
+    <train-schedule :followingStops="train.timetableData?.followingStops" ref="card-inner" tabindex="0" @focus="test" />
+  </section>
 </template>
 
 <script lang="ts">
 import Train from '@/scripts/interfaces/Train';
-import { defineComponent } from 'vue'
+import { defineComponent } from 'vue';
+import TrainInfo from './TrainInfo.vue';
+import TrainSchedule from './TrainSchedule.vue';
 
 export default defineComponent({
+  components: { TrainInfo, TrainSchedule },
+  emits: ['close'],
+
+  data: () => ({
+    icons: {
+      exit: require('@/assets/icon-exit.svg'),
+    },
+  }),
   props: {
     train: {
       type: Object as () => Train,
-      required: true
+      required: true,
+    },
+  },
+  setup() {
+    return {};
+  },
+
+  methods: {
+    close() {
+      this.$emit('close');
+    },
+
+    test() {
+      console.log("xd");
+      
     }
   },
-  setup () {
+});
-    
-
-    return {}
-  },
-
-  mounted() {
-    console.log("test");
-    
-  }
-})
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+@import '../../styles/card';
 
+.bg-dimmer {
+  position: fixed;
+
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+
+  z-index: 25;
+
+  background: rgba(black, 0.5);
+}
+
+.train-timetable-card {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+
+  z-index: 100;
+
+  padding: 0.5em;
+
+  border: 1px solid white;
+}
 </style>

src/main.ts

@@ -19,7 +19,7 @@ const i18n = createI18n({
 })
 
 const clickOutsideDirective: Directive = {
-  beforeMount(el, binding) {
+  mounted(el, binding) {
 
     el.clickOutsideEvent = (event: Event) => {
       if (!(el == event.target || el.contains(event.target))) {

src/store/index.ts

@@ -398,8 +398,6 @@ export const store = createStore<State>({
       state.stationList = state.stationList.map(station => {
         const stationName = station.name.toLowerCase();
 
-        console.log(stationName, station.onlineInfo?.hash);
-
         const scheduledTrains: ScheduledTrain[] = timetableList.reduce((acc: ScheduledTrain[], timetable: Timetable) => {          
           if (!timetable.followingSceneries.includes(station.onlineInfo?.hash || "")) return acc;
 

src/styles/card.scss

@@ -1,4 +1,5 @@
 @import './variables.scss';
+@import './responsive.scss';
 
 .card {
   display: flex;
@@ -8,7 +9,7 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  z-index: 4;
+  z-index: 100;
 
   overflow: auto;
   background: $primaryCol;

src/views/TrainsView.vue

@@ -2,7 +2,7 @@
   <section class="trains-view">
     <div class="wrapper">
       <div class="options-bar">
-        <TrainStats :trains="trainList" :trainStatsOpen="trainStatsOpen" />
+        <!-- <TrainStats :trains="trainList" :trainStatsOpen="trainStatsOpen" /> -->
 
         <TrainOptions />
       </div>