Refactor some parts of the code to make the app customizable

src/style/scene-panel.scss

@@ -37,7 +37,3 @@
 .esri-popup__pointer-direction.esri-popup--shadow {
   background: rgb(249, 163, 82);
 }
-
-.esri-popup--feature-updated .esri-popup__header-title, .esri-popup--feature-updated .esri-popup__content{
-  animation: none;
-}

src/style/variables.scss

@@ -1,6 +1,6 @@
 
 $red: #db5353;
-$green: #b5e2c1/*#00827F*/;
+$green: #b5e2c1;
 $orange: #f9a352;
 $disabled-gray: #bbb;
 $delimiter: rgba(100,100,100, 0.75);

src/ts/State.ts

@@ -1,6 +1,6 @@
 import Accessor = require("esri/core/Accessor");
 import SceneView = require("esri/views/SceneView");
-import { Filters, Device, Trail } from "./types";
+import { Device, Trail } from "./types";
 import { subclass, declared, property } from "esri/core/accessorSupport/decorators";
 
 @subclass()
@@ -32,12 +32,7 @@ export default class State extends declared(Accessor) {
   }
 
   @property()
-  filters: Filters = {
-    walktime: null,
-    ascent: null,
-    category: null,
-    difficulty: null
-  };
+  filters = {};
 
   setFilter(property: string, value: string | Array<number>): void {
 

src/ts/config.ts

@@ -1,7 +1,26 @@
+/* This app can be configured by changing the variables
+in this file.
+
+Webscene:
+ - copy the webscene that I use: http://www.arcgis.com/home/item.html?id=d0580bb5df3840d384bda44b6ddeb54e
+ - remove/add layers with additional data in the Layers group
+ - remove/add basemap layers in the Basemap group
+
+Data:
+ - replace the trails service url
+ - replace the attribute names to the ones in your service
+ - remove attributes if they don't make sense for your data
+ - filterOptions are the attributes that will be used for filtering
+    they can be removed in case they are not useful
+
+Colors:
+ - change the colors for visualizing the trails
+ - for CSS colors check also the variables.scss file
+*/
+
 export default {
   scene: {
-    websceneItemId: "d0580bb5df3840d384bda44b6ddeb54e" // global scene
-    // websceneItemId: "7abaad52a4254f30ab1897079cad504a" // local scene
+    websceneItemId: "d0580bb5df3840d384bda44b6ddeb54e"
   },
   data: {
     trailsServiceUrl: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/SwissNationalParkTrails/FeatureServer/0",

src/ts/scene/SceneElement.ts

@@ -69,12 +69,12 @@ export default class SceneElement {
 
       // remove filters
       if (trailIds.length === 0) {
-        this.trailsLayer.definitionExpression = null;
+        this.trailsLayer.definitionExpression = "1=0";
       }
       // set definitionExpression to display only filtered buildings
       else {
         const query = trailIds.map(function(id) {
-          return "RouteId = " + id;
+          return `${config.data.trailAttributes.id} = ${id}`;
         });
         this.trailsLayer.definitionExpression = query.join(" OR ");
       }
@@ -143,7 +143,7 @@ export default class SceneElement {
             else {
               this.removeLoadingIcon();
               if (result.graphic.layer.title === "Hiking trails") {
-                this.state.setSelectedTrailId(result.graphic.attributes.RouteId);
+                this.state.setSelectedTrailId(result.graphic.attributes[config.data.trailAttributes.id]);
               }
             }
           }
@@ -156,7 +156,7 @@ export default class SceneElement {
             query.spatialRelationship = "intersects";
             this.trailsLayer.queryFeatures(query).then((results) => {
               if (results.features.length > 0) {
-                this.state.setSelectedTrailId(results.features[0].attributes.RouteId);
+                this.state.setSelectedTrailId(results.features[0].attributes[config.data.trailAttributes.id]);
               } else {
                 this.state.setSelectedTrailId(null);
               }

src/ts/types.d.ts

@@ -11,7 +11,7 @@ export interface State extends Accessor {
   setSelectedTrailId: (id: number) => void;
   filteredTrailIds: Array<number>;
   setFilteredTrailIds: (ids: Array<number>) => void;
-  filters: Filters;
+  filters: any;
   setFilter: (property: string, value: string | number[]) => void;
   visiblePanel: "selectionPanel" | "detailPanel" | "basemapPanel";
   device: Device;
@@ -37,10 +37,3 @@ export interface Trail {
   setZValues: (view: SceneView) => IPromise;
   createFlickrLayer: () => IPromise;
 }
-
-export interface Filters {
-  walktime: Array<number>;
-  ascent: Array<number>;
-  category: string;
-  difficulty: string;
-}

src/ts/ui/DetailPanel.ts

@@ -105,10 +105,10 @@ export default class SelectionPanel {
     }];
 
     this.detailInfograph.innerHTML = `
-      <span class="infograph"><span class="fa fa-line-chart" aria-hidden="true"></span> ${trail.ascent} m</span>
-      <span class="infograph"><span class="fa fa-wrench" aria-hidden="true"></span> ${trail.difficulty}</span>
-      <span class="infograph"><span class="fa fa-clock-o" aria-hidden="true"></span> ${trail.walktime} hr</span>
-      <span class="infograph"><span class="${status[trail.status].icon}" aria-hidden="true"></span> ${status[trail.status].text}</span>
+      ${trail.ascent ? `<span class="infograph"><span class="fa fa-line-chart" aria-hidden="true"></span> ${trail.ascent} m</span>` : ""}
+      ${trail.difficulty ? `<span class="infograph"><span class="fa fa-wrench" aria-hidden="true"></span> ${trail.difficulty}</span>` : ""}
+      ${trail.walktime ? `<span class="infograph"><span class="fa fa-clock-o" aria-hidden="true"></span> ${trail.walktime} hr</span>` : ""}
+      ${trail.status ? `<span class="infograph"><span class="${status[trail.status].icon}" aria-hidden="true"></span> ${status[trail.status].text}</span>` : ""}
     `;
 
   }

src/ts/ui/SelectionPanel.ts

@@ -5,7 +5,7 @@ import config from "../config";
 import noUiSlider = require("noUiSlider");
 import "../../style/selection-panel.scss";
 import "../../style/nouislider.scss";
-import { State, Trail, Filters } from "../types";
+import { State, Trail } from "../types";
 
 export default class SelectionPanel {
 
@@ -45,7 +45,7 @@ export default class SelectionPanel {
       }
     });
 
-    state.watch("filters", (filters: Filters) => {
+    state.watch("filters", (filters: any) => {
 
       const filteredTrailIds = this.getFilteredTrails(filters)
                                 .map((trail) => trail.id);
@@ -58,7 +58,7 @@ export default class SelectionPanel {
 
   }
 
-  private getFilteredTrails(filters: Filters): Array<Trail> {
+  private getFilteredTrails(filters: any): Array<Trail> {
     const filteredTrails = this.trails.filter((trail) => {
 
       // we assume the trail will not be filtered out
@@ -74,7 +74,7 @@ export default class SelectionPanel {
         }
         else {
           if (filters[filter] !== "All") {
-            if (trail[filter] !== filters[filter]) {
+            if (trail[filter].toString() !== filters[filter]) {
               keepTrail = false;
               break;
             }