feature: modal darowizn

src/components/Global/AnimatedModal.vue

@@ -0,0 +1,83 @@
+<template>
+  <transition name="modal-anim" tag="div" class="modal">
+    <div class="body" v-if="isOpen">
+      <div class="background" @click="toggleModal(false)"></div>
+      <div class="wrapper" ref="wrapper" tabindex="0">
+        <slot></slot>
+      </div>
+      <div class="tab-exit" ref="exit" tabindex="0" @focus="toggleModal(false)"></div>
+    </div>
+  </transition>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useStore } from '../../store/mainStore';
+
+export default defineComponent({
+  emits: ['toggleModal'],
+
+  props: {
+    isOpen: Boolean
+  },
+
+  data() {
+    return {
+      store: useStore()
+    };
+  },
+
+  watch: {
+    isOpen(v) {
+      this.$nextTick(() => {
+        if (v) (this.$refs['wrapper'] as HTMLElement).focus();
+        else (this.store.modalLastClickedTarget as HTMLElement)?.focus();
+      });
+    }
+  },
+
+  methods: {
+    toggleModal(value: boolean) {
+      this.$emit('toggleModal', value);
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.body {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 200;
+
+  width: 100vw;
+  height: 100vh;
+}
+
+.background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+
+  cursor: pointer;
+
+  background-color: rgba(0, 0, 0, 0.55);
+}
+
+.wrapper {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  background-color: #1a1a1a;
+  box-shadow: 0 0 15px 10px #333333;
+
+  width: 95%;
+  max-width: 800px;
+  max-height: 95vh;
+}
+</style>

src/components/Global/Donation.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="donation-modal" @keydown.esc="toggleModal(false)">
+    <button
+      class="modal_button action btn--image"
+      ref="btn"
+      @click="toggleModal(true)"
+      @focus="toggleModal(false)"
+    >
+      <img src="/images/icon-dollar.svg" alt="dollar donation icon" />
+      <span>{{ $t('donations.button-title') }}</span>
+    </button>
+
+    <AnimatedModal :isOpen="isModalOpen" @toggleModal="toggleModal">
+      <div class="modal_content">
+        <div class="modal_main">
+          <h1 v-html="$t('donations.header')"></h1>
+          <br />
+          <p v-html="$t('donations.p1')"></p>
+          <br />
+          <i18n-t keypath="donations.p2" tag="p">
+            <template v-slot:b1>
+              <b>{{ $t('donations.p2-b1') }}</b>
+            </template>
+            <template v-slot:b2>
+              <b>{{ $t('donations.p2-b2') }}</b>
+            </template>
+            <template v-slot:b3>
+              <b>{{ $t('donations.p2-b3') }}</b>
+            </template>
+            <template v-slot:link>
+              <a href="https://discord.gg/x2mpNN3svk" target="_blank">
+                {{ $t('donations.p2-a1') }}
+              </a>
+            </template>
+          </i18n-t>
+          <br />
+          <p v-html="$t('donations.p3')"></p>
+          <br />
+          <i18n-t keypath="donations.p4" tag="p">
+            <template v-slot:img>
+              <img src="/images/icon-diamond.svg" alt="diamond donator icon" />
+            </template>
+
+            <template v-slot:b1>
+              <b>{{ $t('donations.p4-b1') }}</b>
+            </template>
+
+            <template v-slot:b2>
+              <b class="text--honorable">{{ $t('donations.p4-b2') }}</b>
+            </template>
+          </i18n-t>
+          <br />
+          <i
+            v-html="$t('donations.p5')"
+            style="display: flex; justify-content: flex-end; text-align: right"
+          >
+          </i>
+        </div>
+
+        <div class="modal_actions">
+          <button class="modal_button exit btn--image" @click="toggleModal(false)">
+            <img src="/images/icon-exit.svg" alt="dollar donation icon" />
+            {{ $t('donations.action-exit') }}
+          </button>
+
+          <form action="https://www.paypal.com/donate" method="post">
+            <input type="hidden" name="hosted_button_id" value="EDB3SKFAHXFTW" />
+
+            <button class="modal_button action btn--image" @click="toggleModal(false)">
+              <img src="/images/icon-dollar.svg" alt="dollar donation icon" />
+              {{ $t('donations.action-confirm') }}
+            </button>
+          </form>
+        </div>
+      </div>
+    </AnimatedModal>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import AnimatedModal from './AnimatedModal.vue';
+
+export default defineComponent({
+  props: {
+    isModalOpen: Boolean
+  },
+  emits: ['toggleModal'],
+
+  methods: {
+    toggleModal(value: boolean) {
+      this.$emit('toggleModal', value);
+    }
+  },
+  components: { AnimatedModal }
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/responsive.scss';
+
+.modal_button {
+  &.action {
+    $btnColor: #254069;
+
+    background-color: $btnColor;
+
+    &:hover {
+      background-color: lighten($btnColor, 10%);
+    }
+  }
+
+  &.exit {
+    $btnColor: crimson;
+
+    background-color: $btnColor;
+
+    &:hover {
+      background-color: lighten($btnColor, 10%);
+    }
+  }
+
+  @include smallScreen {
+    span {
+      display: none;
+    }
+  }
+}
+
+.modal-logo {
+  position: absolute;
+  top: 0;
+  left: 50%;
+
+  width: 6em;
+
+  transform: translate(-50%, -50%);
+}
+
+.modal_content {
+  display: grid;
+  grid-template-rows: 1fr auto;
+  gap: 1em;
+  max-height: 95vh;
+  font-size: 1.1em;
+
+  & > div {
+    padding: 1em;
+  }
+
+  h1 {
+    font-size: 1.95em;
+    text-align: center;
+  }
+
+  p {
+    text-align: justify;
+  }
+
+  a {
+    text-decoration: underline;
+  }
+}
+
+.modal_main {
+  overflow: auto;
+  img {
+    max-height: 20px;
+    margin-right: 5px;
+    vertical-align: text-bottom;
+  }
+}
+
+.modal_actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5em;
+}
+</style>

src/components/Global/TrainModal.vue

@@ -35,17 +35,6 @@ export default defineComponent({
     this.$nextTick(() => {
       contentEl.focus();
     });
-  },
-
-  methods: {
-    handleContentScroll(e: Event) {
-      const trainInfoCompHeight: number = (
-        this.$refs['trainInfo'] as any
-      ).$el.getBoundingClientRect().height;
-
-      const posTop = (e.target as HTMLElement).scrollTop;
-      this.isTopBarVisible = posTop > trainInfoCompHeight;
-    }
   }
 });
 </script>

src/components/SceneryView/SceneryTimetable.vue

@@ -85,9 +85,11 @@
                 <strong>{{ scheduledTrain.category }}</strong>
                 {{ scheduledTrain.trainNo }}
 
-                <span class="g-tooltip" v-if="scheduledTrain.stopInfo.comments">
+                <span
+                  v-if="scheduledTrain.stopInfo.comments"
+                  :title="scheduledTrain.stopInfo.comments"
+                >
                   <img src="/images/icon-warning.svg" />
-                  <span class="content" v-html="scheduledTrain.stopInfo.comments"> </span>
                 </span>
               </span>
               &nbsp;|&nbsp;

src/components/StationsView/StationFilterCard.vue

@@ -295,19 +295,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '../../styles/responsive.scss';
 @import '../../styles/card.scss';
-
-.card-anim {
-  &-enter-active,
-  &-leave-active {
-    transition: all $animDuration $animType;
-  }
-
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-    transform: translate(-50%, -50%) scale(0.45);
-  }
-}
+@import '../../styles/animations.scss';
 
 .card {
   display: grid;

src/components/StationsView/StationTable.vue

@@ -1,270 +1,278 @@
 <template>
   <section class="station_table">
-    <div class="table_wrapper">
-      <table>
-        <thead>
-          <tr>
-            <th
-              v-for="headerName in headIds"
-              :key="headerName"
-              @click="changeSorter(headerName)"
-              class="header-text"
-            >
-              <span class="header_wrapper">
-                <div v-html="$t(`sceneries.${headerName}`)"></div>
-
-                <img
-                  class="sort-icon"
-                  v-if="sorterActive.headerName == headerName"
-                  :src="`/images/icon-arrow-${sorterActive.dir == 1 ? 'asc' : 'desc'}.svg`"
-                  alt="sort icon"
-                />
-              </span>
-            </th>
-
-            <th
-              v-for="headerName in headIconsIds"
-              :key="headerName"
-              @click="changeSorter(headerName)"
-              class="header-image"
-            >
-              <span class="header_wrapper">
-                <img
-                  :src="`/images/icon-${headerName}.svg`"
-                  :alt="headerName"
-                  :title="$t(`sceneries.${headerName}`)"
-                />
-
-                <img
-                  class="sort-icon"
-                  v-if="sorterActive.headerName == headerName"
-                  :src="`/images/icon-arrow-${sorterActive.dir == 1 ? 'asc' : 'desc'}.svg`"
-                  alt="sort icon"
-                />
-              </span>
-            </th>
-          </tr>
-        </thead>
-
-        <tbody>
-          <tr
-            class="station"
-            :class="{ 'last-selected': lastSelectedStationName == station.name }"
-            v-for="(station, i) in stations"
-            :key="i + station.name"
-            @click.left="setScenery(station.name)"
-            @click.right="openForumSite($event, station.generalInfo?.url)"
-            @keydown.enter="setScenery(station.name)"
-            @keydown.space="openForumSite($event, station.generalInfo?.url)"
-            tabindex="0"
+    <table>
+      <thead>
+        <tr>
+          <th
+            v-for="headerName in headIds"
+            :key="headerName"
+            @click="changeSorter(headerName)"
+            class="header-text"
           >
-            <td class="station_name" :class="station.generalInfo?.availability">
-              <b v-if="station.generalInfo?.project" style="color: salmon">{{
-                station.generalInfo.project
-              }}</b>
-              {{ station.name }}
-            </td>
+            <span class="header_wrapper">
+              <div v-html="$t(`sceneries.${headerName}`)"></div>
 
-            <td class="station_level">
-              <span v-if="station.generalInfo">
-                <span
-                  v-if="
-                    station.generalInfo.reqLevel > -1 &&
-                    station.generalInfo.availability != 'nonPublic' &&
-                    station.generalInfo.availability != 'unavailable'
-                  "
-                  :style="calculateExpStyle(station.generalInfo.reqLevel)"
-                >
-                  {{ station.generalInfo.reqLevel >= 2 ? station.generalInfo.reqLevel : 'L' }}
-                </span>
-
-                <span v-else-if="station.generalInfo.availability == 'abandoned'">
-                  <img
-                    src="/images/icon-abandoned.svg"
-                    alt="non-public"
-                    :title="$t('desc.abandoned')"
-                  />
-                </span>
-
-                <span v-else-if="station.generalInfo.availability == 'nonPublic'">
-                  <img
-                    src="/images/icon-lock.svg"
-                    alt="non-public"
-                    :title="$t('desc.non-public')"
-                  />
-                </span>
-
-                <span v-else>
-                  <img
-                    src="/images/icon-unavailable.svg"
-                    alt="unavailable"
-                    :title="$t('desc.unavailable')"
-                  />
-                </span>
-              </span>
-
-              <span v-else> ? </span>
-            </td>
-
-            <td class="station_status">
-              <StationStatusBadge
-                :isOnline="station.onlineInfo ? true : false"
-                :dispatcherStatus="station.onlineInfo?.dispatcherStatus"
+              <img
+                class="sort-icon"
+                v-if="sorterActive.headerName == headerName"
+                :src="`/images/icon-arrow-${sorterActive.dir == 1 ? 'asc' : 'desc'}.svg`"
+                alt="sort icon"
               />
-            </td>
+            </span>
+          </th>
 
-            <td class="station_dispatcher-name">
-              {{ station.onlineInfo ? station.onlineInfo.dispatcherName : '' }}
-            </td>
+          <th
+            v-for="headerName in headIconsIds"
+            :key="headerName"
+            @click="changeSorter(headerName)"
+            class="header-image"
+          >
+            <span class="header_wrapper">
+              <img
+                :src="`/images/icon-${headerName}.svg`"
+                :alt="headerName"
+                :title="$t(`sceneries.${headerName}`)"
+              />
 
-            <td class="station_dispatcher-exp">
-              <span
-                v-if="station.onlineInfo"
-                :style="
-                  calculateExpStyle(
-                    station.onlineInfo.dispatcherExp,
-                    station.onlineInfo.dispatcherIsSupporter
-                  )
-                "
-              >
-                {{ 2 > station.onlineInfo.dispatcherExp ? 'L' : station.onlineInfo.dispatcherExp }}
-              </span>
-            </td>
+              <img
+                class="sort-icon"
+                v-if="sorterActive.headerName == headerName"
+                :src="`/images/icon-arrow-${sorterActive.dir == 1 ? 'asc' : 'desc'}.svg`"
+                alt="sort icon"
+              />
+            </span>
+          </th>
+        </tr>
+      </thead>
 
-            <td class="station_tracks twoway">
+      <tbody>
+        <tr
+          class="station"
+          :class="{ 'last-selected': lastSelectedStationName == station.name }"
+          v-for="(station, i) in stations"
+          :key="i + station.name"
+          @click.left="setScenery(station.name)"
+          @click.right="openForumSite($event, station.generalInfo?.url)"
+          @keydown.enter="setScenery(station.name)"
+          @keydown.space="openForumSite($event, station.generalInfo?.url)"
+          tabindex="0"
+        >
+          <td class="station_name" :class="station.generalInfo?.availability">
+            <b v-if="station.generalInfo?.project" style="color: salmon">{{
+              station.generalInfo.project
+            }}</b>
+            {{ station.name }}
+          </td>
+
+          <td class="station_level">
+            <span v-if="station.generalInfo">
               <span
                 v-if="
-                  station.generalInfo &&
-                  station.generalInfo.routes.twoWayCatenaryRouteNames.length > 0
+                  station.generalInfo.reqLevel > -1 &&
+                  station.generalInfo.availability != 'nonPublic' &&
+                  station.generalInfo.availability != 'unavailable'
                 "
-                class="track catenary"
-                :title="`Liczba zelektryfikowanych szlaków dwutorowych: ${station.generalInfo.routes.twoWayCatenaryRouteNames.length}`"
+                :style="calculateExpStyle(station.generalInfo.reqLevel)"
               >
-                {{ station.generalInfo.routes.twoWayCatenaryRouteNames.length }}
+                {{ station.generalInfo.reqLevel >= 2 ? station.generalInfo.reqLevel : 'L' }}
               </span>
 
-              <span
-                v-if="
-                  station.generalInfo &&
-                  station.generalInfo.routes.twoWayNoCatenaryRouteNames.length > 0
-                "
-                class="track no-catenary"
-                :title="`Liczba niezelektryfikowanych szlaków dwutorowych: ${station.generalInfo.routes.twoWayNoCatenaryRouteNames.length}`"
-              >
-                {{ station.generalInfo.routes.twoWayNoCatenaryRouteNames.length }}
-              </span>
-
-              <span class="separator"></span>
-
-              <span
-                v-if="
-                  station.generalInfo &&
-                  station.generalInfo.routes.oneWayCatenaryRouteNames.length > 0
-                "
-                class="track catenary"
-                :title="`Liczba zelektryfikowanych szlaków jednotorowych: ${station.generalInfo.routes.oneWayCatenaryRouteNames.length}`"
-              >
-                {{ station.generalInfo.routes.oneWayCatenaryRouteNames.length }}
-              </span>
-
-              <span
-                v-if="
-                  station.generalInfo &&
-                  station.generalInfo.routes.oneWayNoCatenaryRouteNames.length > 0
-                "
-                class="track no-catenary"
-                :title="`Liczba niezelektryfikowanych szlaków jednotorowych: ${station.generalInfo.routes.oneWayNoCatenaryRouteNames.length}`"
-              >
-                {{ station.generalInfo.routes.oneWayNoCatenaryRouteNames.length }}
-              </span>
-            </td>
-
-            <td class="station_info" v-if="station.generalInfo">
-              <span
-                class="scenery-icon icon-info"
-                :class="station.generalInfo.controlType.replace('+', '-')"
-                :title="$t('desc.control-type') + $t(`controls.${station.generalInfo.controlType}`)"
-                v-html="getControlTypeAbbrev(station.generalInfo.controlType)"
-              >
-              </span>
-
-              <span>
+              <span v-else-if="station.generalInfo.availability == 'abandoned'">
                 <img
-                  class="icon-info"
-                  v-if="station.generalInfo.SUP"
-                  src="/images/icon-SUP.svg"
-                  alt="SUP (RASP-UZK)"
-                  :title="$t('desc.SUP')"
+                  src="/images/icon-abandoned.svg"
+                  alt="non-public"
+                  :title="$t('desc.abandoned')"
                 />
               </span>
 
-              <span>
-                <img
-                  class="icon-info"
-                  v-if="station.generalInfo.signalType"
-                  :src="`/images/icon-${station.generalInfo.signalType}.svg`"
-                  :alt="station.generalInfo.signalType"
-                  :title="$t('desc.signals-type') + $t(`signals.${station.generalInfo.signalType}`)"
-                />
+              <span v-else-if="station.generalInfo.availability == 'nonPublic'">
+                <img src="/images/icon-lock.svg" alt="non-public" :title="$t('desc.non-public')" />
               </span>
 
-              <span>
+              <span v-else>
                 <img
-                  class="icon-info"
-                  v-if="station.generalInfo && station.generalInfo.routes.sblRouteNames.length > 0"
-                  src="/images/icon-SBL.svg"
-                  alt="SBL"
-                  :title="$t('desc.SBL') + `${station.generalInfo.routes.sblRouteNames.join(',')}`"
+                  src="/images/icon-unavailable.svg"
+                  alt="unavailable"
+                  :title="$t('desc.unavailable')"
                 />
               </span>
-            </td>
+            </span>
 
-            <td class="station_info" v-else>
+            <span v-else> ? </span>
+          </td>
+
+          <td class="station_status">
+            <StationStatusBadge
+              :isOnline="station.onlineInfo ? true : false"
+              :dispatcherStatus="station.onlineInfo?.dispatcherStatus"
+            />
+          </td>
+
+          <td class="station_dispatcher-name">
+            <span v-if="station.onlineInfo?.dispatcherName">
+              <div
+                v-if="store.donatorsData.includes(station.onlineInfo.dispatcherName)"
+                title="Dyżurny wspierający projekt Stacjownika!"
+                class="text--honorable"
+                @click.stop="openDonationModal"
+              >
+                <img src="/images/icon-diamond.svg" alt="" />
+                {{ station.onlineInfo.dispatcherName }}
+              </div>
+
+              <div v-else>
+                {{ station.onlineInfo.dispatcherName }}
+              </div>
+            </span>
+          </td>
+
+          <td class="station_dispatcher-exp">
+            <span
+              v-if="station.onlineInfo"
+              :style="
+                calculateExpStyle(
+                  station.onlineInfo.dispatcherExp,
+                  station.onlineInfo.dispatcherIsSupporter
+                )
+              "
+            >
+              {{ station.onlineInfo.dispatcherExp < 2 ? 'L' : station.onlineInfo.dispatcherExp }}
+            </span>
+          </td>
+
+          <td class="station_tracks twoway">
+            <span
+              v-if="
+                station.generalInfo &&
+                station.generalInfo.routes.twoWayCatenaryRouteNames.length > 0
+              "
+              class="track catenary"
+              :title="`Liczba zelektryfikowanych szlaków dwutorowych: ${station.generalInfo.routes.twoWayCatenaryRouteNames.length}`"
+            >
+              {{ station.generalInfo.routes.twoWayCatenaryRouteNames.length }}
+            </span>
+
+            <span
+              v-if="
+                station.generalInfo &&
+                station.generalInfo.routes.twoWayNoCatenaryRouteNames.length > 0
+              "
+              class="track no-catenary"
+              :title="`Liczba niezelektryfikowanych szlaków dwutorowych: ${station.generalInfo.routes.twoWayNoCatenaryRouteNames.length}`"
+            >
+              {{ station.generalInfo.routes.twoWayNoCatenaryRouteNames.length }}
+            </span>
+
+            <span class="separator"></span>
+
+            <span
+              v-if="
+                station.generalInfo &&
+                station.generalInfo.routes.oneWayCatenaryRouteNames.length > 0
+              "
+              class="track catenary"
+              :title="`Liczba zelektryfikowanych szlaków jednotorowych: ${station.generalInfo.routes.oneWayCatenaryRouteNames.length}`"
+            >
+              {{ station.generalInfo.routes.oneWayCatenaryRouteNames.length }}
+            </span>
+
+            <span
+              v-if="
+                station.generalInfo &&
+                station.generalInfo.routes.oneWayNoCatenaryRouteNames.length > 0
+              "
+              class="track no-catenary"
+              :title="`Liczba niezelektryfikowanych szlaków jednotorowych: ${station.generalInfo.routes.oneWayNoCatenaryRouteNames.length}`"
+            >
+              {{ station.generalInfo.routes.oneWayNoCatenaryRouteNames.length }}
+            </span>
+          </td>
+
+          <td class="station_info" v-if="station.generalInfo">
+            <span
+              class="scenery-icon icon-info"
+              :class="station.generalInfo.controlType.replace('+', '-')"
+              :title="$t('desc.control-type') + $t(`controls.${station.generalInfo.controlType}`)"
+              v-html="getControlTypeAbbrev(station.generalInfo.controlType)"
+            >
+            </span>
+
+            <span>
               <img
                 class="icon-info"
-                src="/images/icon-unknown.svg"
-                alt="icon-unknown"
-                :title="$t('desc.unknown')"
+                v-if="station.generalInfo.SUP"
+                src="/images/icon-SUP.svg"
+                alt="SUP (RASP-UZK)"
+                :title="$t('desc.SUP')"
               />
-            </td>
+            </span>
 
-            <td class="station_users" :class="{ inactive: !station.onlineInfo }">
-              <span>{{ station.onlineInfo?.currentUsers || 0 }}</span>
-              /
-              <span>{{ station.onlineInfo?.maxUsers || 0 }}</span>
-            </td>
+            <span>
+              <img
+                class="icon-info"
+                v-if="station.generalInfo.signalType"
+                :src="`/images/icon-${station.generalInfo.signalType}.svg`"
+                :alt="station.generalInfo.signalType"
+                :title="$t('desc.signals-type') + $t(`signals.${station.generalInfo.signalType}`)"
+              />
+            </span>
 
-            <td class="station_spawns" :class="{ inactive: !station.onlineInfo }">
-              <span>{{ station.onlineInfo?.spawns.length || 0 }}</span>
-            </td>
+            <span>
+              <img
+                class="icon-info"
+                v-if="station.generalInfo && station.generalInfo.routes.sblRouteNames.length > 0"
+                src="/images/icon-SBL.svg"
+                alt="SBL"
+                :title="$t('desc.SBL') + `${station.generalInfo.routes.sblRouteNames.join(',')}`"
+              />
+            </span>
+          </td>
 
-            <td
-              class="station_schedules all"
-              style="width: 30px"
-              :class="{ inactive: !station.onlineInfo }"
-            >
-              {{ station.onlineInfo?.scheduledTrainCount.all }}
-            </td>
+          <td class="station_info" v-else>
+            <img
+              class="icon-info"
+              src="/images/icon-unknown.svg"
+              alt="icon-unknown"
+              :title="$t('desc.unknown')"
+            />
+          </td>
 
-            <td
-              class="station_schedules unconfirmed"
-              style="width: 30px"
-              :class="{ inactive: !station.onlineInfo }"
-            >
-              {{ station.onlineInfo?.scheduledTrainCount.unconfirmed }}
-            </td>
+          <td class="station_users" :class="{ inactive: !station.onlineInfo }">
+            <span>{{ station.onlineInfo?.currentUsers || 0 }}</span>
+            /
+            <span>{{ station.onlineInfo?.maxUsers || 0 }}</span>
+          </td>
 
-            <td
-              class="station_schedules confirmed"
-              style="width: 30px"
-              :class="{ inactive: !station.onlineInfo }"
-            >
-              {{ station.onlineInfo?.scheduledTrainCount.confirmed }}
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
+          <td class="station_spawns" :class="{ inactive: !station.onlineInfo }">
+            <span>{{ station.onlineInfo?.spawns.length || 0 }}</span>
+          </td>
+
+          <td
+            class="station_schedules all"
+            style="width: 30px"
+            :class="{ inactive: !station.onlineInfo }"
+          >
+            {{ station.onlineInfo?.scheduledTrainCount.all }}
+          </td>
+
+          <td
+            class="station_schedules unconfirmed"
+            style="width: 30px"
+            :class="{ inactive: !station.onlineInfo }"
+          >
+            {{ station.onlineInfo?.scheduledTrainCount.unconfirmed }}
+          </td>
+
+          <td
+            class="station_schedules confirmed"
+            style="width: 30px"
+            :class="{ inactive: !station.onlineInfo }"
+          >
+            {{ station.onlineInfo?.scheduledTrainCount.confirmed }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
 
     <Loading v-if="!isDataLoaded && stations.length == 0" />
 
@@ -295,6 +303,7 @@ export default defineComponent({
     }
   },
 
+  emits: ['toggleDonationModal'],
   components: { Loading, StationStatusBadge },
   mixins: [styleMixin, dateMixin, stationInfoMixin],
 
@@ -320,7 +329,8 @@ export default defineComponent({
 
     return {
       isDataLoaded,
-      stationFiltersStore
+      stationFiltersStore,
+      store
     };
   },
 
@@ -340,6 +350,11 @@ export default defineComponent({
       });
     },
 
+    openDonationModal(e: Event) {
+      this.$emit('toggleDonationModal', true);
+      this.store.modalLastClickedTarget = e.target;
+    },
+
     openForumSite(e: Event, url: string | undefined) {
       if (!url) return;
       e.preventDefault();
@@ -380,11 +395,6 @@ section.station_table {
   font-weight: 500;
 }
 
-.table_wrapper {
-  overflow: auto;
-  overflow-y: hidden;
-}
-
 table {
   white-space: nowrap;
   border-collapse: collapse;
@@ -495,6 +505,15 @@ td.station {
     }
   }
 
+  // &_dispatcher-name {
+  //   position: relative;
+  // }
+
+  &_dispatcher-name img {
+    max-width: 1.35em;
+    vertical-align: text-bottom;
+  }
+
   &_level {
     span {
       background-color: #888;