From bf7e6376c0beba409bd7147522ed76c55fd170da Mon Sep 17 00:00:00 2001 From: pietervdvn Date: Sat, 19 Jun 2021 18:28:30 +0200 Subject: [PATCH] Styling tweaks, better metadata handling at data upload --- Logic/Osm/ChangesetHandler.ts | 134 ++++++++++++++++---------------- UI/Base/SubtleButton.ts | 2 +- UI/BigComponents/SimpleAddUI.ts | 3 +- UI/Input/Checkboxes.ts | 14 +++- UI/Input/RadioButton.ts | 40 ++++++---- 5 files changed, 108 insertions(+), 85 deletions(-) diff --git a/Logic/Osm/ChangesetHandler.ts b/Logic/Osm/ChangesetHandler.ts index 18ddaa926..5280510ff 100644 --- a/Logic/Osm/ChangesetHandler.ts +++ b/Logic/Osm/ChangesetHandler.ts @@ -10,12 +10,11 @@ import Constants from "../../Models/Constants"; export class ChangesetHandler { + public readonly currentChangeset: UIEventSource; private readonly _dryRun: boolean; private readonly userDetails: UIEventSource; private readonly auth: any; - public readonly currentChangeset: UIEventSource; - constructor(layoutName: string, dryRun: boolean, osmConnection: OsmConnection, auth) { this._dryRun = dryRun; this.userDetails = osmConnection.userDetails; @@ -27,14 +26,34 @@ export class ChangesetHandler { } } + private static parseUploadChangesetResponse(response: XMLDocument, allElements: ElementStorage) { + const nodes = response.getElementsByTagName("node"); + // @ts-ignore + for (const node of nodes) { + const oldId = parseInt(node.attributes.old_id.value); + const newId = parseInt(node.attributes.new_id.value); + if (oldId !== undefined && newId !== undefined && + !isNaN(oldId) && !isNaN(newId)) { + if (oldId == newId) { + continue; + } + console.log("Rewriting id: ", oldId, "-->", newId); + const element = allElements.getEventSourceById("node/" + oldId); + element.data.id = "node/" + newId; + allElements.addElementById("node/" + newId, element); + element.ping(); + + } + } + } public UploadChangeset( layout: LayoutConfig, allElements: ElementStorage, generateChangeXML: (csid: string) => string, - continuation: () => void) { - - if(this.userDetails.data.csCount == 0){ + continuation: () => void) { + + if (this.userDetails.data.csCount == 0) { // The user became a contributor! this.userDetails.data.csCount = 1; this.userDetails.ping(); @@ -51,7 +70,7 @@ export class ChangesetHandler { if (this.currentChangeset.data === undefined || this.currentChangeset.data === "") { // We have to open a new changeset - this.OpenChangeset(layout,(csId) => { + this.OpenChangeset(layout, (csId) => { this.currentChangeset.setData(csId); const changeset = generateChangeXML(csId); console.log(changeset); @@ -86,31 +105,61 @@ export class ChangesetHandler { } } + public CloseChangeset(changesetId: string = undefined, continuation: (() => void) = () => { + }) { + if (changesetId === undefined) { + changesetId = this.currentChangeset.data; + } + if (changesetId === undefined) { + return; + } + console.log("closing changeset", changesetId); + this.currentChangeset.setData(""); + this.auth.xhr({ + method: 'PUT', + path: '/api/0.6/changeset/' + changesetId + '/close', + }, function (err, response) { + if (response == null) { + + console.log("err", err); + } + console.log("Closed changeset ", changesetId) + + if (continuation !== undefined) { + continuation(); + } + }); + } private OpenChangeset( - layout : LayoutConfig, + layout: LayoutConfig, continuation: (changesetId: string) => void) { const commentExtra = layout.changesetmessage !== undefined ? " - " + layout.changesetmessage : ""; - let surveySource = ""; - if (State.state.currentGPSLocation.data !== undefined) { - surveySource = '' - } + let path = window.location.pathname; + path = path.substr(1, path.lastIndexOf("/")); + const metadata = [ + ["created_by", `MapComplete ${Constants.vNumber}`], + ["comment", `Adding data with #MapComplete for theme #${layout.id}${commentExtra}`], + ["theme", layout.id], + ["language", Locale.language.data], + ["host", window.location.host], + ["path", path], + ["source", State.state.currentGPSLocation.data !== undefined ? "survey" : undefined], + ["imagery", State.state.backgroundLayer.data.id], + ["theme-creator", layout.maintainer] + ] + .filter(kv => (kv[1] ?? "") !== "") + .map(kv => ``) + .join("\n") this.auth.xhr({ method: 'PUT', path: '/api/0.6/changeset/create', options: {header: {'Content-Type': 'text/xml'}}, content: [``, - ``, - ``, - ``, - ``, - ``, - ``, - surveySource, - (layout.maintainer ?? "") !== "" ? `` : "", + metadata, ``].join("") }, function (err, response) { if (response === undefined) { @@ -147,52 +196,5 @@ export class ChangesetHandler { }); } - public CloseChangeset(changesetId: string = undefined, continuation: (() => void) = () => { - }) { - if (changesetId === undefined) { - changesetId = this.currentChangeset.data; - } - if (changesetId === undefined) { - return; - } - console.log("closing changeset", changesetId); - this.currentChangeset.setData(""); - this.auth.xhr({ - method: 'PUT', - path: '/api/0.6/changeset/' + changesetId + '/close', - }, function (err, response) { - if (response == null) { - - console.log("err", err); - } - console.log("Closed changeset ", changesetId) - - if (continuation !== undefined) { - continuation(); - } - }); - } - - private static parseUploadChangesetResponse(response: XMLDocument, allElements: ElementStorage) { - const nodes = response.getElementsByTagName("node"); - // @ts-ignore - for (const node of nodes) { - const oldId = parseInt(node.attributes.old_id.value); - const newId = parseInt(node.attributes.new_id.value); - if (oldId !== undefined && newId !== undefined && - !isNaN(oldId) && !isNaN(newId)) { - if(oldId == newId){ - continue; - } - console.log("Rewriting id: ", oldId, "-->", newId); - const element = allElements.getEventSourceById("node/" + oldId); - element.data.id = "node/" + newId; - allElements.addElementById("node/" + newId, element); - element.ping(); - - } - } - } - } \ No newline at end of file diff --git a/UI/Base/SubtleButton.ts b/UI/Base/SubtleButton.ts index f1530a1a1..a324505f7 100644 --- a/UI/Base/SubtleButton.ts +++ b/UI/Base/SubtleButton.ts @@ -25,7 +25,7 @@ export class SubtleButton extends UIElement { if ((imageUrl ?? "") === "") { img = undefined; } else if (typeof (imageUrl) === "string") { - img = new Img(imageUrl).SetClass("w-full") + img = new Img(imageUrl) } else { img = imageUrl; } diff --git a/UI/BigComponents/SimpleAddUI.ts b/UI/BigComponents/SimpleAddUI.ts index 78730096f..6b0cbf3c4 100644 --- a/UI/BigComponents/SimpleAddUI.ts +++ b/UI/BigComponents/SimpleAddUI.ts @@ -159,8 +159,7 @@ export default class SimpleAddUI extends Toggle { return new Toggle( Translations.t.general.presetInfo.Subs({ tags: preset.tags.map(t => t.asHumanString(optionallyLinkToWiki && csCount > Constants.userJourney.tagsVisibleAndWikiLinked, true)).join("&"), - - }), + }).SetStyle("word-break: break-all"), undefined, State.state.osmConnection.userDetails.map(userdetails => userdetails.csCount >= Constants.userJourney.tagsVisibleAt) diff --git a/UI/Input/Checkboxes.ts b/UI/Input/Checkboxes.ts index e46227ecf..3ae6b5fc6 100644 --- a/UI/Input/Checkboxes.ts +++ b/UI/Input/Checkboxes.ts @@ -44,7 +44,7 @@ export default class CheckBoxes extends InputElement { input.id = "checkbox" + id input.type = "checkbox" - input.classList.add("p-1","cursor-pointer","ml-3","pl-3") + input.classList.add("p-1","cursor-pointer","m-3","pl-3","mr-0") const label = document.createElement("label") label.htmlFor = input.id @@ -52,7 +52,7 @@ export default class CheckBoxes extends InputElement { label.classList.add("block","w-full","p-2","cursor-pointer","bg-red") const wrapper = document.createElement("span") - wrapper.classList.add("flex","w-full","border", "border-gray-400") + wrapper.classList.add("flex","w-full","border", "border-gray-400","m-1") wrapper.appendChild(input) wrapper.appendChild(label) el.appendChild(wrapper) @@ -64,6 +64,16 @@ export default class CheckBoxes extends InputElement { if (selectedValues.indexOf(i) >= 0) { input.checked = true; } + + + if(input.checked){ + wrapper.classList.remove("border-gray-400") + wrapper.classList.add("border-black") + }else{ + wrapper.classList.add("border-gray-400") + wrapper.classList.remove("border-black") + } + }) input.onchange = () => { diff --git a/UI/Input/RadioButton.ts b/UI/Input/RadioButton.ts index 0ed44402c..fd5c006c2 100644 --- a/UI/Input/RadioButton.ts +++ b/UI/Input/RadioButton.ts @@ -70,18 +70,7 @@ export class RadioButton extends InputElement { const form = document.createElement("form") const inputs = [] - - value.addCallbackAndRun( - selected => { - - let somethingChecked = false; - for (let i = 0; i < inputs.length; i++){ - let input = inputs[i]; - input.checked = !somethingChecked && elements[i].IsValid(selected); - somethingChecked = somethingChecked || input.checked - } - } - ) + const wrappers: HTMLElement[] = [] for (let i1 = 0; i1 < elements.length; i1++) { let element = elements[i1]; @@ -94,7 +83,7 @@ export class RadioButton extends InputElement { input.id = "radio" + groupId + "-" + i1; input.name = groupId; input.type = "radio" - input.classList.add("p-1","cursor-pointer","ml-2","pl-2","pr-0","m-0","ml-3") + input.classList.add("p-1","cursor-pointer","ml-2","pl-2","pr-0","m-3","mr-0") input.onchange = () => { if(input.checked){ @@ -114,12 +103,35 @@ export class RadioButton extends InputElement { const block = document.createElement("div") block.appendChild(input) block.appendChild(label) - block.classList.add("flex","w-full","border", "rounded-full", "border-gray-400") + block.classList.add("flex","w-full","border", "rounded-full", "border-gray-400","m-1") + wrappers.push(block) form.appendChild(block) } + value.addCallbackAndRun( + selected => { + + let somethingChecked = false; + for (let i = 0; i < inputs.length; i++){ + let input = inputs[i]; + input.checked = !somethingChecked && elements[i].IsValid(selected); + somethingChecked = somethingChecked || input.checked + + if(input.checked){ + wrappers[i].classList.remove("border-gray-400") + wrappers[i].classList.add("border-black") + }else{ + wrappers[i].classList.add("border-gray-400") + wrappers[i].classList.remove("border-black") + } + + } + } + ) + + this.SetClass("flex flex-col") return form; }