From 812563ddc5567ea04c05d0f90c1527a51fe642a7 Mon Sep 17 00:00:00 2001 From: pietervdvn Date: Wed, 13 Jul 2022 17:58:01 +0200 Subject: [PATCH 1/9] Add first dashboard layout --- UI/Base/Toggleable.ts | 5 +- UI/DashboardGui.ts | 186 +++++++++++++++++++++++++++++++++++++ UI/DefaultGUI.ts | 7 +- UI/Popup/FeatureInfoBox.ts | 4 +- index.ts | 10 +- 5 files changed, 201 insertions(+), 11 deletions(-) create mode 100644 UI/DashboardGui.ts diff --git a/UI/Base/Toggleable.ts b/UI/Base/Toggleable.ts index 848fc80b6..5b884fa6b 100644 --- a/UI/Base/Toggleable.ts +++ b/UI/Base/Toggleable.ts @@ -26,7 +26,8 @@ export default class Toggleable extends Combine { public readonly isVisible = new UIEventSource(false) constructor(title: Title | Combine | BaseUIElement, content: BaseUIElement, options?: { - closeOnClick: true | boolean + closeOnClick?: true | boolean, + height?: "100vh" | string }) { super([title, content]) content.SetClass("animate-height border-l-4 pl-2 block") @@ -72,7 +73,7 @@ export default class Toggleable extends Combine { this.isVisible.addCallbackAndRun(isVisible => { if (isVisible) { - contentElement.style.maxHeight = "100vh" + contentElement.style.maxHeight = options?.height ?? "100vh" contentElement.style.overflowY = "auto" contentElement.style["-webkit-mask-image"] = "unset" } else { diff --git a/UI/DashboardGui.ts b/UI/DashboardGui.ts new file mode 100644 index 000000000..7fc5d7e3f --- /dev/null +++ b/UI/DashboardGui.ts @@ -0,0 +1,186 @@ +import FeaturePipelineState from "../Logic/State/FeaturePipelineState"; +import {DefaultGuiState} from "./DefaultGuiState"; +import {FixedUiElement} from "./Base/FixedUiElement"; +import {Utils} from "../Utils"; +import Combine from "./Base/Combine"; +import ShowDataLayer from "./ShowDataLayer/ShowDataLayer"; +import LayerConfig from "../Models/ThemeConfig/LayerConfig"; +import * as home_location_json from "../assets/layers/home_location/home_location.json"; +import State from "../State"; +import Title from "./Base/Title"; +import {MinimapObj} from "./Base/Minimap"; +import BaseUIElement from "./BaseUIElement"; +import {VariableUiElement} from "./Base/VariableUIElement"; +import {GeoOperations} from "../Logic/GeoOperations"; +import {BBox} from "../Logic/BBox"; +import {OsmFeature} from "../Models/OsmFeature"; +import SearchAndGo from "./BigComponents/SearchAndGo"; +import FeatureInfoBox from "./Popup/FeatureInfoBox"; +import {UIEventSource} from "../Logic/UIEventSource"; +import LanguagePicker from "./LanguagePicker"; +import Lazy from "./Base/Lazy"; +import TagRenderingAnswer from "./Popup/TagRenderingAnswer"; + +export default class DashboardGui { + private readonly guiState: DefaultGuiState; + private readonly state: FeaturePipelineState; + private readonly currentView: UIEventSource = new UIEventSource("No selection") + + + constructor(state: FeaturePipelineState, guiState: DefaultGuiState) { + this.state = state; + this.guiState = guiState; + + } + + private singleElementCache: Record = {} + + private singleElementView(element: OsmFeature, layer: LayerConfig, distance: number): BaseUIElement { + if (this.singleElementCache[element.properties.id] !== undefined) { + return this.singleElementCache[element.properties.id] + } + const tags = this.state.allElements.getEventSourceById(element.properties.id) + const title = new Combine([new Title(new TagRenderingAnswer(tags, layer.title, this.state), 4), + Math.floor(distance) + "m away" + ]).SetClass("flex"); + // FeatureInfoBox.GenerateTitleBar(tags, layer, this.state) + + const currentView = this.currentView + const info = new Lazy(() => new Combine([ + FeatureInfoBox.GenerateTitleBar(tags, layer, this.state), + FeatureInfoBox.GenerateContent(tags, layer, this.state)]).SetStyle("overflox-x: hidden")); + title.onClick(() => { + currentView.setData(info) + }) + + currentView.addCallbackAndRunD(cv => { + if (cv == info) { + title.SetClass("bg-blue-300") + } else { + title.RemoveClass("bg-blue-300") + } + }) + + return title; + } + + private mainElementsView(elements: { element: OsmFeature, layer: LayerConfig, distance: number }[]): BaseUIElement { + const self = this + if (elements === undefined) { + return new FixedUiElement("Initializing") + } + if (elements.length == 0) { + return new FixedUiElement("No elements in view") + } + return new Combine(elements.map(e => self.singleElementView(e.element, e.layer, e.distance))) + } + + public setup(): void { + + const state = this.state; + + if (this.state.layoutToUse.customCss !== undefined) { + if (window.location.pathname.indexOf("index") >= 0) { + Utils.LoadCustomCss(this.state.layoutToUse.customCss) + } + } + const map = this.SetupMap(); + + Utils.downloadJson("./service-worker-version").then(data => console.log("Service worker", data)).catch(e => console.log("Service worker not active")) + + document.getElementById("centermessage").classList.add("hidden") + + const layers: Record = {} + for (const layer of state.layoutToUse.layers) { + layers[layer.id] = layer; + } + + + const elementsInview = map.bounds.map(bbox => { + if (bbox === undefined) { + return undefined + } + const location = map.location.data; + const loc: [number, number] = [location.lon, location.lat] + + const elementsWithMeta: { features: OsmFeature[], layer: string }[] = state.featurePipeline.GetAllFeaturesAndMetaWithin(bbox) + + let elements: { distance: number, center: [number, number], element: OsmFeature, layer: LayerConfig }[] = [] + let seenElements = new Set() + for (const elementsWithMetaElement of elementsWithMeta) { + for (const element of elementsWithMetaElement.features) { + if (!bbox.overlapsWith(BBox.get(element))) { + continue + } + if (seenElements.has(element.properties.id)) { + continue + } + seenElements.add(element.properties.id) + const center = GeoOperations.centerpointCoordinates(element); + elements.push({ + element, + center, + layer: layers[elementsWithMetaElement.layer], + distance: GeoOperations.distanceBetween(loc, center) + }) + + } + } + + + elements.sort((e0, e1) => e0.distance - e1.distance) + + + return elements; + }, [this.state.featurePipeline.newDataLoadedSignal]); + + const welcome = new Combine([state.layoutToUse.description, state.layoutToUse.descriptionTail]) + const self = this; + self.currentView.setData(welcome) + new Combine([ + + new Combine([map.SetClass("w-full h-64"), + new Title(state.layoutToUse.title, 2).onClick(() => { + self.currentView.setData(welcome) + }), + new LanguagePicker(Object.keys(state.layoutToUse.title)), + new SearchAndGo(state), + new Title( + new VariableUiElement(elementsInview.map(elements => "There are " + elements?.length + " elements in view"))) + .onClick(() => self.currentView.setData("Statistics")), + new VariableUiElement(elementsInview.map(elements => this.mainElementsView(elements)))]) + .SetClass("w-1/2 m-4"), + new VariableUiElement(this.currentView).SetClass("w-1/2 h-full overflow-y-auto m-4") + ]).SetClass("flex h-full") + .AttachTo("leafletDiv") + + } + + private SetupElement() { + const t = new Title("Elements in view", 3) + + } + + private SetupMap(): MinimapObj & BaseUIElement { + const state = this.state; + const guiState = this.guiState; + + new ShowDataLayer({ + leafletMap: state.leafletMap, + layerToShow: new LayerConfig(home_location_json, "home_location", true), + features: state.homeLocation, + state + }) + + state.leafletMap.addCallbackAndRunD(_ => { + // Lets assume that all showDataLayers are initialized at this point + state.selectedElement.ping() + State.state.locationControl.ping(); + return true; + }) + + return state.mainMapObject + + } + +} \ No newline at end of file diff --git a/UI/DefaultGUI.ts b/UI/DefaultGUI.ts index a14d38f25..9252faed3 100644 --- a/UI/DefaultGUI.ts +++ b/UI/DefaultGUI.ts @@ -44,14 +44,9 @@ export default class DefaultGUI { } public setup(){ - if (this.state.layoutToUse.customCss !== undefined) { - Utils.LoadCustomCss(this.state.layoutToUse.customCss); - } - this.SetupUIElements(); this.SetupMap() - if (this.state.layoutToUse.customCss !== undefined && window.location.pathname.indexOf("index") >= 0) { Utils.LoadCustomCss(this.state.layoutToUse.customCss) } @@ -144,7 +139,7 @@ export default class DefaultGUI { new ShowDataLayer({ leafletMap: state.leafletMap, - layerToShow: new LayerConfig(home_location_json, "all_known_layers", true), + layerToShow: new LayerConfig(home_location_json, "home_location", true), features: state.homeLocation, state }) diff --git a/UI/Popup/FeatureInfoBox.ts b/UI/Popup/FeatureInfoBox.ts index a277a7d7f..f3be3a279 100644 --- a/UI/Popup/FeatureInfoBox.ts +++ b/UI/Popup/FeatureInfoBox.ts @@ -46,7 +46,7 @@ export default class FeatureInfoBox extends ScrollableFullScreen { } - private static GenerateTitleBar(tags: UIEventSource, + public static GenerateTitleBar(tags: UIEventSource, layerConfig: LayerConfig, state: {}): BaseUIElement { const title = new TagRenderingAnswer(tags, layerConfig.title ?? new TagRenderingConfig("POI"), state) @@ -64,7 +64,7 @@ export default class FeatureInfoBox extends ScrollableFullScreen { ]) } - private static GenerateContent(tags: UIEventSource, + public static GenerateContent(tags: UIEventSource, layerConfig: LayerConfig, state: FeaturePipelineState): BaseUIElement { let questionBoxes: Map = new Map(); diff --git a/index.ts b/index.ts index 355eb5e93..3221d0c07 100644 --- a/index.ts +++ b/index.ts @@ -9,6 +9,8 @@ import DefaultGUI from "./UI/DefaultGUI"; import State from "./State"; import ShowOverlayLayerImplementation from "./UI/ShowDataLayer/ShowOverlayLayerImplementation"; import {DefaultGuiState} from "./UI/DefaultGuiState"; +import {QueryParameters} from "./Logic/Web/QueryParameters"; +import DashboardGui from "./UI/DashboardGui"; // Workaround for a stupid crash: inject some functions which would give stupid circular dependencies or crash the other nodejs scripts running from console MinimapImplementation.initialize() @@ -36,7 +38,13 @@ class Init { // This 'leaks' the global state via the window object, useful for debugging // @ts-ignore window.mapcomplete_state = State.state; - new DefaultGUI(State.state, guiState).setup() + + const mode = QueryParameters.GetQueryParameter("mode", "map", "The mode the application starts in, e.g. 'map' or 'dashboard'") + if(mode.data === "dashboard"){ + new DashboardGui(State.state, guiState).setup() + }else{ + new DefaultGUI(State.state, guiState).setup() + } } } From 89278f6d7483a4d64199f35c0819027be93be5e5 Mon Sep 17 00:00:00 2001 From: pietervdvn Date: Fri, 15 Jul 2022 12:56:16 +0200 Subject: [PATCH 2/9] Styling tweaks to the dashboar --- UI/DashboardGui.ts | 184 +++++++++++------- assets/layers/parking/parking.json | 2 +- .../mapcomplete-changes.json | 55 ++---- css/index-tailwind-output.css | 80 +++++--- langs/layers/nl.json | 2 +- 5 files changed, 177 insertions(+), 146 deletions(-) diff --git a/UI/DashboardGui.ts b/UI/DashboardGui.ts index 7fc5d7e3f..a8a5931e8 100644 --- a/UI/DashboardGui.ts +++ b/UI/DashboardGui.ts @@ -20,17 +20,40 @@ import {UIEventSource} from "../Logic/UIEventSource"; import LanguagePicker from "./LanguagePicker"; import Lazy from "./Base/Lazy"; import TagRenderingAnswer from "./Popup/TagRenderingAnswer"; +import Hash from "../Logic/Web/Hash"; +import FilterView from "./BigComponents/FilterView"; +import {FilterState} from "../Models/FilteredLayer"; + export default class DashboardGui { - private readonly guiState: DefaultGuiState; private readonly state: FeaturePipelineState; private readonly currentView: UIEventSource = new UIEventSource("No selection") constructor(state: FeaturePipelineState, guiState: DefaultGuiState) { this.state = state; - this.guiState = guiState; + } + private viewSelector(shown: BaseUIElement, fullview: BaseUIElement, hash?: string): BaseUIElement { + const currentView = this.currentView + shown.SetClass("pl-1 pr-1 rounded-md") + shown.onClick(() => { + currentView.setData(fullview) + }) + Hash.hash.addCallbackAndRunD(h => { + if (h === hash) { + currentView.setData(fullview) + } + }) + currentView.addCallbackAndRunD(cv => { + if (cv == fullview) { + shown.SetClass("bg-unsubtle") + Hash.hash.setData(hash) + } else { + shown.RemoveClass("bg-unsubtle") + } + }) + return shown; } private singleElementCache: Record = {} @@ -41,27 +64,16 @@ export default class DashboardGui { } const tags = this.state.allElements.getEventSourceById(element.properties.id) const title = new Combine([new Title(new TagRenderingAnswer(tags, layer.title, this.state), 4), - Math.floor(distance) + "m away" - ]).SetClass("flex"); - // FeatureInfoBox.GenerateTitleBar(tags, layer, this.state) + distance < 900 ? Math.floor(distance)+"m away": + Utils.Round(distance / 1000) + "km away" + ]).SetClass("flex justify-between"); - const currentView = this.currentView const info = new Lazy(() => new Combine([ FeatureInfoBox.GenerateTitleBar(tags, layer, this.state), FeatureInfoBox.GenerateContent(tags, layer, this.state)]).SetStyle("overflox-x: hidden")); - title.onClick(() => { - currentView.setData(info) - }) - currentView.addCallbackAndRunD(cv => { - if (cv == info) { - title.SetClass("bg-blue-300") - } else { - title.RemoveClass("bg-blue-300") - } - }) - return title; + return this.viewSelector(title, info); } private mainElementsView(elements: { element: OsmFeature, layer: LayerConfig, distance: number }[]): BaseUIElement { @@ -75,6 +87,58 @@ export default class DashboardGui { return new Combine(elements.map(e => self.singleElementView(e.element, e.layer, e.distance))) } + private visibleElements(map: MinimapObj & BaseUIElement, layers: Record): { distance: number, center: [number, number], element: OsmFeature, layer: LayerConfig }[]{ + const bbox= map.bounds.data + if (bbox === undefined) { + return undefined + } + const location = map.location.data; + const loc: [number, number] = [location.lon, location.lat] + + const elementsWithMeta: { features: OsmFeature[], layer: string }[] = this.state.featurePipeline.GetAllFeaturesAndMetaWithin(bbox) + + let elements: { distance: number, center: [number, number], element: OsmFeature, layer: LayerConfig }[] = [] + let seenElements = new Set() + for (const elementsWithMetaElement of elementsWithMeta) { + const layer = layers[elementsWithMetaElement.layer] + const filtered = this.state.filteredLayers.data.find(fl => fl.layerDef == layer); + for (const element of elementsWithMetaElement.features) { + console.log("Inspecting ", element.properties.id) + if(!filtered.isDisplayed.data){ + continue + } + if (seenElements.has(element.properties.id)) { + continue + } + seenElements.add(element.properties.id) + if (!bbox.overlapsWith(BBox.get(element))) { + continue + } + if (layer?.isShown?.GetRenderValue(element)?.Subs(element.properties)?.txt === "no") { + continue + } + const activeFilters : FilterState[] = Array.from(filtered.appliedFilters.data.values()); + if(activeFilters.some(filter => !filter?.currentFilter?.matchesProperties(element.properties))){ + continue + } + const center = GeoOperations.centerpointCoordinates(element); + elements.push({ + element, + center, + layer: layers[elementsWithMetaElement.layer], + distance: GeoOperations.distanceBetween(loc, center) + }) + + } + } + + + elements.sort((e0, e1) => e0.distance - e1.distance) + + + return elements; + } + public setup(): void { const state = this.state; @@ -95,75 +159,51 @@ export default class DashboardGui { layers[layer.id] = layer; } - - const elementsInview = map.bounds.map(bbox => { - if (bbox === undefined) { - return undefined + const self = this; + const elementsInview = new UIEventSource([]); + function update(){ + elementsInview.setData( self.visibleElements(map, layers)) + } + + map.bounds.addCallbackAndRun(update) + state.featurePipeline.newDataLoadedSignal.addCallback(update); + state.filteredLayers.addCallbackAndRun(fls => { + for (const fl of fls) { + fl.isDisplayed.addCallback(update) + fl.appliedFilters.addCallback(update) } - const location = map.location.data; - const loc: [number, number] = [location.lon, location.lat] - - const elementsWithMeta: { features: OsmFeature[], layer: string }[] = state.featurePipeline.GetAllFeaturesAndMetaWithin(bbox) - - let elements: { distance: number, center: [number, number], element: OsmFeature, layer: LayerConfig }[] = [] - let seenElements = new Set() - for (const elementsWithMetaElement of elementsWithMeta) { - for (const element of elementsWithMetaElement.features) { - if (!bbox.overlapsWith(BBox.get(element))) { - continue - } - if (seenElements.has(element.properties.id)) { - continue - } - seenElements.add(element.properties.id) - const center = GeoOperations.centerpointCoordinates(element); - elements.push({ - element, - center, - layer: layers[elementsWithMetaElement.layer], - distance: GeoOperations.distanceBetween(loc, center) - }) - - } - } - - - elements.sort((e0, e1) => e0.distance - e1.distance) - - - return elements; - }, [this.state.featurePipeline.newDataLoadedSignal]); + }) const welcome = new Combine([state.layoutToUse.description, state.layoutToUse.descriptionTail]) - const self = this; self.currentView.setData(welcome) new Combine([ - new Combine([map.SetClass("w-full h-64"), - new Title(state.layoutToUse.title, 2).onClick(() => { - self.currentView.setData(welcome) - }), - new LanguagePicker(Object.keys(state.layoutToUse.title)), + new Combine([ + this.viewSelector(new Title(state.layoutToUse.title, 2), welcome), + map.SetClass("w-full h-64 shrink-0 rounded-lg"), new SearchAndGo(state), - new Title( - new VariableUiElement(elementsInview.map(elements => "There are " + elements?.length + " elements in view"))) - .onClick(() => self.currentView.setData("Statistics")), - new VariableUiElement(elementsInview.map(elements => this.mainElementsView(elements)))]) - .SetClass("w-1/2 m-4"), - new VariableUiElement(this.currentView).SetClass("w-1/2 h-full overflow-y-auto m-4") + this.viewSelector(new Title( + new VariableUiElement(elementsInview.map(elements => "There are " + elements?.length + " elements in view"))), new FixedUiElement("Stats")), + + this.viewSelector(new FixedUiElement("Filter"), + new Lazy(() => { + return new FilterView(state.filteredLayers, state.overlayToggles) + }) + ), + + new VariableUiElement(elementsInview.map(elements => this.mainElementsView(elements).SetClass("block mx-2"))) + .SetClass("block shrink-2 overflow-x-scroll h-full border-2 border-subtle rounded-lg"), + new LanguagePicker(Object.keys(state.layoutToUse.title)).SetClass("mt-2") + ]) + .SetClass("w-1/2 m-4 flex flex-col"), + new VariableUiElement(this.currentView).SetClass("w-1/2 overflow-y-auto m-4 ml-0 p-2 border-2 border-subtle rounded-xl m-y-8") ]).SetClass("flex h-full") .AttachTo("leafletDiv") } - private SetupElement() { - const t = new Title("Elements in view", 3) - - } - private SetupMap(): MinimapObj & BaseUIElement { const state = this.state; - const guiState = this.guiState; new ShowDataLayer({ leafletMap: state.leafletMap, diff --git a/assets/layers/parking/parking.json b/assets/layers/parking/parking.json index 27159a450..0e7d24f8c 100644 --- a/assets/layers/parking/parking.json +++ b/assets/layers/parking/parking.json @@ -140,7 +140,7 @@ }, "render": { "en": "There are {capacity:disabled} disabled parking spots", - "nl": "Er zijn capacity:disabled} parkeerplaatsen voor gehandicapten" + "nl": "Er zijn {capacity:disabled} parkeerplaatsen voor gehandicapten" } }, { diff --git a/assets/themes/mapcomplete-changes/mapcomplete-changes.json b/assets/themes/mapcomplete-changes/mapcomplete-changes.json index ab3cce9cd..60452cb5b 100644 --- a/assets/themes/mapcomplete-changes/mapcomplete-changes.json +++ b/assets/themes/mapcomplete-changes/mapcomplete-changes.json @@ -1,19 +1,13 @@ { "id": "mapcomplete-changes", "title": { - "en": "Changes made with MapComplete", - "nl": "Wijzigingen gemaakt met MapComplete", - "de": "Mit MapComplete vorgenommene Änderungen" + "en": "Changes made with MapComplete" }, "shortDescription": { - "en": "Shows changes made by MapComplete", - "nl": "Toont wijzigingen gemaakt met MapComplete", - "de": "Zeigt die mit MapComplete vorgenommenen Änderungen" + "en": "Shows changes made by MapComplete" }, "description": { - "en": "This maps shows all the changes made with MapComplete", - "nl": "Deze kaart toont alle wijzigingen die met MapComplete werden gemaakt", - "de": "Diese Karte zeigt alle mit MapComplete vorgenommenen Änderungen" + "en": "This maps shows all the changes made with MapComplete" }, "maintainer": "", "icon": "./assets/svg/logo.svg", @@ -28,8 +22,7 @@ { "id": "mapcomplete-changes", "name": { - "en": "Changeset centers", - "de": "Zentrum der Änderungssätze" + "en": "Changeset centers" }, "minzoom": 0, "source": { @@ -43,47 +36,35 @@ ], "title": { "render": { - "en": "Changeset for {theme}", - "nl": "Wijzigingset voor {theme}", - "de": "Änderungssatz für {theme}" + "en": "Changeset for {theme}" } }, "description": { - "en": "Shows all MapComplete changes", - "nl": "Toont alle wijzigingen met MapComplete", - "de": "Zeigt alle MapComplete Änderungen" + "en": "Shows all MapComplete changes" }, "tagRenderings": [ { "id": "render_id", "render": { - "en": "Changeset {id}", - "nl": "Wijzigingset {id}", - "de": "Änderungssatz {id}" + "en": "Changeset {id}" } }, { "id": "contributor", "render": { - "en": "Change made by {_last_edit:contributor}", - "nl": "Wijziging gemaakt door {_last_edit:contributor}", - "de": "Geändert von {_last_edit:contributor}" + "en": "Change made by {_last_edit:contributor}" } }, { "id": "theme", "render": { - "en": "Change with theme {theme}", - "nl": "Wijziging met thema {theme}", - "de": "Änderung mit Thema {theme}" + "en": "Change with theme {theme}" }, "mappings": [ { "if": "theme~http.*", "then": { - "en": "Change with unofficial theme {theme}", - "nl": "Wijziging met officieus thema {theme}", - "de": "Änderung mit inoffiziellem Thema {theme}" + "en": "Change with unofficial theme {theme}" } } ] @@ -379,9 +360,7 @@ } ], "question": { - "en": "Themename contains {search}", - "nl": "Themanaam bevat {search}", - "de": "Themenname enthält {search}" + "en": "Themename contains {search}" } } ] @@ -397,9 +376,7 @@ } ], "question": { - "en": "Made by contributor {search}", - "nl": "Gemaakt door bijdrager {search}", - "de": "Erstellt von {search}" + "en": "Made by contributor {search}" } } ] @@ -415,9 +392,7 @@ } ], "question": { - "en": "Not made by contributor {search}", - "nl": "Niet gemaakt door bijdrager {search}", - "de": "Nicht erstellt von {search}" + "en": "Not made by contributor {search}" } } ] @@ -432,9 +407,7 @@ { "id": "link_to_more", "render": { - "en": "More statistics can be found here", - "nl": "Meer statistieken kunnen hier gevonden worden", - "de": "Weitere Statistiken finden Sie hier" + "en": "More statistics can be found here" } }, { diff --git a/css/index-tailwind-output.css b/css/index-tailwind-output.css index 36f99ace6..13e1d46b0 100644 --- a/css/index-tailwind-output.css +++ b/css/index-tailwind-output.css @@ -843,6 +843,11 @@ video { margin: 1px; } +.mx-2 { + margin-left: 0.5rem; + margin-right: 0.5rem; +} + .my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; @@ -866,6 +871,14 @@ video { margin-bottom: 1rem; } +.mt-2 { + margin-top: 0.5rem; +} + +.ml-0 { + margin-left: 0px; +} + .mt-4 { margin-top: 1rem; } @@ -890,10 +903,6 @@ video { margin-right: 1rem; } -.mt-2 { - margin-top: 0.5rem; -} - .mr-2 { margin-right: 0.5rem; } @@ -1046,6 +1055,10 @@ video { height: 2rem; } +.h-64 { + height: 16rem; +} + .h-full { height: 100%; } @@ -1090,10 +1103,6 @@ video { height: 0px; } -.h-64 { - height: 16rem; -} - .h-3 { height: 0.75rem; } @@ -1138,6 +1147,10 @@ video { width: 6rem; } +.w-1\/2 { + width: 50%; +} + .w-6 { width: 1.5rem; } @@ -1171,10 +1184,6 @@ video { width: min-content; } -.w-1\/2 { - width: 50%; -} - .w-max { width: -webkit-max-content; width: max-content; @@ -1356,6 +1365,10 @@ video { overflow-y: auto; } +.overflow-x-scroll { + overflow-x: scroll; +} + .truncate { overflow: hidden; text-overflow: ellipsis; @@ -1395,14 +1408,18 @@ video { border-radius: 0.25rem; } -.rounded-xl { - border-radius: 0.75rem; +.rounded-md { + border-radius: 0.375rem; } .rounded-lg { border-radius: 0.5rem; } +.rounded-xl { + border-radius: 0.75rem; +} + .rounded-sm { border-radius: 0.125rem; } @@ -1524,14 +1541,14 @@ video { padding: 1rem; } -.p-1 { - padding: 0.25rem; -} - .p-2 { padding: 0.5rem; } +.p-1 { + padding: 0.25rem; +} + .p-0 { padding: 0px; } @@ -1554,6 +1571,14 @@ video { padding-right: 0.5rem; } +.pl-1 { + padding-left: 0.25rem; +} + +.pr-1 { + padding-right: 0.25rem; +} + .pb-12 { padding-bottom: 3rem; } @@ -1578,14 +1603,6 @@ video { padding-bottom: 0.25rem; } -.pl-1 { - padding-left: 0.25rem; -} - -.pr-1 { - padding-right: 0.25rem; -} - .pt-2 { padding-top: 0.5rem; } @@ -1693,10 +1710,6 @@ video { text-transform: lowercase; } -.capitalize { - text-transform: capitalize; -} - .italic { font-style: italic; } @@ -1849,6 +1862,11 @@ video { color: var(--subtle-detail-color-contrast); } +.bg-unsubtle { + background-color: var(--unsubtle-detail-color); + color: var(--unsubtle-detail-color-contrast); +} + :root { /* The main colour scheme of mapcomplete is configured here. * For a custom styling, set 'customCss' in your layoutConfig and overwrite some of these. @@ -2477,7 +2495,7 @@ input { .mapping-icon-small-height { /* A mapping icon type */ - height: 2rem; + height: 1.5rem; margin-right: 0.5rem; width: unset; } diff --git a/langs/layers/nl.json b/langs/layers/nl.json index cfba0ceeb..11d154dcd 100644 --- a/langs/layers/nl.json +++ b/langs/layers/nl.json @@ -6493,4 +6493,4 @@ } } } -} +} \ No newline at end of file From a89f5a0e3e4678ee4df31d39aff42217b44245df Mon Sep 17 00:00:00 2001 From: pietervdvn Date: Sat, 16 Jul 2022 03:57:13 +0200 Subject: [PATCH 3/9] More dashboard view, add documentation in dashboard view --- .../Json/TagRenderingConfigJson.ts | 5 + Models/ThemeConfig/LayerConfig.ts | 54 +++++---- Models/ThemeConfig/TagRenderingConfig.ts | 17 ++- UI/Base/Link.ts | 4 +- UI/DashboardGui.ts | 106 +++++++++++------- UI/SpecialVisualizations.ts | 11 +- assets/tagRenderings/questions.json | 11 +- css/index-tailwind-output.css | 62 +++++----- index.css | 9 ++ scripts/generateDocs.ts | 7 +- 10 files changed, 189 insertions(+), 97 deletions(-) diff --git a/Models/ThemeConfig/Json/TagRenderingConfigJson.ts b/Models/ThemeConfig/Json/TagRenderingConfigJson.ts index 1ccf1c2f8..1074c8145 100644 --- a/Models/ThemeConfig/Json/TagRenderingConfigJson.ts +++ b/Models/ThemeConfig/Json/TagRenderingConfigJson.ts @@ -25,6 +25,11 @@ export interface TagRenderingConfigJson { */ labels?: string[] + /** + * A human-readable text explaining what this tagRendering does + */ + description?: string | any + /** * Renders this value. Note that "{key}"-parts are substituted by the corresponding values of the element. * If neither 'textFieldQuestion' nor 'mappings' are defined, this text is simply shown as default value. diff --git a/Models/ThemeConfig/LayerConfig.ts b/Models/ThemeConfig/LayerConfig.ts index 0582c57ac..1ecf1966f 100644 --- a/Models/ThemeConfig/LayerConfig.ts +++ b/Models/ThemeConfig/LayerConfig.ts @@ -28,6 +28,9 @@ import {And} from "../../Logic/Tags/And"; import {Overpass} from "../../Logic/Osm/Overpass"; import Constants from "../Constants"; import {FixedUiElement} from "../../UI/Base/FixedUiElement"; +import Svg from "../../Svg"; +import {UIEventSource} from "../../Logic/UIEventSource"; +import {OsmTags} from "../OsmFeature"; export default class LayerConfig extends WithContextLoader { @@ -191,8 +194,8 @@ export default class LayerConfig extends WithContextLoader { this.doNotDownload = json.doNotDownload ?? false; this.passAllFeatures = json.passAllFeatures ?? false; this.minzoom = json.minzoom ?? 0; - if(json["minZoom"] !== undefined){ - throw "At "+context+": minzoom is written all lowercase" + if (json["minZoom"] !== undefined) { + throw "At " + context + ": minzoom is written all lowercase" } this.minzoomVisible = json.minzoomVisible ?? this.minzoom; this.shownByDefault = json.shownByDefault ?? true; @@ -352,7 +355,7 @@ export default class LayerConfig extends WithContextLoader { neededLayer: string; }[] = [] , addedByDefault = false, canBeIncluded = true): BaseUIElement { - const extraProps = [] + const extraProps : (string | BaseUIElement)[] = [] extraProps.push("This layer is shown at zoomlevel **" + this.minzoom + "** and higher") @@ -377,7 +380,11 @@ export default class LayerConfig extends WithContextLoader { } if (this.source.geojsonSource !== undefined) { - extraProps.push(" This layer is loaded from an external source, namely `" + this.source.geojsonSource + "`") + extraProps.push( + new Combine([ + Utils.runningFromConsole ? "" : undefined, + "This layer is loaded from an external source, namely ", + new FixedUiElement( this.source.geojsonSource).SetClass("code")])); } } else { extraProps.push("This layer can **not** be included in a theme. It is solely used by [special renderings](SpecialRenderings.md) showing a minimap with custom data.") @@ -409,16 +416,16 @@ export default class LayerConfig extends WithContextLoader { if (values == undefined) { return undefined } - const embedded: (Link | string)[] = values.values?.map(v => Link.OsmWiki(values.key, v, true)) ?? ["_no preset options defined, or no values in them_"] + const embedded: (Link | string)[] = values.values?.map(v => Link.OsmWiki(values.key, v, true).SetClass("mr-2")) ?? ["_no preset options defined, or no values in them_"] return [ new Combine([ new Link( - "", - "https://taginfo.openstreetmap.org/keys/" + values.key + "#values" + Utils.runningFromConsole ? "" : Svg.statistics_svg().SetClass("w-4 h-4 mr-2"), + "https://taginfo.openstreetmap.org/keys/" + values.key + "#values", true ), Link.OsmWiki(values.key) - ]), + ]).SetClass("flex"), values.type === undefined ? "Multiple choice" : new Link(values.type, "../SpecialInputElements.md#" + values.type), - new Combine(embedded) + new Combine(embedded).SetClass("flex") ]; })) @@ -427,18 +434,27 @@ export default class LayerConfig extends WithContextLoader { quickOverview = new Combine([ new FixedUiElement("Warning: ").SetClass("bold"), "this quick overview is incomplete", - new Table(["attribute", "type", "values which are supported by this layer"], tableRows) + new Table(["attribute", "type", "values which are supported by this layer"], tableRows).SetClass("zebra-table") ]).SetClass("flex-col flex") } - const icon = this.mapRendering - .filter(mr => mr.location.has("point")) - .map(mr => mr.icon?.render?.txt) - .find(i => i !== undefined) - let iconImg = "" - if (icon !== undefined) { - // This is for the documentation, so we have to use raw HTML - iconImg = ` ` + + let iconImg: BaseUIElement = new FixedUiElement("") + + if (Utils.runningFromConsole) { + const icon = this.mapRendering + .filter(mr => mr.location.has("point")) + .map(mr => mr.icon?.render?.txt) + .find(i => i !== undefined) + // This is for the documentation in a markdown-file, so we have to use raw HTML + if (icon !== undefined) { + iconImg = new FixedUiElement(` `) + } + } else { + iconImg = this.mapRendering + .filter(mr => mr.location.has("point")) + .map(mr => mr.GenerateLeafletStyle(new UIEventSource({id:"node/-1"}), false, {includeBadges: false}).html) + .find(i => i !== undefined) } let overpassLink: BaseUIElement = undefined; @@ -467,7 +483,7 @@ export default class LayerConfig extends WithContextLoader { new Title("Supported attributes", 2), quickOverview, ...this.tagRenderings.map(tr => tr.GenerateDocumentation()) - ]).SetClass("flex-col") + ]).SetClass("flex-col").SetClass("link-underline") } public CustomCodeSnippets(): string[] { diff --git a/Models/ThemeConfig/TagRenderingConfig.ts b/Models/ThemeConfig/TagRenderingConfig.ts index 656d880de..2b09c765e 100644 --- a/Models/ThemeConfig/TagRenderingConfig.ts +++ b/Models/ThemeConfig/TagRenderingConfig.ts @@ -14,6 +14,8 @@ import List from "../../UI/Base/List"; import {MappingConfigJson, QuestionableTagRenderingConfigJson} from "./Json/QuestionableTagRenderingConfigJson"; import {FixedUiElement} from "../../UI/Base/FixedUiElement"; import {Paragraph} from "../../UI/Base/Paragraph"; +import spec = Mocha.reporters.spec; +import SpecialVisualizations from "../../UI/SpecialVisualizations"; export interface Mapping { readonly if: TagsFilter, @@ -37,6 +39,7 @@ export default class TagRenderingConfig { public readonly render?: TypedTranslation; public readonly question?: TypedTranslation; public readonly condition?: TagsFilter; + public readonly description?: Translation; public readonly configuration_warnings: string[] = [] @@ -55,6 +58,7 @@ export default class TagRenderingConfig { public readonly mappings?: Mapping[] public readonly labels: string[] + constructor(json: string | QuestionableTagRenderingConfigJson, context?: string) { if (json === undefined) { throw "Initing a TagRenderingConfig with undefined in " + context; @@ -106,6 +110,7 @@ export default class TagRenderingConfig { this.labels = json.labels ?? [] this.render = Translations.T(json.render, translationKey + ".render"); this.question = Translations.T(json.question, translationKey + ".question"); + this.description = Translations.T(json.description, translationKey + ".description"); this.condition = TagUtils.Tag(json.condition ?? {"and": []}, `${context}.condition`); if (json.freeform) { @@ -563,8 +568,8 @@ export default class TagRenderingConfig { new Combine( [ new FixedUiElement(m.then.txt).SetClass("bold"), - "corresponds with ", - m.if.asHumanString(true, false, {}) + " corresponds with ", + new FixedUiElement( m.if.asHumanString(true, false, {})).SetClass("code") ] ) ] @@ -599,12 +604,14 @@ export default class TagRenderingConfig { labels = new Combine([ "This tagrendering has labels ", ...this.labels.map(label => new FixedUiElement(label).SetClass("code")) - ]) + ]).SetClass("flex") } + return new Combine([ new Title(this.id, 3), + this.description, this.question !== undefined ? - new Combine(["The question is ", new FixedUiElement(this.question.txt).SetClass("bold")]) : + new Combine(["The question is ", new FixedUiElement(this.question.txt).SetClass("font-bold bold")]) : new FixedUiElement( "This tagrendering has no question and is thus read-only" ).SetClass("italic"), @@ -613,6 +620,6 @@ export default class TagRenderingConfig { condition, group, labels - ]).SetClass("flex-col"); + ]).SetClass("flex flex-col"); } } \ No newline at end of file diff --git a/UI/Base/Link.ts b/UI/Base/Link.ts index 9b640c1b1..af2a79b35 100644 --- a/UI/Base/Link.ts +++ b/UI/Base/Link.ts @@ -26,9 +26,9 @@ export default class Link extends BaseUIElement { if (!hideKey) { k = key + "=" } - return new Link(k + value, `https://wiki.openstreetmap.org/wiki/Tag:${key}%3D${value}`) + return new Link(k + value, `https://wiki.openstreetmap.org/wiki/Tag:${key}%3D${value}`, true) } - return new Link(key, "https://wiki.openstreetmap.org/wiki/Key:" + key) + return new Link(key, "https://wiki.openstreetmap.org/wiki/Key:" + key, true) } AsMarkdown(): string { diff --git a/UI/DashboardGui.ts b/UI/DashboardGui.ts index a8a5931e8..68e207e30 100644 --- a/UI/DashboardGui.ts +++ b/UI/DashboardGui.ts @@ -23,30 +23,35 @@ import TagRenderingAnswer from "./Popup/TagRenderingAnswer"; import Hash from "../Logic/Web/Hash"; import FilterView from "./BigComponents/FilterView"; import {FilterState} from "../Models/FilteredLayer"; +import Translations from "./i18n/Translations"; +import Constants from "../Models/Constants"; +import {Layer} from "leaflet"; +import doc = Mocha.reporters.doc; export default class DashboardGui { private readonly state: FeaturePipelineState; - private readonly currentView: UIEventSource = new UIEventSource("No selection") + private readonly currentView: UIEventSource<{ title: string | BaseUIElement, contents: string | BaseUIElement }> = new UIEventSource(undefined) constructor(state: FeaturePipelineState, guiState: DefaultGuiState) { this.state = state; } - private viewSelector(shown: BaseUIElement, fullview: BaseUIElement, hash?: string): BaseUIElement { + private viewSelector(shown: BaseUIElement, title: string | BaseUIElement, contents: string | BaseUIElement, hash?: string): BaseUIElement { const currentView = this.currentView + const v = {title, contents} shown.SetClass("pl-1 pr-1 rounded-md") shown.onClick(() => { - currentView.setData(fullview) + currentView.setData(v) }) Hash.hash.addCallbackAndRunD(h => { if (h === hash) { - currentView.setData(fullview) + currentView.setData(v) } }) currentView.addCallbackAndRunD(cv => { - if (cv == fullview) { + if (cv == v) { shown.SetClass("bg-unsubtle") Hash.hash.setData(hash) } else { @@ -64,16 +69,15 @@ export default class DashboardGui { } const tags = this.state.allElements.getEventSourceById(element.properties.id) const title = new Combine([new Title(new TagRenderingAnswer(tags, layer.title, this.state), 4), - distance < 900 ? Math.floor(distance)+"m away": - Utils.Round(distance / 1000) + "km away" + distance < 900 ? Math.floor(distance) + "m away" : + Utils.Round(distance / 1000) + "km away" ]).SetClass("flex justify-between"); - const info = new Lazy(() => new Combine([ - FeatureInfoBox.GenerateTitleBar(tags, layer, this.state), - FeatureInfoBox.GenerateContent(tags, layer, this.state)]).SetStyle("overflox-x: hidden")); - - - return this.viewSelector(title, info); + return this.singleElementCache[element.properties.id] = this.viewSelector(title, + new Lazy(() => FeatureInfoBox.GenerateTitleBar(tags, layer, this.state)), + new Lazy(() => FeatureInfoBox.GenerateContent(tags, layer, this.state)), + // element.properties.id + ); } private mainElementsView(elements: { element: OsmFeature, layer: LayerConfig, distance: number }[]): BaseUIElement { @@ -87,8 +91,8 @@ export default class DashboardGui { return new Combine(elements.map(e => self.singleElementView(e.element, e.layer, e.distance))) } - private visibleElements(map: MinimapObj & BaseUIElement, layers: Record): { distance: number, center: [number, number], element: OsmFeature, layer: LayerConfig }[]{ - const bbox= map.bounds.data + private visibleElements(map: MinimapObj & BaseUIElement, layers: Record): { distance: number, center: [number, number], element: OsmFeature, layer: LayerConfig }[] { + const bbox = map.bounds.data if (bbox === undefined) { return undefined } @@ -101,10 +105,10 @@ export default class DashboardGui { let seenElements = new Set() for (const elementsWithMetaElement of elementsWithMeta) { const layer = layers[elementsWithMetaElement.layer] - const filtered = this.state.filteredLayers.data.find(fl => fl.layerDef == layer); - for (const element of elementsWithMetaElement.features) { - console.log("Inspecting ", element.properties.id) - if(!filtered.isDisplayed.data){ + const filtered = this.state.filteredLayers.data.find(fl => fl.layerDef == layer); + for (let i = 0; i < elementsWithMetaElement.features.length; i++) { + const element = elementsWithMetaElement.features[i]; + if (!filtered.isDisplayed.data) { continue } if (seenElements.has(element.properties.id)) { @@ -117,8 +121,8 @@ export default class DashboardGui { if (layer?.isShown?.GetRenderValue(element)?.Subs(element.properties)?.txt === "no") { continue } - const activeFilters : FilterState[] = Array.from(filtered.appliedFilters.data.values()); - if(activeFilters.some(filter => !filter?.currentFilter?.matchesProperties(element.properties))){ + const activeFilters: FilterState[] = Array.from(filtered.appliedFilters.data.values()); + if (activeFilters.some(filter => !filter?.currentFilter?.matchesProperties(element.properties))) { continue } const center = GeoOperations.centerpointCoordinates(element); @@ -138,7 +142,24 @@ export default class DashboardGui { return elements; } - + + private documentationButtonFor(layerConfig: LayerConfig): BaseUIElement { + return this.viewSelector(Translations.W(layerConfig.name?.Clone() ?? layerConfig.id), new Combine(["Documentation about ", layerConfig.name?.Clone() ?? layerConfig.id]), + layerConfig.GenerateDocumentation([]), + "documentation-" + layerConfig.id) + } + + private allDocumentationButtons(): BaseUIElement { + const layers = this.state.layoutToUse.layers.filter(l => Constants.priviliged_layers.indexOf(l.id) < 0) + .filter(l => !l.id.startsWith("note_import_")); + + if(layers.length === 1){ + return this.documentationButtonFor(layers[0]) + } + return this.viewSelector(new FixedUiElement("Documentation"), "Documentation", + new Combine(layers.map(l => this.documentationButtonFor(l).SetClass("flex flex-col")))) + } + public setup(): void { const state = this.state; @@ -161,10 +182,11 @@ export default class DashboardGui { const self = this; const elementsInview = new UIEventSource([]); - function update(){ - elementsInview.setData( self.visibleElements(map, layers)) + + function update() { + elementsInview.setData(self.visibleElements(map, layers)) } - + map.bounds.addCallbackAndRun(update) state.featurePipeline.newDataLoadedSignal.addCallback(update); state.filteredLayers.addCallbackAndRun(fls => { @@ -175,28 +197,36 @@ export default class DashboardGui { }) const welcome = new Combine([state.layoutToUse.description, state.layoutToUse.descriptionTail]) - self.currentView.setData(welcome) + self.currentView.setData({title: state.layoutToUse.title, contents: welcome}) new Combine([ new Combine([ - this.viewSelector(new Title(state.layoutToUse.title, 2), welcome), + this.viewSelector(new Title(state.layoutToUse.title.Clone(), 2), state.layoutToUse.title.Clone(), welcome, "welcome"), map.SetClass("w-full h-64 shrink-0 rounded-lg"), new SearchAndGo(state), this.viewSelector(new Title( - new VariableUiElement(elementsInview.map(elements => "There are " + elements?.length + " elements in view"))), new FixedUiElement("Stats")), - + new VariableUiElement(elementsInview.map(elements => "There are " + elements?.length + " elements in view"))), + "Statistics", + new FixedUiElement("Stats"), "statistics"), + this.viewSelector(new FixedUiElement("Filter"), + "Filters", new Lazy(() => { - return new FilterView(state.filteredLayers, state.overlayToggles) - }) + return new FilterView(state.filteredLayers, state.overlayToggles) + }), "filters" ), - - new VariableUiElement(elementsInview.map(elements => this.mainElementsView(elements).SetClass("block mx-2"))) - .SetClass("block shrink-2 overflow-x-scroll h-full border-2 border-subtle rounded-lg"), - new LanguagePicker(Object.keys(state.layoutToUse.title)).SetClass("mt-2") - ]) - .SetClass("w-1/2 m-4 flex flex-col"), - new VariableUiElement(this.currentView).SetClass("w-1/2 overflow-y-auto m-4 ml-0 p-2 border-2 border-subtle rounded-xl m-y-8") + + new VariableUiElement(elementsInview.map(elements => this.mainElementsView(elements).SetClass("block m-2"))) + .SetClass("block shrink-2 overflow-x-auto h-full border-2 border-subtle rounded-lg"), + this.allDocumentationButtons(), + new LanguagePicker(Object.keys(state.layoutToUse.title.translations)).SetClass("mt-2") + ]).SetClass("w-1/2 m-4 flex flex-col shrink-0 grow-0"), + new VariableUiElement(this.currentView.map(({title, contents}) => { + return new Combine([ + new Title(Translations.W(title), 2).SetClass("shrink-0 border-b-4 border-subtle"), + Translations.W(contents).SetClass("shrink-2 overflow-y-auto block") + ]).SetClass("flex flex-col h-full") + })).SetClass("w-1/2 m-4 p-2 border-2 border-subtle rounded-xl m-4 ml-0 mr-8 shrink-0 grow-0") ]).SetClass("flex h-full") .AttachTo("leafletDiv") diff --git a/UI/SpecialVisualizations.ts b/UI/SpecialVisualizations.ts index d036b9bec..ea538f4ab 100644 --- a/UI/SpecialVisualizations.ts +++ b/UI/SpecialVisualizations.ts @@ -57,6 +57,7 @@ import {SaveButton} from "./Popup/SaveButton"; import {MapillaryLink} from "./BigComponents/MapillaryLink"; import {CheckBox} from "./Input/Checkboxes"; import Slider from "./Input/Slider"; +import TagRenderingConfig from "../Models/ThemeConfig/TagRenderingConfig"; export interface SpecialVisualization { funcName: string, @@ -207,7 +208,7 @@ class NearbyImageVis implements SpecialVisualization { const nearby = new Lazy(() => { const towardsCenter = new CheckBox(t.onlyTowards, false) - const radiusValue = state?.osmConnection?.GetPreference("nearby-images-radius","300").sync(s => Number(s), [], i => ""+i) ?? new UIEventSource(300); + const radiusValue = state?.osmConnection?.GetPreference("nearby-images-radius", "300").sync(s => Number(s), [], i => "" + i) ?? new UIEventSource(300); const radius = new Slider(25, 500, { value: @@ -285,7 +286,13 @@ export default class SpecialVisualizations { public static specialVisualizations: SpecialVisualization[] = SpecialVisualizations.init() - public static DocumentationFor(viz: SpecialVisualization): BaseUIElement { + public static DocumentationFor(viz: string | SpecialVisualization): BaseUIElement | undefined { + if (typeof viz === "string") { + viz = SpecialVisualizations.specialVisualizations.find(sv => sv.funcName === viz) + } + if(viz === undefined){ + return undefined; + } return new Combine( [ new Title(viz.funcName, 3), diff --git a/assets/tagRenderings/questions.json b/assets/tagRenderings/questions.json index aeafac6f4..73f0edb1e 100644 --- a/assets/tagRenderings/questions.json +++ b/assets/tagRenderings/questions.json @@ -1,21 +1,27 @@ { "id": "shared_questions", "questions": { + "description": "Show the images block at this location", "id": "questions" }, "images": { + "description": "This block shows the known images which are linked with the `image`-keys, but also via `mapillary` and `wikidata`", "render": "{image_carousel()}{image_upload()}{nearby_images(expandable)}" }, "mapillary": { + "description": "Shows a button to open Mapillary on this location", "render": "{mapillary()}" }, "export_as_gpx": { + "description": "Shows a button to export this feature as GPX. Especially useful for route relations", "render": "{export_as_gpx()}" }, "export_as_geojson": { + "description": "Shows a button to export this feature as geojson. Especially useful for debugging or using this in other programs", "render": "{export_as_geojson()}" }, "wikipedia": { + "description": "Shows a wikipedia box with the corresponding wikipedia article", "render": "{wikipedia():max-height:25rem}", "question": { "en": "What is the corresponding Wikidata entity?", @@ -93,9 +99,12 @@ } }, "reviews": { + "description": "Shows the reviews module (including the possibility to leave a review)", + "render": "{reviews()}" }, "minimap": { + "description": "Shows a small map with the feature. Added by default to every popup", "render": "{minimap(18, id): width:100%; height:8rem; border-radius:2rem; overflow: hidden; pointer-events: none;}" }, "phone": { @@ -855,7 +864,7 @@ "render": "
Last edited on {_last_edit:timestamp} by {_last_edit:contributor}
" }, "all_tags": { - "#": "Prints all the tags", + "description": "Shows a table with all the tags of the feature", "render": "{all_tags()}" }, "level": { diff --git a/css/index-tailwind-output.css b/css/index-tailwind-output.css index 13e1d46b0..4065ece84 100644 --- a/css/index-tailwind-output.css +++ b/css/index-tailwind-output.css @@ -819,6 +819,10 @@ video { margin: 1.25rem; } +.m-2 { + margin: 0.5rem; +} + .m-0\.5 { margin: 0.125rem; } @@ -831,10 +835,6 @@ video { margin: 0.75rem; } -.m-2 { - margin: 0.5rem; -} - .m-6 { margin: 1.5rem; } @@ -843,11 +843,6 @@ video { margin: 1px; } -.mx-2 { - margin-left: 0.5rem; - margin-right: 0.5rem; -} - .my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; @@ -879,6 +874,10 @@ video { margin-left: 0px; } +.mr-8 { + margin-right: 2rem; +} + .mt-4 { margin-top: 1rem; } @@ -887,6 +886,10 @@ video { margin-top: 1.5rem; } +.mr-2 { + margin-right: 0.5rem; +} + .mt-1 { margin-top: 0.25rem; } @@ -903,10 +906,6 @@ video { margin-right: 1rem; } -.mr-2 { - margin-right: 0.5rem; -} - .mb-2 { margin-bottom: 0.5rem; } @@ -1071,14 +1070,14 @@ video { height: 3rem; } -.h-1\/2 { - height: 50%; -} - .h-4 { height: 1rem; } +.h-1\/2 { + height: 50%; +} + .h-screen { height: 100vh; } @@ -1163,14 +1162,14 @@ video { width: 3rem; } -.w-0 { - width: 0px; -} - .w-4 { width: 1rem; } +.w-0 { + width: 0px; +} + .w-screen { width: 100vw; } @@ -1361,12 +1360,12 @@ video { overflow: scroll; } -.overflow-y-auto { - overflow-y: auto; +.overflow-x-auto { + overflow-x: auto; } -.overflow-x-scroll { - overflow-x: scroll; +.overflow-y-auto { + overflow-y: auto; } .truncate { @@ -1441,6 +1440,10 @@ video { border-width: 4px; } +.border-b-4 { + border-bottom-width: 4px; +} + .border-l-4 { border-left-width: 4px; } @@ -2447,6 +2450,15 @@ input { box-sizing: border-box; } +.code { + display: inline-block; + background-color: lightgray; + padding: 0.5em; + word-break: break-word; + color: black; + box-sizing: border-box; +} + /** Switch layout **/ .small-image img { diff --git a/index.css b/index.css index 85da5cdc7..61a1fa1f5 100644 --- a/index.css +++ b/index.css @@ -580,6 +580,15 @@ input { } +.code { + display: inline-block; + background-color: lightgray; + padding: 0.5em; + word-break: break-word; + color: black; + box-sizing: border-box; +} + /** Switch layout **/ .small-image img { height: 1em; diff --git a/scripts/generateDocs.ts b/scripts/generateDocs.ts index a4e03cc7f..cdf296b60 100644 --- a/scripts/generateDocs.ts +++ b/scripts/generateDocs.ts @@ -1,18 +1,15 @@ import Combine from "../UI/Base/Combine"; import BaseUIElement from "../UI/BaseUIElement"; import Translations from "../UI/i18n/Translations"; -import {existsSync, mkdir, mkdirSync, writeFileSync} from "fs"; +import {existsSync, mkdirSync, writeFileSync} from "fs"; import {AllKnownLayouts} from "../Customizations/AllKnownLayouts"; import TableOfContents from "../UI/Base/TableOfContents"; -import SimpleMetaTaggers, {SimpleMetaTagger} from "../Logic/SimpleMetaTagger"; +import SimpleMetaTaggers from "../Logic/SimpleMetaTagger"; import ValidatedTextField from "../UI/Input/ValidatedTextField"; -import LayoutConfig from "../Models/ThemeConfig/LayoutConfig"; import SpecialVisualizations from "../UI/SpecialVisualizations"; -import FeatureSwitchState from "../Logic/State/FeatureSwitchState"; import {ExtraFunctions} from "../Logic/ExtraFunctions"; import Title from "../UI/Base/Title"; import Minimap from "../UI/Base/Minimap"; -import {QueryParameters} from "../Logic/Web/QueryParameters"; import QueryParameterDocumentation from "../UI/QueryParameterDocumentation"; import ScriptUtils from "./ScriptUtils"; import List from "../UI/Base/List"; From ddc0aebdc3236c2b6f65c8d6c424293f14aa466c Mon Sep 17 00:00:00 2001 From: pietervdvn Date: Mon, 18 Jul 2022 00:28:26 +0200 Subject: [PATCH 4/9] Fix addition of new points --- UI/BigComponents/SimpleAddUI.ts | 19 ++++++++++--- UI/DashboardGui.ts | 47 ++++++++++++++++++++++++++------- 2 files changed, 52 insertions(+), 14 deletions(-) diff --git a/UI/BigComponents/SimpleAddUI.ts b/UI/BigComponents/SimpleAddUI.ts index 78fa604a0..4566f4115 100644 --- a/UI/BigComponents/SimpleAddUI.ts +++ b/UI/BigComponents/SimpleAddUI.ts @@ -43,6 +43,14 @@ export interface PresetInfo extends PresetConfig { export default class SimpleAddUI extends Toggle { + /** + * + * @param isShown + * @param resetScrollSignal + * @param filterViewIsOpened + * @param state + * @param takeLocationFrom: defaults to state.lastClickLocation. Take this location to add the new point around + */ constructor(isShown: UIEventSource, resetScrollSignal: UIEventSource, filterViewIsOpened: UIEventSource, @@ -59,7 +67,9 @@ export default class SimpleAddUI extends Toggle { filteredLayers: UIEventSource, featureSwitchFilter: UIEventSource, backgroundLayer: UIEventSource - }) { + }, + takeLocationFrom?: UIEventSource<{lat: number, lon: number}> + ) { const loginButton = new SubtleButton(Svg.osm_logo_ui(), Translations.t.general.add.pleaseLogin.Clone()) .onClick(() => state.osmConnection.AttemptLogin()); const readYourMessages = new Combine([ @@ -68,7 +78,8 @@ export default class SimpleAddUI extends Toggle { Translations.t.general.goToInbox, {url: "https://www.openstreetmap.org/messages/inbox", newTab: false}) ]); - + + takeLocationFrom = takeLocationFrom ?? state.LastClickLocation const selectedPreset = new UIEventSource(undefined); selectedPreset.addCallback(_ => { resetScrollSignal.ping(); @@ -76,7 +87,7 @@ export default class SimpleAddUI extends Toggle { isShown.addCallback(_ => selectedPreset.setData(undefined)) // Clear preset selection when the UI is closed/opened - state.LastClickLocation.addCallback(_ => selectedPreset.setData(undefined)) + takeLocationFrom.addCallback(_ => selectedPreset.setData(undefined)) const presetsOverview = SimpleAddUI.CreateAllPresetsPanel(selectedPreset, state) @@ -120,7 +131,7 @@ export default class SimpleAddUI extends Toggle { const message = Translations.t.general.add.addNew.Subs({category: preset.name}, preset.name["context"]); return new ConfirmLocationOfPoint(state, filterViewIsOpened, preset, message, - state.LastClickLocation.data, + takeLocationFrom.data, confirm, cancel, () => { diff --git a/UI/DashboardGui.ts b/UI/DashboardGui.ts index 68e207e30..acf0ea5a1 100644 --- a/UI/DashboardGui.ts +++ b/UI/DashboardGui.ts @@ -25,8 +25,7 @@ import FilterView from "./BigComponents/FilterView"; import {FilterState} from "../Models/FilteredLayer"; import Translations from "./i18n/Translations"; import Constants from "../Models/Constants"; -import {Layer} from "leaflet"; -import doc = Mocha.reporters.doc; +import SimpleAddUI from "./BigComponents/SimpleAddUI"; export default class DashboardGui { @@ -152,11 +151,11 @@ export default class DashboardGui { private allDocumentationButtons(): BaseUIElement { const layers = this.state.layoutToUse.layers.filter(l => Constants.priviliged_layers.indexOf(l.id) < 0) .filter(l => !l.id.startsWith("note_import_")); - - if(layers.length === 1){ + + if (layers.length === 1) { return this.documentationButtonFor(layers[0]) } - return this.viewSelector(new FixedUiElement("Documentation"), "Documentation", + return this.viewSelector(new FixedUiElement("Documentation"), "Documentation", new Combine(layers.map(l => this.documentationButtonFor(l).SetClass("flex flex-col")))) } @@ -196,10 +195,39 @@ export default class DashboardGui { } }) + const filterView = new Lazy(() => { + return new FilterView(state.filteredLayers, state.overlayToggles) + }); const welcome = new Combine([state.layoutToUse.description, state.layoutToUse.descriptionTail]) self.currentView.setData({title: state.layoutToUse.title, contents: welcome}) + const filterViewIsOpened = new UIEventSource(false) + filterViewIsOpened.addCallback(fv => self.currentView.setData({title: "filters", contents: filterView})) + + const newPointIsShown = new UIEventSource(false); + const addNewPoint = new SimpleAddUI( + new UIEventSource(true), + new UIEventSource(undefined), + filterViewIsOpened, + state, + state.locationControl + ); + const addNewPointTitle = "Add a missing point" + this.currentView.addCallbackAndRunD(cv => { + newPointIsShown.setData(cv.contents === addNewPoint) + }) + newPointIsShown.addCallbackAndRun(isShown => { + if(isShown){ + if(self.currentView.data.contents !== addNewPoint){ + self.currentView.setData({title: addNewPointTitle, contents: addNewPoint}) + } + }else{ + if(self.currentView.data.contents === addNewPoint){ + self.currentView.setData(undefined) + } + } + }) + new Combine([ - new Combine([ this.viewSelector(new Title(state.layoutToUse.title.Clone(), 2), state.layoutToUse.title.Clone(), welcome, "welcome"), map.SetClass("w-full h-64 shrink-0 rounded-lg"), @@ -210,10 +238,9 @@ export default class DashboardGui { new FixedUiElement("Stats"), "statistics"), this.viewSelector(new FixedUiElement("Filter"), - "Filters", - new Lazy(() => { - return new FilterView(state.filteredLayers, state.overlayToggles) - }), "filters" + "Filters", filterView, "filters"), + this.viewSelector(new Combine([ "Add a missing point"]), addNewPointTitle, + addNewPoint ), new VariableUiElement(elementsInview.map(elements => this.mainElementsView(elements).SetClass("block m-2"))) From 47a184d626ee3864582ac908e93bd3c4b7684a46 Mon Sep 17 00:00:00 2001 From: pietervdvn Date: Mon, 18 Jul 2022 10:23:50 +0200 Subject: [PATCH 5/9] Fix #955 --- assets/layers/bike_shop/bike_shop.json | 67 ++------------------------ 1 file changed, 3 insertions(+), 64 deletions(-) diff --git a/assets/layers/bike_shop/bike_shop.json b/assets/layers/bike_shop/bike_shop.json index c10981799..f8bc13c75 100644 --- a/assets/layers/bike_shop/bike_shop.json +++ b/assets/layers/bike_shop/bike_shop.json @@ -282,70 +282,9 @@ }, "id": "bike_shop-name" }, - { - "question": { - "en": "What is the website of {name}?", - "nl": "Wat is de website van {name}?", - "fr": "Quel est le site web de {name} ?", - "gl": "Cal é a páxina web de {name}?", - "it": "Qual è il sito web di {name}?", - "ru": "Какой сайт у {name}?", - "id": "URL {name} apa?", - "de": "Wie lautet die Webseite von {name}?", - "pt_BR": "Qual o website de {name}?", - "pt": "Qual o website de {name}?", - "es": "¿Cual es el sitio web de {name}?", - "da": "Hvad er webstedet for {name}?" - }, - "render": "{website}", - "freeform": { - "key": "website", - "type": "url" - }, - "id": "bike_shop-website" - }, - { - "question": { - "en": "What is the phone number of {name}?", - "nl": "Wat is het telefoonnummer van {name}?", - "fr": "Quel est le numéro de téléphone de {name} ?", - "gl": "Cal é o número de teléfono de {name}?", - "it": "Qual è il numero di telefono di {name}?", - "ru": "Какой номер телефона у {name}?", - "de": "Wie lautet die Telefonnummer von {name}?", - "pt_BR": "Qual o número de telefone de {name}?", - "pt": "Qual é o número de telefone de {name}?", - "es": "¿Cual es el número de teléfono de {name}?", - "da": "Hvad er telefonnummeret på {name}?" - }, - "render": "{phone}", - "freeform": { - "key": "phone", - "type": "phone" - }, - "id": "bike_shop-phone" - }, - { - "question": { - "en": "What is the email address of {name}?", - "nl": "Wat is het email-adres van {name}?", - "fr": "Quelle est l'adresse électronique de {name} ?", - "gl": "Cal é o enderezo de correo electrónico de {name}?", - "it": "Qual è l’indirizzo email di {name}?", - "ru": "Какой адрес электронной почты у {name}?", - "de": "Wie lautet die E-Mail-Adresse von {name}?", - "pt_BR": "Qual o endereço de email de {name}?", - "pt": "Qual o endereço de email de {name}?", - "es": "¿Cual es la dirección de correo electrónico de {name}?", - "da": "Hvad er e-mailadressen på {name}?" - }, - "render": "{email}", - "freeform": { - "key": "email", - "type": "email" - }, - "id": "bike_shop-email" - }, + "website", + "phone", + "email", "opening_hours", { "render": { From 72f7bbd7db6eda5d7d6cdc35edcf39baacd05807 Mon Sep 17 00:00:00 2001 From: pietervdvn Date: Wed, 20 Jul 2022 12:04:14 +0200 Subject: [PATCH 6/9] Add charts to dashboard view --- UI/Base/ChartJs.ts | 24 +++++ UI/Base/Combine.ts | 3 + UI/Base/VariableUIElement.ts | 1 + UI/BaseUIElement.ts | 4 +- UI/BigComponents/TagRenderingChart.ts | 146 ++++++++++++++++++++++++++ UI/DashboardGui.ts | 60 ++++++++--- css/index-tailwind-output.css | 32 +++--- test.ts | 120 ++++++++++++--------- 8 files changed, 314 insertions(+), 76 deletions(-) create mode 100644 UI/Base/ChartJs.ts create mode 100644 UI/BigComponents/TagRenderingChart.ts diff --git a/UI/Base/ChartJs.ts b/UI/Base/ChartJs.ts new file mode 100644 index 000000000..a4250f4c4 --- /dev/null +++ b/UI/Base/ChartJs.ts @@ -0,0 +1,24 @@ +import BaseUIElement from "../BaseUIElement"; +import {Chart, ChartConfiguration, ChartType, DefaultDataPoint, registerables} from 'chart.js'; +Chart.register(...registerables); + + +export default class ChartJs< + TType extends ChartType = ChartType, + TData = DefaultDataPoint, + TLabel = unknown + > extends BaseUIElement{ + private readonly _config: ChartConfiguration; + + constructor(config: ChartConfiguration) { + super(); + this._config = config; + } + + protected InnerConstructElement(): HTMLElement { + const canvas = document.createElement("canvas"); + new Chart(canvas, this._config); + return canvas; + } + +} \ No newline at end of file diff --git a/UI/Base/Combine.ts b/UI/Base/Combine.ts index 87eb30f5b..05ad8de84 100644 --- a/UI/Base/Combine.ts +++ b/UI/Base/Combine.ts @@ -38,6 +38,9 @@ export default class Combine extends BaseUIElement { protected InnerConstructElement(): HTMLElement { const el = document.createElement("span") try { + if(this.uiElements === undefined){ + console.error("PANIC") + } for (const subEl of this.uiElements) { if (subEl === undefined || subEl === null) { continue; diff --git a/UI/Base/VariableUIElement.ts b/UI/Base/VariableUIElement.ts index 1dbbe3ded..3163ac39b 100644 --- a/UI/Base/VariableUIElement.ts +++ b/UI/Base/VariableUIElement.ts @@ -33,6 +33,7 @@ export class VariableUiElement extends BaseUIElement { if (self.isDestroyed) { return true; } + while (el.firstChild) { el.removeChild(el.lastChild); } diff --git a/UI/BaseUIElement.ts b/UI/BaseUIElement.ts index 556ab637f..749f61d35 100644 --- a/UI/BaseUIElement.ts +++ b/UI/BaseUIElement.ts @@ -9,7 +9,7 @@ export default abstract class BaseUIElement { protected _constructedHtmlElement: HTMLElement; protected isDestroyed = false; - private clss: Set = new Set(); + private readonly clss: Set = new Set(); private style: string; private _onClick: () => void; @@ -114,7 +114,7 @@ export default abstract class BaseUIElement { if (style !== undefined && style !== "") { el.style.cssText = style } - if (this.clss.size > 0) { + if (this.clss?.size > 0) { try { el.classList.add(...Array.from(this.clss)) } catch (e) { diff --git a/UI/BigComponents/TagRenderingChart.ts b/UI/BigComponents/TagRenderingChart.ts new file mode 100644 index 000000000..54d0d861c --- /dev/null +++ b/UI/BigComponents/TagRenderingChart.ts @@ -0,0 +1,146 @@ +import ChartJs from "../Base/ChartJs"; +import {OsmFeature} from "../../Models/OsmFeature"; +import TagRenderingConfig from "../../Models/ThemeConfig/TagRenderingConfig"; +import {ChartConfiguration} from 'chart.js'; +import Combine from "../Base/Combine"; + +export default class TagRenderingChart extends Combine { + + private static readonly unkownColor = 'rgba(128, 128, 128, 0.2)' + private static readonly unkownBorderColor = 'rgba(128, 128, 128, 0.2)' + + private static readonly otherColor = 'rgba(128, 128, 128, 0.2)' + private static readonly otherBorderColor = 'rgba(128, 128, 255)' + private static readonly notApplicableColor = 'rgba(128, 128, 128, 0.2)' + private static readonly notApplicableBorderColor = 'rgba(255, 0, 0)' + + + private static readonly backgroundColors = [ + 'rgba(255, 99, 132, 0.2)', + 'rgba(54, 162, 235, 0.2)', + 'rgba(255, 206, 86, 0.2)', + 'rgba(75, 192, 192, 0.2)', + 'rgba(153, 102, 255, 0.2)', + 'rgba(255, 159, 64, 0.2)' + ] + + private static readonly borderColors = [ + 'rgba(255, 99, 132, 1)', + 'rgba(54, 162, 235, 1)', + 'rgba(255, 206, 86, 1)', + 'rgba(75, 192, 192, 1)', + 'rgba(153, 102, 255, 1)', + 'rgba(255, 159, 64, 1)' + ] + + /** + * Creates a chart about this tagRendering for the given data + */ + constructor(features: OsmFeature[], tagRendering: TagRenderingConfig, options?: { + chartclasses?: string, + chartstyle?: string + }) { + + const mappings = tagRendering.mappings ?? [] + if (mappings.length === 0 && tagRendering.freeform?.key === undefined) { + super(["TagRendering", tagRendering.id, "does not have mapping or a freeform key - no stats can be made"]) + return; + } + let unknownCount = 0; + let categoryCounts = mappings.map(_ => 0) + let otherCount = 0; + let notApplicable = 0; + for (const feature of features) { + const props = feature.properties + if(tagRendering.condition !== undefined && !tagRendering.condition.matchesProperties(props)){ + notApplicable++; + continue; + } + + if (!tagRendering.IsKnown(props)) { + unknownCount++; + continue; + } + let foundMatchingMapping = false; + for (let i = 0; i < mappings.length; i++) { + const mapping = mappings[i]; + if (mapping.if.matchesProperties(props)) { + categoryCounts[i]++ + foundMatchingMapping = true + if (!tagRendering.multiAnswer) { + break; + } + } + } + if (tagRendering.freeform?.key !== undefined && props[tagRendering.freeform.key] !== undefined) { + otherCount++ + } else if (!foundMatchingMapping) { + unknownCount++ + } + } + + if (unknownCount + notApplicable === features.length) { + console.log("Totals:", features.length+" elements","tr:", tagRendering, "other",otherCount, "unkown",unknownCount, "na", notApplicable) + super(["No relevant data for ", tagRendering.id]) + return + } + + const labels = ["Unknown", "Other", "Not applicable", ...mappings?.map(m => m.then.txt) ?? []] + const data = [unknownCount, otherCount, notApplicable,...categoryCounts] + const borderColor = [TagRenderingChart.unkownBorderColor, TagRenderingChart.otherBorderColor, TagRenderingChart.notApplicableBorderColor] + const backgroundColor = [TagRenderingChart.unkownColor, TagRenderingChart.otherColor, TagRenderingChart.notApplicableColor] + + while (borderColor.length < data.length) { + borderColor.push(...TagRenderingChart.borderColors) + backgroundColor.push(...TagRenderingChart.backgroundColors) + } + + for (let i = data.length; i >= 0; i--) { + if (data[i] === 0) { + labels.splice(i, 1) + data.splice(i, 1) + borderColor.splice(i, 1) + backgroundColor.splice(i, 1) + } + } + + if (tagRendering.id === undefined) { + console.log(tagRendering) + } + const config = { + type: tagRendering.multiAnswer ? 'bar' : 'doughnut', + data: { + labels, + datasets: [{ + data, + backgroundColor, + borderColor, + borderWidth: 1, + label: undefined + }] + }, + options: { + plugins: { + legend: { + display: !tagRendering.multiAnswer + } + } + } + } + + const chart = new ChartJs(config).SetClass(options?.chartclasses ?? "w-32 h-32"); + + if (options.chartstyle !== undefined) { + chart.SetStyle(options.chartstyle) + } + + + super([ + tagRendering.question ?? tagRendering.id, + chart]) + + this.SetClass("block") + } + + +} \ No newline at end of file diff --git a/UI/DashboardGui.ts b/UI/DashboardGui.ts index acf0ea5a1..1256c6fde 100644 --- a/UI/DashboardGui.ts +++ b/UI/DashboardGui.ts @@ -26,6 +26,8 @@ import {FilterState} from "../Models/FilteredLayer"; import Translations from "./i18n/Translations"; import Constants from "../Models/Constants"; import SimpleAddUI from "./BigComponents/SimpleAddUI"; +import TagRenderingChart from "./BigComponents/TagRenderingChart"; +import Loading from "./Base/Loading"; export default class DashboardGui { @@ -170,7 +172,7 @@ export default class DashboardGui { } const map = this.SetupMap(); - Utils.downloadJson("./service-worker-version").then(data => console.log("Service worker", data)).catch(e => console.log("Service worker not active")) + Utils.downloadJson("./service-worker-version").then(data => console.log("Service worker", data)).catch(_ => console.log("Service worker not active")) document.getElementById("centermessage").classList.add("hidden") @@ -180,7 +182,7 @@ export default class DashboardGui { } const self = this; - const elementsInview = new UIEventSource([]); + const elementsInview = new UIEventSource<{ distance: number, center: [number, number], element: OsmFeature, layer: LayerConfig }[]>([]); function update() { elementsInview.setData(self.visibleElements(map, layers)) @@ -201,10 +203,10 @@ export default class DashboardGui { const welcome = new Combine([state.layoutToUse.description, state.layoutToUse.descriptionTail]) self.currentView.setData({title: state.layoutToUse.title, contents: welcome}) const filterViewIsOpened = new UIEventSource(false) - filterViewIsOpened.addCallback(fv => self.currentView.setData({title: "filters", contents: filterView})) - + filterViewIsOpened.addCallback(_ => self.currentView.setData({title: "filters", contents: filterView})) + const newPointIsShown = new UIEventSource(false); - const addNewPoint = new SimpleAddUI( + const addNewPoint = new SimpleAddUI( new UIEventSource(true), new UIEventSource(undefined), filterViewIsOpened, @@ -213,20 +215,50 @@ export default class DashboardGui { ); const addNewPointTitle = "Add a missing point" this.currentView.addCallbackAndRunD(cv => { - newPointIsShown.setData(cv.contents === addNewPoint) + newPointIsShown.setData(cv.contents === addNewPoint) }) newPointIsShown.addCallbackAndRun(isShown => { - if(isShown){ - if(self.currentView.data.contents !== addNewPoint){ + if (isShown) { + if (self.currentView.data.contents !== addNewPoint) { self.currentView.setData({title: addNewPointTitle, contents: addNewPoint}) } - }else{ - if(self.currentView.data.contents === addNewPoint){ + } else { + if (self.currentView.data.contents === addNewPoint) { self.currentView.setData(undefined) } } }) - + + const statistics = + new VariableUiElement(elementsInview.stabilized(1000).map(features => { + if (features === undefined) { + return new Loading("Loading data") + } + if (features.length === 0) { + return "No elements in view" + } + const els = [] + for (const layer of state.layoutToUse.layers) { + if(layer.name === undefined){ + continue + } + const featuresForLayer = features.filter(f => f.layer === layer).map(f => f.element) + if(featuresForLayer.length === 0){ + continue + } + els.push(new Title(layer.name)) + for (const tagRendering of layer.tagRenderings) { + const chart = new TagRenderingChart(featuresForLayer, tagRendering, { + chartclasses: "w-full", + chartstyle: "height: 60rem" + }) + els.push(chart) + } + } + return new Combine(els) + })) + + new Combine([ new Combine([ this.viewSelector(new Title(state.layoutToUse.title.Clone(), 2), state.layoutToUse.title.Clone(), welcome, "welcome"), @@ -235,12 +267,12 @@ export default class DashboardGui { this.viewSelector(new Title( new VariableUiElement(elementsInview.map(elements => "There are " + elements?.length + " elements in view"))), "Statistics", - new FixedUiElement("Stats"), "statistics"), + statistics, "statistics"), this.viewSelector(new FixedUiElement("Filter"), "Filters", filterView, "filters"), - this.viewSelector(new Combine([ "Add a missing point"]), addNewPointTitle, - addNewPoint + this.viewSelector(new Combine(["Add a missing point"]), addNewPointTitle, + addNewPoint ), new VariableUiElement(elementsInview.map(elements => this.mainElementsView(elements).SetClass("block m-2"))) diff --git a/css/index-tailwind-output.css b/css/index-tailwind-output.css index 4065ece84..2419d3ccd 100644 --- a/css/index-tailwind-output.css +++ b/css/index-tailwind-output.css @@ -1050,8 +1050,8 @@ video { height: 6rem; } -.h-8 { - height: 2rem; +.h-80 { + height: 20rem; } .h-64 { @@ -1070,6 +1070,10 @@ video { height: 3rem; } +.h-8 { + height: 2rem; +} + .h-4 { height: 1rem; } @@ -1134,12 +1138,8 @@ video { width: 100%; } -.w-8 { - width: 2rem; -} - -.w-1 { - width: 0.25rem; +.w-80 { + width: 20rem; } .w-24 { @@ -1162,6 +1162,10 @@ video { width: 3rem; } +.w-8 { + width: 2rem; +} + .w-4 { width: 1rem; } @@ -1570,10 +1574,6 @@ video { padding-right: 1rem; } -.pr-2 { - padding-right: 0.5rem; -} - .pl-1 { padding-left: 0.25rem; } @@ -1642,6 +1642,10 @@ video { padding-top: 0.125rem; } +.pr-2 { + padding-right: 0.5rem; +} + .pl-6 { padding-left: 1.5rem; } @@ -1860,6 +1864,10 @@ video { z-index: 10001 } +.w-160 { + width: 40rem; +} + .bg-subtle { background-color: var(--subtle-detail-color); color: var(--subtle-detail-color-contrast); diff --git a/test.ts b/test.ts index e25a2ad54..f9feaf0fa 100644 --- a/test.ts +++ b/test.ts @@ -1,52 +1,76 @@ -import * as shops from "./assets/generated/layers/shops.json" -import Combine from "./UI/Base/Combine"; -import Img from "./UI/Base/Img"; -import BaseUIElement from "./UI/BaseUIElement"; -import {VariableUiElement} from "./UI/Base/VariableUIElement"; -import LanguagePicker from "./UI/LanguagePicker"; -import TagRenderingConfig, {Mapping} from "./Models/ThemeConfig/TagRenderingConfig"; -import {MappingConfigJson} from "./Models/ThemeConfig/Json/QuestionableTagRenderingConfigJson"; -import {FixedUiElement} from "./UI/Base/FixedUiElement"; -import {TagsFilter} from "./Logic/Tags/TagsFilter"; -import {SearchablePillsSelector} from "./UI/Input/SearchableMappingsSelector"; +import ChartJs from "./UI/Base/ChartJs"; +import TagRenderingChart from "./UI/BigComponents/TagRenderingChart"; +import {OsmFeature} from "./Models/OsmFeature"; +import * as food from "./assets/generated/layers/food.json" +import TagRenderingConfig from "./Models/ThemeConfig/TagRenderingConfig"; import {UIEventSource} from "./Logic/UIEventSource"; - -const mappingsRaw: MappingConfigJson[] = shops.tagRenderings.find(tr => tr.id == "shop_types").mappings -const mappings = mappingsRaw.map((m, i) => TagRenderingConfig.ExtractMapping(m, i, "test", "test")) - -function fromMapping(m: Mapping): { show: BaseUIElement, value: TagsFilter, mainTerm: Record, searchTerms?: Record } { - const el: BaseUIElement = m.then - let icon: BaseUIElement - if (m.icon !== undefined) { - icon = new Img(m.icon).SetClass("h-8 w-8 pr-2") - } else { - icon = new FixedUiElement("").SetClass("h-8 w-1") - } - const show = new Combine([ - icon, - el.SetClass("block-ruby") - ]).SetClass("flex items-center") - - return {show, mainTerm: m.then.translations, searchTerms: m.searchTerms, value: m.if}; - -} -const search = new UIEventSource("") -const sp = new SearchablePillsSelector( - mappings.map(m => fromMapping(m)), +import Combine from "./UI/Base/Combine"; +const data = new UIEventSource([ { - noMatchFound: new VariableUiElement(search.map(s => "Mark this a `"+s+"`")), - onNoSearch: new FixedUiElement("Search in "+mappingsRaw.length+" categories"), - selectIfSingle: true, - searchValue: search + properties: { + id: "node/1234", + cuisine:"pizza", + "payment:cash":"yes" + }, + geometry:{ + type: "Point", + coordinates: [0,0] + }, + id: "node/1234", + type: "Feature" + }, + { + properties: { + id: "node/42", + cuisine:"pizza", + "payment:cash":"yes" + }, + geometry:{ + type: "Point", + coordinates: [1,0] + }, + id: "node/42", + type: "Feature" + }, + { + properties: { + id: "node/452", + cuisine:"pasta", + "payment:cash":"yes", + "payment:cards":"yes" + }, + geometry:{ + type: "Point", + coordinates: [2,0] + }, + id: "node/452", + type: "Feature" + }, + { + properties: { + id: "node/4542", + cuisine:"something_comletely_invented", + "payment:cards":"yes" + }, + geometry:{ + type: "Point", + coordinates: [3,0] + }, + id: "node/4542", + type: "Feature" + }, + { + properties: { + id: "node/45425", + }, + geometry:{ + type: "Point", + coordinates: [3,0] + }, + id: "node/45425", + type: "Feature" } -) +]); -sp.AttachTo("maindiv") - -const lp = new LanguagePicker(["en", "nl"], "") - -new Combine([ - new VariableUiElement(sp.GetValue().map(tf => new FixedUiElement("Selected tags: " + tf.map(tf => tf.asHumanString(false, false, {})).join(", ")))), - lp -]).SetClass("flex flex-col") - .AttachTo("extradiv") \ No newline at end of file +new Combine(food.tagRenderings.map(tr => new TagRenderingChart(data, new TagRenderingConfig(tr, "test"), {chartclasses: "w-160 h-160"}))) + .AttachTo("maindiv") \ No newline at end of file From 465497e6ca8638275002555ca325b82a95f00516 Mon Sep 17 00:00:00 2001 From: pietervdvn Date: Wed, 20 Jul 2022 14:06:39 +0200 Subject: [PATCH 7/9] Finish dashboard mode --- UI/BigComponents/TagRenderingChart.ts | 70 +++++++++++++++++++-------- UI/DashboardGui.ts | 8 ++- 2 files changed, 56 insertions(+), 22 deletions(-) diff --git a/UI/BigComponents/TagRenderingChart.ts b/UI/BigComponents/TagRenderingChart.ts index 54d0d861c..f877688c3 100644 --- a/UI/BigComponents/TagRenderingChart.ts +++ b/UI/BigComponents/TagRenderingChart.ts @@ -3,6 +3,7 @@ import {OsmFeature} from "../../Models/OsmFeature"; import TagRenderingConfig from "../../Models/ThemeConfig/TagRenderingConfig"; import {ChartConfiguration} from 'chart.js'; import Combine from "../Base/Combine"; +import {TagUtils} from "../../Logic/Tags/TagUtils"; export default class TagRenderingChart extends Combine { @@ -47,49 +48,78 @@ export default class TagRenderingChart extends Combine { return; } let unknownCount = 0; - let categoryCounts = mappings.map(_ => 0) - let otherCount = 0; + const categoryCounts = mappings.map(_ => 0) + const otherCounts: Record = {} let notApplicable = 0; + let barchartMode = tagRendering.multiAnswer; for (const feature of features) { const props = feature.properties - if(tagRendering.condition !== undefined && !tagRendering.condition.matchesProperties(props)){ + if (tagRendering.condition !== undefined && !tagRendering.condition.matchesProperties(props)) { notApplicable++; continue; } - + if (!tagRendering.IsKnown(props)) { unknownCount++; continue; } let foundMatchingMapping = false; - for (let i = 0; i < mappings.length; i++) { - const mapping = mappings[i]; - if (mapping.if.matchesProperties(props)) { - categoryCounts[i]++ - foundMatchingMapping = true - if (!tagRendering.multiAnswer) { + if (!tagRendering.multiAnswer) { + for (let i = 0; i < mappings.length; i++) { + const mapping = mappings[i]; + if (mapping.if.matchesProperties(props)) { + categoryCounts[i]++ + foundMatchingMapping = true break; } } + } else { + for (let i = 0; i < mappings.length; i++) { + const mapping = mappings[i]; + if (TagUtils.MatchesMultiAnswer( mapping.if, props)) { + categoryCounts[i]++ + if(categoryCounts[i] > 3){ + foundMatchingMapping = true + } + } + } } - if (tagRendering.freeform?.key !== undefined && props[tagRendering.freeform.key] !== undefined) { - otherCount++ - } else if (!foundMatchingMapping) { - unknownCount++ + if (!foundMatchingMapping) { + if (tagRendering.freeform?.key !== undefined && props[tagRendering.freeform.key] !== undefined) { + const otherValue = props[tagRendering.freeform.key] + otherCounts[otherValue] = (otherCounts[otherValue] ?? 0) + 1 + barchartMode = true ; + } else { + unknownCount++ + } } } if (unknownCount + notApplicable === features.length) { - console.log("Totals:", features.length+" elements","tr:", tagRendering, "other",otherCount, "unkown",unknownCount, "na", notApplicable) super(["No relevant data for ", tagRendering.id]) return } - const labels = ["Unknown", "Other", "Not applicable", ...mappings?.map(m => m.then.txt) ?? []] - const data = [unknownCount, otherCount, notApplicable,...categoryCounts] + let otherGrouped = 0; + const otherLabels: string[] = [] + const otherData : number[] = [] + for (const v in otherCounts) { + const count = otherCounts[v] + if(count > 2){ + otherLabels.push(v) + otherData.push(otherCounts[v]) + }else{ + otherGrouped++; + } + } + + const labels = ["Unknown", "Other", "Not applicable", ...mappings?.map(m => m.then.txt) ?? [], ...otherLabels] + const data = [unknownCount, otherGrouped, notApplicable, ...categoryCounts, ... otherData] const borderColor = [TagRenderingChart.unkownBorderColor, TagRenderingChart.otherBorderColor, TagRenderingChart.notApplicableBorderColor] const backgroundColor = [TagRenderingChart.unkownColor, TagRenderingChart.otherColor, TagRenderingChart.notApplicableColor] + + while (borderColor.length < data.length) { borderColor.push(...TagRenderingChart.borderColors) backgroundColor.push(...TagRenderingChart.backgroundColors) @@ -108,7 +138,7 @@ export default class TagRenderingChart extends Combine { console.log(tagRendering) } const config = { - type: tagRendering.multiAnswer ? 'bar' : 'doughnut', + type: barchartMode ? 'bar' : 'doughnut', data: { labels, datasets: [{ @@ -122,7 +152,7 @@ export default class TagRenderingChart extends Combine { options: { plugins: { legend: { - display: !tagRendering.multiAnswer + display: !barchartMode } } } @@ -133,7 +163,7 @@ export default class TagRenderingChart extends Combine { if (options.chartstyle !== undefined) { chart.SetStyle(options.chartstyle) } - + super([ tagRendering.question ?? tagRendering.id, diff --git a/UI/DashboardGui.ts b/UI/DashboardGui.ts index 1256c6fde..05dda2770 100644 --- a/UI/DashboardGui.ts +++ b/UI/DashboardGui.ts @@ -28,6 +28,7 @@ import Constants from "../Models/Constants"; import SimpleAddUI from "./BigComponents/SimpleAddUI"; import TagRenderingChart from "./BigComponents/TagRenderingChart"; import Loading from "./Base/Loading"; +import BackToIndex from "./BigComponents/BackToIndex"; export default class DashboardGui { @@ -95,6 +96,7 @@ export default class DashboardGui { private visibleElements(map: MinimapObj & BaseUIElement, layers: Record): { distance: number, center: [number, number], element: OsmFeature, layer: LayerConfig }[] { const bbox = map.bounds.data if (bbox === undefined) { + console.warn("No bbox") return undefined } const location = map.location.data; @@ -278,14 +280,16 @@ export default class DashboardGui { new VariableUiElement(elementsInview.map(elements => this.mainElementsView(elements).SetClass("block m-2"))) .SetClass("block shrink-2 overflow-x-auto h-full border-2 border-subtle rounded-lg"), this.allDocumentationButtons(), - new LanguagePicker(Object.keys(state.layoutToUse.title.translations)).SetClass("mt-2") + new LanguagePicker(Object.keys(state.layoutToUse.title.translations)).SetClass("mt-2"), + new BackToIndex() ]).SetClass("w-1/2 m-4 flex flex-col shrink-0 grow-0"), new VariableUiElement(this.currentView.map(({title, contents}) => { return new Combine([ new Title(Translations.W(title), 2).SetClass("shrink-0 border-b-4 border-subtle"), Translations.W(contents).SetClass("shrink-2 overflow-y-auto block") ]).SetClass("flex flex-col h-full") - })).SetClass("w-1/2 m-4 p-2 border-2 border-subtle rounded-xl m-4 ml-0 mr-8 shrink-0 grow-0") + })).SetClass("w-1/2 m-4 p-2 border-2 border-subtle rounded-xl m-4 ml-0 mr-8 shrink-0 grow-0"), + ]).SetClass("flex h-full") .AttachTo("leafletDiv") From a90fa5cd63c2b944cf8d322fcbd3e0b636800421 Mon Sep 17 00:00:00 2001 From: pietervdvn Date: Wed, 20 Jul 2022 14:39:19 +0200 Subject: [PATCH 8/9] More styling of the dashboard --- Models/ThemeConfig/LayerConfig.ts | 4 ++-- UI/BigComponents/TagRenderingChart.ts | 6 ++++-- UI/DashboardGui.ts | 12 ++++++++--- .../pedestrian_path/pedestrian_path.json | 1 - css/index-tailwind-output.css | 20 +++++++++++-------- 5 files changed, 27 insertions(+), 16 deletions(-) diff --git a/Models/ThemeConfig/LayerConfig.ts b/Models/ThemeConfig/LayerConfig.ts index 1ecf1966f..f904a8db7 100644 --- a/Models/ThemeConfig/LayerConfig.ts +++ b/Models/ThemeConfig/LayerConfig.ts @@ -367,9 +367,9 @@ export default class LayerConfig extends WithContextLoader { extraProps.push('This layer is not visible by default and must be enabled in the filter by the user. ') } if (this.title === undefined) { - extraProps.push("This layer cannot be toggled in the filter view. If you import this layer in your theme, override `title` to make this toggleable.") + extraProps.push("Elements don't have a title set and cannot be toggled nor will they show up in the dashboard. If you import this layer in your theme, override `title` to make this toggleable.") } - if (this.title === undefined && this.shownByDefault === false) { + if (this.name === undefined && this.shownByDefault === false) { extraProps.push("This layer is not visible by default and the visibility cannot be toggled, effectively resulting in a fully hidden layer. This can be useful, e.g. to calculate some metatags. If you want to render this layer (e.g. for debugging), enable it by setting the URL-parameter layer-=true") } if (this.name === undefined) { diff --git a/UI/BigComponents/TagRenderingChart.ts b/UI/BigComponents/TagRenderingChart.ts index f877688c3..e7ef2060a 100644 --- a/UI/BigComponents/TagRenderingChart.ts +++ b/UI/BigComponents/TagRenderingChart.ts @@ -44,7 +44,8 @@ export default class TagRenderingChart extends Combine { const mappings = tagRendering.mappings ?? [] if (mappings.length === 0 && tagRendering.freeform?.key === undefined) { - super(["TagRendering", tagRendering.id, "does not have mapping or a freeform key - no stats can be made"]) + super([]) + this.SetClass("hidden") return; } let unknownCount = 0; @@ -96,7 +97,8 @@ export default class TagRenderingChart extends Combine { } if (unknownCount + notApplicable === features.length) { - super(["No relevant data for ", tagRendering.id]) + super([]) + this.SetClass("hidden") return } diff --git a/UI/DashboardGui.ts b/UI/DashboardGui.ts index 05dda2770..600783c56 100644 --- a/UI/DashboardGui.ts +++ b/UI/DashboardGui.ts @@ -108,6 +108,9 @@ export default class DashboardGui { let seenElements = new Set() for (const elementsWithMetaElement of elementsWithMeta) { const layer = layers[elementsWithMetaElement.layer] + if(layer.title === undefined){ + continue + } const filtered = this.state.filteredLayers.data.find(fl => fl.layerDef == layer); for (let i = 0; i < elementsWithMetaElement.features.length; i++) { const element = elementsWithMetaElement.features[i]; @@ -249,13 +252,16 @@ export default class DashboardGui { continue } els.push(new Title(layer.name)) + + const layerStats = [] for (const tagRendering of layer.tagRenderings) { const chart = new TagRenderingChart(featuresForLayer, tagRendering, { chartclasses: "w-full", chartstyle: "height: 60rem" }) - els.push(chart) + layerStats.push(chart.SetClass("w-full lg:w-1/3")) } + els.push(new Combine(layerStats).SetClass("flex flex-wrap")) } return new Combine(els) })) @@ -282,13 +288,13 @@ export default class DashboardGui { this.allDocumentationButtons(), new LanguagePicker(Object.keys(state.layoutToUse.title.translations)).SetClass("mt-2"), new BackToIndex() - ]).SetClass("w-1/2 m-4 flex flex-col shrink-0 grow-0"), + ]).SetClass("w-1/2 lg:w-1/4 m-4 flex flex-col shrink-0 grow-0"), new VariableUiElement(this.currentView.map(({title, contents}) => { return new Combine([ new Title(Translations.W(title), 2).SetClass("shrink-0 border-b-4 border-subtle"), Translations.W(contents).SetClass("shrink-2 overflow-y-auto block") ]).SetClass("flex flex-col h-full") - })).SetClass("w-1/2 m-4 p-2 border-2 border-subtle rounded-xl m-4 ml-0 mr-8 shrink-0 grow-0"), + })).SetClass("w-1/2 lg:w-3/4 m-4 p-2 border-2 border-subtle rounded-xl m-4 ml-0 mr-8 shrink-0 grow-0"), ]).SetClass("flex h-full") .AttachTo("leafletDiv") diff --git a/assets/layers/pedestrian_path/pedestrian_path.json b/assets/layers/pedestrian_path/pedestrian_path.json index 8231a262c..72d61a4bd 100644 --- a/assets/layers/pedestrian_path/pedestrian_path.json +++ b/assets/layers/pedestrian_path/pedestrian_path.json @@ -16,7 +16,6 @@ ] } }, - "title": {}, "description": { "en": "Pedestrian footpaths, especially used for indoor navigation and snapping entrances to this layer", "nl": "Pad voor voetgangers, in het bijzonder gebruikt voor navigatie binnen gebouwen en om aan toegangen vast te klikken in deze laag", diff --git a/css/index-tailwind-output.css b/css/index-tailwind-output.css index 2419d3ccd..b90fea279 100644 --- a/css/index-tailwind-output.css +++ b/css/index-tailwind-output.css @@ -1050,10 +1050,6 @@ video { height: 6rem; } -.h-80 { - height: 20rem; -} - .h-64 { height: 16rem; } @@ -1138,10 +1134,6 @@ video { width: 100%; } -.w-80 { - width: 20rem; -} - .w-24 { width: 6rem; } @@ -1192,6 +1184,10 @@ video { width: max-content; } +.w-32 { + width: 8rem; +} + .w-16 { width: 4rem; } @@ -2829,6 +2825,14 @@ input { width: 75%; } + .lg\:w-1\/3 { + width: 33.333333%; + } + + .lg\:w-1\/4 { + width: 25%; + } + .lg\:w-1\/6 { width: 16.666667%; } From e25c904aa39225f020ace0af27e08a20a3f9ed33 Mon Sep 17 00:00:00 2001 From: pietervdvn Date: Wed, 20 Jul 2022 15:04:51 +0200 Subject: [PATCH 9/9] Show a full-screen graph on click --- UI/BigComponents/TagRenderingChart.ts | 19 ++++++++++--------- UI/DashboardGui.ts | 26 +++++++++++++++++++++++--- css/index-tailwind-output.css | 4 ++++ 3 files changed, 37 insertions(+), 12 deletions(-) diff --git a/UI/BigComponents/TagRenderingChart.ts b/UI/BigComponents/TagRenderingChart.ts index e7ef2060a..f88cce188 100644 --- a/UI/BigComponents/TagRenderingChart.ts +++ b/UI/BigComponents/TagRenderingChart.ts @@ -39,7 +39,9 @@ export default class TagRenderingChart extends Combine { */ constructor(features: OsmFeature[], tagRendering: TagRenderingConfig, options?: { chartclasses?: string, - chartstyle?: string + chartstyle?: string, + includeTitle?: boolean, + groupToOtherCutoff?: 3 | number }) { const mappings = tagRendering.mappings ?? [] @@ -79,9 +81,7 @@ export default class TagRenderingChart extends Combine { const mapping = mappings[i]; if (TagUtils.MatchesMultiAnswer( mapping.if, props)) { categoryCounts[i]++ - if(categoryCounts[i] > 3){ - foundMatchingMapping = true - } + foundMatchingMapping = true } } } @@ -89,7 +89,6 @@ export default class TagRenderingChart extends Combine { if (tagRendering.freeform?.key !== undefined && props[tagRendering.freeform.key] !== undefined) { const otherValue = props[tagRendering.freeform.key] otherCounts[otherValue] = (otherCounts[otherValue] ?? 0) + 1 - barchartMode = true ; } else { unknownCount++ } @@ -107,13 +106,14 @@ export default class TagRenderingChart extends Combine { const otherData : number[] = [] for (const v in otherCounts) { const count = otherCounts[v] - if(count > 2){ + if(count >= (options.groupToOtherCutoff ?? 3)){ otherLabels.push(v) otherData.push(otherCounts[v]) }else{ otherGrouped++; } } + const labels = ["Unknown", "Other", "Not applicable", ...mappings?.map(m => m.then.txt) ?? [], ...otherLabels] const data = [unknownCount, otherGrouped, notApplicable, ...categoryCounts, ... otherData] @@ -136,9 +136,10 @@ export default class TagRenderingChart extends Combine { } } - if (tagRendering.id === undefined) { - console.log(tagRendering) + if(labels.length > 9){ + barchartMode = true; } + const config = { type: barchartMode ? 'bar' : 'doughnut', data: { @@ -168,7 +169,7 @@ export default class TagRenderingChart extends Combine { super([ - tagRendering.question ?? tagRendering.id, + options?.includeTitle ? (tagRendering.question.Clone() ?? tagRendering.id) : undefined, chart]) this.SetClass("block") diff --git a/UI/DashboardGui.ts b/UI/DashboardGui.ts index 600783c56..1e3eef507 100644 --- a/UI/DashboardGui.ts +++ b/UI/DashboardGui.ts @@ -29,6 +29,7 @@ import SimpleAddUI from "./BigComponents/SimpleAddUI"; import TagRenderingChart from "./BigComponents/TagRenderingChart"; import Loading from "./Base/Loading"; import BackToIndex from "./BigComponents/BackToIndex"; +import Locale from "./i18n/Locale"; export default class DashboardGui { @@ -128,7 +129,7 @@ export default class DashboardGui { continue } const activeFilters: FilterState[] = Array.from(filtered.appliedFilters.data.values()); - if (activeFilters.some(filter => !filter?.currentFilter?.matchesProperties(element.properties))) { + if (!activeFilters.every(filter => filter?.currentFilter === undefined || filter?.currentFilter?.matchesProperties(element.properties))) { continue } const center = GeoOperations.centerpointCoordinates(element); @@ -257,14 +258,33 @@ export default class DashboardGui { for (const tagRendering of layer.tagRenderings) { const chart = new TagRenderingChart(featuresForLayer, tagRendering, { chartclasses: "w-full", - chartstyle: "height: 60rem" + chartstyle: "height: 60rem", + includeTitle: true }) + const full = new Lazy(() => + new TagRenderingChart(featuresForLayer, tagRendering, { + chartstyle: "max-height: calc(100vh - 10rem)", + groupToOtherCutoff: 0 + }) + ) + chart.onClick(() => { + const current = self.currentView.data + full.onClick(() => { + self.currentView.setData(current) + }) + self.currentView.setData( + { + title: new Title(tagRendering.question.Clone() ?? tagRendering.id), + contents: full + }) + } + ) layerStats.push(chart.SetClass("w-full lg:w-1/3")) } els.push(new Combine(layerStats).SetClass("flex flex-wrap")) } return new Combine(els) - })) + }, [Locale.language])) new Combine([ diff --git a/css/index-tailwind-output.css b/css/index-tailwind-output.css index b90fea279..7cf5871e5 100644 --- a/css/index-tailwind-output.css +++ b/css/index-tailwind-output.css @@ -1110,6 +1110,10 @@ video { height: 12rem; } +.max-h-screen { + max-height: 100vh; +} + .max-h-7 { max-height: 1.75rem; }