mirror of
https://github.com/Spythere/stacjownik.git
synced 2026-05-03 13:28:11 +00:00
Poprawki błędów (1.3.5)
This commit is contained in:
+147
-147
@@ -1,148 +1,148 @@
|
||||
<template>
|
||||
<div class="scenery-view">
|
||||
<div
|
||||
class="scenery-offline"
|
||||
v-if="!stationInfo && dataStatus == 2 && currentPath === '/scenery'"
|
||||
>
|
||||
Ups! Nie znaleziono danej stacji bądź jest ona offline!
|
||||
<button class="button">
|
||||
<router-link to="/">Wróć na stronę główną</router-link>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="scenery-wrapper" v-if="stationInfo">
|
||||
<SceneryInfo :stationInfo="stationInfo" :timetableOnly="timetableOnly" />
|
||||
|
||||
<SceneryTimetable
|
||||
:stationInfo="stationInfo"
|
||||
:timetableOnly="timetableOnly"
|
||||
:dataStatus="timetableDataStatus"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue, Component } from "vue-property-decorator";
|
||||
|
||||
import { Getter } from "vuex-class";
|
||||
|
||||
import Station from "@/scripts/interfaces/Station";
|
||||
import Train from "@/scripts/interfaces/Train";
|
||||
|
||||
import SceneryInfo from "@/components/SceneryView/SceneryInfo.vue";
|
||||
import SceneryTimetable from "@/components/SceneryView/SceneryTimetable.vue";
|
||||
|
||||
@Component({
|
||||
components: { SceneryInfo, SceneryTimetable },
|
||||
})
|
||||
export default class SceneryView extends Vue {
|
||||
@Getter("getStationList") storeStationList!: Station[];
|
||||
@Getter("getTimetableDataStatus") timetableDataStatus!: number;
|
||||
@Getter("getDataStatus") dataStatus!: number;
|
||||
|
||||
timetableOnly: boolean = false;
|
||||
|
||||
activated() {
|
||||
this.timetableOnly =
|
||||
this.$route.query["timetable_only"] == "1" ? true : false;
|
||||
}
|
||||
|
||||
get currentPath() {
|
||||
return this.$route.path;
|
||||
}
|
||||
|
||||
// get dataLoaded() {
|
||||
// return this.storeStationList ? true : false;
|
||||
// }
|
||||
|
||||
get stationInfo(): Station | null {
|
||||
if (!this.$route.query.hash || !this.storeStationList) return null;
|
||||
|
||||
const info =
|
||||
this.storeStationList.find(
|
||||
(station) => station.stationHash === this.$route.query.hash.toString()
|
||||
) || null;
|
||||
|
||||
return info;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../styles/responsive.scss";
|
||||
@import "../styles/variables.scss";
|
||||
|
||||
h3 {
|
||||
margin: 0.5em 0;
|
||||
padding: 0.3em;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
font-size: 1.2em;
|
||||
|
||||
img {
|
||||
width: 1.1em;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.scenery {
|
||||
&-view {
|
||||
min-height: 100%;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
font-size: calc(0.5rem + 0.65vw);
|
||||
|
||||
@include bigScreen() {
|
||||
font-size: 1.25rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
@include smallScreen {
|
||||
font-size: calc(0.5rem + 1vw);
|
||||
}
|
||||
}
|
||||
|
||||
&-offline {
|
||||
align-self: center;
|
||||
font-size: 2em;
|
||||
text-align: center;
|
||||
padding: 0 1em;
|
||||
|
||||
color: $warningCol;
|
||||
|
||||
display: inline-block;
|
||||
|
||||
.button {
|
||||
margin: 1rem auto;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
}
|
||||
|
||||
&-wrapper {
|
||||
// background: #555;
|
||||
max-width: 950px;
|
||||
width: 75%;
|
||||
|
||||
@include smallScreen {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
// max-height: 100vh;
|
||||
// overflow: auto;
|
||||
|
||||
background: #333;
|
||||
padding: 1em;
|
||||
margin: 1rem 0;
|
||||
|
||||
border-radius: 1.5em;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
<template>
|
||||
<div class="scenery-view">
|
||||
<div
|
||||
class="scenery-offline"
|
||||
v-if="!stationInfo && dataStatus == 2 && currentPath === '/scenery'"
|
||||
>
|
||||
Ups! Nie znaleziono danej stacji bądź jest ona offline!
|
||||
<button class="button">
|
||||
<router-link to="/">Wróć na stronę główną</router-link>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="scenery-wrapper" v-if="stationInfo">
|
||||
<SceneryInfo :stationInfo="stationInfo" :timetableOnly="timetableOnly" />
|
||||
|
||||
<SceneryTimetable
|
||||
:stationInfo="stationInfo"
|
||||
:timetableOnly="timetableOnly"
|
||||
:dataStatus="timetableDataStatus"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue, Component } from "vue-property-decorator";
|
||||
|
||||
import { Getter } from "vuex-class";
|
||||
|
||||
import Station from "@/scripts/interfaces/Station";
|
||||
import Train from "@/scripts/interfaces/Train";
|
||||
|
||||
import SceneryInfo from "@/components/SceneryView/SceneryInfo.vue";
|
||||
import SceneryTimetable from "@/components/SceneryView/SceneryTimetable.vue";
|
||||
|
||||
@Component({
|
||||
components: { SceneryInfo, SceneryTimetable },
|
||||
})
|
||||
export default class SceneryView extends Vue {
|
||||
@Getter("getStationList") storeStationList!: Station[];
|
||||
@Getter("getTimetableDataStatus") timetableDataStatus!: number;
|
||||
@Getter("getDataStatus") dataStatus!: number;
|
||||
|
||||
timetableOnly: boolean = false;
|
||||
|
||||
activated() {
|
||||
this.timetableOnly =
|
||||
this.$route.query["timetable_only"] == "1" ? true : false;
|
||||
}
|
||||
|
||||
get currentPath() {
|
||||
return this.$route.path;
|
||||
}
|
||||
|
||||
// get dataLoaded() {
|
||||
// return this.storeStationList ? true : false;
|
||||
// }
|
||||
|
||||
get stationInfo(): Station | null {
|
||||
if (!this.$route.query.hash || !this.storeStationList) return null;
|
||||
|
||||
const info =
|
||||
this.storeStationList.find(
|
||||
(station) => station.stationHash === this.$route.query.hash.toString()
|
||||
) || null;
|
||||
|
||||
return info;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../styles/responsive.scss";
|
||||
@import "../styles/variables.scss";
|
||||
|
||||
h3 {
|
||||
margin: 0.5em 0;
|
||||
padding: 0.3em;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
font-size: 1.2em;
|
||||
|
||||
img {
|
||||
width: 1.1em;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.scenery {
|
||||
&-view {
|
||||
min-height: 100%;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
font-size: calc(0.5rem + 0.65vw);
|
||||
|
||||
@include bigScreen() {
|
||||
font-size: 1.25rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
@include smallScreen {
|
||||
font-size: calc(0.5rem + 1vw);
|
||||
}
|
||||
}
|
||||
|
||||
&-offline {
|
||||
align-self: center;
|
||||
font-size: 2em;
|
||||
text-align: center;
|
||||
padding: 0 1em;
|
||||
|
||||
color: $warningCol;
|
||||
|
||||
display: inline-block;
|
||||
|
||||
.button {
|
||||
margin: 1rem auto;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
}
|
||||
|
||||
&-wrapper {
|
||||
// background: #555;
|
||||
max-width: 950px;
|
||||
width: 75%;
|
||||
|
||||
@include smallScreen {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
// max-height: 100vh;
|
||||
// overflow: auto;
|
||||
|
||||
background: #333;
|
||||
padding: 1em;
|
||||
margin: 1rem 0;
|
||||
|
||||
border-radius: 1.5em;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+373
-373
@@ -1,373 +1,373 @@
|
||||
<template>
|
||||
<div class="stations_view">
|
||||
<DonationModal :modalHidden="modalHidden" @toggleModal="toggleModal" />
|
||||
|
||||
<div class="stations_wrapper">
|
||||
<div class="stations_body">
|
||||
<div class="body_bar">
|
||||
<div class="bar_actions">
|
||||
<button
|
||||
class="action-btn"
|
||||
:class="{ open: filterCardOpen }"
|
||||
@click="() => toggleCardsState('filter')"
|
||||
>
|
||||
<img :src="require('@/assets/icon-filter2.svg')" alt="icon-filter" />
|
||||
<p>FILTRY</p>
|
||||
</button>
|
||||
|
||||
<button class="action-btn" @click="toggleModal">
|
||||
<img :src="dolarIcon" alt="icon-dolar" />
|
||||
|
||||
<p>WESPRZYJ</p>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="bar_indicators">
|
||||
<transition name="indicator-anim">
|
||||
<span
|
||||
class="indicator_scenery-data"
|
||||
v-if="data.dataConnectionStatus < 2"
|
||||
:class="dataStatusClass"
|
||||
>
|
||||
<img :src="trainIcon" alt="icon-train" />
|
||||
</span>
|
||||
</transition>
|
||||
|
||||
<transition name="indicator-anim">
|
||||
<span
|
||||
class="indicator_timetable-data"
|
||||
v-if="data.timetableDataStatus < 2"
|
||||
:class="timetableDataStatusClass"
|
||||
>
|
||||
<img :src="timetableIcon" alt="icon-timetable" />
|
||||
</span>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="body_table">
|
||||
<StationTable
|
||||
:stations="computedStations"
|
||||
:sorterActive="filterManager.getSorter()"
|
||||
:setFocusedStation="setFocusedStation"
|
||||
:changeSorter="changeSorter"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<transition name="card-anim">
|
||||
<StationCard v-if="focusedStationInfo" :stationInfo="focusedStationInfo" :exit="closeCard" />
|
||||
</transition>
|
||||
|
||||
<transition name="card-anim">
|
||||
<FilterCard
|
||||
v-if="filterCardOpen"
|
||||
:exit="() => toggleCardsState('filter')"
|
||||
@changeFilterValue="changeFilterValue"
|
||||
@resetFilters="resetFilters"
|
||||
/>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue, Component } from "vue-property-decorator";
|
||||
import { Getter } from "vuex-class";
|
||||
|
||||
import Station from "@/scripts/interfaces/Station";
|
||||
import Train from "@/scripts/interfaces/Train";
|
||||
|
||||
import StorageManager from "@/scripts/storageManager";
|
||||
import StationFilterManager from "@/scripts/stationFilterManager";
|
||||
|
||||
import inputData from "@/data/options.json";
|
||||
|
||||
import StationTable from "@/components/StationsView/StationTable.vue";
|
||||
import StationCard from "@/components/StationsView/StationCard.vue";
|
||||
import FilterCard from "@/components/StationsView/FilterCard.vue";
|
||||
|
||||
import DonationModal from "@/components/Global/DonationModal.vue";
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
StationCard,
|
||||
StationTable,
|
||||
FilterCard,
|
||||
DonationModal,
|
||||
},
|
||||
})
|
||||
export default class StationsView extends Vue {
|
||||
STORAGE_KEY: string = "options_saved";
|
||||
STORAGE_MODAL: string = "modal";
|
||||
|
||||
trainIcon: string = require("@/assets/icon-train.svg");
|
||||
timetableIcon: string = require("@/assets/icon-timetable.svg");
|
||||
dolarIcon: string = require("@/assets/icon-dolar.svg");
|
||||
|
||||
filterManager: StationFilterManager = new StationFilterManager();
|
||||
|
||||
focusedStationName: string = "";
|
||||
filterCardOpen: boolean = false;
|
||||
modalHidden: boolean = true;
|
||||
|
||||
inputs = inputData;
|
||||
|
||||
@Getter("getStationList") stationList!: Station[];
|
||||
@Getter("getAllData") data;
|
||||
|
||||
get dataStatusClass() {
|
||||
if (this.data.dataConnectionStatus == 0) return "loading";
|
||||
if (this.data.dataConnectionStatus == 1) return "error";
|
||||
|
||||
return "success";
|
||||
}
|
||||
|
||||
get timetableDataStatusClass() {
|
||||
if (this.data.timetableDataStatus == 0) return "loading";
|
||||
if (this.data.timetableDataStatus == 1) return "error";
|
||||
|
||||
return "success";
|
||||
}
|
||||
|
||||
mounted() {
|
||||
this.initializeOptionsStorage();
|
||||
// this.initializeModalStorage();
|
||||
|
||||
window.addEventListener("keydown", (e: KeyboardEvent) => {
|
||||
if (e.keyCode == 27 && this.focusedStationName != "") {
|
||||
this.focusedStationName = "";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
initializeOptionsStorage() {
|
||||
if (!StorageManager.isRegistered(this.STORAGE_KEY)) return;
|
||||
|
||||
this.inputs.options.forEach((option) => {
|
||||
const value = StorageManager.getBooleanValue(option.name);
|
||||
|
||||
this.changeFilterValue({ name: option.name, value: value ? 0 : 1 });
|
||||
option.value = value;
|
||||
});
|
||||
|
||||
this.inputs.sliders.forEach((slider) => {
|
||||
const value = StorageManager.getNumericValue(slider.name);
|
||||
|
||||
this.changeFilterValue({ name: slider.name, value });
|
||||
slider.value = value;
|
||||
});
|
||||
}
|
||||
|
||||
initializeModalStorage() {
|
||||
if (StorageManager.isRegistered(`${this.STORAGE_MODAL}_hidden`))
|
||||
this.modalHidden = StorageManager.getBooleanValue(
|
||||
`${this.STORAGE_MODAL}_hidden`
|
||||
);
|
||||
}
|
||||
|
||||
toggleModal() {
|
||||
this.modalHidden = !this.modalHidden;
|
||||
|
||||
StorageManager.setBooleanValue(
|
||||
`${this.STORAGE_MODAL}_hidden`,
|
||||
this.modalHidden
|
||||
);
|
||||
}
|
||||
|
||||
toggleCardsState(name: string): void {
|
||||
if (name == "filter") {
|
||||
this.filterCardOpen = !this.filterCardOpen;
|
||||
}
|
||||
}
|
||||
|
||||
changeSorter(index: number) {
|
||||
this.filterManager.changeSorter(index);
|
||||
}
|
||||
|
||||
changeFilterValue(filter: { name: string; value: number }) {
|
||||
this.filterManager.changeFilterValue(filter);
|
||||
}
|
||||
|
||||
resetFilters() {
|
||||
this.filterManager.resetFilters();
|
||||
}
|
||||
|
||||
get computedStations() {
|
||||
return this.filterManager.filteredStationList(this.stationList);
|
||||
}
|
||||
|
||||
closeCard() {
|
||||
this.focusedStationName = "";
|
||||
}
|
||||
|
||||
setFocusedStation(name: string) {
|
||||
if (this.focusedStationName == name) this.focusedStationName = "";
|
||||
else this.focusedStationName = name;
|
||||
}
|
||||
|
||||
get focusedStationInfo() {
|
||||
return this.computedStations.find(
|
||||
(station) => station.stationName === this.focusedStationName
|
||||
);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../styles/variables.scss";
|
||||
@import "../styles/responsive.scss";
|
||||
|
||||
.card-anim {
|
||||
&-enter-active,
|
||||
&-leave-active {
|
||||
transition: all 0.25s ease-in-out;
|
||||
}
|
||||
|
||||
&-enter,
|
||||
&-leave-to {
|
||||
transform: translate(-45%, -50%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.indicator-anim {
|
||||
&-enter-active,
|
||||
&-leave-active {
|
||||
transition: all 0.25s ease-in-out;
|
||||
}
|
||||
|
||||
&-enter,
|
||||
&-leave-to {
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.stations_view {
|
||||
position: relative;
|
||||
|
||||
padding: 1rem 0;
|
||||
min-height: 100%;
|
||||
|
||||
font-size: calc(0.6rem + 0.9vw);
|
||||
}
|
||||
|
||||
.stations_wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.stations_body {
|
||||
margin: 0 auto;
|
||||
overflow: auto;
|
||||
|
||||
& > .body_bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.bar_actions {
|
||||
display: flex;
|
||||
|
||||
button {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.bar_indicators {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
> span {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
|
||||
margin-left: 0.5em;
|
||||
|
||||
// background-color: #e68e00;
|
||||
border-radius: 0.5em 0.5em 0 0;
|
||||
|
||||
&.loading {
|
||||
background-color: $accentCol;
|
||||
}
|
||||
|
||||
&.error {
|
||||
background-color: $errorCol;
|
||||
}
|
||||
|
||||
&.success {
|
||||
background-color: $secondaryCol;
|
||||
}
|
||||
|
||||
& > img {
|
||||
width: 0.9em;
|
||||
animation: blinkAnim 2s ease-in-out infinite forwards;
|
||||
}
|
||||
|
||||
@include smallScreen() {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
background: #333;
|
||||
border: none;
|
||||
|
||||
color: #e0e0e0;
|
||||
font-size: 0.65em;
|
||||
|
||||
padding: 0.3em;
|
||||
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
transition: all 0.3s;
|
||||
|
||||
img {
|
||||
width: 1.3em;
|
||||
margin-right: 0.2em;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1em;
|
||||
overflow: hidden;
|
||||
|
||||
transition: max-width 0.35s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $accentCol;
|
||||
background: rgba(#e0e0e0, 0.4);
|
||||
}
|
||||
|
||||
&.open {
|
||||
color: $accentCol;
|
||||
}
|
||||
|
||||
@include smallScreen() {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blinkAnim {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="stations_view">
|
||||
<DonationModal :modalHidden="modalHidden" @toggleModal="toggleModal" />
|
||||
|
||||
<div class="stations_wrapper">
|
||||
<div class="stations_body">
|
||||
<div class="body_bar">
|
||||
<div class="bar_actions">
|
||||
<button
|
||||
class="action-btn"
|
||||
:class="{ open: filterCardOpen }"
|
||||
@click="() => toggleCardsState('filter')"
|
||||
>
|
||||
<img :src="require('@/assets/icon-filter2.svg')" alt="icon-filter" />
|
||||
<p>FILTRY</p>
|
||||
</button>
|
||||
|
||||
<button class="action-btn" @click="toggleModal">
|
||||
<img :src="dolarIcon" alt="icon-dolar" />
|
||||
|
||||
<p>WESPRZYJ</p>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="bar_indicators">
|
||||
<transition name="indicator-anim">
|
||||
<span
|
||||
class="indicator_scenery-data"
|
||||
v-if="data.dataConnectionStatus < 2"
|
||||
:class="dataStatusClass"
|
||||
>
|
||||
<img :src="trainIcon" alt="icon-train" />
|
||||
</span>
|
||||
</transition>
|
||||
|
||||
<transition name="indicator-anim">
|
||||
<span
|
||||
class="indicator_timetable-data"
|
||||
v-if="data.timetableDataStatus < 2"
|
||||
:class="timetableDataStatusClass"
|
||||
>
|
||||
<img :src="timetableIcon" alt="icon-timetable" />
|
||||
</span>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="body_table">
|
||||
<StationTable
|
||||
:stations="computedStations"
|
||||
:sorterActive="filterManager.getSorter()"
|
||||
:setFocusedStation="setFocusedStation"
|
||||
:changeSorter="changeSorter"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<transition name="card-anim">
|
||||
<StationCard v-if="focusedStationInfo" :stationInfo="focusedStationInfo" :exit="closeCard" />
|
||||
</transition>
|
||||
|
||||
<transition name="card-anim">
|
||||
<FilterCard
|
||||
v-if="filterCardOpen"
|
||||
:exit="() => toggleCardsState('filter')"
|
||||
@changeFilterValue="changeFilterValue"
|
||||
@resetFilters="resetFilters"
|
||||
/>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue, Component } from "vue-property-decorator";
|
||||
import { Getter } from "vuex-class";
|
||||
|
||||
import Station from "@/scripts/interfaces/Station";
|
||||
import Train from "@/scripts/interfaces/Train";
|
||||
|
||||
import StorageManager from "@/scripts/storageManager";
|
||||
import StationFilterManager from "@/scripts/stationFilterManager";
|
||||
|
||||
import inputData from "@/data/options.json";
|
||||
|
||||
import StationTable from "@/components/StationsView/StationTable.vue";
|
||||
import StationCard from "@/components/StationsView/StationCard.vue";
|
||||
import FilterCard from "@/components/StationsView/FilterCard.vue";
|
||||
|
||||
import DonationModal from "@/components/Global/DonationModal.vue";
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
StationCard,
|
||||
StationTable,
|
||||
FilterCard,
|
||||
DonationModal,
|
||||
},
|
||||
})
|
||||
export default class StationsView extends Vue {
|
||||
STORAGE_KEY: string = "options_saved";
|
||||
STORAGE_MODAL: string = "modal";
|
||||
|
||||
trainIcon: string = require("@/assets/icon-train.svg");
|
||||
timetableIcon: string = require("@/assets/icon-timetable.svg");
|
||||
dolarIcon: string = require("@/assets/icon-dolar.svg");
|
||||
|
||||
filterManager: StationFilterManager = new StationFilterManager();
|
||||
|
||||
focusedStationName: string = "";
|
||||
filterCardOpen: boolean = false;
|
||||
modalHidden: boolean = true;
|
||||
|
||||
inputs = inputData;
|
||||
|
||||
@Getter("getStationList") stationList!: Station[];
|
||||
@Getter("getAllData") data;
|
||||
|
||||
get dataStatusClass() {
|
||||
if (this.data.dataConnectionStatus == 0) return "loading";
|
||||
if (this.data.dataConnectionStatus == 1) return "error";
|
||||
|
||||
return "success";
|
||||
}
|
||||
|
||||
get timetableDataStatusClass() {
|
||||
if (this.data.timetableDataStatus == 0) return "loading";
|
||||
if (this.data.timetableDataStatus == 1) return "error";
|
||||
|
||||
return "success";
|
||||
}
|
||||
|
||||
mounted() {
|
||||
this.initializeOptionsStorage();
|
||||
// this.initializeModalStorage();
|
||||
|
||||
window.addEventListener("keydown", (e: KeyboardEvent) => {
|
||||
if (e.keyCode == 27 && this.focusedStationName != "") {
|
||||
this.focusedStationName = "";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
initializeOptionsStorage() {
|
||||
if (!StorageManager.isRegistered(this.STORAGE_KEY)) return;
|
||||
|
||||
this.inputs.options.forEach((option) => {
|
||||
const value = StorageManager.getBooleanValue(option.name);
|
||||
|
||||
this.changeFilterValue({ name: option.name, value: value ? 0 : 1 });
|
||||
option.value = value;
|
||||
});
|
||||
|
||||
this.inputs.sliders.forEach((slider) => {
|
||||
const value = StorageManager.getNumericValue(slider.name);
|
||||
|
||||
this.changeFilterValue({ name: slider.name, value });
|
||||
slider.value = value;
|
||||
});
|
||||
}
|
||||
|
||||
initializeModalStorage() {
|
||||
if (StorageManager.isRegistered(`${this.STORAGE_MODAL}_hidden`))
|
||||
this.modalHidden = StorageManager.getBooleanValue(
|
||||
`${this.STORAGE_MODAL}_hidden`
|
||||
);
|
||||
}
|
||||
|
||||
toggleModal() {
|
||||
this.modalHidden = !this.modalHidden;
|
||||
|
||||
StorageManager.setBooleanValue(
|
||||
`${this.STORAGE_MODAL}_hidden`,
|
||||
this.modalHidden
|
||||
);
|
||||
}
|
||||
|
||||
toggleCardsState(name: string): void {
|
||||
if (name == "filter") {
|
||||
this.filterCardOpen = !this.filterCardOpen;
|
||||
}
|
||||
}
|
||||
|
||||
changeSorter(index: number) {
|
||||
this.filterManager.changeSorter(index);
|
||||
}
|
||||
|
||||
changeFilterValue(filter: { name: string; value: number }) {
|
||||
this.filterManager.changeFilterValue(filter);
|
||||
}
|
||||
|
||||
resetFilters() {
|
||||
this.filterManager.resetFilters();
|
||||
}
|
||||
|
||||
get computedStations() {
|
||||
return this.filterManager.filteredStationList(this.stationList);
|
||||
}
|
||||
|
||||
closeCard() {
|
||||
this.focusedStationName = "";
|
||||
}
|
||||
|
||||
setFocusedStation(name: string) {
|
||||
if (this.focusedStationName == name) this.focusedStationName = "";
|
||||
else this.focusedStationName = name;
|
||||
}
|
||||
|
||||
get focusedStationInfo() {
|
||||
return this.computedStations.find(
|
||||
(station) => station.stationName === this.focusedStationName
|
||||
);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../styles/variables.scss";
|
||||
@import "../styles/responsive.scss";
|
||||
|
||||
.card-anim {
|
||||
&-enter-active,
|
||||
&-leave-active {
|
||||
transition: all 0.25s ease-in-out;
|
||||
}
|
||||
|
||||
&-enter,
|
||||
&-leave-to {
|
||||
transform: translate(-45%, -50%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.indicator-anim {
|
||||
&-enter-active,
|
||||
&-leave-active {
|
||||
transition: all 0.25s ease-in-out;
|
||||
}
|
||||
|
||||
&-enter,
|
||||
&-leave-to {
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.stations_view {
|
||||
position: relative;
|
||||
|
||||
padding: 1rem 0;
|
||||
min-height: 100%;
|
||||
|
||||
font-size: calc(0.6rem + 0.9vw);
|
||||
}
|
||||
|
||||
.stations_wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.stations_body {
|
||||
margin: 0 auto;
|
||||
overflow: auto;
|
||||
|
||||
& > .body_bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.bar_actions {
|
||||
display: flex;
|
||||
|
||||
button {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.bar_indicators {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
> span {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
|
||||
margin-left: 0.5em;
|
||||
|
||||
// background-color: #e68e00;
|
||||
border-radius: 0.5em 0.5em 0 0;
|
||||
|
||||
&.loading {
|
||||
background-color: $accentCol;
|
||||
}
|
||||
|
||||
&.error {
|
||||
background-color: $errorCol;
|
||||
}
|
||||
|
||||
&.success {
|
||||
background-color: $secondaryCol;
|
||||
}
|
||||
|
||||
& > img {
|
||||
width: 0.9em;
|
||||
animation: blinkAnim 2s ease-in-out infinite forwards;
|
||||
}
|
||||
|
||||
@include smallScreen() {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
background: #333;
|
||||
border: none;
|
||||
|
||||
color: #e0e0e0;
|
||||
font-size: 0.65em;
|
||||
|
||||
padding: 0.3em;
|
||||
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
transition: all 0.3s;
|
||||
|
||||
img {
|
||||
width: 1.3em;
|
||||
margin-right: 0.2em;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1em;
|
||||
overflow: hidden;
|
||||
|
||||
transition: max-width 0.35s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $accentCol;
|
||||
background: rgba(#e0e0e0, 0.4);
|
||||
}
|
||||
|
||||
&.open {
|
||||
color: $accentCol;
|
||||
}
|
||||
|
||||
@include smallScreen() {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blinkAnim {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
+769
-769
File diff suppressed because it is too large
Load Diff
+166
-166
@@ -1,166 +1,166 @@
|
||||
<template>
|
||||
<section class="trains-view">
|
||||
<div class="body-wrapper">
|
||||
<div class="options-wrapper">
|
||||
<TrainSorter :trainList="computedTrains" @changeSorter="changeSorter" />
|
||||
<TrainSearch
|
||||
@changeSearchedTrain="changeSearchedTrain"
|
||||
@changeSearchedDriver="changeSearchedDriver"
|
||||
:passedSearchedTrain="passedSearchedTrain"
|
||||
:focusedTrain="focusedTrain"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<TrainStats :trains="trains" />
|
||||
<TrainTable
|
||||
:computedTrains="computedTrains"
|
||||
@changeFocusedTrain="changeFocusedTrain"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from "vue";
|
||||
import { Component, Prop } from "vue-property-decorator";
|
||||
import { Getter, Action } from "vuex-class";
|
||||
|
||||
import Station from "@/scripts/interfaces/Station";
|
||||
import Train from "@/scripts/interfaces/Train";
|
||||
|
||||
import TrainSorter from "@/components/TrainsView/TrainSorter.vue";
|
||||
import TrainSearch from "@/components/TrainsView/TrainSearch.vue";
|
||||
import TrainTable from "@/components/TrainsView/TrainTable.vue";
|
||||
import TrainStats from "@/components/TrainsView/TrainStats.vue";
|
||||
|
||||
import axios from "axios";
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
TrainSorter,
|
||||
TrainTable,
|
||||
TrainStats,
|
||||
TrainSearch,
|
||||
},
|
||||
})
|
||||
export default class TrainsView extends Vue {
|
||||
@Getter("getTrainList") trains!: Train[];
|
||||
@Prop() readonly passedSearchedTrain!: string;
|
||||
|
||||
sorterActive: { id: string; dir: number } = { id: "timetable", dir: 1 };
|
||||
|
||||
searchedTrain: string = "";
|
||||
searchedDriver: string = "";
|
||||
focusedTrain: string = "";
|
||||
|
||||
changeSearchedTrain(trainNo: string) {
|
||||
this.searchedTrain = trainNo;
|
||||
}
|
||||
|
||||
changeSearchedDriver(name: string) {
|
||||
this.searchedDriver = name;
|
||||
}
|
||||
|
||||
changeFocusedTrain(trainNo: string) {
|
||||
this.focusedTrain = this.focusedTrain === trainNo ? "" : trainNo;
|
||||
}
|
||||
|
||||
changeSorter(sorter: { id: string; dir: number }) {
|
||||
this.sorterActive = sorter;
|
||||
}
|
||||
|
||||
get computedTrains() {
|
||||
return this.trains
|
||||
.filter(
|
||||
(train) =>
|
||||
train.timetableData &&
|
||||
(this.searchedTrain.length > 0
|
||||
? train.trainNo.toString().includes(this.searchedTrain)
|
||||
: true) &&
|
||||
(this.searchedDriver.length > 0
|
||||
? train.driverName
|
||||
.toLowerCase()
|
||||
.includes(this.searchedDriver.toLowerCase())
|
||||
: true)
|
||||
)
|
||||
.sort((a, b) => {
|
||||
switch (this.sorterActive.id) {
|
||||
case "mass":
|
||||
if (a.mass > b.mass) return this.sorterActive.dir;
|
||||
else return -this.sorterActive.dir;
|
||||
break;
|
||||
|
||||
case "distance":
|
||||
if (!a.timetableData || !b.timetableData) return 0;
|
||||
|
||||
if (a.timetableData.routeDistance > b.timetableData.routeDistance) return this.sorterActive.dir;
|
||||
else return -this.sorterActive.dir;
|
||||
break;
|
||||
|
||||
case "speed":
|
||||
if (a.speed > b.speed) return this.sorterActive.dir;
|
||||
else return -this.sorterActive.dir;
|
||||
break;
|
||||
|
||||
case "timetable":
|
||||
if (a.trainNo > b.trainNo) return this.sorterActive.dir;
|
||||
else return -this.sorterActive.dir;
|
||||
break;
|
||||
|
||||
case "length":
|
||||
if (a.length > b.length) return this.sorterActive.dir;
|
||||
else return -this.sorterActive.dir;
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
return 0;
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../styles/responsive.scss";
|
||||
|
||||
.trains-view {
|
||||
min-height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.body-wrapper {
|
||||
margin: 1rem auto;
|
||||
max-width: 1300px;
|
||||
|
||||
padding: 0 0.5rem;
|
||||
|
||||
font-size: calc(0.4rem + 0.4vw);
|
||||
}
|
||||
|
||||
.options-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
& > div {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include bigScreen() {
|
||||
.body-wrapper {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include smallScreen {
|
||||
.body-wrapper {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.options-wrapper {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<section class="trains-view">
|
||||
<div class="body-wrapper">
|
||||
<div class="options-wrapper">
|
||||
<TrainSorter :trainList="computedTrains" @changeSorter="changeSorter" />
|
||||
<TrainSearch
|
||||
@changeSearchedTrain="changeSearchedTrain"
|
||||
@changeSearchedDriver="changeSearchedDriver"
|
||||
:passedSearchedTrain="passedSearchedTrain"
|
||||
:focusedTrain="focusedTrain"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<TrainStats :trains="trains" />
|
||||
<TrainTable
|
||||
:computedTrains="computedTrains"
|
||||
@changeFocusedTrain="changeFocusedTrain"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from "vue";
|
||||
import { Component, Prop } from "vue-property-decorator";
|
||||
import { Getter, Action } from "vuex-class";
|
||||
|
||||
import Station from "@/scripts/interfaces/Station";
|
||||
import Train from "@/scripts/interfaces/Train";
|
||||
|
||||
import TrainSorter from "@/components/TrainsView/TrainSorter.vue";
|
||||
import TrainSearch from "@/components/TrainsView/TrainSearch.vue";
|
||||
import TrainTable from "@/components/TrainsView/TrainTable.vue";
|
||||
import TrainStats from "@/components/TrainsView/TrainStats.vue";
|
||||
|
||||
import axios from "axios";
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
TrainSorter,
|
||||
TrainTable,
|
||||
TrainStats,
|
||||
TrainSearch,
|
||||
},
|
||||
})
|
||||
export default class TrainsView extends Vue {
|
||||
@Getter("getTrainList") trains!: Train[];
|
||||
@Prop() readonly passedSearchedTrain!: string;
|
||||
|
||||
sorterActive: { id: string; dir: number } = { id: "timetable", dir: 1 };
|
||||
|
||||
searchedTrain: string = "";
|
||||
searchedDriver: string = "";
|
||||
focusedTrain: string = "";
|
||||
|
||||
changeSearchedTrain(trainNo: string) {
|
||||
this.searchedTrain = trainNo;
|
||||
}
|
||||
|
||||
changeSearchedDriver(name: string) {
|
||||
this.searchedDriver = name;
|
||||
}
|
||||
|
||||
changeFocusedTrain(trainNo: string) {
|
||||
this.focusedTrain = this.focusedTrain === trainNo ? "" : trainNo;
|
||||
}
|
||||
|
||||
changeSorter(sorter: { id: string; dir: number }) {
|
||||
this.sorterActive = sorter;
|
||||
}
|
||||
|
||||
get computedTrains() {
|
||||
return this.trains
|
||||
.filter(
|
||||
(train) =>
|
||||
train.timetableData &&
|
||||
(this.searchedTrain.length > 0
|
||||
? train.trainNo.toString().includes(this.searchedTrain)
|
||||
: true) &&
|
||||
(this.searchedDriver.length > 0
|
||||
? train.driverName
|
||||
.toLowerCase()
|
||||
.includes(this.searchedDriver.toLowerCase())
|
||||
: true)
|
||||
)
|
||||
.sort((a, b) => {
|
||||
switch (this.sorterActive.id) {
|
||||
case "mass":
|
||||
if (a.mass > b.mass) return this.sorterActive.dir;
|
||||
else return -this.sorterActive.dir;
|
||||
break;
|
||||
|
||||
case "distance":
|
||||
if (!a.timetableData || !b.timetableData) return 0;
|
||||
|
||||
if (a.timetableData.routeDistance > b.timetableData.routeDistance) return this.sorterActive.dir;
|
||||
else return -this.sorterActive.dir;
|
||||
break;
|
||||
|
||||
case "speed":
|
||||
if (a.speed > b.speed) return this.sorterActive.dir;
|
||||
else return -this.sorterActive.dir;
|
||||
break;
|
||||
|
||||
case "timetable":
|
||||
if (a.trainNo > b.trainNo) return this.sorterActive.dir;
|
||||
else return -this.sorterActive.dir;
|
||||
break;
|
||||
|
||||
case "length":
|
||||
if (a.length > b.length) return this.sorterActive.dir;
|
||||
else return -this.sorterActive.dir;
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
return 0;
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../styles/responsive.scss";
|
||||
|
||||
.trains-view {
|
||||
min-height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.body-wrapper {
|
||||
margin: 1rem auto;
|
||||
max-width: 1300px;
|
||||
|
||||
padding: 0 0.5rem;
|
||||
|
||||
font-size: calc(0.4rem + 0.4vw);
|
||||
}
|
||||
|
||||
.options-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
& > div {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include bigScreen() {
|
||||
.body-wrapper {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include smallScreen {
|
||||
.body-wrapper {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.options-wrapper {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user