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

chore(profile): added grid layout & cleaned up styles

Browse Source
This commit is contained in:
Spythere
2026-02-06 01:16:32 +01:00
parent cf51045343
commit ccca1c8752
2 changed files with 167 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/PlayerProfileView.vue
+159 -80
View File
@@ -2,85 +2,106 @@
<div class="profile-view">
<div class="view-container">
<div class="profile-sidebar">
<div class="player-image-box">
<div class="player-summary">
<img
src="https://td2.info.pl/index.php?action=dlattach;attach=83477;type=avatar"
alt="player image"
width="110"
/>
</div>
<div class="player-summary">
<h3>Spythere</h3>
<p>12 poziom maszynisty</p>
<p>12 poziom dyżurnego</p>
<p>Pierwsza aktywność: 02.02.2022</p>
<p>Ostatnia aktywność: 02.02.2026 (DR)</p>
<p>Stacjosponsor od 01.01.2024</p>
</div>
<div class="player-stats" v-if="playerInfo">
<div class="stats-showcase">
<div>
<div>
{{ playerInfo.driverStats._count.fulfilled }} /
{{ playerInfo.driverStats._count._all }} (95.55%)
</div>
<div>ROZKŁADÓW JAZDY</div>
</div>
<div class="player-stats">
<div class="stats-driver">
<img src="/images/icon-train.svg" width="35" alt="train icon" />
<h3>STATYSTYKI MASZYNISTY</h3>
<hr />
<div><b class="text--primary">522 / 619 (95.39%)</b> - wypełnione rozkłady jazdy</div>
<div>
<div>25</div>
<div>SŁUŻB JAKO DR</div>
<b class="text--primary">16091 / 17149 (95.39%)</b> - zatwierdzony kilometraż w RJ
</div>
<div>
<div>14</div>
<div>WYSTAWIONYCH RJ</div>
<b class="text--primary">2420 / 2537 (95.39%)</b> - potwierdzonych stacji w RJ
</div>
<div><b class="text--primary">237.13km</b> - najdłuższy rozkład jazdy</div>
<div><b class="text--primary">60.39km</b> - średnia długość wszystkich rozkładów</div>
</div>
<div class="stats-other">
<div>
<img src="/images/icon-train.svg" width="25" alt="train icon" />
Najdłuższy rozkład o długości <b>237.13km</b> &bull; średnio 60.39km
</div>
<div class="stats-dispatcher">
<img src="/images/icon-user.svg" width="35" alt="clock icon" />
<h3>STATYSTYKI DYŻURNEGO RUCHU</h3>
<hr />
<div>
<img src="/images/icon-spawn.svg" width="25" alt="spawn icon" />
<b>16091</b> zatwierdzonych kilometrów na 17149 razem (93.83%)
</div>
<div>
<img src="/images/icon-clock.svg" width="25" alt="clock icon" />
<b>2420</b> potwierdzonych odjazdów z 2537 łącznie (95.39%)
</div>
<div>
<img src="/images/icon-user.svg" width="25" alt="clock icon" />
Najdłuższa służba o długości <b>6 godz. 13 min.</b> &bull; średnio 2 godz. 1 min.
</div>
<div>
<img src="/images/icon-timetable.svg" width="25" alt="timetable icon" />
Wystawione łącznie <b>670.80km</b> rozkładów &bull; najdłuższy: <b>80.81km</b> &bull;
średnio: 35.31km
</div>
<div><b class="text--primary">25</b> - służby jako dyżurny ruchu</div>
<div><b class="text--primary">6 godz. 13 min.</b> - najdłuższa służba</div>
<div><b class="text--primary">14</b> - wystawione RJ jako dyżurny ruchu</div>
<div><b class="text--primary">80.81km</b> - najdłuższy wystawiony RJ</div>
<div><b class="text--primary">670.80km</b> - suma długości wystawionych RJ</div>
</div>
</div>
</div>
<div class="profile-main">
<div class="player-stats">
<!-- <div class="stats-month"></div> -->
<h3 class="main-header">STATYSTYKI AKTYWNOŚCI (30 OSTATNICH DNI)</h3>
<div class="main-month-stats">
<div class="month-stats-box">
<div class="month-stat">
<div><img src="/images/icon-train.svg" width="30" alt="train icon" /></div>
<div><h3 class="text--primary">55</h3></div>
<div>
ROZKŁADÓW <br />
JAZDY
</div>
</div>
<div class="month-stat">
<div><img src="/images/icon-spawn.svg" width="30" alt="train icon" /></div>
<div><h3 class="text--primary">5500</h3></div>
<div>
POKONANYCH <br />
KILOMETRÓW
</div>
</div>
<div class="month-stat">
<div><img src="/images/icon-user.svg" width="30" alt="train icon" /></div>
<div><h3 class="text--primary">15</h3></div>
<div>
SŁUŻB <br />
DYŻURNEGO
</div>
</div>
<div class="month-stat">
<div><img src="/images/icon-timetable.svg" width="30" alt="train icon" /></div>
<div><h3 class="text--primary">12</h3></div>
<div>
WYSTAWIONYCH <br />
ROZKŁADÓW
</div>
</div>
</div>
</div>
<div class="player-history">
<div class="history-menu">
<div>ROZKŁADY JAZDY</div>
<div>DYŻURNY RUCHU</div>
<div>WYSTAWIONE ROZKŁADY</div>
</div>
<h3 class="main-header">OSTATNIA AKTYWNOŚĆ GRACZA</h3>
<div class="history-menu">
<button class="history-menu-button">ROZKŁADY JAZDY</button>
<button class="history-menu-button">SŁUŻBY DR</button>
<button class="history-menu-button">WYSTAWIONE RJ</button>
</div>
<div class="history-list-box">
<ul>
<li></li>
</ul>
</div>
</div>
</div>
@@ -88,7 +109,7 @@
</template>
<script lang="ts" setup>
import { computed, onMounted, ref, watch } from 'vue';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { useApiStore } from '../store/apiStore';
import { API } from '../typings/api';
@@ -97,9 +118,11 @@ const apiStore = useApiStore();
const route = useRoute();
const playerInfo = ref<API.PlayerInfo.Data | null>(null);
const playerJournal = ref<API.PlayerJournal.Data | null>(null);
onMounted(() => {
fetchPlayerInfoData();
fetchPlayerJournal();
});
async function fetchPlayerInfoData() {
@@ -119,12 +142,31 @@ async function fetchPlayerInfoData() {
console.error(error);
}
}
// const playerName = ref('');
async function fetchPlayerJournal() {
const playerId = route.params.id.toString();
if (!apiStore.client || !playerId) return;
try {
const response = await apiStore.client.get<API.PlayerJournal.Data>('api/getPlayerJournal', {
params: {
playerId: playerId
}
});
playerJournal.value = response.data;
} catch (error) {
console.error(error);
}
}
</script>
<style lang="scss" scoped>
@use '../styles/responsive';
$tileColor: #181818;
.profile-view {
display: flex;
justify-content: center;
@@ -132,58 +174,95 @@ async function fetchPlayerInfoData() {
.view-container {
display: grid;
grid-template-columns: 3fr 4fr;
gap: 0 1em;
grid-template-columns: 500px 1fr;
gap: 1em;
position: relative;
max-width: var(--max-container-width);
width: 100%;
height: calc(100vh - 0.5em);
min-height: 900px;
padding: 1rem 0;
text-align: center;
}
.profile-sidebar,
.profile-main {
.view-container > div {
position: relative;
overflow: auto;
background-color: #181818;
border-radius: 0.5em;
padding: 1em 0.5em;
// border-radius: 0.5em;
}
height: calc(100vh - 0.5em);
min-height: 500px;
.profile-sidebar {
display: flex;
flex-direction: column;
gap: 1em;
}
.player-stats {
display: flex;
flex-direction: column;
gap: 1em;
hr {
margin: 0.5em 0;
}
}
.player-summary,
.player-stats > div {
background-color: $tileColor;
border-radius: 0.5em;
padding: 1em;
}
.profile-main {
max-height: 2000px;
}
.main-header {
padding: 0.5em;
background-color: $tileColor;
margin-bottom: 0.5em;
border-radius: 0.5em;
}
.month-stats-box {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.5em;
margin-bottom: 1em;
}
.month-stat {
background-color: $tileColor;
border-radius: 0.5em;
padding: 0.5em;
}
.history-menu {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1em;
padding: 0 1px;
& > button {
background-color: $tileColor;
padding: 0.5em;
}
}
@include responsive.midScreen {
.view-container {
grid-template-columns: 1fr;
gap: 0;
max-width: 1000px;
}
// .scenery-left {
// border-radius: 1em;
// margin-bottom: 1em;
// height: auto;
// }
// .scenery-right {
// border-radius: 1em;
// height: 100vh;
// }
}
@include responsive.smallScreen {
.scenery-left {
max-height: 100vh;
}
.scenery-right {
height: 100vh;
}
}
</style>