iD/modules/ui/panels/history.js

import _filter from 'lodash-es/filter';

import { t } from '../../util/locale';
import { svgIcon } from '../../svg';
import { utilDetect } from '../../util/detect';


export function uiPanelHistory(context) {
    var osm;

    function displayTimestamp(entity) {
        if (!entity.timestamp) return t('info_panels.history.unknown');
        var detected = utilDetect();
        var options = {
            day: 'numeric', month: 'short', year: 'numeric',
            hour: 'numeric', minute: 'numeric', second: 'numeric'
        };
        var d = new Date(entity.timestamp);
        if (isNaN(d.getTime())) return t('info_panels.history.unknown');
        return d.toLocaleString(detected.locale, options);
    }


    function displayUser(selection, entity) {
        if (!entity.user) {
            selection
                .append('span')
                .text(t('info_panels.history.unknown'));
            return;
        }

        selection
            .append('span')
            .attr('class', 'user-name')
            .text(entity.user);

        var links = selection
            .append('div')
            .attr('class', 'links');

        if (osm) {
            links
                .append('a')
                .attr('class', 'user-osm-link')
                .attr('href', osm.userURL(entity.user))
                .attr('target', '_blank')
                .attr('tabindex', -1)
                .text('OSM');
        }

        links
            .append('a')
            .attr('class', 'user-hdyc-link')
            .attr('href', 'https://hdyc.neis-one.org/?' + entity.user)
            .attr('target', '_blank')
            .attr('tabindex', -1)
            .text('HDYC');
    }


    function displayChangeset(selection, entity) {
        if (!entity.changeset) {
            selection
                .append('span')
                .text(t('info_panels.history.unknown'));
            return;
        }

        selection
            .append('span')
            .attr('class', 'changeset-id')
            .text(entity.changeset);

        var links = selection
            .append('div')
            .attr('class', 'links');

        if (osm) {
            links
                .append('a')
                .attr('class', 'changeset-osm-link')
                .attr('href', osm.changesetURL(entity.changeset))
                .attr('target', '_blank')
                .attr('tabindex', -1)
                .text('OSM');
        }

        links
            .append('a')
            .attr('class', 'changeset-osmcha-link')
            .attr('href', 'https://osmcha.mapbox.com/changesets/' + entity.changeset)
            .attr('target', '_blank')
            .attr('tabindex', -1)
            .text('OSMCha');
    }


    function redraw(selection) {
        var selected = _filter(context.selectedIDs(), function(e) { return context.hasEntity(e); });
        var singular = selected.length === 1 ? selected[0] : null;

        osm = context.connection();

        selection.html('');

        selection
            .append('h4')
            .attr('class', 'history-heading')
            .text(singular || t('info_panels.history.selected', { n: selected.length }));

        if (!singular) return;

        var entity = context.entity(singular);

        if (!entity.version) {
            selection
                .append('div')
                .text(t('info_panels.history.no_history'));
            return;
        }

        var list = selection
            .append('ul');

        list
            .append('li')
            .text(t('info_panels.history.version') + ':')
            .append('span')
            .text(entity.version);

        list
            .append('li')
            .text(t('info_panels.history.last_edit') + ':')
            .append('span')
            .text(displayTimestamp(entity));

        list
            .append('li')
            .text(t('info_panels.history.edited_by') + ':')
            .call(displayUser, entity);

        list
            .append('li')
            .text(t('info_panels.history.changeset') + ':')
            .call(displayChangeset, entity);

        if (osm) {
            selection
                .append('a')
                .attr('class', 'view-history-on-osm')
                .attr('target', '_blank')
                .attr('tabindex', -1)
                .attr('href', osm.historyURL(entity))
                .call(svgIcon('#iD-icon-out-link', 'inline'))
                .append('span')
                .text(t('info_panels.history.link_text'));
        }
    }


    var panel = function(selection) {
        selection.call(redraw);

        context.map()
            .on('drawn.info-history', function() {
                selection.call(redraw);
            });
    };

    panel.off = function() {
        context.map()
            .on('drawn.info-history', null);
    };

    panel.id = 'history';
    panel.title = t('info_panels.history.title');
    panel.key = t('info_panels.history.key');


    return panel;
}