Styling tweaks, better metadata handling at data upload

Logic/Osm/ChangesetHandler.ts

@@ -10,12 +10,11 @@ import Constants from "../../Models/Constants";
 
 export class ChangesetHandler {
 
+    public readonly currentChangeset: UIEventSource<string>;
     private readonly _dryRun: boolean;
     private readonly userDetails: UIEventSource<UserDetails>;
     private readonly auth: any;
 
-    public readonly currentChangeset: UIEventSource<string>;
-
     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 = '<tag k="source" v="survey"/>'
-        }
+        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 => `<tag k="${kv[0]}" v="${escapeHtml(kv[1])}"/>`)
+            .join("\n")
 
         this.auth.xhr({
             method: 'PUT',
             path: '/api/0.6/changeset/create',
             options: {header: {'Content-Type': 'text/xml'}},
             content: [`<osm><changeset>`,
-                `<tag k="created_by" v="MapComplete ${Constants.vNumber}" />`,
-                `<tag k="comment" v="Adding data with #MapComplete for theme #${layout.id}${commentExtra}"/>`,
-                `<tag k="theme" v="${layout.id}"/>`,
-                `<tag k="language" v="${Locale.language.data}"/>`,
-                `<tag k="host" v="${escapeHtml(window.location.host)}"/>`,
-                `<tag k="imagery" v="${State.state.backgroundLayer.data.id}"/>`,
-                surveySource,
-                (layout.maintainer ?? "") !== "" ? `<tag k="theme-creator" v="${escapeHtml(layout.maintainer)}"/>` : "",
+                metadata,
                 `</changeset></osm>`].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();
-
-            }
-        }
-    }
-
 
 }

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;
         }

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)

UI/Input/Checkboxes.ts

@@ -44,7 +44,7 @@ export default class CheckBoxes extends InputElement<number[]> {
             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<number[]> {
             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<number[]> {
                 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 = () => {

UI/Input/RadioButton.ts

@@ -70,18 +70,7 @@ export class RadioButton<T> extends InputElement<T> {
 
         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<T> extends InputElement<T> {
             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<T> extends InputElement<T> {
             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;
     }