From 6f5dca59ef87184e7f458551b11053487d54e5e9 Mon Sep 17 00:00:00 2001
From: agames4 <robokatze182@gmx.de>
Date: Sat, 9 Sep 2023 20:54:36 +0200
Subject: [PATCH] simplified html

simplified the ports html for better readability
---
 sipa/templates/usersuite/_get_port_row.html   | 75 +++++++++++++++----
 .../usersuite/_port_forwardings.html          | 34 +++------
 2 files changed, 71 insertions(+), 38 deletions(-)

diff --git a/sipa/templates/usersuite/_get_port_row.html b/sipa/templates/usersuite/_get_port_row.html
index 60e13828..7021c260 100644
--- a/sipa/templates/usersuite/_get_port_row.html
+++ b/sipa/templates/usersuite/_get_port_row.html
@@ -1,46 +1,89 @@
+
 {% if port_forwarding is not none %}
+    {% if edit %}
 <tr>
-
+    {{ form.csrf_token }}
     <td>
-        <input type="number" min="1" id="source_port" name="port" hx-post="/control/port" hx-trigger="change" hx-target="next .error-label" hx-swap="innerHTML" value="{{ port_forwarding[0] }}">
+        <input type="number" min="1" name="source_port" hx-post="/control/port" hx-trigger="change" hx-target="next .error-label" hx-swap="innerHTML" value="{{ port_forwarding[0] }}">
         <label class='error-label' for="source_port"></label>
     </td>
          <td>
-             <input type="number" min="1" id="dest_port" name="port" hx-post="/control/port" hx-indicator="#ind" hx-target="next .error-label" hx-swap="innerHTML" value="{{ port_forwarding[1] }}">
+             <input type="number" min="1" name="dest_port" hx-post="/control/port" hx-indicator="#ind" hx-target="next .error-label" hx-swap="innerHTML" value="{{ port_forwarding[1] }}">
              <label class='error-label' for="dest_port"></label>
     </td>
-     <td><input type="text" id="source ip" placeholder="source ip" hx-post="/control/ip" value="{{ port_forwarding[2] }}"></td>
+     <td><input type="text" name="ip_address" placeholder="source ip" hx-post="/control/ip" value="{{ port_forwarding[2] }}"></td>
     <td>
          <label for="udp">UDP</label>
-         <input type="radio" name="prot" id="udp" {% if port_forwarding[3] =="UDP" %}selected{% endif %}>
+         <input type="radio" name="port" value="udp" {% if port_forwarding[3] =="UDP" %}checked{% endif %}>
          <label for="tcp">TCP</label>
-         <input type="radio" name="prot" id="tcp" {% if port_forwarding[3] =="TCP" %}selected{% endif %}>
+         <input type="radio" name="port" value="tcp" {% if port_forwarding[3] =="TCP" %}checked{% endif %}>
+    </td>
+    <td><button class="edit-button success" hx-put="/usersuite/port-forward-edit/{{ port_index }}" hx-include="closest tr" hx-swap="outerHTML swap:1s">
+        <span class="glyphicon glyphicon-floppy-disk"></span>
+    </button>
+    <button class="edit-button error-label" type="submit">
+        <span class=" glyphicon glyphicon-remove"></span>
+    </button>
     </td>
-    <td><button type="submit">apply</button></td>
 </tr >
 {% else %}
-<tr>
+        <tr >
 
+            <td>
+                <label>{{ port_forwarding[0] }}</label>
+            </td>
+            <td>
+                <label >{{ port_forwarding[1] }}</label>
+            </td>
+            <td><label >{{ port_forwarding[2] }}</label></td>
+            <td>
+                <label>{{ port_forwarding[3] }}</label>
+            </td>
+            <td>
+                <button class="edit-button edit-pen" aria-label="edit" hx-get="/usersuite/get_row/{{ port_index }}" hx-target="closest tr" >
+                <span class="glyphicon glyphicon-pencil pull-left"></span>
+                </button>
+                <button class="edit-button error-label" hx-confirm="{{ _("wollen sie die port Weiterleitung wirklich löschen?") }}" hx-delete="/usersuite/port_forward/{{ port_index }}" hx-target="closest tr">
+                <span class="glyphicon glyphicon-trash pull-right"></span>
+                </button>
+            </td>
+        </tr>
+        {% endif %}
+{% else %}
+
+<tr>
+<form >
+    {{ form.csrf_token }}
     <td>
-        <input type="number" min="1" id="source_port" name="port" hx-post="/control/port" hx-trigger="keyup delay:500ms" hx-target="next .error-label" hx-swap="innerHTML">
-        <label class='error-label' for="source_port"></label>
+        <input type="number" min="1" name="source_port" hx-post="/control/port" hx-trigger="keyup delay:500ms" hx-target="next .error-label" hx-swap="innerHTML">
+        <label class='error-label'></label>
     </td>
          <td>
-             <input type="number" min="1" id="dest_port" name="port" hx-post="/control/port" hx-trigger="keyup delay:500ms" hx-indicator="#ind" hx-target="next .error-label" hx-swap="innerHTML">
+             <input type="number" min="1" id="dest_port" name="dest_port" hx-post="/control/port" hx-trigger="keyup delay:500ms" hx-indicator="#ind" hx-target="next .error-label" hx-swap="innerHTML">
              <label class='error-label' for="dest_port"></label>
     </td>
      <td>
-         <input type="text" name="source_ip" placeholder="source ip" hx-post="/control/ip" hx-trigger="keyup delay:500ms" hx-target="next .error-label" hx-swap="innerHTML">
+         <input type="text" name="ip_address" placeholder="{{ _("Ziel IP") }}" hx-post="/control/ip" hx-trigger="keyup delay:500ms" hx-target="next .error-label" hx-swap="innerHTML">
         <label class='error-label'></label>
      </td>
     <td>
         <fieldset>
          <label for="udp">UDP</label>
-         <input type="radio" name="prot" id="udp" checked>
+         <input type="radio" name="prot" value="udp" checked>
          <label for="tcp">TCP</label>
-         <input type="radio" name="prot" id="tcp">
+         <input type="radio" name="prot" value="tcp">
         </fieldset>
     </td>
-    <td><button type="submit">apply</button></td>
+    </form>
+    <td>
+        <button class="edit-button success" type="submit" hx-post="/usersuite/add-port-forward" hx-traget="closest tr" hx-include="closest tr" hx-trigger="click, next name=save_button" hx-swap="outerHTML swap:500ms">
+            <span class="glyphicon glyphicon-floppy-disk"></span>
+        </button>
+        <button class="edit-button error-label" type="submit" hx-delete="/control/delete" hx-traget="closest tr" hx-swap="outerHTML swap:500ms">
+            <span class=" glyphicon glyphicon-remove"></span>
+        </button>
+    </td>
+
 </tr >
-{% endif %}
+
+{% endif %}
\ No newline at end of file
diff --git a/sipa/templates/usersuite/_port_forwardings.html b/sipa/templates/usersuite/_port_forwardings.html
index ff4671a9..e3d2a5bb 100644
--- a/sipa/templates/usersuite/_port_forwardings.html
+++ b/sipa/templates/usersuite/_port_forwardings.html
@@ -12,35 +12,25 @@ <h2 id="port-forwardings">port forwardings</h2>
             <th>{{ _("option") }}</th>
             </tr>
         </thead>
+    <tbody hx-target="closest tr" hx-swap="outerHTML swap:500ms">
         {% if  port_forwadings  is not none %}
-            {% for port_forwad in port_forwardings %}
-        <tr hx-get="/usersuite/get_row" hx-trigger="" hx-target="this" hx-swap="outerHTML">
-            <td>
-                <label>{{ port_forwad[0] }}</label>
-            </td>
-            <td>
-                <label >{{ port_forwad[1] }}</label>
-            </td>
-            <td><label >{{ port_forwad[2] }}</label></td>
-            <td>
-                <label>{{ port_forwad[3] }}</label>
-            </td>
-            <td>
-                <button class="edit-button" aria-label="edit">
-                <span class="glyphicon glyphicon-pencil pull-right"></span>
-                </button>
-            </td>
-        </tr>
-
+            {% set port_index = 0 %}
+            {% for port_forwarding in port_forwardings %}
+                {% include 'usersuite/_get_port_row.html' %}
+                {% set port_index = port_index + 1 %}
             {% endfor %}
         {% endif %}
         <tr hx-get="/usersuite/get_row" hx-swap="beforebegin">
-            <td colspan="3"><button type="submit">add new port forwardings</button></td>
-            <td colspan="2"><button hx-post="/usersuite/show-port-forwardings" hx-target="#port_forward" hx-swap="outerHTML" hx-params="hide">hide</button></td>
+            <td colspan="3"><button class="btn btn-default" type="submit">
+                <span class="glyphicon glyphicon-plus"></span>
+                add new port forwardings
+            </button></td>
+            <td colspan="2"><button class="btn btn-default" hx-post="/usersuite/show-port-forwardings" hx-target="#port_forward" hx-swap="outerHTML" hx-params="hide">hide</button></td>
         </tr>
+    </tbody>
     </table>
 </div>
 {% else %}
-    <button hx-get="/usersuite/show-port-forwardings" hx-target="#port_forward" hx-swap="outerHTML" hx-params="show">show table</button>
+    <button class="btn btn-default" hx-get="/usersuite/show-port-forwardings" hx-target="#port_forward" hx-swap="outerHTML" hx-params="show">show table</button>
 {% endif %}
 </div>
\ No newline at end of file