Plotting is almost possible

www/app/Api.js

+//    GET /drfsm/<test_id>/results/izid/<izid>.csv
+
+// for example
+
+//    GET /drfsm/5/results/izid/1234.csv
+
+
+Ext.define('app.Api', {
+	mixins: ['Ext.mixin.Observable'],
+	singleton: true,
+
+	getIzid: function(lat, lng, area_id) {
+		var me = this;
+		var requestName = Ext.Ajax.request({
+            method: 'GET',
+            url: 'http://sangkil.science.uva.nl:8003/area/1/izid.json?latlng=' + lat + ',' + lng,
+	        
+	        success: function(response, opts){
+	            var result = Ext.decode(response.responseText);
+				me.fireEvent('gotIzid', result['izid']);
+	        },
+
+	        failure: function(){
+	             console.log('failed to get izid');
+        	}
+        });
+	},
+
+	getCsvFile: function(test_id, izid) {
+		console.log(izid);
+		console.log()
+		console.log('/drfsm/'+test_id+'/results/izid/'+izid+'.csv');
+		var me = this;
+     	var requestName = Ext.Ajax.request({
+            method: 'GET',
+            url: 'http://sangkil.science.uva.nl:8003/drfsm/'+test_id+'/results/izid/'+izid+'.csv',
+	        success: function(response, opts){
+	        	console.log(opts)
+	            me.fireEvent('gotCsv', response.responseText)
+	        },
+
+	        failure: function(){
+	             console.log('failed to get csv file');
+        	}
+        });
+	}
+});
\ No newline at end of file

www/app/chartData.js

+Ext.define('app.chartData', {
+	singleton: true,
+
+	init: function(){
+		self.csvFiles = new Array();
+	},
+
+	setCsvFile: function(file){
+		self.csvFiles.push(file)
+	}
+
+	
+});
\ No newline at end of file

www/app/controller/ChartController.js

+Ext.define('app.controller.ChartController', {
+	extend: 'Ext.app.Controller',
+
+	requires: ['app.Api'],
+
+	config: {
+		refs: {
+			Floodchart: {
+				xtype: 'floodChart',
+				selector: 'flood-chart',
+				autoCreate: true,
+			},
+
+			chartData : {
+				selector: 'flood-chart-id',
+				autoCreate: true,
+			},
+
+			mapView: 'SimulationMap',
+		},
+
+		control: {
+			'#mapa': {
+				maprender: 'addListener'
+			},
+
+			'#closeChart': {
+				tap: 'closeFloodChart'
+			}
+		},
+	},
+
+	init: function(){
+		me = this;
+		app.Api.on({
+			gotIzid: function(izid){
+				app.Api.getCsvFile(me.getMapView().testId, izid);
+			},
+
+			gotCsv: function(result){
+				me.plot(result);
+			}
+		});
+	},
+
+	addListener: function(){
+		me = this;
+		this.getMapView().on({
+			gotClick: function(event){
+				app.Api.getIzid(event.latLng.lat(), event.latLng.lng())
+			}
+		});
+	},
+
+	plot: function(result){
+		array = result.split('\n');
+		store = Ext.getStore('chartStore');
+		columns = array[0];
+		volume = [];
+		time = [];
+		data = []
+
+		for (i = 1; i < array.length; i++)
+		{
+			line_clmns = array[i].split(',');
+			data.push({
+				time : time.push(parseInt(line_clmns[0]) + i * 100),
+				volume : volume.push(line_clmns[1])
+			});
+		}
+
+
+	 	console.log(data);
+	 	
+		this.openChart();
+	},
+
+	getFile: function(result){
+		app.Api.getCsvFile(result['izid']);
+	},
+
+	closeFloodChart: function(){
+		this.getFloodchart().hide();
+	},
+
+	getData: function(latLng){
+		app.Api.getIzid(latLng.lat(), latLng.lng())
+	},
+
+	openChart: function(){
+		this.getFloodchart().showBy(this.getMapView());
+	},
+});
\ No newline at end of file

www/app/controller/Lsm.js

+Ext.define('app.controller.Lsm', {
+    extend: 'Ext.app.Controller',
+    
+    config: {
+        refs: {
+            
+        },
+        control: {
+            
+        }
+    },
+    
+    //called when the Application is launched, remove if not needed
+    launch: function(app) {
+        
+    }
+});
\ No newline at end of file

www/app/controller/Main.js

@@ -111,20 +111,24 @@ Ext.define('app.controller.Main', {
         }
     },
 
-    initiateCities: function(){
+    init: function() {
+        this.selectedIndex = [];
+        /*default simulation type*/
+        this.SimulType = 'Flood';
+        this.test_id = null;
+    },
+
+    initiateCities: function() {
         this.getSimOptionsButton().show();
     },
+    
     /* first function to call */
-    setMap: function(extmap, map){
-        this.test_id = null;
+    setMap: function(extmap, map) {
         this.globalMap = map;
         this.getMapView().setGlobalMap(extmap, map);
-        this.selectedIndex = [];
-        /*default simulation type*/
-        this.SimulType = 'Flood';
     },
 
-    stopBackwImages: function(button){
+    stopBackwImages: function(button) {
         clearInterval(this.interval);
         button.hide();
         this.getPlayBackw().show();
@@ -194,11 +198,9 @@ Ext.define('app.controller.Main', {
      * of the simulation panel
      */
     simulate: function(list, index, element, record) {
-        console.log('simulate call');
         var me = this;
         /*first, remove all images, even if there werent any*/
         this.getMapView().removeImages();       
-        //console.log(this.getOverlay());
         /*create reference, cb looses scope of this.*/
         var map = this.getMapView(),
             /*The simulationDetailStore has the details of the get test_id*/
@@ -215,9 +217,11 @@ Ext.define('app.controller.Main', {
          */
         var cb = function(result){
             var timesteps = result['timesteps'] || result['images'];
-            console.log(timesteps);
-            if (timesteps.length > 0)
+            if (timesteps.length > 0){
                 map.createOverlayImage(bounds, test_id, timesteps, me.SimulType);
+                map.testId = result['test_id'];
+                map.areaId = result['area_id'];
+            }
         }
 
         var store = Ext.getStore('SimulationDetailsStore');
@@ -230,12 +234,10 @@ Ext.define('app.controller.Main', {
         /* The information of the simulation, has data of the time
          * steps available, crucial data for the displaying the images.
          */
-        //console.log(this.getSimulationOptions().getSelectedCls())
         var url = '';
         if (this.SimulType == 'Flood')
         {
             url = 'http://sangkil.science.uva.nl:8003/drfsm/'+ test_id +'/info.json';
-            console.log(this.SimulType);
         }
         else url = 'http://sangkil.science.uva.nl:8003/lsm/'+ test_id +'/visualization/paru/info.json';
         this.requestInfo(test_id, cb, url);
@@ -251,8 +253,6 @@ Ext.define('app.controller.Main', {
      */
     showList: function(list, index, element, record){
         this.getSimOptionsButton().hide();
-        //console.log(this.getSimulationOptions());
-        //this.getSimulationOptions().hide();
         /*Remove images, even if there werent any*/
         this.getMapView().removeImages();
         /*store center*/
@@ -272,15 +272,15 @@ Ext.define('app.controller.Main', {
         var store_lsm = Ext.getStore('LsmStore');
         store_lsm.clearFilter();
         store_lsm.filter("area_id", area_id);
-        /* clear filter, if the flters are not cleared, they will
-         * be filtered on top of each other, resuting in an unwanted
-         * state.
+
+        /* clear filter, if the filters are not cleared, they will
+         * be filtered on top of each other, resulting in an unwanted
+         * state of the store.
          */
         store.clearFilter();
         store.filter("area_id", area_id);
 
         /*push the side panel, in future create the view somewhere else*/
-        console.log(this.SimulType);
         if (this.SimulType == 'Flood')
         {
             this.setThumb(center);
@@ -290,7 +290,6 @@ Ext.define('app.controller.Main', {
             this.getSidepanel().push(this.getLsmSimulation());
         
         /*set thumb images*/
-        //this.setThumb(center);
         /*the store with details of the of the simulation*/
         var store = Ext.getStore('SimulationDetailsStore');
 
@@ -300,12 +299,12 @@ Ext.define('app.controller.Main', {
 
         if (selected == false)
         {
-            
-            this.selectedIndex.push(index);
             var dikes = null;
             var bounds = record.get('visbounds');
             var corners = record.get('corners');
 
+            /*Make sure this is not done again*/
+            this.selectedIndex.push(index);
             store.each(function(r) {
                 dikes = r.get('dikes');
             });

www/app/controller/MapHelper.js

+Ext.define('app.helper.Map', {
+	xtype: 'MapHelper',
+	
+	func: function(){
+		console.log(func);
+	}
+});
\ No newline at end of file

www/app/store/LsmStore.js

+Ext.define('app.store.LsmStore', {
+	extend: 'Ext.data.Store',
+	config: {
+		autoLoad: true,
+		fields: ['area_id', 'test_id', 'submitted'],
+		proxy: {
+			type: 'rest',
+			url: 'http://sangkil.science.uva.nl:8003/lsm/list.json',
+			reader: {
+				type: 'json',
+				rootProperty: 'simulations'
+			}
+		}
+	}
+
+});
\ No newline at end of file

www/app/store/SimulationDetailsStore.js

 Ext.define('app.store.SimulationDetailsStore', {
 	extend: 'Ext.data.Store',
-	requires: ['app.CustomProxy'],
+	requires: ['Ext.data.proxy.Rest'],
 	xtype: 'SimulationDetailsStore',
 
 	config: {

www/app/store/chartStore.js

+Ext.define('app.store.chartStore', {
+	extend: 'Ext.data.JsonStore',
+
+	config : {
+		fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
+    	data: [
+    		{'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
+    		{'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
+    		{'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
+    		{'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
+    		{'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}                                                
+		]
+	}
+});
\ No newline at end of file

www/app/view/Chart.js

@@ -9,23 +9,117 @@
 //     }]
 // });
 
-var chart = new Ext.chart.Chart({
-    width: 200,
-    height: 200,
-    animate: true,
-});
+// var store = new Ext.data.JsonStore({
+//         fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
+//         data: [
+//             {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
+//             {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
+//             {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
+//             {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
+//             {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}                                                
+//         ]
+// });
+
+// var chart = new Ext.chart.Chart({
+//     //animate: true,
+//     store: store,
+//     width: 500,
+//     height: 200,
+    
+//     axes: [
+//         {
+//             type: "Numeric",
+//             position: 'left',
+//             fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
+//             title: 'Numeric',
+//             minimum: 0,
+//         },
+//         {
+//             type: 'Category',
+//             position: 'bottom',
+//             fields: ['name'],
+//             title: 'Category',
+//             label: {
+//                 rotate: {
+//                     degrees: 35
+//                 }
+//             }
+//         }
+//     ],
+
+//     series: [{
+//         type: 'area',
+//         highlight: false,
+//         axis: 'left',
+//         xField: 'name',
+//         yField: ['data1', 'data2', 'data3', 'data4', 'data5'],
+//         style: {
+//             opacity: 0.93
+//         }
+//     }]
+// });
 
 Ext.define('app.view.Chart', {
-	extend: 'Ext.chart.Panel',
+	extend: 'Ext.Panel',
     id: 'flood-chart',
 	xtype: 'floodChart',
+    requires: ['Ext.data.Store'],
 
 	config: {
-        width: 100,
-        height: 100,
+        width: 520,
+        height: 220,
         draggable: true,
-		items: [chart]
-	}
+		items: [{
+            xtype: 'chart',
+            id: 'flood-chart-id',
+            store: 'chartStore',
+            width: 500,
+            height: 200,
+            axes: [
+                {
+                    type: "Numeric",
+                    position: 'left',
+                    fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
+                    title: 'Numeric',
+                    minimum: 0,
+                },
+                {
+                    type: 'Category',
+                    position: 'bottom',
+                    fields: ['name'],
+                    title: 'Category',
+                    label: {
+                        rotate: {
+                            degrees: 35
+                        }
+                    }
+                }
+            ],
+
+            series: [{
+                type: 'area',
+                highlight: false,
+                axis: 'left',
+                xField: 'name',
+                yField: ['data1', 'data2', 'data3', 'data4', 'data5'],
+                style: {
+                    opacity: 0.93
+                }
+            }]
+        },
+        {
+            xtype: 'button',
+            ui: 'circle ',
+            id: 'closeChart',
+            left: -15,
+            top: -15,
+            width: 30,
+            height: 30,
+            cls: 'closebutton',
+            style: 'background: url(resources/images/closebutton50.png) no-repeat; background-size: 30px; border: none',
+
+        }]
+    }
 });
 
 // (function(){

www/app/view/List.js

@@ -29,7 +29,7 @@ Ext.define("app.view.List",
 		
 		items: [
 		{
-				title: 'city\'s',
+				title: 'Locations',
 				id: 'cities',
 				xtype: 'list',
 				ui: 'round',

www/app/view/Map.js

@@ -22,7 +22,10 @@ Ext.define('app.view.Map', {
 				this.Images = [];
 				this.imageIndex = 0;
 				this.imageBounds = null;
-				this.play = false;		
+				this.play = false;
+				this.testId = 0;
+				this.areaId = 0;
+				this.listener_ref = null;
 			}
 		}
 	},
@@ -34,11 +37,6 @@ Ext.define('app.view.Map', {
 	setGlobalMap: function(extmap, map){
 		this.globalMap = map;
 		this.globalExtMap = extmap;
-
-		google.maps.event.addListener(map, 'click', function(){
-			console.log('click');
-		});
-		//this.globalMap.on('click', );
 	},
 	
 	setCenterMap: function(center){
@@ -75,7 +73,7 @@ Ext.define('app.view.Map', {
 	 * Bounds: array(4) 
 	*/
 	createOverlayImage: function(bounds, area_id, timesteps, simulationType) {
-		console.log(timesteps);
+		var me = this;
 		var url = '';
 		if (simulationType == 'Flood')
 		{
@@ -86,7 +84,6 @@ Ext.define('app.view.Map', {
 			url = 'http://sangkil.science.uva.nl:8003/lsm/' + area_id + '/visualization/paru/map/';
 		}
 		else return false;
-		console.log(url);
 		this.imageIndex = 0;
 		this.imageBounds = new google.maps.LatLngBounds(
 				new google.maps.LatLng(bounds[2],bounds[3]),
@@ -100,29 +97,41 @@ Ext.define('app.view.Map', {
 			//var image = 'http://sangkil.science.uva.nl:8003/drfsm/' + area_id + '/visualization/level/map/' + timesteps[i] + '.png';
 			var image = new Image();
 			image.src = url + timesteps[i] + '.png';
-			console.log(image.src);
 			this.overlayImages.push(new google.maps.GroundOverlay(image.src, this.imageBounds));
 		}
 
 		this.overlayImages[0].setMap(this.globalMap);
 		this.imageIndex = this.overlayImages.length;
+
+		/*remove clickevent and add to new image*/
+		if (this.listeners_ref != null)
+			google.maps.event.removeListener(listenerHandle);
+
+		this.listeners_ref = google.maps.event.addListener(this.overlayImages[0], 'click', function(event){
+			me.fireEvent('gotClick', event);
+		});
 	},
 
 	/* set next Image*/
 	nextImage: function()
 	{
+		var me = this;
 		if (this.overlayImages.length <= 1)
 			return;
 		var lastIndex = (this.overlayImages.length + this.imageIndex) % this.overlayImages.length;
 		this.imageIndex = (this.overlayImages.length + this.imageIndex + 1) % this.overlayImages.length;
 		//this.imageIndex = (this.overlayImages.length + this.imageIndex + 1) % (this.overlayImages.length);
-		console.log(this.imageIndex);
 		//this.overlayImages[this.imageIndex - 1].setMap(null);
 		this.overlayImages[this.imageIndex].setMap(this.globalMap);	
-		this.overlayImages[lastIndex].setMap(null);
-		//this.imageIndex = (this.imageIndex + 1) % (this.overlayImages.length);
-		console.log(this.imageIndex);
 
+		if (this.listeners_ref != null)
+			google.maps.event.removeListener(listenerHandle);
+
+		this.listeners_ref = google.maps.event.addListener(this.overlayImages[this.imageIndex], 'click', function(event){
+			me.fireEvent('gotClick', event);
+		});
+		this.overlayImages[lastIndex].setMap(null);
+		//this.imageIndex = (this.imageIndex + 1) % (this.overlayImages.length)
 	},
 
 	/*set prev image*/
@@ -169,7 +178,7 @@ Ext.define('app.view.Map', {
 	getCurrentImage: function(){
 		if (this.overlayImages.length > 0) {
 			this.overlayImages[this.imageIndex];
-			return this.overlayImages[this.imageIndex].url;
+			return this.overlayImages[this.imageIndex];
 		}	
 	},
 

www/resources/sass/app.scss

@@ -2,6 +2,8 @@
 @include pictos-iconmask('close_overlay');
 @include pictos-iconmask('play1');
 @include pictos-iconmask('pause');
+@include pictos-iconmask('closebutton50');
+@include pictos-iconmask('clsbtn50');
 @include pictos-iconmask('list');
 @include sencha-toolbar-ui('darker_blue', #003F69, 'glossy');
 @include sencha-toolbar-ui('lighter_blue', #00538F, 'glossy');