Last active
October 13, 2021 14:56
-
-
Save khalid-s/9e4158fae40f8753cb5f074d0edadb18 to your computer and use it in GitHub Desktop.
Lyon CDA 2
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let persons = []; | |
| let addPerson = function () { | |
| let data = $('form').serializeArray(); | |
| let person = { index: new Date().getTime(), name: data[0].value, email: data[1].value } | |
| if ($('form input[type=hidden]').length) { | |
| let item = persons.find(item => { | |
| return item.index === parseInt($('input[type=hidden]').val()) | |
| }); | |
| item.name = person.name; | |
| item.email = person.email; | |
| } else { | |
| persons.push(person); | |
| } | |
| render(); | |
| $('form input[type=hidden]').remove(); | |
| } | |
| let render = () => { | |
| let tbodyContent = ''; | |
| persons.forEach(person => { | |
| tbodyContent += `<tr> | |
| <td>${person.index}</td> | |
| <td>${person.name}</td> | |
| <td>${person.email}</td> | |
| <td> | |
| <button class="edit-button" data-id='${person.index}'>Modifier</button> | |
| <button class="delete-button" data-id='${person.index}'>Supprimer</button> | |
| </td> | |
| </tr>` | |
| }) | |
| $('tbody').html(tbodyContent); | |
| $(`.delete-button`).off().on('click', function () { | |
| deleteItem($(this).data('id')); | |
| }) | |
| $(`.edit-button`).off().on('click', function () { | |
| editItem($(this).data('id')); | |
| }) | |
| } | |
| let deleteItem = (id) => { | |
| persons = persons.filter(person => person.index !== id) | |
| render(); | |
| } | |
| let editItem = (id) => { | |
| let person = persons.find(person => person.index === id); | |
| $('form input[name=name]').val(person.name); | |
| $('form input[name=email]').val(person.email); | |
| $('form input[type=hidden]').remove(); | |
| $('form').append(`<input type="hidden" value="${person.index}">`); | |
| } | |
| /** | |
| * @todo à chaque soumission du formulaire, mettre les données soumis | |
| * dans un tableau HTML avant le formulaire | |
| * @todo Je dois pouvoir supprimer une ligne de mon tableau | |
| * @todo je dois pouvoir modifier une ligne dans mon tableu | |
| */ | |
| fetch('/persons.json') | |
| .then(response => { | |
| response.json().then(remotePersons => { | |
| persons = [...remotePersons]; | |
| render() | |
| }) | |
| }) | |
| render(); | |
| let displayFlash = function ({ status, message }) { | |
| $('.form').removeClass('error').removeClass('success'); | |
| $('.form').addClass(status); | |
| $('.form').prepend(`<p class='flash-message'>${message}</p>`); | |
| window.setTimeout(function () { $('.flash-message').remove() }, 3000) | |
| } | |
| $(document).on('PERSON_TO_CREATE', function () { | |
| addPerson() | |
| }) | |
| const API_URL = 'https://2i-js.iknsa.xyz/create-user.php'; | |
| $.get(API_URL) | |
| .then(function (response) { | |
| $('.form').html(response); | |
| $('form').submit(function (event) { | |
| event.preventDefault(); | |
| const data = $(this).serializeArray(); | |
| $.post(API_URL, data) | |
| .then(function (response) { | |
| displayFlash( | |
| { | |
| status: response.success ? 'success' : 'error', | |
| message: response.message | |
| } | |
| ); | |
| if (response.success) $(document).trigger('PERSON_TO_CREATE'); | |
| }) | |
| }) | |
| }) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment