Fix datetime picker modal detection and add _notif, _get and _post functions

This commit is contained in:
Tom Hubrecht 2021-08-21 15:17:52 +02:00
parent c7bc1fbe16
commit e14ceca91a
3 changed files with 53 additions and 19 deletions

View file

@ -6,16 +6,16 @@
{# DateTimePicker #}
<script src="{% static 'vendor/datetimepicker/picker.js' %}"></script>
<link rel="stylesheet" href="{% static 'vendor/datetimepicker/picker.css' %}">
{% endblock %}
{% block custom_js %}
<script>
{% get_current_language as LANGUAGE_CODE %}
document.addEventListener('DOMContentLoaded', () => {
new DateTimePicker('input[name=start_date]', {
lang: '{{ LANGUAGE_CODE }}',
});
new DateTimePicker('input[name=end_date]', {
lang: '{{ LANGUAGE_CODE }}',
});
new DateTimePicker('input[name=start_date]', {
lang: '{{ LANGUAGE_CODE }}',
});
new DateTimePicker('input[name=end_date]', {
lang: '{{ LANGUAGE_CODE }}',
});
</script>

View file

@ -6,16 +6,16 @@
{# DateTimePicker #}
<script src="{% static 'vendor/datetimepicker/picker.js' %}"></script>
<link rel="stylesheet" href="{% static 'vendor/datetimepicker/picker.css' %}">
{% endblock %}
{% block custom_js %}
<script>
{% get_current_language as LANGUAGE_CODE %}
document.addEventListener('DOMContentLoaded', () => {
new DateTimePicker('input[name=start_date]', {
lang: '{{ LANGUAGE_CODE }}',
});
new DateTimePicker('input[name=end_date]', {
lang: '{{ LANGUAGE_CODE }}',
});
new DateTimePicker('input[name=start_date]', {
lang: '{{ LANGUAGE_CODE }}',
});
new DateTimePicker('input[name=end_date]', {
lang: '{{ LANGUAGE_CODE }}',
});
</script>

View file

@ -28,13 +28,48 @@
const _id = s => document.getElementById(s);
const _get = (u, f) => {
const xhr = new XMLHttpRequest();
xhr.responseType = 'json';
xhr.addEventListener('load', () => {
f(xhr.response);
});
xhr.open('GET', u);
xhr.send();
};
const _post = (u, d, f) => {
const xhr = new XMLHttpRequest();
const fd = new FormData(d);
xhr.responseType = 'json';
xhr.addEventListener('load', () => {
f(xhr.response);
});
xhr.open('POST', u);
xhr.send(fd);
};
const _notif = (m, c = 'success') => {
const n = document.createElement('div');
n.classList.add('notification', `is-${c}`, 'is-light');
n.innerHTML = `${m}<button class="delete"></button>`;
_id('notifications').insertBefore(n, _id('content'))
_$('.delete', n, false).addEventListener('click', () => {
n.remove();
});
}
document.addEventListener('DOMContentLoaded', () => {
// Delete notifications
_$('.notification .delete').forEach(d => {
const n = d.parentNode;
d.addEventListener('click', () => {
n.parentNode.removeChild(n);
n.remove();
});
});
@ -270,9 +305,8 @@
<div class="main-content">
<div class="columns is-centered">
<div class="column is-two-thirds-fullhd is-12-desktop is-12-widescreen">
<section class="section pt-3">
<section id="notifications" class="section pt-3">
{% if messages %}
{% for message in messages %}
<div class="notification is-{{ message.level_tag|bulma_message_tag }} is-light">
{% if 'safe' in message.tags %}
@ -283,9 +317,8 @@
<button class="delete"></button>
</div>
{% endfor %}
{% endif %}
<div class="box">
<div id="content" class="box">
{% block content %}
{% endblock content %}
</div>
@ -299,6 +332,7 @@
{% blocktrans %}Développé par <a class="tag is-light is-danger" href="https://www.eleves.ens.fr/kde">KDEns</a>. En cas de pépin, contacter <span class="tag is-info is-light">klub-dev [at] ens [dot] fr</span>.{% endblocktrans %}
</p>
</footer>
{% block custom_js %}{% endblock %}
</body>
</html>