Tweak nearby images range

Models/Constants.ts

@@ -2,7 +2,7 @@ import {Utils} from "../Utils";
 
 export default class Constants {
 
-    public static vNumber = "0.19.0";
+    public static vNumber = "0.20.0";
     
     public static ImgurApiKey = '7070e7167f0a25a'
     public static readonly mapillary_client_token_v4 = "MLY|4441509239301885|b40ad2d3ea105435bd40c7e76993ae85"

UI/Popup/NearbyImages.ts

@@ -11,6 +11,7 @@ import {InputElement} from "../Input/InputElement";
 import {VariableUiElement} from "../Base/VariableUIElement";
 import Translations from "../i18n/Translations";
 import {Mapillary} from "../../Logic/ImageProviders/Mapillary";
+import {SubtleButton} from "../Base/SubtleButton";
 
 export interface P4CPicture {
     pictureUrl: string,
@@ -30,12 +31,14 @@ export interface P4CPicture {
 }
 
 
-interface NearbyImageOptions {
+export interface NearbyImageOptions {
     lon: number,
     lat: number,
     radius: number,
-    maxDaysOld?: 1095,
+    maxDaysOld?: 1095 | number,
-    blacklist: UIEventSource<{url: string}[]>
+    blacklist: UIEventSource<{url: string}[]>,
+    shownImagesCount?: UIEventSource<number>,
+    towardscenter?: boolean;
 }
 
 export default class NearbyImages extends VariableUiElement {
@@ -44,10 +47,12 @@ export default class NearbyImages extends VariableUiElement {
         const t = Translations.t.image.nearbyPictures
         const P4C = require("../../vendor/P4C.min")
         const picManager = new P4C.PicturesManager({});
-
+        const shownImages = options.shownImagesCount ?? new UIEventSource(25);
-        const loadedPictures = UIEventSource.FromPromise<P4CPicture[]>(
+        const loadedPictures =
+            UIEventSource.FromPromise<P4CPicture[]>(
             picManager.startPicsRetrievalAround(new P4C.LatLng(options.lat, options.lon), options.radius, {
-                mindate: new Date().getTime() - (options.maxDaysOld ?? 1095) * 24 * 60 * 60 * 1000
+                mindate: new Date().getTime() - (options.maxDaysOld ?? (3*365)) * 24 * 60 * 60 * 1000,
+                towardscenter: options.towardscenter
             })
         ).map(images => {
             console.log("Images are" ,images, "blacklisted is", options.blacklist.data)
@@ -57,6 +62,18 @@ export default class NearbyImages extends VariableUiElement {
                 && i.details.isSpherical === false);
         }, [options.blacklist])
 
+        const loadMoreButton = new Combine([new SubtleButton(Svg.add_svg(), t.loadMore).onClick(() => {
+            shownImages.setData(shownImages.data + 25)
+        })]).SetClass("flex flex-col justify-center")
+        const imageElements = loadedPictures.map(imgs => {
+            const elements =  (imgs ?? []).slice(0, shownImages.data).map(i => this.prepareElement(i));
+            if(imgs !== undefined && elements.length < imgs.length){
+                // We effectively sliced some items, so we can increase the count
+                elements.push(loadMoreButton)
+            }
+            return elements;
+        },[shownImages]);
+        
         super(loadedPictures.map(images => {
             if(images === undefined){
               return  new Loading(t.loading);
@@ -64,7 +81,7 @@ export default class NearbyImages extends VariableUiElement {
             if(images.length === 0){
                 return t.nothingFound.SetClass("alert block")
             }
-            return new SlideShow(loadedPictures.map(imgs => (imgs ?? []).slice(0, 25).map(i => this.prepareElement(i))))
+            return new SlideShow(imageElements)
         }));
                
     }

UI/SpecialVisualizations.ts

@@ -48,7 +48,7 @@ import {TextField} from "./Input/TextField";
 import Wikidata, {WikidataResponse} from "../Logic/Web/Wikidata";
 import {Translation} from "./i18n/Translation";
 import {AllTagsPanel} from "./AllTagsPanel";
-import NearbyImages, {P4CPicture, SelectOneNearbyImage} from "./Popup/NearbyImages";
+import NearbyImages, {NearbyImageOptions, P4CPicture, SelectOneNearbyImage} from "./Popup/NearbyImages";
 import Lazy from "./Base/Lazy";
 import ChangeTagAction from "../Logic/Osm/Actions/ChangeTagAction";
 import {Tag} from "../Logic/Tags/Tag";
@@ -176,10 +176,13 @@ class NearbyImageVis implements SpecialVisualization {
 
         const nearby = new Lazy(() => {
             const alreadyInTheImage = AllImageProviders.LoadImagesFor(tagSource)
-            const options = {
+            const options : NearbyImageOptions & {value}= {
-                lon, lat, radius: 50,
+                lon, lat, radius: 250,
                 value: selectedImage,
-                blacklist: alreadyInTheImage
+                blacklist: alreadyInTheImage,
+                towardscenter: false,
+                maxDaysOld: 365 * 5
+                
             };
             const slideshow = canBeEdited ? new SelectOneNearbyImage(options) : new NearbyImages(options);
             return new Combine([slideshow, new MapillaryLinkVis().constr(state, tagSource, [])])