From ccca1c87520df016a15dd0d705b4fc5583441348 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Fri, 6 Feb 2026 01:16:32 +0100
Subject: [PATCH] chore(profile): added grid layout & cleaned up styles

---
 src/typings/api.ts              |   8 ++
 src/views/PlayerProfileView.vue | 239 +++++++++++++++++++++-----------
 2 files changed, 167 insertions(+), 80 deletions(-)

diff --git a/src/typings/api.ts b/src/typings/api.ts
index 29e15db..51098d7 100644
--- a/src/typings/api.ts
+++ b/src/typings/api.ts
@@ -124,6 +124,14 @@ export namespace API {
     }
   }
 
+  export namespace PlayerJournal {
+    export interface Data {
+      timetables: TimetableHistory.DataShort[];
+      issuedTimetables: TimetableHistory.DataShort[];
+      duties: DispatcherHistory.Data[];
+    }
+  }
+
   export namespace ActiveSceneries {
     export interface Data {
       dispatcherId: number;
diff --git a/src/views/PlayerProfileView.vue b/src/views/PlayerProfileView.vue
index 27c2917..9be2ff7 100644
--- a/src/views/PlayerProfileView.vue
+++ b/src/views/PlayerProfileView.vue
@@ -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>