Skip to content

Commit

Permalink
simplified html
Browse files Browse the repository at this point in the history 
simplified the ports html for better readability
  • Loading branch information
@agmes4
agmes4 committed Sep 9, 2023
1 parent d4031e1 commit 6f5dca5
Show file tree
Hide file tree
Showing 2 changed files with 71 additions and 38 deletions.
75 changes: 59 additions & 16 deletions sipa/templates/usersuite/_get_port_row.html
View file
Original file line number Diff line number Diff line change
@@ -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 %}
34 changes: 12 additions & 22 deletions sipa/templates/usersuite/_port_forwardings.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

0 comments on commit 6f5dca5

Please sign in to comment.