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

Poprawki wyglądu appbaru, dodanie wsparcia dla niewpisanych scenerii

Browse Source
This commit is contained in:
Spythere
2020-07-11 15:06:33 +02:00
parent f5db877129
commit 5c3b60eb58
11 changed files with 164 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+64 -12
View File
@@ -7,16 +7,29 @@
<img src="@/assets/trainlogo.png" alt="trainlogo" />
<span>wnik</span>
</div>
<span class="online">Scenerie online: {{stationCount}} | Maszyniści online: {{ trainCount }}</span>
</header>
<div class="app-bar flex flex-spaced">
<div class="bar-content">
<div class="app-bar">
<div class="bar-content flex flex-spaced">
<div class="bar-left">
<Options />
</div>
<div class="bar-right"></div>
<div class="bar-center">
<Clock />
</div>
<div class="bar-right">
<span class="counter dispatchers">
<img src="@/assets/icon-dispatcher.svg" alt="icon dispatcher" />
{{stationCount}}
</span>
<span class="counter trains">
{{trainCount}}
<img src="@/assets/icon-train.svg" alt="icon train" />
</span>
</div>
</div>
</div>
@@ -38,11 +51,12 @@ import { mapGetters, mapActions } from "vuex";
import Error from "@/components/states/Error.vue";
import Loading from "@/components/states/Loading.vue";
import Options from "@/components/ui/Options.vue";
import Clock from "@/components/ui/Clock.vue";
// import ListFilter from "@/components/utils/ListFilter.vue";
export default Vue.extend({
name: "App",
components: { Error, Loading, Options },
components: { Error, Loading, Options, Clock },
computed: mapGetters({
stations: "getStations",
trainCount: "getTrainCount",
@@ -79,6 +93,19 @@ export default Vue.extend({
font-size: 16px;
}
::-webkit-scrollbar {
width: 15px;
&-track {
background: #222;
}
&-thumb {
border-radius: 1rem;
background: #777;
}
}
html {
scroll-behavior: smooth;
}
@@ -171,6 +198,8 @@ ul {
align-items: center;
justify-content: center;
width: 100%;
&-spaced {
justify-content: space-between;
}
@@ -183,8 +212,8 @@ ul {
.app {
background: $bgCol;
color: white;
width: 100%;
overflow: hidden;
font-size: calc(1rem + 2.1vw);
&-container {
display: grid;
@@ -197,29 +226,52 @@ ul {
&-header {
background: #333;
padding: 0.4rem;
padding: 0.1em;
& > .brand-name {
font-size: calc(1rem + 3.5vw);
font-size: 1.1em;
img {
width: calc(1rem + 2.3vw);
width: 0.8em;
}
}
.online {
font-size: calc(0.3rem + 0.8vw);
font-size: 0.35em;
}
}
&-bar {
display: flex;
justify-content: space-between;
position: sticky;
font-size: calc(0.8rem + 0.2vw);
top: 0;
font-size: 0.3em;
background: #222;
}
}
.bar {
&-right {
font-size: 1.35em;
display: flex;
}
}
.counter {
display: flex;
align-items: center;
color: $accentCol;
margin: 0 0.3em;
img {
width: 1.4em;
margin: 0 0.1em;
}
}
footer {
background: #111;
padding: 0.3rem;
src/assets/icon-dispatcher.svg
+1
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 264 B

src/assets/icon-train.svg
+1
View File
@@ -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 2c-4.42 0-8 .5-8 4v9.5C4 17.43 5.57 19 7.5 19L6 20.5v.5h12v-.5L16.5 19c1.93 0 3.5-1.57 3.5-3.5V6c0-3.5-3.58-4-8-4zM7.5 17c-.83 0-1.5-.67-1.5-1.5S6.67 14 7.5 14s1.5.67 1.5 1.5S8.33 17 7.5 17zm3.5-6H6V6h5v5zm5.5 6c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm1.5-6h-5V6h5v5z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 457 B

src/components/ui/Card.vue
+8 -3
View File
@@ -1,7 +1,9 @@
<template>
<transition name="card-anim">
<div class="card" v-if="stationInfo">
<div class="card-exit" @click="closeCard">X</div>
<div class="card-exit" @click="closeCard">
<img :src="require('@/assets/icon-exit.svg')" alt="exit icon" />
</div>
<div class="card-upper">
<div class="station-name">
@@ -190,8 +192,11 @@ export default Vue.extend({
position: absolute;
top: 0;
right: 0;
padding: 1rem;
font-size: calc(1rem + 0.7vw);
margin: 0.8em;
img {
width: 1.3em;
}
cursor: pointer;
}
src/components/ui/Clock.vue
+32
View File
@@ -0,0 +1,32 @@
<template>
<section class="clock">{{ formattedDate }}</section>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
name: "clock",
data: () => ({
timestamp: Date.now()
}),
computed: {
formattedDate() {
return new Date(this.timestamp).toLocaleString("pl-PL");
}
},
mounted() {
setInterval(() => (this.timestamp = Date.now()), 1000);
}
});
</script>
<style lang="scss" scoped>
.clock {
display: flex;
justify-content: center;
align-items: center;
font-size: 1.25em;
}
</style>
src/components/ui/Options.vue
+1 -1
View File
@@ -37,7 +37,7 @@ export default Vue.extend({
}
.button {
font-size: 0.9em;
font-size: 0.75em;
img {
width: 1.3em;
src/components/utils/ListFilter.vue
+12 -8
View File
@@ -14,6 +14,7 @@
class="option-input"
type="checkbox"
:name="option.name"
:defaultValue="option.defaultValue"
:id="option.id"
v-model="option.value"
@change="handleChange"
@@ -150,8 +151,8 @@ export default Vue.extend({
id: "free",
name: "free",
section: "status",
value: true,
defaultValue: true,
value: false,
defaultValue: false,
content: "WOLNA"
},
{
@@ -189,7 +190,7 @@ export default Vue.extend({
maxRange: 5,
value: 0,
defaultValue: 0,
content: "MINIMALNA LICZBA SZLAKÓW JEDNOTOROWYCH ZELEKTRYFIKOWANYCH"
content: "SZLAKI JEDNOTOROWE ZELEKTR. (MINIMUM)"
},
{
id: "min-oneway-ne",
@@ -198,7 +199,7 @@ export default Vue.extend({
maxRange: 5,
value: 0,
defaultValue: 0,
content: "MINIMALNA LICZBA SZLAKÓW JEDNOTOROWYCH NIEZELEKTRYFIKOWANYCH"
content: "SZLAKI JEDNOTOROWE NIEZELEKTR. (MINIMUM)"
},
{
id: "min-twoway-e",
@@ -207,7 +208,7 @@ export default Vue.extend({
maxRange: 5,
value: 0,
defaultValue: 0,
content: "MINIMALNA LICZBA SZLAKÓW DWUTOROWYCH ZELEKTRYFIKOWANYCH"
content: "SZLAKI DWUTOROWE ZELEKTR. (MINIMUM)"
},
{
id: "min-twoway-ne",
@@ -216,7 +217,7 @@ export default Vue.extend({
maxRange: 5,
value: 0,
defaultValue: 0,
content: "MINIMALNA LICZBA SZLAKÓW DWUTOROWYCH NIEZELEKTRYFIKOWANYCH"
content: "SZLAKI DWUTOROWE NIEELEKTR. (MINIMUM)"
}
]
}),
@@ -224,7 +225,10 @@ export default Vue.extend({
methods: {
...mapActions(["setFilter", "resetFilters"]),
handleChange(e: any) {
this.setFilter({ filterName: e.target.name, value: !e.target.checked });
this.setFilter({
filterName: e.target.name,
value: !e.target.checked
});
},
handleInput(e: any) {
this.setFilter({
@@ -429,7 +433,7 @@ export default Vue.extend({
display: flex;
align-items: center;
font-size: 0.6em;
font-size: 0.75em;
}
&-input {
src/data/stations.json
+23
View File
@@ -1647,5 +1647,28 @@
},
"default": false,
"nonPublic": false
},
{
"stationName": "Sulechów",
"stationURL": "https://td2.info.pl/scenerie/sulechow/",
"stationLines": "358,379",
"reqLevel": "0",
"supportersOnly": "NIE",
"signalType": "mieszana",
"controlType": "SPK",
"SBL": "",
"twoWayBlock": "",
"routes": {
"oneWay": {
"catenary": 2,
"noCatenary": 1
},
"twoWay": {
"catenary": 0,
"noCatenary": 0
}
},
"default": false,
"nonPublic": false
}
]
src/store/modules/store.ts
+18 -6
View File
@@ -50,7 +50,7 @@ class Store extends VuexModule {
"minTwoWay": 0,
"no-1track": false,
"no-2track": false,
"free": false,
"free": true,
"occupied": false,
"ending": false
} as const;
@@ -182,7 +182,7 @@ class Store extends VuexModule {
})
this.context.commit('updateStations', mappedStations);
this.context.commit('setStationCount');
this.context.commit('setStationCount', mappedStations.length);
this.context.commit('filterStations');
}
@@ -192,9 +192,9 @@ class Store extends VuexModule {
if ((station.nonPublic || !station.reqLevel) && this.filters['nonPublic']) return false;
if (!station.reqLevel) return true;
if (station.online && station.occupiedTo == "KOŃCZY" && this.filters['ending']) return false;
if (station.online && this.filters['occupied']) return false;
if (!station.online && this.filters['free']) return false;
if (station.online && station.occupiedTo == "KOŃCZY" && this.filters['ending']) return false;
if (station.default && this.filters['default']) return false;
if (!station.default && this.filters['notDefault']) return false;
@@ -249,7 +249,7 @@ class Store extends VuexModule {
}
@Mutation
private updateStations(updatedStations: []) {
private updateStations(updatedStations: any) {
for (let i = 0; i < this.stations.length; i++) {
const toUpdate: any = updatedStations.find((updated: any) => updated.stationName === this.stations[i].stationName);
@@ -261,7 +261,19 @@ class Store extends VuexModule {
this.stations[i] = { ...this.stations[i], ...toUpdate }
this.stations[i].online = true;
updatedStations = updatedStations.filter((updated: any) => updated.stationName !== this.stations[i].stationName);
}
// Dodawanie do listy online potencjalnych scenerii niewpisanych do bazy
updatedStations.forEach((updated: any) => {
const toUpdate: any = this.stations.find(station => station.stationName === updated.stationName);
if (!toUpdate) {
this.stations.push({ ...updated, online: true });
}
})
}
@Mutation
@@ -270,8 +282,8 @@ class Store extends VuexModule {
}
@Mutation
private setStationCount() {
this.stationCount = this.stations.filter(station => station.online).length;
private setStationCount(count: number) {
this.stationCount = count;
}
@Mutation
src/views/Home.vue
+2
View File
@@ -21,5 +21,7 @@ export default class Home extends Vue {
<style lang="scss" scoped>
.home {
padding: 1rem;
max-height: 100%;
}
</style>