Bug fixes

- Unique id added to radio boxes, without which they affected other tabs - watch added on loading of data, not just when adding a new tab
LupusUmbrae · Apr 17, 2016 · 76138ae · 76138ae
1 parent eab8c87
commit 76138ae
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 21 deletions.
diff --git a/static/javascript/kdm.js b/static/javascript/kdm.js
@@ -22,6 +22,11 @@
     function load(scope, json) {
         var parsed = JSON.parse(json);
         scope.tabs = parsed;
+
+        parsed.forEach(function(kdm, index) {
+            watchTab(scope, kdm, index);
+        })
+
         scope.$apply();
     }
 
@@ -160,6 +165,11 @@
             $('#clearAll').click(function() {
                 $("#clear-dialog").dialog("open");
             });
+
+            $('.nav-tabs a').click(function(e) {
+                e.preventDefault()
+                $(this).tab('show')
+            });
         });
 
 
@@ -194,20 +204,20 @@
         tabs.push(kdm);
         var lastIndex = tabs.length - 1;
 
+        watchTab(scope, kdm, lastIndex);
+    }
+
+    function watchTab(scope, kdm, tabIndex) {
         if (kdm.type === "char") {
-            scope.$watch('tabs[' + lastIndex + '].courage.levels', watchCheckboxArray, true);
-            scope.$watch('tabs[' + lastIndex + '].understanding.levels', watchCheckboxArray, true);
-            scope.$watch('tabs[' + lastIndex + '].age', watchCheckboxArray, true);
-            scope.$watch('tabs[' + lastIndex + '].weapon.levels', watchCheckboxArray, true);
+            scope.$watch('tabs[' + tabIndex + '].courage.levels', watchCheckboxArray, true);
+            scope.$watch('tabs[' + tabIndex + '].understanding.levels', watchCheckboxArray, true);
+            scope.$watch('tabs[' + tabIndex + '].age', watchCheckboxArray, true);
+            scope.$watch('tabs[' + tabIndex + '].weapon.levels', watchCheckboxArray, true);
         } else if (kdm.type === "settlement") {
-            scope.$watch('tabs[' + lastIndex + '].population.lost', watchCheckboxArray, true);
-            scope.$watch('tabs[' + lastIndex + '].deathCount', watchCheckboxArray, true);
-            scope.$watch('tabs[' + lastIndex + '].timeline', watchCheckboxArray, true);
+            scope.$watch('tabs[' + tabIndex + '].population.lost', watchCheckboxArray, true);
+            scope.$watch('tabs[' + tabIndex + '].deathCount', watchCheckboxArray, true);
+            scope.$watch('tabs[' + tabIndex + '].timeline', watchCheckboxArray, true);
         }
-
-        $('.nav-tabs li a').click(function(e) {
-            e.preventDefault();
-        });
     }
 
     function watchCheckboxArray(newVal, oldVal) {

diff --git a/static/templates/char/courage.html b/static/templates/char/courage.html
@@ -39,15 +39,15 @@
       <div class="col-xs-12">
         <div class="row">
           <div class="col-xs-2">
-            <label><input type="radio" name="courage" value="stalwart" ng-model="kdm.courage.bold"><span></span></label>
+            <label><input type="radio" name="{{kdm.id}}-courage" value="stalwart" ng-model="kdm.courage.bold"><span></span></label>
           </div>
           <div class="col-xs-10">
             <small><strong>Stalwart</strong>: can't be knocked down by brain trauma or intimidate.</small>
           </div>
         </div>
         <div class="row">
           <div class="col-xs-2">
-            <label><input type="radio" name="courage" value="prepared" ng-model="kdm.courage.bold"><span></span></label>
+            <label><input type="radio" name="{{kdm.id}}-courage" value="prepared" ng-model="kdm.courage.bold"><span></span></label>
           </div>
           <div class="col-xs-10">
             <hr style="margin: 0px">
@@ -56,7 +56,7 @@
         </div>
         <div class="row">
           <div class="col-xs-2">
-            <label><input type="radio" name="courage" value="matchmaker" ng-model="kdm.courage.bold"><span></span></label>
+            <label><input type="radio" name="{{kdm.id}}-courage" value="matchmaker" ng-model="kdm.courage.bold"><span></span></label>
           </div>
           <div class="col-xs-10">
             <hr style="margin: 0px">

diff --git a/static/templates/char/name.html b/static/templates/char/name.html
@@ -10,8 +10,8 @@
     </div>
   </div>
   <div class="col-xs-3">
-    <label class="radio-inline"><input type="radio" name="sex" value="m" ng-model="kdm.name.sex" class="radio-box"><span></span>M</label>
-    <label class="radio-inline"><input type="radio" name="sex" value="f" ng-model="kdm.name.sex" class="radio-box"><span></span>F</label>
+    <label class="radio-inline"><input type="radio" name="{{kdm.id}}-sex" value="m" ng-model="kdm.name.sex" class="radio-box"><span></span>M</label>
+    <label class="radio-inline"><input type="radio" name="{{kdm.id}}-sex" value="f" ng-model="kdm.name.sex" class="radio-box"><span></span>F</label>
   </div>
 </div>
 <div class="row">

diff --git a/static/templates/char/understanding.html b/static/templates/char/understanding.html
@@ -39,15 +39,15 @@
       <div class="col-xs-12">
         <div class="row">
           <div class="col-xs-2">
-            <label><input type="radio" name="understanding" value="analyze" ng-model="kdm.understanding.insight"><span></span></label>
+            <label><input type="radio" name="{{kdm.id}}-understanding" value="analyze" ng-model="kdm.understanding.insight"><span></span></label>
           </div>
           <div class="col-xs-10">
             <small><strong>Analyze</strong>: Look at top AI card and return it to the top of the deck.</small>
           </div>
         </div>
         <div class="row">
           <div class="col-xs-2">
-            <label><input type="radio" name="understanding" value="explore" ng-model="kdm.understanding.insight"><span></span></label>
+            <label><input type="radio" name="{{kdm.id}}-understanding" value="explore" ng-model="kdm.understanding.insight"><span></span></label>
           </div>
           <div class="col-xs-10">
             <hr style="margin: 0px">
@@ -56,7 +56,7 @@
         </div>
         <div class="row">
           <div class="col-xs-2">
-            <label><input type="radio" name="understanding" value="tinker" ng-model="kdm.understanding.insight"><span></span></label>
+            <label><input type="radio" name="{{kdm.id}}-understanding" value="tinker" ng-model="kdm.understanding.insight"><span></span></label>
           </div>
           <div class="col-xs-10">
             <hr style="margin: 0px">

diff --git a/templates/index.html b/templates/index.html
@@ -85,9 +85,10 @@ <h1>Kingdom Death Monster</h1>
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
-
+
     <script type="text/javascript" src='static/javascript/kdm.js'></script>
     <script type="text/javascript" src='static/javascript/kdm.config.js'></script>
+
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
   </body>
 </html>