gnezim/flights_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Surface dayChange offsets in accordion time columns

Browse Source 
Angular stamps a small '-1' (or '+1') next to the time whenever the
transition start/end falls on a different calendar day than the leg
itself (e.g. registration opening the day before a 00:05 departure).
Read start.dayChange.value and end.dayChange.value on each transition
and render the offset as a superscript next to the time. Keeps the
blue accent color used elsewhere in the row for date lines.
This commit is contained in:
Anton
2026-04-18 18:42:51 +03:00
parent ef171c5e18
commit 3bda018996
2 changed files with 32 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/online-board/components/details-panels/FlightDetailsAccordion.scss
+8
View File
@@ -139,6 +139,14 @@
color: #222;
}
&__day-change {
margin-left: 6px;
font-size: 11px;
font-weight: 500;
color: #2457ff;
vertical-align: super;
}
&__time-date {
font-size: 12px;
color: #2457ff;
src/features/online-board/components/details-panels/FlightDetailsAccordion.tsx
+24 -8
View File
@@ -85,22 +85,38 @@ function TransitionTimes({
testId: string;
}): JSX.Element {
const { t } = useTranslation();
const start = item.start?.local;
const end = item.end?.local;
const start = item.start;
const end = item.end;
const startDayChange = start?.dayChange?.value ?? 0;
const endDayChange = end?.dayChange?.value ?? 0;
return (
<div className="details-row__times" data-testid={testId}>
{start && (
{start?.local && (
<div className="details-row__time-col">
<div className="details-row__time-label">{t("SHARED.TIME-START")}</div>
<div className="details-row__time-value">{formatLocalTime(start)}</div>
<div className="details-row__time-date">{formatDayMonthYear(start)}</div>
<div className="details-row__time-value">
{formatLocalTime(start.local)}
{startDayChange !== 0 && (
<span className="details-row__day-change">
{startDayChange > 0 ? `+${startDayChange}` : startDayChange}
</span>
)}
</div>
<div className="details-row__time-date">{formatDayMonthYear(start.local)}</div>
</div>
)}
{end && (
{end?.local && (
<div className="details-row__time-col">
<div className="details-row__time-label">{t("SHARED.TIME-END")}</div>
<div className="details-row__time-value">{formatLocalTime(end)}</div>
<div className="details-row__time-date">{formatDayMonthYear(end)}</div>
<div className="details-row__time-value">
{formatLocalTime(end.local)}
{endDayChange !== 0 && (
<span className="details-row__day-change">
{endDayChange > 0 ? `+${endDayChange}` : endDayChange}
</span>
)}
</div>
<div className="details-row__time-date">{formatDayMonthYear(end.local)}</div>
</div>
)}
</div>