Merge master

2020-10-17 01:37:39 +02:00 · 2020-10-17 01:37:39 +02:00 · 3ab3cef249
parent a721d3137a 4a563c7a10
commit 3ab3cef249
8 changed files with 170 additions and 129 deletions
--- a/Logic/ImageSearcher.ts
+++ b/Logic/ImageSearcher.ts
@ -4,6 +4,7 @@ import {UIElement} from "../UI/UIElement";
 import {ImgurImage} from "../UI/Image/ImgurImage";
 import {ImagesInCategory, Wikidata, Wikimedia} from "./Web/Wikimedia";
 import {UIEventSource} from "./UIEventSource";
+import {MapillaryImage} from "../UI/Image/MapillaryImage";

 /**
 * There are multiple way to fetch images for an object
@ -33,50 +34,12 @@ export class ImageSearcher extends UIEventSource<{key: string, url: string}[]> {
        this._tags = tags;

        const self = this;
-        this._wdItem.addCallback(() => {
-                // Load the wikidata item, then detect usage on 'commons'
-                let allWikidataId = self._wdItem.data.split(";");
-                for (let wikidataId of allWikidataId) {
-                    // @ts-ignore
-                    if (wikidataId.startsWith("Q")) {
-                        wikidataId = wikidataId.substr(1);
-                    }
-                    Wikimedia.GetWikiData(parseInt(wikidataId), (wd: Wikidata) => {
-                        self.AddImage(undefined, wd.image);
-                        Wikimedia.GetCategoryFiles(wd.commonsWiki, (images: ImagesInCategory) => {
-                            for (const image of images.images) {
-                                // @ts-ignore
-                                if (image.startsWith("File:")) {
-                                    self.AddImage(undefined, image);
-                                }
-                            }
-                        })
-                    })
-                }
-            }
-        );
+
+        // By wrapping this in a UIEventSource, we prevent multiple queries of loadWikiData
+        this._wdItem.addCallback(() => self.loadWikidata());
+        this._commons.addCallback(() => self.LoadCommons());


-        this._commons.addCallback(() => {
-            const allCommons: string[] = self._commons.data.split(";");
-            for (const commons of allCommons) {
-                // @ts-ignore
-                if (commons.startsWith("Category:")) {
-                    Wikimedia.GetCategoryFiles(commons, (images: ImagesInCategory) => {
-                        for (const image of images.images) {
-                            // @ts-ignore
-                            if (image.startsWith("File:")) {
-                                self.AddImage(undefined, image);
-                            }
-                        }
-                    })
-                } else { // @ts-ignore
-                    if (commons.startsWith("File:")) {
-                        self.AddImage(undefined, commons);
-                    }
-                }
-            }
-        });
        this._tags.addCallbackAndRun(() => self.LoadImages());

    }
@ -92,11 +55,54 @@ export class ImageSearcher extends UIEventSource<{key: string, url: string}[]> {
            }
        }

-        this.data.push({key:key, url:url});
+        this.data.push({key: key, url: url});
        this.ping();
    }
-    
-    private LoadImages(): void {
+
+    private loadWikidata() {
+        // Load the wikidata item, then detect usage on 'commons'
+        let allWikidataId = this._wdItem.data.split(";");
+        for (let wikidataId of allWikidataId) {
+            // @ts-ignore
+            if (wikidataId.startsWith("Q")) {
+                wikidataId = wikidataId.substr(1);
+            }
+            Wikimedia.GetWikiData(parseInt(wikidataId), (wd: Wikidata) => {
+                this.AddImage(undefined, wd.image);
+                Wikimedia.GetCategoryFiles(wd.commonsWiki, (images: ImagesInCategory) => {
+                    for (const image of images.images) {
+                        // @ts-ignore
+                        if (image.startsWith("File:")) {
+                            this.AddImage(undefined, image);
+                        }
+                    }
+                })
+            })
+        }
+    }
+
+    private LoadCommons() {
+        const allCommons: string[] = this._commons.data.split(";");
+        for (const commons of allCommons) {
+            // @ts-ignore
+            if (commons.startsWith("Category:")) {
+                Wikimedia.GetCategoryFiles(commons, (images: ImagesInCategory) => {
+                    for (const image of images.images) {
+                        // @ts-ignore
+                        if (image.startsWith("File:")) {
+                            this.AddImage(undefined, image);
+                        }
+                    }
+                })
+            } else { // @ts-ignore
+                if (commons.startsWith("File:")) {
+                    this.AddImage(undefined, commons);
+                }
+            }
+        }
+    }
+
+    private LoadImages(imagePrefix: string = "image", loadAdditional = true): void {
        const imageTag = this._tags.data.image;
        if (imageTag !== undefined) {
            const bareImages = imageTag.split(";");
@ -112,13 +118,21 @@ export class ImageSearcher extends UIEventSource<{key: string, url: string}[]> {
            }
        }

-        const wdItem = this._tags.data.wikidata;
-        if (wdItem !== undefined) {
-            this._wdItem.setData(wdItem);
-        }
-        const commons = this._tags.data.wikimedia_commons;
-        if (commons !== undefined) {
-            this._commons.setData(commons);
+        if (loadAdditional) {
+
+            const wdItem = this._tags.data.wikidata;
+            if (wdItem !== undefined) {
+                this._wdItem.setData(wdItem);
+            }
+            const commons = this._tags.data.wikimedia_commons;
+            if (commons !== undefined) {
+                this._commons.setData(commons);
+            }
+
+            if (this._tags.data.mapillary) {
+                this.AddImage("mapillary", "https://www.mapillary.com/map/im/" + this._tags.data.mapillary)
+            }
+
        }
    }

@ -132,11 +146,13 @@ export class ImageSearcher extends UIEventSource<{key: string, url: string}[]> {
        // @ts-ignore
        if (url.startsWith("File:")) {
            return new WikimediaImage(url);
-        }else if (url.startsWith("https://commons.wikimedia.org/wiki/")) {
+        } else if (url.toLowerCase().startsWith("https://commons.wikimedia.org/wiki/")) {
            const commons = url.substr("https://commons.wikimedia.org/wiki/".length);
            return new WikimediaImage(commons);
-        }else if(url.startsWith("https://i.imgur.com/")){
+        } else if (url.toLowerCase().startsWith("https://i.imgur.com/")) {
            return new ImgurImage(url);
+        } else if (url.toLowerCase().startsWith("https://www.mapillary.com/map/im/")) {
+            return new MapillaryImage(url);
        } else {
            return new SimpleImageElement(new UIEventSource<string>(url));
        }
--- a/Logic/Web/Mapillary.ts
+++ b/Logic/Web/Mapillary.ts
@ -0,0 +1,26 @@
+import $ from "jquery"
+import {LicenseInfo} from "./Wikimedia";
+
+export class Mapillary {
+
+
+    static getDescriptionOfImage(key: string,
+                                 handleDescription: ((license: LicenseInfo) => void)) {
+        const url = `https://a.mapillary.com/v3/images/${key}?client_id=TXhLaWthQ1d4RUg0czVxaTVoRjFJZzowNDczNjUzNmIyNTQyYzI2`
+
+        const settings = {
+            async: true,
+            type: 'GET',
+            url: url
+        };
+        $.getJSON(url, function(data) {
+            const license = new LicenseInfo();
+            license.artist = data.properties?.username;
+            license.licenseShortName = "CC BY-SA 4.0";
+            license.license = "Creative Commons Attribution-ShareAlike 4.0 International License";
+            license.attributionRequired = true;
+            handleDescription(license);
+        })
+
+    }
+}
--- a/State.ts
+++ b/State.ts
@ -27,7 +27,7 @@ export default class State {
    
    // The user journey states thresholds when a new feature gets unlocked
    public static userJourney = {
-        addNewPointsUnlock: 1,
+        addNewPointsUnlock: 0,
        moreScreenUnlock: 5,
        personalLayoutUnlock: 20,
        tagsVisibleAt: 100,
@ -141,11 +141,11 @@ export default class State {
        }
        this.zoom = asFloat(
            QueryParameters.GetQueryParameter("z", "" + layoutToUse.startzoom)
-            .syncWith(LocalStorageSource.Get("zoom"), true));
+            .syncWith(LocalStorageSource.Get("zoom")));
        this.lat = asFloat(QueryParameters.GetQueryParameter("lat", "" + layoutToUse.startLat)
-            .syncWith(LocalStorageSource.Get("lat"), true));
+            .syncWith(LocalStorageSource.Get("lat")));
        this.lon = asFloat(QueryParameters.GetQueryParameter("lon", "" + layoutToUse.startLon)
-            .syncWith(LocalStorageSource.Get("lon"), true));
+            .syncWith(LocalStorageSource.Get("lon")));


        this.locationControl = new UIEventSource<{ lat: number, lon: number, zoom: number }>({
--- a/UI/Image/ImageCarouselWithUpload.ts
+++ b/UI/Image/ImageCarouselWithUpload.ts
@ -1,61 +0,0 @@
-import {TagDependantUIElement, TagDependantUIElementConstructor} from "../../Customizations/UIElementConstructor";
-import {ImageCarousel} from "./ImageCarousel";
-import {ImageUploadFlow} from "./ImageUploadFlow";
-import Translation from "../i18n/Translation";
-import {UIEventSource} from "../../Logic/UIEventSource";
-
-export default class ImageCarouselWithUploadConstructor implements TagDependantUIElementConstructor{
-    
-    IsKnown(properties: any): boolean {
-        return true;
-    }
-
-    IsQuestioning(properties: any): boolean {
-        return false;
-    }
-
-    construct(dependencies): TagDependantUIElement {
-        return new ImageCarouselWithUpload(dependencies);
-    }
-    
-    GetContent(tags: any): Translation {
-        return new Translation({"*": "Image carousel with uploader"});
-    }
-}
-
-class OsmImageUploadHandler {
-    constructor(tags: UIEventSource<any>) {
-        
-    }
-
-}
-
-class ImageCarouselWithUpload extends TagDependantUIElement {
-    private _imageElement: ImageCarousel;
-    private _pictureUploader: ImageUploadFlow;
-
-    constructor(tags: UIEventSource<any>) {
-        super(tags);
-        this._imageElement = new ImageCarousel(tags);
-        this._pictureUploader = new OsmImageUploadHandler(tags).getUI();
-
-    }
-
-    InnerRender(): string {
-        return this._imageElement.Render() +
-            this._pictureUploader.Render();
-    }
-
-    IsKnown(): boolean {
-        return true;
-    }
-
-    IsQuestioning(): boolean {
-        return false;
-    }
-    
-    IsSkipped(): boolean {
-        return false;
-    }
-
-}
--- a/UI/Image/ImgurImage.ts
+++ b/UI/Image/ImgurImage.ts
@ -10,7 +10,7 @@ export class ImgurImage extends UIElement {
    /***
     * Dictionary from url to alreayd known license info
     */
-    static allLicenseInfos: any = {};
+    private static allLicenseInfos: any = {};
    private readonly _imageMeta: UIEventSource<LicenseInfo>;
    private readonly _imageLocation: string;

@ -33,7 +33,7 @@ export class ImgurImage extends UIElement {
    }

    InnerRender(): string {
-        const image = "<img src='" + this._imageLocation + "' " + "alt='' >";
+        const image = `<img src='${this._imageLocation}' alt='' >`;
        
        if(this._imageMeta.data === null){
            return image;
--- a/UI/Image/MapillaryImage.ts
+++ b/UI/Image/MapillaryImage.ts
@ -0,0 +1,64 @@
+import {UIElement} from "../UIElement";
+import {UIEventSource} from "../../Logic/UIEventSource";
+import {LicenseInfo} from "../../Logic/Web/Wikimedia";
+import {Imgur} from "../../Logic/Web/Imgur";
+import {Mapillary} from "../../Logic/Web/Mapillary";
+import {Img} from "../Img";
+import {FixedUiElement} from "../Base/FixedUiElement";
+
+
+export class MapillaryImage extends UIElement {
+
+    /***
+     * Dictionary from url to alreayd known license info
+     */
+    private static allLicenseInfos: any = {};
+    private readonly _imageMeta: UIEventSource<LicenseInfo>;
+    private readonly _imageLocation: string;
+
+    constructor(source: string) {
+        super()
+        
+        if(source.toLowerCase().startsWith("https://www.mapillary.com/map/im/")){
+            source = source.substring("https://www.mapillary.com/map/im/".length);
+        }
+        
+        this._imageLocation = source;
+        if (MapillaryImage.allLicenseInfos[source] !== undefined) {
+            this._imageMeta = MapillaryImage.allLicenseInfos[source];
+        } else {
+            this._imageMeta = new UIEventSource<LicenseInfo>(null);
+            MapillaryImage.allLicenseInfos[source] = this._imageMeta;
+            const self = this;
+            Mapillary.getDescriptionOfImage(source, (license) => {
+                self._imageMeta.setData(license)
+            })
+        }
+
+        this.ListenTo(this._imageMeta);
+
+    }
+
+    InnerRender(): string {
+        const url = `https://images.mapillary.com/${this._imageLocation}/thumb-640.jpg?client_id=TXhLaWthQ1d4RUg0czVxaTVoRjFJZzowNDczNjUzNmIyNTQyYzI2`;
+        const image = `<img src='${url}'>`;
+
+        if (this._imageMeta === undefined || this._imageMeta.data === null) {
+            return image;
+        }
+
+        const attribution =
+            "<span class='attribution-author'><b>" + (this._imageMeta.data.artist ?? "") + "</b></span>" + " <span class='license'>" + (this._imageMeta.data.licenseShortName ?? "") + "</span>";
+
+        return "<div class='imgWithAttr'>" +
+            image +
+            "<div class='attribution'>" +
+
+            new FixedUiElement(Img.mapillaryLogo).SetStyle("height: 1.5em").Render() +
+            attribution +
+            "</div>" +
+            "</div>";
+    }
+
+
+}
--- a/UI/Img.ts
+++ b/UI/Img.ts
@ -37,5 +37,7 @@ export class Img {
    static openFilterButton: string = `<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M20 2L2 20M20 20L2 2" stroke="#003B8B" stroke-width="4"/>
 </svg>  `
+    
+    static mapillaryLogo = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"none\" viewBox=\"0 0 32 32\"><path fill=\"#fff\" fill-rule=\"evenodd\" d=\"M32 16c0 8.837-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0s16 7.163 16 16zm-24.44-.974c-.371-.201-.303-.725.166-.859.398-.113 3.627-1.196 4.605-1.524a.59.59 0 00.373-.369l1.57-4.603c.146-.43.678-.432.894-.015.024.046.325.593.731 1.331v.001c.896 1.629 2.302 4.185 2.372 4.34a.473.473 0 01-.194.617c-.133.083-.314.19-.469.28l-.269.16c-.237.148-.464.045-.573-.183-.065-.137-.39-.719-.713-1.299-.217-.389-.433-.776-.57-1.027-.17-.313-.682-.433-.854.072l-.566 1.66a.613.613 0 01-.376.373l-1.703.564c-.336.111-.5.626-.046.843.038.018.383.202.798.423h.001c.631.337 1.425.76 1.552.82.21.1.328.39.204.595-.168.28-.384.635-.462.75a.48.48 0 01-.626.149c-.223-.119-5.711-3.027-5.844-3.099zm7.378 3.9c.288.147 7.276 3.844 7.496 3.963.441.238.907-.222.668-.652-.041-.073-.507-.929-1.107-2.034l-.002-.004c-1.166-2.144-2.84-5.224-2.925-5.365-.128-.214-.442-.322-.678-.178-.232.14-.498.298-.648.374-.3.153-.338.383-.203.639.297.562 1.232 2.267 1.34 2.446.223.374-.276.801-.615.615-.054-.03-.408-.217-.834-.442-.697-.368-1.587-.839-1.684-.896-.157-.09-.435-.09-.626.218-.138.224-.308.502-.386.642-.155.274-.084.527.204.674z\" clip-rule=\"evenodd\" style=\"transition: all 0.2s ease 0s;\"></path></svg>"
 }

--- a/test.ts
+++ b/test.ts
@ -1,15 +1,9 @@
 //*

+import SpecialVisualizations from "./UI/SpecialVisualizations";

-import LiveQueryHandler from "./Logic/Web/LiveQueryHandler";
-import {VariableUiElement} from "./UI/Base/VariableUIElement";
+SpecialVisualizations.HelpMessage.AttachTo("maindivgi")

-const source = LiveQueryHandler.FetchLiveData("https://data.mobility.brussels/bike/api/counts/?request=live&featureID=CJM90",
-    "hour:data.hour_cnt;day:data.day_cnt;year:data.year_cnt".split(";"))
-source.addCallback((data) => {console.log(data)})
-new VariableUiElement(source.map(data => {
-    return ["Data is:", data.hour, "last hour;", data.day, "last day; ", data.year, "last year;"].join(" ")
-})).AttachTo('maindiv')

 /*/