Spythere/srjp-td2
1
0
Fork 0
mirror of https://github.com/Spythere/srjp-td2.git synced 2026-05-03 05:28:12 +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
+183 -169
View File
@@ -4,176 +4,178 @@
<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>
<table class="srjp-table"> <div class="table-container">
<thead> <table class="srjp-table">
<tr> <thead>
<th width="50" class="border border-white">Nr linii</th> <tr>
<th width="100" class="border border-white">Km</th> <th width="50" class="border border-white print:border-black">Nr linii</th>
<th width="40" class="border border-white" colspan="2">V<sub>D</sub></th> <th width="100" class="border border-white print:border-black">Km</th>
<th width="250" class="border border-white">Stacja</th> <th width="40" class="border border-white print:border-black" colspan="2">V<sub>D</sub></th>
<th width="100" class="border border-white">Godzina</th> <th width="250" class="border border-white print:border-black">Stacja</th>
<th width="50" class="border border-white text-xs p-0"> <th width="100" class="border border-white print:border-black">Godzina</th>
<table class="header-table"> <th width="50" class="border border-white print:border-black text-xs p-0">
<tbody> <table class="header-table">
<tr> <tbody>
<td>Lok I</td> <tr>
</tr> <td>Lok I</td>
<tr> </tr>
<td>Lok II</td> <tr>
</tr> <td>Lok II</td>
<tr> </tr>
<td>Lok III</td> <tr>
</tr> <td>Lok III</td>
</tbody> </tr>
</table> </tbody>
</th> </table>
<th width="60" class="border border-white text-xs p-0"> </th>
<table class="header-table"> <th width="60" class="border border-white print:border-black text-xs p-0">
<tbody> <table class="header-table">
<tr> <tbody>
<td>Obc. lok.</td> <tr>
</tr> <td>Obc. lok.</td>
<tr> </tr>
<td>Dł. poc.</td> <tr>
</tr> <td>Dł. poc.</td>
</tbody> </tr>
</table> </tbody>
</th> </table>
<th width="50" class="border border-white">Vmax</th> </th>
</tr> <th width="50" class="border border-white print:border-black">Vmax</th>
</thead> </tr>
<tbody v-if="computedTimetable"> </thead>
<tr v-for="(row, i) in computedTimetable"> <tbody v-if="computedTimetable">
<td class="text-center align-top border border-white">{{ row.realLine }}</td> <tr v-for="(row, i) in computedTimetable">
<td class="border border-white"> <td class="text-center align-top border border-white print:border-black">{{ row.realLine }}</td>
<table> <td class="border border-white print:border-black">
<tbody> <table>
<tr> <tbody>
<td class="align-top">{{ row.arrivalKm }}</td> <tr>
</tr> <td class="align-top">{{ row.arrivalKm }}</td>
<tr> </tr>
<td class="align-bottom">{{ row.departureKm }}</td> <tr>
</tr> <td class="align-bottom">{{ row.departureKm }}</td>
</tbody> </tr>
</table> </tbody>
</td> </table>
</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'">
{{ {{
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"> <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 ||
computedTimetable[i - 1].departureTracks != row.arrivalTracks computedTimetable[i - 1].departureTracks != row.arrivalTracks
? row.arrivalSpeed ? row.arrivalSpeed
: '&nbsp;' : '&nbsp;'
}} }}
</td> </td>
</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>
</tbody> </tbody>
</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 }}
<span v-if="row.stopType"> ; {{ row.stopType }}</span> <span v-if="row.stopType"> ; {{ row.stopType }}</span>
</div>
<div class="flex justify-between">
<span>{{ row.pointKm }}</span>
<span>R1, PP</span>
</div>
</div> </div>
</td>
<div class="flex justify-between"> <td class="border border-white print:border-black">
<span>{{ row.pointKm }}</span> <table>
<span>R1, PP</span> <tbody>
</div> <tr class="text-center align-top">
</div> <td class="border-r-[1px] border-r-white print:border-r-black" :class="{ 'font-bold': row.stopTime > 0 }">
</td> {{
(row.scheduledArrivalDate?.getTime() || 0) != (row.scheduledDepartureDate?.getTime() || 0)
? row.scheduledArrivalDate?.toLocaleTimeString('pl-PL', { hour: '2-digit', minute: '2-digit' })
: '|'
}}
</td>
<td width="30">{{ row.driveTime ? Math.floor(row.driveTime / 60000) : '' }}</td>
</tr>
<tr class="text-center align-bottom">
<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' }) }}
</td>
<td width="30" class="font-bold">{{ row.stopTime || '' }}</td>
</tr>
</tbody>
</table>
</td>
<td class="border border-white"> <td class="p-0 text-center border border-white print:border-black">
<table> <table>
<tbody> <tbody>
<tr class="text-center align-top"> <tr class="border-b-[1px] border-b-white print:border-b-black">
<td class="border-r-[1px] border-r-white" :class="{ 'font-bold': row.stopTime > 0 }"> <td>{{ selectedTrain!.stockString.split(';')[0].split('-')[0] }}</td>
{{ </tr>
(row.scheduledArrivalDate?.getTime() || 0) != (row.scheduledDepartureDate?.getTime() || 0) <tr class="border-b-[1px] border-b-white print:border-b-black">
? row.scheduledArrivalDate?.toLocaleTimeString('pl-PL', { hour: '2-digit', minute: '2-digit' }) <td>&nbsp;</td>
: '|' </tr>
}} <tr>
</td> <td>&nbsp;</td>
<td width="30">{{ row.driveTime ? Math.floor(row.driveTime / 60000) : '' }}</td> </tr>
</tr> </tbody>
<tr class="text-center align-bottom"> </table>
<td class="border-r-[1px] border-r-white" :class="{ 'font-bold': row.stopTime > 0 }"> </td>
{{ row.scheduledDepartureDate?.toLocaleTimeString('pl-PL', { hour: '2-digit', minute: '2-digit' }) }}
</td>
<td width="30" class="font-bold">{{ row.stopTime || '' }}</td>
</tr>
</tbody>
</table>
</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>{{ Math.floor(selectedTrain!.mass / 1000) }}</td>
</tr> </tr>
<tr class="border-b-[1px] border-b-white"> <tr>
<td>&nbsp;</td> <td>{{ selectedTrain!.length }}</td>
</tr> </tr>
<tr> </tbody>
<td>&nbsp;</td> </table>
</tr> </td>
</tbody>
</table>
</td>
<td class="p-0 text-center border border-white"> <td class="text-center border border-white print:border-black">70</td>
<table> </tr>
<tbody> </tbody>
<tr class="border-b-[1px] border-b-white"> </table>
<td>{{ Math.floor(selectedTrain!.mass / 1000) }}</td> </div>
</tr>
<tr>
<td>{{ selectedTrain!.length }}</td>
</tr>
</tbody>
</table>
</td>
<td class="text-center border border-white">70</td>
</tr>
</tbody>
</table>
</div> </div>
</template> </template>
@@ -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>