Crazy JS + bibliography routes (incomplete)

This commit is contained in:
2024-10-31 18:56:29 +01:00
parent 6c47dc8a1e
commit f8e470b096
5 changed files with 121 additions and 28 deletions

View File

@@ -9,15 +9,6 @@
<div class="container mt-6">
<!-- For AJAX calls... TODO: not working from controller? -->
<div class="notification is-success is-hidden" id="ajax-success">
<button class="delete"></button>
</div>
{% for message in app.flashes('notice') %}
<div class="notification is-success" id="server-success">
<button class="delete"></button>
{{ message }}
</div>
{% endfor %}
{% if is_granted('ROLE_ADMIN') or is_granted('ROLE_REVISOR') %}
<form method="post" action="{{ path('app_vocab_func_context_add') }}">
<label class="label">Add new term</label>
@@ -37,6 +28,14 @@
</form>
{% endif %}
<div class="notification is-success is-hidden mt-5" id="ajax-success">
</div>
{% for message in app.flashes('notice') %}
<div class="notification is-success mt-5" id="server-success">
<button class="delete"></button>
{{ message }}
</div>
{% endfor %}
<h3 class="mt-6 mb-5 is-size-5"><strong>Terms in vocabulary</strong></h3>
<table class="table is-fullwidth" id="terms">
<tr><th>Term</th>{% if is_granted('ROLE_ADMIN') or is_granted('ROLE_REVISOR') %}<th>Actions</th>{% endif %}</tr>
@@ -102,7 +101,10 @@
const notice = document.querySelector('#ajax-success');
if (res.status === 200) {
notice.innerHTML += 'Term deleted successfully';
notice.innerHTML = `
<button class="delete"></button>
Term updated successfully
`;
notice.classList.remove('is-hidden');
notice.querySelector('.delete').addEventListener('click', () => {
notice.classList.add('is-hidden');
@@ -112,13 +114,31 @@
}
}
if (clicked.classList.contains('is-link')) {
if (clicked.getAttribute('data-id-edit')) {
const termId = clicked.getAttribute('data-id-edit');
const saveBtn = document.querySelector(`button[data-id-save="${termId}"]`);
const input = document.querySelector(`input[data-term-id="${termId}"]`);
input.disabled = input.disabled ? false : true;
saveBtn.classList.toggle('is-hidden');
clicked.classList.toggle('is-link');
if (!clicked.classList.contains('is-link')) {
clicked.innerHTML = `
Cancel
<span class="icon ml-2">
<i class="fa fa-times"></i>
</span>
`;
} else {
clicked.innerHTML = `
Edit
<span class="icon ml-2">
<i class="fa fa-edit"></i>
</span>
`;
}
const data = new FormData;
data.append("_id", termId);
saveBtn.addEventListener('click', async () => {
@@ -131,7 +151,10 @@
const notice = document.querySelector('#ajax-success');
if (res.status === 200) {
notice.innerHTML += 'Term updated successfully';
notice.innerHTML = `
<button class="delete"></button>
Term updated successfully
`;
notice.classList.remove('is-hidden');
notice.querySelector('.delete').addEventListener('click', () => {
notice.classList.add('is-hidden');