Stop using indexes while selecting colors configs

3 files changed, 17 insertions, 15 deletions

diff --git a/share/tools/web_config/partials/colors.html b/share/tools/web_config/partials/colors.html
index 605d005b..af587520 100644
--- a/share/tools/web_config/partials/colors.html
+++ b/share/tools/web_config/partials/colors.html
@@ -1,9 +1,9 @@
 <div id="master_detail_table">
     <div id="master">
-        <div ng-repeat="(name, attrs) in colorConfig">
-            <div ng-class="{'master_element':true, 'selected_master_elem':$index==selectedColorConfig}" style="color: {{ attrs.color }}" ng-click="configClicked($index)">
-                <span class="master_element_text">{{ attrs.name}}</span> 
-                <span class="master_element_description" style="border-bottom-color: rgb(85, 85, 85);"> {{ attrs.description }}</span>
+        <div ng-repeat="colorConfig in colorConfigs">
+            <div ng-class="{'master_element':true, 'selected_master_elem': colorConfig==selectedColorConfig}" style="color: {{ colorConfig.color }}" ng-click="selectConfig(colorConfig)">
+                <span class="master_element_text">{{ colorConfig.name}}</span> 
+                <span class="master_element_description" style="border-bottom-color: rgb(85, 85, 85);"> {{ colorConfig.description }}</span>
             </div>
         </div>
             <tbody>
@@ -33,7 +33,7 @@
                     </tbody>
                 </table>
                 <div class="colorpicker_modifiers">
-                <div ng-class="{'colorpicker_modifier_cell': true, 'modifier_cell_selected': colorConfig[selectedColorConfig].underline}" id="modifier_underline" ng-style="{'text-decoration: underline': true}" onClick='picked_modifier(this)'>Underline</div>
+                <div ng-class="{'colorpicker_modifier_cell': true, 'modifier_cell_selected': selectedColorConfig.underline}" id="modifier_underline" ng-style="{'text-decoration: underline': true}" onClick='picked_modifier(this)'>Underline</div>
             </div>
         </div>
     </div>
diff --git a/share/tools/web_config/partials/prompt.html b/share/tools/web_config/partials/prompt.html
index 783ab816..05aaceca 100644
--- a/share/tools/web_config/partials/prompt.html
+++ b/share/tools/web_config/partials/prompt.html
@@ -2,7 +2,7 @@
     <div id="master">
         <div ng-repeat="prompt in samplePrompts">
             <div id="master_{{prompt.name}}" ng-class="{'master_element': true, 'selected_master_elem': selectedPrompt == prompt}" ng-style="selectedPrompt == prompt && {color: '#6666ff'} || {color: '#aaaaaa' }" ng-click="selectPrompt(prompt)">
-                <span ng-class="{master_element_text: selectedPrompt == prompt}" ng-style="selectedPrompt == prompt && {font-size: '13pt', border-bottom-color: rgb(0, 6, 111)} || {font-size: '13pt'}">{{ prompt.name }}</span>
+                <span ng-class="{master_element_text: selectedPrompt == prompt}" ng-style="selectedPrompt == prompt && {'font-size': '13pt', 'border-bottom-color': rgb(0, 6, 111)} || {'font-size': '13pt'}">{{ prompt.name }}</span>
             </div>
         </div>
     </div>
diff --git a/share/tools/web_config/webconfig.js b/share/tools/web_config/webconfig.js
index 4fde680b..9e046ea2 100644
--- a/share/tools/web_config/webconfig.js
+++ b/share/tools/web_config/webconfig.js
@@ -54,21 +54,21 @@ webconfig.controller("colorsController", function($scope, $http) {
         return result;
     };
 
-    $scope.selectedColorConfig = 0;
+    $scope.selectedColorConfig = null;
     $scope.itemsPerRow = range(0, 15);
     $scope.totalRows = range(0, $scope.term256Colors.length/$scope.itemsPerRow.length);
-    $scope.selectedCell = -1;
+    $scope.selectedCell = null;
 
     $scope.target = "text";
 
-    $scope.configClicked = function(index) {
-        $scope.selectedColorConfig = index;
+    $scope.selectConfig = function(newSelection) {
+        $scope.selectedColorConfig = newSelection;
         //console.log("Color :" + $scope.colorConfig[$scope.selectedColorConfig].color.toLowerCase() + $scope.term256Colors.indexOf($scope.colorConfig[$scope.selectedColorConfig].color.toLowerCase()));
         if ($scope.target == "background") {
-            $scope.selectedCell = $scope.term256Colors.indexOf($scope.colorConfig[$scope.selectedColorConfig].background.toLowerCase());
+            $scope.selectedCell = $scope.term256Colors.indexOf($scope.selectedColorConfig.background.toLowerCase());
         }
         else {
-            $scope.selectedCell = $scope.term256Colors.indexOf($scope.colorConfig[$scope.selectedColorConfig].color.toLowerCase());
+            $scope.selectedCell = $scope.term256Colors.indexOf($scope.selectedColorConfig.color.toLowerCase());
        } 
     }
 
@@ -79,13 +79,15 @@ webconfig.controller("colorsController", function($scope, $http) {
     $scope.pickedColorPickerTarget = function(target) {
         console.log("Picked " + target);
         $scope.target = target;
-        $scope.configClicked($scope.selectedColorConfig);
+        // Update selection in color picker
+        $scope.selectConfig($scope.selectedColorConfig);
     }
 
     $scope.fetchColors = function() {
         $http.get("/colors/").success(function(data, status, headers, config) {
-        $scope.colorConfig= data;
-        $scope.selectedCell = $scope.term256Colors.indexOf($scope.colorConfig[$scope.selectedColorConfig].color);
+        $scope.colorConfigs = data;
+        $scope.selectedColorConfig = data[0];
+        $scope.selectedCell = $scope.term256Colors.indexOf($scope.selectedColorConfig.color);
     })};
     $scope.fetchColors();
 });