Added UI to support editing polylines

css/quartermaester.css

@@ -220,7 +220,7 @@ html, body, ui-gmap-google-map, .angular-google-map, .angular-google-map-contain
   display: inline-block;
 }
 
-#about {
+#about, #edit {
   height: 500px;
   padding-right: 5px;
   overflow-y: scroll;
@@ -246,3 +246,14 @@ html, body, ui-gmap-google-map, .angular-google-map, .angular-google-map-contain
   list-style-type: circle;
   list-style-position: inside;
 }
+
+#edit table {
+  background-color: white;
+  color: black;
+  border-collapse: collapse;
+}
+
+#edit td {
+  border: 1px solid black;
+  padding: 2px;
+}

index.html

@@ -71,12 +71,25 @@
     </ui-gmap-markers>
 
     <!-- Character Paths -->
+    <!-- The values of the attributes seem to be ignored.  All that matters is if they are defined or not -->
     <ui-gmap-polylines
+      ng-if="state!='edit'"
       models='mapModels.paths'
-      path="'path'"
-      stroke="'stroke'"
-      static="'static'"
-      icons="'icons'"
+      path="''"
+      stroke="''"
+      static="''"
+      editable="''"
+      icons="''"
+      idkey="'key'">
+    </ui-gmap-polylines>
+    <ui-gmap-polylines
+      ng-if="state=='edit'"
+      models='mapModels.editablePaths'
+      path="''"
+      stroke="''"
+      static="''"
+      editable="''"
+      icons="''"
       idkey="'key'">
     </ui-gmap-polylines>
 
@@ -99,10 +112,13 @@
       <button class="list-group-item btn-clear" ng-click="toState('about')" ng-class="{highlight:(state=='about')}">
         <i class="glyphicon glyphicon-question-sign"></i>
       </button>
+      <!-- <button class="list-group-item btn-clear" ng-click="toState('edit')" ng-class="{highlight:(state=='edit')}">
+        <i class="glyphicon glyphicon-pencil"></i>
+      </button> -->
     </div>
   </div>
 
-  <div id="side" ng-class="{wider:(state=='about')}">
+  <div id="side" ng-class="{wider:(state=='about'||state=='edit')}">
     <!-- <p>{{state}}</p> -->
     <div id="slider" ng-show="state.substring(0,6)=='slider'">
       <h1 ng-show="state=='slider-full'">
@@ -324,6 +340,25 @@
       </ul>
     </div>
 
+    <div id="edit" ng-show="state=='edit'">
+      <h1>
+        Editor
+        <i class="glyphicon glyphicon-remove pull-right" ng-click="toState('slider')"></i>
+      </h1>
+
+      <table>
+        <tbody ng-repeat="path in mapModels.editablePaths">
+          <tr ng-repeat="point in path.path">
+            <td>{{path.key}}</td>
+            <td>{{point.location}}</td>
+            <td>{{point.latitude  | number:4}}</td>
+            <td>{{point.longitude | number:4}}</td>
+          </tr>
+        </tbody>
+      </table>
+
+    </div>
+
   </div>
 
 </body>

js/controller.js

@@ -55,6 +55,7 @@ angular.module('quartermaester')
     $scope.resultClick = resultClick;
     $scope.refreshMap = refreshMap;
     $scope.locationDetail = null;
+    $scope.lastClick = null;
 
     // Set up promises
     uiGmapGoogleMapApi.then(onMapLoad);
@@ -89,8 +90,14 @@ angular.module('quartermaester')
       $scope.mapModels.towns = $filter('qmSlider')(qmData.towns, $scope.slider);
       $scope.mapModels.heraldry = $scope.options.houseHeraldry ? $filter('qmSlider')(qmData.heraldry, $scope.slider) : [];
       $scope.mapModels.characters = $filter('qmSlider')(qmData.characterMarkers, $scope.slider, $scope.options);
-      $scope.mapModels.paths = $filter('qmSlider')(qmData.characterPaths, $scope.slider, $scope.options);
-      //console.log("mapModels.paths", $scope.mapModels.paths);
+      var staticPaths = $filter('qmSlider')(qmData.characterPaths, $scope.slider, $scope.options);
+      $scope.mapModels.paths = angular.copy(staticPaths);
+      $scope.mapModels.editablePaths = angular.copy(staticPaths).map(function(path) {
+        path.static   = false;
+        path.editable = true;
+        return path;
+      });
+      // console.log("mapModels.paths", foo, $scope.mapModels.paths);
     }
 
     function panToCharacter(newValue, oldValue) {
@@ -111,6 +118,7 @@ angular.module('quartermaester')
       if (stateName=="search") $timeout(function() {
         document.getElementById("searchInput").focus();
       });
+      if (stateName=="edit") refreshMap();
       // if (stateName=="slider-full") $timeout(function() {
       //   console.log(document.getElementById("slide-"+$scope.slider.show).getElementsByClassName("rz-pointer"));
       //   document.getElementById("slide-"+$scope.slider.show).getElementsByClassName("rz-pointer")[0].focus();
@@ -269,8 +277,12 @@ angular.module('quartermaester')
       $scope.state = "location";
     }
 
-    function mapClick() {
+    function mapClick(a, b, c, d) {
       $scope.state = "slider";
+      //console.log(a, b, c, d);
+      // console.log(c[0].latLng.lat());
+      //$scope.lastClick = JSON;
+      console.log($scope.mapModels.paths);
     }
 
     function onMapLoad(maps) {

js/services.js

@@ -379,13 +379,14 @@ angular.module('quartermaester')
       });
 
       return {
-          key: "path-" + index,
+          key: path.key,
           character: { key: matchingCharacter.key },
           path: waypoints,
           stroke: {
               color: matchingCharacter.color,
               weight: 3
           },
+          editable: false,
           static: true,
           icons: icons,
           timing: {
@@ -402,9 +403,17 @@ angular.module('quartermaester')
     }
 
     function waypointModel(waypoint) {
-      if (waypoint.location=="") return {latitude: parseFloat(waypoint.latitude), longitude: parseFloat(waypoint.longitude)};
+      if (waypoint.location=="") return {
+        latitude: parseFloat(waypoint.latitude),
+        longitude: parseFloat(waypoint.longitude),
+        location: ""
+      };
       var matchingTown = $filter('filter')(qmData.towns, {key: waypoint.location})[0];
-      return matchingTown.coords;
+      return {
+        latitude: matchingTown.coords.latitude,
+        longitude: matchingTown.coords.longitude,
+        location: waypoint.location
+      };
     }