Commit 5d9e8157 authored by Mat's avatar Mat
Browse files

Affiche en ajax les données Offre de l'API

parent a6b48bf7
......@@ -2,7 +2,7 @@
namespace PotageBundle\Controller;
use APIBundle\Form\OffreAPIType;
class OffreController extends MasterController
{
......@@ -12,10 +12,9 @@ class OffreController extends MasterController
*/
public function ajaxDisplayAction()
{
//$form = $this->createForm(OffreAPIType::class);
$form = $this->createForm(OffreAPIType::class);
return $this->render('@Potage/Offre/ajaxDisplay.html.twig', array(
//'nbRows' => $nbRows,
//'formOffre' => $form->createView()
'formOffre' => $form->createView()
));
}
}
......@@ -29,11 +29,14 @@
</div>
<div class="col right hd-1">
<div style="margin-top: 0.65em;">
{#
<a href="javascript: void(0);" class="btn btn-outline-dark btn-sm btn-reload">
<i class="fas fa-sync-alt"></i>
Rafraîchir la liste
</a>
<a href="javascript: void(0);" class="btn btn-dark btn-sm btn-create" data-toggle="modal" data-target=".form-offre-modal">
#}
<a href="javascript: void(0);" class="btn btn-dark btn-sm btn-create"
data-toggle="modal" data-target=".form-offre-modal">
<i class="fas fa-plus"></i>
Ajouter une nouvelle offre
</a>
......@@ -44,7 +47,7 @@
{% block sidebarContent %}
<div class="row">
<aside class="col-4">
<aside class="col-3">
<h3>Titre</h3>
<ul>
<li>
......@@ -59,10 +62,125 @@
{% endblock %}
{% block sectionContent %}
<section class="col-8">
<h3>Offres en préparation</h3>
<h3>Offres en cours</h3>
<h3>Offres clôturées</h3>
<section class="col-9">
{% include '@Potage/Offre/ajaxForm.html.twig' %}
<table id="maintab" class="table offres table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Référence</th>
<th scope="col">Créée le</th>
<th scope="col">Date de clôture</th>
<th scope="col">Statut</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</section>
</div>
{% endblock %}
\ No newline at end of file
{% endblock %}
{% block customJS %}
<script type="text/javascript" src="{{ asset('js/ajax_functions.js') }}"></script>
<script type="text/javascript">
let submitURL = null;
let table = document.querySelector('table#maintab.offres');
let tbody = table.querySelector('tbody');
let total = parseInt(document.querySelector('#t_rows').textContent);
let tpage = document.querySelector('#t_pages');
let form = document.querySelector('form[name=offre]');
let titleForm = document.querySelector('#form-offre');
/*
* Recharge la table
*/
function reloadTableOffre(){
tbody.innerHTML = null;
let offreURL = Routing.generate('api_offre_read');
AJAX('GET', offreURL, function(request)
{
let json = JSON.parse(request.responseText);
//console.log(json);
for(let i = 0; i < json.length; i++ )
{
let tr = document.createElement('tr');
let td1 = document.createElement('td');
td1.textContent = json[i].id;
tr.appendChild(td1);
let td2 = document.createElement('td');
td2.textContent = json[i].reference;
tr.appendChild(td2);
let td3 = document.createElement('td');
td3.textContent = formatStringDate(json[i].created_at);
tr.appendChild(td3);
let td4 = document.createElement('td');
td4.textContent = formatStringDate(json[i].ended_at);
tr.appendChild(td4);
let td5 = document.createElement('td');
let listStatus = {
'draft': 'préparation',
'current': 'en cours',
'closed': 'terminé',
'trash': 'corbeille'
};
for(let statut in listStatus) {
if (statut === json[i].status) {
td5.textContent = listStatus[statut];
}}
tr.appendChild(td5);
tbody.appendChild(tr);
}
});
}
reloadTableOffre();
/*
* Ajouter une nouvelle offre
*/
let createBtns = document.querySelectorAll('.btn-create');
createBtns.forEach(function(createBtn) {
createBtn.addEventListener('click', function()
{
titleForm.textContent = 'Nouvelle offre';
//form.querySelector('#offre_ended_at').value = null;
//form.querySelector('#offre_status').value = 'draft';
submitURL = Routing.generate('api_offre_create');
});
});
/*
* Soumission du formulaire
*/
form.addEventListener('submit', function(e)
{
let form = this;
e.preventDefault();
AJAX('POST', submitURL, function() {
reloadTableOffre();
}, form);
});
</script>
{% endblock %}
<div class="modal fade form-offre-modal" tabindex="-1" role="dialog" aria-labelledby="FormOffreModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title" id="form-offre"></h2>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
{{ form_start(formOffre) }}
<div class="modal-body">
{{ form_errors(formOffre) }}
<div class="form-group row">
<div class="col-sm-4">
{{ form_label(formOffre.endedAt) }}
</div>
<div class="col-sm-8">
{{ form_widget(formOffre.endedAt) }}
{{ form_errors(formOffre.endedAt) }}
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary mb-2" data-dismiss="modal">Fermer</button>
{{ form_label(formOffre.sauver) }}
{{ form_widget(formOffre.sauver) }}
</div>
{{ form_rest(formOffre) }}
{{ form_end(formOffre) }}
</div>
</div>
</div>
/*
* fonctions de date
*/
function formatNumber(number)
{
return ('0' + number).slice(-2);
}
function formatDate(date)
{
return date.getDate() + '/' + (date.getMonth() +1) + '/' + date.getFullYear();
let weekday = ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'];
let month = ['janvier','février','mars','avril','mai','juin','juillet','août','septembre','octobre','novembre','décembre'];
return weekday[date.getDay()]
+ ' ' + formatNumber(date.getDate())
//+ '/' + formatNumber(date.getMonth() +1) + '/'
+ ' ' + month[date.getMonth()] + ' '
+ date.getFullYear();
}
function formatStringDate(string)
{
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment