{"size": 7249, "ext": "js", "max_stars_repo_path": "public/views/data-detail-view.js", "max_stars_repo_name": "nickbenes/GeoSense", "max_stars_repo_stars_event_min_datetime": "2015-03-17T18:31:06.000Z", "max_stars_repo_stars_event_max_datetime": "2019-02-22T02:57:45.000Z", "max_issues_repo_path": "public/views/data-detail-view.js", "max_issues_repo_name": "nickbenes/GeoSense", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "public/views/data-detail-view.js", "max_forks_repo_name": "nickbenes/GeoSense", "max_forks_repo_forks_event_min_datetime": "2019-06-28T13:16:49.000Z", "max_forks_repo_forks_event_max_datetime": "2019-08-08T11:59:43.000Z"}
{"max_stars_count": 5, "max_issues_count": null, "max_forks_count": 2, "avg_line_length": 31.7938596491, "max_line_length": 142, "alphanum_fraction": 0.5944268175}
define([
	'jquery',
	'underscore',
	'backbone',
	'config',
	'utils',
	'text!templates/data-detail.html',
	'views/panel-view-base',
	'moment'
], function($, _, Backbone, config, utils, templateHtml, PanelViewBase, moment) {
    "use strict";

	var DataDetailView = PanelViewBase.extend({

		className: 'panel panel-default data-detail',
		draggable: false,
		
	    events: {
	    },

	    initialize: function(options) 
	    {
	    	DataDetailView.__super__.initialize.call(this, options);
		    this.template = _.template(templateHtml);	
	    	
	    	this.defaultLayout = [
	    		{fields: ['properties.icon'], label: false, formatter: 'icon', class: 'icon muted'},
	    		{fields: ['%(label)s', '%(datetime)s'], label: false, class: "box heading"},
	    		{fields: ['%(numeric)s'], label: '%(numeric)s', class: 'large'},
	    		{fields: ['properties.description', 'properties.summary'], label: false, class: 'box text-body muted'},
	    		{fields: ['properties.$other'], label: '%(field)s', class: 'text-body muted'},

	    		{fields: ['properties.count'], label: __('no. of %(itemTitlePlural)s'), formatter: 'numeric', class: 'micro muted'},
	    		{fields: ['%(numeric)s.max'], label: __('peak'), class: 'micro muted'},
	    		{fields: ['%(numeric)s.min'], label: __('minimum'), class: 'micro muted'},
	    		{fields: ['%(numeric)s.avg'], label: __('average'), class: 'micro muted'},
	    		{fields: ['%(numeric)s.stddev'], label: __('std. deviation'), class: 'micro muted'}
	    	];
	    },

	    setModel: function(model)
	    {
	    	if (this.model) {
	    		this.stopListening(this.model);
	    		if (this.model.collection && this.model.collection.mapLayer)
	    			this.stopListening(this.model.collection.mapLayer);
	    	}
	    	this.model = model;
	    	this.populateFromModel();
	    	this.listenTo(model.collection.mapLayer, 
	    		'change', this.populateFromModel);
	    	this.listenTo(model.collection.mapLayer, 
	    		'toggle:valFormatter', this.populateFromModel);
	    },

	    populateFromModel: function()    
		{
			var model = this.model,
				rows = this.compileDetailDataForModel(model),
				body = this.$('.panel-body');

			var makeRow = function(o) {
				var span = o.class ? '<span class="' + o.class + '">' : '<span>';
				if (o.label != undefined && o.value != undefined) {
					return '<tr><th class="detail-label">' + span + o.label + '</span></th><td class="detail-value">' + span + o.value + '</span></td></tr>';
				} else if (o.label != undefined) {
					return '<tr><td colspan="2" class="detail-label single">' + span + o.label + '</span></td></tr>';
				} else if (o.value != undefined) {
					return '<tr><td colspan="2" class="detail-value single">' + span + o.value + '</span></td></tr>';
				}
				return '';
			};

			var table = $('.detail-data', body),
				tableRows = [];
			for (var i = 0; i < rows.length; i++) {
				tableRows.push(makeRow(rows[i]));
			} 	

			table.html(tableRows.join('\n'));
			if (this.model.collection && this.model.collection.mapLayer) {
				this.$('.model-title').text(this.model.collection.mapLayer.getDisplay('title'));
			}
		},

	    compileDetailDataForModel: function(model)
	    {
	    	if (!model.collection) return [];
	    	var mapLayer = model.collection.mapLayer,
				layerOptions = mapLayer.getLayerOptions(),
				layout = mapLayer.getDisplay('detailLayout') || this.defaultLayout,
				valFormatter = mapLayer.getValFormatter();

			var isDate = function(value) {
				return value instanceof Date;
			};

			var isEmpty = function(value) {
				return !isDate(value)
					&& ((typeof value == 'object' && _.isEmpty(value)) 
					|| (!value && value != 0) || value === '');
			};

			var getValue = function(value, formatter) {
				if (isDate(value) || typeof value != 'object') return formatter ? formatter.format(value) : value;
				if (value.avg != undefined) return getValue(value.avg, formatter);
				if (Array.isArray(value)) {
					return value.join(', ');
				}
				var minValue = getValue(value.min, formatter),
					maxValue = getValue(value.max, formatter);
				if (minValue == maxValue) return minValue;
				var minMax = formatter.minMaxFormat || __('%(min)s to %(max)s');
				return __(minMax).format({
						min: minValue,
						max: maxValue
					});
			};

			var formatters = {
				date: {
					format: function(value) {
						//var value = value instanceof Date ? value : new Date(value);
						var value = moment(value);
						return value.format(layerOptions.datetimeFormat || locale.formats.DATE_SHORT);
					}
				},
				numeric: valFormatter,
				icon: {
					format: function(value) {
						return '<img class="icon" src="' + value + '" />';
					}
				}
			};

			formatters.icon.minMaxFormat = __('%(min)s %(max)s');
			formatters.date.minMaxFormat = formatters.numeric.minMaxFormat = __('%(min)s – %(max)s');

			var fieldSubst = !layerOptions.attrMap ? {} : {
				'numeric': layerOptions.attrMap.numeric,
				'datetime': layerOptions.attrMap.datetime,
				'label': layerOptions.attrMap.label
			};

			var fields = mapLayer.getFeatureCollectionAttr('fields');

			var labelSubst = {
				'numeric': !isEmpty(valFormatter.unit) ? valFormatter.unit : 
					(fieldSubst.numeric && fields ? fields.reduce(function(a, b) {
						if (b.name == fieldSubst.numeric) return b.label;
						return a;
					}) : __('Value')),
				'unit': valFormatter.unit,
				'itemTitlePlural': mapLayer.getDisplay('itemTitlePlural'),
			};

			var rows = [];

			var displayedFields = layout.reduce(function(r, row) {
				_.each(row.fields, function(fieldName) {
					r[fieldName] = true;
				});
				return r;
			}, {});

			_.each(layout, function(row) {
				var content = [];
				var addToContent = function(content, fieldName, field, row) {
					var value = model.get(fieldName),
						formatter = row.formatter ? formatters[row.formatter] : false;
					displayedFields[fieldName] = true;
					if (!formatter) {
						switch (field.split('.')[0]) {
							case '%(datetime)s': 
								formatter = formatters.date;
								break;
							case '%(numeric)s':
								formatter = formatters.numeric;
								break; 
						};
					} 
					if (!isEmpty(value)) {
						content.push(getValue(value, formatter));
					}
					return content;
				};

				var addRow = function(content, row)
				{
					if (content.length) {
						var out = content.join(row.join || '<br />');
						if (row.label) {
							rows.push({label: row.label.format(labelSubst), value: out, class: row.class});
						} else {
							rows.push({value: out, class: row.class});
						}
					}
				}

				_.each(row.fields, function(field) {
					var fieldName = field.format(fieldSubst);
					if (fieldName == 'properties.$other') {
						_.each(model.get('properties'), function(value, key) {
							if (!displayedFields['properties.' + key]) {
								var r = {
									label: row.label ? row.label.format(_.extend(fieldSubst, {field: key})) : false,
									class: row.class,
									formatter: row.formatter
								}								
								addRow(addToContent([], 'properties.' + key, field, r), r);
							}
						});
					} else {
						addToContent(content, fieldName, field, row);
					}
				});
				addRow(content, row);

			});

			return rows;
	    }

	});

	return DataDetailView;
});
