Add details rendering

Models/Constants.ts

@@ -6,7 +6,14 @@ export default class Constants {
     
     public static ImgurApiKey = '7070e7167f0a25a'
     public static readonly mapillary_client_token_v4 = "MLY|4441509239301885|b40ad2d3ea105435bd40c7e76993ae85"
-    // Currently there is no user-friendly way to get the user's API key. See https://github.com/maproulette/maproulette2/issues/476 for more information.
+
+    /**
+     * API key for Maproulette
+     * 
+     * Currently there is no user-friendly way to get the user's API key.
+     * See https://github.com/maproulette/maproulette2/issues/476 for more information.
+     * Using an empty string however does work for most actions, but will attribute all actions to the Superuser.
+     */
     public static readonly MaprouletteApiKey = "";
 
     public static defaultOverpassUrls = [

UI/SpecialVisualizations.ts

@@ -1,4 +1,4 @@
-import {Store, UIEventSource} from "../Logic/UIEventSource";
+import {Store, Stores, UIEventSource} from "../Logic/UIEventSource";
 import {VariableUiElement} from "./Base/VariableUIElement";
 import LiveQueryHandler from "../Logic/Web/LiveQueryHandler";
 import {ImageCarousel} from "./Image/ImageCarousel";
@@ -57,6 +57,7 @@ import {SaveButton} from "./Popup/SaveButton";
 import {MapillaryLink} from "./BigComponents/MapillaryLink";
 import {CheckBox} from "./Input/Checkboxes";
 import Slider from "./Input/Slider";
+import List from "./Base/List";
 
 export interface SpecialVisualization {
     funcName: string,
@@ -1091,7 +1092,40 @@ export default class SpecialVisualizations {
                         }))
                 },
                 new NearbyImageVis(),
-                new MapillaryLinkVis()
+                new MapillaryLinkVis(),
+                {
+                    funcName: "maproulette_task",
+                    args: [],
+                    constr(state, tagSource, argument, guistate) {
+                        let parentId = tagSource.data.mr_challengeId;
+                        let challenge = Stores.FromPromise(Utils.downloadJsonCached(`https://maproulette.org/api/v2/challenge/${parentId}`,24*60*60*1000));
+
+                        let details = new VariableUiElement( challenge.map(challenge => {
+                            let listItems: BaseUIElement[] = [];
+                            let title: BaseUIElement;
+                            
+                            if (challenge?.name) {
+                                title = new Title(challenge.name);
+                            }
+
+                            if (challenge?.description) {
+                                listItems.push(new FixedUiElement(challenge.description));
+                            }
+
+                            if (challenge?.instruction) {
+                                listItems.push(new FixedUiElement(challenge.instruction));
+                            }
+
+                            if(listItems.length === 0) {
+                                return undefined;
+                            } else {
+                                return [title, new List(listItems)];
+                            }
+                        }))
+                        return details; 
+                    },
+                    docs: "Show details of a MapRoulette task"
+                }
             ]
 
         specialVisualizations.push(new AutoApplyButton(specialVisualizations))

assets/layers/maproulette_challenge/maproulette_challenge.json

@@ -14,7 +14,7 @@
       "en": "Item in MapRoulette"
     }
   },
-  "titleIcons":[
+  "titleIcons": [
     {
       "id": "maproulette",
       "render": "<a href='https://maproulette.org/challenge/{mr_challengeId}/task/{mr_taskId}' target='_blank'><img src='./assets/layers/maproulette/logomark.svg'/></a>"
@@ -67,6 +67,10 @@
     }
   ],
   "tagRenderings": [
+    {
+      "id": "details",
+      "render": "{maproulette_task()}"
+    },
     {
       "id": "status",
       "render": "Current status: {status}",

langs/layers/en.json

@@ -4423,6 +4423,75 @@
             "render": "MapRoulette Item: {parentName}"
         }
     },
+    "maproulette_challenge": {
+        "description": "Layer showing tasks of a MapRoulette challenge",
+        "filter": {
+            "0": {
+                "options": {
+                    "0": {
+                        "question": "Show tasks with all statuses"
+                    },
+                    "1": {
+                        "question": "Show tasks that are created"
+                    },
+                    "2": {
+                        "question": "Show tasks that are fixed"
+                    },
+                    "3": {
+                        "question": "Show tasks that are false positives"
+                    },
+                    "4": {
+                        "question": "Show tasks that are skipped"
+                    },
+                    "5": {
+                        "question": "Show tasks that are deleted"
+                    },
+                    "6": {
+                        "question": "Show tasks that are already fixed"
+                    },
+                    "7": {
+                        "question": "Show tasks that are marked as too hard"
+                    },
+                    "8": {
+                        "question": "Show tasks that are disabled"
+                    }
+                }
+            }
+        },
+        "tagRenderings": {
+            "status": {
+                "mappings": {
+                    "0": {
+                        "then": "Task is created"
+                    },
+                    "1": {
+                        "then": "Task is fixed"
+                    },
+                    "2": {
+                        "then": "Task is a false positive"
+                    },
+                    "3": {
+                        "then": "Task is skipped"
+                    },
+                    "4": {
+                        "then": "Task is deleted"
+                    },
+                    "5": {
+                        "then": "Task is already fixed"
+                    },
+                    "6": {
+                        "then": "Task is marked as too hard"
+                    },
+                    "7": {
+                        "then": "Task is disabled"
+                    }
+                }
+            }
+        },
+        "title": {
+            "render": "Item in MapRoulette"
+        }
+    },
     "maxspeed": {
         "description": "Shows the allowed speed for every road",
         "name": "Maxspeed",