Osmwithspace/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Further butchering the UI framework

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-06-10 14:05:26 +02:00
parent 6415e195d1
commit d5d90afc74
10 changed files with 125 additions and 100 deletions
Download patch file Download diff file Expand all files Collapse all files

2
UI/OpeningHours/OpeningHoursPicker.ts
View file

@ -37,7 +37,7 @@ export default class OpeningHoursPicker extends InputElement<OpeningHour[]> {
source.addCallback(_ => {
self._ohs.setData(OH.MergeTimes(self._ohs.data))
})
const r = new OpeningHoursRange(source, `oh-table-${this._backgroundTable.id}`);
const r = new OpeningHoursRange(source, this._backgroundTable);
perWeekday[oh.weekday].push(r);
}

32
UI/OpeningHours/OpeningHoursPickerTable.ts
View file

@ -13,6 +13,7 @@ import BaseUIElement from "../BaseUIElement";
export default class OpeningHoursPickerTable extends InputElement<OpeningHour[]> {
public readonly IsSelected: UIEventSource<boolean>;
private readonly weekdays: UIEventSource<BaseUIElement[]>;
private readonly _element: HTMLTableElement
public static readonly days: BaseUIElement[] =
[
@ -28,6 +29,7 @@ export default class OpeningHoursPickerTable extends InputElement<OpeningHour[]>
private readonly source: UIEventSource<OpeningHour[]>;
private static _nextId = 0;
constructor(weekdays: UIEventSource<BaseUIElement[]>, source?: UIEventSource<OpeningHour[]>) {
super();
@ -36,9 +38,11 @@ export default class OpeningHoursPickerTable extends InputElement<OpeningHour[]>
this.IsSelected = new UIEventSource<boolean>(false);
this.SetStyle("width:100%;height:100%;display:block;");
}
InnerRender(): string {
const id = OpeningHoursPickerTable._nextId;
OpeningHoursPickerTable._nextId ++ ;
let rows = "";
const self = this;
for (let h = 0; h < 24; h++) {
@ -49,28 +53,32 @@ export default class OpeningHoursPickerTable extends InputElement<OpeningHour[]>
rows += `<tr><td rowspan="2" class="oh-left-col oh-timecell-full">${hs}:00</td>` +
Utils.Times(weekday => `<td id="${this.id}-timecell-${weekday}-${h}" class="oh-timecell oh-timecell-full oh-timecell-${weekday}"></td>`, 7) +
Utils.Times(weekday => `<td id="${id}-timecell-${weekday}-${h}" class="oh-timecell oh-timecell-full oh-timecell-${weekday}"></td>`, 7) +
'</tr><tr>' +
Utils.Times(id => `<td id="${this.id}-timecell-${id}-${h}-30" class="oh-timecell oh-timecell-half oh-timecell-${id}"></td>`, 7) +
Utils.Times(id => `<td id="${id}-timecell-${id}-${h}-30" class="oh-timecell oh-timecell-half oh-timecell-${id}"></td>`, 7) +
'</tr>';
}
let days = OpeningHoursPickerTable.days.map((day, i) => {
const innerContent = self.weekdays.data[i]?.Render() ?? "";
return day.Render() + "<span style='width:100%; display:block; position: relative;'>"+innerContent+"</span>";
const innerContent = self.weekdays.data[i]?.ConstructElement()?.innerHTML ?? "";
return day.ConstructElement().innerHTML + "<span style='width:100%; display:block; position: relative;'>"+innerContent+"</span>";
}).join("</th><th width='14%'>");
return `<table id="oh-table-${this.id}" class="oh-table"><tr><th></th><th width='14%'>${days}</th></tr>${rows}</table>`;
this._element = document.createElement("table")
const el = this._element;
this.SetClass("oh-table")
el.innerHTML =`<tr><th></th><th width='14%'>${days}</th></tr>${rows}`;
}
protected InnerUpdate() {
protected InnerConstructElement(): HTMLElement {
return this._element
}
private InnerUpdate(table: HTMLTableElement) {
const self = this;
const table = (document.getElementById(`oh-table-${this.id}`) as HTMLTableElement);
if (table === undefined || table === null) {
return;
}
for (const uielement of this.weekdays.data) {
uielement.Update();
}
let mouseIsDown = false;
let selectionStart: [number, number] = undefined;

19
UI/OpeningHours/OpeningHoursRange.ts
View file

@ -8,16 +8,18 @@ import Svg from "../../Svg";
import {Utils} from "../../Utils";
import Combine from "../Base/Combine";
import {OH, OpeningHour} from "./OpeningHours";
import OpeningHoursPickerTable from "./OpeningHoursPickerTable";
import BaseUIElement from "../BaseUIElement";
export default class OpeningHoursRange extends UIElement {
private _oh: UIEventSource<OpeningHour>;
private readonly _startTime: UIElement;
private readonly _endTime: UIElement;
private readonly _deleteRange: UIElement;
private readonly _tableId: string;
private readonly _startTime: BaseUIElement;
private readonly _endTime: BaseUIElement;
private readonly _deleteRange: BaseUIElement;
private readonly _tableId: OpeningHoursPickerTable;
constructor(oh: UIEventSource<OpeningHour>, tableId: string) {
constructor(oh: UIEventSource<OpeningHour>, tableId: OpeningHoursPickerTable) {
super(oh);
this._tableId = tableId;
const self = this;
@ -48,7 +50,7 @@ export default class OpeningHoursRange extends UIElement {
}
InnerRender(): UIElement {
InnerRender(): BaseUIElement {
const oh = this._oh.data;
if (oh === undefined) {
return undefined;
@ -71,8 +73,7 @@ export default class OpeningHoursRange extends UIElement {
if (oh.endHour == 0 && oh.endMinutes == 0) {
endhour = 24;
}
const height = (endhour - oh.startHour + ((oh.endMinutes - oh.startMinutes) / 60));
return height;
return (endhour - oh.startHour + ((oh.endMinutes - oh.startMinutes) / 60));
}
protected InnerUpdate(el: HTMLElement) {
@ -85,7 +86,7 @@ export default class OpeningHoursRange extends UIElement {
}
// The header cell containing monday, tuesday, ...
const table = document.getElementById(this._tableId) as HTMLTableElement;
const table = this._tableId.ConstructElement() as HTMLTableElement;
const bodyRect = document.body.getBoundingClientRect();
const rangeStart = table.rows[1].cells[1].getBoundingClientRect().top - bodyRect.top;

48
UI/OpeningHours/PublicHolidayInput.ts
View file

@ -1,21 +1,22 @@
import {OH} from "./OpeningHours";
import {UIEventSource} from "../../Logic/UIEventSource";
import {UIElement} from "../UIElement";
import Combine from "../Base/Combine";
import {TextField} from "../Input/TextField";
import {DropDown} from "../Input/DropDown";
import {InputElement} from "../Input/InputElement";
import Translations from "../i18n/Translations";
import BaseUIElement from "../BaseUIElement";
import {VariableUiElement} from "../Base/VariableUIElement";
export default class PublicHolidayInput extends InputElement<string> {
IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
private readonly _value: UIEventSource<string>;
private readonly _dropdown: UIElement;
private readonly _dropdown: BaseUIElement;
private readonly _mode: UIEventSource<string>;
private readonly _startHour: UIElement;
private readonly _endHour: UIElement;
private readonly _startHour: BaseUIElement;
private readonly _endHour: BaseUIElement;
private _element: VariableUiElement;
constructor(value: UIEventSource<string> = new UIEventSource<string>("")) {
super();
@ -31,7 +32,6 @@ export default class PublicHolidayInput extends InputElement<string> {
);
this._dropdown = dropdown.SetStyle("display:inline-block;");
this._mode = dropdown.GetValue();
this.ListenTo(this._mode);
const start = new TextField({
placeholder: "starthour",
@ -97,6 +97,27 @@ export default class PublicHolidayInput extends InputElement<string> {
end.GetValue().addCallbackAndRun(() => {
updateValue();
});
this._element = new VariableUiElement(this._mode.map(
mode => {
if (mode === " ") {
return new Combine([this._dropdown,
" ",
Translations.t.general.opening_hours.opensAt,
" ",
this._startHour,
" ",
Translations.t.general.opening_hours.openTill,
" ",
this._endHour]);
}
return this._dropdown;
}))
}
protected InnerConstructElement(): HTMLElement {
return this._element.ConstructElement();
}
public static LoadValue(str: string): {
@ -143,21 +164,6 @@ export default class PublicHolidayInput extends InputElement<string> {
}
}
InnerRender(): UIElement {
const mode = this._mode.data;
if (mode === " ") {
return new Combine([this._dropdown,
" ",
Translations.t.general.opening_hours.opensAt,
" ",
this._startHour,
" ",
Translations.t.general.opening_hours.openTill,
" ",
this._endHour]);
}
return this._dropdown;
}
GetValue(): UIEventSource<string> {
return this._value;