first commit

.gitignore

@@ -0,0 +1,7 @@
+.DS_Store
+node_modules/
+dist/
+npm-debug.log
+yarn-error.log
+_bin/
+package-lock.json

.npmignore

@@ -0,0 +1,6 @@
+.DS_Store
+node_modules/
+npm-debug.log
+yarn-error.log
+src/config.js
+src/util/streetsmart.js

README.md

@@ -0,0 +1,3 @@
+# phila-vue-datafetch
+
+phila-vue-datafetch is the infrastructure needed for fetching data for a vue app

package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@cityofphiladelphia/phila-vue-mapping",
+  "description": "A Vue.js component for data-rich web mapping",
+  "version": "0.0.5",
+  "author": "City of Philadelphia <[email protected]>",
+  "scripts": {
+    "build": "rollup -c rollup.config.js",
+    "dev": "yarn build -w"
+  },
+  "main": "./dist/phila-vue-mapping.js",
+  "dependencies": {
+    "@turf/turf": "^5.1.6",
+    "axios": "^0.18.0",
+    "blueimp-md5": "^2.10.0",
+    "esri-leaflet": "2.1.4",
+    "jquery": "^3.2.1",
+    "jquery-ui": "^1.12.1",
+    "leaflet": "^1.3.1",
+    "leaflet-easybutton": "^2.2.2",
+    "leaflet-measure": "https://github.com/CityOfPhiladelphia/leaflet-measure#b70886af342f19597dc2937d79d64bad6bab07c6",
+    "leaflet-rotatedmarker": "^0.2.0",
+    "leaflet-vector-icon": "https://github.com/CityOfPhiladelphia/leaflet-vector-icon#8419d4025be2c3acc26a1e66b6a1a1e95c340142",
+    "lodash.debounce": "^4.0.8",
+    "moment": "^2.21.0",
+    "proj4": "^2.4.4",
+    "vue": "^2.5.16",
+    "vuex": "^3.0.1"
+  },
+  "devDependencies": {
+    "rollup": "^0.57.1",
+    "rollup-analyzer-plugin": "^1.1.1",
+    "rollup-plugin-buble": "^0.19.2",
+    "rollup-plugin-commonjs": "^9.1.0",
+    "rollup-plugin-node-builtins": "^2.1.2",
+    "rollup-plugin-node-globals": "^1.2.0",
+    "rollup-plugin-node-resolve": "^3.3.0",
+    "rollup-plugin-replace": "^2.0.0",
+    "rollup-plugin-uglify": "^3.0.0",
+    "rollup-plugin-vue": "^3.0.0",
+    "vue-template-compiler": "^2.5.13"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

rollup.config.js

@@ -0,0 +1,89 @@
+import resolve from 'rollup-plugin-node-resolve';
+import vue from 'rollup-plugin-vue';
+import buble from 'rollup-plugin-buble';
+import commonjs from 'rollup-plugin-commonjs';
+import uglify from 'rollup-plugin-uglify';
+import analyzer from 'rollup-analyzer-plugin';
+import builtins from 'rollup-plugin-node-builtins';
+import globals from 'rollup-plugin-node-globals';
+import replace from 'rollup-plugin-replace';
+
+// check if we're in development mode (i.e. rollup is running with watch)
+const dev = !!process.env.ROLLUP_WATCH || process.env.NODE_ENV === 'development';
+
+// get module names of dependencies (we want to treat these as externals so
+// they don't get bundled)
+import fs from 'fs';
+import path from 'path';
+const pkg = JSON.parse(fs.readFileSync(path.resolve('./package.json'), 'utf-8'));
+const external = Object.keys(pkg.dependencies || {});
+
+// don't bundle this css either
+external.push('leaflet-measure/dist/leaflet-measure.css');
+external.push('leaflet-vector-icon/dist/leaflet-vector-icon.css');
+
+export default {
+  input: 'src/main.js',
+  output: {
+    file: 'dist/phila-vue-mapping.js',
+    format: 'umd',
+    name: 'philaVueMapping',
+    // silence warning about multiple exports
+    exports: 'named',
+    // map imports to global names for using vue-leaflet-esri in the browser
+    globals: {
+      leaflet: 'L',
+      'esri-leaflet': 'L.esri',
+      moment: 'moment',
+      'leaflet-measure': 'L.Control.Measure',
+      'leaflet-vector-icon': 'leafletVectorIcon',
+      jquery: '$',
+      axios: 'axios',
+      vue: 'Vue',
+      vuex: 'Vuex',
+      proj4: 'proj4',
+      'blueimp-md5': 'md5',
+      '@turf/helpers': 'turf',
+      '@turf/distance': 'turf.distance',
+      '@turf/area': 'turf.area',
+    },
+    sourcemap: true,
+  },
+  // don't bundle vendor deps
+  external,
+  plugins: [
+    // allow implicit imports from index.js files
+    resolve({
+      // silence warning about preferring built-in modules over local ones
+      preferBuiltins: true,
+      // use browser versions of dependecy packages where available
+      // browser: true,
+      jsnext: true,
+    }),
+    // for bundling node built-in modules (we use `url`)
+    builtins(),
+    // the builtins have some references to `global` so handle those
+    globals(),
+    // transform .vue components
+    vue({
+      css: true,
+    }),
+    // downgrade es6
+    buble({
+      transforms: {
+        dangerousForOf: true,
+      },
+    }),
+    // handle commonjs modules, e.g. leaflet
+    // REVIEW is this needed?
+    commonjs(),
+    // minify if production
+    // !dev && uglify(),
+    // analyze if dev
+    dev && analyzer(),
+
+    // replace({
+    //   'process.env.NODE_ENV': JSON.stringify( 'development' )
+    // })
+  ],
+};

src/controller/clients/base-client.js

@@ -0,0 +1,90 @@
+class BaseClient {
+  constructor(opts) {
+    this.config = opts.config;
+    this.store = opts.store;
+    this.dataManager = opts.dataManager;
+  }
+
+  evaluateParams(feature, dataSource) {
+    const params = {};
+    const paramEntries = Object.entries(dataSource.options.params);
+    const state = this.store.state;
+
+    for (let [key, valOrGetter] of paramEntries) {
+      let val;
+
+      if (typeof valOrGetter === 'function') {
+        val = valOrGetter(feature, state);
+      } else {
+        val = valOrGetter;
+      }
+
+      params[key] = val;
+    }
+
+    return params;
+  }
+
+  assignFeatureIds(features, dataSourceKey, topicId) {
+    const featuresWithIds = [];
+
+    // REVIEW this was not working with Array.map for some reason
+    // it was returning an object when fetchJson was used
+    // that is now converted to an array in fetchJson
+    for (let i = 0; i < features.length; i++) {
+      const suffix = (topicId ? topicId + '-' : '') + i;
+      const id = `feat-${dataSourceKey}-${suffix}`;
+      const feature = features[i];
+      // console.log(dataSourceKey, feature);
+      try {
+        feature._featureId = id;
+      }
+      catch (e) {
+        console.warn(e);
+      }
+      featuresWithIds.push(feature);
+    }
+
+    // console.log(dataSourceKey, features, featuresWithIds);
+    return featuresWithIds;
+  }
+
+  didFetch(key, status, data, targetId) {
+    // console.log('DID FETCH DATA:', key, targetId || '', data);
+
+    const dataOrNull = status === 'error' ? null : data;
+    let stateData = dataOrNull;
+
+    // if this is an array, assign feature ids
+    if (Array.isArray(stateData)) {
+      stateData = this.assignFeatureIds(stateData, key, targetId);
+    }
+
+    // does this data source have targets?
+    // const targets = this.config.dataSources[key].targets;
+
+    // put data in state
+    const setSourceDataOpts = {
+      key,
+      data: stateData,
+    };
+    const setSourceStatusOpts = {
+      key,
+      status
+    };
+    if (targetId) {
+      setSourceDataOpts.targetId = targetId;
+      setSourceStatusOpts.targetId = targetId;
+    }
+
+    // commit
+    this.store.commit('setSourceData', setSourceDataOpts);
+    this.store.commit('setSourceStatus', setSourceStatusOpts);
+
+    // try fetching more data
+    console.log('171111 base-client js is calling fetchData()')
+    this.fetchData();
+  }
+}
+
+export default BaseClient;