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

chore: optimized table layout

Browse Source
This commit is contained in:
Spythere
2025-01-25 15:28:54 +01:00
parent 684bbdac31
commit 958c8d3b65
2 changed files with 196 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+52 -39
View File
@@ -1,16 +1,20 @@
<template> <template>
<div class="app"> <div class="overflow-hidden max-h-screen max-w-[800px] mx-auto">
<div class="grid p-3 h-screen grid-rows-[auto_1fr] ">
<select name="trains" id="trains-select" class="mb-2 bg-zinc-800 p-1 rounded-md" v-model="selectedTrainId"> <select name="trains" id="trains-select" class="mb-2 bg-zinc-800 p-1 rounded-md" v-model="selectedTrainId">
<option :value="train.id" v-for="train in timetableTrains">{{ train.driverName }} | {{ train.timetable?.category }} {{ train.trainNo }}</option> <option :value="train.id" v-for="train in timetableTrains">
{{ train.driverName }} | {{ train.timetable?.category }} {{ train.trainNo }}
</option>
</select> </select>
<div class="table-container"> <div class="overflow-auto">
<table class="srjp-table"> <table class="table-fixed">
<thead> <thead>
<tr> <tr>
<th width="50" class="border border-white print:border-black">Nr linii</th> <th width="50" class="border border-white print:border-black">Nr <br />linii</th>
<th width="100" class="border border-white print:border-black">Km</th> <th width="100" class="border border-white print:border-black">Km</th>
<th width="40" class="border border-white print:border-black" colspan="2">V<sub>D</sub></th> <th width="40" class="border border-white print:border-black">V<sub>P</sub></th>
<th width="40" class="border border-white print:border-black">V<sub>L</sub></th>
<th width="250" class="border border-white print:border-black">Stacja</th> <th width="250" class="border border-white print:border-black">Stacja</th>
<th width="100" class="border border-white print:border-black">Godzina</th> <th width="100" class="border border-white print:border-black">Godzina</th>
<th width="50" class="border border-white print:border-black text-xs p-0"> <th width="50" class="border border-white print:border-black text-xs p-0">
@@ -46,8 +50,10 @@
<tbody v-if="computedTimetable"> <tbody v-if="computedTimetable">
<tr v-for="(row, i) in computedTimetable"> <tr v-for="(row, i) in computedTimetable">
<td class="text-center align-top border border-white print:border-black">{{ row.realLine }}</td> <td class="text-center align-top border border-white print:border-black">{{ row.realLine }}</td>
<td class="border border-white print:border-black">
<table> <td class="border border-white print:border-black relative">
<div class="absolute top-0 left-0 w-full h-full p-0.5">
<table class="h-full">
<tbody> <tbody>
<tr> <tr>
<td class="align-top">{{ row.arrivalKm }}</td> <td class="align-top">{{ row.arrivalKm }}</td>
@@ -57,10 +63,12 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
</td> </td>
<td class="text-center align-top font-bold p-0 border-l-4 print:border-l-black" colspan="2"> <td class="text-center align-top p-0 print:border-l-black relative" colspan="2">
<table> <div class="absolute top-0 left-0 w-full h-full">
<table class="h-full">
<tbody> <tbody>
<tr <tr
:class="{ :class="{
@@ -68,22 +76,22 @@
'border-t print:border-t-black': i != 0 && computedTimetable[i - 1].departureSpeed != row.arrivalSpeed, 'border-t print:border-t-black': i != 0 && computedTimetable[i - 1].departureSpeed != row.arrivalSpeed,
}" }"
> >
<td :colspan="row.arrivalTracks == 2 ? '1' : '2'"> <td :colspan="row.arrivalTracks == 2 ? '1' : '2'" class="font-bold" width="40">
{{ {{
i == 0 || i == 0 ||
computedTimetable[i - 1].departureSpeed != row.arrivalSpeed || computedTimetable[i - 1].departureSpeed != row.arrivalSpeed ||
computedTimetable[i - 1].departureTracks != row.arrivalTracks computedTimetable[i - 1].departureTracks != row.arrivalTracks
? row.arrivalSpeed ? row.arrivalSpeed
: '&nbsp;' : '&nbsp; '
}} }}
</td> </td>
<td v-if="row.arrivalTracks == 2" class="border-l print:border-l-black"> <td v-if="row.arrivalTracks == 2" class="border-l print:border-l-black" width="40">
{{ {{
i == 0 || i == 0 ||
computedTimetable[i - 1].departureSpeed != row.arrivalSpeed || computedTimetable[i - 1].departureSpeed != row.arrivalSpeed ||
computedTimetable[i - 1].departureTracks != row.arrivalTracks computedTimetable[i - 1].departureTracks != row.arrivalTracks
? row.arrivalSpeed ? row.arrivalSpeed
: '&nbsp;' : '&nbsp; '
}} }}
</td> </td>
</tr> </tr>
@@ -95,18 +103,20 @@
}" }"
> >
<td :colspan="row.departureTracks == 2 ? '1' : '2'"> <td :colspan="row.departureTracks == 2 ? '1' : '2'">
{{ row.departureSpeed != row.arrivalSpeed || row.departureTracks != row.arrivalTracks ? row.departureSpeed : '&nbsp;' }} {{ row.departureSpeed != row.arrivalSpeed || row.departureTracks != row.arrivalTracks ? row.departureSpeed : '&nbsp; ' }}
</td> </td>
<td v-if="row.departureTracks == 2" class="border-l print:border-l-black"> <td v-if="row.departureTracks == 2" class="border-l print:border-l-black">
{{ row.departureSpeed != row.arrivalSpeed || row.departureTracks != row.arrivalTracks ? row.departureSpeed : '&nbsp;' }} {{ row.departureSpeed != row.arrivalSpeed || row.departureTracks != row.arrivalTracks ? row.departureSpeed : '&nbsp; ' }}
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
</td> </td>
<td class="p-1 border border-white print:border-black"> <td class="border border-white print:border-black relative">
<div class="flex flex-col h-full justify-between"> <div class="absolute top-0 left-0 w-full h-full">
<div class="flex flex-col h-full justify-between p-1">
<div :class="{ 'font-bold': row.isMain }"> <div :class="{ 'font-bold': row.isMain }">
{{ row.pointName }} {{ row.pointName }}
<span v-if="row.stopType"> ; {{ row.stopType }}</span> <span v-if="row.stopType"> ; {{ row.stopType }}</span>
@@ -117,12 +127,14 @@
<span>R1, PP</span> <span>R1, PP</span>
</div> </div>
</div> </div>
</div>
</td> </td>
<td class="border border-white print:border-black"> <td class="p-0 border border-white print:border-black relative">
<table> <div class="absolute top-0 left-0 w-full h-full">
<table class="h-full">
<tbody> <tbody>
<tr class="text-center align-top"> <tr class="text-center align-top h-full">
<td class="border-r-[1px] border-r-white print:border-r-black" :class="{ 'font-bold': row.stopTime > 0 }"> <td class="border-r-[1px] border-r-white print:border-r-black" :class="{ 'font-bold': row.stopTime > 0 }">
{{ {{
(row.scheduledArrivalDate?.getTime() || 0) != (row.scheduledDepartureDate?.getTime() || 0) (row.scheduledArrivalDate?.getTime() || 0) != (row.scheduledDepartureDate?.getTime() || 0)
@@ -132,7 +144,7 @@
</td> </td>
<td width="30">{{ row.driveTime ? Math.floor(row.driveTime / 60000) : '' }}</td> <td width="30">{{ row.driveTime ? Math.floor(row.driveTime / 60000) : '' }}</td>
</tr> </tr>
<tr class="text-center align-bottom"> <tr class="text-center align-bottom h-full">
<td class="border-r-[1px] border-r-white print:border-r-black" :class="{ 'font-bold': row.stopTime > 0 }"> <td class="border-r-[1px] border-r-white print:border-r-black" :class="{ 'font-bold': row.stopTime > 0 }">
{{ row.scheduledDepartureDate?.toLocaleTimeString('pl-PL', { hour: '2-digit', minute: '2-digit' }) }} {{ row.scheduledDepartureDate?.toLocaleTimeString('pl-PL', { hour: '2-digit', minute: '2-digit' }) }}
</td> </td>
@@ -140,10 +152,11 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
</td> </td>
<td class="p-0 text-center border border-white print:border-black"> <td class="p-0 text-center border border-white print:border-black relative" style="height: 90px">
<table> <table class="h-full">
<tbody> <tbody>
<tr class="border-b-[1px] border-b-white print:border-b-black"> <tr class="border-b-[1px] border-b-white print:border-b-black">
<td>{{ selectedTrain!.stockString.split(';')[0].split('-')[0] }}</td> <td>{{ selectedTrain!.stockString.split(';')[0].split('-')[0] }}</td>
@@ -158,8 +171,9 @@
</table> </table>
</td> </td>
<td class="p-0 text-center border border-white print:border-black"> <td class="p-0 text-center border border-white print:border-black relative">
<table> <div class="absolute top-0 left-0 w-full h-full">
<table class="h-full">
<tbody> <tbody>
<tr class="border-b-[1px] border-b-white print:border-b-black"> <tr class="border-b-[1px] border-b-white print:border-b-black">
<td>{{ Math.floor(selectedTrain!.mass / 1000) }}</td> <td>{{ Math.floor(selectedTrain!.mass / 1000) }}</td>
@@ -169,6 +183,7 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
</td> </td>
<td class="text-center border border-white print:border-black">70</td> <td class="text-center border border-white print:border-black">70</td>
@@ -177,6 +192,7 @@
</table> </table>
</div> </div>
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@@ -305,6 +321,7 @@ export default defineComponent({
return { return {
sceneryName, sceneryName,
sceneryData: sceneryData ?? null,
speedCorrections: routeCorrections[sceneryName] ?? null, speedCorrections: routeCorrections[sceneryName] ?? null,
arrivalLine: arrivalLine ?? '', arrivalLine: arrivalLine ?? '',
arrivalLineData, arrivalLineData,
@@ -381,7 +398,7 @@ export default defineComponent({
departureTracks: departureTracks, departureTracks: departureTracks,
}; };
console.log(stop.stopNameRAW, stop.departureLine); // console.log(stop.stopNameRAW, stop.departureLine);
arrivalKm = stop.stopDistance; arrivalKm = stop.stopDistance;
arrivalSpeed = correctedDepartureSpeed || arrivalSpeed; arrivalSpeed = correctedDepartureSpeed || arrivalSpeed;
@@ -419,21 +436,18 @@ export default defineComponent({
</script> </script>
<style scoped> <style scoped>
.app_container {
grid-template-rows: auto 1fr;
}
table { table {
width: 100%; width: 100%;
height: 100%;
border-collapse: collapse; border-collapse: collapse;
} }
.table-container {
max-height: 90vh;
overflow-y: auto;
overflow-x: hidden;
padding: 0.5rem;
}
.srjp-table { .srjp-table {
min-width: 750px; table-layout: fixed;
} }
.no-bottom-border { .no-bottom-border {
@@ -441,9 +455,8 @@ table {
} }
@media print { @media print {
.table-container { .main_app {
max-height: 100%; display: block;
padding: 0;
} }
table { table {
src/style.css
+3 -6
View File
@@ -8,15 +8,12 @@
body { body {
margin: 0; margin: 0;
display: flex;
min-width: 320px;
min-height: 100vh;
} }
#app { #app {
max-width: 1280px; width: 100%;
margin: 0 auto; height: 100vh;
padding: 2rem; overflow: hidden;
} }
@media print { @media print {