More fixes to the refactored code

2021-06-15 16:18:58 +02:00 · 2021-06-15 16:18:58 +02:00 · 94f9a0de56
commit 94f9a0de56
parent 42d13f564c
15 changed files with 78 additions and 82 deletions
--- a/Logic/Web/ImgurUploader.ts
+++ b/Logic/Web/ImgurUploader.ts
@ -26,7 +26,7 @@ export default class ImgurUploader {
            function (url) {
                console.log("File saved at", url);
                self.success.setData([...self.success.data, url]);
-            this.    handleSuccessUrl(url);
+                self._handleSuccessUrl(url);
            },
            function () {
                console.log("All uploads completed");
--- a/UI/Image/DeleteImage.ts
+++ b/UI/Image/DeleteImage.ts
@ -9,49 +9,47 @@ import {Tag} from "../../Logic/Tags/Tag";
 import BaseUIElement from "../BaseUIElement";


-export default class DeleteImage extends UIElement {
-    private readonly key: string;
-    private readonly tags: UIEventSource<any>;
-
-    private readonly isDeletedBadge: BaseUIElement;
-    private readonly deleteDialog: BaseUIElement;
+export default class DeleteImage extends Toggle {

    constructor(key: string, tags: UIEventSource<any>) {
-        super(tags);
-        this.tags = tags;
-        this.key = key;
-
-        this.isDeletedBadge = Translations.t.image.isDeleted;
+        const oldValue = tags.data[key]
+        const isDeletedBadge = Translations.t.image.isDeleted.Clone()
+            .SetClass("rounded-full p-1")
+            .SetStyle("color:white;background:#ff8c8c")
+            .onClick(() => {
+                State.state?.changes?.addTag(tags.data.id, new Tag(key, oldValue), tags);
+            });

        const deleteButton = Translations.t.image.doDelete.Clone()
            .SetClass("block w-full pl-4 pr-4")
            .SetStyle("color:white;background:#ff8c8c; border-top-left-radius:30rem; border-top-right-radius: 30rem;")
            .onClick(() => {
-                State.state?.changes.addTag(tags.data.id, new Tag(key, ""));
+                State.state?.changes?.addTag(tags.data.id, new Tag(key, ""), tags);
            });

-        const cancelButton = Translations.t.general.cancel.SetClass("bg-white pl-4 pr-4").SetStyle( "border-bottom-left-radius:30rem; border-bottom-right-radius: 30rem;");
-        this.deleteDialog = new Toggle(
+        const cancelButton = Translations.t.general.cancel.Clone().SetClass("bg-white pl-4 pr-4").SetStyle("border-bottom-left-radius:30rem; border-bottom-right-radius: 30rem;");
+        const openDelete = Svg.delete_icon_svg().SetStyle("width: 2em; height: 2em; display:block;")
+        const deleteDialog = new Toggle(
            new Combine([
                deleteButton,
                cancelButton
            ]).SetClass("flex flex-col background-black"),
-            Svg.delete_icon_svg().SetStyle("width: 2em; height: 2em; display:block;")
-        ).ToggleOnClick()
+            openDelete
+        )

-    }
+        cancelButton.onClick(() => deleteDialog.isEnabled.setData(false))
+        openDelete.onClick(() => deleteDialog.isEnabled.setData(true))

-    InnerRender() {
-        if(! State.state?.featureSwitchUserbadge?.data){
-            return "";
-        }
-
-        const value = this.tags.data[this.key];
-        if (value === undefined || value === "") {
-            return this.isDeletedBadge;
-        }
-
-        return this.deleteDialog;
+        super(
+            new Toggle(
+                deleteDialog,
+                isDeletedBadge,
+                tags.map(tags => (tags[key] ?? "") !== "")
+            ),
+            undefined /*Login (and thus editing) is disabled*/,
+            State.state?.featureSwitchUserbadge ?? new UIEventSource<boolean>(true)
+        )
+        this.SetClass("cursor-pointer")
    }

 }
--- a/UI/Image/ImageUploadFlow.ts
+++ b/UI/Image/ImageUploadFlow.ts
@ -28,7 +28,7 @@ export class ImageUploadFlow extends Toggle {
                key = imagePrefix + ":" + freeIndex;
            }
            console.log("Adding image:" + key, url);
-            State.state.changes.addTag(tags.id, new Tag(key, url));
+            State.state.changes.addTag(tags.id, new Tag(key, url), tagsSource);
        })


@ -47,7 +47,7 @@ export class ImageUploadFlow extends Toggle {
            }

            console.log("Received images from the user, starting upload")
-            const license = licensePicker.GetValue().data ?? "CC0"
+            const license = licensePicker.GetValue()?.data ?? "CC0"

            const tags = tagsSource.data;

--- a/UI/Image/SlideShow.ts
+++ b/UI/Image/SlideShow.ts
@ -1,6 +1,5 @@
 import {UIEventSource} from "../../Logic/UIEventSource";
 import BaseUIElement from "../BaseUIElement";
-import $ from "jquery"

 export class SlideShow extends BaseUIElement {

@ -15,15 +14,29 @@ export class SlideShow extends BaseUIElement {
    protected InnerConstructElement(): HTMLElement {
        const el = document.createElement("div")
        el.classList.add("slic-carousel")
+        el.style.overflowX = "auto"
+        el.style.width = "min-content"
+        el.style.minWidth = "min-content"
+        el.style.display = "flex"

        this.embeddedElements.addCallbackAndRun(elements => {
+            while (el.firstChild) {
+                el.removeChild(el.lastChild)
+            }
+
            for (const element of elements ?? []) {
-                element.SetClass("slick-carousel-content")
+                element.SetClass("block ml-1")
+                    .SetStyle("width: 300px;  max-height: var(--image-carousel-height); height: var(--image-carousel-height)")
+
                el.appendChild(element.ConstructElement())
            }
        });

-        return el;
+        const wrapper = document.createElement("div")
+        wrapper.style.maxWidth = "100%"
+        wrapper.style.overflowX = "auto"
+        wrapper.appendChild(el)
+        return wrapper;
    }

 }
--- a/UI/Input/DropDown.ts
+++ b/UI/Input/DropDown.ts
@ -21,6 +21,8 @@ export class DropDown<T> extends InputElement<T> {
                }
    ) {
        super();
+        value = value ?? new UIEventSource<T>(undefined)
+        this._value = value
        this._values = values;
        if (values.length <= 1) {
            return;
--- a/UI/Input/TextField.ts
+++ b/UI/Input/TextField.ts
@ -106,7 +106,7 @@ export class TextField extends InputElement<string> {
                newCursorPos--;
            }
            // @ts-ignore
-            TextField.SetCursorPosition(newCursorPos);
+            TextField.SetCursorPosition(field, newCursorPos);
        };


--- a/UI/Popup/FeatureInfoBox.ts
+++ b/UI/Popup/FeatureInfoBox.ts
@ -53,7 +53,7 @@ export default class FeatureInfoBox extends ScrollableFullScreen {
        }

        let questionBoxIsUsed = false;
-        const renderings = layerConfig.tagRenderings.map(tr => {
+        const renderings : BaseUIElement[] = layerConfig.tagRenderings.map(tr => {
            if (tr.question === null) {
                // This is the question box!
                questionBoxIsUsed = true;
--- a/UI/ShowDataLayer.ts
+++ b/UI/ShowDataLayer.ts
@ -126,22 +126,23 @@ export default class ShowDataLayer {
            closeButton: false
        }, leafletLayer);

-         leafletLayer.bindPopup(popup);
+        leafletLayer.bindPopup(popup);

-        let infobox : FeatureInfoBox = undefined;
+        let infobox: FeatureInfoBox = undefined;

        const id = `popup-${feature.properties.id}-${this._cleanCount}`
-        popup.setContent(`<div style='height: 50vh' id='${id}'>Rendering</div>`)
+        popup.setContent(`<div style='height: 65vh' id='${id}'>Rendering</div>`)

        leafletLayer.on("popupopen", () => {
            State.state.selectedElement.setData(feature)
-                if (infobox === undefined) {
+            if (infobox === undefined) {
                const tags = State.state.allElements.getEventSourceById(feature.properties.id);
                infobox = new FeatureInfoBox(tags, layer);

                infobox.isShown.addCallback(isShown => {
                    if (!isShown) {
                        State.state.selectedElement.setData(undefined);
+                        leafletLayer.closePopup()
                    }
                });
            }
--- a/Utils.ts
+++ b/Utils.ts
@ -108,7 +108,7 @@ export class Utils {
    }

    public static EllipsesAfter(str: string, l: number = 100) {
-        if (str === undefined) {
+        if (str === undefined || str === null) {
            return undefined;
        }
        if (str.length <= l) {
--- a/css/mobile.css
+++ b/css/mobile.css
@ -55,6 +55,10 @@ Contains tweaks for small screens
    .leaflet-control-attribution{
        display: none;
    }
+    
+    .leaflet-popup {
+        display: none;
+    }
 }


--- a/css/slideshow.css
+++ b/css/slideshow.css
@ -1,22 +1,18 @@

-.slick-next {
-    top: unset;
-    bottom: -25px;
-    right: 15px;
-    z-index: 10000;
+
+
+.slick-carousel-content {
+    width: 300px;
+    max-height: var(--image-carousel-height);
+    display: block;
+    margin-left: 10px;
 }

-.slick-prev {
-    top: unset;
-    bottom: -25px;
-    left: 0;
-    z-index: 10000;
+.slick-carousel-content img {
+    /**
+Workaround to patch images within a slick carousel
+ */
+    height: var(--image-carousel-height);
+    width: auto;
 }

-.slick-next::before {
-    font-size: 35px;
-}
-
-.slick-prev::before {
-    font-size: 35px;
-}
--- a/index.css
+++ b/index.css
@ -65,21 +65,6 @@
    --image-carousel-height: 400px;
 }

-.slick-carousel-content {
-    width: 300px;
-    max-height: var(--image-carousel-height);
-    display: block;
-    margin-left: 10px;
-}
-
-.slick-carousel-content img {
-    /**
-Workaround to patch images within a slick carousel
- */
-   height: var(--image-carousel-height);
-    width: auto;
-}
-
 html, body {
    height: 100%;
    min-height: 100vh;
--- a/index.html
+++ b/index.html
@ -14,7 +14,6 @@
    <link rel="stylesheet" href="./css/tagrendering.css"/>
    <link rel="stylesheet" type="text/css" href="node_modules/slick-carousel/slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="node_modules/slick-carousel/slick/slick-theme.css"/>
-    <link rel="stylesheet" href="./css/slideshow.css"/>
    <link rel="stylesheet" href="css/ReviewElement.css"/>
    <link rel="stylesheet" href="vendor/MarkerCluster.css"/>
    <link rel="stylesheet" href="vendor/MarkerCluster.Default.css"/>
--- a/package.json
+++ b/package.json
@ -80,14 +80,12 @@
    "postcss": "^7.0.35",
    "prompt-sync": "^4.2.0",
    "sharp": "^0.27.0",
-    "slick-carousel": "^1.8.1",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
    "tslint": "^6.1.3"
  },
  "devDependencies": {
    "@babel/polyfill": "^7.10.4",
    "@types/node": "^7.0.5",
-    "@types/slick-carousel": "^1.6.34",
    "assert": "^2.0.0",
    "fs": "0.0.1-security",
    "marked": "^2.0.0",
--- a/test.ts
+++ b/test.ts
@ -10,9 +10,9 @@ const tagsSource = new UIEventSource({
    name:'name',
    surface:'asphalt',
    image: "https://i.imgur.com/kX3rl3v.jpg",
-    "image:1": "https://i.imgur.com/kX3rl3v.jpg",
+    "image:1": "https://i.imgur.com/oHAJqMB.jpg",
+   // "opening_hours":"mo-fr 09:00-18:00",
    _country:"be",
-  //      "opening_hours":"mo-fr 09:00-18:00"
 })

 const state = new State(undefined)