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

chore: style adjustments for printing

Browse Source
This commit is contained in:
Spythere
2025-01-24 23:42:24 +01:00
parent 2d47534333
commit 051d6b22b8
1 changed files with 183 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+46 -32
View File
@@ -4,15 +4,16 @@
<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">
<table class="srjp-table"> <table class="srjp-table">
<thead> <thead>
<tr> <tr>
<th width="50" class="border border-white">Nr linii</th> <th width="50" class="border border-white print:border-black">Nr linii</th>
<th width="100" class="border border-white">Km</th> <th width="100" class="border border-white print:border-black">Km</th>
<th width="40" class="border border-white" colspan="2">V<sub>D</sub></th> <th width="40" class="border border-white print:border-black" colspan="2">V<sub>D</sub></th>
<th width="250" class="border border-white">Stacja</th> <th width="250" class="border border-white print:border-black">Stacja</th>
<th width="100" class="border border-white">Godzina</th> <th width="100" class="border border-white print:border-black">Godzina</th>
<th width="50" class="border border-white text-xs p-0"> <th width="50" class="border border-white print:border-black text-xs p-0">
<table class="header-table"> <table class="header-table">
<tbody> <tbody>
<tr> <tr>
@@ -27,7 +28,7 @@
</tbody> </tbody>
</table> </table>
</th> </th>
<th width="60" class="border border-white text-xs p-0"> <th width="60" class="border border-white print:border-black text-xs p-0">
<table class="header-table"> <table class="header-table">
<tbody> <tbody>
<tr> <tr>
@@ -39,13 +40,13 @@
</tbody> </tbody>
</table> </table>
</th> </th>
<th width="50" class="border border-white">Vmax</th> <th width="50" class="border border-white print:border-black">Vmax</th>
</tr> </tr>
</thead> </thead>
<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">{{ row.realLine }}</td> <td class="text-center align-top border border-white print:border-black">{{ row.realLine }}</td>
<td class="border border-white"> <td class="border border-white print:border-black">
<table> <table>
<tbody> <tbody>
<tr> <tr>
@@ -58,13 +59,13 @@
</table> </table>
</td> </td>
<td class="text-center align-top font-bold p-0 border-l-4" colspan="2"> <td class="text-center align-top font-bold p-0 border-l-4 print:border-l-black" colspan="2">
<table> <table>
<tbody> <tbody>
<tr <tr
:class="{ :class="{
'align-top': i == 0 || computedTimetable[i - 1].departureTracks == row.arrivalTracks, 'align-top': i == 0 || computedTimetable[i - 1].departureTracks == row.arrivalTracks,
'border-t': 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'">
@@ -76,7 +77,7 @@
: '&nbsp;' : '&nbsp;'
}} }}
</td> </td>
<td v-if="row.arrivalTracks == 2" class="border-l"> <td v-if="row.arrivalTracks == 2" class="border-l print:border-l-black">
{{ {{
i == 0 || i == 0 ||
computedTimetable[i - 1].departureSpeed != row.arrivalSpeed || computedTimetable[i - 1].departureSpeed != row.arrivalSpeed ||
@@ -88,15 +89,15 @@
</tr> </tr>
<tr <tr
:class="{ :class="{
'border-b': i == computedTimetable.length - 1, 'border-b print:border-b-black': i == computedTimetable.length - 1,
'border-t': row.arrivalTracks != row.departureTracks || row.departureSpeed != row.arrivalSpeed, 'border-t print:border-t-black': row.arrivalTracks != row.departureTracks || row.departureSpeed != row.arrivalSpeed,
'align-top': row.arrivalTracks != row.departureTracks, 'align-top': row.arrivalTracks != row.departureTracks,
}" }"
> >
<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"> <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>
@@ -104,7 +105,7 @@
</table> </table>
</td> </td>
<td class="p-1 border border-white"> <td class="p-1 border border-white print:border-black">
<div class="flex flex-col h-full justify-between"> <div class="flex flex-col h-full justify-between">
<div :class="{ 'font-bold': row.isMain }"> <div :class="{ 'font-bold': row.isMain }">
{{ row.pointName }} {{ row.pointName }}
@@ -118,11 +119,11 @@
</div> </div>
</td> </td>
<td class="border border-white"> <td class="border border-white print:border-black">
<table> <table>
<tbody> <tbody>
<tr class="text-center align-top"> <tr class="text-center align-top">
<td class="border-r-[1px] border-r-white" :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)
? row.scheduledArrivalDate?.toLocaleTimeString('pl-PL', { hour: '2-digit', minute: '2-digit' }) ? row.scheduledArrivalDate?.toLocaleTimeString('pl-PL', { hour: '2-digit', minute: '2-digit' })
@@ -132,7 +133,7 @@
<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">
<td class="border-r-[1px] border-r-white" :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>
<td width="30" class="font-bold">{{ row.stopTime || '' }}</td> <td width="30" class="font-bold">{{ row.stopTime || '' }}</td>
@@ -141,13 +142,13 @@
</table> </table>
</td> </td>
<td class="p-0 text-center border border-white"> <td class="p-0 text-center border border-white print:border-black">
<table> <table>
<tbody> <tbody>
<tr class="border-b-[1px] border-b-white"> <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>
</tr> </tr>
<tr class="border-b-[1px] border-b-white"> <tr class="border-b-[1px] border-b-white print:border-b-black">
<td>&nbsp;</td> <td>&nbsp;</td>
</tr> </tr>
<tr> <tr>
@@ -157,10 +158,10 @@
</table> </table>
</td> </td>
<td class="p-0 text-center border border-white"> <td class="p-0 text-center border border-white print:border-black">
<table> <table>
<tbody> <tbody>
<tr class="border-b-[1px] border-b-white"> <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>
</tr> </tr>
<tr> <tr>
@@ -170,11 +171,12 @@
</table> </table>
</td> </td>
<td class="text-center border border-white">70</td> <td class="text-center border border-white print:border-black">70</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@@ -186,7 +188,7 @@ const routeCorrections: Record<string, { departureSpeed: Record<string, number>;
departureSpeed: { departureSpeed: {
'WW-Br': 120, 'WW-Br': 120,
'WG-WG(gt)': 100, 'WG-WG(gt)': 100,
'WG(gt)-Żak': 120 'WG(gt)-Żak': 120,
}, },
departureTracks: {}, departureTracks: {},
}, },
@@ -231,12 +233,12 @@ const routeCorrections: Record<string, { departureSpeed: Record<string, number>;
}, },
'Włoszczowa Północ': { 'Włoszczowa Północ': {
departureSpeed: { departureSpeed: {
'it19': 100, it19: 100,
}, },
departureTracks: { departureTracks: {
'it19': 1, it19: 1,
},
}, },
}
}; };
interface StopRow { interface StopRow {
@@ -421,6 +423,13 @@ table {
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; min-width: 750px;
} }
@@ -430,8 +439,13 @@ table {
} }
@media print { @media print {
table { .table-container {
page-break-inside: auto; max-height: 100%;
padding: 0;
}
select {
display: none;
} }
} }
</style> </style>