diff --git a/Logic/PersonalLayout.ts b/Logic/PersonalLayout.ts index c1f4d3981..ed871d75a 100644 --- a/Logic/PersonalLayout.ts +++ b/Logic/PersonalLayout.ts @@ -18,7 +18,7 @@ export class PersonalLayout extends Layout { ); this.description = "The personal theme allows to select one or more layers from all the layouts, creating a truly personal editor" - this.icon = "./assets/star.svg" + this.icon = "./assets/add.svg" } } \ No newline at end of file diff --git a/README.md b/README.md index 07d67a609..fe481cd3f 100644 --- a/README.md +++ b/README.md @@ -84,6 +84,8 @@ To develop: 0. Make a fork and clone the repository. 1. Install `npm`. Linux: `sudo apt install npm` (or your favourite package manager), windows: install nodeJS: https://nodejs.org/en/download/ 2. Run `npm install` to install the dependencies +3. Download the editor layer index: `cd assets/ && wget https://osmlab.github.io/editor-layer-index/imagery.geojson --output-document=editor-layer-index.json` + 3. Run `npm run start` to build and host a local testversion 4. By default, the 'bookcases'-theme is loaded. In order to load another theme, use `layout=themename` or `userlayout=true#`. Note that the custom URLs (e.g. `bookcases.html`, `aed.html`, ...) _don't_ exist on the development version. (These are automatically generated from a template on the server). diff --git a/UI/Input/OpeningHours/OpeningHoursPickerTable.ts b/UI/Input/OpeningHours/OpeningHoursPickerTable.ts index 47553ee5f..99852def7 100644 --- a/UI/Input/OpeningHours/OpeningHoursPickerTable.ts +++ b/UI/Input/OpeningHours/OpeningHoursPickerTable.ts @@ -4,6 +4,7 @@ import {UIEventSource} from "../../../Logic/UIEventSource"; import {Utils} from "../../../Utils"; import {UIElement} from "../../UIElement"; import Translations from "../../i18n/Translations"; +import {Browser} from "leaflet"; /** * This is the base-table which is selectable by hovering over it. @@ -48,9 +49,9 @@ export default class OpeningHoursPickerTable extends InputElement rows += `${hs}:00` + - Utils.Times(weekday => ``, 7) + - '' + - Utils.Times(id => ``, 7) + + Utils.Times(weekday => ``, 7) + + '' + + Utils.Times(id => ``, 7) + ''; } let days = OpeningHoursPickerTable.days.map((day, i) => { @@ -63,6 +64,7 @@ export default class OpeningHoursPickerTable extends InputElement protected InnerUpdate() { const self = this; const table = (document.getElementById(`oh-table-${this.id}`) as HTMLTableElement); + console.log("Inner update!") if (table === undefined || table === null) { return; } @@ -109,7 +111,7 @@ export default class OpeningHoursPickerTable extends InputElement endHour: h(timeEnd + 1), endMinutes: m(timeEnd + 1) } - if(oh.endHour > 23){ + if (oh.endHour > 23) { oh.endHour = 24; oh.endMinutes = 0; } @@ -118,6 +120,10 @@ export default class OpeningHoursPickerTable extends InputElement self.source.ping(); // Clear the highlighting + let header = table.rows[0]; + for (let j = 1; j < header.cells.length; j++) { + header.cells[j].classList?.remove("oh-timecol-selected") + } for (let i = 1; i < table.rows.length; i++) { let row = table.rows[i] for (let j = 0; j < row.cells.length; j++) { @@ -135,7 +141,15 @@ export default class OpeningHoursPickerTable extends InputElement endSelection(); }; + let lastSelectionIend, lastSelectionJEnd; function selectAllBetween(iEnd, jEnd) { + + if (lastSelectionIend === iEnd && lastSelectionJEnd === jEnd) { + return; // We already did this + } + lastSelectionIend = iEnd; + lastSelectionJEnd = jEnd; + let iStart = selectionStart[0]; let jStart = selectionStart[1]; @@ -150,8 +164,34 @@ export default class OpeningHoursPickerTable extends InputElement jEnd = h; } + let header = table.rows[0]; + for (let j = 1; j < header.cells.length; j++) { + let cell = header.cells[j] + cell.classList?.remove("oh-timecol-selected-round-left"); + cell.classList?.remove("oh-timecol-selected-round-right"); + + if (jStart + 1 <= j && j <= jEnd + 1) { + cell.classList?.add("oh-timecol-selected") + if (jStart + 1 == j) { + cell.classList?.add("oh-timecol-selected-round-left"); + } + if (jEnd + 1 == j) { + cell.classList?.add("oh-timecol-selected-round-right"); + } + + } else { + cell.classList?.remove("oh-timecol-selected") + } + } + + for (let i = 1; i < table.rows.length; i++) { - let row = table.rows[i] + let row = table.rows[i]; + if (iStart <= i && i <= iEnd) { + row.classList?.add("oh-timerow-selected") + } else { + row.classList?.remove("oh-timerow-selected") + } for (let j = 0; j < row.cells.length; j++) { let cell = row.cells[j] if (cell === undefined) { @@ -160,19 +200,18 @@ export default class OpeningHoursPickerTable extends InputElement let offset = 0; if (i % 2 == 1) { if (j == 0) { + // This is the first column of a full hour -> This is the time indication (skip) continue; } offset = -1; } - - row.classList?.add("oh-timerow-selected"); - + + if (iStart <= i && i <= iEnd && jStart <= j + offset && j + offset <= jEnd) { cell?.classList?.add("oh-timecell-selected") } else { cell?.classList?.remove("oh-timecell-selected") - row.classList?.remove("oh-timerow-selected") } diff --git a/css/openinghourstable.css b/css/openinghourstable.css index 9a49836d3..09eeb057c 100644 --- a/css/openinghourstable.css +++ b/css/openinghourstable.css @@ -1,14 +1,23 @@ .oh-table { - border-collapse: collapse; width: 100%; height: 100%; + text-align: center; +} + +.oh-table th { + padding: 0; + margin: 0; +} + +.oh-table, .oh-table td { + border-collapse: collapse; + background-clip: padding-box; + border-right: 1px solid #ccc; } .oh-timecell { background-color: white; - border-left: 1px solid #000; - border-right: 1px solid #000000; position: relative; box-sizing: border-box; } @@ -28,17 +37,13 @@ } - .oh-timecell-selected { background-color: #0048ff; } -.oh-timerow-selected { - border-left: 10px solid black; - margin-left: 0px; -} .oh-timecell-half { + border-bottom: 1px solid #ddd; background-color: aliceblue; } @@ -60,6 +65,44 @@ padding-right: 0.2em; } +.oh-timecell-0 { + border-left: 10px solid rgba(0, 0, 0, 0); +} + +.oh-timecell-6 { + border-right: 10px solid rgba(0, 0, 0, 0); +} + +.oh-timecol-selected { + border-right: #0048ff; +} + +.oh-timecol-selected > span { + background-color: #0048ff; + color: white; + width: 100%; + display: block; +} + +.oh-timecol-selected-round-left > span { + border-top-left-radius: 5em; + border-bottom-left-radius: 5em; +} + +.oh-timecol-selected-round-right > span { + border-top-right-radius: 5em; + border-bottom-right-radius: 5em; +} + +.oh-timerow-selected .oh-timecell-0 { + border-left: 10px solid #0048ff !important; +} + +.oh-timerow-selected .oh-timecell-6 { + border-right: 10px solid #0048ff !important; +} + + .oh-draggable-header { background-color: blue; height: 0.5em; @@ -67,12 +110,12 @@ .oh-timerange { border-radius: 0.5em; - margin: 2px; + margin-left: 2px; display: block; position: absolute; top: 0; left: 0; - width: 100%; + width: calc(100% - 4px); background: #0048ff; z-index: 1; box-sizing: border-box; diff --git a/deploy.sh b/deploy.sh index 6c00c40ef..222470cd2 100755 --- a/deploy.sh +++ b/deploy.sh @@ -1,7 +1,6 @@ #! /bin/bash -cd assets/ -wget https://osmlab.github.io/editor-layer-index/imagery.geojson --output-document=editor-layer-index.json +cd assets/ && wget https://osmlab.github.io/editor-layer-index/imagery.geojson --output-document=editor-layer-index.json cd .. mkdir -p assets/generated diff --git a/test.ts b/test.ts index df0d80c9a..b84c50949 100644 --- a/test.ts +++ b/test.ts @@ -1,8 +1,14 @@ //* -import SpecialVisualizations from "./UI/SpecialVisualizations"; -SpecialVisualizations.HelpMessage.AttachTo("maindiv") + +import OpeningHoursPickerTable from "./UI/Input/OpeningHours/OpeningHoursPickerTable"; +import {UIElement} from "./UI/UIElement"; +import {UIEventSource} from "./Logic/UIEventSource"; +import {OpeningHour} from "./Logic/OpeningHours"; + +new OpeningHoursPickerTable(new UIEventSource([]), new UIEventSource([])) + .AttachTo("maindiv") /*/