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

chore: profile

Browse Source
This commit is contained in:
Spythere
2026-02-13 00:52:02 +01:00
parent d9faa486d2
commit 41e3d018e6
2 changed files with 128 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/PlayerProfileView.vue
+123 -100
View File
@@ -1,7 +1,7 @@
<template> <template>
<div class="profile-view"> <div class="profile-view">
<div class="view-container" v-if="playerInfo && playerDataStatus == Status.Data.Loaded"> <div class="profile-wrapper" v-if="playerInfo && playerDataStatus == Status.Data.Loaded">
<div class="profile-sidebar"> <div class="profile-left">
<div class="player-summary"> <div class="player-summary">
<div class="summary-main"> <div class="summary-main">
<img <img
@@ -189,10 +189,10 @@
</div> </div>
</div> </div>
<div class="profile-main"> <div class="profile-right">
<h3 class="main-header">STATYSTYKI AKTYWNOŚCI (30 OSTATNICH DNI)</h3> <div class="profile-month-stats">
<h3 class="main-header">STATYSTYKI AKTYWNOŚCI (30 OSTATNICH DNI)</h3>
<div class="main-month-stats">
<div class="month-stats-box"> <div class="month-stats-box">
<div class="month-stat"> <div class="month-stat">
<div><img src="/images/icon-train.svg" width="30" alt="train icon" /></div> <div><img src="/images/icon-train.svg" width="30" alt="train icon" /></div>
@@ -234,91 +234,95 @@
</div> </div>
</div> </div>
<h3 class="main-header">OSTATNIA AKTYWNOŚĆ GRACZA</h3> <div class="profile-history-list">
<div class="list-header">
<h3 class="main-header">OSTATNIA AKTYWNOŚĆ GRACZA</h3>
<div class="history-menu"> <div class="history-menu">
<button <button
v-for="(filterState, filterKey) in activeFilterTypes" v-for="(filterState, filterKey) in activeFilterTypes"
class="menu-btn" class="menu-btn"
:data-active="filterState" :data-active="filterState"
@click="toggleFilter(filterKey)" @click="toggleFilter(filterKey)"
> >
{{ t(`profile.filters.${filterKey}`) }} {{ t(`profile.filters.${filterKey}`) }}
</button> </button>
</div> </div>
</div>
<div class="history-list-box"> <div class="history-list-box">
<ul> <ul>
<li v-for="entry in combinedJournal"> <li v-for="entry in combinedJournal">
<div style="display: flex; align-items: center; gap: 0.25em"> <div style="display: flex; align-items: center; gap: 0.25em">
<img <img
v-if="entry.type == 'Dispatcher'" v-if="entry.type == 'Dispatcher'"
src="/images/icon-user.svg" src="/images/icon-user.svg"
width="25" width="25"
alt="user icon" alt="user icon"
/> />
<img <img
v-else-if="entry.type == 'Timetable'" v-else-if="entry.type == 'Timetable'"
src="/images/icon-train.svg" src="/images/icon-train.svg"
width="25" width="25"
alt="train icon" alt="train icon"
/> />
<img v-else src="/images/icon-timetable.svg" width="25" alt="timetable icon" /> <img v-else src="/images/icon-timetable.svg" width="25" alt="timetable icon" />
<b class="text--grayed"> <b class="text--grayed">
{{ {{
entry.date.toLocaleString('pl-PL', { dateStyle: 'long', timeStyle: 'short' }) entry.date.toLocaleString('pl-PL', { dateStyle: 'long', timeStyle: 'short' })
}} }}
</b> </b>
<b <b
v-if="'timestampTo' in entry.value && entry.value.timestampTo" v-if="'timestampTo' in entry.value && entry.value.timestampTo"
class="text--grayed" class="text--grayed"
> >
- -
{{ {{
new Date(entry.value.timestampTo).toLocaleString('pl-PL', { new Date(entry.value.timestampTo).toLocaleString('pl-PL', {
dateStyle: dateStyle:
new Date(entry.value.timestampTo).getDay() == entry.date.getDay() new Date(entry.value.timestampTo).getDay() == entry.date.getDay()
? undefined ? undefined
: 'long', : 'long',
timeStyle: 'short' timeStyle: 'short'
}) })
}} }}
</b> </b>
</div> </div>
<!-- Timetables --> <!-- Timetables -->
<div v-if="'trainNo' in entry.value"> <div v-if="'trainNo' in entry.value">
<b class="text--primary"> <b class="text--primary">
{{ entry.value.trainCategoryCode }} {{ entry.value.trainNo }} {{ entry.value.trainCategoryCode }} {{ entry.value.trainNo }}
</b> </b>
<b class="text--grayed" v-if="entry.type == 'IssuedTimetable'"> <b class="text--grayed" v-if="entry.type == 'IssuedTimetable'">
dla: {{ entry.value.driverName }} dla: {{ entry.value.driverName }}
</b> </b>
{{ ' ' }} {{ ' ' }}
<b>{{ entry.value.route.replace('|', ' > ') }}</b> <b>{{ entry.value.route.replace('|', ' > ') }}</b>
{{ ' ' }} {{ ' ' }}
<b>({{ entry.value.currentDistance }} / {{ entry.value.routeDistance }}km) </b> <b>({{ entry.value.currentDistance }} / {{ entry.value.routeDistance }}km) </b>
</div> </div>
<!-- Dispatchers --> <!-- Dispatchers -->
<div v-else> <div v-else>
<b class="text--primary">{{ entry.value.stationName }}</b> <b class="text--primary">{{ entry.value.stationName }}</b>
{{ ' - ' }} {{ ' - ' }}
<b> <b>
<span v-if="entry.value.isOnline">od </span> <span v-if="entry.value.isOnline">od </span>
<span>{{ <span>{{
humanizeDuration( humanizeDuration(
(entry.value.timestampTo || Date.now()) - entry.value.timestampFrom (entry.value.timestampTo || Date.now()) - entry.value.timestampFrom
) )
}}</span> }}</span>
</b> </b>
</div> </div>
</li> </li>
</ul> </ul>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -545,8 +549,10 @@ $tileColor: #181818;
.profile-view { .profile-view {
display: flex; display: flex;
justify-content: center; justify-content: center;
height: 100vh; height: 100vh;
min-height: 500px; min-height: 500px;
max-height: 2000px;
} }
.no-data-found { .no-data-found {
@@ -565,12 +571,11 @@ $tileColor: #181818;
} }
} }
.view-container { .profile-wrapper {
display: grid; display: grid;
grid-template-columns: 500px 1fr; grid-template-columns: 500px 1fr;
gap: 1em; gap: 1em;
position: relative; position: relative;
max-width: var(--max-container-width); max-width: var(--max-container-width);
@@ -580,14 +585,27 @@ $tileColor: #181818;
text-align: center; text-align: center;
} }
.view-container > div { .profile-left {
position: relative;
}
.profile-sidebar {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1em; gap: 1em;
overflow: auto;
}
.profile-right {
display: grid;
grid-template-rows: auto 1fr;
gap: 0.5em;
overflow: auto;
}
.profile-month-stats {
overflow: hidden;
}
.profile-history-list {
overflow: auto;
height: 100%;
} }
.player-stats { .player-stats {
@@ -633,22 +651,23 @@ $tileColor: #181818;
margin-top: 1em; margin-top: 1em;
} }
.profile-main {
overflow: hidden;
}
.main-header { .main-header {
padding: 0.5em; padding: 0.5em;
background-color: $tileColor; background-color: $tileColor;
margin-bottom: 0.5em; margin-bottom: 0.5em;
border-radius: 0.5em; }
.list-header {
position: sticky;
top: 0;
background-color: var(--clr-bg);
padding-bottom: 0.5em;
} }
.month-stats-box { .month-stats-box {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
gap: 0.5em; gap: 0.5em;
margin-bottom: 1em;
} }
.month-stat { .month-stat {
@@ -689,10 +708,6 @@ $tileColor: #181818;
} }
.history-list-box { .history-list-box {
overflow: auto;
height: 650px;
margin-top: 1em;
& > ul > li { & > ul > li {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -707,11 +722,19 @@ $tileColor: #181818;
} }
@include responsive.midScreen { @include responsive.midScreen {
.view-container { .profile-view {
height: auto;
}
.profile-wrapper {
grid-template-columns: 1fr; grid-template-columns: 1fr;
max-width: 1000px; max-width: 1000px;
} }
.history-list-box {
max-height: 100vh;
}
.player-stats { .player-stats {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
src/views/SceneryView.vue
+4
View File
@@ -236,6 +236,10 @@ function setViewMode(componentName: string) {
} }
@include responsive.midScreen { @include responsive.midScreen {
.scenery-view {
height: auto;
}
.scenery-wrapper { .scenery-wrapper {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 0; gap: 0;