Add comments display to ImproveOSM issues

modules/services/improveOSM.js

@@ -329,8 +329,6 @@ export default {
         });
     },
 
-    // Test case:
-    // http://missingroads.skobbler.net/missingGeoService/retrieveComments?tileX=137495&tileY=89379
     getComments: function(d, callback) {
         var key = d.error_key;
         var qParams = {};

modules/ui/improveOSM_comments.js

@@ -0,0 +1,92 @@
+import { select as d3_select } from 'd3-selection';
+
+import { t } from '../util/locale';
+import { svgIcon } from '../svg';
+import { services } from '../services';
+import { utilDetect } from '../util/detect';
+
+export function uiImproveOsmComments() {
+    var _error;
+
+
+    function errorComments(selection) {
+        // make the div immediately so it appears above the buttons
+        var comments = selection.selectAll('.comments-container')
+            .data([0]);
+
+        comments = comments.enter()
+            .append('div')
+            .attr('class', 'comments-container')
+            .merge(comments);
+
+        // must retrieve comments from API before they can be displayed
+        services.improveOSM.getComments(_error, function(err, d) {
+            var commentEnter = comments.selectAll('.comment')
+                .data(_error.comments)
+                .enter()
+                .append('div')
+                .attr('class', 'comment');
+
+            commentEnter
+                .append('div')
+                .attr('class', 'comment-avatar')
+                .call(svgIcon('#iD-icon-avatar', 'comment-avatar-icon'));
+
+            var mainEnter = commentEnter
+                .append('div')
+                .attr('class', 'comment-main');
+
+            var metadataEnter = mainEnter
+                .append('div')
+                .attr('class', 'comment-metadata');
+
+            metadataEnter
+                .append('div')
+                .attr('class', 'comment-author')
+                .each(function(d) {
+                    var selection = d3_select(this);
+                    var osm = services.osm;
+                    if (osm && d.user) {
+                        selection = selection
+                            .append('a')
+                            .attr('class', 'comment-author-link')
+                            .attr('href', osm.userURL(d.username))
+                            .attr('tabindex', -1)
+                            .attr('target', '_blank');
+                    }
+                    selection
+                        .text(function(d) { return d.username });
+                });
+
+            metadataEnter
+                .append('div')
+                .attr('class', 'comment-date')
+                .text(function(d) {
+                    return t('note.status.commented', { when: localeDateString(d.timestamp) });
+                });
+
+            mainEnter
+                .append('div')
+                .attr('class', 'comment-text')
+                .append('p')
+                .text(function(d) { return d.text; });
+        });
+    }
+
+    function localeDateString(s) {
+        if (!s) return null;
+        var detected = utilDetect();
+        var options = { day: 'numeric', month: 'short', year: 'numeric' };
+        var d = new Date(s);
+        if (isNaN(d.getTime())) return null;
+        return d.toLocaleDateString(detected.locale, options);
+    }
+
+    errorComments.error = function(val) {
+        if (!arguments.length) return _error;
+        _error = val;
+        return errorComments;
+    };
+
+    return errorComments;
+}

modules/ui/improveOSM_editor.js

@@ -7,6 +7,7 @@ import { modeBrowse } from '../modes';
 import { svgIcon } from '../svg';
 
 import {
+    uiImproveOsmComments,
     uiImproveOsmDetails,
     uiImproveOsmHeader,
     uiQuickLinks,
@@ -19,6 +20,7 @@ import { utilNoAuto, utilRebind } from '../util';
 export function uiImproveOsmEditor(context) {
     var dispatch = d3_dispatch('change');
     var errorDetails = uiImproveOsmDetails(context);
+    var errorComments = uiImproveOsmComments(context);
     var errorHeader = uiImproveOsmHeader(context);
     var quickLinks = uiQuickLinks();
 
@@ -77,6 +79,7 @@ export function uiImproveOsmEditor(context) {
             .call(errorHeader.error(_error))
             .call(quickLinks.choices(choices))
             .call(errorDetails.error(_error))
+            .call(errorComments.error(_error))
             .call(improveOsmSaveSection);
     }
 

modules/ui/index.js

@@ -28,6 +28,7 @@ export { uiFormFields } from './form_fields';
 export { uiFullScreen } from './full_screen';
 export { uiGeolocate } from './geolocate';
 export { uiHelp } from './help';
+export { uiImproveOsmComments } from './improveOSM_comments';
 export { uiImproveOsmDetails } from './improveOSM_details';
 export { uiImproveOsmEditor } from './improveOSM_editor';
 export { uiImproveOsmHeader } from './improveOSM_header';
@@ -72,4 +73,4 @@ export { uiUndoRedo } from './undo_redo';
 export { uiVersion } from './version';
 export { uiViewOnOSM } from './view_on_osm';
 export { uiViewOnKeepRight } from './view_on_keepRight';
-export { uiZoom } from './zoom';
+export { uiZoom } from './zoom';