mirror of
https://github.com/Spythere/srjp-td2.git
synced 2026-05-03 05:28:12 +00:00
chore: style adjustments for printing
This commit is contained in:
+183
-169
@@ -4,176 +4,178 @@
|
||||
<option :value="train.id" v-for="train in timetableTrains">{{ train.driverName }} | {{ train.timetable?.category }} {{ train.trainNo }}</option>
|
||||
</select>
|
||||
|
||||
<table class="srjp-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="50" class="border border-white">Nr linii</th>
|
||||
<th width="100" class="border border-white">Km</th>
|
||||
<th width="40" class="border border-white" colspan="2">V<sub>D</sub></th>
|
||||
<th width="250" class="border border-white">Stacja</th>
|
||||
<th width="100" class="border border-white">Godzina</th>
|
||||
<th width="50" class="border border-white text-xs p-0">
|
||||
<table class="header-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Lok I</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lok II</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lok III</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</th>
|
||||
<th width="60" class="border border-white text-xs p-0">
|
||||
<table class="header-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Obc. lok.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dł. poc.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</th>
|
||||
<th width="50" class="border border-white">Vmax</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody v-if="computedTimetable">
|
||||
<tr v-for="(row, i) in computedTimetable">
|
||||
<td class="text-center align-top border border-white">{{ row.realLine }}</td>
|
||||
<td class="border border-white">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="align-top">{{ row.arrivalKm }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="align-bottom">{{ row.departureKm }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
<div class="table-container">
|
||||
<table class="srjp-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="50" class="border border-white print:border-black">Nr linii</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="250" class="border border-white print:border-black">Stacja</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">
|
||||
<table class="header-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Lok I</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lok II</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lok III</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</th>
|
||||
<th width="60" class="border border-white print:border-black text-xs p-0">
|
||||
<table class="header-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Obc. lok.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dł. poc.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</th>
|
||||
<th width="50" class="border border-white print:border-black">Vmax</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody v-if="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="border border-white print:border-black">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="align-top">{{ row.arrivalKm }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="align-bottom">{{ row.departureKm }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
|
||||
<td class="text-center align-top font-bold p-0 border-l-4" colspan="2">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr
|
||||
:class="{
|
||||
'align-top': i == 0 || computedTimetable[i - 1].departureTracks == row.arrivalTracks,
|
||||
'border-t': i != 0 && computedTimetable[i - 1].departureSpeed != row.arrivalSpeed,
|
||||
}"
|
||||
>
|
||||
<td :colspan="row.arrivalTracks == 2 ? '1' : '2'">
|
||||
{{
|
||||
i == 0 ||
|
||||
computedTimetable[i - 1].departureSpeed != row.arrivalSpeed ||
|
||||
computedTimetable[i - 1].departureTracks != row.arrivalTracks
|
||||
? row.arrivalSpeed
|
||||
: ' '
|
||||
}}
|
||||
</td>
|
||||
<td v-if="row.arrivalTracks == 2" class="border-l">
|
||||
{{
|
||||
i == 0 ||
|
||||
computedTimetable[i - 1].departureSpeed != row.arrivalSpeed ||
|
||||
computedTimetable[i - 1].departureTracks != row.arrivalTracks
|
||||
? row.arrivalSpeed
|
||||
: ' '
|
||||
}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
:class="{
|
||||
'border-b': i == computedTimetable.length - 1,
|
||||
'border-t': row.arrivalTracks != row.departureTracks || row.departureSpeed != row.arrivalSpeed,
|
||||
'align-top': row.arrivalTracks != row.departureTracks,
|
||||
}"
|
||||
>
|
||||
<td :colspan="row.departureTracks == 2 ? '1' : '2'">
|
||||
{{ row.departureSpeed != row.arrivalSpeed || row.departureTracks != row.arrivalTracks ? row.departureSpeed : ' ' }}
|
||||
</td>
|
||||
<td v-if="row.departureTracks == 2" class="border-l">
|
||||
{{ row.departureSpeed != row.arrivalSpeed || row.departureTracks != row.arrivalTracks ? row.departureSpeed : ' ' }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
<td class="text-center align-top font-bold p-0 border-l-4 print:border-l-black" colspan="2">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr
|
||||
:class="{
|
||||
'align-top': i == 0 || computedTimetable[i - 1].departureTracks == row.arrivalTracks,
|
||||
'border-t print:border-t-black': i != 0 && computedTimetable[i - 1].departureSpeed != row.arrivalSpeed,
|
||||
}"
|
||||
>
|
||||
<td :colspan="row.arrivalTracks == 2 ? '1' : '2'">
|
||||
{{
|
||||
i == 0 ||
|
||||
computedTimetable[i - 1].departureSpeed != row.arrivalSpeed ||
|
||||
computedTimetable[i - 1].departureTracks != row.arrivalTracks
|
||||
? row.arrivalSpeed
|
||||
: ' '
|
||||
}}
|
||||
</td>
|
||||
<td v-if="row.arrivalTracks == 2" class="border-l print:border-l-black">
|
||||
{{
|
||||
i == 0 ||
|
||||
computedTimetable[i - 1].departureSpeed != row.arrivalSpeed ||
|
||||
computedTimetable[i - 1].departureTracks != row.arrivalTracks
|
||||
? row.arrivalSpeed
|
||||
: ' '
|
||||
}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
:class="{
|
||||
'border-b print:border-b-black': i == computedTimetable.length - 1,
|
||||
'border-t print:border-t-black': row.arrivalTracks != row.departureTracks || row.departureSpeed != row.arrivalSpeed,
|
||||
'align-top': row.arrivalTracks != row.departureTracks,
|
||||
}"
|
||||
>
|
||||
<td :colspan="row.departureTracks == 2 ? '1' : '2'">
|
||||
{{ row.departureSpeed != row.arrivalSpeed || row.departureTracks != row.arrivalTracks ? row.departureSpeed : ' ' }}
|
||||
</td>
|
||||
<td v-if="row.departureTracks == 2" class="border-l print:border-l-black">
|
||||
{{ row.departureSpeed != row.arrivalSpeed || row.departureTracks != row.arrivalTracks ? row.departureSpeed : ' ' }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
|
||||
<td class="p-1 border border-white">
|
||||
<div class="flex flex-col h-full justify-between">
|
||||
<div :class="{ 'font-bold': row.isMain }">
|
||||
{{ row.pointName }}
|
||||
<span v-if="row.stopType"> ; {{ row.stopType }}</span>
|
||||
<td class="p-1 border border-white print:border-black">
|
||||
<div class="flex flex-col h-full justify-between">
|
||||
<div :class="{ 'font-bold': row.isMain }">
|
||||
{{ row.pointName }}
|
||||
<span v-if="row.stopType"> ; {{ row.stopType }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between">
|
||||
<span>{{ row.pointKm }}</span>
|
||||
<span>R1, PP</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<div class="flex justify-between">
|
||||
<span>{{ row.pointKm }}</span>
|
||||
<span>R1, PP</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="border border-white print:border-black">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr class="text-center align-top">
|
||||
<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?.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">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr class="text-center align-top">
|
||||
<td class="border-r-[1px] border-r-white" :class="{ 'font-bold': row.stopTime > 0 }">
|
||||
{{
|
||||
(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" :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="p-0 text-center border border-white print:border-black">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr class="border-b-[1px] border-b-white print:border-b-black">
|
||||
<td>{{ selectedTrain!.stockString.split(';')[0].split('-')[0] }}</td>
|
||||
</tr>
|
||||
<tr class="border-b-[1px] border-b-white print:border-b-black">
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> </td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
|
||||
<td class="p-0 text-center border border-white">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr class="border-b-[1px] border-b-white">
|
||||
<td>{{ selectedTrain!.stockString.split(';')[0].split('-')[0] }}</td>
|
||||
</tr>
|
||||
<tr class="border-b-[1px] border-b-white">
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> </td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
<td class="p-0 text-center border border-white print:border-black">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr class="border-b-[1px] border-b-white print:border-b-black">
|
||||
<td>{{ Math.floor(selectedTrain!.mass / 1000) }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ selectedTrain!.length }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
|
||||
<td class="p-0 text-center border border-white">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr class="border-b-[1px] border-b-white">
|
||||
<td>{{ Math.floor(selectedTrain!.mass / 1000) }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ selectedTrain!.length }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
|
||||
<td class="text-center border border-white">70</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<td class="text-center border border-white print:border-black">70</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -186,7 +188,7 @@ const routeCorrections: Record<string, { departureSpeed: Record<string, number>;
|
||||
departureSpeed: {
|
||||
'WW-Br': 120,
|
||||
'WG-WG(gt)': 100,
|
||||
'WG(gt)-Żak': 120
|
||||
'WG(gt)-Żak': 120,
|
||||
},
|
||||
departureTracks: {},
|
||||
},
|
||||
@@ -231,12 +233,12 @@ const routeCorrections: Record<string, { departureSpeed: Record<string, number>;
|
||||
},
|
||||
'Włoszczowa Północ': {
|
||||
departureSpeed: {
|
||||
'it19': 100,
|
||||
it19: 100,
|
||||
},
|
||||
departureTracks: {
|
||||
'it19': 1,
|
||||
it19: 1,
|
||||
},
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
interface StopRow {
|
||||
@@ -421,6 +423,13 @@ table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.srjp-table {
|
||||
min-width: 750px;
|
||||
}
|
||||
@@ -430,8 +439,13 @@ table {
|
||||
}
|
||||
|
||||
@media print {
|
||||
table {
|
||||
page-break-inside: auto;
|
||||
.table-container {
|
||||
max-height: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
select {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user