Improve custom endpoint settings

Only one input for each enpoint. Custom endpoints now are saved and loaded from cookies. refers to #243
GIScience · Aug 13, 2018 · 18d2a77 · 18d2a77
1 parent 088e2fd
commit 18d2a77
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 72 deletions.
diff --git a/app/components/ors-header/ors-header.js b/app/components/ors-header/ors-header.js
@@ -5,30 +5,13 @@ angular.module('orsApp.ors-header', [])
             let ctrl = this
 
             ctrl.$onInit = () => {
-                /* initialize endpoint urls from app/js/config.js*/
-                ctrl.envBase = ENV.directions.split("/").slice(0, 3).join("/")
-                ctrl.env = {
-                    geocode: {
-                        base: ENV.geocode.split("/").slice(0, 3).join("/"),
-                        end: ENV.geocode.split("/").slice(3).join("/")
-                    },
-                    directions: {
-                        base: ENV.directions.split("/").slice(0, 3).join("/"),
-                        end: ENV.directions.split("/").slice(3).join("/")
-                    },
-                    isochrones: {
-                        base: ENV.isochrones.split("/").slice(0, 3).join("/"),
-                        end: ENV.isochrones.split("/").slice(3).join("/")
-                    },
-                    matrix: {
-                        base: ENV.matrix.split("/").slice(0, 3).join("/"),
-                        end: ENV.matrix.split("/").slice(3).join("/")
-                    },
-                    pois: {
-                        base: ENV.pois.split("/").slice(0, 3).join("/"),
-                        end: ENV.pois.split("/").slice(3).join("/")
-                    }
-                }
+                // uncomment for settings development
+                // ctrl.showSettings = ctrl.showDev = ctrl.editEndpoints =  true;
+
+                /* initialize endpoint urls from cookies */
+                ctrl.env = orsCookiesFactory.getCookies().env
+                ctrl.changeEndpoints()
+                ctrl.envBase = ctrl.env.directions.split("/").slice(0, 3).join("/")
                 ctrl.backup = JSON.parse(JSON.stringify(ctrl.env))
                 ctrl.extra_infos = {
                     steepness: true,
@@ -49,7 +32,9 @@ angular.module('orsApp.ors-header', [])
              */
             ctrl.resetEndpoints = () => {
                 ctrl.env = JSON.parse(JSON.stringify(ctrl.backup))
-                ctrl.envBase = ctrl.env.directions.base;
+                ctrl.envBase = ctrl.env.directions.split("/").slice(0, 3).join("/")
+                ctrl.currentOptions.env = ctrl.env
+                orsCookiesFactory.setCookieUserOptions(ctrl.currentOptions)
             }
 
             /**
@@ -59,36 +44,38 @@ angular.module('orsApp.ors-header', [])
             ctrl.setEndpoints = (fill) => {
                 console.log(fill)
                 if (fill === "local") {
-                    angular.forEach(ctrl.env, (endpoint, key) => {
-                        endpoint.base = ctrl.envBase = "http://localhost:8082/openrouteservice-4.5.1"
-                        endpoint.end = key
+                    console.log(ctrl.env)
+                    angular.forEach(Object.keys(ctrl.env), (key) => {
+                        ctrl.envBase = "http://localhost:8082/openrouteservice-4.5.1"
+                        ctrl.env[key] = ctrl.envBase + "/" + key
                     })
                 } else if (fill === "api") {
-                    angular.forEach(ctrl.env, (endpoint, key) => {
-                        endpoint.base = ctrl.envBase = "https://api.openrouteservice.org"
-                        endpoint.end = key
+                    angular.forEach(Object.keys(ctrl.env), (key) => {
+                        ctrl.envBase = "https://api.openrouteservice.org"
+                        ctrl.env[key] = ctrl.envBase + "/" + key
                     })
                 }
             }
             /**
              * Set baseURL for every endpoint with value from input field
-             * @param {String} value -
+             * @param {String} value - the baseURL
              */
             ctrl.setDefaultValues = (value) => {
-                angular.forEach(ctrl.env, (endpoint) => {
-                    console.log(endpoint)
-                    endpoint.base = value
+                angular.forEach(Object.keys(ctrl.env), (key) => {
+                    ctrl.env[key] = [value, ctrl.env[key].split("/").slice(3).join("/")].join("/")
                 })
             }
             /**
              * Change endpoints in the app/js/config.js file to take immediate effect
              */
             ctrl.changeEndpoints = () => {
-                ENV.directions = [ctrl.env.directions.base, ctrl.env.directions.end].join("/")
-                ENV.analyse = [ctrl.env.isochrones.base, ctrl.env.isochrones.end].join("/")
-                ENV.geocode = [ctrl.env.geocode.base, ctrl.env.geocode.end].join("/")
-                ENV.matrix = [ctrl.env.matrix.base, ctrl.env.matrix.end].join("/")
-                ENV.pois = [ctrl.env.pois.base, ctrl.env.pois.end].join("/")
+                ENV.directions = ctrl.env.directions
+                ENV.analyse = ctrl.env.isochrones
+                ENV.geocode = ctrl.env.geocode
+                ENV.matrix = ctrl.env.matrix
+                ENV.pois = ctrl.env.pois
+                ctrl.currentOptions.env = ctrl.env
+                orsCookiesFactory.setCookieUserOptions(ctrl.currentOptions)
             }
 
             /** subscription to settings, when permalink is used with lang params

diff --git a/app/includes/settings.html b/app/includes/settings.html
@@ -20,8 +20,8 @@ <h2 ng-bind-html="('UNITS' | translate)">
                 <div class="ui radio checkbox">
                     <input
                             name="orsUnits" ng-change="$ctrl.changeOptions('units')"
-                           ng-model="$ctrl.currentOptions.units"
-                           ng-value="$ctrl.optionList.units.mi" type="radio">
+                            ng-model="$ctrl.currentOptions.units"
+                            ng-value="$ctrl.optionList.units.mi" type="radio">
                     <label ng-bind-html="('MILES' | translate)">
                     </label>
                 </div>
@@ -34,7 +34,7 @@ <h2 ng-bind-html="('UNITS' | translate)">
         <h2 ng-bind-html="('LANGUAGE' | translate)">
         </h2>
         <label for="language"
-                ng-bind-html="('CHOOSELANG' | translate)">
+               ng-bind-html="('CHOOSELANG' | translate)">
         </label>
         <select id="language"
                 data-ng-model="$ctrl.currentOptions.language"
@@ -174,49 +174,40 @@ <h2 ng-bind-html="('DEVELOPER_SETTINGS' | translate)">
         <input data-ng-model="$ctrl.envBase"
                id="baseUrl"
                name="baseUrl" ng-change="$ctrl.changeOptions('baseUrl'); $ctrl.setDefaultValues($ctrl.envBase)"
-               ng-model-options="{debounce: 500}"/>
+               ng-model-options="{debounce: 500}"
+               style="width: 50%"/>
         <button ng-click="$ctrl.editEndpoints = !$ctrl.editEndpoints">Specify Endpoints</button>
         <br>
         <div ng-show="$ctrl.editEndpoints">
             <label ng-bind-html="'Geocode: '"></label>
-            <input data-ng-model="$ctrl.env.geocode.base"
-                   ng-model-options="{debounce: 500}"
-                   ng-change="$ctrl.changeOptions('geocode')"/>/
-            <input data-ng-model="$ctrl.env.geocode.end"
+            <input data-ng-model="$ctrl.env.geocode"
                    ng-model-options="{debounce: 500}"
-                   ng-change="$ctrl.changeOptions('geocode')"/>
+                   ng-change="$ctrl.changeOptions('geocode')"
+                   style="width: 70%"/>
             <br>
             <label ng-bind-html="'Directions: '"></label>
-            <input data-ng-model="$ctrl.env.directions.base"
-                   ng-model-options="{debounce: 500}"
-                   ng-change="$ctrl.changeOptions('directions')"/>/
-            <input data-ng-model="$ctrl.env.directions.end"
+            <input data-ng-model="$ctrl.env.directions"
                    ng-model-options="{debounce: 500}"
-                   ng-change="$ctrl.changeOptions('directions')"/>
+                   ng-change="$ctrl.changeOptions('directions')"
+                   style="width: 70%"/>
             <br>
             <label ng-bind-html="'Isochrones: '"></label>
-            <input data-ng-model="$ctrl.env.isochrones.base"
+            <input data-ng-model="$ctrl.env.isochrones"
                    ng-model-options="{debounce: 500}"
-                   ng-change="$ctrl.changeOptions('isochrones')"/>/
-            <input data-ng-model="$ctrl.env.isochrones.end"
-                   ng-model-options="{debounce: 500}"
-                   ng-change="$ctrl.changeOptions('isochrones')"/>
+                   ng-change="$ctrl.changeOptions('isochrones')"
+                   style="width: 70%"/>
             <br>
             <label ng-bind-html="'Matrix: '"></label>
-            <input data-ng-model="$ctrl.env.matrix.base"
-                   ng-model-options="{debounce: 500}"
-                   ng-change="$ctrl.changeOptions('matrix')"/>/
-            <input data-ng-model="$ctrl.env.matrix.end"
+            <input data-ng-model="$ctrl.env.matrix"
                    ng-model-options="{debounce: 500}"
-                   ng-change="$ctrl.changeOptions('matrix')"/>
+                   ng-change="$ctrl.changeOptions('matrix')"
+                   style="width: 70%"/>
             <br>
             <label ng-bind-html="'Pois: '"></label>
-            <input data-ng-model="$ctrl.env.pois.base"
-                   ng-model-options="{debounce: 500}"
-                   ng-change="$ctrl.changeOptions('pois')"/>/
-            <input data-ng-model="$ctrl.env.pois.end"
+            <input data-ng-model="$ctrl.env.pois"
                    ng-model-options="{debounce: 500}"
-                   ng-change="$ctrl.changeOptions('pois')"/>
+                   ng-change="$ctrl.changeOptions('pois')"
+                   style="width: 70%"/>
         </div>
         <br>
         <button ng-click="$ctrl.resetEndpoints()">Reset</button>

diff --git a/app/infrastructure/ors-cookies-service.js b/app/infrastructure/ors-cookies-service.js
@@ -1,8 +1,8 @@
 angular.module('orsApp.cookies-service', ['ngCookies'])
-    .factory('orsCookiesFactory', ['$cookies', '$window', '$translate', 'orsSettingsFactory', 'lists', ($cookies, $window, $translate, orsSettingsFactory, lists) => {
+    .factory('orsCookiesFactory', ['$cookies', '$window', '$translate', 'orsSettingsFactory', 'lists', 'ENV', ($cookies, $window, $translate, orsSettingsFactory, lists, ENV) => {
         let orsCookiesFactory = {};
         orsCookiesFactory.getCookies = () => {
-            let routinglang, language, units, showHeightgraph, randomIsoColor, distanceMarkers;
+            let routinglang, language, units, showHeightgraph, randomIsoColor, distanceMarkers, env;
             let cookieUserOptions = $cookies.getObject('userOptions') ? $cookies.getObject('userOptions') : {};
             console.warn(cookieUserOptions)
             if ('language' in cookieUserOptions) {
@@ -42,13 +42,25 @@ angular.module('orsApp.cookies-service', ['ngCookies'])
             } else {
                 distanceMarkers = lists.userOptions.distanceMarkers.default
             }
+            if ('env' in cookieUserOptions) {
+                env = cookieUserOptions.env
+            } else {
+                env = {
+                    geocode: ENV.geocode,
+                    directions: ENV.directions,
+                    isochrones: ENV.isochrones,
+                    matrix:ENV.matrix,
+                    pois: ENV.pois
+                }
+            }
             return {
                 language: language,
                 routinglang: routinglang,
                 units: units,
                 showHeightgraph: showHeightgraph,
                 randomIsoColor: randomIsoColor,
-                distanceMarkers: distanceMarkers
+                distanceMarkers: distanceMarkers,
+                env: env
             };
         };
         orsCookiesFactory.getLocale = () => {