blob: ccedf5f2e3c72f12fbf00af36b03cf7d1356ba97 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
<form class="form mx-5" method="POST">
{{ form.hidden_tag() }}
{{ form.server() }}
{{ form.repo_id() }}
<div class="form-group">
{{ form.name.label }}
{{ form.name(class="form-control", required=True) }}
</div>
<div class="form-group">
{{ form.addr.label }}
<div id="ip-fields">
{% for addr in form.addr %}
<div class="d-flex align-items-center mb-2">
{{ addr(class="form-control me-2", placeholder=_("Enter IP Address"), required=True) }}
<button type="button" class="btn btn-danger" onclick="removeIPField(this)">{{_('Remove') }}</button>
</div>
{% endfor %}
</div>
<button type="button" class="btn btn-primary" onclick="addIPField()">{{_('Add address') }}</button>
{{ form.submit(class="btn btn-success") }}
</div>
</form>
<script>
function addIPField() {
const container = document.createElement('div');
container.classList.add('d-flex', 'align-items-center', 'mb-2');
const newField = document.createElement('input');
newField.setAttribute('type', 'text');
newField.setAttribute('name', 'addr-' + document.querySelectorAll('input[name^="addr-"]').length);
newField.classList.add('form-control', 'me-2');
newField.setAttribute('placeholder', '{{ _('Enter IP Address') }}');
newField.required = true;
const removeButton = document.createElement('button');
removeButton.setAttribute('type', 'button');
removeButton.classList.add('btn', 'btn-danger');
removeButton.innerText = '{{ _('Remove') }}';
removeButton.onclick = function() {
removeIPField(this);
};
container.appendChild(newField);
container.appendChild(removeButton);
document.getElementById('ip-fields').appendChild(container);
}
function removeIPField(elem) {
const ipFieldsContainer = document.getElementById('ip-fields');
const ipFieldDivs = ipFieldsContainer.querySelectorAll('.d-flex');
if (ipFieldDivs.length <= 1) {
return;
}
const parentDiv = elem.parentElement;
parentDiv.remove();
}
</script>
|
