95 lines
3.5 KiB
Twig
95 lines
3.5 KiB
Twig
{% extends 'data_entry.html.twig' %}
|
|
|
|
{% block title %}Vocab - Functional context | ArCOA{% endblock %}
|
|
|
|
{% block rightpanel %}
|
|
<div class="container" style="max-width: 50vw">
|
|
<h1 class="is-size-1 mt-0 has-text-centered">Edit vocabulary</h1>
|
|
<h2 class="is-size-3 mt-4 has-text-centered">Functional context</h2>
|
|
|
|
<div class="container mt-6">
|
|
<!-- For AJAX calls... TODO: not working from controller? -->
|
|
<article class="message is-success is-hidden" id="ajax-success">
|
|
<div class="message-body"></div>
|
|
</article>
|
|
{% for message in app.flashes('notice') %}
|
|
<article class="message is-success">
|
|
<div class="message-body">{{ message }}</div>
|
|
</article>
|
|
{% endfor %}
|
|
<form method="post" action="{{ path('app_vocab_func_context_add') }}">
|
|
<label class="label">Add new term</label>
|
|
<div class="field has-addons">
|
|
<div class="control">
|
|
<input class="input" name="_term" type="text" placeholder="Add new term">
|
|
</div>
|
|
<div class="control">
|
|
<button type="submit" class="button is-link">
|
|
Add
|
|
<span class="icon ml-3">
|
|
<i class="fa fa-plus"></i>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<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><th>Actions</th></tr>
|
|
{% for term in terms %}
|
|
<tr data-row-id="{{ term.id }}">
|
|
<td>
|
|
<input class="input" type="text" value="{{ term.term }}" disabled data-term-id="{{ term.id }}" />
|
|
</td>
|
|
<td>
|
|
<div class="buttons">
|
|
<button class="button is-link" data-id-edit="{{ term.id }}">
|
|
Edit
|
|
<span class="icon ml-2">
|
|
<i class="fa fa-pencil"></i>
|
|
</span>
|
|
</button>
|
|
<button class="button is-danger" data-id-delete="{{ term.id }}">
|
|
Delete
|
|
<span class="icon ml-2">
|
|
<i class="fa fa-trash"></i>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</table>
|
|
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript" defer>
|
|
const terms = document.querySelector('#terms');
|
|
|
|
terms.addEventListener('click', async (event) => {
|
|
const clicked = event.target;
|
|
|
|
if (clicked.classList.contains('is-danger')) {
|
|
const termId = clicked.getAttribute('data-id-delete');
|
|
|
|
const data = new FormData;
|
|
data.append("_id", termId);
|
|
|
|
const res = await fetch("{{ path('app_vocab_func_context_del') }}", {
|
|
method: "POST",
|
|
body: data,
|
|
});
|
|
|
|
const notice = document.querySelector('#ajax-success');
|
|
|
|
if (res.status === 200) {
|
|
notice.firstElementChild.innerHTML = 'Term deleted successfully';
|
|
notice.classList.remove('is-hidden');
|
|
const row = document.querySelector(`tr[data-row-id="${termId}"]`);
|
|
row.remove();
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %} |