Zamiana karty stacji na zakładkę stacji [W.I.P.]

This commit is contained in:
2020-11-12 23:04:18 +01:00
parent e00c58f509
commit 857de63f27
13 changed files with 816 additions and 102 deletions
+14 -20
View File
@@ -7,19 +7,17 @@
alt="schedule-icon"
@click="() => (cardMode = cardMode == 0 ? 1 : 0)"
/>
<img
:src="require('@/assets/icon-exit.svg')"
alt="exit-icon"
@click="exit"
/>
<img :src="require('@/assets/icon-exit.svg')" alt="exit-icon" @click="exit" />
</div>
<div class="card-content" :class="{ offline: !stationInfo.online }">
<div class="main">
<div class="main-content">
<span class="main-level flex" v-if="stationInfo.reqLevel > -1">{{
<span class="main-level flex" v-if="stationInfo.reqLevel > -1">
{{
2 > parseInt(stationInfo.reqLevel) ? "L" : stationInfo.reqLevel
}}</span>
}}
</span>
<span class="main-general">
<div class="main-name">
<a
@@ -27,8 +25,7 @@
:href="stationInfo.stationURL"
target="_blank"
rel="noopener noreferrer"
>{{ stationInfo.stationName }}</a
>
>{{ stationInfo.stationName }}</a>
<span v-else>{{ stationInfo.stationName }}</span>
</div>
@@ -90,9 +87,7 @@
stationInfo.dispatcherIsSupporter
)
"
>
{{ stationInfo.online ? computedDispatcherExp : "" }}
</div>
>{{ stationInfo.online ? computedDispatcherExp : "" }}</div>
<div class="dispatcher-info">
<div class="dispatcher-name">
<a
@@ -101,8 +96,7 @@
"
target="_blank"
rel="noopener noreferrer"
>{{ stationInfo.dispatcherName || "---" }}</a
>
>{{ stationInfo.dispatcherName || "---" }}</a>
</div>
<div class="dispatcher-rate">
@@ -114,9 +108,11 @@
<div class="hours">
<div class="hours-title title">STATUS</div>
<span class="status" :class="statusClasses(stationInfo.occupiedTo)">{{
<span class="status" :class="statusClasses(stationInfo.occupiedTo)">
{{
stationInfo.occupiedTo
}}</span>
}}
</span>
</div>
<div class="spawns flex flex-column">
@@ -126,8 +122,7 @@
class="spawn"
v-for="(spawn, i) in stationInfo.spawnString"
:key="spawn + stationInfo.dispatcherName + i"
>{{ spawn }}</span
>
>{{ spawn }}</span>
<span class="spawn" v-if="!stationInfo.spawnString">BRAK</span>
</div>
@@ -160,8 +155,7 @@
!stationInfo.stationTrains ||
stationInfo.stationTrains.length == 0
"
>BRAK</span
>
>BRAK</span>
</div>
</div>
</div>
+43 -55
View File
@@ -4,11 +4,7 @@
<table class="table">
<thead class="table-head">
<tr>
<th
v-for="(head, i) in headTitles"
:key="i"
@click="() => changeSorter(i)"
>
<th v-for="(head, i) in headTitles" :key="i" @click="() => changeSorter(i)">
<span>
<div>
<div>{{ head[0] }}</div>
@@ -30,11 +26,7 @@
class="table-item"
v-for="(station, i) in stations"
:key="i + station.stationHash"
@click="
() => {
setFocusedStation(station.stationName);
}
"
@click="setScenery(station.stationHash)"
>
<td
class="item-station-name"
@@ -43,49 +35,43 @@
online: station.online,
'station-unavailable': station.unavailable,
}"
>
{{ station.stationName }}
</td>
>{{ 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-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)">{{
<span class="status" :class="statusClasses(station.occupiedTo)">
{{
station.occupiedTo
}}</span>
}}
</span>
</td>
<td class="item-dispatcher-name">
{{ station.online ? station.dispatcherName : "" }}
</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
>
<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
: ""
station.online
? station.currentUsers + "/" + station.maxUsers
: ""
}}
</td>
<td class="item-info">
@@ -130,8 +116,7 @@
'Liczba zelektryfikowanych szlaków dwutorowych: ' +
station.routes.twoWay.catenary
"
>{{ station.routes.twoWay.catenary }}</span
>
>{{ station.routes.twoWay.catenary }}</span>
<span
v-if="station.routes && station.routes.twoWay.noCatenary > 0"
@@ -140,8 +125,7 @@
'Liczba niezelektryfikowanych szlaków dwutorowych: ' +
station.routes.twoWay.noCatenary
"
>{{ station.routes.twoWay.noCatenary }}</span
>
>{{ station.routes.twoWay.noCatenary }}</span>
<span class="separator"></span>
@@ -152,8 +136,7 @@
'Liczba zelektryfikowanych szlaków jednotorowych: ' +
station.routes.oneWay.catenary
"
>{{ station.routes.oneWay.catenary }}</span
>
>{{ station.routes.oneWay.catenary }}</span>
<span
v-if="station.routes && station.routes.oneWay.noCatenary > 0"
@@ -162,23 +145,26 @@
'Liczba niezelektryfikowanych szlaków jednotorowych: ' +
station.routes.oneWay.noCatenary
"
>{{ station.routes.oneWay.noCatenary }}</span
>
>{{ 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">{{
<span style="color: #eee">
{{
station.scheduledTrains.length
}}</span>
}}
</span>
/
<span style="color: #bbb">{{
<span style="color: #bbb">
{{
station.scheduledTrains.filter(
(train) => train.stopInfo.confirmed
(train) => train.stopInfo.confirmed
).length
}}</span>
}}
</span>
</span>
<span v-else>...</span>
@@ -188,9 +174,7 @@
</tr>
</table>
</div>
<div class="no-stations" v-if="stations.length == 0">
Ups! Brak stacji do wyświetlenia!
</div>
<div class="no-stations" v-if="stations.length == 0">Ups! Brak stacji do wyświetlenia!</div>
</section>
</template>
@@ -217,6 +201,10 @@ export default class StationTable extends styleMixin {
@Prop() readonly setFocusedStation!: () => void;
@Prop() readonly changeSorter!: () => void;
setScenery(sceneryHash: string) {
this.$router.push({ name: "SceneryView", query: { hash: sceneryHash } })
}
icons: { ascSVG; descSVG } = { ascSVG, descSVG };
headTitles: string[][] = [