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

srjp: poprawki dostępności modalu

Browse Source
This commit is contained in:
Spythere
2023-09-04 18:37:52 +02:00
parent dbbbd33100
commit f77c13cbcf
8 changed files with 151 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue
+131 -133
View File
@@ -1,133 +1,131 @@
<template>
<section class="info-user-list">
<h3 class="user-header section-header">
<img :src="getIcon('user')" alt="icon-user" />
&nbsp;{{ $t('scenery.users') }} &nbsp;
<span class="text--primary">{{ station.onlineInfo?.currentUsers || '0' }}</span
>&nbsp;/&nbsp;<span class="text--primary">{{ station.onlineInfo?.maxUsers || '0' }}</span>
</h3>
<div
v-for="(train, i) in computedStationTrains"
class="badge user"
:class="train.stopStatus"
:key="train.trainId"
tabindex="0"
@click="selectModalTrain(train.trainId)"
@keydown.enter="selectModalTrain(train.trainId)"
>
<span class="user_train">{{ train.trainNo }}</span>
<span class="user_name">{{ train.driverName }}</span>
</div>
<div class="badge user badge-none" v-if="!computedStationTrains || computedStationTrains.length == 0">
{{ $t('scenery.no-users') }}
</div>
</section>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue';
import imageMixin from '../../../mixins/imageMixin';
import modalTrainMixin from '../../../mixins/modalTrainMixin';
import routerMixin from '../../../mixins/routerMixin';
import Station from '../../../scripts/interfaces/Station';
import { useStore } from '../../../store/store';
export default defineComponent({
mixins: [routerMixin, imageMixin, modalTrainMixin],
props: {
station: {
type: Object as () => Station,
default: {},
},
},
setup(props) {
const store = useStore();
const computedStationTrains = computed(() => {
if (!props.station) return [];
const station = props.station as Station;
if (!station.onlineInfo) return [];
if (!station.onlineInfo.stationTrains) return [];
return station.onlineInfo.stationTrains.map((train) => {
const scheduledTrainStatus = station.onlineInfo?.scheduledTrains?.find((st) => st.trainNo === train.trainNo);
return {
...train,
stopStatus: scheduledTrainStatus?.stopStatus || 'no-timetable',
};
});
});
return { computedStationTrains, store };
},
});
</script>
<style lang="scss" scoped>
$no-timetable: #aaa;
$departed: springgreen;
$stopped: #ffa600;
$online: gold;
$terminated: salmon;
$disconnected: slategray;
.info-user-list {
width: 100%;
ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
}
.user {
cursor: pointer;
&_train {
color: black;
background-color: $no-timetable;
transition: background-color 200ms;
-ms-transition: background-color 200ms;
-webkit-transition: background-color 200ms;
}
&.no-timetable .user_train {
background-color: $no-timetable;
}
&.departed > &_train {
background-color: $departed;
}
&.stopped > &_train {
background-color: $stopped;
}
&.online > &_train {
background-color: $online;
}
&.terminated > &_train {
background-color: $terminated;
}
&.disconnected > &_train {
background-color: $disconnected;
}
&.offline {
background: firebrick;
pointer-events: none;
}
}
</style>
<template>
<section class="info-user-list">
<h3 class="user-header section-header">
<img :src="getIcon('user')" alt="icon-user" />
&nbsp;{{ $t('scenery.users') }} &nbsp;
<span class="text--primary">{{ station.onlineInfo?.currentUsers || '0' }}</span
>&nbsp;/&nbsp;<span class="text--primary">{{ station.onlineInfo?.maxUsers || '0' }}</span>
</h3>
<div
v-for="(train, i) in computedStationTrains"
class="badge user"
:class="train.stopStatus"
:key="train.trainId"
tabindex="0"
@click.prevent="selectModalTrain(train.trainId, $event.currentTarget)"
@keydown.enter="selectModalTrain(train.trainId, $event.currentTarget)"
>
<span class="user_train">{{ train.trainNo }}</span>
<span class="user_name">{{ train.driverName }}</span>
</div>
<div class="badge user badge-none" v-if="!computedStationTrains || computedStationTrains.length == 0">
{{ $t('scenery.no-users') }}
</div>
</section>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue';
import imageMixin from '../../../mixins/imageMixin';
import modalTrainMixin from '../../../mixins/modalTrainMixin';
import routerMixin from '../../../mixins/routerMixin';
import Station from '../../../scripts/interfaces/Station';
import { useStore } from '../../../store/store';
export default defineComponent({
mixins: [routerMixin, imageMixin, modalTrainMixin],
props: {
station: {
type: Object as () => Station,
default: {},
},
},
setup(props) {
const store = useStore();
const computedStationTrains = computed(() => {
if (!props.station) return [];
const station = props.station as Station;
if (!station.onlineInfo) return [];
if (!station.onlineInfo.stationTrains) return [];
return station.onlineInfo.stationTrains.map((train) => {
const scheduledTrainStatus = station.onlineInfo?.scheduledTrains?.find((st) => st.trainNo === train.trainNo);
return {
...train,
stopStatus: scheduledTrainStatus?.stopStatus || 'no-timetable',
};
});
});
return { computedStationTrains, store };
},
});
</script>
<style lang="scss" scoped>
$no-timetable: #aaa;
$departed: springgreen;
$stopped: #ffa600;
$online: gold;
$terminated: salmon;
$disconnected: slategray;
.info-user-list {
width: 100%;
ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
}
.user {
cursor: pointer;
&_train {
color: black;
background-color: $no-timetable;
transition: background-color 200ms;
-ms-transition: background-color 200ms;
-webkit-transition: background-color 200ms;
}
&.no-timetable .user_train {
background-color: $no-timetable;
}
&.departed > &_train {
background-color: $departed;
}
&.stopped > &_train {
background-color: $stopped;
}
&.online > &_train {
background-color: $online;
}
&.terminated > &_train {
background-color: $terminated;
}
&.disconnected > &_train {
background-color: $disconnected;
}
&.offline {
background: firebrick;
pointer-events: none;
}
}
</style>