https://datosabiertos.olavarria.gov.ar/static/core/scripts/modules/dashboards/views/GridStackVzItemView.js

1var Dashboards = Dashboards || {models:{},views:{},collections:{}};
2
3Dashboards.views.GridStackVzItemView = function(options) {
4	this.inheritedEvents = [];
5
6	Backbone.Epoxy.View.call(this, options);
7}
8
9_.extend(Dashboards.views.GridStackVzItemView.prototype, Backbone.Epoxy.View.prototype, {
10
11		enteredScreen: false,
12
13		initialize: function (options) {
14
15    		this.retryConfig = options.retryConfig;
16
17			// Set mapOptions from Configuration, of not set it empty
18			this.mapOptions = Configuration.mapOptions || {};
19
20			// Cuando se crea un DB el impl_details viene como string, no se porque. Lo convierto a Objeto JSON.
21			if( !_.isUndefined(options) ){
22				if( !_.isUndefined(options.impl_details) ){
23					if( _.isString(options.impl_details) ){
24						var parsedImplDetails = $.parseJSON( options.impl_details );
25						if( !_.isNull( parsedImplDetails ) ){
26							options.impl_details = parsedImplDetails;
27						}
28					}
29				}
30			}
31
32			this.renderModel = new charts.models.Chart(options);
33
34			if(options.impl_details){
35				this.renderModel.parse(_.extend(options.impl_details,{
36						revision_id:options.id,
37						styleDefault: Configuration.mapStyleDefault
38					})
39				);
40			}
41
42			this.listenTo(this.renderModel, 'change', this.showLoading, this)
43			this.listenTo(this.renderModel, 'data_updated',this.onChangeData,this);
44			
45			if(this.renderModel.data.get('type') == 'mapchart'){
46				this.listenTo(this.renderModel.data, 'fetch:start', this.showMapLoading, this);
47				this.listenTo(this.renderModel.data, 'fetch:end', this.hideMapLoading, this);
48			}
49
50			this.chartsFactory = new charts.ChartsFactory();
51			var chartSettings = this.chartsFactory.create(options.type,options.lib);
52			if(chartSettings){
53				this.ChartViewClass = chartSettings.Class;
54			}
55			this.renderModel.bindDataModel();
56
57			document.addEventListener('scroll', this.checkPosition.bind(this));
58      		this.checkPosition();
59			return this;
60		},
61
62		checkPosition: function(){
63			// render widget only if it is in screen
64			if(!this.enteredScreen){
65				var documentPosition = $(document).scrollTop() + $(window).height();
66				var widgetPosition = this.$el.offset().top;
67				if(widgetPosition < documentPosition){
68					this.enteredScreen = true;
69					this.fetchData(0);
70				}
71			}
72		},
73
74		setTimestamp: function(){
75
76			if( 
77				!_.isUndefined( this.chartInstance ) &&
78				!_.isUndefined( this.chartInstance.model ) &&
79				!_.isUndefined( this.chartInstance.model.get('el') )
80			){
81
82				var timeID = this.chartInstance.model.get('el');
83				timeID = timeID.split('#');
84
85				timeID = '#tooltip-time-'+timeID[1];
86
87				var timestamp;
88
89				// For Maps
90				if( 
91					!_.isUndefined( this.chartInstance.model.data ) &&
92					!_.isUndefined( this.chartInstance.model.data.get('type') ) &&
93					this.chartInstance.model.data.get('type') == 'mapchart' &&
94					!_.isUndefined( this.chartInstance.model.data.get('timestamp') )
95				){
96
97					timestamp = this.chartInstance.model.data.get('timestamp');
98
99				// For Charts
100				}else if(
101					$(timeID).length > 0 &&
102					!_.isUndefined( this.chartInstance ) &&
103					!_.isUndefined( this.chartInstance.model ) &&
104					!_.isUndefined( this.chartInstance.model.data ) &&
105					!_.isUndefined( this.chartInstance.model.data.get('response') ) &&
106					!_.isUndefined( this.chartInstance.model.data.get('response').timestamp )          
107				){
108
109					timestamp = this.chartInstance.model.data.get('response').timestamp;
110
111				}
112
113				// If timestamp exists, then proceed
114				if( 
115					!_.isUndefined( timestamp )
116				){
117
118					var dFormat = 'MMMM DD, Y',
119						tFormat = 'hh:mm A',
120						dt,
121						timeText = $(timeID).find('li > div').html();
122
123					if( !_.isUndefined( timeText ) ){
124
125						if( timeText.indexOf('has-timestamp') != -1  ){
126
127							timeText = $(timeID).find('li > div > .has-modified-at').html();
128						
129						}
130
131						// sometimes are seconds, sometimes milliseconds
132						if(timestamp < 100000000000){
133							timestamp = timestamp * 1000; 
134						}
135
136						// Get locale from lang attribute un <html>
137						var local = $('html').attr('lang');
138
139						// If spanish
140						if(local === "es" || local.indexOf("es-") != -1 || local.indexOf("es_") != -1){
141							local = "es";
142						// else englishs
143						}else{
144							//(?) if I use "en" doesn't work, I must use "" for "en"
145							local = "";
146						}
147
148						if( timestamp == 0 ){
149							dt = new moment().locale(local)
150						}else{
151							dt = new moment(timestamp).locale(local);
152						}
153
154						dateFormatted = dt.format(dFormat)
155
156						timeFormatted = dt.format(tFormat)
157
158						timestamp = dateFormatted + ', ' + timeFormatted;
159						
160						// Render time text with modified at and timestamp
161						$(timeID).find('li > div').html('<span class="has-modified-at">'+timeText+'</span><br><br>

161'+gettext('VIEWDS-INFO-LASTUPDATE')+'<br><span style="text-transform:capitalize;" class="has-timestamp">'+timestamp+'</span>');
162
163					}
164
165				}
166
167			}
168
169		},
170
171		fetchData: function(retryCount){
172			(typeof retryCount === "undefined") ? retryCount = 0 : '';
173
174			this.showLoading();
175			this.renderModel.data.fetch()
176				.done(function () {
177					this.hideLoading();
178				}.bind(this))
179				.fail(function(response){
180					var responseJSON;
181					try{ responseJSON = JSON.parse(response.responseText); } catch {}
182					if(responseJSON && responseJSON.status == 408 && retryCount < this.retryConfig.retryLimit){
183						this.$(".loading .retrying.text").show();
184						// reintentamos
185						setTimeout(function(){
186							this.fetchData(++retryCount);
187						}.bind(this), this.retryConfig.retryDelay);
188					} else {
189						this.hideLoading();
190					}
191				}.bind(this));
192		},
193
194		onChangeData: function () {
195			this.setTimestamp();
196			this.render();
197			this.hideLoading();
198		},
199
200		showLoading: function(){
201			$(this.el).find('.loading').show();
202		},
203
204		hideLoading: function(){
205			$(this.el).find('.loading').hide();
206		},
207
208		showMapLoading: function(){
209			$(this.el).find('#id_miniLoading').show();
210		},
211
212		hideMapLoading: function(){
213			$(this.el).find('#id_miniLoading').hide();
214		},
215
216		render: function(){
217
218			if (this.ChartViewClass) {
219
220				if(this.chartInstance){
221					this.chartInstance.destroy();
222				}
223
224				this.chartInstance = new this.ChartViewClass({
225					model: this.renderModel,
226					el: $(this.el).find('.render-area'),
227					mapOptions: this.mapOptions
228				});
229				
230				if(this.renderModel.valid()){
231						this.chartInstance.render();
232				};
233			}
234
235		}
236
237});
238
239Dashboards.views.GridStackVzItemView.extend = Backbone.Epoxy.View.extend;