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): added router links for history list

Browse Source
This commit is contained in:
Spythere
2026-02-17 17:06:14 +01:00
parent abd1c8b684
commit 1a7801259f
2 changed files with 94 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PlayerProfileView/ProfileHistoryList.vue
+90 -78
View File
@@ -14,80 +14,84 @@
</div> </div>
<div class="history-list-box"> <div class="history-list-box">
<ul> <router-link
<li v-for="entry in combinedJournal"> v-for="entry in combinedJournal"
<div style="display: flex; align-items: center; gap: 0.25em"> :to="
<img 'trainNo' in entry.value
v-if="entry.type == 'Dispatcher'" ? `/journal/timetables?search-train=%23${entry.value.id}`
src="/images/icon-user.svg" : `/journal/dispatchers?search-dispatcher=${entry.value.dispatcherName}`
width="25" "
alt="user icon" >
/> <!-- Date -->
<div class="entry-top-date">
<img
v-if="entry.type == 'Dispatcher'"
src="/images/icon-user.svg"
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="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 <b
class="timestamp-indicator" class="timestamp-indicator"
:data-online=" :data-online="
'isOnline' in entry.value 'isOnline' in entry.value
? entry.value.isOnline ? entry.value.isOnline
: !entry.value.terminated && entry.type != 'IssuedTimetable' : !entry.value.terminated && entry.type != 'IssuedTimetable'
" "
> >
{{ entry.date.toLocaleString('pl-PL', { dateStyle: 'long', timeStyle: 'short' }) }} {{ entry.date.toLocaleString('pl-PL', { dateStyle: 'long', timeStyle: 'short' }) }}
<span v-if="'timestampTo' in entry.value && entry.value.timestampTo" u> <span v-if="'timestampTo' in entry.value && entry.value.timestampTo" u>
- -
{{ {{
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'
}) })
}} }}
</span> </span>
</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.trainCategoryCode }}
</b> </b>
{{ ' ' }} {{ ' ' }}
<b>{{ entry.value.trainNo }}</b> <b>{{ entry.value.trainNo }}</b>
<b class="text--grayed" v-if="entry.type == 'IssuedTimetable'"> <b class="text--grayed" v-if="entry.type == 'IssuedTimetable'">
{{ ' ' }} {{ t('profile.list.for') }}: {{ entry.value.driverName }} {{ ' ' }} {{ t('profile.list.for') }}: {{ entry.value.driverName }}
</b> </b>
{{ ' ' }} {{ ' ' }}
<b>{{ entry.value.route.replace('|', ' > ') }}</b> <b>{{ entry.value.route.replace('|', ' > ') }}</b>
{{ ' ' }} {{ ' ' }}
<b>({{ entry.value.currentDistance }} km / {{ entry.value.routeDistance }} km) </b> <b>({{ entry.value.currentDistance }} km / {{ 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 class="timestamp-indicator" :data-online="entry.value.isOnline"> <b class="timestamp-indicator" :data-online="entry.value.isOnline">
<span v-if="entry.value.isOnline">{{ t('profile.list.online-since') }}: </span> <span v-if="entry.value.isOnline">{{ t('profile.list.online-since') }}: </span>
<span>{{ <span>{{
humanizeDuration( humanizeDuration((entry.value.timestampTo || Date.now()) - entry.value.timestampFrom)
(entry.value.timestampTo || Date.now()) - entry.value.timestampFrom }}</span>
) </b>
}}</span> </div>
</b> </router-link>
</div>
</li>
</ul>
</div> </div>
</section> </section>
</template> </template>
@@ -224,17 +228,25 @@ function toggleFilter(filterType: JournalEntryType) {
} }
.history-list-box { .history-list-box {
& > ul > li { padding: 0.25em;
display: flex; }
flex-direction: column;
gap: 0.25em;
background-color: var(--clr-tile); .history-list-box > a {
padding: 0.5em; display: flex;
flex-direction: column;
gap: 0.25em;
margin-bottom: 0.5em; background-color: var(--clr-tile);
text-align: initial; padding: 0.5em;
}
margin-bottom: 0.5em;
text-align: initial;
}
.entry-top-date {
display: flex;
align-items: center;
gap: 0.25em;
} }
.timestamp-indicator { .timestamp-indicator {
src/components/PlayerProfileView/ProfileSummary.vue
+4 -2
View File
@@ -6,7 +6,6 @@
v-if="playerTD2Info" v-if="playerTD2Info"
:src="`https://td2.info.pl/index.php?action=dlattach;attach=${playerTD2Info.avatar};type=avatar`" :src="`https://td2.info.pl/index.php?action=dlattach;attach=${playerTD2Info.avatar};type=avatar`"
alt="player image" alt="player image"
height="120"
@error="(e) => ((e.target as any).src = '/images/default-avatar.jpg')" @error="(e) => ((e.target as any).src = '/images/default-avatar.jpg')"
/> />
@@ -71,6 +70,10 @@
<img src="/images/icon-train.svg" width="25" alt="train icon" /> <img src="/images/icon-train.svg" width="25" alt="train icon" />
<span v-if="d.timetable" class="text--primary">{{ d.timetable.category }}</span> <span v-if="d.timetable" class="text--primary">{{ d.timetable.category }}</span>
<span>{{ d.trainNo }}</span> <span>{{ d.trainNo }}</span>
&bull;
<span>{{ d.currentStationName }}</span>
&bull;
<span class="text--grayed">{{ d.stockString.split(';')[0] }}</span>
</router-link> </router-link>
</div> </div>
</div> </div>
@@ -320,7 +323,6 @@ const activeTrains = computed(() => {
gap: 0.25em; gap: 0.25em;
font-weight: bold; font-weight: bold;
background-color: #3b3b3b;
padding: 0.25em 0.5em; padding: 0.25em 0.5em;
border-radius: 0.5em; border-radius: 0.5em;
} }