chore(profile): change appearance of activity history entries

src/components/JournalView/JournalTimetables/EntryGeneral.vue

@@ -87,7 +87,7 @@
       </b>
 
       <b
-        class="info-badge"
+        class="timetable-status-badge"
         :class="{
           fulfilled: timetable.fulfilled,
           terminated: timetable.terminated && !timetable.fulfilled,
@@ -171,23 +171,6 @@ export default defineComponent({
   gap: 0.25em;
 }
 
-.info-badge {
-  padding: 0.05em 0.35em;
-  color: black;
-
-  &.terminated {
-    background-color: salmon;
-  }
-
-  &.fulfilled {
-    background-color: lightgreen;
-  }
-
-  &.active {
-    background-color: lightblue;
-  }
-}
-
 .btn-timetable {
   display: flex;
   padding: 0.2em 0.5em;

src/styles/_badge.scss

@@ -135,3 +135,20 @@
     color: black;
   }
 }
+
+.timetable-status-badge {
+  padding: 0.05em 0.35em;
+  color: black;
+
+  &.terminated {
+    background-color: salmon;
+  }
+
+  &.fulfilled {
+    background-color: lightgreen;
+  }
+
+  &.active {
+    background-color: lightblue;
+  }
+}

src/views/PlayerProfileView.vue

@@ -15,7 +15,11 @@
             <img class="img-placeholder" height="100" src="/images/default-avatar.jpg" v-else />
 
             <div>
-              <h2>{{ playerName }}</h2>
+              <h2 class="player-name-header">
+                <a :href="`https://td2.info.pl/profile/?u=${route.query.playerId}`" target="_blank">
+                  {{ playerName }}
+                </a>
+              </h2>
 
               <div class="player-badges">
                 <div class="badge-container" v-if="playerInfo.driverStats.driverLevel != null">
@@ -69,7 +73,8 @@
             v-if="playerInfo.currentActivity.driver && playerInfo.currentActivity.driver.length > 0"
           >
             <b>ONLINE JAKO MASZYNISTA:</b>
-            {{ playerInfo.currentActivity.driver.trainNo }}
+            {{ playerInfo.currentActivity.driver.trainNo }} na scenerii
+            {{ playerInfo.currentActivity.driver.currentStationName }}
           </div>
 
           <!-- <p v-if="useMainStore"></p> -->
@@ -194,10 +199,7 @@
               <div>
                 <h3 class="text--primary">{{ playerInfo.driverStatsLastMonth.countAll }}</h3>
               </div>
-              <div>
+              <div>ROZKŁADÓW JAZDY</div>
-                ROZKŁADÓW <br />
-                JAZDY
-              </div>
             </div>
 
             <div class="month-stat">
@@ -207,10 +209,7 @@
                   {{ playerInfo.driverStatsLastMonth.currentDistanceTotal?.toFixed(2) || 0 }}
                 </h3>
               </div>
-              <div>
+              <div>POKONANYCH KILOMETRÓW</div>
-                POKONANYCH <br />
-                KILOMETRÓW
-              </div>
             </div>
 
             <div class="month-stat">
@@ -220,10 +219,7 @@
                   {{ playerInfo.dispatcherStatsLastMonth.services?.count || 0 }}
                 </h3>
               </div>
-              <div>
+              <div>SŁUŻB DYŻURNEGO</div>
-                SŁUŻB <br />
-                DYŻURNEGO
-              </div>
             </div>
 
             <div class="month-stat">
@@ -233,10 +229,7 @@
                   {{ playerInfo.dispatcherStatsLastMonth.issuedTimetables?.count || 0 }}
                 </h3>
               </div>
-              <div>
+              <div>WYSTAWIONYCH ROZKŁADÓW</div>
-                WYSTAWIONYCH <br />
-                ROZKŁADÓW
-              </div>
             </div>
           </div>
         </div>
@@ -257,28 +250,48 @@
         <div class="history-list-box">
           <ul>
             <li v-for="entry in combinedJournal">
-              <img
+              <div style="display: flex; align-items: center; gap: 0.25em">
-                v-if="entry.type == 'Dispatcher'"
+                <img
-                src="/images/icon-user.svg"
+                  v-if="entry.type == 'Dispatcher'"
-                width="20"
+                  src="/images/icon-user.svg"
-                alt="user icon"
+                  width="25"
-              />
+                  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="20"
+                  width="25"
-                alt="train icon"
+                  alt="train icon"
-              />
+                />
 
-              <img v-else src="/images/icon-timetable.svg" width="20" 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' }) }}
+                  {{
-              </b>
+                    entry.date.toLocaleString('pl-PL', { dateStyle: 'long', timeStyle: 'short' })
+                  }}
+                </b>
+
+                <b
+                  v-if="'timestampTo' in entry.value && entry.value.timestampTo"
+                  class="text--grayed"
+                >
+                  -
+                  {{
+                    new Date(entry.value.timestampTo).toLocaleString('pl-PL', {
+                      dateStyle:
+                        new Date(entry.value.timestampTo).getDay() == entry.date.getDay()
+                          ? undefined
+                          : 'long',
+                      timeStyle: 'short'
+                    })
+                  }}
+                </b>
+              </div>
 
               <!-- Timetables -->
-              <span v-if="'trainNo' in entry.value">
+              <div v-if="'trainNo' in entry.value">
                 <b class="text--primary">
                   {{ entry.value.trainCategoryCode }} {{ entry.value.trainNo }}
                 </b>
@@ -289,18 +302,21 @@
                 <b>{{ entry.value.route.replace('|', ' > ') }}</b>
                 {{ ' ' }}
                 <b>({{ entry.value.currentDistance }} / {{ entry.value.routeDistance }}km) </b>
-              </span>
+              </div>
 
               <!-- Dispatchers -->
-              <span v-else>
+              <div v-else>
-                <b>{{ entry.value.stationName }}</b>
+                <b class="text--primary">{{ entry.value.stationName }}</b>
                 {{ ' - ' }}
-                <b>{{
+                <b>
-                  humanizeDuration(
+                  <span v-if="entry.value.isOnline">od </span>
-                    (entry.value.timestampTo || Date.now()) - entry.value.timestampFrom
+                  <span>{{
-                  )
+                    humanizeDuration(
-                }}</b>
+                      (entry.value.timestampTo || Date.now()) - entry.value.timestampFrom
-              </span>
+                    )
+                  }}</span>
+                </b>
+              </div>
             </li>
           </ul>
         </div>
@@ -472,7 +488,7 @@ async function fetchPlayerJournal(playerId: string) {
     const response = await apiStore.client.get<API.PlayerJournal.Data>('api/getPlayerJournal', {
       params: {
         playerId: playerId,
-        countLimit: 15
+        countLimit: 30
       }
     });
 
@@ -593,21 +609,22 @@ $tileColor: #181818;
   padding: 1em;
 }
 
-.summary-main {
+.player-name-header {
-  display: flex;
+  margin: 0.5em 0;
-  justify-content: center;
-  gap: 1.5em;
 }
 
 .player-badges {
-  margin: 0.5em 0;
+  display: flex;
+  justify-content: center;
+  gap: 1em;
 }
 
 .badge-container {
   display: flex;
+  justify-content: center;
   align-items: center;
-  gap: 0.5em;
+
-  margin: 0.5em 0;
+  gap: 0.25em;
 
   & > .level-badge {
     font-size: 1.15em;
@@ -640,6 +657,15 @@ $tileColor: #181818;
   background-color: $tileColor;
   border-radius: 0.5em;
   padding: 0.5em;
+
+  h3 {
+    font-size: 1.3em;
+  }
+
+  div:nth-child(3) {
+    margin-top: 0.5em;
+    font-size: 0.9em;
+  }
 }
 
 .history-menu {
@@ -671,7 +697,7 @@ $tileColor: #181818;
 
   & > ul > li {
     display: flex;
-    align-items: center;
+    flex-direction: column;
     gap: 0.25em;
 
     background-color: $tileColor;