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

Lekkie zmiany w wyglądzie strony

Browse Source
This commit is contained in:
Spythere
2020-11-03 22:34:22 +01:00
parent 853dc8e7cf
commit fe3a15c452
11 changed files with 606 additions and 462 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/StationsView/StationCard.vue
+49 -27
View File
@@ -5,18 +5,21 @@
class="schedule-icon"
:src="require('@/assets/icon-clock.svg')"
alt="schedule-icon"
@click="() => cardMode = cardMode == 0 ? 1 : 0"
@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="card-content" :class="{ offline: !stationInfo.online }">
<div class="main">
<div class="main-content">
<span
class="main-level flex"
v-if="stationInfo.reqLevel > -1"
>{{ 2 > parseInt(stationInfo.reqLevel) ? "L" : stationInfo.reqLevel}}</span>
<span class="main-level flex" v-if="stationInfo.reqLevel > -1">{{
2 > parseInt(stationInfo.reqLevel) ? "L" : stationInfo.reqLevel
}}</span>
<span class="main-general">
<div class="main-name">
<a
@@ -24,11 +27,12 @@
:href="stationInfo.stationURL"
target="_blank"
rel="noopener noreferrer"
>{{stationInfo.stationName}}</a>
>{{ stationInfo.stationName }}</a
>
<span v-else>{{stationInfo.stationName}}</span>
<span v-else>{{ stationInfo.stationName }}</span>
</div>
<div class="main-hash">{{stationInfo.stationHash}}</div>
<div class="main-hash">{{ stationInfo.stationHash }}</div>
</span>
</div>
</div>
@@ -80,30 +84,39 @@
<div class="dispatcher">
<div
class="dispatcher-level flex"
:style="calculateExpStyle(stationInfo.dispatcherExp, stationInfo.dispatcherIsSupporter)"
>{{stationInfo.online ? computedDispatcherExp : ""}}</div>
:style="
calculateExpStyle(
stationInfo.dispatcherExp,
stationInfo.dispatcherIsSupporter
)
"
>
{{ stationInfo.online ? computedDispatcherExp : "" }}
</div>
<div class="dispatcher-info">
<div class="dispatcher-name">
<a
:href="'https://td2.info.pl/profile/?u=' + stationInfo.dispatcherId"
:href="
'https://td2.info.pl/profile/?u=' + stationInfo.dispatcherId
"
target="_blank"
rel="noopener noreferrer"
>{{stationInfo.dispatcherName || "---"}}</a>
>{{ stationInfo.dispatcherName || "---" }}</a
>
</div>
<div class="dispatcher-rate">
<img :src="require(`@/assets/icon-like.svg`)" alt="like-icon" />
<span>{{stationInfo.dispatcherRate}}</span>
<span>{{ stationInfo.dispatcherRate }}</span>
</div>
</div>
</div>
<div class="hours">
<div class="hours-title title">STATUS</div>
<span
class="status"
:class="statusClasses(stationInfo.occupiedTo)"
>{{stationInfo.occupiedTo}}</span>
<span class="status" :class="statusClasses(stationInfo.occupiedTo)">{{
stationInfo.occupiedTo
}}</span>
</div>
<div class="spawns flex flex-column">
@@ -113,7 +126,8 @@
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>
@@ -129,24 +143,31 @@
:key="train.trainNo + train.driverName"
>
<router-link
:to="{ name: 'TrainsView', params: { passedSearchedTrain: train.trainNo.toString()}}"
:to="{
name: 'TrainsView',
params: { passedSearchedTrain: train.trainNo.toString() },
}"
>
<span>{{train.trainNo}}</span>
<span>{{ train.trainNo }}</span>
|
<span>{{train.driverName}}</span>
<span>{{ train.driverName }}</span>
</router-link>
</div>
<span
class="user borderless"
v-if="!stationInfo.stationTrains || stationInfo.stationTrains.length == 0"
>BRAK</span>
v-if="
!stationInfo.stationTrains ||
stationInfo.stationTrains.length == 0
"
>BRAK</span
>
</div>
</div>
</div>
<StationTimetable
:class="{show: cardMode == 1}"
:class="{ show: cardMode == 1 }"
:scheduledTrains="computedScheduledTrains"
:stationName="stationInfo.stationName"
/>
@@ -213,9 +234,10 @@ export default class StationCard extends styleMixin {
}
</script>
<style lang="scss">
<style lang="scss" scoped>
@import "../../styles/variables.scss";
@import "../../styles/responsive.scss";
.title {
color: $accentCol;
font-weight: 600;
src/components/StationsView/StationTable.vue
+88 -32
View File
@@ -4,11 +4,15 @@
<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>
<div v-if="head.length > 1">{{head[1]}}</div>
<div>{{ head[0] }}</div>
<div v-if="head.length > 1">{{ head[1] }}</div>
</div>
<img
@@ -26,36 +30,64 @@
class="table-item"
v-for="(station, i) in stations"
:key="i + station.stationHash"
@click="() => { setFocusedStation(station.stationName) }"
@click="
() => {
setFocusedStation(station.stationName);
}
"
>
<td
class="item-station-name"
:class="{'default-station': station.default, 'online': station.online, 'station-unavailable': station.unavailable}"
>{{station.stationName}}</td>
:class="{
'default-station': station.default,
online: station.online,
'station-unavailable': station.unavailable,
}"
>
{{ 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>
>{{
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>
<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-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>
>{{
2 > station.dispatcherExp ? "L" : station.dispatcherExp
}}</span
>
</td>
<td class="item-users">
{{
station.online
? station.currentUsers + "/" + station.maxUsers
: ""
}}
</td>
<td
class="item-users"
>{{station.online ? (station.currentUsers + "/" + station.maxUsers) : ""}}</td>
<td class="item-info">
<img
class="icon-info"
@@ -94,39 +126,59 @@
<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>
: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>
: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>
: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>
: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: #eee">{{
station.scheduledTrains.length
}}</span>
/
<span
style="color:#bbb"
>{{ station.scheduledTrains.filter(train => train.stopInfo.confirmed).length }}</span>
<span style="color: #bbb">{{
station.scheduledTrains.filter(
(train) => train.stopInfo.confirmed
).length
}}</span>
</span>
<span v-else>...</span>
@@ -136,7 +188,9 @@
</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>
@@ -182,7 +236,8 @@ export default class StationTable extends styleMixin {
<style lang="scss" scoped>
@import "../../styles/responsive.scss";
@import "../../styles/variables.scss";
@import "../../styles/global.scss";
$rowCol: #4b4b4b;
.change-anim {
&-enter-active,
@@ -197,7 +252,7 @@ export default class StationTable extends styleMixin {
}
.station-table {
font-size: calc(0.5rem + 0.3vw);
font-size: calc(0.5rem + 0.35vw);
overflow: auto;
overflow-y: hidden;
}
@@ -220,6 +275,7 @@ export default class StationTable extends styleMixin {
&-wrapper {
overflow: auto;
}
white-space: nowrap;
border-collapse: collapse;
@@ -234,7 +290,7 @@ export default class StationTable extends styleMixin {
&-head th {
padding: 0.3rem;
background-color: #444;
background-color: $primaryCol;
min-width: 120px;
cursor: pointer;
@@ -254,16 +310,16 @@ export default class StationTable extends styleMixin {
}
&-item {
background-color: #5c5b5b;
background-color: $rowCol;
&:nth-child(even) {
background-color: rgb(102, 101, 101);
background-color: lighten($rowCol, 5);
color: white;
}
&:hover,
&:focus {
background-color: #818181;
background-color: lighten($rowCol, 20);
}
& > td {
src/components/StationsView/StationTimetable.vue
+43 -25
View File
@@ -2,32 +2,46 @@
<div class="station-timetable">
<div class="timetable-wrapper">
<div class="timetable-title title">
<div style="font-size: 1.5em;">{{stationName.toUpperCase()}}</div>
<div style="font-size: 0.7em;">AKTYWNE ROZKŁADY JAZDY</div>
<div style="font-size: 1.5em">{{ stationName.toUpperCase() }}</div>
<div style="font-size: 0.7em">AKTYWNE ROZKŁADY JAZDY</div>
</div>
<div class="timetable-content">
<div class="timetable-item" v-for="(scheduledTrain, i) in computedScheduledTrains" :key="i">
<div
class="timetable-item"
v-for="(scheduledTrain, i) in computedScheduledTrains"
:key="i"
>
<span class="timetable-general">
<span class="general-info">
<router-link
:to="{ name: 'TrainsView', params: { passedSearchedTrain: scheduledTrain.trainNo.toString()}}"
:to="{
name: 'TrainsView',
params: {
passedSearchedTrain: scheduledTrain.trainNo.toString(),
},
}"
>
<span>
<strong>{{scheduledTrain.category}}</strong>
{{scheduledTrain.trainNo}}
</span>
</router-link>|
<strong>{{ scheduledTrain.category }}</strong>
{{ scheduledTrain.trainNo }}
</span> </router-link
>|
<span>
<a
:href="'https://td2.info.pl/profile/?u=' + scheduledTrain.driverId"
:href="
'https://td2.info.pl/profile/?u=' + scheduledTrain.driverId
"
target="_blank"
>{{ scheduledTrain.driverName }}</a>
>{{ scheduledTrain.driverName }}</a
>
</span>
</span>
<span class="general-status">
<span :class="scheduledTrain.stopStatus">{{scheduledTrain.stopLabel}}</span>
<span :class="scheduledTrain.stopStatus">{{
scheduledTrain.stopLabel
}}</span>
</span>
</span>
@@ -36,29 +50,33 @@
<span
class="arrival-time begins"
v-if="scheduledTrain.stopInfo.beginsHere"
>ROZPOCZYNA BIEG</span>
<span
class="arrival-time"
v-else
>{{scheduledTrain.stopInfo.arrivalTimeString}} ({{scheduledTrain.stopInfo.arrivalDelay}})</span>
>ROZPOCZYNA BIEG</span
>
<span class="arrival-time" v-else
>{{ scheduledTrain.stopInfo.arrivalTimeString }} ({{
scheduledTrain.stopInfo.arrivalDelay
}})</span
>
</span>
<span class="schedule-stop">
<span
class="stop-time"
v-if="scheduledTrain.stopInfo.stopTime"
>{{scheduledTrain.stopInfo.stopTime}} {{scheduledTrain.stopInfo.stopType}}</span>
<span class="stop-time" v-if="scheduledTrain.stopInfo.stopTime"
>{{ scheduledTrain.stopInfo.stopTime }}
{{ scheduledTrain.stopInfo.stopType }}</span
>
<span class="stop-arrow arrow"></span>
</span>
<span class="schedule-departure">
<span
class="departure-time terminates"
v-if="scheduledTrain.stopInfo.terminatesHere"
>KOŃCZY BIEG</span>
<span
class="departure-time"
v-else
>{{scheduledTrain.stopInfo.departureTimeString}} ({{scheduledTrain.stopInfo.departureDelay}})</span>
>KOŃCZY BIEG</span
>
<span class="departure-time" v-else
>{{ scheduledTrain.stopInfo.departureTimeString }} ({{
scheduledTrain.stopInfo.departureDelay
}})</span
>
</span>
</span>
</div>