From 802f5c2992b1f0b0ab2b7159821ab9e803542121 Mon Sep 17 00:00:00 2001
From: Miguel Caballer <micafer1@upv.es>
Date: Tue, 12 Mar 2024 09:59:12 +0100
Subject: [PATCH] Fix lists

---
 app/templates/input_types.html |  2 +-
 app/templates/list.html        | 36 ++++++++++++++++++++++++----------
 2 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/app/templates/input_types.html b/app/templates/input_types.html
index a5e8926f3..74fcf3a1a 100644
--- a/app/templates/input_types.html
+++ b/app/templates/input_types.html
@@ -1,4 +1,4 @@
-<div class="form-group">
+<div>
   {% if value.tag_type is not defined or value.tag_type not in ["hidden", "random"] %}
   <label for="{{key}}" style="white-space: pre-wrap;">{% if value.description is defined %}{{value.description}}{% else %}{{key}}{% endif %}</label>
   {% endif %}
diff --git a/app/templates/list.html b/app/templates/list.html
index af048a536..fbbedd6af 100644
--- a/app/templates/list.html
+++ b/app/templates/list.html
@@ -1,6 +1,6 @@
 <div class="mt-1">
     <div id="{{key}}-container"></div>
-    <button type="button" class="ms-2 btn btn-sm btn-outline-info" id="add-new-item-{{key}}" class="add-new" data-tag-name="{{key}}"><i class='fas fa-plus me-2'></i>Add</button>
+    <button type="button" class="ms-2 mt-2 btn btn-sm btn-outline-info" id="add-new-item-{{key}}" class="add-new" data-tag-name="{{key}}"><i class='fas fa-plus me-2'></i>Add</button>
     <input id="id-{{key}}" type="hidden" data-output-type="json" name="{{key}}" value=""/>
 </div>
 
@@ -45,12 +45,20 @@
     // this can be done better
     {% if value.type == "map" %}
     input_template = `
-            <input type="text" class="me-1 col-5 form-control" name="${tagname}_list_value_${num__{{key}}}_range" class="form-control" pattern="([0-9]+:{0,1}[0-9]+)" required value="${range}" placeholder="Port Range">
-            <input type="text" class="me-1 col-6 form-control" name="${tagname}_list_value_${num__{{key}}}_cidr" class="form-control" pattern="(([0-9]{1,3}\.){3}[0-9]{1,3}(\/([0-9]|[1-2][0-9]|3[0-2]))){0,1}" value="${cidr}" placeholder="CIDR">`;
+        <div class="col col-md-5 ps-0">
+            <input type="text" class="form-control" name="${tagname}_list_value_${num__{{key}}}_range" class="form-control" pattern="([0-9]+:{0,1}[0-9]+)" required value="${range}" placeholder="Port Range">
+        </div>
+        <div class="col col-md-6 ps-0">
+            <input type="text" class="form-control" name="${tagname}_list_value_${num__{{key}}}_cidr" class="form-control" pattern="(([0-9]{1,3}\.){3}[0-9]{1,3}(\/([0-9]|[1-2][0-9]|3[0-2]))){0,1}" value="${cidr}" placeholder="CIDR">
+        </div>`;
     {% else %}
     input_template = `
-            <input type="text" class="me-1 col-5 form-control" name="${tagname}_list_value_${num__{{key}}}_target" class="form-control" pattern="([0-9]{1,5})" required value="${target}" placeholder="Target Port">
-            <input type="text" class="me-1 col-6 form-control" name="${tagname}_list_value_${num__{{key}}}_range" class="form-control" pattern="([0-9]{1,5})"  value="${range}" placeholder="Source Port">`;
+      <div class="col col-md-5 ps-0">
+            <input type="text" class="form-control" name="${tagname}_list_value_${num__{{key}}}_target" class="form-control" pattern="([0-9]{1,5})" required value="${target}" placeholder="Target Port">
+      </div>
+      <div class="col col-md-6 ps-0">
+            <input type="text" class="form-control" name="${tagname}_list_value_${num__{{key}}}_range" class="form-control" pattern="([0-9]{1,5})"  value="${range}" placeholder="Source Port">
+       </div>`;
     {% endif %}
 
   {% elif value.type == "map" %}
@@ -61,17 +69,25 @@
       v = parts[1]
     }
     input_template = `
-            <input type="text" class="me-1 col-4 form-control" name="${tagname}_list_value_${num__{{key}}}_key" class="form-control" required value="${k}" placeholder="Key">
-            <input type="text" class="me-1 col-7 form-control" name="${tagname}_list_value_${num__{{key}}}_value" class="form-control" required pattern="${pattern}" value="${v}" placeholder="Value">`;
+        <div class="col col-md-4 ps-0">
+            <input type="text" class="form-control" name="${tagname}_list_value_${num__{{key}}}_key" class="form-control" required value="${k}" placeholder="Key">
+        </div>
+        <div class="col col-md-5 ps-0">
+            <input type="text" class="form-control" name="${tagname}_list_value_${num__{{key}}}_value" class="form-control" required pattern="${pattern}" value="${v}" placeholder="Value">
+        </div>`;
   {% else %}
     input_template = `
-            <input type="text" class="col-11 form-control" name="${tagname}_list_value_${num__{{key}}}" class="form-control" required pattern="${pattern}" value="${value}">`;
+        <div class="col col-md-11 ps-0">
+            <input type="text" class="form-control" name="${tagname}_list_value_${num__{{key}}}" class="form-control" required pattern="${pattern}" value="${value}">
+        </div>`;
   {% endif %}
 
   let template = `
-        <div class="form-group mt-1 mx-2 row" id="${tagname}-${num__{{key}}}">
+        <div class="mt-1 mx-2 row" id="${tagname}-${num__{{key}}}">
         ${input_template}
-          <button type=button class='btn btn-sm btn-outline-danger' href="" onclick="javascript:removeItem('${tagname}'+ '-' + ${num__{{key}}} + '' ); return false;"><i class='far fa-trash-alt m-1'></i></button>
+          <div class="col col-md-1 ps-0">
+            <button type=button class='btn btn-sm btn-outline-danger' href="" onclick="javascript:removeItem('${tagname}'+ '-' + ${num__{{key}}} + '' ); return false;"><i class='far fa-trash-alt' style='margin: 0.4rem !important;'></i></button>
+          </div>
         </div>`;
 
   let container = document.getElementById(tagname + '-container');