finished weapons

Author: Dpbm

app/views/spaceships/add.html.erb

@@ -5,12 +5,21 @@
     <title>Adicionar Nave</title>
 
     <script>
-      const weapons = [];
+      let weapons = [];
       const MAX_WEAPONS = 20;
-      
+      let hasWeaponsCheckBox = null;
+      let weaponsAerea = null;
+
       async function init() {
-        const addWeaponButton = document.getElementById("add-weapon");
-        addWeaponButton.addEventListener('click', updateWeaponsAdd);
+        hasWeaponsCheckBox = document.getElementById("has-weapons");
+        weaponsArea = document.getElementById('weapons-area');
+        
+        hasWeaponsCheckBox.checked = false;
+        removeWeaponsArea();
+
+        hasWeaponsCheckBox.addEventListener('change', updateWeaponsArea);
+
+
         await addMap();
       }
 
@@ -54,6 +63,46 @@
 
       }
 
+      function updateWeaponsArea(event){
+        if(!event) return;
+        event.preventDefault();
+        if(!event.target) return;
+
+        const checked = event.target.checked;
+        if(checked) addWeaponsArea();
+        else removeWeaponsArea();
+      }
+
+
+      function addWeaponsArea(){
+        const label = document.createElement("label");
+        label.for = "weapon";
+        label.innerText = "Nome do Armamento";
+
+        const input = document.createElement("input");
+        input.type = 'text';
+        input.id = 'weapon-name';
+
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.id = 'add-weapon';
+        button.innerText = 'Adicionar';
+        button.addEventListener('click', updateWeaponsAdd);
+
+        const ul = document.createElement('ul');
+        ul.id = 'weapons-list';
+
+        weaponsArea.appendChild(label);
+        weaponsArea.appendChild(input);
+        weaponsArea.appendChild(button);
+        weaponsArea.appendChild(ul);
+      }
+
+      function removeWeaponsArea(){
+        weaponsArea.innerHTML = '';
+        weapons = [];
+      }
+
       function addWeapon(){
         const weaponName = document.getElementById("weapon-name");
         if(!weaponName) return;
@@ -101,11 +150,8 @@
       }
 
       function updateWeaponsDelete(event){
-        if(!event) return;
-        event.preventDefault();
-
-        if(!event.target) return;
-      
+        if(!event || !event.target) return;      
+        
         deleteWeapon(event);
         renderWeapons();
       }
@@ -164,22 +210,11 @@
       </gmp-map>
 
       <%= form.label :has_weapons, "Possui Armamento" %>
-      <%= form.check_box :has_weapons, id: "has_weapons" %>
-
-
-      <div style="display: block;">
-        <%= form.label :weapon, "Nome do Armamento" %>
-        <%= form.text_field :weapon, id: "weapon-name" %>
-        <button type="button" id="add-weapon">Adicionar</button>
-      
+      <%= form.check_box :has_weapons, id: "has-weapons", checked: false %>
 
-        <ul id="weapons-list"></ul>
 
-      </div>
+      <div id="weapons-area"></div>
 
     <% end %>
   </body>
 </html>
-
-
-