Implement alias editing views and templates
parent
5a66236828
commit
6b0851ab6f
@ -0,0 +1,17 @@
|
|||||||
|
var modal = document.querySelector('.modal'); // assuming you have only 1
|
||||||
|
var html = document.querySelector('html');
|
||||||
|
modal.querySelector('.modal-background').addEventListener('click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
modal.classList.remove('is-active');
|
||||||
|
html.classList.remove('is-clipped');
|
||||||
|
});
|
||||||
|
modal.querySelector('.modal-close').addEventListener('click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
modal.classList.remove('is-active');
|
||||||
|
html.classList.remove('is-clipped');
|
||||||
|
});
|
||||||
|
modal.querySelector('.modal-close-button').addEventListener('click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
modal.classList.remove('is-active');
|
||||||
|
html.classList.remove('is-clipped');
|
||||||
|
});
|
@ -0,0 +1,7 @@
|
|||||||
|
#tab-content div {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tab-content div.is-active {
|
||||||
|
display: block;
|
||||||
|
}
|
@ -0,0 +1,35 @@
|
|||||||
|
// tabbed browsing for the modal
|
||||||
|
function initTabs() {
|
||||||
|
TABS.forEach((tab) => {
|
||||||
|
tab.addEventListener('click', (e) => {
|
||||||
|
let selected = tab.getAttribute('data-tab');
|
||||||
|
updateActiveTab(tab);
|
||||||
|
updateActiveContent(selected);
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateActiveTab(selected) {
|
||||||
|
TABS.forEach((tab) => {
|
||||||
|
if (tab && tab.classList.contains(ACTIVE_CLASS)) {
|
||||||
|
tab.classList.remove(ACTIVE_CLASS);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
selected.classList.add(ACTIVE_CLASS);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateActiveContent(selected) {
|
||||||
|
CONTENT.forEach((item) => {
|
||||||
|
if (item && item.classList.contains(ACTIVE_CLASS)) {
|
||||||
|
item.classList.remove(ACTIVE_CLASS);
|
||||||
|
}
|
||||||
|
let data = item.getAttribute('data-content');
|
||||||
|
if (data === selected) {
|
||||||
|
item.classList.add(ACTIVE_CLASS);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
var TABS = [...document.querySelectorAll('#tabs li')];
|
||||||
|
var CONTENT = [...document.querySelectorAll('#tab-content div')];
|
||||||
|
var ACTIVE_CLASS = 'is-active';
|
||||||
|
initTabs();
|
@ -0,0 +1,73 @@
|
|||||||
|
{% load index %}
|
||||||
|
{% load static %}
|
||||||
|
{% load joinsep %}
|
||||||
|
|
||||||
|
<script src="{% static 'modal.js' %}"></script>
|
||||||
|
<div class="modal is-active is-clipped">
|
||||||
|
<div class="modal-background"></div>
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="box">
|
||||||
|
<h4 class="subtitle is-4">Edit aliases</h4>
|
||||||
|
<form
|
||||||
|
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
|
||||||
|
hx-post="{% url 'threshold_irc_aliases_edit' %}"
|
||||||
|
hx-target="#aliases"
|
||||||
|
hx-swap="outerHTML">
|
||||||
|
<div class="content" style="max-height: 30em; overflow: auto;">
|
||||||
|
<div class="table-container">
|
||||||
|
<table class="table is-fullwidth is-hoverable">
|
||||||
|
<thead>
|
||||||
|
<th>num</th>
|
||||||
|
<th>nick</th>
|
||||||
|
<th>realname</th>
|
||||||
|
<th>emails</th>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{% for alias in aliases %}
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
{{ alias.num }}
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div class="field">
|
||||||
|
<input class="input" type="text" name="{{ alias.num }}|nick" value="{{ alias.nick }}">
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div class="field">
|
||||||
|
<input class="input" type="text" name="{{ alias.num }}|realname" value="{{ alias.realname }}">
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div class="field">
|
||||||
|
<textarea class="textarea" name="{{ alias.num }}|emails">{{ alias.emails|joinsep:'\n' }}</textarea>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{% endfor %}
|
||||||
|
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
class="button is-primary modal-close-button">
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button class="button is-primary modal-close-button">Submit</button>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<button class="modal-close is-large" aria-label="close"></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue