Mercurial > hg > extraction-interface
diff geotemco/js/Dataloader/Dataloader.js @ 0:b12c99b7c3f0
commit for previous development
author | Zoe Hong <zhong@mpiwg-berlin.mpg.de> |
---|---|
date | Mon, 19 Jan 2015 17:13:49 +0100 |
parents | |
children |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/geotemco/js/Dataloader/Dataloader.js Mon Jan 19 17:13:49 2015 +0100 @@ -0,0 +1,371 @@ +/* +* Dataloader.js +* +* Copyright (c) 2013, Sebastian Kruse. All rights reserved. +* +* This library is free software; you can redistribute it and/or +* modify it under the terms of the GNU Lesser General Public +* License as published by the Free Software Foundation; either +* version 3 of the License, or (at your option) any later version. +* +* This library is distributed in the hope that it will be useful, +* but WITHOUT ANY WARRANTY; without even the implied warranty of +* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU +* Lesser General Public License for more details. +* +* You should have received a copy of the GNU Lesser General Public +* License along with this library; if not, write to the Free Software +* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, +* MA 02110-1301 USA +*/ + +/** + * @class Dataloader + * Implementation for a Dataloader UI + * @author Sebastian Kruse (skruse@mpiwg-berlin.mpg.de) + * + * @param {HTML object} parent div to append the Dataloader + */ +function Dataloader(parent) { + + this.dataLoader = this; + + this.parent = parent; + this.options = parent.options; + + this.initialize(); +} + +Dataloader.prototype = { + + show : function() { + this.dataloaderDiv.style.display = "block"; + }, + + hide : function() { + this.dataloaderDiv.style.display = "none"; + }, + + initialize : function() { + + this.addStaticLoader(); + this.addLocalStorageLoader(); + this.addKMLLoader(); + this.addKMZLoader(); + this.addCSVLoader(); + this.addLocalKMLLoader(); + this.addLocalCSVLoader(); + + // trigger change event on the select so + // that only the first loader div will be shown + $(this.parent.gui.loaderTypeSelect).change(); + }, + + getFileName : function(url) { + var fileName = $.url(url).attr('file'); + if ( (typeof fileName === "undefined") || (fileName.length === 0) ){ + fileName = $.url(url).attr('path'); + //startsWith and endsWith defined in SIMILE Ajax (string.js) + while (fileName.endsWith("/")){ + fileName = fileName.substr(0,fileName.length-1); + } + if (fileName.length > 1) + fileName = fileName.substr(fileName.lastIndexOf("/")+1); + else + fileName = "unnamed dataset"; + } + return fileName; + }, + + distributeDataset : function(dataSet) { + GeoTemConfig.addDataset(dataSet); + }, + + distributeDatasets : function(datasets) { + GeoTemConfig.addDatasets(datasets); + }, + + addStaticLoader : function() { + if (this.options.staticKML.length > 0){ + $(this.parent.gui.loaderTypeSelect).append("<option value='StaticLoader'>Static Data</option>"); + + this.StaticLoaderTab = document.createElement("div"); + $(this.StaticLoaderTab).attr("id","StaticLoader"); + + this.staticKMLList = document.createElement("select"); + $(this.StaticLoaderTab).append(this.staticKMLList); + + var staticKMLList = this.staticKMLList; + var isFirstHeader = true; + $(this.options.staticKML).each(function(){ + var label = this.label; + var url = this.url; + var header = this.header; + if (typeof header !== "undefined"){ + if (!isFirstHeader) + $(staticKMLList).append("</optgroup>"); + $(staticKMLList).append("<optgroup label='"+header+"'>"); + isFirstHeader = false; + } else + $(staticKMLList).append("<option value='"+url+"'> "+label+"</option>"); + }); + //close last optgroup (if there were any) + if (!isFirstHeader) + $(staticKMLList).append("</optgroup>"); + + this.loadStaticKMLButton = document.createElement("button"); + $(this.loadStaticKMLButton).text("load"); + $(this.StaticLoaderTab).append(this.loadStaticKMLButton); + + $(this.loadStaticKMLButton).click($.proxy(function(){ + var kmlURL = $(this.staticKMLList).find(":selected").attr("value"); + if (kmlURL.length === 0) + return; + var origURL = kmlURL; + var fileName = this.getFileName(kmlURL); + if (typeof GeoTemConfig.proxy != 'undefined') + kmlURL = GeoTemConfig.proxy + kmlURL; + var kml = GeoTemConfig.getKml(kmlURL); + if ((typeof kml !== "undefined") && (kml != null)) { + var dataSet = new Dataset(GeoTemConfig.loadKml(kml), fileName, origURL); + + if (dataSet != null) + this.distributeDataset(dataSet); + } else + alert("Could not load file."); + },this)); + + $(this.parent.gui.loaders).append(this.StaticLoaderTab); + } + }, + + addKMLLoader : function() { + $(this.parent.gui.loaderTypeSelect).append("<option value='KMLLoader'>KML File URL</option>"); + + this.KMLLoaderTab = document.createElement("div"); + $(this.KMLLoaderTab).attr("id","KMLLoader"); + + this.kmlURL = document.createElement("input"); + $(this.kmlURL).attr("type","text"); + $(this.KMLLoaderTab).append(this.kmlURL); + + this.loadKMLButton = document.createElement("button"); + $(this.loadKMLButton).text("load KML"); + $(this.KMLLoaderTab).append(this.loadKMLButton); + + $(this.loadKMLButton).click($.proxy(function(){ + var kmlURL = $(this.kmlURL).val(); + if (kmlURL.length === 0) + return; + var origURL = kmlURL; + var fileName = this.getFileName(kmlURL); + if (typeof GeoTemConfig.proxy != 'undefined') + kmlURL = GeoTemConfig.proxy + kmlURL; + var kml = GeoTemConfig.getKml(kmlURL); + if ((typeof kml !== "undefined") && (kml != null)) { + var dataSet = new Dataset(GeoTemConfig.loadKml(kml), fileName, origURL); + + if (dataSet != null) + this.distributeDataset(dataSet); + } else + alert("Could not load file."); + },this)); + + $(this.parent.gui.loaders).append(this.KMLLoaderTab); + }, + + addKMZLoader : function() { + $(this.parent.gui.loaderTypeSelect).append("<option value='KMZLoader'>KMZ File URL</option>"); + + this.KMZLoaderTab = document.createElement("div"); + $(this.KMZLoaderTab).attr("id","KMZLoader"); + + this.kmzURL = document.createElement("input"); + $(this.kmzURL).attr("type","text"); + $(this.KMZLoaderTab).append(this.kmzURL); + + this.loadKMZButton = document.createElement("button"); + $(this.loadKMZButton).text("load KMZ"); + $(this.KMZLoaderTab).append(this.loadKMZButton); + + $(this.loadKMZButton).click($.proxy(function(){ + + var dataLoader = this; + + var kmzURL = $(this.kmzURL).val(); + if (kmzURL.length === 0) + return; + var origURL = kmzURL; + var fileName = dataLoader.getFileName(kmzURL); + if (typeof GeoTemConfig.proxy != 'undefined') + kmzURL = GeoTemConfig.proxy + kmzURL; + + GeoTemConfig.getKmz(kmzURL, function(kmlArray){ + $(kmlArray).each(function(){ + var dataSet = new Dataset(GeoTemConfig.loadKml(this), fileName, origURL); + + if (dataSet != null) + dataLoader.distributeDataset(dataSet); + }); + }); + },this)); + + $(this.parent.gui.loaders).append(this.KMZLoaderTab); + }, + + addCSVLoader : function() { + $(this.parent.gui.loaderTypeSelect).append("<option value='CSVLoader'>CSV File URL</option>"); + + this.CSVLoaderTab = document.createElement("div"); + $(this.CSVLoaderTab).attr("id","CSVLoader"); + + this.csvURL = document.createElement("input"); + $(this.csvURL).attr("type","text"); + $(this.CSVLoaderTab).append(this.csvURL); + + this.loadCSVButton = document.createElement("button"); + $(this.loadCSVButton).text("load CSV"); + $(this.CSVLoaderTab).append(this.loadCSVButton); + + $(this.loadCSVButton).click($.proxy(function(){ + var dataLoader = this; + + var csvURL = $(this.csvURL).val(); + if (csvURL.length === 0) + return; + var origURL = csvURL; + var fileName = dataLoader.getFileName(csvURL); + if (typeof GeoTemConfig.proxy != 'undefined') + csvURL = GeoTemConfig.proxy + csvURL; + GeoTemConfig.getCsv(csvURL, function(json){ + if ((typeof json !== "undefined") && (json.length > 0)) { + var dataSet = new Dataset(GeoTemConfig.loadJson(json), fileName, origURL); + + if (dataSet != null) + dataLoader.distributeDataset(dataSet); + } else + alert("Could not load file."); + }); + },this)); + + $(this.parent.gui.loaders).append(this.CSVLoaderTab); + }, + + addLocalKMLLoader : function() { + $(this.parent.gui.loaderTypeSelect).append("<option value='LocalKMLLoader'>local KML File</option>"); + + this.localKMLLoaderTab = document.createElement("div"); + $(this.localKMLLoaderTab).attr("id","LocalKMLLoader"); + + this.kmlFile = document.createElement("input"); + $(this.kmlFile).attr("type","file"); + $(this.localKMLLoaderTab).append(this.kmlFile); + + this.loadLocalKMLButton = document.createElement("button"); + $(this.loadLocalKMLButton).text("load KML"); + $(this.localKMLLoaderTab).append(this.loadLocalKMLButton); + + $(this.loadLocalKMLButton).click($.proxy(function(){ + var filelist = $(this.kmlFile).get(0).files; + if (filelist.length > 0){ + var file = filelist[0]; + var fileName = file.name; + var reader = new FileReader(); + + reader.onloadend = ($.proxy(function(theFile) { + return function(e) { + var dataSet = new Dataset(GeoTemConfig.loadKml($.parseXML(reader.result)), fileName); + if (dataSet != null) + this.distributeDataset(dataSet); + }; + }(file),this)); + + reader.readAsText(file); + } + },this)); + + $(this.parent.gui.loaders).append(this.localKMLLoaderTab); + }, + + addLocalCSVLoader : function() { + $(this.parent.gui.loaderTypeSelect).append("<option value='LocalCSVLoader'>local CSV File</option>"); + + this.localCSVLoaderTab = document.createElement("div"); + $(this.localCSVLoaderTab).attr("id","LocalCSVLoader"); + + this.csvFile = document.createElement("input"); + $(this.csvFile).attr("type","file"); + $(this.localCSVLoaderTab).append(this.csvFile); + + this.loadLocalCSVButton = document.createElement("button"); + $(this.loadLocalCSVButton).text("load CSV"); + $(this.localCSVLoaderTab).append(this.loadLocalCSVButton); + + $(this.loadLocalCSVButton).click($.proxy(function(){ + var filelist = $(this.csvFile).get(0).files; + if (filelist.length > 0){ + var file = filelist[0]; + var fileName = file.name; + var reader = new FileReader(); + + reader.onloadend = ($.proxy(function(theFile) { + return function(e) { + var json = GeoTemConfig.convertCsv(reader.result); + var dataSet = new Dataset(GeoTemConfig.loadJson(json), fileName); + if (dataSet != null) + this.distributeDataset(dataSet); + }; + }(file),this)); + + reader.readAsText(file); + } + },this)); + + $(this.parent.gui.loaders).append(this.localCSVLoaderTab); + }, + + addLocalStorageLoader : function() { + var dataLoader = this; + this.localStorageLoaderTab = document.createElement("div"); + $(this.localStorageLoaderTab).attr("id","LocalStorageLoader"); + + var localDatasets = document.createElement("select"); + $(this.localStorageLoaderTab).append(localDatasets); + + var localStorageDatasetCount = 0; + for(var key in localStorage){ + //TODO: this is a somewhat bad idea, as it is used in multiple widgets. + //A global GeoTemCo option "prefix" could be better. But still.. + if (key.startsWith("GeoBrowser_dataset_")){ + localStorageDatasetCount++; + var label = key.substring("GeoBrowser_dataset_".length); + var url = key; + $(localDatasets).append("<option value='"+url+"'>"+decodeURIComponent(label)+"</option>"); + } + } + + //only show if there are datasets + if (localStorageDatasetCount > 0) + $(this.parent.gui.loaderTypeSelect).append("<option value='LocalStorageLoader'>browser storage</option>"); + + this.loadLocalStorageButton = document.createElement("button"); + $(this.loadLocalStorageButton).text("load"); + $(this.localStorageLoaderTab).append(this.loadLocalStorageButton); + + $(this.loadLocalStorageButton).click($.proxy(function(){ + var fileKey = $(localDatasets).find(":selected").attr("value"); + if (fileKey.length === 0) + return; + var csv = $.remember({name:fileKey}); + //TODO: this is a somewhat bad idea, as it is used in multiple widgets. + //A global GeoTemCo option "prefix" could be better. But still.. + var fileName = decodeURIComponent(fileKey.substring("GeoBrowser_dataset_".length)); + var json = GeoTemConfig.convertCsv(csv); + var dataSet = new Dataset(GeoTemConfig.loadJson(json), fileName, fileKey, "local"); + if (dataSet != null) + dataLoader.distributeDataset(dataSet); + },this)); + + $(this.parent.gui.loaders).append(this.localStorageLoaderTab); + } +};