Styling the reviews

AllTranslationAssets.ts

@@ -124,7 +124,8 @@ export default class AllTranslationAssets {
     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"} ),
+  reviews: {    title: new Translation( {"en":"{count} reviews","nl":"{count} 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>"} ),
+    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"} ),
+    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> "} ),
 },
 }}

Logic/Web/MangroveReviews.ts

@@ -30,7 +30,33 @@ export default class MangroveReviews {
         
         mangrove.getReviews({sub: uri}).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({

UI/ReviewElement.ts

@@ -23,30 +23,43 @@ export default class ReviewElement extends UIElement {
 
     InnerRender(): string {
 
+        function genStars(rating: number) {
+            const scoreTen = Math.round(rating / 10);
+            return new Combine([
+                "<img src='./assets/svg/star.svg' />".repeat(Math.floor(scoreTen / 2)),
+                scoreTen % 2 == 1 ? "<img src='./assets/svg/star_half.svg' />" : ""
+            ])
+        }
+
         const elements = [];
+        const revs = this._reviews.data;
+        revs.sort((a,b) => (b.date.getTime() - a.date.getTime())); // Sort with most recent first
+        const avg = (revs.map(review => review.rating).reduce((a, b) => a + b, 0) / revs.length);
+        elements.push(
+            new Combine([
+                genStars(avg).SetClass("stars"),
+                Translations.t.reviews.title
+                    .Subs({count: "" + revs.length})
+            ])
 
-        elements.push(Translations.t.reviews.title.SetClass("review-title"));
+                .SetClass("review-title"));
 
-        elements.push(...this._reviews.data.map(review => {
+        elements.push(...revs.map(review => {
-            const stars = Math.round(review.rating / 10)
-            const fullStars = Math.floor(stars / 2);
             const d = review.date;
-
             return new Combine(
                 [
                     new Combine([
+                        genStars(review.rating)
+                            .SetClass("review-rating"),
+                        new FixedUiElement(review.comment).SetClass("review-comment")
+                    ]).SetClass("review-stars-comment"),
 
                     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"),
+                        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")
 
                 ]
             ).SetClass("review-element")

assets/translations.json

@@ -910,8 +910,8 @@
   },
   "reviews": {
     "title": {
-      "en": "Reviews",
+      "en": "{count} reviews",
-      "nl": "Beoordelingen"
+      "nl": "{count} beoordelingen"
     },
     "no_reviews_yet": {
       "en": "There are no reviews yet. Be the first to write one and help open data and the business!",

css/ReviewElement.css

@@ -1,3 +1,18 @@
+.review-title {
+    font-size: x-large;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-left: 1em;
+    padding-right: 1em;
+}
+
+.review-title img {
+    max-width: 1.5em;
+    height: 1.5em;
+}
+
+
 .review-rating img {
     max-width: 1em;
     height: 1em;
@@ -6,24 +21,34 @@
 .review-rating {
     display: flex;
     flex-direction: row;
+    width: 5em;
+    margin-right: 0.5em;
+    flex-shrink: 0;
 }
 
 .review-date {
     color: var(--subtle-detail-color-light-contrast);
 }
 
-.review-stars-date {
+.review-stars-comment {
     display: flex;
-    justify-content: space-between;
     margin-bottom: 0.5em;
 }
 
+
+
 .review-author {
     font-weight: bold;
+    margin-right: 0.5em;
+}
+
+.review-author-date {
     display: flex;
+    margin-bottom: 0.5em;
     justify-content: flex-end;
 }
 
+
 .review-element {
     padding: 1em;
     margin: 0.5em;
@@ -51,6 +76,3 @@
     margin-left: 0.5em;
 }
 
-.review-title {
-    font-size: x-large;
-}