Finish the additions of reviews

AllTranslationAssets.ts

@@ -109,7 +109,8 @@ export default class AllTranslationAssets {
       saturday: new Translation( {"en":"Saturday","ca":"Dissabte","es":"Sábado","nl":"Zaterdag","fr":"Samedi"} ),
       sunday: new Translation( {"en":"Sunday","ca":"Diumenge","es":"Domingo","nl":"Zondag","fr":"Dimance"} ),
 },
-    opening_hours: {      open_during_ph: new Translation( {"nl":"Op een feestdag is deze zaak","ca":"Durant festes aquest servei és","es":"Durante fiestas este servicio está","en":"During a public holiday, this amenity is"} ),
+    opening_hours: {      error_loading: new Translation( {"en":"Error: could not visualize these opening hours.","nl":"Sorry, deze openingsuren kunnen niet getoond worden"} ),
+      open_during_ph: new Translation( {"nl":"Op een feestdag is deze zaak","ca":"Durant festes aquest servei és","es":"Durante fiestas este servicio está","en":"During a public holiday, this amenity is"} ),
       opensAt: new Translation( {"en":"from","ca":"des de","es":"desde","nl":"vanaf"} ),
       openTill: new Translation( {"en":"till","ca":"fins","es":" hasta","nl":"tot"} ),
       not_all_rules_parsed: new Translation( {"en":"The opening hours of this shop are complicated. The following rules are ignored in the input element:","ca":"L'horari d'aquesta botiga és complicat. Les normes següents seran ignorades en l'entrada:","es":"El horario de esta tienda es complejo. Las normas siguientes serán ignoradas en la entrada:"} ),
@@ -125,7 +126,16 @@ export default class AllTranslationAssets {
     reload: new Translation( {"en":"Reload the data","es":"Recargar datos","ca":"Recarregar dades","gl":"Recargar os datos","de":"Daten neu laden"} ),
 },
   reviews: {    title: new Translation( {"en":"{count} reviews","nl":"{count} beoordelingen"} ),
+    name_required: new Translation( {"en":"A name is required in order to display and create reviews","nl":"De naam van dit object moet gekend zijn om een review te kunnen maken"} ),
     no_reviews_yet: new Translation( {"en":"There are no reviews yet. Be the first to write one and help open data and the business!","nl":"Er zijn nog geen beoordelingen. Wees de eerste om een beoordeling te schrijven en help open data en het bedrijf"} ),
+    write_a_comment: new Translation( {"en":"Leave a review...","nl":"Schrijf een beoordeling..."} ),
+    no_rating: new Translation( {"en":"No rating given","nl":"Geen score bekend"} ),
+    posting_as: new Translation( {"en":"Posting as","nl":"Ingelogd als"} ),
+    i_am_affiliated: new Translation( {"en":"<div'><span>I am affiliated with this object</span><br/><span class='subtle'>Check if you are the owner, creator, employee, ... or similar</span></div>","nl":"<div style='display:inline-block;max-width: 40%;'><span>I am affiliated with this object</span><br/><span class='subtle'>Vink aan indien je de oprichter, maker, werknemer, ... of dergelijke bent</span></div>"} ),
+    affiliated_reviewer_warning: new Translation( {"en":"(Affiliated review)","nl":"(Review door betrokkene)"} ),
+    saving_review: new Translation( {"en":"Saving...","nl":"Opslaan..."} ),
+    saved: new Translation( {"en":"<span class='thanks'>Review saved. Thanks for sharing!</span>","nl":"<span class='thanks'>Bedankt om je beoordeling te delen!</span>"} ),
     attribution: new Translation( {"en":"Reviews are powered by <a href='https://mangrove.reviews/' target='_blank'>Mangrove Reviews</a> and are available under <a href='https://mangrove.reviews/terms#8-licensing-of-content' target='_blank'>CC-BY 4.0</a>","nl":"De beoordelingen worden voorzien door <a href='https://mangrove.reviews/' target='_blank'>Mangrove Reviews</a> en zijn beschikbaar onder de<a href='https://mangrove.reviews/terms#8-licensing-of-content' target='_blank'>CC-BY 4.0-licentie</a> "} ),
+    plz_login: new Translation( {"en":"Login to leave a review","nl":"Meld je aan om een beoordeling te geven"} ),
 },
 }}

Customizations/JSON/LayerConfig.ts

@@ -93,6 +93,12 @@ export default class LayerConfig {
             return tagRenderings.map(
                 (renderingJson, i) => {
                     if (typeof renderingJson === "string") {
+                        
+                        if(renderingJson === "questions"){
+                            return new TagRenderingConfig("questions")
+                        }
+                        
+                        
                         const shared = SharedTagRenderings.SharedTagRendering[renderingJson];
                         if (shared !== undefined) {
                             return shared;

Customizations/JSON/LayerConfigJson.ts

@@ -143,6 +143,10 @@ export interface LayerConfigJson {
      * Note that we can also use a string here - where the string refers to a tagrenering defined in `assets/questions/questions.json`,
      * where a few very general questions are defined e.g. website, phone number, ...
      * 
+     * A special value is 'questions', which indicates the location of the questions box. If not specified, it'll be appended to the bottom of the featureInfobox.
+     * 
      */
     tagRenderings?: (string | TagRenderingConfigJson) []
+    
+    
 }

Customizations/JSON/TagRenderingConfig.ts

@@ -31,8 +31,15 @@ export default class TagRenderingConfig {
 
     constructor(json: string | TagRenderingConfigJson, context?: string) {
 
-        if(json === undefined){
+        if (json === "questions") {
-            throw "Initing a TagRenderingConfig with undefined in "+context;
+            // Very special value
+            this.render = null;
+            this.question = null;
+            this.condition = null;
+        }
+
+        if (json === undefined) {
+            throw "Initing a TagRenderingConfig with undefined in " + context;
         }
         if (typeof json === "string") {
             this.render = Translations.T(json);
@@ -63,13 +70,13 @@ export default class TagRenderingConfig {
                     throw "Invalid mapping: if without body"
                 }
                 let hideInAnswer : boolean | TagsFilter = false;
-                if(typeof mapping.hideInAnswer === "boolean"){
+                if (typeof mapping.hideInAnswer === "boolean") {
                     hideInAnswer = mapping.hideInAnswer;
-                }else{
+                } else if (mapping.hideInAnswer !== undefined) {
-                    hideInAnswer = FromJSON.Tag(mapping.hideInAnswer);
+                    hideInAnswer = FromJSON.Tag(mapping.hideInAnswer, `${context}.mapping[${i}].hideInAnswer`);
                 }
                 return {
-                    if: FromJSON.Tag(mapping.if, `${context}.mapping[${i}]`),
+                    if: FromJSON.Tag(mapping.if, `${context}.mapping[${i}].if`),
                     then: Translations.T(mapping.then),
                     hideInAnswer: hideInAnswer
                 };

Customizations/SharedTagRenderings.ts

@@ -10,12 +10,11 @@ export default class SharedTagRenderings {
     private static generatedSharedFields(iconsOnly = false) {
         const dict = {}
 
-
         function add(key, store) {
             try {
-                dict[key] = new TagRenderingConfig(store[key])
+                dict[key] = new TagRenderingConfig(store[key], key)
             } catch (e) {
-                console.error("BUG: could not parse", key, " from questions.json or icons.json", e)
+                console.error("BUG: could not parse", key, " from questions.json or icons.json - this error happened during the build step of the SharedTagRenderings", e)
             }
         }
 

Logic/Osm/OsmConnection.ts

@@ -24,7 +24,7 @@ export class OsmConnection {
     
     public auth;
     public userDetails: UIEventSource<UserDetails>;
-    private _dryRun: boolean;
+    _dryRun: boolean;
 
     public preferencesHandler: OsmPreferences;
     public changesetHandler: ChangesetHandler;

Logic/Web/MangroveReviews.ts

@@ -1,75 +1,158 @@
 import * as mangrove from 'mangrove-reviews'
 import {UIEventSource} from "../UIEventSource";
+import {Review} from "./Review";
+
+export class MangroveIdentity {
+    private readonly _mangroveIdentity: UIEventSource<string>;
+    public keypair: any = undefined;
+
+    constructor(mangroveIdentity: UIEventSource<string>) {
+        const self = this;
+        this._mangroveIdentity = mangroveIdentity;
+        mangroveIdentity.addCallbackAndRun(str => {
+            if (str === undefined || str === "") {
+                return;
+            }
+            mangrove.jwkToKeypair(JSON.parse(str)).then(keypair => {
+                self.keypair = keypair;
+                console.log("Identity loaded")
+            })
+        })
+        if ((mangroveIdentity.data ?? "") === "") {
+            this.CreateIdentity();
+        }
+    }
+
+    /**
+     * Creates an identity if none exists already.
+     * Is written into the UIEventsource, which was passed into the constructor
+     * @constructor
+     */
+    private CreateIdentity() {
+        if ("" !== (this._mangroveIdentity.data ?? "")) {
+            throw "Identity already defined - not creating a new one"
+        }
+        const self = this;
+        mangrove.generateKeypair().then(
+            keypair => {
+                self.keypair = keypair;
+                mangrove.keypairToJwk(keypair).then(jwk => {
+                    self._mangroveIdentity.setData(JSON.stringify(jwk));
+                })
+            });
+    }
+
+}
 
 export default class MangroveReviews {
+    private readonly _lon: number;
+    private readonly _lat: number;
+    private readonly _name: string;
+    private readonly _reviews: UIEventSource<Review[]> = new UIEventSource<Review[]>([]);
+    private _dryRun: boolean;
+    private _mangroveIdentity: MangroveIdentity;
+    private _lastUpdate : Date = undefined;
 
-    constructor() {
+    private static _reviewsCache = {};
+    
+    public static Get(lon: number, lat: number, name: string,
+                      identity: MangroveIdentity,
+                      dryRun?: boolean){
+        const newReviews = new MangroveReviews(lon, lat, name, identity, dryRun);
+        
+        const uri = newReviews.GetSubjectUri();
+        const cached = MangroveReviews._reviewsCache[uri];
+        if(cached !== undefined){
+            return cached;
+        }
+        MangroveReviews._reviewsCache[uri] = newReviews;
+        
+        return newReviews;
     }
+    
+   private constructor(lon: number, lat: number, name: string,
+                identity: MangroveIdentity,
+                dryRun?: boolean) {
+      
+        this._lon = lon;
+        this._lat = lat;
+        this._name = name;
+        this._mangroveIdentity = identity;
+        this._dryRun = dryRun;
+
+    }
+
+    /**
+     * Gets an URI which represents the item in a mangrove-compatible way
+     * @constructor
+     */
+    public GetSubjectUri() {
+        let uri = `geo:${this._lat},${this._lon}?u=50`;
+        if (this._name !== undefined && this._name !== null) {
+            uri += "&q=" + this._name;
+        }
+        return uri;
+    }
+
 
     /**
      * Gives a UIEVentsource with all reviews.
      * Note: rating is between 1 and 100
      */
-    public static GetReviewsFor(lon: number, lat: number, name: string): UIEventSource<{
+    public GetReviews(): UIEventSource<Review[]> {
-        comment?: string,
-        author: string,
-        date: Date,
-        rating: number
-    }[]> {
-
-        let uri = `geo:${lat},${lon}?u=50`;
-        if (name !== undefined && name !== null) {
-            uri += "&q=" + name;
-        }
-        const reviewsSource : UIEventSource< {
-            comment?: string,
-            author: string,
-            date: Date,
-            rating: number
-        }[]> = new UIEventSource([]);
         
-        mangrove.getReviews({sub: uri}).then(
+        if(this._lastUpdate !== undefined && this._reviews.data !== undefined &&
+            (new Date().getTime() - this._lastUpdate.getTime()) < 15000
+        ){
+            // Last update was pretty recent
+            return this._reviews;
+        }
+        this._lastUpdate = new Date();
+
+        const self = this;
+        mangrove.getReviews({sub: this.GetSubjectUri()}).then(
             (data) => {
-                const reviews = [{
+                const reviews = [];
-                    date: new Date(),
-                    comment: "Short",
-                    rating: 1,
-                    author: "Troll"
-                },{
-                    date: new Date(),
-                    comment: "Not good",
-                    rating: 10,
-                    author: "Troll"
-                },{
-                    date: new Date(),
-                    comment: "Not soo good",
-                    rating: 20,
-                    author: "Troll"
-                },{
-                    date: new Date(),
-                    comment: "Meh",
-                    rating: 30,
-                    author: "Troll"
-                },
-                    {
-                    date: new Date(),
-                    comment: "Lorum ipsum lorem qsmldkfj qsdfmqmsd qmlsdmlkjazmeliq dmqlsdkf amldkfjqmlskdbmaize qsmdl fka mqlsnkd azie qmxbilqmslef amlzdf qsmdlfk afdml kqbnqsdlkf m",
-                    rating: 50,
-                    author: "Troll"
-                }];
                 for (const review of data.reviews) {
                     const r = review.payload;
                     reviews.push({
                         date: new Date(r.iat * 1000),
                         comment: r.opinion,
                         author: r.metadata.nickname,
+                        affiliated: r.metadata.is_affiliated,
                         rating: r.rating // percentage points
                     })
                 }
-                reviewsSource.setData(reviews)
+                self._reviews.setData(reviews)
             }
         );
-        return reviewsSource;
+        return this._reviews;
+    }
+
+    AddReview(r: Review, callback?: (() => void)) {
+
+
+        callback = callback ?? (() => {
+            return undefined;
+        });
+
+        const payload = {
+            sub: this.GetSubjectUri(),
+            rating: r.rating,
+            opinion: r.comment,
+            metadata: {
+                is_affiliated: r.affiliated,
+                nickname: r.author,
+            }
+        };
+        if (this._dryRun) {
+            console.log("DRYRUNNING mangrove reviews: ", payload);
+        } else {
+            mangrove.signAndSubmitReview(this._mangroveIdentity.keypair, payload).then(callback)
+        }
+        this._reviews.data.push(r);
+        this._reviews.ping();
+        callback();
     }
 
 

Logic/Web/Review.ts

@@ -0,0 +1,7 @@
+export interface Review {
+    comment?: string,
+    author: string,
+    date: Date,
+    rating: number,
+    affiliated: boolean
+}

State.ts

@@ -13,6 +13,7 @@ import {QueryParameters} from "./Logic/Web/QueryParameters";
 import {BaseLayer} from "./Logic/BaseLayer";
 import LayoutConfig from "./Customizations/JSON/LayoutConfig";
 import Hash from "./Logic/Web/Hash";
+import {MangroveIdentity} from "./Logic/Web/MangroveReviews";
 
 /**
  * Contains the global state: a bunch of UI-event sources
@@ -64,13 +65,15 @@ export default class State {
      */
     public osmConnection: OsmConnection;
 
+    public mangroveIdentity: MangroveIdentity;
+
     public favouriteLayers: UIEventSource<string[]>;
 
     public layerUpdater: UpdateFromOverpass;
 
 
     public filteredLayers: UIEventSource<FilteredLayer[]> = new UIEventSource<FilteredLayer[]>([])
-    
+
     /**
      *  The message that should be shown at the center of the screen
      */
@@ -209,6 +212,10 @@ export default class State {
             true
         );
 
+        this.mangroveIdentity = new MangroveIdentity(
+            this.osmConnection.GetLongPreference("identity", "mangrove")
+        );
+
 
         const h = Hash.Get();
         this.selectedElement.addCallback(selected => {

UI/CustomGenerator/SettingsTable.ts

@@ -13,7 +13,7 @@ export default class SettingsTable extends UIElement {
     public selectedSetting: UIEventSource<SingleSetting<any>>;
 
     constructor(elements: (SingleSetting<any> | string)[],
-                currentSelectedSetting: UIEventSource<SingleSetting<any>>) {
+                currentSelectedSetting?: UIEventSource<SingleSetting<any>>) {
         super(undefined);
         const self = this;
         this.selectedSetting = currentSelectedSetting ?? new UIEventSource<SingleSetting<any>>(undefined);

UI/Input/TextField.ts

@@ -63,11 +63,11 @@ export class TextField extends InputElement<string> {
 
     InnerRender(): string {
 
+        const placeholder = this._placeholder.InnerRender().replace("'", "&#39");
         if (this._htmlType === "area") {
-            return `<span id="${this.id}"><textarea id="txt-${this.id}" class="form-text-field" rows="${this._textAreaRows}" cols="50" style="max-width: 100%; width: 100%; box-sizing: border-box"></textarea></span>`
+            return `<span id="${this.id}"><textarea id="txt-${this.id}" placeholder='${placeholder}' class="form-text-field" rows="${this._textAreaRows}" cols="50" style="max-width: 100%; width: 100%; box-sizing: border-box"></textarea></span>`
         }
 
-        const placeholder = this._placeholder.InnerRender().replace("'", "&#39");
         let label = "";
         if (this._label != undefined) {
             label = this._label.Render();

UI/Input/ValidatedTextField.ts

@@ -158,7 +158,6 @@ export default class ValidatedTextField {
                 if (str === undefined) {
                     return false;
                 }
-                console.log("Validating phone number",str,"in country",country())
                 return parsePhoneNumberFromString(str, (country())?.toUpperCase() as any)?.isValid() ?? false
             },
             (str, country: () => string) => parsePhoneNumberFromString(str, (country())?.toUpperCase() as any).formatInternational()

UI/OhVisualization.ts

@@ -5,6 +5,7 @@ import Combine from "./Base/Combine";
 import Translations from "./i18n/Translations";
 import {FixedUiElement} from "./Base/FixedUiElement";
 import {OH} from "../Logic/OpeningHours";
+import State from "../State";
 
 export default class OpeningHoursVisualization extends UIElement {
     private readonly _key: string;
@@ -165,7 +166,12 @@ export default class OpeningHoursVisualization extends UIElement {
             }, {tag_key: this._key});
         } catch (e) {
             console.log(e);
-            return `Error: could not visualize these opening hours<br/><spann class='subtle'>${e}</spann>`
+            const msg = new Combine([Translations.t.general.opening_hours.error_loading,
+            State.state?.osmConnection?.userDetails?.data?.csCount >= State.userJourney.tagsVisibleAndWikiLinked ?
+                 `<span class='subtle'>${e}</span>`
+                : ""
+            ]);
+            return msg.Render();
         }
 
         if (!oh.getState() && !oh.getUnknown()) {

UI/Popup/FeatureInfoBox.ts

@@ -35,11 +35,25 @@ export class FeatureInfoBox extends UIElement {
         this._titleIcons = new Combine(
             layerConfig.titleIcons.map(icon => new TagRenderingAnswer(tags, icon)))
             .SetClass("featureinfobox-icons");
-        this._renderings = layerConfig.tagRenderings.map(tr => new EditableTagRendering(tags, tr));
+        
-        this._renderings[0]?.SetClass("first-rendering");
+        let questionBox : UIElement = undefined;
         if (State.state.featureSwitchUserbadge.data) {
-            this._questionBox = new QuestionBox(tags, layerConfig.tagRenderings);
+            questionBox = new QuestionBox(tags, layerConfig.tagRenderings);
         }
+        
+        let questionBoxIsUsed = false;
+        this._renderings = layerConfig.tagRenderings.map(tr => {
+            if(tr.question === null){
+                questionBoxIsUsed = true;
+                // This is the question box!
+                return questionBox;
+            }
+            return new EditableTagRendering(tags, tr);
+        });
+        this._renderings[0]?.SetClass("first-rendering");
+       if(!questionBoxIsUsed){
+           this._renderings.push(questionBox);
+       }
     }
 
     InnerRender(): string {

UI/Popup/QuestionBox.ts

@@ -22,7 +22,9 @@ export default class QuestionBox extends UIElement {
         this.ListenTo(this._skippedQuestions);
         this._tags = tags;
         const self = this;
-        this._tagRenderings = tagRenderings.filter(tr => tr.question !== undefined);
+        this._tagRenderings = tagRenderings
+            .filter(tr => tr.question !== undefined)
+            .filter(tr => tr.question !== null);
         this._tagRenderingQuestions = this._tagRenderings
             .map((tagRendering, i) => new TagRenderingQuestion(this._tags, tagRendering,
                 () => {

UI/Popup/SaveButton.ts

@@ -1,32 +1,33 @@
 import {UIEventSource} from "../../Logic/UIEventSource";
 import {UIElement} from "../UIElement";
 import Translations from "../i18n/Translations";
-import State from "../../State";
+import {OsmConnection, UserDetails} from "../../Logic/Osm/OsmConnection";
 
 export class SaveButton extends UIElement {
 
-    private _value: UIEventSource<any>;
+    private readonly _value: UIEventSource<any>;
-    private _friendlyLogin: UIElement;
+    private readonly _friendlyLogin: UIElement;
+    private readonly _userDetails: UIEventSource<UserDetails>;
 
-    constructor(value: UIEventSource<any>) {
+    constructor(value: UIEventSource<any>, osmConnection: OsmConnection) {
         super(value);
+        this._userDetails = osmConnection?.userDetails;
         if(value === undefined){
             throw "No event source for savebutton, something is wrong"
         }
         this._value = value;
-
         this._friendlyLogin = Translations.t.general.loginToStart.Clone()
             .SetClass("login-button-friendly")
-            .onClick(() => State.state.osmConnection.AttemptLogin())
+            .onClick(() => osmConnection?.AttemptLogin())
     }
 
     InnerRender(): string {
         let clss = "save";
 
-        if(State.state !== undefined && !State.state.osmConnection.userDetails.data.loggedIn){
+        if(this._userDetails != undefined &&  !this._userDetails.data.loggedIn){
             return this._friendlyLogin.Render();
         }
-        if ((this._value.data ?? "") === "") {
+        if (this._value.data === false || (this._value.data ?? "") === "") {
             clss = "save-non-active";
         }
         return Translations.t.general.save.Clone().SetClass(clss).Render();

UI/Popup/TagRenderingQuestion.ts

@@ -64,7 +64,7 @@ export default class TagRenderingQuestion extends UIElement {
         }
 
 
-        this._saveButton = new SaveButton(this._inputElement.GetValue())
+        this._saveButton = new SaveButton(this._inputElement.GetValue(), State.state.osmConnection)
             .onClick(save)
 
 

UI/Reviews/ReviewElement.ts

@@ -1,29 +1,38 @@
-import {UIElement} from "./UIElement";
-import {UIEventSource} from "../Logic/UIEventSource";
-import Translations from "./i18n/Translations";
-import Combine from "./Base/Combine";
-import {FixedUiElement} from "./Base/FixedUiElement";
-import {Utils} from "../Utils";
-
 /**
  * Shows the reviews and scoring base on mangrove.reviesw
  */
-export default class ReviewElement extends UIElement {
+import {UIEventSource} from "../../Logic/UIEventSource";
-    private _reviews: UIEventSource<{ comment?: string; author: string; date: Date; rating: number }[]>;
+import {Review} from "../../Logic/Web/Review";
+import {UIElement} from "../UIElement";
+import {Utils} from "../../Utils";
+import Combine from "../Base/Combine";
+import {FixedUiElement} from "../Base/FixedUiElement";
+import Translations from "../i18n/Translations";
 
-    constructor(reviews: UIEventSource<{
+export default class ReviewElement extends UIElement {
-        comment?: string,
+    private readonly _reviews: UIEventSource<Review[]>;
-        author: string,
+    private readonly _subject: string;
-        date: Date,
+    private _middleElement: UIElement;
-        rating: number
+
-    }[]>) {
+    constructor(subject: string, reviews: UIEventSource<Review[]>, middleElement: UIElement) {
         super(reviews);
+        this._middleElement = middleElement;
+        if(reviews === undefined){
+            throw "No reviews UIEVentsource Given!"
+        }
         this._reviews = reviews;
+        this._subject = subject;
     }
 
     InnerRender(): string {
 
         function genStars(rating: number) {
+            if(rating === undefined){
+                return Translations.t.reviews.no_rating;
+            }
+            if(rating < 10){
+                rating = 10;
+            }
             const scoreTen = Math.round(rating / 10);
             return new Combine([
                 "<img src='./assets/svg/star.svg' />".repeat(Math.floor(scoreTen / 2)),
@@ -38,11 +47,15 @@ export default class ReviewElement extends UIElement {
         elements.push(
             new Combine([
                 genStars(avg).SetClass("stars"),
+                `<a href='https://mangrove.reviews/search?sub=${this._subject}'>`,
                 Translations.t.reviews.title
-                    .Subs({count: "" + revs.length})
+                    .Subs({count: "" + revs.length}),
+                "</a>"
             ])
 
                 .SetClass("review-title"));
+        
+        elements.push(this._middleElement);
 
         elements.push(...revs.map(review => {
             const d = review.date;
@@ -55,8 +68,11 @@ export default class ReviewElement extends UIElement {
                     ]).SetClass("review-stars-comment"),
 
                     new Combine([
+                        new Combine([
 
-                        new FixedUiElement(review.author).SetClass("review-author"),
+                            new FixedUiElement(review.author).SetClass("review-author"),
+                            review.affiliated ? Translations.t.reviews.affiliated_reviewer_warning : "",
+                        ]).SetStyle("margin-right: 0.5em"),
                         new FixedUiElement(`${d.getFullYear()}-${Utils.TwoDigits(d.getMonth() + 1)}-${Utils.TwoDigits(d.getDate())} ${Utils.TwoDigits(d.getHours())}:${Utils.TwoDigits(d.getMinutes())}`)
                             .SetClass("review-date")
                     ]).SetClass("review-author-date")

UI/Reviews/ReviewForm.ts

@@ -0,0 +1,116 @@
+import {UIElement} from "../UIElement";
+import {InputElement} from "../Input/InputElement";
+import {Review} from "../../Logic/Web/Review";
+import {UIEventSource} from "../../Logic/UIEventSource";
+import {TextField} from "../Input/TextField";
+import Translations from "../i18n/Translations";
+import Combine from "../Base/Combine";
+import Svg from "../../Svg";
+import {VariableUiElement} from "../Base/VariableUIElement";
+import {SaveButton} from "../Popup/SaveButton";
+import CheckBoxes from "../Input/Checkboxes";
+import {UserDetails} from "../../Logic/Osm/OsmConnection";
+
+export default class ReviewForm extends InputElement<Review> {
+
+    private readonly _value: UIEventSource<Review>;
+    private readonly _comment: UIElement;
+    private readonly _stars: UIElement;
+    private _saveButton: UIElement;
+    private readonly _isAffiliated: UIElement;
+    private userDetails: UIEventSource<UserDetails>;
+    private readonly _postingAs: UIElement;
+
+
+    constructor(onSave: ((r: Review, doneSaving: (() => void)) => void), userDetails: UIEventSource<UserDetails>) {
+        super();
+        this.userDetails = userDetails;
+        const t = Translations.t.reviews;
+        this._value  = new UIEventSource({
+            rating: undefined,
+            comment: undefined,
+            author: userDetails.data.name,
+            affiliated: false,
+            date: new Date()
+        });
+        const comment = new TextField({
+            placeholder: Translations.t.reviews.write_a_comment,
+            textArea: true,
+            value: this._value.map(r => r?.comment),
+            textAreaRows: 5
+        })
+        comment.GetValue().addCallback(comment => {
+            self._value.data.comment = comment;
+            self._value.ping();
+        })
+        const self = this;
+
+        this._postingAs =
+            new Combine([t.posting_as, new VariableUiElement(userDetails.map((ud: UserDetails) => ud.name)).SetClass("review-author")])
+                .SetStyle("display:flex;flex-direction: column;align-items: flex-end;margin-right: 0.5;")
+        this._saveButton =
+            new SaveButton(this._value.map(r => self.IsValid(r)), undefined)
+                .onClick(() => {
+                    self._saveButton = Translations.t.reviews.saving_review;
+                    onSave(this._value.data, () => {
+                        self._saveButton = Translations.t.reviews.saved;
+                    });
+                })
+
+        this._isAffiliated = new CheckBoxes([t.i_am_affiliated]).SetStyle(" display:inline-block;")
+
+        this._comment = comment;
+        const stars = []
+        for (let i = 1; i <= 5; i++) {
+            stars.push(
+                new VariableUiElement(this._value.map(review => {
+                        if (review.rating === undefined) {
+                            return Svg.star_outline.replace(/#000000/g, "#ccc");
+                        }
+                        return review.rating < i * 20 ?
+                            Svg.star_outline :
+                            Svg.star
+                    }
+                ))
+                    .onClick(() => {
+                        self._value.data.rating = i * 20;
+                        self._value.ping();
+                    })
+            )
+        }
+        this._stars = new Combine(stars).SetClass("review-form-rating")
+    }
+
+    GetValue(): UIEventSource<Review> {
+        return this._value;
+    }
+
+    InnerRender(): string {
+        
+        if(!this.userDetails.data.loggedIn){
+            return Translations.t.reviews.plz_login.Render();
+        }
+        
+        return new Combine([
+            new Combine([this._stars, this._postingAs]).SetClass("review-form-top"),
+            this._comment,
+            new Combine([
+                this._isAffiliated,
+                this._saveButton
+            ]).SetClass("review-form-bottom")
+        ])
+            .SetClass("review-form")
+            .Render();
+    }
+
+    IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
+
+    IsValid(r: Review): boolean {
+        if (r === undefined) {
+            return false;
+        }
+        return (r.comment?.length ?? 0) <= 1000 && (r.author?.length ?? 0) <= 20 && r.rating >= 0 && r.rating <= 100;
+    }
+
+
+}

UI/Reviews/ReviewPanel.ts

@@ -0,0 +1,11 @@
+import {UIElement} from "../UIElement";
+
+export default class ReviewPanel extends UIElement {
+    
+    
+    
+    InnerRender(): string {
+        return "";
+    }
+
+}

UI/SpecialVisualizations.ts

@@ -12,6 +12,10 @@ import {Translation} from "./i18n/Translation";
 import State from "../State";
 import ShareButton from "./ShareButton";
 import Svg from "../Svg";
+import ReviewElement from "./Reviews/ReviewElement";
+import MangroveReviews from "../Logic/Web/MangroveReviews";
+import Translations from "./i18n/Translations";
+import ReviewForm from "./Reviews/ReviewForm";
 
 export class SubstitutedTranslation extends UIElement {
     private readonly tags: UIEventSource<any>;
@@ -119,6 +123,7 @@ export default class SpecialVisualizations {
                 })).SetStyle("border: 1px solid black; border-radius: 1em;padding:1em;display:block;")
             })
         },
+
             {
                 funcName: "image_carousel",
                 docs: "Creates an image carousel for the given sources. An attempt will be made to guess what source is used. Supported: Wikidata identifiers, Wikipedia pages, Wikimedia categories, IMGUR (with attribution, direct links)",
@@ -149,6 +154,24 @@ export default class SpecialVisualizations {
                     return new ImageUploadFlow(tags, args[0])
                 }
             },
+
+            {
+                funcName: "reviews",
+                docs: "Adds an overview of the mangrove-reviews of this object. IMPORTANT: the _name_ of the object should be defined for this to work!",
+                args: [],
+                constr: (tags, args) => {
+                    const tgs = tags.data;
+                    if (tgs.name === undefined || tgs.name === "") {
+                        return Translations.t.reviews.name_required;
+                    }
+                    const mangrove = MangroveReviews.Get(Number(tgs._lon), Number(tgs._lat), tgs.name,
+                        State.state.mangroveIdentity,
+                        State.state.osmConnection._dryRun
+                    );
+                    const form = new ReviewForm(r => mangrove.AddReview(r), State.state.osmConnection.userDetails);
+                    return new ReviewElement(mangrove.GetSubjectUri(), mangrove.GetReviews(), form);
+                }
+            },
             {
                 funcName: "opening_hours_table",
                 docs: "Creates an opening-hours table. Usage: {opening_hours_table(opening_hours)} to create a table of the tag 'opening_hours'.",

assets/svg/star_outline.svg

@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.0"
+   width="1278.000000pt"
+   height="1280.000000pt"
+   viewBox="0 0 1278.000000 1280.000000"
+   preserveAspectRatio="xMidYMid meet"
+   id="svg8"
+   sodipodi:docname="star_outline.svg"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
+  <defs
+     id="defs12" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="995"
+     id="namedview10"
+     showgrid="false"
+     inkscape:zoom="0.2765625"
+     inkscape:cx="372.04589"
+     inkscape:cy="721.1437"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg8" />
+  <metadata
+     id="metadata2">
+Created by potrace 1.15, written by Peter Selinger 2001-2017
+<rdf:RDF>
+  <cc:Work
+     rdf:about="">
+    <dc:format>image/svg+xml</dc:format>
+    <dc:type
+       rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+  </cc:Work>
+</rdf:RDF>
+</metadata>
+  <path
+     style="fill:none;stroke:#000000;stroke-width:107.38591003;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     inkscape:connector-curvature="0"
+     id="path4"
+     d="m 674.32114,62.94898 c -13.07722,2.481807 -28.82715,15.559025 -43.24073,35.795304 -19.759,27.968066 -36.65439,61.567926 -76.55422,152.535726 -33.12259,75.40877 -46.39071,102.13593 -63.66791,127.62219 -20.14083,29.68623 -34.07713,35.60439 -83.80874,35.69985 -28.92261,0 -54.69523,-2.1 -125.5222,-10.11814 -29.59079,-3.43635 -63.57246,-6.96816 -88.77235,-9.25906 -18.23175,-1.62272 -75.59969,-1.62272 -86.386,0 -34.268043,5.34544 -50.11343,16.60903 -51.354334,36.46349 -0.668179,12.21813 4.104528,25.29535 15.368117,42.19073 18.804466,28.06352 49.063427,58.41794 125.713107,126.28583 91.15871,80.65875 119.03132,112.06317 123.13585,138.59942 3.5318,22.33627 -9.06815,62.61792 -43.24073,139.17214 -34.74531,77.89058 -41.04528,91.92234 -46.77253,105.9541 -24.05445,58.32244 -33.59986,95.26324 -30.35442,117.98134 2.95908,21.1908 13.84085,31.7862 34.07713,33.0271 29.68624,2.0046 73.30878,-16.1317 162.17659,-67.1997 71.49515,-41.1407 84.47692,-48.4907 100.32231,-56.8907 43.04981,-22.90897 68.53607,-32.26347 88.19962,-32.54983 11.54996,-0.0955 15.36812,0.95454 29.59079,8.01814 25.29535,12.69541 54.79068,36.27259 124.09039,99.27229 96.02687,87.436 134.11307,115.1177 167.23566,121.7995 9.73632,2.0045 16.51356,1.2409 24.3408,-2.5773 9.83178,-4.7727 15.27267,-12.8863 19.47265,-29.018 2.00454,-7.7318 2.19544,-10.5954 2.19544,-30.0681 0,-11.9317 -0.47727,-25.4862 -1.14545,-30.5453 -4.86816,-36.1771 -10.21359,-64.3361 -24.14989,-127.43127 -21.859,-98.69959 -26.63171,-126.66765 -26.63171,-157.21298 0,-15.46357 1.52727,-24.81808 5.24998,-33.02713 9.64087,-21.09537 44.09981,-46.77253 121.70404,-90.87235 63.0952,-35.7953 79.3224,-45.14981 95.9314,-55.17249 70.5406,-42.57255 101.6587,-72.64061 101.6587,-98.03141 0,-14.79539 -9.1636,-26.05898 -29.209,-36.08167 -28.6362,-14.31812 -71.3997,-22.52717 -168.3811,-32.64531 C 925.17463,474.35634 898.25656,470.53817 869.33396,463.18821 832.3932,453.64279 820.27053,444.00192 807.47967,414.02932 796.31154,387.68398 787.33885,353.98866 770.1571,272.56628 757.27079,211.09381 749.92082,179.6894 742.57085,154.4895 731.59363,116.49875 719.66186,90.726135 706.29828,75.835289 697.32559,65.812604 685.20291,60.944443 674.32114,62.94898 Z" />
+</svg>

assets/svg/star_outline_half.svg

@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.0"
+   width="1278.000000pt"
+   height="1280.000000pt"
+   viewBox="0 0 1278.000000 1280.000000"
+   preserveAspectRatio="xMidYMid meet"
+   id="svg8"
+   sodipodi:docname="star_outline_half.svg"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
+  <defs
+     id="defs12" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="995"
+     id="namedview10"
+     showgrid="false"
+     inkscape:zoom="0.2765625"
+     inkscape:cx="-194.78152"
+     inkscape:cy="790.56206"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg8" />
+  <metadata
+     id="metadata2">
+Created by potrace 1.15, written by Peter Selinger 2001-2017
+<rdf:RDF>
+  <cc:Work
+     rdf:about="">
+    <dc:format>image/svg+xml</dc:format>
+    <dc:type
+       rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+  </cc:Work>
+</rdf:RDF>
+</metadata>
+  <path
+     style="fill:none;stroke:#000000;stroke-width:107.38591003;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     inkscape:connector-curvature="0"
+     id="path4"
+     d="m 674.32114,62.94898 c -13.07722,2.481807 -28.82715,15.559025 -43.24073,35.795304 -19.759,27.968066 -36.65439,61.567926 -76.55422,152.535726 -33.12259,75.40877 -46.39071,102.13593 -63.66791,127.62219 -20.14083,29.68623 -34.07713,35.60439 -83.80874,35.69985 -28.92261,0 -54.69523,-2.1 -125.5222,-10.11814 -29.59079,-3.43635 -63.57246,-6.96816 -88.77235,-9.25906 -18.23175,-1.62272 -75.59969,-1.62272 -86.386,0 -34.268043,5.34544 -50.11343,16.60903 -51.354334,36.46349 -0.668179,12.21813 4.104528,25.29535 15.368117,42.19073 18.804466,28.06352 49.063427,58.41794 125.713107,126.28583 91.15871,80.65875 119.03132,112.06317 123.13585,138.59942 3.5318,22.33627 -9.06815,62.61792 -43.24073,139.17214 -34.74531,77.89058 -41.04528,91.92234 -46.77253,105.9541 -24.05445,58.32244 -33.59986,95.26324 -30.35442,117.98134 2.95908,21.1908 13.84085,31.7862 34.07713,33.0271 29.68624,2.0046 73.30878,-16.1317 162.17659,-67.1997 71.49515,-41.1407 84.47692,-48.4907 100.32231,-56.8907 43.04981,-22.90897 68.53607,-32.26347 88.19962,-32.54983 11.54996,-0.0955 15.36812,0.95454 29.59079,8.01814 25.29535,12.69541 54.79068,36.27259 124.09039,99.27229 96.02687,87.436 134.11307,115.1177 167.23566,121.7995 9.73632,2.0045 16.51356,1.2409 24.3408,-2.5773 9.83178,-4.7727 15.27267,-12.8863 19.47265,-29.018 2.00454,-7.7318 2.19544,-10.5954 2.19544,-30.0681 0,-11.9317 -0.47727,-25.4862 -1.14545,-30.5453 -4.86816,-36.1771 -10.21359,-64.3361 -24.14989,-127.43127 -21.859,-98.69959 -26.63171,-126.66765 -26.63171,-157.21298 0,-15.46357 1.52727,-24.81808 5.24998,-33.02713 9.64087,-21.09537 44.09981,-46.77253 121.70404,-90.87235 63.0952,-35.7953 79.3224,-45.14981 95.9314,-55.17249 70.5406,-42.57255 101.6587,-72.64061 101.6587,-98.03141 0,-14.79539 -9.1636,-26.05898 -29.209,-36.08167 -28.6362,-14.31812 -71.3997,-22.52717 -168.3811,-32.64531 C 925.17463,474.35634 898.25656,470.53817 869.33396,463.18821 832.3932,453.64279 820.27053,444.00192 807.47967,414.02932 796.31154,387.68398 787.33885,353.98866 770.1571,272.56628 757.27079,211.09381 749.92082,179.6894 742.57085,154.4895 731.59363,116.49875 719.66186,90.726135 706.29828,75.835289 697.32559,65.812604 685.20291,60.944443 674.32114,62.94898 Z" />
+  <path
+     style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:107.38574982;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     inkscape:connector-curvature="0"
+     id="path4-3"
+     d="m 674.32114,62.94898 c -13.0772,2.48181 -28.8271,15.55903 -43.2407,35.795312 -19.759,27.968058 -36.6544,61.567928 -76.5542,152.535718 -33.1226,75.40878 -46.3907,102.13593 -63.6679,127.62219 -20.1408,29.68623 -34.0771,35.60439 -83.8088,35.69985 -28.9226,0 -54.6952,-2.1 -125.5222,-10.11814 -29.5907,-3.43635 -63.5724,-6.96816 -88.7723,-9.25906 -18.2318,-1.62272 -75.5997,-1.62272 -86.386,0 -34.268097,5.34544 -50.113397,16.60903 -51.354297,36.4635 -0.6682,12.21813 4.1045,25.29534 15.3681,42.19072 18.8044,28.06352 49.063397,58.41794 125.713097,126.28583 91.1587,80.65878 119.0313,112.06318 123.1358,138.59948 3.5318,22.33615 -9.0681,62.61785 -43.2407,139.17205 -34.7453,77.8906 -41.0453,91.9224 -46.7725,105.9541 -24.0545,58.32247 -33.5999,95.26327 -30.3545,117.98137 2.9591,21.1908 13.8409,31.7862 34.0772,33.0271 29.6862,2.0046 73.3088,-16.1317 162.1766,-67.1997 71.4951,-41.1407 84.4769,-48.4907 100.3223,-56.8907 44.4196,-22.95047 93.6333,-33.02397 88.1996,-32.54977 z"
+     sodipodi:nodetypes="cccccccccccccccccccc" />
+</svg>

assets/tagRenderings/questions.json

@@ -2,6 +2,9 @@
   "images": {
     "render": "{image_carousel()}{image_upload()}"
   },
+  "reviews": {
+    "render": "{reviews()}"
+  },
   "phone": {
     "question": {
       "en": "What is the phone number of {name}?",

assets/themes/shops/shops.json

@@ -67,9 +67,6 @@
           }
         ]
       },
-      "titleIcons": [
-        "isOpen"
-      ],
       "description": {
         "en": "A shop",
         "fr": "Un magasin"
@@ -233,7 +230,9 @@
             "key": "opening_hours",
             "type": "opening_hours"
           }
-        }
+        },
+        "questions",
+        "reviews"
       ],
       "hideUnderlayingFeaturesMinPercentage": 0,
       "icon": {

assets/translations.json

@@ -830,6 +830,10 @@
       }
     },
     "opening_hours": {
+      "error_loading": {
+        "en": "Error: could not visualize these opening hours.",
+        "nl": "Sorry, deze openingsuren kunnen niet getoond worden"
+      },
       "open_during_ph": {
         "nl": "Op een feestdag is deze zaak",
         "ca": "Durant festes aquest servei és",
@@ -913,13 +917,49 @@
       "en": "{count} reviews",
       "nl": "{count} beoordelingen"
     },
+    "name_required": {
+      "en": "A name is required in order to display and create reviews",
+      "nl": "De naam van dit object moet gekend zijn om een review te kunnen maken"
+    },
     "no_reviews_yet": {
       "en": "There are no reviews yet. Be the first to write one and help open data and the business!",
       "nl": "Er zijn nog geen beoordelingen. Wees de eerste om een beoordeling te schrijven en help open data en het bedrijf"
     },
+    "write_a_comment": {
+      "en": "Leave a review...",
+      "nl": "Schrijf een beoordeling..."
+    },
+    "no_rating": {
+      "en": "No rating given",
+      "nl": "Geen score bekend"
+    },
+    "posting_as": {
+      "en": "Posting as",
+      "nl": "Ingelogd als"
+    },
+    "i_am_affiliated": {
+      "en": "<div'><span>I am affiliated with this object</span><br/><span class='subtle'>Check if you are an owner, creator, employee, ...</span></div>",
+      "nl": "<div style='display:inline-block;max-width: 40%;'><span>I am affiliated with this object</span><br/><span class='subtle'>Vink aan indien je de oprichter, maker, werknemer, ... of dergelijke bent</span></div>"
+    },
+    "affiliated_reviewer_warning": {
+      "en": "(Affiliated review)",
+      "nl": "(Review door betrokkene)"
+    },
+    "saving_review": {
+      "en": "Saving...",
+      "nl": "Opslaan..."
+    },
+    "saved": {
+      "en": "<span class='thanks'>Review saved. Thanks for sharing!</span>",
+      "nl": "<span class='thanks'>Bedankt om je beoordeling te delen!</span>"
+    },
     "attribution": {
       "en": "Reviews are powered by <a href='https://mangrove.reviews/' target='_blank'>Mangrove Reviews</a> and are available under <a href='https://mangrove.reviews/terms#8-licensing-of-content' target='_blank'>CC-BY 4.0</a>",
       "nl": "De beoordelingen worden voorzien door <a href='https://mangrove.reviews/' target='_blank'>Mangrove Reviews</a> en zijn beschikbaar onder de<a href='https://mangrove.reviews/terms#8-licensing-of-content' target='_blank'>CC-BY 4.0-licentie</a> "
+    },
+    "plz_login": {
+      "en": "Login to leave a review",
+      "nl": "Meld je aan om een beoordeling te geven"
     }
   }
 }

css/ReviewElement.css

@@ -1,3 +1,8 @@
+.review {
+    display: block;
+    margin-top: 1em;
+}
+
 .review-title {
     font-size: x-large;
     display: flex;
@@ -39,7 +44,6 @@
 
 .review-author {
     font-weight: bold;
-    margin-right: 0.5em;
 }
 
 .review-author-date {
@@ -66,7 +70,7 @@
 }
 
 .review-attribution span {
-    width: calc(65% - 3em);
+    width: calc(75% - 3em);
     text-align: right;
     max-width: 20em;
 }
@@ -76,3 +80,45 @@
     margin-left: 0.5em;
 }
 
+.review-form {
+    display: block;
+    border-radius: 1em;
+    padding: 1em;
+    background-color: var(--subtle-detail-color);
+    color: var(--subtle-detail-color-contrast);
+    border: 2px solid var(--subtle-detail-color-contrast)
+}
+
+.review-form-bottom {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 0.5em;
+}
+
+.review-form-top {
+    display: flex;
+    justify-content: space-between;
+}
+
+
+.review-form-rating {
+}
+
+.review-form .save {
+    display: block ruby;
+}
+
+.review-form .save-non-active {
+    display: block ruby;
+}
+.review-form textarea {
+    resize: unset;
+}
+
+.review-form-rating svg {
+    width: 2em;
+    height: 2em;
+    margin: 0;
+    padding: 0;
+    display: inline-block;
+}

test.ts

@@ -1,50 +1,54 @@
 //*
 import MangroveReviews from "./Logic/Web/MangroveReviews";
-import ReviewElement from "./UI/ReviewElement";
+import ReviewElement from "./UI/Reviews/ReviewElement";
+import {UIEventSource} from "./Logic/UIEventSource";
+import ReviewForm from "./UI/Reviews/ReviewForm";
+import Combine from "./UI/Base/Combine";
+import {FixedUiElement} from "./UI/Base/FixedUiElement";
 
-const review = MangroveReviews.GetReviewsFor(3.22000, 51.21576, "Pietervdvn Software Consultancy")
+const identity = '{"crv":"P-256","d":"6NHPmTFRedjNl-ZfLRAXhOaNKtRR9GYzPHsO1CzN5wQ","ext":true,"key_ops":["sign"],"kty":"EC","x":"Thm_pL5m0m9Jl41z9vgMTHNyja-9H58v0stJWT4KhTI","y":"PjBldCW85b8K6jEZbw0c2UZskpo-rrkwfPnD7s1MXSM","metadata":"Mangrove private key"}'
-new ReviewElement(review).AttachTo("maindiv");
+
-/*
+const mangroveReviews = new MangroveReviews(0, 0, "Null Island",
-mangrove.getReviews({sub: 'geo:,?q=&u=15'}).then(
+    new UIEventSource<string>(identity), true)
-    (data) => {
+
-        for (const review of data.reviews) {
+new ReviewElement(mangroveReviews.GetSubjectUri(), mangroveReviews.GetReviews()).AttachTo("maindiv");
-            console.log(review.payload);
+const form = new ReviewForm((r,done) => {
-            // .signature
+    mangroveReviews.AddReview(r, done);
-            // .kid
+});
-            // .jwt
+form.AttachTo("extradiv")
-        }
+
-    }
+form.GetValue().map(r => form.IsValid(r)).addCallback(d => console.log(d))
-);*/
 
 /*
-mangrove.generateKeypair().then(
+window.setTimeout(
-    keypair => {
+    () => {
-        mangrove.keypairToJwk(keypair).then(jwk => {
+mangroveReviews.AddReview({
-            console.log(jwk)
+    comment: "These are liars - not even an island here!",
-            //   const restoredKeypair = await mangrove.jwkToKeypair(jwk).
+    author: "Lost Tourist",
-// Sign and submit a review (reviews of this example subject are removed from the database).
+    date: new Date(),
-            mangrove.signAndSubmitReview(keypair, {
+    affiliated: false,
-                // Lat,lon!
+    rating: 10
-                sub: "geo:51.21576,3.22000?q=Pietervdvn Software Consultancy&u=15",
+}, (() => {alert("Review added");return undefined;}));
-                rating: 100,
+        
-                opinion: "Excellent knowledge about OSM",
+    }, 1000
-                metadata: {
+)
-                    nickname: "Pietervdvn",
+
-                }
+window.setTimeout(
-            })
+    () => {
-        })
+        mangroveReviews.AddReview({
-    }
+            comment: "Excellent conditions to measure weather!!",
+            author: "Weather-Boy",
+            date: new Date(),
+            affiliated: true,
+            rating: 90
+        }, (() => {
+            alert("Review added");
+            return undefined;
+        }));
+
+    }, 1000
 )
 */
-
-/*
-// Given by a particular user since certain time.
-const userReviews = await getReviews({
-    kid: '-----BEGIN PUBLIC KEY-----MFkwEwYHKoZIzj0CAQYIKoZIzj0DAQcDQgAEDo6mN4kY6YFhpvF0u3hfVWD1RnDElPweX3U3KiUAx0dVeFLPAmeKdQY3J5agY3VspnHo1p/wH9hbZ63qPbCr6g==-----END PUBLIC KEY-----',
-    gt_iat: 1580860800
-})*/
-
-
 /*/