From 666c52f419ebe7cac4fc869324fadee8445b28c3 Mon Sep 17 00:00:00 2001
From: mouriermaxime <58846521+mouriermaxime@users.noreply.github.com>
Date: Fri, 20 Jan 2023 23:57:26 +0100
Subject: [PATCH] remove port button

---
 Flask/dco_gen/templates/interactive_form.html | 39 ++++++++++++++++++-
 1 file changed, 37 insertions(+), 2 deletions(-)

diff --git a/Flask/dco_gen/templates/interactive_form.html b/Flask/dco_gen/templates/interactive_form.html
index 22717dd..d63a357 100644
--- a/Flask/dco_gen/templates/interactive_form.html
+++ b/Flask/dco_gen/templates/interactive_form.html
@@ -107,7 +107,7 @@
             `<label for="volume_name_${volume_cpt}">Nom du volume :</label>
             <input type="text" name="volume_name_${volume_cpt}" id="volume_name_${volume_cpt}" required>
             <label for="volume_container_${volume_cpt}">Container's directory :</label>
-            <input type="text" name="volume_container_${volume_cpt}" id="volume_container_${volume_cpt}" required><br>
+            <input type="text" name="volume_container_${volume_cpt}" id="volume_container_${volume_cpt}" required>
             <button type="button" onclick="remove_volume(${volume_cpt})">Supprimer</button><br>`;
             document.getElementById("volumes").appendChild(new_volume_div)
             document.getElementById('volume_cpt').value = volume_cpt;
@@ -156,12 +156,47 @@
         function add_port() { 
             port_cpt+=1;
             var new_port_div = document.createElement('div')
+            new_port_div.setAttribute("id",`port-${port_cpt}`)
             new_port_div.innerHTML += 
             `<label for="port_${port_cpt}">Service port :</label>
-            <input type="text" name="port_${port_cpt}" id="port_${port_cpt}" required><br>
+            <input type="text" name="port_${port_cpt}" id="port_${port_cpt}" required>
             <button type="button" onclick="remove_port(${port_cpt})">Supprimer</button><br>`;
             document.getElementById("ports").appendChild(new_port_div)
             document.getElementById('port_cpt').value = port_cpt;
         }
+
+        function remove_port(index){
+            var port_to_rm = document.getElementById(`port-${index}`);
+            var cpt = document.getElementById('port_cpt').value -1;
+            port_to_rm.remove();
+            document.getElementById('port_cpt').value = cpt;
+            update_port_ids();
+        }
+
+        function update_port_ids() {
+            const port_divs = document.querySelectorAll('[id^="port-"]');
+            for (let i=0; i < port_divs.length; i++) {
+                port_divs[i].setAttribute('id',`port-${i+1}`)
+                let port_labels = port_divs[i].querySelectorAll('[for^=port_]');
+                var labels = [{"liste":port_labels,"for_name":"port_"}];
+                for(let x=0; x < labels.length; x++){
+                    for (let j=0; j < labels[x].liste.length; j++) {
+                        labels[x].liste[j].setAttribute("for",`${labels[x].for_name}${i+1}`);
+                    }
+                }
+                let port_inputs = port_divs[i].querySelectorAll('[name^=port_]');
+                var inputs = [{"liste":port_inputs,"name":"port_"}]
+                for(let x=0; x < inputs.length; x++){
+                    for (let j=0; j < inputs[x].liste.length; j++) {
+                        inputs[x].liste[j].setAttribute("name",`${inputs[x].name}${i+1}`);
+                        inputs[x].liste[j].setAttribute("id",`${inputs[x].name}${i+1}`);
+                    }
+                }
+
+                let bouton = port_divs[i].querySelector("button");
+                bouton.setAttribute("onclick",`remove_port(${i+1})`);
+            }
+        }
+
     </script>
 </html>