Spythere/stacjownik
1
0
Fork 0
mirror of https://github.com/Spythere/stacjownik.git synced 2026-05-03 13:28:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Poprawki kodu. Dodano interaktywność rozkładów jazdy.

Browse Source
This commit is contained in:
Spythere
2020-09-06 21:55:55 +02:00
parent 33b3837bd8
commit 5adb990361
11 changed files with 236 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/icon-unavailable.svg
+6
View File
@@ -0,0 +1,6 @@
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="64" height="64" fill="#898989"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.5571 24.571C23.5571 21.906 24.5611 20.0553 25.984 18.8523C27.4412 17.6202 29.442 16.9838 31.5119 17.0003C33.5826 17.0168 35.6013 17.6863 37.0744 18.9083C38.5148 20.1034 39.4905 21.8673 39.4905 24.2699V31.0524H23.5571V24.571ZM20.5571 31.3205V24.571C20.5571 21.0634 21.9198 18.36 24.047 16.5614C26.1398 14.7919 28.8723 13.9792 31.5357 14.0004C34.1984 14.0216 36.913 14.8764 38.9899 16.5995C41.0994 18.3496 42.4905 20.9516 42.4905 24.2699V31.3205C43.9866 31.8994 45.0476 33.352 45.0476 35.0524V45.9857C45.0476 48.1948 43.2568 49.9857 41.0476 49.9857H22C19.7909 49.9857 18 48.1948 18 45.9857V35.0524C18 33.352 19.061 31.8994 20.5571 31.3205Z" fill="#C70000"/>
<path d="M33.2143 39.1667C33.2143 40.1003 32.4574 40.8571 31.5238 40.8571C30.5902 40.8571 29.8333 40.1003 29.8333 39.1667C29.8333 38.233 30.5902 37.4762 31.5238 37.4762C32.4574 37.4762 33.2143 38.233 33.2143 39.1667Z" fill="#898989"/>
<path d="M30.6786 43.3929V40.0119C30.6786 39.5451 31.057 39.1667 31.5238 39.1667C31.9906 39.1667 32.369 39.5451 32.369 40.0119V43.3929C32.369 43.8597 31.9906 44.2381 31.5238 44.2381C31.057 44.2381 30.6786 43.8597 30.6786 43.3929Z" fill="#898989"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

src/components/StationsView/FilterCard.vue
+7 -10
View File
@@ -166,23 +166,19 @@ export default class FilterCard extends Vue {
@include smallScreen() {
width: 85vw;
font-size: 0.45em;
font-size: calc(0.3em + 1vw);
}
@include bigScreen {
font-size: 1.1rem;
}
}
.card {
&-exit {
position: absolute;
top: 0;
right: 0;
margin: 0.8em;
img {
width: 1.1em;
width: 1.2em;
}
cursor: pointer;
}
&-title {
@@ -191,6 +187,7 @@ export default class FilterCard extends Vue {
color: $accentCol;
margin: 0.5em 0;
margin-top: 1em;
}
&-options {
src/components/StationsView/StationCard.vue
+53 -26
View File
@@ -68,6 +68,13 @@
alt="non-public"
title="Sceneria niepubliczna"
/>
<img
v-if="stationInfo.unavailable"
:src="require(`@/assets/icon-unavailable.svg`)"
alt="icon-unavailable"
title="Sceneria niedostępna"
/>
</div>
<div class="dispatcher">
@@ -142,18 +149,30 @@
<div class="card-timetables" id="card-timetables" :class="{show: cardMode == 1}">
<div class="timetables-wrapper">
<div class="timetables-title title">
<div style="font-size: 1.2em;">{{stationInfo.stationName.toUpperCase()}}</div>
<div>AKTYWNE ROZKŁADY JAZDY</div>
<div style="font-size: 1.5em;">{{stationInfo.stationName.toUpperCase()}}</div>
<div style="font-size: 0.7em;">AKTYWNE ROZKŁADY JAZDY</div>
</div>
<div class="timetables-content">
<div class="timetable" v-for="(timetable, i) in computedScheduledTrains" :key="i">
<span class="timetable-general">
<span class="general-category">
<span>{{timetable.category}}</span>
{{timetable.trainNo}}
<span class="general-info">
<router-link
:to="{ name: 'TrainsView', params: { passedSearchedTrain: timetable.trainNo.toString()}}"
>
<span>
{{timetable.category}}
{{timetable.trainNo}}
</span>
</router-link>|
<span>
<a
:href="'https://td2.info.pl/profile/?u=' + timetable.driverId"
target="_blank"
>{{ timetable.driverName }}</a>
</span>
</span>
<span class="general-driver">{{timetable.driverName}}</span>
<span class="general-confirmed">
<span
style="color: gold"
@@ -214,7 +233,6 @@ export default class StationCard extends styleMixin {
cardMode: number = 0;
get computedExp(): string {
console.log(this.stationInfo.scheduledTrains);
return this.stationInfo.dispatcherExp < 2
? "L"
@@ -250,6 +268,12 @@ export default class StationCard extends styleMixin {
.station-card {
scroll-behavior: smooth;
font-size: calc(0.55rem + 0.3vw);
@include bigScreen {
font-size: 1.1rem;
}
}
.card {
@@ -264,15 +288,14 @@ export default class StationCard extends styleMixin {
z-index: 3;
img {
margin: 0 0.3em;
margin: 0.1em 0.3em;
font-size: 1.6em;
}
cursor: pointer;
}
&-content {
position: relative;
margin-top: 1rem;
display: grid;
grid-template-areas: "main main" "icons icons" "dispatcher hours" "users spawns" "history history";
@@ -294,7 +317,7 @@ export default class StationCard extends styleMixin {
}
@include smallScreen() {
grid-template-areas: "main main" "icons icons" "dispatcher dispatcher" "hours hours" "users spawns";
grid-template-areas: "main main" "icons icons" "dispatcher dispatcher" "hours hours" "users users" "spawns spawns";
}
}
}
@@ -457,7 +480,9 @@ export default class StationCard extends styleMixin {
left: 0;
top: 0;
width: 100%;
min-height: 100%;
height: 100%;
overflow: hidden;
transform: translateY(-100%);
-webikit-transform: translateY(-100%);
@@ -469,8 +494,6 @@ export default class StationCard extends styleMixin {
transition: transform 150ms ease-out;
overflow: auto;
background: #333;
}
@@ -478,28 +501,32 @@ export default class StationCard extends styleMixin {
&-content {
width: 100%;
height: 100%;
padding: 25px 0;
overflow: auto;
}
&-title {
padding-top: 1rem;
font-size: 1.3em;
padding-top: 2rem;
padding-bottom: 0.3rem;
font-size: 1.6em;
}
&-wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
}
.timetable {
position: relative;
// margin: 0.rem auto;
margin: 1em auto;
max-width: 600px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
gap: 0 1rem;
padding: 0 2rem;
@include smallScreen() {
display: flex;
flex-direction: column;
@@ -514,13 +541,13 @@ export default class StationCard extends styleMixin {
justify-content: space-between;
@include smallScreen() {
width: 75%;
width: 95%;
}
}
&-schedule {
@include smallScreen() {
width: 70%;
width: 80%;
margin: 0.7em 0;
}
@@ -557,7 +584,7 @@ export default class StationCard extends styleMixin {
}
}
.general-category {
.general-info {
span {
color: $accentCol;
}
src/components/StationsView/StationTable.vue
+6 -1
View File
@@ -30,7 +30,7 @@
>
<td
class="item-station-name"
:class="{'default-station': station.default, 'online': station.online}"
:class="{'default-station': station.default, 'online': station.online, 'station-unavailable': station.unavailable}"
>{{station.stationName}}</td>
<td class="item-station-level">
@@ -329,4 +329,9 @@ export default class StationTable extends styleMixin {
}
}
}
.station-unavailable {
color: #ff1e1e;
font-weight: bold;
}
</style>
src/components/TrainsView/TrainSearch.vue
+12 -1
View File
@@ -19,7 +19,7 @@
</template>
<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
@Component
export default class extends Vue {
@@ -27,6 +27,9 @@ export default class extends Vue {
searchedTrain = "";
searchedDriver = "";
@Prop() readonly passedSearchedTrain!: string;
// @Prop() readonly passedSearchedDriver!: string;
@Watch("searchedTrain")
onSearchedTrainChanged(val: string, oldVal: string) {
this.$emit("changeSearchedTrain", val);
@@ -36,6 +39,14 @@ export default class extends Vue {
onSearchedDriverChanged(val: string, oldVal: string) {
this.$emit("changeSearchedDriver", val);
}
@Watch("passedSearchedTrain")
onPassedSearchedTrainChanged(val: string, oldVal: string) {
if (val && val != "") {
this.searchedTrain = val;
this.searchedDriver = "";
}
}
}
</script>
src/data/stations.json
+122 -3
View File
@@ -1,5 +1,4 @@
[
{
[{
"stationName": "Blaszki",
"stationURL": "https://td2.info.pl/scenerie/blaszki/",
"stationLines": "",
@@ -1739,5 +1738,125 @@
},
"default": false,
"nonPublic": false
},
{
"stationName": "Hetmanice",
"stationURL": "https://td2.info.pl/dzial-trenerski/hetmanice-stacja-dla-poczatkujacych/",
"stationLines": "",
"reqLevel": "0",
"supportersOnly": "NIE",
"signalType": "współczesna",
"controlType": "SCS-SPK",
"SBL": "",
"twoWayBlock": "",
"routes": {
"oneWay": {
"catenary": 0,
"noCatenary": 0
},
"twoWay": {
"catenary": 2,
"noCatenary": 0
}
},
"default": false,
"nonPublic": false,
"unavailable": true
},
{
"stationName": "Starzynki",
"stationURL": "https://td2.info.pl/w-trakcie-prac/starzynki/",
"stationLines": "",
"reqLevel": "3",
"supportersOnly": "NIE",
"signalType": "współczesna",
"controlType": "SPK",
"SBL": "TAK (Szlak Ps)",
"twoWayBlock": "TAK",
"routes": {
"oneWay": {
"catenary": 2,
"noCatenary": 0
},
"twoWay": {
"catenary": 1,
"noCatenary": 0
}
},
"default": false,
"nonPublic": false,
"unavailable": true
},
{
"stationName": "Głęboszów",
"stationURL": "https://td2.info.pl/scenerie/gleboszow/",
"stationLines": "",
"reqLevel": "3",
"supportersOnly": "NIE",
"signalType": "współczesna",
"controlType": "SCS",
"SBL": "TAK (Szlaki Br oraz GO)",
"twoWayBlock": "TAK",
"routes": {
"oneWay": {
"catenary": 1,
"noCatenary": 0
},
"twoWay": {
"catenary": 2,
"noCatenary": 0
}
},
"default": false,
"nonPublic": false,
"unavailable": true
},
{
"stationName": "Skawce",
"stationURL": "https://td2.info.pl/w-trakcie-prac/skawce-(projekt-zakopianka)/",
"stationLines": "97",
"reqLevel": "4",
"supportersOnly": "NIE",
"signalType": "współczesna",
"controlType": "SPK",
"SBL": "",
"twoWayBlock": "",
"routes": {
"oneWay": {
"catenary": 2,
"noCatenary": 0
},
"twoWay": {
"catenary": 0,
"noCatenary": 0
}
},
"default": false,
"nonPublic": false,
"unavailable": true
},
{
"stationName": "Sroka",
"stationURL": "https://td2.info.pl/w-trakcie-prac/podg-sroka/",
"stationLines": "",
"reqLevel": "8",
"supportersOnly": "NIE",
"signalType": "współczesna",
"controlType": "SCS",
"SBL": "",
"twoWayBlock": "TAK",
"routes": {
"oneWay": {
"catenary": 1,
"noCatenary": 0
},
"twoWay": {
"catenary": 3,
"noCatenary": 0
}
},
"default": false,
"nonPublic": false,
"unavailable": true
}
]
]
src/router/index.ts
+14 -13
View File
@@ -1,10 +1,10 @@
import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import Vue from 'vue';
import VueRouter, { RouteConfig } from 'vue-router';
import StationsView from '../views/StationsView.vue'
import TrainsView from '../views/TrainsView.vue'
import StationsView from '../views/StationsView.vue';
import TrainsView from '../views/TrainsView.vue';
Vue.use(VueRouter)
Vue.use(VueRouter);
const routes: Array<RouteConfig> = [
{
@@ -13,16 +13,17 @@ const routes: Array<RouteConfig> = [
component: StationsView,
},
{
path: "/trains",
name: "TrainsView",
component: TrainsView
}
]
path: '/trains',
name: 'TrainsView',
component: TrainsView,
props: true,
},
];
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
routes,
});
export default router
export default router;
src/styles/global.scss
+6 -2
View File
@@ -137,14 +137,18 @@ input {
width: 95%;
}
@include bigScreen {
font-size: 1.4rem;
}
&-exit {
position: absolute;
top: 0;
right: 0;
margin: 0.8em;
margin: 0.3em 0em;
img {
width: 1.5em;
width: 1.6em;
}
cursor: pointer;
src/styles/responsive.scss
+2 -2
View File
@@ -5,7 +5,7 @@
}
@mixin bigScreen() {
@media only screen and (min-width: 1600px) {
@media only screen and (min-width: 2000px) {
@content;
}
}
}
src/views/StationsView.vue
+1
View File
@@ -149,6 +149,7 @@ export default class StationsView extends Vue {
acc[station.stationName].push({
trainNo: train.trainNo,
driverName: train.driverName,
driverId: train.driverId,
category: train.category,
...foundStop
});
src/views/TrainsView.vue
+7 -3
View File
@@ -6,6 +6,7 @@
<TrainSearch
@changeSearchedTrain="changeSearchedTrain"
@changeSearchedDriver="changeSearchedDriver"
:passedSearchedTrain="passedSearchedTrain"
/>
</div>
@@ -17,7 +18,7 @@
<script lang="ts">
import Vue from "vue";
import { Component } from "vue-property-decorator";
import { Component, Prop } from "vue-property-decorator";
import { Getter, Action } from "vuex-class";
import Station from "@/scripts/interfaces/Station";
@@ -43,6 +44,8 @@ export default class TrainsView extends Vue {
@Action("fetchTrainsData") fetchTrainsData;
@Prop() readonly passedSearchedTrain!: string;
sorterActive: { id: string; dir: number } = { id: "timetable", dir: 1 };
searchedTrain: string = "";
searchedDriver: string = "";
@@ -59,6 +62,7 @@ export default class TrainsView extends Vue {
this.sorterActive = sorter;
}
get computedTrains() {
return this.trains
.filter(
@@ -69,8 +73,8 @@ export default class TrainsView extends Vue {
: true) &&
(this.searchedDriver.length > 0
? train.driverName
.toLowerCase()
.includes(this.searchedDriver.toLowerCase())
.toLowerCase()
.includes(this.searchedDriver.toLowerCase())
: true)
)
.sort((a, b) => {