diff --git a/public/css/index-tailwind-output.css b/public/css/index-tailwind-output.css index 2289d0e5f2..f0eababf87 100644 --- a/public/css/index-tailwind-output.css +++ b/public/css/index-tailwind-output.css @@ -1530,10 +1530,6 @@ input[type="range"].range-lg::-moz-range-thumb { margin-left: 1rem; } -.ml-6 { - margin-left: 1.5rem; -} - .mr-0\.5 { margin-right: 0.125rem; } diff --git a/public/css/openinghourstable.css b/public/css/openinghourstable.css index b94848465b..ae6fb0e80d 100644 --- a/public/css/openinghourstable.css +++ b/public/css/openinghourstable.css @@ -145,6 +145,12 @@ font-size: smaller; } +.open-end { + border-right: none !important; + border-radius: 0; + background: linear-gradient(to right, #99e7ffff, #99e7ff00 ); +} + .ohviz-today .ohviz-range { border: 1.5px solid black; } diff --git a/src/UI/InputElement/Helpers/OpeningHours/OHTable.svelte b/src/UI/InputElement/Helpers/OpeningHours/OHTable.svelte index 5671b32b26..303ab145c0 100644 --- a/src/UI/InputElement/Helpers/OpeningHours/OHTable.svelte +++ b/src/UI/InputElement/Helpers/OpeningHours/OHTable.svelte @@ -1,4 +1,7 @@ - -{#if !range.isOpen && !range.isSpecial} +{#if range.openEnd} +
+{:else if !range.isOpen && !range.isSpecial}
{textToShow}
{:else}
{textToShow}
diff --git a/src/UI/OpeningHours/Visualisation/RegularOpeningHoursTable.svelte b/src/UI/OpeningHours/Visualisation/RegularOpeningHoursTable.svelte index 6a0fca6a54..f6c98c5d68 100644 --- a/src/UI/OpeningHours/Visualisation/RegularOpeningHoursTable.svelte +++ b/src/UI/OpeningHours/Visualisation/RegularOpeningHoursTable.svelte @@ -10,16 +10,12 @@ import { Translation } from "../../i18n/Translation" import Translations from "../../i18n/Translations" import { OH } from "../OpeningHours" + import type { OpeningRange } from "../OpeningHours" + import { Utils } from "../../../Utils" export let oh: opening_hours - export let ranges: { - isOpen: boolean - isSpecial: boolean - comment: string - startDate: Date - endDate: Date - }[][] // Per weekday + export let ranges: OpeningRange[][] // Per weekday export let rangeStart: Date let isWeekstable: boolean = oh.isWeekStable() let today = new Date() @@ -34,8 +30,12 @@ ) let todayRanges = ranges.map((r, i) => r.filter(() => i === todayIndex)) + // For the header const [changeHours, changeHourText] = OH.allChangeMoments(weekdayRanges) + // For the header const [changeHoursWeekend, changeHourTextWeekend] = OH.allChangeMoments(weekendRanges) + // To calculate the range to display + const [changeHoursIncludingOpenEnd] = OH.allChangeMoments(weekdayRanges, true) const weekdayHeaders: { changeHours: number[] @@ -51,9 +51,9 @@ let todayChangeMoments: Set = new Set(OH.allChangeMoments(todayRanges)[0]) // By default, we always show the range between 8 - 19h, in order to give a stable impression // Ofc, a bigger range is used if needed - let earliestOpen = Math.min(8 * 60 * 60, ...changeHours) + let earliestOpen = Math.min(8 * 60 * 60, ...changeHoursIncludingOpenEnd) // We always make sure there is 30m of leeway in order to give enough room for the closing entry - let latestclose = Math.max(19 * 60 * 60, Math.max(...changeHours) + 30 * 60) + let latestclose = Math.max(19 * 60 * 60, Math.max(...changeHoursIncludingOpenEnd) + 30 * 60) let availableArea = latestclose - earliestOpen function calcLineOffset(moment: number) { diff --git a/test/UI/OpeningHours.spec.ts b/test/UI/OpeningHours.spec.ts new file mode 100644 index 0000000000..51e4af5789 --- /dev/null +++ b/test/UI/OpeningHours.spec.ts @@ -0,0 +1,56 @@ +import { describe, it } from "vitest" +import { REPORT_REASONS } from "panoramax-js" +import Translations from "../../src/UI/i18n/Translations" +import { OH, OpeningRange } from "../../src/UI/OpeningHours/OpeningHours" +import { expect } from "chai" + +describe("OH", () => { + describe("getRanges", () => { + it("standard opening hours", () => { + const oh_obj = OH.createOhObject({ + "opening_hours": "10:00-18:00", + _lat: 0, _lon: 0, _country: "be", + }, "10:00-18:00", "be") + const ranges = OH.getRanges(oh_obj, new Date("2025-06-10T00:00:00Z"), new Date("2025-06-11T00:00:00Z")) + // Deep equal compares the dates correctly + expect(ranges[1]).to.deep.equal([ + { + "comment": undefined, + "endDate": new Date("2025-06-10T16:00:00.000Z"), + "isOpen": true, + "isSpecial": false, + "openEnd": false, + "startDate": new Date("2025-06-10T08:00:00.000Z"), + }, + ]) + }) + it("open ended opening hours", () => { + const oh_obj = OH.createOhObject({ + "opening_hours": "10:00-18:00+", + _lat: 0, _lon: 0, _country: "be", + }, "10:00+", "be") + const ranges = OH.getRanges(oh_obj, new Date("2025-06-09T00:00:00Z"), new Date("2025-06-16T00:00:00Z")) + // Deep equal compares the dates correctly + expect(ranges[1]).to.deep.equal([ + { + "comment": undefined, + "endDate": new Date("2025-06-10T11:00:00.000Z"), + "isOpen": false, + "isSpecial": true, + "openEnd": true, + "startDate": new Date("2025-06-10T08:00:00.000Z"), + }, + ]) + expect(ranges.at(-1)).to.deep.equal([ + { + "comment": undefined, + "endDate": new Date("2025-06-15T11:00:00.000Z"), + "isOpen": false, + "isSpecial": true, + "openEnd": true, + "startDate": new Date("2025-06-15T08:00:00.000Z"), + }, + ]) + }) + }) +})