Mercurial > hg > NetworkVis

comparison d3s_examples/python-neo4jrestclient/static/platin/js/Dataloader/Dataloader.js @ 8:18ef6948d689

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
new d3s examples
author Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
date Thu, 01 Oct 2015 17:17:27 +0200
parents
children
comparison
equal deleted inserted replaced
7:45dad9e38c82 8:18ef6948d689
1 /*
2 * Dataloader.js
3 *
4 * Copyright (c) 2013, Sebastian Kruse. All rights reserved.
5 *
6 * This library is free software; you can redistribute it and/or
7 * modify it under the terms of the GNU Lesser General Public
8 * License as published by the Free Software Foundation; either
9 * version 3 of the License, or (at your option) any later version.
10 *
11 * This library is distributed in the hope that it will be useful,
12 * but WITHOUT ANY WARRANTY; without even the implied warranty of
13 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
14 * Lesser General Public License for more details.
15 *
16 * You should have received a copy of the GNU Lesser General Public
17 * License along with this library; if not, write to the Free Software
18 * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
19 * MA 02110-1301 USA
20 */
21
22 /**
23 * @class Dataloader
24 * Implementation for a Dataloader UI
25 * @author Sebastian Kruse (skruse@mpiwg-berlin.mpg.de)
26 *
27 * @param {HTML object} parent div to append the Dataloader
28 */
29 function Dataloader(parent) {
30
31 this.dataLoader = this;
32
33 this.parent = parent;
34 this.options = parent.options;
35
36 this.initialize();
37 }
38
39 Dataloader.prototype = {
40
41 show : function() {
42 this.dataloaderDiv.style.display = "block";
43 },
44
45 hide : function() {
46 this.dataloaderDiv.style.display = "none";
47 },
48
49 initialize : function() {
50
51 this.addStaticLoader();
52 this.addLocalStorageLoader();
53 this.addKMLLoader();
54 this.addKMZLoader();
55 this.addCSVLoader();
56 this.addLocalKMLLoader();
57 this.addLocalCSVLoader();
58 this.addLocalXLSXLoader();
59
60 // trigger change event on the select so
61 // that only the first loader div will be shown
62 $(this.parent.gui.loaderTypeSelect).change();
63 },
64
65 getFileName : function(url) {
66 var fileName = $.url(url).attr('file');
67 if ( (typeof fileName === "undefined") || (fileName.length === 0) ){
68 fileName = $.url(url).attr('path');
69 //startsWith and endsWith defined in SIMILE Ajax (string.js)
70 while (fileName.endsWith("/")){
71 fileName = fileName.substr(0,fileName.length-1);
72 }
73 if (fileName.length > 1)
74 fileName = fileName.substr(fileName.lastIndexOf("/")+1);
75 else
76 fileName = "unnamed dataset";
77 }
78 return fileName;
79 },
80
81 distributeDataset : function(dataSet) {
82 GeoTemConfig.addDataset(dataSet);
83 },
84
85 distributeDatasets : function(datasets) {
86 GeoTemConfig.addDatasets(datasets);
87 },
88
89 addStaticLoader : function() {
90 if (this.options.staticKML.length > 0){
91 $(this.parent.gui.loaderTypeSelect).append("<option value='StaticLoader'>Static Data</option>");
92
93 this.StaticLoaderTab = document.createElement("div");
94 $(this.StaticLoaderTab).attr("id","StaticLoader");
95
96 this.staticKMLList = document.createElement("select");
97 $(this.StaticLoaderTab).append(this.staticKMLList);
98
99 var staticKMLList = this.staticKMLList;
100 var isFirstHeader = true;
101 $(this.options.staticKML).each(function(){
102 var label = this.label;
103 var url = this.url;
104 var header = this.header;
105 if (typeof header !== "undefined"){
106 if (!isFirstHeader)
107 $(staticKMLList).append("</optgroup>");
108 $(staticKMLList).append("<optgroup label='"+header+"'>");
109 isFirstHeader = false;
110 } else
111 $(staticKMLList).append("<option value='"+url+"'> "+label+"</option>");
112 });
113 //close last optgroup (if there were any)
114 if (!isFirstHeader)
115 $(staticKMLList).append("</optgroup>");
116
117 this.loadStaticKMLButton = document.createElement("button");
118 $(this.loadStaticKMLButton).text("load");
119 $(this.StaticLoaderTab).append(this.loadStaticKMLButton);
120
121 $(this.loadStaticKMLButton).click($.proxy(function(){
122 var kmlURL = $(this.staticKMLList).find(":selected").attr("value");
123 if (kmlURL.length === 0)
124 return;
125 var origURL = kmlURL;
126 var fileName = this.getFileName(kmlURL);
127 if (typeof GeoTemConfig.proxy != 'undefined')
128 kmlURL = GeoTemConfig.proxy + kmlURL;
129 var kml = GeoTemConfig.getKml(kmlURL);
130 if ((typeof kml !== "undefined") && (kml != null)) {
131 var dataSet = new Dataset(GeoTemConfig.loadKml(kml), fileName, origURL);
132
133 if (dataSet != null)
134 this.distributeDataset(dataSet);
135 } else
136 alert("Could not load file.");
137 },this));
138
139 $(this.parent.gui.loaders).append(this.StaticLoaderTab);
140 }
141 },
142
143 addKMLLoader : function() {
144 $(this.parent.gui.loaderTypeSelect).append("<option value='KMLLoader'>KML File URL</option>");
145
146 this.KMLLoaderTab = document.createElement("div");
147 $(this.KMLLoaderTab).attr("id","KMLLoader");
148
149 this.kmlURL = document.createElement("input");
150 $(this.kmlURL).attr("type","text");
151 $(this.KMLLoaderTab).append(this.kmlURL);
152
153 this.loadKMLButton = document.createElement("button");
154 $(this.loadKMLButton).text("load KML");
155 $(this.KMLLoaderTab).append(this.loadKMLButton);
156
157 $(this.loadKMLButton).click($.proxy(function(){
158 var kmlURL = $(this.kmlURL).val();
159 if (kmlURL.length === 0)
160 return;
161 var origURL = kmlURL;
162 var fileName = this.getFileName(kmlURL);
163 if (typeof GeoTemConfig.proxy != 'undefined')
164 kmlURL = GeoTemConfig.proxy + kmlURL;
165 var kml = GeoTemConfig.getKml(kmlURL);
166 if ((typeof kml !== "undefined") && (kml != null)) {
167 var dataSet = new Dataset(GeoTemConfig.loadKml(kml), fileName, origURL);
168
169 if (dataSet != null)
170 this.distributeDataset(dataSet);
171 } else
172 alert("Could not load file.");
173 },this));
174
175 $(this.parent.gui.loaders).append(this.KMLLoaderTab);
176 },
177
178 addKMZLoader : function() {
179 $(this.parent.gui.loaderTypeSelect).append("<option value='KMZLoader'>KMZ File URL</option>");
180
181 this.KMZLoaderTab = document.createElement("div");
182 $(this.KMZLoaderTab).attr("id","KMZLoader");
183
184 this.kmzURL = document.createElement("input");
185 $(this.kmzURL).attr("type","text");
186 $(this.KMZLoaderTab).append(this.kmzURL);
187
188 this.loadKMZButton = document.createElement("button");
189 $(this.loadKMZButton).text("load KMZ");
190 $(this.KMZLoaderTab).append(this.loadKMZButton);
191
192 $(this.loadKMZButton).click($.proxy(function(){
193
194 var dataLoader = this;
195
196 var kmzURL = $(this.kmzURL).val();
197 if (kmzURL.length === 0)
198 return;
199 var origURL = kmzURL;
200 var fileName = dataLoader.getFileName(kmzURL);
201 if (typeof GeoTemConfig.proxy != 'undefined')
202 kmzURL = GeoTemConfig.proxy + kmzURL;
203
204 GeoTemConfig.getKmz(kmzURL, function(kmlArray){
205 $(kmlArray).each(function(){
206 var dataSet = new Dataset(GeoTemConfig.loadKml(this), fileName, origURL);
207
208 if (dataSet != null)
209 dataLoader.distributeDataset(dataSet);
210 });
211 });
212 },this));
213
214 $(this.parent.gui.loaders).append(this.KMZLoaderTab);
215 },
216
217 addCSVLoader : function() {
218 $(this.parent.gui.loaderTypeSelect).append("<option value='CSVLoader'>CSV File URL</option>");
219
220 this.CSVLoaderTab = document.createElement("div");
221 $(this.CSVLoaderTab).attr("id","CSVLoader");
222
223 this.csvURL = document.createElement("input");
224 $(this.csvURL).attr("type","text");
225 $(this.CSVLoaderTab).append(this.csvURL);
226
227 this.loadCSVButton = document.createElement("button");
228 $(this.loadCSVButton).text("load CSV");
229 $(this.CSVLoaderTab).append(this.loadCSVButton);
230
231 $(this.loadCSVButton).click($.proxy(function(){
232 var dataLoader = this;
233
234 var csvURL = $(this.csvURL).val();
235 if (csvURL.length === 0)
236 return;
237 var origURL = csvURL;
238 var fileName = dataLoader.getFileName(csvURL);
239 if (typeof GeoTemConfig.proxy != 'undefined')
240 csvURL = GeoTemConfig.proxy + csvURL;
241 GeoTemConfig.getCsv(csvURL, function(json){
242 if ((typeof json !== "undefined") && (json.length > 0)) {
243 var dataSet = new Dataset(GeoTemConfig.loadJson(json), fileName, origURL);
244
245 if (dataSet != null)
246 dataLoader.distributeDataset(dataSet);
247 } else
248 alert("Could not load file.");
249 });
250 },this));
251
252 $(this.parent.gui.loaders).append(this.CSVLoaderTab);
253 },
254
255 addLocalKMLLoader : function() {
256 $(this.parent.gui.loaderTypeSelect).append("<option value='LocalKMLLoader'>local KML File</option>");
257
258 this.localKMLLoaderTab = document.createElement("div");
259 $(this.localKMLLoaderTab).attr("id","LocalKMLLoader");
260
261 this.kmlFile = document.createElement("input");
262 $(this.kmlFile).attr("type","file");
263 $(this.localKMLLoaderTab).append(this.kmlFile);
264
265 this.loadLocalKMLButton = document.createElement("button");
266 $(this.loadLocalKMLButton).text("load KML");
267 $(this.localKMLLoaderTab).append(this.loadLocalKMLButton);
268
269 $(this.loadLocalKMLButton).click($.proxy(function(){
270 var filelist = $(this.kmlFile).get(0).files;
271 if (filelist.length > 0){
272 var file = filelist[0];
273 var fileName = file.name;
274 var reader = new FileReader();
275
276 reader.onloadend = ($.proxy(function(theFile) {
277 return function(e) {
278 var dataSet = new Dataset(GeoTemConfig.loadKml($.parseXML(reader.result)), fileName);
279 if (dataSet != null)
280 this.distributeDataset(dataSet);
281 };
282 }(file),this));
283
284 reader.readAsText(file);
285 }
286 },this));
287
288 $(this.parent.gui.loaders).append(this.localKMLLoaderTab);
289 },
290
291 addLocalCSVLoader : function() {
292 $(this.parent.gui.loaderTypeSelect).append("<option value='LocalCSVLoader'>local CSV File</option>");
293
294 this.localCSVLoaderTab = document.createElement("div");
295 $(this.localCSVLoaderTab).attr("id","LocalCSVLoader");
296
297 this.csvFile = document.createElement("input");
298 $(this.csvFile).attr("type","file");
299 $(this.localCSVLoaderTab).append(this.csvFile);
300
301 this.loadLocalCSVButton = document.createElement("button");
302 $(this.loadLocalCSVButton).text("load CSV");
303 $(this.localCSVLoaderTab).append(this.loadLocalCSVButton);
304
305 $(this.loadLocalCSVButton).click($.proxy(function(){
306 var filelist = $(this.csvFile).get(0).files;
307 if (filelist.length > 0){
308 var file = filelist[0];
309 var fileName = file.name;
310 var reader = new FileReader();
311
312 reader.onloadend = ($.proxy(function(theFile) {
313 return function(e) {
314 var json = GeoTemConfig.convertCsv(reader.result);
315 var dataSet = new Dataset(GeoTemConfig.loadJson(json), fileName);
316 if (dataSet != null)
317 this.distributeDataset(dataSet);
318 };
319 }(file),this));
320
321 reader.readAsText(file);
322 }
323 },this));
324
325 $(this.parent.gui.loaders).append(this.localCSVLoaderTab);
326 },
327
328 addLocalStorageLoader : function() {
329 var dataLoader = this;
330 this.localStorageLoaderTab = document.createElement("div");
331 $(this.localStorageLoaderTab).attr("id","LocalStorageLoader");
332
333 var localDatasets = document.createElement("select");
334 $(this.localStorageLoaderTab).append(localDatasets);
335
336 var localStorageDatasetCount = 0;
337 for(var key in localStorage){
338 //TODO: this is a somewhat bad idea, as it is used in multiple widgets.
339 //A global GeoTemCo option "prefix" could be better. But still..
340 if (key.startsWith("GeoBrowser_dataset_")){
341 localStorageDatasetCount++;
342 var label = key.substring("GeoBrowser_dataset_".length);
343 var url = key;
344 $(localDatasets).append("<option value='"+url+"'>"+decodeURIComponent(label)+"</option>");
345 }
346 }
347
348 //only show if there are datasets
349 if (localStorageDatasetCount > 0)
350 $(this.parent.gui.loaderTypeSelect).append("<option value='LocalStorageLoader'>browser storage</option>");
351
352 this.loadLocalStorageButton = document.createElement("button");
353 $(this.loadLocalStorageButton).text("load");
354 $(this.localStorageLoaderTab).append(this.loadLocalStorageButton);
355
356 $(this.loadLocalStorageButton).click($.proxy(function(){
357 var fileKey = $(localDatasets).find(":selected").attr("value");
358 if (fileKey.length === 0)
359 return;
360 var csv = $.remember({name:fileKey});
361 //TODO: this is a somewhat bad idea, as it is used in multiple widgets.
362 //A global GeoTemCo option "prefix" could be better. But still..
363 var fileName = decodeURIComponent(fileKey.substring("GeoBrowser_dataset_".length));
364 var json = GeoTemConfig.convertCsv(csv);
365 var dataSet = new Dataset(GeoTemConfig.loadJson(json), fileName, fileKey, "local");
366 if (dataSet != null)
367 dataLoader.distributeDataset(dataSet);
368 },this));
369
370 $(this.parent.gui.loaders).append(this.localStorageLoaderTab);
371 },
372
373 addLocalXLSXLoader : function() {
374 //taken from http://oss.sheetjs.com/js-xlsx/
375 var fixdata = function(data) {
376 var o = "", l = 0, w = 10240;
377 for(; l<data.byteLength/w; ++l) o+=String.fromCharCode.apply(null,new Uint8Array(data.slice(l*w,l*w+w)));
378 o+=String.fromCharCode.apply(null, new Uint8Array(data.slice(o.length)));
379 return o;
380 }
381
382 $(this.parent.gui.loaderTypeSelect).append("<option value='LocalXLSXLoader'>local XLS/XLSX File</option>");
383
384 this.LocalXLSXLoader = document.createElement("div");
385 $(this.LocalXLSXLoader).attr("id","LocalXLSXLoader");
386
387 this.xlsxFile = document.createElement("input");
388 $(this.xlsxFile).attr("type","file");
389 $(this.LocalXLSXLoader).append(this.xlsxFile);
390
391 this.loadLocalXLSXButton = document.createElement("button");
392 $(this.loadLocalXLSXButton).text("load XLS/XLSX");
393 $(this.LocalXLSXLoader).append(this.loadLocalXLSXButton);
394
395 $(this.loadLocalXLSXButton).click($.proxy(function(){
396 var filelist = $(this.xlsxFile).get(0).files;
397 if (filelist.length > 0){
398 var file = filelist[0];
399 var fileName = file.name;
400 var reader = new FileReader();
401
402 reader.onloadend = ($.proxy(function(theFile) {
403 return function(e) {
404 var workbook;
405 var json;
406 if (fileName.toLowerCase().indexOf("xlsx")!=-1){
407 workbook = XLSX.read(btoa(fixdata(reader.result)), {type: 'base64'});
408 var csv = XLSX.utils.sheet_to_csv(workbook.Sheets[workbook.SheetNames[0]]);
409 var json = GeoTemConfig.convertCsv(csv);
410 } else {
411 workbook = XLS.read(btoa(fixdata(reader.result)), {type: 'base64'});
412 var csv = XLS.utils.sheet_to_csv(workbook.Sheets[workbook.SheetNames[0]]);
413 var json = GeoTemConfig.convertCsv(csv);
414 }
415
416 var dataSet = new Dataset(GeoTemConfig.loadJson(json), fileName);
417 if (dataSet != null)
418 this.distributeDataset(dataSet);
419 };
420 }(file),this));
421
422 reader.readAsArrayBuffer(file);
423 }
424 },this));
425
426 $(this.parent.gui.loaders).append(this.LocalXLSXLoader);
427 },
428 };