First version of reviews

AllTranslationAssets.ts

@@ -123,5 +123,8 @@ export default class AllTranslationAssets {
   favourite: {    panelIntro: new Translation( {"en":"<h3>Your personal theme</h3>Activate your favourite layers from all the official themes","ca":"<h3>La teva interfície personal</h3>Activa les teves capes favorites de totes les interfícies oficials","es":"<h3>Tu interficie personal</h3>Activa tus capas favoritas de todas las interficies oficiales","gl":"<h3>O teu tema personalizado</h3>Activa as túas capas favoritas de todos os temas oficiais","de":"<h3>Ihr persönliches Thema</h3>Aktivieren Sie Ihre Lieblingsebenen aus allen offiziellen Themen"} ),
     loginNeeded: new Translation( {"en":"<h3>Log in</h3>A personal layout is only available for OpenStreetMap users","es":"<h3>Entrar</h3>El diseño personalizado sólo está disponible para los usuarios de OpenstreetMap","ca":"<h3>Entrar</h3>El disseny personalizat només està disponible pels usuaris d' OpenstreetMap","gl":"<h3>Iniciar a sesión</h3>O deseño personalizado só está dispoñíbel para os usuarios do OpenstreetMap","de":"<h3>Anmelden</h3>Ein persönliches Layout ist nur für OpenStreetMap-Benutzer verfügbar"} ),
     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":"Reviews","nl":"Beoordelingen"} ),
+    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>"} ),
 },
 }}

Customizations/JSON/TagRenderingConfig.ts

@@ -26,7 +26,7 @@ export default class TagRenderingConfig {
     mappings?: {
         if: TagsFilter,
         then: Translation
-        hideInAnswer: boolean
+        hideInAnswer: boolean | TagsFilter
     }[]
 
     constructor(json: string | TagRenderingConfigJson, context?: string) {
@@ -62,10 +62,16 @@ export default class TagRenderingConfig {
                 if (mapping.then === undefined) {
                     throw "Invalid mapping: if without body"
                 }
+                let hideInAnswer : boolean | TagsFilter = false;
+                if(typeof mapping.hideInAnswer === "boolean"){
+                    hideInAnswer = mapping.hideInAnswer;
+                }else{
+                    hideInAnswer = FromJSON.Tag(mapping.hideInAnswer);
+                }
                 return {
                     if: FromJSON.Tag(mapping.if, `${context}.mapping[${i}]`),
                     then: Translations.T(mapping.then),
-                    hideInAnswer: mapping.hideInAnswer ?? false
+                    hideInAnswer: hideInAnswer
                 };
             });
         }

Logic/Web/MangroveReviews.ts

@@ -0,0 +1,50 @@
+import * as mangrove from 'mangrove-reviews'
+import {UIEventSource} from "../UIEventSource";
+
+export default class MangroveReviews {
+
+    constructor() {
+    }
+
+    /**
+     * Gives a UIEVentsource with all reviews.
+     * Note: rating is between 1 and 100
+     */
+    public static GetReviewsFor(lon: number, lat: number, name: string): UIEventSource<{
+        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(
+            (data) => {
+                const reviews = [];
+                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,
+                        rating: r.rating // percentage points
+                    })
+                }
+                reviewsSource.setData(reviews)
+            }
+        );
+        return reviewsSource;
+    }
+
+
+}

Svg.ts

@@ -239,6 +239,11 @@ export default class Svg {
     public static star_svg() { return new FixedUiElement(Svg.star);}
     public static star_ui() { return new FixedUiElement(Svg.star_img);}
 
+    public static star_half = " <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_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.39111844\"      inkscape:cx=\"773.36927\"      inkscape:cy=\"1236.855\"      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>   <g      transform=\"translate(0.000000,1280.000000) scale(0.100000,-0.100000)\"      fill=\"#000000\"      stroke=\"none\"      id=\"g6\">     <path        d=\"m 6760,12443 c -137,-26 -302,-163 -453,-375 -207,-293 -384,-645 -802,-1598 -347,-790 -486,-1070 -667,-1337 -211,-311 -357,-373 -878,-374 -303,0 -573,22 -1315,106 -310,36 -666,73 -930,97 -191,17 -792,17 -905,0 -359,-56 -525,-174 -538,-382 -7,-128 43,-265 161,-442 197,-294 514,-612 1317,-1323 955,-845 1247,-1174 1290,-1452 37,-234 -95,-656 -453,-1458 -364,-816 -430,-963 -490,-1110 -252,-611 -352,-998 -318,-1236 31,-222 145,-333 357,-346 311,-21 768,169 1699,704 749,431 885,508 1051,596 451,240 718,338 924,341 z\"        id=\"path4\"        inkscape:connector-curvature=\"0\"        sodipodi:nodetypes=\"cccccccccccccccccccc\" />   </g> </svg> "
+    public static star_half_img = Img.AsImageElement(Svg.star_half)
+    public static star_half_svg() { return new FixedUiElement(Svg.star_half);}
+    public static star_half_ui() { return new FixedUiElement(Svg.star_half_img);}
+
     public static statistics = " <!-- Svg Vector Icons : http://www.onlinewebfonts.com/icon --> <!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\"> <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 1000 1000\" enable-background=\"new 0 0 1000 1000\" xml:space=\"preserve\"> <metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata> <g><path d=\"M255,567.4v312.4h147V567.4l-73.5-61.3L255,567.4L255,567.4z M10,879.8h147V640.9L10,757.3V879.8L10,879.8z M745,493.9v385.9h147V371.4L745,493.9L745,493.9z M500,647v232.8h147V573.5l-116.4,98L500,647L500,647z M990,120.3H708.3l116.4,110.2l-300.1,245l-196-165.4L10,561.3v110.2l318.5-251.1l202.1,165.4l361.4-294l98,91.9L990,120.3L990,120.3z\"/></g> </svg>"
     public static statistics_img = Img.AsImageElement(Svg.statistics)
     public static statistics_svg() { return new FixedUiElement(Svg.statistics);}
@@ -264,4 +269,4 @@ export default class Svg {
     public static wikipedia_svg() { return new FixedUiElement(Svg.wikipedia);}
     public static wikipedia_ui() { return new FixedUiElement(Svg.wikipedia_img);}
 
-public static All = {"add.svg": Svg.add,"addSmall.svg": Svg.addSmall,"ampersand.svg": Svg.ampersand,"arrow-left-smooth.svg": Svg.arrow_left_smooth,"arrow-right-smooth.svg": Svg.arrow_right_smooth,"bug.svg": Svg.bug,"camera-plus.svg": Svg.camera_plus,"checkmark.svg": Svg.checkmark,"circle.svg": Svg.circle,"clock.svg": Svg.clock,"close.svg": Svg.close,"compass.svg": Svg.compass,"cross_bottom_right.svg": Svg.cross_bottom_right,"crosshair-blue-center.svg": Svg.crosshair_blue_center,"crosshair-blue.svg": Svg.crosshair_blue,"crosshair.svg": Svg.crosshair,"delete_icon.svg": Svg.delete_icon,"direction.svg": Svg.direction,"direction_gradient.svg": Svg.direction_gradient,"down.svg": Svg.down,"envelope.svg": Svg.envelope,"floppy.svg": Svg.floppy,"gear.svg": Svg.gear,"help.svg": Svg.help,"home.svg": Svg.home,"home_white_bg.svg": Svg.home_white_bg,"josm_logo.svg": Svg.josm_logo,"layers.svg": Svg.layers,"layersAdd.svg": Svg.layersAdd,"logo.svg": Svg.logo,"logout.svg": Svg.logout,"mapillary.svg": Svg.mapillary,"no_checkmark.svg": Svg.no_checkmark,"or.svg": Svg.or,"osm-logo-us.svg": Svg.osm_logo_us,"osm-logo.svg": Svg.osm_logo,"pencil.svg": Svg.pencil,"phone.svg": Svg.phone,"pin.svg": Svg.pin,"pop-out.svg": Svg.pop_out,"reload.svg": Svg.reload,"ring.svg": Svg.ring,"search.svg": Svg.search,"send_email.svg": Svg.send_email,"share.svg": Svg.share,"square.svg": Svg.square,"star.svg": Svg.star,"statistics.svg": Svg.statistics,"up.svg": Svg.up,"wikidata.svg": Svg.wikidata,"wikimedia-commons-white.svg": Svg.wikimedia_commons_white,"wikipedia.svg": Svg.wikipedia};}
+public static All = {"add.svg": Svg.add,"addSmall.svg": Svg.addSmall,"ampersand.svg": Svg.ampersand,"arrow-left-smooth.svg": Svg.arrow_left_smooth,"arrow-right-smooth.svg": Svg.arrow_right_smooth,"bug.svg": Svg.bug,"camera-plus.svg": Svg.camera_plus,"checkmark.svg": Svg.checkmark,"circle.svg": Svg.circle,"clock.svg": Svg.clock,"close.svg": Svg.close,"compass.svg": Svg.compass,"cross_bottom_right.svg": Svg.cross_bottom_right,"crosshair-blue-center.svg": Svg.crosshair_blue_center,"crosshair-blue.svg": Svg.crosshair_blue,"crosshair.svg": Svg.crosshair,"delete_icon.svg": Svg.delete_icon,"direction.svg": Svg.direction,"direction_gradient.svg": Svg.direction_gradient,"down.svg": Svg.down,"envelope.svg": Svg.envelope,"floppy.svg": Svg.floppy,"gear.svg": Svg.gear,"help.svg": Svg.help,"home.svg": Svg.home,"home_white_bg.svg": Svg.home_white_bg,"josm_logo.svg": Svg.josm_logo,"layers.svg": Svg.layers,"layersAdd.svg": Svg.layersAdd,"logo.svg": Svg.logo,"logout.svg": Svg.logout,"mapillary.svg": Svg.mapillary,"no_checkmark.svg": Svg.no_checkmark,"or.svg": Svg.or,"osm-logo-us.svg": Svg.osm_logo_us,"osm-logo.svg": Svg.osm_logo,"pencil.svg": Svg.pencil,"phone.svg": Svg.phone,"pin.svg": Svg.pin,"pop-out.svg": Svg.pop_out,"reload.svg": Svg.reload,"ring.svg": Svg.ring,"search.svg": Svg.search,"send_email.svg": Svg.send_email,"share.svg": Svg.share,"square.svg": Svg.square,"star.svg": Svg.star,"star_half.svg": Svg.star_half,"statistics.svg": Svg.statistics,"up.svg": Svg.up,"wikidata.svg": Svg.wikidata,"wikimedia-commons-white.svg": Svg.wikimedia_commons_white,"wikipedia.svg": Svg.wikipedia};}

UI/Popup/TagRenderingQuestion.ts

@@ -198,9 +198,12 @@ export default class TagRenderingQuestion extends UIElement {
     private GenerateMappingElement(mapping: {
         if: TagsFilter,
         then: Translation,
-        hideInAnswer: boolean
+        hideInAnswer: boolean | TagsFilter
     }): InputElement<TagsFilter> {
-        if (mapping.hideInAnswer) {
+        if (mapping.hideInAnswer === true) {
+            return undefined;
+        }
+        if(typeof(mapping.hideInAnswer) !== "boolean" && mapping.hideInAnswer.matches(this._tags.data)){
             return undefined;
         }
         return new FixedInputElement(

UI/ReviewElement.ts

@@ -0,0 +1,65 @@
+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 {
+    private _reviews: UIEventSource<{ comment?: string; author: string; date: Date; rating: number }[]>;
+
+    constructor(reviews: UIEventSource<{
+        comment?: string,
+        author: string,
+        date: Date,
+        rating: number
+    }[]>) {
+        super(reviews);
+        this._reviews = reviews;
+    }
+
+    InnerRender(): string {
+
+        const elements = [];
+
+        elements.push(Translations.t.reviews.title.SetClass("review-title"));
+
+        elements.push(...this._reviews.data.map(review => {
+            const stars = Math.round(review.rating / 10)
+            const fullStars = Math.floor(stars / 2);
+            const d = review.date;
+
+            return new Combine(
+                [
+                    new Combine([
+
+                        new Combine([
+                            "<img src='./assets/svg/star.svg' />".repeat(fullStars),
+                            stars % 2 == 1 ? "<img src='./assets/svg/star_half.svg' />" : ""
+                        ]).SetClass("review-rating"),
+                        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-stars-date"),
+
+                    new FixedUiElement(review.comment).SetClass("review-comment"),
+                    "<br/>",
+                    new FixedUiElement(review.author).SetClass("review-author"),
+
+                ]
+            ).SetClass("review-element")
+        }));
+        elements.push(
+            new Combine([
+                Translations.t.reviews.attribution,
+                "<img src='./assets/mangrove_logo.png'>"
+            ])
+
+                .SetClass("review-attribution"))
+
+        return new Combine(elements).SetClass("review").Render();
+    }
+
+}

assets/svg/star_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_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.39111844"
+     inkscape:cx="773.36927"
+     inkscape:cy="1236.855"
+     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>
+  <g
+     transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)"
+     fill="#000000"
+     stroke="none"
+     id="g6">
+    <path
+       d="m 6760,12443 c -137,-26 -302,-163 -453,-375 -207,-293 -384,-645 -802,-1598 -347,-790 -486,-1070 -667,-1337 -211,-311 -357,-373 -878,-374 -303,0 -573,22 -1315,106 -310,36 -666,73 -930,97 -191,17 -792,17 -905,0 -359,-56 -525,-174 -538,-382 -7,-128 43,-265 161,-442 197,-294 514,-612 1317,-1323 955,-845 1247,-1174 1290,-1452 37,-234 -95,-656 -453,-1458 -364,-816 -430,-963 -490,-1110 -252,-611 -352,-998 -318,-1236 31,-222 145,-333 357,-346 311,-21 768,169 1699,704 749,431 885,508 1051,596 451,240 718,338 924,341 z"
+       id="path4"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccccccccccccccccccc" />
+  </g>
+</svg>

assets/translations.json

@@ -907,5 +907,19 @@
       "gl": "Recargar os datos",
       "de": "Daten neu laden"
     }
+  },
+  "reviews": {
+    "title": {
+      "en": "Reviews",
+      "nl": "Beoordelingen"
+    },
+    "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"
+    },
+    "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> "
+    }
   }
 }

css/ReviewElement.css

@@ -0,0 +1,56 @@
+.review-rating img {
+    max-width: 1em;
+    height: 1em;
+}
+
+.review-rating {
+    display: flex;
+    flex-direction: row;
+}
+
+.review-date {
+    color: var(--subtle-detail-color-light-contrast);
+}
+
+.review-stars-date {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0.5em;
+}
+
+.review-author {
+    font-weight: bold;
+    display: flex;
+    justify-content: flex-end;
+}
+
+.review-element {
+    padding: 1em;
+    margin: 0.5em;
+    display: block;
+    border-radius: 1em;
+    background-color: var(--subtle-detail-color);
+    color: var(--subtle-detail-color-contrast);
+}
+
+.review-attribution {
+    display: flex;
+    color: var(--subtle-detail-color-light-contrast);
+    justify-content: flex-end;
+    margin-right: 1em;
+}
+
+.review-attribution span {
+    width: calc(65% - 3em);
+    text-align: right;
+    max-width: 20em;
+}
+
+.review-attribution img {
+    height: 3em;
+    margin-left: 0.5em;
+}
+
+.review-title {
+    font-size: x-large;
+}

customGenerator.html

@@ -91,7 +91,8 @@
 </head>
 <body>
 <div id="maindiv">
-    'maindiv' not attached
+    Loading the MapComplete custom theme builder...<br/>
+    If this message persists, make sure javascript is enabled and no script blocker is blocking this.
 </div>
 <script src="./customGenerator.ts"></script>
 </body>

index.css

@@ -1,6 +1,8 @@
 :root {
     --subtle-detail-color: #e5f5ff;
     --subtle-detail-color-contrast: black;
+    --subtle-detail-color-light-contrast: lightgrey;
+    
     --catch-detail-color: #3a3aeb;
     --catch-detail-color-contrast: white;
     --alert-color: #fee4d1;

index.html

@@ -15,6 +15,7 @@
     <link rel="stylesheet" href="./css/tagrendering.css"/>
     <link rel="stylesheet" href="./css/imageUploadFlow.css"/>
     <link rel="stylesheet" href="./css/fullscreenmessagebox.css"/>
+    <link href="css/ReviewElement.css" rel="stylesheet"/>
     <!-- $$$CUSTOM-CSS -->
     <link rel="manifest" href="./manifest.manifest">
     <link rel="icon" href="assets/svg/add.svg" sizes="any" type="image/svg+xml">

package-lock.json

@@ -3907,6 +3907,14 @@
       "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.10.0.tgz",
       "integrity": "sha512-3YDiu347mtVtjpyV3u5kVqQLP242c06zwDOgpeRnybmXlYYsLbtTrUBUm8i8srONt+FWobl5aibnU1030PeeuA=="
     },
+    "axios": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
+      "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
+      "requires": {
+        "follow-redirects": "1.5.10"
+      }
+    },
     "babel-plugin-dynamic-import-node": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz",
@@ -4242,6 +4250,11 @@
       "resolved": "https://registry.npmjs.org/buffer-equal/-/buffer-equal-0.0.1.tgz",
       "integrity": "sha1-kbx0sR6kBbyRa8aqkI+q+ltKrEs="
     },
+    "buffer-equal-constant-time": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
+      "integrity": "sha1-+OcRMvf/5uAaXJaXpMbz5I1cyBk="
+    },
     "buffer-from": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
@@ -5441,6 +5454,14 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "ecdsa-sig-formatter": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
+      "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
+      "requires": {
+        "safe-buffer": "^5.0.1"
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -5825,6 +5846,29 @@
         "locate-path": "^2.0.0"
       }
     },
+    "follow-redirects": {
+      "version": "1.5.10",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+      "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+      "requires": {
+        "debug": "=3.1.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@@ -6761,6 +6805,11 @@
         }
       }
     },
+    "jose": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-3.3.1.tgz",
+      "integrity": "sha512-dMVfVKnyJyl2d9OBkwu/nvheGh9fbS1khhkJdvbGnINNe8IUfSJ/U+BXJOQvk65BCIJ58lp7xQKJTGQQ5dxrZA=="
+    },
     "jquery": {
       "version": "3.5.1",
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz",
@@ -6895,6 +6944,23 @@
         "minimist": "^1.2.0"
       }
     },
+    "jsonwebtoken": {
+      "version": "8.5.1",
+      "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-8.5.1.tgz",
+      "integrity": "sha512-XjwVfRS6jTMsqYs0EsuJ4LGxXV14zQybNd4L2r0UvbVnSF9Af8x7p5MzbJ90Ioz/9TI41/hTCvznF/loiSzn8w==",
+      "requires": {
+        "jws": "^3.2.2",
+        "lodash.includes": "^4.3.0",
+        "lodash.isboolean": "^3.0.3",
+        "lodash.isinteger": "^4.0.4",
+        "lodash.isnumber": "^3.0.3",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.isstring": "^4.0.1",
+        "lodash.once": "^4.0.0",
+        "ms": "^2.1.1",
+        "semver": "^5.6.0"
+      }
+    },
     "jsprim": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
@@ -6911,6 +6977,53 @@
       "resolved": "https://registry.npmjs.org/jsts/-/jsts-1.1.2.tgz",
       "integrity": "sha1-0gXSzIOTCB2eSErjYoIRBpXtwjA="
     },
+    "jwa": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.1.tgz",
+      "integrity": "sha512-qiLX/xhEEFKUAJ6FiBMbes3w9ATzyk5W7Hvzpa/SLYdxNtng+gcurvrI7TbACjIXlsJyr05/S1oUhZrc63evQA==",
+      "requires": {
+        "buffer-equal-constant-time": "1.0.1",
+        "ecdsa-sig-formatter": "1.0.11",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "jwk-to-pem": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/jwk-to-pem/-/jwk-to-pem-2.0.4.tgz",
+      "integrity": "sha512-4CCK9UBHNWjWtfSHdyu3I6rA8vlN5cWqnVuwY0cOMyXtw6M1tP+yrM8GZpwk+P932Dc3cLag4d35B6CqyIf89A==",
+      "requires": {
+        "asn1.js": "^5.3.0",
+        "elliptic": "^6.5.3",
+        "safe-buffer": "^5.0.1"
+      },
+      "dependencies": {
+        "asn1.js": {
+          "version": "5.4.1",
+          "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-5.4.1.tgz",
+          "integrity": "sha512-+I//4cYPccV8LdmBLiX8CYvf9Sp3vQsrqu2QNXRcrbiWvcx/UdlFiqUJJzxRQxgsZmvhXhn4cSKeSmoFjVdupA==",
+          "requires": {
+            "bn.js": "^4.0.0",
+            "inherits": "^2.0.1",
+            "minimalistic-assert": "^1.0.0",
+            "safer-buffer": "^2.1.0"
+          }
+        },
+        "bn.js": {
+          "version": "4.11.9",
+          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.9.tgz",
+          "integrity": "sha512-E6QoYqCKZfgatHTdHzs1RRKP7ip4vvm+EyRUeE2RF0NblwVvb0p6jSVeNTOFxPn26QXN2o6SMfNxKp6kU8zQaw=="
+        }
+      }
+    },
+    "jws": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/jws/-/jws-3.2.2.tgz",
+      "integrity": "sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==",
+      "requires": {
+        "jwa": "^1.4.1",
+        "safe-buffer": "^5.0.1"
+      }
+    },
     "kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -7126,11 +7239,46 @@
       "resolved": "https://registry.npmjs.org/lodash.clone/-/lodash.clone-4.5.0.tgz",
       "integrity": "sha1-GVhwRQ9aExkkeN9Lw9I9LeoZB7Y="
     },
+    "lodash.includes": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
+      "integrity": "sha1-YLuYqHy5I8aMoeUTJUgzFISfVT8="
+    },
+    "lodash.isboolean": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
+      "integrity": "sha1-bC4XHbKiV82WgC/UOwGyDV9YcPY="
+    },
+    "lodash.isinteger": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
+      "integrity": "sha1-YZwK89A/iwTDH1iChAt3sRzWg0M="
+    },
+    "lodash.isnumber": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
+      "integrity": "sha1-POdoEMWSjQM1IwGsKHMX8RwLH/w="
+    },
+    "lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs="
+    },
+    "lodash.isstring": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
+      "integrity": "sha1-1SfftUVuynzJu5XV2ur4i6VKVFE="
+    },
     "lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
       "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4="
     },
+    "lodash.once": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
+      "integrity": "sha1-DdOXEhPHxW34gJd9UEyI+0cal6w="
+    },
     "lodash.sortby": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
@@ -7191,6 +7339,16 @@
       "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
       "dev": true
     },
+    "mangrove-reviews": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/mangrove-reviews/-/mangrove-reviews-0.1.3.tgz",
+      "integrity": "sha512-uaUMaRI3ZWwBIqudOzoDd3/d2YVp0A1ZbhC8MQ0VNJDjl0yyQ/T/Aq3TQyz+dO7tvIqR+Lq8UGWFnsiGVVKNGw==",
+      "requires": {
+        "axios": "^0.19.2",
+        "jsonwebtoken": "^8.5.1",
+        "jwk-to-pem": "^2.0.3"
+      }
+    },
     "map-cache": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz",
@@ -8099,16 +8257,6 @@
         }
       }
     },
-    "parcel-plugin-static-files-copy": {
-      "version": "2.4.3",
-      "resolved": "https://registry.npmjs.org/parcel-plugin-static-files-copy/-/parcel-plugin-static-files-copy-2.4.3.tgz",
-      "integrity": "sha512-tUZn54XsZIZ9hhhNQkyaWaHLvjOj2wra8pp4yPjp1b5p1frQ+YEwG6eaNtaQVyA+UvORsZg+Wni7n9gIOBE8eA==",
-      "dev": true,
-      "requires": {
-        "minimatch": "3.0.4",
-        "path": "0.12.7"
-      }
-    },
     "parse-asn1": {
       "version": "5.1.5",
       "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.5.tgz",
@@ -8146,33 +8294,6 @@
       "resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz",
       "integrity": "sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ="
     },
-    "path": {
-      "version": "0.12.7",
-      "resolved": "https://registry.npmjs.org/path/-/path-0.12.7.tgz",
-      "integrity": "sha1-1NwqUGxM4hl+tIHr/NWzbAFAsQ8=",
-      "dev": true,
-      "requires": {
-        "process": "^0.11.1",
-        "util": "^0.10.3"
-      },
-      "dependencies": {
-        "inherits": {
-          "version": "2.0.3",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
-          "dev": true
-        },
-        "util": {
-          "version": "0.10.4",
-          "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz",
-          "integrity": "sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==",
-          "dev": true,
-          "requires": {
-            "inherits": "2.0.3"
-          }
-        }
-      }
-    },
     "path-browserify": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-0.0.1.tgz",

package.json

@@ -37,6 +37,7 @@
     "leaflet-providers": "^1.10.2",
     "libphonenumber": "0.0.10",
     "libphonenumber-js": "^1.7.55",
+    "mangrove-reviews": "^0.1.3",
     "moment": "^2.29.0",
     "opening_hours": "^3.5.0",
     "osm-auth": "^1.0.2",

test.html

@@ -7,28 +7,12 @@
     <link href="css/tabbedComponent.css" rel="stylesheet"/>
     <link href="css/openinghourstable.css" rel="stylesheet"/>
     <link href="css/tagrendering.css" rel="stylesheet"/>
+    <link href="css/ReviewElement.css" rel="stylesheet"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-    <style>
-        .tag-input-row {
-            display: block ruby;
-            box-sizing: border-box;
-            margin-right: 2em;
-            width: 100%;
-        }
-
-        .bordered {
-            border: 1px solid black;
-            display: block;
-            padding: 0.5em;
-            border-radius: 0.5em;
-        }
-    </style>
 </head>
 <body>
-<div class="question">
 
     <div id="maindiv">'maindiv' not attached</div>
-</div>
 <div id="extradiv">'extradiv' not attached</div>
 <script src="./test.ts"></script>
 </body>

test.ts

@@ -1,4 +1,49 @@
+//*
+import MangroveReviews from "./Logic/Web/MangroveReviews";
+import ReviewElement from "./UI/ReviewElement";
+
+const review = MangroveReviews.GetReviewsFor(3.22000, 51.21576, "Pietervdvn Software Consultancy")
+new ReviewElement(review).AttachTo("maindiv");
 /*
+mangrove.getReviews({sub: 'geo:,?q=&u=15'}).then(
+    (data) => {
+        for (const review of data.reviews) {
+            console.log(review.payload);
+            // .signature
+            // .kid
+            // .jwt
+        }
+    }
+);*/
+
+/*
+mangrove.generateKeypair().then(
+    keypair => {
+        mangrove.keypairToJwk(keypair).then(jwk => {
+            console.log(jwk)
+            //   const restoredKeypair = await mangrove.jwkToKeypair(jwk).
+// Sign and submit a review (reviews of this example subject are removed from the database).
+            mangrove.signAndSubmitReview(keypair, {
+                // Lat,lon!
+                sub: "geo:51.21576,3.22000?q=Pietervdvn Software Consultancy&u=15",
+                rating: 100,
+                opinion: "Excellent knowledge about OSM",
+                metadata: {
+                    nickname: "Pietervdvn",
+                }
+            })
+        })
+    }
+)
+*/
+
+/*
+// Given by a particular user since certain time.
+const userReviews = await getReviews({
+    kid: '-----BEGIN PUBLIC KEY-----MFkwEwYHKoZIzj0CAQYIKoZIzj0DAQcDQgAEDo6mN4kY6YFhpvF0u3hfVWD1RnDElPweX3U3KiUAx0dVeFLPAmeKdQY3J5agY3VspnHo1p/wH9hbZ63qPbCr6g==-----END PUBLIC KEY-----',
+    gt_iat: 1580860800
+})*/
+
 
 /*/