Broke up code into moduals and added some GeoJSON support.

Author: jayvarner

.gitignore

@@ -15,3 +15,5 @@
 /libpeerconnection.log
 npm-debug.log*
 testem.log
+.DS_Store
+.vscode/*

README.md

@@ -16,6 +16,24 @@ yarn installation
 ember g excel2geojson
 ```
 
+## Development
+
+### Clone this repo and install dependencies
+~~~bash
+git clone https://github.com/Atlanta-Explorer/ember-cli-excel2geojson.git
+cd ember-cli-excel2geojson
+yarn install # or npm install
+bower install # this may not be needed
+~~~
+
+### Run the dummy app
+~~~bash
+ember s
+~~~
+
+See the dummy app at [http://localhost:4200](http://localhost:4200)
+
+
 ### Usage
 When used as a block, a simple file input filed will be rendered. After an excel file is uploaded, it will appear in an [ember-light-table](http://offirgolan.github.io/ember-light-table/). Below the table will be a list of select fields for the control attributes.
 

addon/components/geojson-parse-data.js

@@ -0,0 +1,123 @@
+import { assert } from '@ember/debug';
+import Component from '@ember/component';
+import { get, set, setProperties } from '@ember/object';
+import { A } from '@ember/array';
+import layout from '../templates/components/geojson-parse-data';
+import $ from 'jquery';
+import GeojsonData from '../lib/geojson-data';
+import SpreadsheetData from '../lib/spreadsheet-data';
+
+const fileTypes = A(['xlsx', 'json', 'geojson']);
+const reader = new FileReader();
+
+export default Component.extend({
+  layout,
+  data: null,
+  table: null,
+  bounds: A([[33.7489954, -84.3879824]]),
+
+  getExtension(fileName) {
+    // TODO: Should we check mime type? https://stackoverflow.com/a/29672957/1792144
+    // It would be nice, but not a prioritory.
+    return fileName.name.split('.').pop();
+  },
+
+    // types: {label: 'Title'},
+    types: [{
+      label: 'Title',
+      disabled: false,
+      value: 'title'
+    },
+    {
+      label: 'Lat',
+      disabled: false,
+      value: 'lat'
+    },
+    {
+      label: 'Lng',
+      disabled: false,
+      value: 'lng'
+    },
+    {
+      label: 'Description',
+      disabled: false,
+      value: 'description'
+    },
+    {
+      label: 'Image(s)',
+      disabled: false,
+      value: 'images'
+    },
+    {
+      label: 'Image Credit',
+      disabled: false,
+      value: 'image-credit'
+    },
+    {
+      label: 'Video',
+      disabled: false,
+      value: 'video'
+    },
+    {
+      label: 'Audio',
+      disabled: false,
+      value: 'audio'
+    },
+    {
+        label: 'Filter',
+        disabled: false,
+        value: 'filters'
+    }
+  ],
+
+  didInsertElement() {
+    let dataInput = $('#datafile').first()[0];
+    dataInput.onchange = (event) => {
+      const file = event.target.files[0];
+      const extension = this.getExtension(file);
+      assert(`File must be ${fileTypes.join(', ')}`, fileTypes.includes(extension));
+      if (extension === 'xlsx') {
+        reader.onload = () => {
+          set(this, 'data', SpreadsheetData.init());
+        };
+        reader.readAsBinaryString(file);
+
+      } else {
+        reader.onload = () => {
+          set(this, 'data', GeojsonData.init());
+          set(this, 'table', get(this, 'data.table'));
+        };
+        reader.readAsText(file);
+      }
+    };
+  },
+
+  actions: {
+    layerAdded(feature) {
+      if (feature.layer._latlng) {
+        get(this, 'bounds').push([feature.layer._latlng.lat, feature.layer._latlng.lng]);
+      }
+      feature.layer._map.fitBounds(get(this, 'bounds'));
+    },
+
+    updateLocation(feature, event) {
+      let location = event.target.getLatLng();
+      setProperties(feature, {
+        lat: location.lat,
+        lng: location.lng
+      });
+    },
+
+    updateFeature(attribute, feature, event) {
+      set(feature, `${attribute}`, event);
+    },
+
+    mapAttribute(type, column) {
+      const data = get(this, 'sheetJson');
+      if (type === 'description') {
+          $(`<p>${data[0][column.target.value]}</p>`).appendTo('#preview-description');
+      }
+      get(this, 'attributeMap')[type] = column.target.value
+    }
+  }
+});

addon/components/parse-spreadsheet.js

@@ -1,53 +1,28 @@
-import Ember from 'ember';
+import { assert } from '@ember/debug';
+import { inject as service } from '@ember/service';
+import { oneWay } from '@ember/object/computed';
+import $ from 'jquery';
+import Component from '@ember/component';
+import { set, get } from '@ember/object';
+import { A } from '@ember/array';
 import Table from 'ember-light-table'
 import layout from '../templates/components/parse-spreadsheet';
-/* globals XLSX, L */
+import GeoJson from '../lib/geojson';
+import XLSX from 'xlsx';
 
-const {
-  Component,
-  computed,
-  get,
-  set,
-  inject: {
-        service
-    }
-} = Ember;
-
-const GeoJson = Ember.Object.extend({
-  type: "Feature",
-  geometry: {
-    type: "Point",
-    coordinates: [0, 1]
-  },
-  properties: {
-
-  }
-});
-
-export default Component.extend({
+const  GeojsonParseSpreadsheetComponent = Component.extend({
   store: service(),
   layout,
   model: null,
   type: 'file',
-  attributeBindings: ['type', 'value'],
-
-  getExtension(fileName) {
-    var dotIndex = fileName.lastIndexOf('.');
-    if (dotIndex >= 0) {
-      return fileName.substring(dotIndex + 1).toLowerCase();
-    }
-    return '';
-  },
-
-  lat: 33.7489954,
-  lng: -84.3879824,
-  zoom: 10,
+  attributeBindings: A(['type', 'value']),
 
-  isLoading: computed.oneWay('fetchRecords.isRunning'),
+  isLoading: oneWay('fetchRecords.isRunning'),
 
-  table: null,
+  init() {
+    this._super(...arguments);
+  },
 
-  tabelColumns: [],
   geoJsonFeatures: [],
 
   features: [],
@@ -62,37 +37,6 @@ export default Component.extend({
     filters: null
   },
 
-  onEachFeature(feature, layer) {
-    // TODO Add all attributes.
-    // Content for map preview popups. Does not show all attributes.
-    let popUpContent = `
-    <table>
-      <tr>
-        <td>
-          Title
-        </td>
-        <td>
-          ${feature.properties.title}
-        </td>
-      </tr>
-      <tr>
-        <td>
-          Description
-        </td>
-        <td>
-        ${feature.properties.description}
-        </td>
-      </tr>
-    </table>`;
-    layer.bindPopup(popUpContent);
-  },
-
-  pointToLayer(stankonia, latlng) {
-    return L.marker(latlng, {
-        draggable: true
-    });
-  },
-
   // types: {label: 'Title'},
   types: [{
       label: 'Title',
@@ -190,43 +134,41 @@ export default Component.extend({
       });
   },
 
-  loadSpreadsheet(file) { // Receive data through loading a spreadsheet.
+  loadSpreadsheet(file) {
     const extension = this.getExtension(file.name);
     const reader = new FileReader();
-    alert(extension)
 
-    if (extension == 'xlsx') {
+    // TODO: Should we accept `xls` files?
+    if (extension === 'xlsx') {
       reader.onload = (event) => {
         this.xlsx2json(event.target.result)
       };
       reader.readAsBinaryString(file);
     } else if (extension == 'csv') {
       reader.onload = (/*event*/) => {
-        //
+        // TODO: Do we need to support CSV?
       };
       reader.readAsText(file);
     }
+
+    assert('File must end in \'.xlsx\'', extension === 'xlsx');
   },
 
   didInsertElement() {
-    this._super(...arguments);
-    this.setupParseSpreadsheet();
-    let fileInput = this.$('#sheet')[0];
+    // this._super(...arguments);
+    // this.setupParseSpreadsheet();
+    // let fileInput = this.$('#sheet')[0];
 
-    fileInput.onchange = (event) => {
-      this.loadSpreadsheet(event.target.files[0]);
-    };
+    // fileInput.onchange = (event) => {
+    //   this.loadSpreadsheet(event.target.files[0]);
+    // };
   },
 
   willDestroyElement() {
     this._super(...arguments);
     this.teardownParseSpreadsheet();
   },
 
-  setupParseSpreadsheet() {
-      //
-  },
-
   teardownParseSpreadsheet() {
       this.destroy();
   },
@@ -239,9 +181,9 @@ export default Component.extend({
 
       data.forEach((d) => {
           let feature = {
-            type: "Feature",
+            type: 'Feature',
             geometry: {
-              type: "Point",
+              type: 'Point',
               coordinates: [d[attributeMap['lng']], d[attributeMap['lat']]]
             },
             properties: {
@@ -271,3 +213,5 @@ export default Component.extend({
     }
   }
 });
+
+export default GeojsonParseSpreadsheetComponent;

addon/components/table-cell-edit.js

@@ -0,0 +1,13 @@
+import Component from '@ember/component';
+import { set } from '@ember/object';
+import layout from '../templates/components/table-cell-edit';
+
+export default Component.extend({
+  layout,
+  tagName: ['input'],
+  attributeBindings: ['value'],
+
+  change(event) {
+    set(this, `row.${this.column.label}`, event.target.value);
+  }
+});

addon/lib/geo-data.js

@@ -0,0 +1,28 @@
+import { A } from '@ember/array';
+import { dasherize } from '@ember/string';
+import Table from 'ember-light-table';
+
+const GeoData = ({
+  setTableColumns(features) {
+    let tableColumn = A([]);
+    Object.keys(features[0]).forEach((col) => {
+      tableColumn.push({
+        label: col,
+        resizable: true,
+        valuePath: col,
+        sortable: false,
+        value: dasherize(col),
+        cellComponent: 'table-cell-edit'
+      })
+    });
+    return tableColumn;
+  },
+
+  setTable(features) {
+    return new Table(this.setTableColumns(features), features, {
+      enableSync: true
+    });
+  }
+});
+
+export default GeoData;