From 038f80f0ba53c28e55a962fe615eb05968b93f5d Mon Sep 17 00:00:00 2001
From: gulix <gulix33xp@yahoo.fr>
Date: Thu, 18 Jun 2015 16:52:30 +0200
Subject: [PATCH] Better management of the Modal view, and the Select /
 Unselect buttons Summary of the Selected team added.

---
 builder/builder.html                    | 92 ++++++++++++++++++++-----
 builder/mustache/supremes.mst           |  3 +-
 builder/mustache/supremes_modal.mst     |  3 +-
 builder/mustache/supremes_selection.mst |  4 +-
 4 files changed, 79 insertions(+), 23 deletions(-)

diff --git a/builder/builder.html b/builder/builder.html
index fbef7c5..640c84e 100644
--- a/builder/builder.html
+++ b/builder/builder.html
@@ -26,26 +26,32 @@ <h2>A team builder for <b>Pulp City</b></h2>
     
     <!-- Filters -->
     <div class="row">
-      <!-- Factions -->
-      <div class='col-md-offset-2 bg-danger'>
+      
+      <!-- Team Summary -->
+      <div class='col-md-2'>
+        <p>Team Level : <strong id='team-summary-level'></strong></p>
+        <p># of Supremes : <strong id='team-summary-number'></strong></p>
+        <p>AP+ : <strong id='team-summary-apgranted'></strong></p>
+        <p>Minions+ : <strong id='team-summary-minionsgranted'></strong></p>
+      </div>
+      
+      <div class='col-md-10'>
+        <!-- Factions -->
         <div class='col-md-2'>
           <label for="selFactions">Faction</label>
           <select id="selFactions" class="form-control" ></select>
         </div>
-      </div>      
-      <!-- Role -->
-      <div class='col-md-offset-2 bg-danger'>
+        <!-- Roles -->
         <div class='col-md-2'>
           <label for="selRoles">Role</label>
           <select id="selRoles" class="form-control" ></select>
         </div>
-      </div>
+      </div>            
     </div>
     
     <div class="row">
       <!-- Selected items -->
-      <div class="col-md-2 bg-info" id="list-selected">
-        <p>Test</p>
+      <div class="col-md-2 bg-info" id="list-selected">        
       </div>
       <!-- List of items -->
       <div class="col-md-10 bg-danger" id="list-supremes">
@@ -60,7 +66,9 @@ <h2>A team builder for <b>Pulp City</b></h2>
 </body>
 <script>
 
-
+/********************/
+/*** The Supremes ***/
+/********************/
 function fill_supremes()
 {
   $.getJSON("json/supremes.json", function(json) {
@@ -76,6 +84,7 @@ <h2>A team builder for <b>Pulp City</b></h2>
           var renderedHtml = Mustache.render(mustacheTemplate, view);
           $("#list-supremes").html(renderedHtml);
           filter_supremes();
+          $(".btn-select-supreme").click(function() { select_supreme(getSupremeId("btn-select-supreme-", $(this).attr('id'))); });
         },
       dataType: "text"
     });
@@ -95,11 +104,10 @@ <h2>A team builder for <b>Pulp City</b></h2>
         {
           var renderedHtml = Mustache.render(mustacheTemplate, view);
           $("#list-modal-supremes").html(renderedHtml);
-          // Click on Select Buttons
-          $(".btn-select-supreme").click(function() {
-            var supremeId = getSupremeId("btn-select-supreme-", $(this).attr('id'));
-            $("#supreme-selection-" + supremeId).show();
-          });
+          // Events on Buttons
+          $(".btn-select-supreme-modal").click(function() { select_supreme(getSupremeId("btn-select-supreme-modal-", $(this).attr('id'))); });
+          $(".btn-unselect-supreme-modal").click(function() { unselect_supreme(getSupremeId("btn-unselect-supreme-modal-", $(this).attr('id'))); });
+          $(".btn-unselect-supreme-modal").hide();
         },
       dataType: "text"
     });
@@ -123,10 +131,7 @@ <h2>A team builder for <b>Pulp City</b></h2>
           // Hiding the elements
           $(".supreme-selection").each(function() { $( this ).hide(); });
           // Click on Buttons
-          $(".btn-unselect-supreme").click(function() {
-            var supremeId = getSupremeId("btn-unselect-supreme-", $(this).attr('id'));
-            $("#supreme-selection-" + supremeId).hide();
-          });
+          $(".btn-unselect-supreme").click(function() { unselect_supreme(getSupremeId("btn-unselect-supreme-", $(this).attr('id'))); });
         },
       dataType: "text"
     });
@@ -140,6 +145,21 @@ <h2>A team builder for <b>Pulp City</b></h2>
 function select_supreme(id)
 {
   $("#supreme-selection-" + id).show();
+  // Buttons in the modal view
+  $("#btn-select-supreme-modal-" + id).hide();
+  $("#btn-unselect-supreme-modal-" + id).show();
+  filter_supremes();
+  update_summary();
+}
+
+function unselect_supreme(id)
+{
+  $("#supreme-selection-" + id).hide();
+  // Buttons in the modal view
+  $("#btn-select-supreme-modal-" + id).show();
+  $("#btn-unselect-supreme-modal-" + id).hide();
+  filter_supremes();
+  update_summary();
 }
 
 function getSelectedSupremes(afterSelectionFunction)
@@ -285,13 +305,16 @@ <h2>A team builder for <b>Pulp City</b></h2>
      
     for(var i=0; i < jsonSupremes.length; i++)
     {
+      var isSelected = $('#supreme-selection-' + jsonSupremes[i].id).is(':visible');
+    
       if (((roleFilter != "0") && (jsonSupremes[i].role_key != roleFilter)) // Role
        // Factions
        || (isFactionSelected && !isInTable(jsonSupremes[i].factions, factionFilter))
        || (isFactionWithout && !(jsonSupremes[i].factions.length == 0))
        || (isFactionWithoutWithFreelance && !(jsonSupremes[i].factions.length == 0) && !jsonSupremes[i].is_freelance)
        || (isHeroesOnly && !jsonSupremes[i].is_hero) // Hero
-       || (isVillainsOnly && !jsonSupremes[i].is_villain)) // Villain
+       || (isVillainsOnly && !jsonSupremes[i].is_villain) // Villain
+       || isSelected)
       {
         $('#supreme-list-' + jsonSupremes[i].id).hide();
       }
@@ -303,6 +326,35 @@ <h2>A team builder for <b>Pulp City</b></h2>
   });
 }
 
+/***************/
+/*** Summary ***/
+/***************/
+function update_summary()
+{
+  $.getJSON("json/supremes.json", function(jsonSupremes) {
+    
+    var teamLevel = 0;
+    var teamNumber = 0;
+    var teamAP = 0;
+    var teamMinions = 0;
+    for(var i=0; i<jsonSupremes.length; i++)
+    {
+      if ($("#supreme-selection-" + jsonSupremes[i].id).is(':visible') == true)
+      {
+        teamLevel += jsonSupremes[i].level;
+        teamNumber += 1;
+        teamAP += jsonSupremes[i].ap_granted;
+        teamMinions += jsonSupremes[i].minions_granted;
+      }
+    }
+    
+    $("#team-summary-level").html(teamLevel);
+    $("#team-summary-number").html(teamNumber);
+    $("#team-summary-apgranted").html(teamAP);
+    $("#team-summary-minionsgranted").html(teamMinions);
+  });
+}
+
 /************************/
 /*** Helper Functions ***/
 /************************/
@@ -328,6 +380,8 @@ <h2>A team builder for <b>Pulp City</b></h2>
   fill_supremes();
   fill_supremes_modal();
   fill_supremes_selection();
+  
+  update_summary();
    
   // Events on the Affiliation
   changeAffiliation();
diff --git a/builder/mustache/supremes.mst b/builder/mustache/supremes.mst
index df62237..bff2fb1 100644
--- a/builder/mustache/supremes.mst
+++ b/builder/mustache/supremes.mst
@@ -4,6 +4,7 @@
     <p class='text-right'><strong>{{role}} lvl.{{level}}</strong></p>
     <p class='text-right'>AP+ : {{ap_granted}}</p>
     <p class='text-right'>Minions+ : {{minions_granted}}</p>
-    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#supreme-modal-{{id}}">Show</button>
+    <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#supreme-modal-{{id}}">Show</button>
+    <button type="button" class="btn btn-primary btn-sm btn-select-supreme" id="btn-select-supreme-{{id}}">Add</button>    
 </div>
 {{/supremes}}
\ No newline at end of file
diff --git a/builder/mustache/supremes_modal.mst b/builder/mustache/supremes_modal.mst
index 820355b..a167f88 100644
--- a/builder/mustache/supremes_modal.mst
+++ b/builder/mustache/supremes_modal.mst
@@ -14,7 +14,8 @@
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-        <button type="button" class="btn btn-primary btn-select-supreme" id="btn-select-supreme-{{id}}">Add to selection</button>
+        <button type="button" class="btn btn-primary btn-select-supreme-modal" data-dismiss="modal" id="btn-select-supreme-modal-{{id}}">Add to selection</button>
+        <button type="button" class="btn btn-primary btn-unselect-supreme-modal" data-dismiss="modal" id="btn-unselect-supreme-modal-{{id}}">Remove from selection</button>
       </div>
     </div>
   </div>
diff --git a/builder/mustache/supremes_selection.mst b/builder/mustache/supremes_selection.mst
index 044fa30..015b6f2 100644
--- a/builder/mustache/supremes_selection.mst
+++ b/builder/mustache/supremes_selection.mst
@@ -3,8 +3,8 @@
   <h4>{{name}}</h4>
   <p class='text-left'><strong>{{role}} lvl.{{level}}</strong></p>
   <div>
-    <button type="button" class="btn btn-default" data-toggle="modal" data-target="#supreme-modal-{{id}}">Show</button>
-    <button type="button" class="btn btn-primary btn-unselect-supreme" id="btn-unselect-supreme-{{id}}">Remove</button>
+    <button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#supreme-modal-{{id}}">Show</button>
+    <button type="button" class="btn btn-primary btn-sm btn-unselect-supreme" id="btn-unselect-supreme-{{id}}">Remove</button>
   </div>
 </div>
 {{/supremes}}
\ No newline at end of file