diff --git a/UI/OhVisualization.ts b/UI/OhVisualization.ts index dfc3551d9..0e06e3e64 100644 --- a/UI/OhVisualization.ts +++ b/UI/OhVisualization.ts @@ -27,7 +27,11 @@ export default class OpeningHoursVisualization extends UIElement { const values = [[], [], [], [], [], [], []]; - const iterator = oh.getIterator(from); + const start = new Date(from); + // We go one day more into the past, in order to force rendering of holidays in the start of the period + start.setDate(from.getDate() - 1); + + const iterator = oh.getIterator(start); let prevValue = undefined; while (iterator.advance(to)) { @@ -51,6 +55,10 @@ export default class OpeningHoursVisualization extends UIElement { // simply closed, nothing special here continue; } + + if(value.startDate < from){ + continue; + } // Get day: sunday is 0, monday is 1. We move everything so that monday == 0 values[(value.startDate.getDay() + 6) % 7].push(value); } @@ -233,11 +241,13 @@ export default class OpeningHoursVisualization extends UIElement { let innerContent: string[] = []; + // Add the lines for (const changeMoment of changeHours) { const offset = 100 * (changeMoment - earliestOpen) / availableArea; innerContent.push(new FixedUiElement("").SetStyle(`left:${offset}%;`).SetClass("ohviz-line").Render()) } + // Add the actual ranges for (const range of dayRanges) { if (!range.isOpen && !range.isSpecial) { innerContent.push( @@ -256,6 +266,7 @@ export default class OpeningHoursVisualization extends UIElement { new FixedUiElement(range.comment).SetStyle(`left:${startPercentage}%; width:${width}%`).SetClass("ohviz-range").Render()) } + // Add line for 'now' if (now >= 0 && now <= 100) { innerContent.push(new FixedUiElement("").SetStyle(`left:${now}%;`).SetClass("ohviz-now").Render()) } diff --git a/UI/SpecialVisualizations.ts b/UI/SpecialVisualizations.ts index 7f9d2ed51..3d48223ec 100644 --- a/UI/SpecialVisualizations.ts +++ b/UI/SpecialVisualizations.ts @@ -4,13 +4,26 @@ import {UIEventSource} from "../Logic/UIEventSource"; export default class SpecialVisualizations { - public static specialVisualizations: { funcName: string, constr: ((tagSource: UIEventSource, argument: string) => UIElement) }[] = + public static specialVisualizations: { + funcName: string, + constr: ((tagSource: UIEventSource, argument: string[]) => UIElement), + docs: string, + args: {name: string, defaultValue: string, doc: string}[] + }[] = [{ funcName: "opening_hours_table", - constr: (tagSource: UIEventSource, keyname) => { + docs: "Creates an opening-hours table. Usage: {opening_hours_table(opening_hours)} to create a table of the tag 'opening_hours'.", + args:[{name:"key", defaultValue: "opening_hours", doc: "The tag from which the table is constructed"}], + constr: (tagSource: UIEventSource, args) => { + let keyname = args[0]; + if (keyname === undefined || keyname === "") { + keyname = keyname ?? "opening_hours" + } return new OpeningHoursVisualization(tagSource, keyname) } - }] + }, + + ] } \ No newline at end of file diff --git a/UI/TagRendering.ts b/UI/TagRendering.ts index 049f42e2f..f29e3ce7b 100644 --- a/UI/TagRendering.ts +++ b/UI/TagRendering.ts @@ -518,7 +518,7 @@ export class TagRendering extends UIElement implements TagDependantUIElement { const knownSpecials : {funcName: string, constr: ((arg: string) => UIElement)}[]= SpecialVisualizations.specialVisualizations.map( special => ({ funcName: special.funcName, - constr: arg => special.constr(this.currentTags, arg) + constr: arg => special.constr(this.currentTags, arg.split(",")) }) ) diff --git a/css/openinghourstable.css b/css/openinghourstable.css index dc2772c04..f57374690 100644 --- a/css/openinghourstable.css +++ b/css/openinghourstable.css @@ -141,8 +141,8 @@ 45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 10px, - rgba(216, 235, 255, 0.5) 10px, - rgba(216, 235, 255, 0.5) 20px + rgba(102, 207, 255, 0.5) 10px, + rgba(102, 207, 255, 0.5) 20px ); position: absolute; left: 0; @@ -153,8 +153,29 @@ color: black; font-weight: bold; text-align: center; + border-radius: 1em; } +.ohviz-today .ohviz-day-off { + display: block; + background: repeating-linear-gradient( + 45deg, + rgba(255, 255, 255, 0), + rgba(255, 255, 255, 0) 10px, + rgb(153, 231, 255) 10px, + #99e7ff 20px + ); + position: absolute; + left: 0; + top: 0; + height: 100%; + width: 100%; + box-sizing: border-box; + color: black; + font-weight: bold; + text-align: center; + border-radius: 1em; +} .ohviz-now { position: absolute; diff --git a/test.ts b/test.ts index 5cfbd67bb..276fcddb4 100644 --- a/test.ts +++ b/test.ts @@ -2,14 +2,11 @@ import {UIEventSource} from "./Logic/UIEventSource"; -import OpeningHoursInput from "./UI/Input/OpeningHours/OpeningHoursInput"; +import OpeningHoursVisualization from "./UI/OhVisualization"; -const oh = "Sep 1-Feb 28 Mo-Th 08:00-12:00, 13:30-17:30; Mar 1-Aug 31 Mo-Fr 07:00-12:00, 13:30-17:30; PH off" +const oh = "Tu-Fr 09:00-17:00 'as usual'; mo off 'yyy'; su off 'xxx'" -const source = new UIEventSource("") -new OpeningHoursInput(source).AttachTo('maindiv') -console.log("SEtting ",oh) -source.setData(oh) +new OpeningHoursVisualization(new UIEventSource({opening_hours:oh}), 'opening_hours').AttachTo('maindiv') /*/