mirror of
https://github.com/Spythere/stacjownik.git
synced 2026-05-03 05:18:11 +00:00
Zmiana w wyglądzie elementów listy pociągów, poprawki kosmetyczne
This commit is contained in:
@@ -0,0 +1,5 @@
|
||||
<svg width="25" height="40" viewBox="0 0 25 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M22.3239 23.2517L12.5 39.9451L2.67613 23.2517C-1.14806 16.7533 -3.04933 0.0257886 12.4963 2.9778e-05C28.0499 0.0205562 26.1487 16.7523 22.3239 23.2517Z" fill="#7B7B7B"/>
|
||||
<path d="M18.0882 23H7.5V7.91892C7.5 4.02703 18.0882 4.02703 18.0882 7.91892V23Z" fill="white"/>
|
||||
<path d="M12.0446 8.99239V12.4865H11.314V9.81828L10.557 10.3053L10.2235 9.76004L11.3776 8.99239H12.0446ZM13.26 9.36298C13.4894 9.07357 13.8282 8.92886 14.2765 8.92886C14.7247 8.92886 15.0618 9.07357 15.2877 9.36298C15.5171 9.65239 15.6318 10.1183 15.6318 10.7606C15.6318 11.3995 15.5188 11.8583 15.2929 12.1371C15.0671 12.4124 14.7282 12.55 14.2765 12.55C13.8247 12.55 13.4859 12.4124 13.26 12.1371C13.0341 11.8583 12.9212 11.3995 12.9212 10.7606C12.9212 10.1183 13.0341 9.65239 13.26 9.36298ZM14.88 10.7447C14.88 10.3071 14.8341 10.0018 14.7424 9.82886C14.6506 9.65239 14.4953 9.56416 14.2765 9.56416C14.0612 9.56416 13.9059 9.65239 13.8106 9.82886C13.7188 10.0053 13.6729 10.3106 13.6729 10.7447C13.6729 11.1789 13.7206 11.4824 13.8159 11.6553C13.9112 11.8283 14.0665 11.9147 14.2818 11.9147C14.4971 11.9147 14.6506 11.8283 14.7424 11.6553C14.8341 11.4824 14.88 11.1789 14.88 10.7447ZM13.907 16.9924V17.6277H12.3453L12.2553 18.3847C12.4741 18.3 12.6823 18.2577 12.88 18.2577C13.6353 18.2577 14.0129 18.6089 14.0129 19.3112C14.0129 19.7065 13.9088 20.0118 13.7006 20.2271C13.4923 20.4424 13.1976 20.55 12.8164 20.55C12.6541 20.55 12.4688 20.5342 12.2606 20.5024C12.0558 20.4706 11.8917 20.4371 11.7682 20.4018L11.5776 20.3542L11.657 19.8142C12.0841 19.8812 12.4406 19.9147 12.7264 19.9147C12.8994 19.9147 13.0317 19.8689 13.1235 19.7771C13.2153 19.6853 13.2611 19.5547 13.2611 19.3853C13.2611 19.2124 13.2223 19.0871 13.1447 19.0095C13.067 18.9318 12.9576 18.893 12.8164 18.893C12.58 18.893 12.3717 18.9159 12.1917 18.9618L12.1123 18.983L11.6782 18.8824L11.7735 16.9924H13.907Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
|
||||
|
After Width: | Height: | Size: 264 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 12c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm6-1.8C18 6.57 15.35 4 12 4s-6 2.57-6 6.2c0 2.34 1.95 5.44 6 9.14 4.05-3.7 6-6.8 6-9.14zM12 2c4.2 0 8 3.22 8 8.2 0 3.32-2.67 7.25-8 11.8-5.33-4.55-8-8.48-8-11.8C4 5.22 7.8 2 12 2z"/></svg>
|
||||
|
After Width: | Height: | Size: 384 B |
@@ -0,0 +1,5 @@
|
||||
<svg width="25" height="40" viewBox="0 0 25 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M22.3239 23.2517L12.5 39.9451L2.67613 23.2517C-1.14806 16.7533 -3.04933 0.0257886 12.4963 2.9778e-05C28.0499 0.0205562 26.1487 16.7523 22.3239 23.2517Z" fill="#7B7B7B"/>
|
||||
<path d="M5 14.9412V14.0588V11.4118H12.9412V7L21.2745 14.5L12.9412 22V17.5882H5V14.9412Z" fill="#FF0F00"/>
|
||||
<path d="M12.9412 22V17.5882V11.4118V7L21.2745 14.5L12.9412 22Z" fill="#F9E429"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 471 B |
@@ -0,0 +1,8 @@
|
||||
<svg width="25" height="40" viewBox="0 0 25 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M22.3239 23.2517L12.5 39.9451L2.67613 23.2517C-1.14806 16.7533 -3.04933 0.0257886 12.4963 2.9778e-05C28.0499 0.0205562 26.1487 16.7523 22.3239 23.2517Z" fill="#7B7B7B"/>
|
||||
<path d="M2.8642 17.7283H21.9129V15.6226V11.7548H16.2556H10.5982C6.01511 11.7548 2.8642 15.4564 2.8642 17.7283Z" fill="white"/>
|
||||
<path d="M6.75992 15.5168H4.04358C5.78204 12.8673 8.31729 12.2049 9.36761 12.2049L6.75992 15.5168Z" fill="#7B7B7B"/>
|
||||
<path d="M3.53815 17.3719L21.3972 17.3719" stroke="#7B7B7B" stroke-width="0.0824053"/>
|
||||
<path d="M17.5221 12.0267L20.5548 10.8223V9.71045H19.4717" stroke="white" stroke-width="0.329621" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<rect x="10.6144" y="12.7394" width="11.7937" height="2.31626" rx="0.329621" fill="#7B7B7B"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 855 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="18px" height="18px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V9h14v10zM5 7V5h14v2H5zm2 4h10v2H7zm0 4h7v2H7z"/></svg>
|
||||
|
After Width: | Height: | Size: 304 B |
@@ -0,0 +1,18 @@
|
||||
<svg width="25" height="40" viewBox="0 0 25 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M22.3239 23.2517L12.5 39.9451L2.67613 23.2517C-1.14806 16.7533 -3.04933 0.0257886 12.4963 2.9778e-05C28.0499 0.0205562 26.1487 16.7523 22.3239 23.2517Z" fill="#7B7B7B"/>
|
||||
<path d="M13.0118 4.94928H15.1986" stroke="#BFBFBF" stroke-width="0.463353"/>
|
||||
<path d="M11.8082 4.0014C10.5614 4.04637 10.1113 5.0402 10 5.58358H13.7294C13.6367 5.00272 13.0551 3.95643 11.8082 4.0014Z" fill="black"/>
|
||||
<path d="M14.1815 15.8937V4.68477V4.31641H14.8595V4.68477V28.3655H14.1815V17.2055H11.6217V15.3521V15.128L12.0851 15.1204V16.7422L13.6729 16.7629H14.1815V15.8937Z" fill="#BFBFBF"/>
|
||||
<path d="M11.9212 15.7081C13.1681 15.6632 13.6181 14.6693 13.7294 14.1259H10C10.0928 14.7068 10.6744 15.7531 11.9212 15.7081Z" fill="black"/>
|
||||
<path d="M13.7294 14.1259V5.79311V5.58215H10V14.1259H13.7294Z" fill="black"/>
|
||||
<path d="M10.4634 14.1937V15.8155L14.5771 22.9861" stroke="black" stroke-width="0.463353"/>
|
||||
<rect x="14.1815" y="16.7629" width="0.678077" height="11.6027" fill="#7B7B7B"/>
|
||||
<rect x="14.1815" y="16.7629" width="0.678077" height="2.63697" fill="#FF0000"/>
|
||||
<rect x="14.1815" y="22.0369" width="0.678077" height="2.63697" fill="#FF0000"/>
|
||||
<rect x="14.1815" y="27.3108" width="0.678077" height="2.63697" fill="#FF0000"/>
|
||||
<ellipse cx="11.8083" cy="5.57549" rx="0.678077" ry="0.648796" fill="#212121"/>
|
||||
<ellipse cx="11.8083" cy="7.63006" rx="0.678077" ry="0.648796" fill="#212121"/>
|
||||
<ellipse cx="11.8083" cy="9.68456" rx="0.678077" ry="0.648796" fill="#FF0000"/>
|
||||
<ellipse cx="11.8083" cy="11.7391" rx="0.678077" ry="0.648796" fill="#212121"/>
|
||||
<ellipse cx="11.8083" cy="13.7936" rx="0.678077" ry="0.648796" fill="#212121"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@@ -132,6 +132,14 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="card-timetables">
|
||||
<div class="title">AKTYWNE ROZKŁADY JAZDY</div>
|
||||
<div class="content">
|
||||
<ul>
|
||||
</ul>
|
||||
</div>
|
||||
</div>-->
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@@ -356,4 +364,24 @@ export default class StationCard extends styleMixin {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-timetables {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
||||
height: 90%;
|
||||
|
||||
background: #333;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
// transform: translateY(80%);
|
||||
}
|
||||
</style>
|
||||
@@ -1,145 +1,140 @@
|
||||
<template>
|
||||
<section class="station-table">
|
||||
<div class="table-wrapper">
|
||||
<table class="table">
|
||||
<thead class="table-head">
|
||||
<tr>
|
||||
<th v-for="(head, i) in headTitles" :key="i" @click="() => changeSorter(i)">
|
||||
<span>
|
||||
<div>
|
||||
<div>{{head[0]}}</div>
|
||||
<div v-if="head.length > 1">{{head[1]}}</div>
|
||||
</div>
|
||||
<table class="table" v-if="stations.length != 0">
|
||||
<thead class="table-head">
|
||||
<tr>
|
||||
<th v-for="(head, i) in headTitles" :key="i" @click="() => changeSorter(i)">
|
||||
<span>
|
||||
<div>
|
||||
<div>{{head[0]}}</div>
|
||||
<div v-if="head.length > 1">{{head[1]}}</div>
|
||||
</div>
|
||||
|
||||
<img
|
||||
class="sort-icon"
|
||||
v-if="sorterActive.index == i"
|
||||
:src="sorterActive.dir == 1 ? icons.ascSVG : icons.descSVG"
|
||||
alt
|
||||
/>
|
||||
</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tr
|
||||
class="table-item"
|
||||
v-for="(station, i) in computedStations"
|
||||
:key="i + station.stationHash"
|
||||
@click="() => { setFocusedStation(station.stationName) }"
|
||||
>
|
||||
<td
|
||||
class="item-station-name"
|
||||
:class="{'default-station': station.default, 'online': station.online}"
|
||||
>{{station.stationName}}</td>
|
||||
|
||||
<td class="item-station-level">
|
||||
<span
|
||||
v-if="station.reqLevel"
|
||||
:style="calculateExpStyle(station.reqLevel)"
|
||||
>{{ (station.reqLevel && station.reqLevel > -1) ? (parseInt(station.reqLevel) >= 2 ? station.reqLevel : "L") : "?" }}</span>
|
||||
|
||||
<span v-else>?</span>
|
||||
</td>
|
||||
|
||||
<td class="item-station-status">
|
||||
<span class="status" :class="statusClasses(station.occupiedTo)">{{station.occupiedTo}}</span>
|
||||
</td>
|
||||
|
||||
<td class="item-dispatcher-name">{{station.online ? station.dispatcherName : ""}}</td>
|
||||
<td class="item-dispatcher-exp">
|
||||
<span
|
||||
v-if="station.online"
|
||||
:style="calculateExpStyle(station.dispatcherExp)"
|
||||
>{{2 > station.dispatcherExp ? 'L' : station.dispatcherExp}}</span>
|
||||
</td>
|
||||
<td
|
||||
class="item-users"
|
||||
>{{station.online ? (station.currentUsers + "/" + station.maxUsers) : ""}}</td>
|
||||
<td class="item-info">
|
||||
<img
|
||||
class="icon-info"
|
||||
v-if="station.controlType"
|
||||
:src="require(`@/assets/icon-${station.controlType}.svg`)"
|
||||
:alt="station.controlType"
|
||||
:title="'Sterowanie ' + station.controlType"
|
||||
/>
|
||||
|
||||
<img
|
||||
class="icon-info"
|
||||
v-if="station.signalType"
|
||||
:src="require(`@/assets/icon-${station.signalType}.svg`)"
|
||||
:alt="station.signalType"
|
||||
:title="'Sygnalizacja ' + station.signalType"
|
||||
/>
|
||||
|
||||
<img
|
||||
class="icon-info"
|
||||
v-if="station.SBL && station.SBL !== ''"
|
||||
:src="require(`@/assets/icon-SBL.svg`)"
|
||||
alt="SBL"
|
||||
title="Sceneria posiada SBL na przynajmniej jednym ze szlaków"
|
||||
/>
|
||||
|
||||
<img
|
||||
class="icon-info"
|
||||
v-if="!station.reqLevel || station.nonPublic"
|
||||
:src="require(`@/assets/icon-lock.svg`)"
|
||||
alt="non-public"
|
||||
title="Sceneria niepubliczna"
|
||||
/>
|
||||
</td>
|
||||
|
||||
<td class="item-tracks twoway">
|
||||
<span
|
||||
v-if="station.routes && station.routes.twoWay.catenary > 0"
|
||||
class="track catenary"
|
||||
:title="'Liczba zelektryfikowanych szlaków dwutorowych: ' + station.routes.twoWay.catenary"
|
||||
>{{station.routes.twoWay.catenary}}</span>
|
||||
|
||||
<span
|
||||
v-if="station.routes && station.routes.twoWay.noCatenary > 0"
|
||||
class="track no-catenary"
|
||||
:title="'Liczba niezelektryfikowanych szlaków dwutorowych: ' + station.routes.twoWay.noCatenary"
|
||||
>{{station.routes.twoWay.noCatenary}}</span>
|
||||
|
||||
<span class="separator"></span>
|
||||
|
||||
<span
|
||||
v-if="station.routes && station.routes.oneWay.catenary > 0"
|
||||
class="track catenary"
|
||||
:title="'Liczba zelektryfikowanych szlaków jednotorowych: ' + station.routes.oneWay.catenary"
|
||||
>{{station.routes.oneWay.catenary}}</span>
|
||||
|
||||
<span
|
||||
v-if="station.routes && station.routes.oneWay.noCatenary > 0"
|
||||
class="track no-catenary"
|
||||
:title="'Liczba niezelektryfikowanych szlaków jednotorowych: ' + station.routes.oneWay.noCatenary"
|
||||
>{{station.routes.oneWay.noCatenary}}</span>
|
||||
</td>
|
||||
|
||||
<td class="active-timetables">
|
||||
<transition name="change-anim" mode="out-in">
|
||||
<span
|
||||
:key="trainsDataState + station.scheduledTrains.length"
|
||||
@click="() => getScheduledTrains(station.stationName)"
|
||||
>
|
||||
<span v-if="trainsDataState == 2">
|
||||
<span style="color:#eee">{{ station.scheduledTrains.length}}</span>
|
||||
/
|
||||
<span
|
||||
style="color:#bbb"
|
||||
>{{ station.scheduledTrains.filter(train => train.confirmed).length }}</span>
|
||||
</span>
|
||||
|
||||
<span v-else>...</span>
|
||||
</span>
|
||||
</transition>
|
||||
</td>
|
||||
<img
|
||||
class="sort-icon"
|
||||
v-if="sorterActive.index == i"
|
||||
:src="sorterActive.dir == 1 ? icons.ascSVG : icons.descSVG"
|
||||
alt
|
||||
/>
|
||||
</span>
|
||||
</th>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="no-stations" v-if="stations.length == 0">Ups! Brak stacji do wyświetlenia!</div>
|
||||
</div>
|
||||
</thead>
|
||||
|
||||
<tr
|
||||
class="table-item"
|
||||
v-for="(station, i) in stations"
|
||||
:key="i + station.stationHash"
|
||||
@click="() => { setFocusedStation(station.stationName) }"
|
||||
>
|
||||
<td
|
||||
class="item-station-name"
|
||||
:class="{'default-station': station.default, 'online': station.online}"
|
||||
>{{station.stationName}}</td>
|
||||
|
||||
<td class="item-station-level">
|
||||
<span
|
||||
v-if="station.reqLevel"
|
||||
:style="calculateExpStyle(station.reqLevel)"
|
||||
>{{ (station.reqLevel && station.reqLevel > -1) ? (parseInt(station.reqLevel) >= 2 ? station.reqLevel : "L") : "?" }}</span>
|
||||
|
||||
<span v-else>?</span>
|
||||
</td>
|
||||
|
||||
<td class="item-station-status">
|
||||
<span class="status" :class="statusClasses(station.occupiedTo)">{{station.occupiedTo}}</span>
|
||||
</td>
|
||||
|
||||
<td class="item-dispatcher-name">{{station.online ? station.dispatcherName : ""}}</td>
|
||||
<td class="item-dispatcher-exp">
|
||||
<span
|
||||
v-if="station.online"
|
||||
:style="calculateExpStyle(station.dispatcherExp)"
|
||||
>{{2 > station.dispatcherExp ? 'L' : station.dispatcherExp}}</span>
|
||||
</td>
|
||||
<td
|
||||
class="item-users"
|
||||
>{{station.online ? (station.currentUsers + "/" + station.maxUsers) : ""}}</td>
|
||||
<td class="item-info">
|
||||
<img
|
||||
class="icon-info"
|
||||
v-if="station.controlType"
|
||||
:src="require(`@/assets/icon-${station.controlType}.svg`)"
|
||||
:alt="station.controlType"
|
||||
:title="'Sterowanie ' + station.controlType"
|
||||
/>
|
||||
|
||||
<img
|
||||
class="icon-info"
|
||||
v-if="station.signalType"
|
||||
:src="require(`@/assets/icon-${station.signalType}.svg`)"
|
||||
:alt="station.signalType"
|
||||
:title="'Sygnalizacja ' + station.signalType"
|
||||
/>
|
||||
|
||||
<img
|
||||
class="icon-info"
|
||||
v-if="station.SBL && station.SBL !== ''"
|
||||
:src="require(`@/assets/icon-SBL.svg`)"
|
||||
alt="SBL"
|
||||
title="Sceneria posiada SBL na przynajmniej jednym ze szlaków"
|
||||
/>
|
||||
|
||||
<img
|
||||
class="icon-info"
|
||||
v-if="!station.reqLevel || station.nonPublic"
|
||||
:src="require(`@/assets/icon-lock.svg`)"
|
||||
alt="non-public"
|
||||
title="Sceneria niepubliczna"
|
||||
/>
|
||||
</td>
|
||||
|
||||
<td class="item-tracks twoway">
|
||||
<span
|
||||
v-if="station.routes && station.routes.twoWay.catenary > 0"
|
||||
class="track catenary"
|
||||
:title="'Liczba zelektryfikowanych szlaków dwutorowych: ' + station.routes.twoWay.catenary"
|
||||
>{{station.routes.twoWay.catenary}}</span>
|
||||
|
||||
<span
|
||||
v-if="station.routes && station.routes.twoWay.noCatenary > 0"
|
||||
class="track no-catenary"
|
||||
:title="'Liczba niezelektryfikowanych szlaków dwutorowych: ' + station.routes.twoWay.noCatenary"
|
||||
>{{station.routes.twoWay.noCatenary}}</span>
|
||||
|
||||
<span class="separator"></span>
|
||||
|
||||
<span
|
||||
v-if="station.routes && station.routes.oneWay.catenary > 0"
|
||||
class="track catenary"
|
||||
:title="'Liczba zelektryfikowanych szlaków jednotorowych: ' + station.routes.oneWay.catenary"
|
||||
>{{station.routes.oneWay.catenary}}</span>
|
||||
|
||||
<span
|
||||
v-if="station.routes && station.routes.oneWay.noCatenary > 0"
|
||||
class="track no-catenary"
|
||||
:title="'Liczba niezelektryfikowanych szlaków jednotorowych: ' + station.routes.oneWay.noCatenary"
|
||||
>{{station.routes.oneWay.noCatenary}}</span>
|
||||
</td>
|
||||
|
||||
<td class="active-timetables">
|
||||
<transition name="change-anim" mode="out-in">
|
||||
<span :key="station.scheduledTrains.length">
|
||||
<span v-if="station.scheduledTrains">
|
||||
<span style="color:#eee">{{ station.scheduledTrains.length}}</span>
|
||||
/
|
||||
<span
|
||||
style="color:#bbb"
|
||||
>{{ station.scheduledTrains.filter(train => train.confirmed).length }}</span>
|
||||
</span>
|
||||
|
||||
<span v-else>...</span>
|
||||
</span>
|
||||
</transition>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="no-stations" v-else>Ups! Brak stacji do wyświetlenia!</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@@ -164,13 +159,12 @@ const descSVG = require("@/assets/icon-arrow-desc.svg");
|
||||
})
|
||||
export default class StationTable extends styleMixin {
|
||||
@Prop() readonly stations!: Station[];
|
||||
@Prop() readonly setFocusedStation!: () => void;
|
||||
@Prop() readonly sorterActive!: number;
|
||||
|
||||
@Getter("trainsDataList") trains!: Train[];
|
||||
@Getter("trainsDataState") trainsDataState!: number;
|
||||
@Prop() readonly setFocusedStation!: () => void;
|
||||
@Prop() readonly changeSorter!: () => void;
|
||||
|
||||
icons: { ascSVG; descSVG } = { ascSVG, descSVG };
|
||||
sorterActive: { index: number; dir: number } = { index: 0, dir: 1 };
|
||||
|
||||
headTitles: string[][] = [
|
||||
["Stacja"],
|
||||
@@ -183,108 +177,6 @@ export default class StationTable extends styleMixin {
|
||||
["Szlaki", "2tor | 1tor"],
|
||||
["Aktywne RJ"],
|
||||
];
|
||||
|
||||
changeSorter(index: number) {
|
||||
if (index > 5) return;
|
||||
|
||||
if (index == this.sorterActive.index)
|
||||
this.sorterActive.dir = -1 * this.sorterActive.dir;
|
||||
else this.sorterActive.dir = 1;
|
||||
|
||||
this.sorterActive.index = index;
|
||||
}
|
||||
|
||||
getScheduledTrains(stationName: string) {
|
||||
if (this.trainsDataState != 2) return null;
|
||||
// console.log(
|
||||
// this.computedStations.find((s) => s.stationName === stationName)
|
||||
// ?.scheduledTrains
|
||||
// );
|
||||
}
|
||||
|
||||
get scheduledTrains() {
|
||||
const reducedList = this.stations.reduce((acc, station) => {
|
||||
if (!acc[station.stationName]) acc[station.stationName] = [];
|
||||
|
||||
this.trains
|
||||
.filter((train) => !train.noTimetable)
|
||||
.forEach((train) => {
|
||||
const found = train.stopPoints!.find(
|
||||
(sp) =>
|
||||
(station.stationName
|
||||
.toLowerCase()
|
||||
.includes(sp.pointNameRAW.toLowerCase()) ||
|
||||
station.stationName
|
||||
.toLowerCase()
|
||||
.includes(sp.pointNameRAW.toLowerCase().split(",")[0]) ||
|
||||
station.stationName
|
||||
.toLowerCase()
|
||||
.includes(sp.pointNameRAW.toLowerCase().split(" ")[0])) &&
|
||||
!acc[station.stationName].find((t) => t.trainNo === train.trainNo)
|
||||
);
|
||||
|
||||
if (!found) return acc;
|
||||
|
||||
acc[station.stationName].push({
|
||||
trainNo: train.trainNo,
|
||||
driverName: train.driverName,
|
||||
category: train.category,
|
||||
...found,
|
||||
});
|
||||
});
|
||||
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
return reducedList;
|
||||
}
|
||||
|
||||
get computedStations() {
|
||||
const dir: number = this.sorterActive.dir;
|
||||
const scheduledTrainList = this.scheduledTrains;
|
||||
|
||||
return this.stations
|
||||
.sort((a, b) => {
|
||||
switch (this.sorterActive.index) {
|
||||
case 1:
|
||||
if (parseInt(a.reqLevel) > parseInt(b.reqLevel)) return dir;
|
||||
if (parseInt(a.reqLevel) < parseInt(b.reqLevel)) return -dir;
|
||||
break;
|
||||
|
||||
case 2:
|
||||
if (a.statusTimestamp > b.statusTimestamp) return dir;
|
||||
if (a.statusTimestamp < b.statusTimestamp) return -dir;
|
||||
break;
|
||||
|
||||
case 3:
|
||||
if (a.dispatcherName > b.dispatcherName) return dir;
|
||||
if (a.dispatcherName < b.dispatcherName) return -dir;
|
||||
break;
|
||||
|
||||
case 4:
|
||||
if (a.dispatcherExp > b.dispatcherExp) return dir;
|
||||
if (a.dispatcherExp < b.dispatcherExp) return -dir;
|
||||
break;
|
||||
|
||||
case 5:
|
||||
if (a.currentUsers > b.currentUsers) return dir;
|
||||
if (a.currentUsers < b.currentUsers) return -dir;
|
||||
if (a.maxUsers > b.maxUsers) return dir;
|
||||
if (a.maxUsers < b.maxUsers) return -dir;
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
if (a.stationName >= b.stationName) return dir;
|
||||
return -dir;
|
||||
})
|
||||
.map((station) => ({
|
||||
...station,
|
||||
scheduledTrains: scheduledTrainList[station.stationName],
|
||||
}));
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -306,7 +198,9 @@ export default class StationTable extends styleMixin {
|
||||
}
|
||||
|
||||
.station-table {
|
||||
font-size: calc(0.6rem + 0.3vw);
|
||||
font-size: calc(0.5rem + 0.3vw);
|
||||
overflow: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.separator {
|
||||
@@ -324,10 +218,6 @@ export default class StationTable extends styleMixin {
|
||||
}
|
||||
|
||||
.table {
|
||||
&-wrapper {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
white-space: nowrap;
|
||||
border-collapse: collapse;
|
||||
|
||||
@@ -335,15 +225,16 @@ export default class StationTable extends styleMixin {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
|
||||
thead th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&-head th {
|
||||
padding: 0.3rem;
|
||||
background-color: #444;
|
||||
min-width: 120px;
|
||||
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
|
||||
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<div class="train-search">
|
||||
<span class="search train">
|
||||
<div class="search-title title">Szukaj składu</div>
|
||||
<div class="search-box">
|
||||
<input class="search-input" v-model="searchedTrain" />
|
||||
<img class="search-exit" :src="exitIcon" alt="exit-icon" @click="() => searchedTrain = ''" />
|
||||
</div>
|
||||
</span>
|
||||
|
||||
<span class="search driver">
|
||||
<div class="search-title title">Szukaj maszynisty</div>
|
||||
<div class="search-box">
|
||||
<input class="search-input" v-model="searchedDriver" />
|
||||
<img class="search-exit" :src="exitIcon" alt="exit-icon" @click="() => searchedDriver = ''" />
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue, Watch } from "vue-property-decorator";
|
||||
|
||||
@Component
|
||||
export default class extends Vue {
|
||||
exitIcon = require("@/assets/icon-exit.svg");
|
||||
searchedTrain = "";
|
||||
searchedDriver = "";
|
||||
|
||||
@Watch("searchedTrain")
|
||||
onSearchedTrainChanged(val: string, oldVal: string) {
|
||||
this.$emit("changeSearchedTrain", val);
|
||||
}
|
||||
|
||||
@Watch("searchedDriver")
|
||||
onSearchedDriverChanged(val: string, oldVal: string) {
|
||||
this.$emit("changeSearchedDriver", val);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../styles/responsive.scss";
|
||||
|
||||
.train-search {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.search {
|
||||
padding-right: 1rem;
|
||||
|
||||
&-box {
|
||||
position: relative;
|
||||
|
||||
background: #333;
|
||||
border-radius: 0.5em;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
&-input {
|
||||
border: none;
|
||||
|
||||
padding: 0.5rem 1rem;
|
||||
margin: 0;
|
||||
|
||||
font-size: 1em;
|
||||
|
||||
min-width: 85%;
|
||||
}
|
||||
|
||||
&-exit {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
|
||||
top: 50%;
|
||||
right: 10px;
|
||||
transform: translateY(-50%);
|
||||
|
||||
width: 1em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -3,9 +3,9 @@
|
||||
<div class="no-trains" v-if="computedTrains.length == 0">Ups! Brak pociągów do wyświetlenia :/</div>
|
||||
|
||||
<ul class="list">
|
||||
<li class="item" v-for="train in computedTrains" :key="train.timetableId">
|
||||
<a :href="'https://rj.td2.info.pl/train#' + train.trainNo + ';eu'" target="_blank">
|
||||
<span class="info">
|
||||
<li class="item" v-for="(train, i) in computedTrains" :key="i">
|
||||
<span class="info">
|
||||
<div class="info-top">
|
||||
<div class="info-category">
|
||||
<span>
|
||||
<strong>{{ train.category }}</strong>
|
||||
@@ -20,24 +20,37 @@
|
||||
</div>
|
||||
|
||||
<div class="info-route">
|
||||
<strong>
|
||||
{{
|
||||
train.route && train.route.replace("|", " - ")
|
||||
}}
|
||||
</strong>
|
||||
<a :href="'https://rj.td2.info.pl/train#' + train.trainNo + ';eu'" target="_blank">
|
||||
<strong>
|
||||
{{
|
||||
train.route && train.route.replace("|", " - ")
|
||||
}}
|
||||
</strong>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="info-stations">
|
||||
<i
|
||||
v-if="train.sceneries.length > 2"
|
||||
>Przez: {{ mapTimetableSceneries(train.sceneries) }}</i>
|
||||
<span v-if="train.sceneries.length > 2">
|
||||
Przez:
|
||||
<span v-html="mapTimetableSceneries(train.sceneries)"></span>
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="info-bottom">
|
||||
<span
|
||||
class="info-online"
|
||||
:class="{'online': train.online}"
|
||||
>{{train.online ? "ONLINE" : "OFFLINE"}}</span>
|
||||
</div>
|
||||
</span>
|
||||
|
||||
<span class="driver">
|
||||
<span class="driver-name">
|
||||
{{ train.driverName }}
|
||||
<a
|
||||
:href="'https://td2.info.pl/profile/?u=' + train.driverId"
|
||||
target="_blank"
|
||||
>{{ train.driverName }}</a>
|
||||
<span style="color: #bbb; margin-left: 1em;">
|
||||
{{
|
||||
train.locoType
|
||||
@@ -51,41 +64,47 @@
|
||||
|
||||
<span class="stats">
|
||||
<div class="stats-general">
|
||||
<span class="mass">
|
||||
<span class="stat mass">
|
||||
<img :src="massIcon" alt="icon-mass" />
|
||||
{{ train.mass / 1000 }}t
|
||||
</span>
|
||||
|
||||
<span class="speed">
|
||||
<span class="stat speed">
|
||||
<img :src="speedIcon" alt="icon-speed" />
|
||||
{{ train.speed }} km/h
|
||||
</span>
|
||||
|
||||
<span class="length">
|
||||
<span class="stat length">
|
||||
<img :src="lengthIcon" alt="icon-length" />
|
||||
{{ train.length }}m
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="stats-position">
|
||||
<span class="station">
|
||||
<p>
|
||||
<strong>SCENERIA</strong>
|
||||
</p>
|
||||
{{ train.currentStationName }}
|
||||
<span class="stat station">
|
||||
<div class="stat-icon">
|
||||
<img :src="sceneryIcon" alt="icon-scenery" />
|
||||
</div>
|
||||
{{ train.currentStationName || "---" }}
|
||||
</span>
|
||||
<span class="track">
|
||||
<p>
|
||||
<strong>SZLAK</strong>
|
||||
</p>
|
||||
<span class="stat track">
|
||||
<div class="stat-icon">
|
||||
<img :src="routeIcon" alt="icon-scenery" />
|
||||
</div>
|
||||
{{ train.connectedTrack || "---" }}
|
||||
</span>
|
||||
<span class="signal">
|
||||
<p>
|
||||
<strong>SEMAFOR</strong>
|
||||
</p>
|
||||
<span class="stat signal">
|
||||
<div class="stat-icon">
|
||||
<img :src="signalIcon" alt="icon-scenery" />
|
||||
</div>
|
||||
{{ train.signal || "---" }}
|
||||
</span>
|
||||
<span class="stat distance">
|
||||
<div class="stat-icon">
|
||||
<img :src="distanceIcon" alt="icon-scenery" />
|
||||
</div>
|
||||
{{ train.distance || "0" }}m
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</li>
|
||||
@@ -112,6 +131,11 @@ export default class TrainTable extends Vue {
|
||||
massIcon: string = require("@/assets/icon-mass.svg");
|
||||
lengthIcon: string = require("@/assets/icon-length.svg");
|
||||
|
||||
distanceIcon: string = require("@/assets/icon-distance.svg");
|
||||
sceneryIcon: string = require("@/assets/icon-scenery.svg");
|
||||
signalIcon: string = require("@/assets/icon-signal.svg");
|
||||
routeIcon: string = require("@/assets/icon-route.svg");
|
||||
|
||||
onImageError(e: Event) {
|
||||
(e.target as HTMLImageElement).src = unknownTrainImage;
|
||||
}
|
||||
@@ -166,7 +190,7 @@ export default class TrainTable extends Vue {
|
||||
|
||||
@include smallScreen() {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: repeat(3, 1fr);
|
||||
grid-template-rows: repeat(3, minmax(100px, 1fr));
|
||||
|
||||
font-size: 0.8rem;
|
||||
gap: 0.4em 0;
|
||||
@@ -176,7 +200,8 @@ export default class TrainTable extends Vue {
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
&-category {
|
||||
flex-grow: 2;
|
||||
@@ -192,6 +217,19 @@ export default class TrainTable extends Vue {
|
||||
margin-top: 0.35em;
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
&-online {
|
||||
background-color: #ce0000;
|
||||
|
||||
padding: 0.2em 0.7em;
|
||||
font-size: 0.85em;
|
||||
|
||||
border-radius: 1em;
|
||||
|
||||
&.online {
|
||||
background-color: #009700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.driver {
|
||||
@@ -225,23 +263,21 @@ export default class TrainTable extends Vue {
|
||||
}
|
||||
|
||||
.stats {
|
||||
width: 100%;
|
||||
|
||||
&-general {
|
||||
display: flex;
|
||||
margin-bottom: 1.5em;
|
||||
|
||||
span {
|
||||
& > .stat {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
width: 100%;
|
||||
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
img {
|
||||
margin: 0 0.3em;
|
||||
width: 1.8em;
|
||||
width: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -251,14 +287,19 @@ export default class TrainTable extends Vue {
|
||||
margin-top: 1em;
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
width: 100%;
|
||||
font-size: 300;
|
||||
}
|
||||
font-size: 0.9em;
|
||||
|
||||
p {
|
||||
color: #00cff3;
|
||||
}
|
||||
|
||||
& > .stat {
|
||||
width: 100%;
|
||||
|
||||
img {
|
||||
width: 2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -285,4 +326,10 @@ export default class TrainTable extends Vue {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include smallScreen() {
|
||||
.info-bottom {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -19,6 +19,7 @@ export default interface Train {
|
||||
locoURL: string;
|
||||
locoType: string;
|
||||
routeDistance: number;
|
||||
online: boolean;
|
||||
stopPoints: {
|
||||
arrivalTime: string;
|
||||
arrivalDelay: number;
|
||||
|
||||
@@ -31,6 +31,7 @@ interface TimetableResponseData {
|
||||
pointDistance: number;
|
||||
pointNameRAW: string;
|
||||
pointName: string;
|
||||
pointStopType: string;
|
||||
}[];
|
||||
trainInfo: {
|
||||
timetableId: number;
|
||||
@@ -106,9 +107,19 @@ export default class TrainsModule extends VuexModule {
|
||||
|
||||
const stopPoints = timetableResponseData?.stopPoints.reduce(
|
||||
(acc, point) => {
|
||||
if (point.pointName.includes("strong")) {
|
||||
acc.push(point.pointNameRAW);
|
||||
}
|
||||
if (point.pointName.includes("strong"))
|
||||
acc.push(
|
||||
point.pointStopType.includes("ph")
|
||||
? `<strong>${point.pointNameRAW}</strong>`
|
||||
: `<span style='color: #ccc;'>${point.pointNameRAW}</span>`
|
||||
);
|
||||
|
||||
if (point.pointName.includes("podg."))
|
||||
acc.push(
|
||||
`<span style='color: #ccc;'>${
|
||||
point.pointNameRAW.split(",")[0]
|
||||
}</span>`
|
||||
);
|
||||
|
||||
return acc;
|
||||
},
|
||||
@@ -116,6 +127,7 @@ export default class TrainsModule extends VuexModule {
|
||||
);
|
||||
|
||||
return {
|
||||
online: train.isOnline,
|
||||
driverId: train.driverId,
|
||||
driverName: train.driverName,
|
||||
trainNo: train.trainNo,
|
||||
|
||||
@@ -23,7 +23,7 @@ html {
|
||||
body {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
font-family: "Lato", sans-serif;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
|
||||
overflow-x: hidden;
|
||||
}
|
||||
@@ -31,7 +31,7 @@ body {
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
font-family: "Lato", sans-serif;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
}
|
||||
|
||||
input {
|
||||
@@ -208,4 +208,4 @@ ul {
|
||||
&-column {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
+107
-1
@@ -10,7 +10,12 @@
|
||||
<div class="stations-wrapper" v-if="connectionState == 2">
|
||||
<div class="stations-body">
|
||||
<Options />
|
||||
<StationTable :stations="stations" :setFocusedStation="setFocusedStation" />
|
||||
<StationTable
|
||||
:stations="computedStations"
|
||||
:sorterActive="sorterActive"
|
||||
:setFocusedStation="setFocusedStation"
|
||||
:changeSorter="changeSorter"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -55,8 +60,108 @@ export default class StationsView extends Vue {
|
||||
@Getter("getStationList") stations!: Station[];
|
||||
@Getter("getConnectionState") connectionState!: ConnState;
|
||||
|
||||
@Getter("trainsDataList") trains!: Train[];
|
||||
@Getter("trainsDataState") trainsDataState!: number;
|
||||
|
||||
@Action("setFilter") setFilter;
|
||||
|
||||
sorterActive: { index: number; dir: number } = { index: 0, dir: 1 };
|
||||
|
||||
changeSorter(index: number) {
|
||||
if (index > 5) return;
|
||||
|
||||
if (index == this.sorterActive.index)
|
||||
this.sorterActive.dir = -1 * this.sorterActive.dir;
|
||||
else this.sorterActive.dir = 1;
|
||||
|
||||
this.sorterActive.index = index;
|
||||
}
|
||||
|
||||
get scheduledTrains() {
|
||||
const reducedList = this.stations.reduce((acc, station) => {
|
||||
if (!acc[station.stationName]) acc[station.stationName] = [];
|
||||
|
||||
this.trains
|
||||
.filter((train) => !train.noTimetable)
|
||||
.forEach((train) => {
|
||||
const found = train.stopPoints!.find(
|
||||
(sp) =>
|
||||
(station.stationName
|
||||
.toLowerCase()
|
||||
.includes(sp.pointNameRAW.toLowerCase()) ||
|
||||
station.stationName
|
||||
.toLowerCase()
|
||||
.includes(sp.pointNameRAW.toLowerCase().split(",")[0]) ||
|
||||
(station.stationName
|
||||
.toLowerCase()
|
||||
.includes(sp.pointNameRAW.toLowerCase().split(" ")[0]) &&
|
||||
station.stationName.toLowerCase().includes("lcs"))) &&
|
||||
!acc[station.stationName].find((t) => t.trainNo === train.trainNo)
|
||||
);
|
||||
|
||||
if (!found) return acc;
|
||||
|
||||
acc[station.stationName].push({
|
||||
trainNo: train.trainNo,
|
||||
driverName: train.driverName,
|
||||
category: train.category,
|
||||
...found,
|
||||
});
|
||||
});
|
||||
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
return reducedList;
|
||||
}
|
||||
|
||||
get computedStations() {
|
||||
const dir: number = this.sorterActive.dir;
|
||||
const scheduledTrainList = this.scheduledTrains;
|
||||
|
||||
return this.stations
|
||||
.sort((a, b) => {
|
||||
switch (this.sorterActive.index) {
|
||||
case 1:
|
||||
if (parseInt(a.reqLevel) > parseInt(b.reqLevel)) return dir;
|
||||
if (parseInt(a.reqLevel) < parseInt(b.reqLevel)) return -dir;
|
||||
break;
|
||||
|
||||
case 2:
|
||||
if (a.statusTimestamp > b.statusTimestamp) return dir;
|
||||
if (a.statusTimestamp < b.statusTimestamp) return -dir;
|
||||
break;
|
||||
|
||||
case 3:
|
||||
if (a.dispatcherName > b.dispatcherName) return dir;
|
||||
if (a.dispatcherName < b.dispatcherName) return -dir;
|
||||
break;
|
||||
|
||||
case 4:
|
||||
if (a.dispatcherExp > b.dispatcherExp) return dir;
|
||||
if (a.dispatcherExp < b.dispatcherExp) return -dir;
|
||||
break;
|
||||
|
||||
case 5:
|
||||
if (a.currentUsers > b.currentUsers) return dir;
|
||||
if (a.currentUsers < b.currentUsers) return -dir;
|
||||
if (a.maxUsers > b.maxUsers) return dir;
|
||||
if (a.maxUsers < b.maxUsers) return -dir;
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
if (a.stationName >= b.stationName) return dir;
|
||||
return -dir;
|
||||
})
|
||||
.map((station) => ({
|
||||
...station,
|
||||
scheduledTrains: scheduledTrainList[station.stationName],
|
||||
}));
|
||||
}
|
||||
|
||||
mounted() {
|
||||
const storage = window.localStorage;
|
||||
|
||||
@@ -139,6 +244,7 @@ export default class StationsView extends Vue {
|
||||
}
|
||||
|
||||
.stations-body {
|
||||
margin: 0 auto;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
+17
-63
@@ -5,35 +5,13 @@
|
||||
<div class="body-wrapper" v-else>
|
||||
<div class="options-wrapper">
|
||||
<TrainSorter :trainList="computedTrains" @changeSorter="changeSorter" />
|
||||
<div class="search train">
|
||||
<div class="search-title title">Szukaj składu</div>
|
||||
<div class="search-box">
|
||||
<input class="search-input" v-model="searchedTrain" />
|
||||
<img
|
||||
class="search-exit"
|
||||
:src="exitIcon"
|
||||
alt="exit-icon"
|
||||
@click="() => searchedTrain = ''"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="search driver">
|
||||
<div class="search-title title">Szukaj maszynisty</div>
|
||||
<div class="search-box">
|
||||
<input class="search-input" v-model="searchedDriver" />
|
||||
<img
|
||||
class="search-exit"
|
||||
:src="exitIcon"
|
||||
alt="exit-icon"
|
||||
@click="() => searchedDriver = ''"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<TrainSearch
|
||||
@changeSearchedTrain="changeSearchedTrain"
|
||||
@changeSearchedDriver="changeSearchedDriver"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<TrainStats :trains="trains" />
|
||||
|
||||
<TrainTable :computedTrains="computedTrains" />
|
||||
</div>
|
||||
</section>
|
||||
@@ -50,6 +28,7 @@ import Train from "@/scripts/interfaces/Train";
|
||||
import Loading from "@/components/App/Loading.vue";
|
||||
|
||||
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";
|
||||
|
||||
@@ -61,11 +40,10 @@ import axios from "axios";
|
||||
TrainSorter,
|
||||
TrainTable,
|
||||
TrainStats,
|
||||
TrainSearch,
|
||||
},
|
||||
})
|
||||
export default class TrainsView extends Vue {
|
||||
exitIcon = require("@/assets/icon-exit.svg");
|
||||
|
||||
@Getter("trainsDataList") trains!: Train[];
|
||||
|
||||
@Getter("trainsDataState") connectionState;
|
||||
@@ -76,6 +54,14 @@ export default class TrainsView extends Vue {
|
||||
searchedTrain: string = "";
|
||||
searchedDriver: string = "";
|
||||
|
||||
changeSearchedTrain(trainNo: string) {
|
||||
this.searchedTrain = trainNo;
|
||||
}
|
||||
|
||||
changeSearchedDriver(name: string) {
|
||||
this.searchedDriver = name;
|
||||
}
|
||||
|
||||
changeSorter(sorter: { id: string; dir: number }) {
|
||||
this.sorterActive = sorter;
|
||||
}
|
||||
@@ -141,11 +127,11 @@ export default class TrainsView extends Vue {
|
||||
|
||||
.body-wrapper {
|
||||
margin: 1rem auto;
|
||||
max-width: 1250px;
|
||||
max-width: 1200px;
|
||||
|
||||
padding: 0 0.5rem;
|
||||
|
||||
font-size: calc(0.4rem + 0.5vw);
|
||||
font-size: calc(0.3rem + 0.4vw);
|
||||
}
|
||||
|
||||
.options-wrapper {
|
||||
@@ -155,43 +141,11 @@ export default class TrainsView extends Vue {
|
||||
& > div {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.search {
|
||||
&-box {
|
||||
position: relative;
|
||||
|
||||
background: #333;
|
||||
border-radius: 0.5em;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
&-input {
|
||||
border: none;
|
||||
|
||||
padding: 0.5rem 1rem;
|
||||
margin: 0;
|
||||
|
||||
font-size: 1em;
|
||||
|
||||
min-width: 85%;
|
||||
}
|
||||
|
||||
&-exit {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
|
||||
top: 50%;
|
||||
right: 10px;
|
||||
transform: translateY(-50%);
|
||||
|
||||
width: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include bigScreen() {
|
||||
.body-wrapper {
|
||||
font-size: 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user