UI: fix small issues to OpeningHours picker, cleanup obsolete file

public/css/openinghourstable.css

@@ -44,16 +44,16 @@
 }
 
 .oh-timecell.oh-timecell-5:not(.oh-timecell-half), .oh-timecell.oh-timecell-6:not(.oh-timecell-half) {
-    background: repeating-linear-gradient(-65deg, var(--background-color) 0 4.8px, var(--subtle-detail-color) 7px)
+    background: repeating-linear-gradient(-65deg, var(--background-color) 0 4.8px, var(--low-interaction-background) 7px)
 }
 
 .oh-timecell-selected.oh-timecell-5:not(.oh-timecell-half), .oh-timecell-selected.oh-timecell-6:not(.oh-timecell-half) {
-    background: repeating-linear-gradient(-65deg, var(--catch-detail-color) 0 4.8px, var(--subtle-detail-color) 7px)
+    background: repeating-linear-gradient(-65deg, var(--catch-detail-color) 0 4.8px, var(--low-interaction-background) 7px)
 }
 
 .oh-timecell-half {
     border-bottom: 1px solid #ddd;
-    background: var(--subtle-detail-color);
+    background: var(--low-interaction-background);
 }
 
 

src/UI/InputElement/Helpers/OpeningHours/OHTable.svelte

@@ -164,7 +164,6 @@
 
   /**
    * Determines 'top' and 'height-attributes, returns a CSS-string'
-   * @param oh
    */
   function rangeStyle(oh: OpeningHour, totalHeight: number): string {
     const top = ((oh.startHour + oh.startMinutes / 60) * totalHeight) / 24

src/UI/InputElement/Helpers/OpeningHoursInput.svelte

@@ -41,4 +41,5 @@
   </button>
 </Popup>
 <button on:click={() => expanded.set(true)}>Pick opening hours</button>
+
 <PublicHolidaySelector value={state.phSelectorValue} />

src/UI/OpeningHours/OpeningHours.ts

@@ -859,12 +859,23 @@ This list will be sorted
         return ranges
     }
 
+    /**
+     *
+     * const oh = {weekday: 0, startHour: 18, startMinutes: 0, endHour: 20, endMinutes: 30}
+     * OH.isSame(oh, oh) // => true
+     * const ohEndMidnights = {...oh, endMinutes: 0, endHour: 24}
+     * OH.isSame(oh, ohEndMidnights) // => false
+     * OH.isSame(ohEndMidnights, ohEndMidnights) // => true
+     * const ohEndMidnightsAlt = {...ohEndMidnights, endMinutes: 0, endHour: 0}
+     * OH.isSame(ohEndMidnightsAlt, ohEndMidnights) // => true
+     *
+     */
     public static isSame(a: OpeningHour, b: OpeningHour) {
         return (
             a.weekday === b.weekday &&
             a.startHour === b.startHour &&
             a.startMinutes === b.startMinutes &&
-            a.endHour === b.endHour &&
+            a.endHour % 24 === b.endHour % 24 &&
             a.endMinutes === b.endMinutes
         )
     }

src/UI/OpeningHours/OpeningHoursRange.ts

@@ -1,71 +0,0 @@
-/**
- * A single opening hours range, shown on top of the OH-picker table
- */
-import { Utils } from "../../Utils"
-import Combine from "../Base/Combine"
-import { OH, OpeningHour } from "./OpeningHours"
-import BaseUIElement from "../BaseUIElement"
-import { FixedUiElement } from "../Base/FixedUiElement"
-import SvelteUIElement from "../Base/SvelteUIElement"
-import Delete_icon from "../../assets/svg/Delete_icon.svelte"
-
-export default class OpeningHoursRange extends BaseUIElement {
-    private _oh: OpeningHour
-
-    private readonly _onDelete: () => void
-
-    constructor(oh: OpeningHour, onDelete: () => void) {
-        super()
-        this._oh = oh
-        this._onDelete = onDelete
-        this.SetClass("oh-timerange")
-    }
-
-    InnerConstructElement(): HTMLElement {
-        const height = this.getHeight()
-        const oh = this._oh
-        const startTime = new FixedUiElement(
-            Utils.TwoDigits(oh.startHour) + ":" + Utils.TwoDigits(oh.startMinutes)
-        )
-        const endTime = new FixedUiElement(
-            Utils.TwoDigits(oh.endHour) + ":" + Utils.TwoDigits(oh.endMinutes)
-        )
-
-        const deleteRange = new SvelteUIElement(Delete_icon)
-            .SetClass("rounded-full w-6 h-6 block bg-black pointer-events-auto  ")
-            .onClick(() => {
-                this._onDelete()
-            })
-
-        let content: BaseUIElement
-        if (height > 3) {
-            content = new Combine([startTime, deleteRange, endTime]).SetClass(
-                "flex flex-col h-full justify-between"
-            )
-        } else {
-            content = new Combine([deleteRange])
-                .SetClass("flex flex-col h-full")
-                .SetStyle("flex-content: center; overflow-x: unset;")
-        }
-
-        const el = new Combine([content]).ConstructElement()
-
-        el.style.top = `${(100 * OH.startTime(oh)) / 24}%`
-        el.style.height = `${(100 * this.getHeight()) / 24}%`
-        return el
-    }
-
-    /**
-     * Gets the relative height, in number of hours to display
-     * Range: ]0 - 24]
-     */
-    private getHeight(): number {
-        const oh = this._oh
-
-        let endhour = oh.endHour
-        if (oh.endHour == 0 && oh.endMinutes == 0) {
-            endhour = 24
-        }
-        return endhour - oh.startHour + (oh.endMinutes - oh.startMinutes) / 60
-    }
-}

src/UI/OpeningHours/OpeningHoursVisualization.ts

@@ -8,7 +8,6 @@ import Toggle from "../Input/Toggle"
 import { VariableUiElement } from "../Base/VariableUIElement"
 import Table from "../Base/Table"
 import { Translation } from "../i18n/Translation"
-import { OsmConnection } from "../../Logic/Osm/OsmConnection"
 import Loading from "../Base/Loading"
 import opening_hours from "opening_hours"
 import Locale from "../i18n/Locale"