Skip to content

GitLab

Commit cbffda00 authored by Mat's avatar Mat
Browse files

implémente jquery-ui et le plugin sortable sur la page offreLégumes

parent 7d414bf1
Hide whitespace changes
Inline Side-by-side
src/PotageBundle/Resources/views/Legume/ajaxDisplay.html.twig
View file @ cbffda00
......@@ -270,7 +270,7 @@
let td3 = document.createElement('td');
td3.innerHTML = jsonRow.image ?
'<div class="logo-sm"><div class="crop"><img src="/web/uploads/images/legumes/'
'<div class="logo sm"><div class="crop"><img src="/web/uploads/images/legumes/'
+ jsonRow.image + '" /></div></div>': null;
tr.appendChild(td3);
......@@ -429,7 +429,7 @@
titleInsertForm.textContent = 'Insérer le légume # ' + formatNumber(legumeId, 3) + ' dans une offre';
let imageInsertForm = document.querySelector('#form-offre-legume-insert-img');
imageInsertForm.innerHTML = '<div class="logo-md"><div class="crop"><img src="/web/uploads/images/legumes/'
imageInsertForm.innerHTML = '<div class="logo md"><div class="crop"><img src="/web/uploads/images/legumes/'
+ jsonRow.image + '" /></div></div>';
let descriptionInsertForm = document.querySelector('#form-offre-legume-insert-div');
......
src/PotageBundle/Resources/views/OffreLegumes/ajaxDisplay.html.twig
View file @ cbffda00
......@@ -35,10 +35,11 @@
<div class="row">
<section class="col-9">
<div class="row">
<div class="col left hd-1">
<h1>{{ block('title') }}</h1>
</div>
<div class="col right hd-1">
<div style="margin-top: 0.65em;">
......@@ -46,31 +47,29 @@
<i class="fas fa-sync-alt"></i>
Rafraîchir la liste
</a>
{#
<a href="javascript: void(0);" class="btn btn-dark mb-2 btn-create"
data-toggle="modal" data-target=".form-offre-modal">
<i class="fas fa-plus"></i>
Créer une nouvelle offre
Ajouter un légume
</a>
#}
</div>
</div>
</div>
<table id="maintab" class="table offre-legumes table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Vignette</th>
<th scope="col">Nom</th>
<th scope="col">Prix</th>
<th scope="col">Ordre</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; }
#sortable div { width: 220px; height: 290px;}
#sortable div.ui-state-default { margin: 1em 1em 0 0; padding: 0; float: left; }
</style>
<div id="maingrid" class="grid offre-legumes table-striped">
<div id="sortable">
<div class="ui-state-default">1</div>
</div>
</div>
</section>
{% endblock %}
......@@ -120,6 +119,7 @@
{% block customJS %}
<script type="text/javascript" src="{{ asset('js/functions.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/ajax_functions.js') }}"></script>
<script type="text/javascript">
......@@ -127,11 +127,11 @@
/*
* Recharge la table OffreLegumes
*/
function reloadTableLegumes()
function reloadGridLegumes()
{
let table = document.querySelector('table#maintab.offre-legumes');
let tbody = table.querySelector('tbody');
tbody.innerHTML = null;
let grid = document.querySelector('div#maingrid.offre-legumes');
let sortable = grid.querySelector('div#sortable');
sortable.innerHTML = null;
let URL = Routing.generate('api_offre_legumes_read', {'id': id_offre });
......@@ -140,8 +140,8 @@
let json = JSON.parse(request.responseText);
for(let i = 0; i < json.length; i++ )
{
let tr = buildRowOffreLegumes(json[i]);
tbody.appendChild(tr);
let div = buildItemOffreLegumes(json[i]);
sortable.appendChild(div);
}
});
}
......@@ -151,38 +151,55 @@
* Construit une rangée du tableau des Offres
* @param json object jsonRow
*/
function buildRowOffreLegumes(jsonRow)
function buildItemOffreLegumes(jsonRow)
{
console.log(jsonRow);
let tr = document.createElement('tr');
let div = document.createElement('div');
div.classList.add('ui-state-default');
div.dataset.legumeId = jsonRow.id;
let logo = document.createElement('div');
logo.classList.add('logo', 'lg');
let td1 = document.createElement('td');
td1.textContent = jsonRow.id;
tr.appendChild(td1);
let crop = document.createElement('div');
crop.classList.add('crop');
let td2 = document.createElement('td');
td2.innerHTML = jsonRow.image ? '<div class="logo-sm"><div class="crop">' +
'<img src="/web/uploads/images/legumes/' + jsonRow.image + '" /></div></div>': null;
tr.appendChild(td2);
let img = document.createElement('img');
img.setAttribute('src', '/web/uploads/images/legumes/' + jsonRow.image);
let td3 = document.createElement('td');
td3.textContent = jsonRow.nom;
tr.appendChild(td3);
/*
let td1 = document.createElement('td');
td1.textContent = jsonRow.id;
div.appendChild(td1);
let td4 = document.createElement('td');
td4.textContent = jsonRow.prix_unitaire + '€/' + jsonRow.unite;
tr.appendChild(td4);
let td2 = document.createElement('td');
td2.innerHTML = jsonRow.image ? '<div class="logo-sm"><div class="crop">' +
'<img src="/web/uploads/images/legumes/' + jsonRow.image + '" /></div></div>': null;
div.appendChild(td2);
let td5 = document.createElement('td');
td5.textContent = jsonRow.ordre;
tr.appendChild(td5);
let td3 = document.createElement('td');
td3.textContent = jsonRow.nom;
div.appendChild(td3);
let td6 = document.createElement('td');
td6.textContent = "boutons";
tr.appendChild(td6);
let td4 = document.createElement('td');
td4.textContent = jsonRow.prix_unitaire + '€/' + jsonRow.unite;
div.appendChild(td4);
return tr;
let td5 = document.createElement('td');
td5.textContent = jsonRow.ordre;
div.appendChild(td5);
let td6 = document.createElement('td');
td6.textContent = "boutons";
div.appendChild(td6);
*/
crop.appendChild(img);
logo.appendChild(crop);
div.appendChild(logo);
return div;
}
/*
......@@ -196,7 +213,7 @@
//let form = document.querySelector('form[name=offre]');
//let titleForm = document.querySelector('#form-offre');
reloadTableLegumes();
reloadGridLegumes();
/*
......@@ -206,10 +223,22 @@
reloadBtns.forEach(function(reloadBtn) {
reloadBtn.addEventListener('click', function()
{
reloadTableLegumes();
reloadGridLegumes();
});
});
/*
* jQuery-ui Sortable
*/
$( function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
} );
</script>
{% endblock %}
......
src/PotageBundle/Resources/views/layout.html.twig
View file @ cbffda00
......@@ -5,6 +5,11 @@
{% endblock %}
{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('js/jquery-ui/jquery-ui.min.css') }}">
<link rel="stylesheet" href="{{ asset('js/jquery-ui/jquery-ui.structure.min.css') }}">
<link rel="stylesheet" href="{{ asset('js/jquery-ui/jquery-ui.theme.min.css') }}">
{#
#}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
{% endblock %}
......@@ -83,6 +88,7 @@
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script src="{{ asset('js/jquery-ui/jquery-ui.min.js') }}"></script>
{% block customJS %}
{% endblock %}
{% endblock %}
web/css/style.css
View file @ cbffda00
......@@ -135,40 +135,30 @@ span#rebours {
padding: 3rem;
}
.logo-md {
width: 150px;
height: 150px;
}
.logo-sm {
width: 50px;
height: 50px;
}
.logo-md,
.logo-sm {
/**/
.logo.sm { width: 50px; height: 50px; }
.logo.sm .crop img { height: 50px; /*width: 50px;*/ }
.logo.md { width: 150px; height: 150px; }
.logo.md .crop img { height: 150px; /*width: 100px;*/ }
.logo.lg { width: 250px; height: 250px; }
.logo.lg .crop { border-radius: 0; }
.logo.lg .crop img { height: 250px; /*width: 100px;*/ }
.logo {
display: inline-block;
vertical-align: top;
overflow: hidden;
}
.logo-md, .logo-md .crop,
.logo-sm, .logo-sm .crop {
.logo .crop {
border-radius: 5px;
}
.logo-md .crop,
.logo-sm .crop {
height: 100%;
position: relative;
overflow: hidden;
}
.logo-md .crop img {
height: 150px; /*
width: 100px;*/
}
.logo-sm .crop img {
height: 50px; /*
width: 50px;*/
}
.logo-md .crop img,
.logo-sm .crop img {
.logo .crop img {
min-width: 100%;
min-height: 100%;
display: block;
......@@ -180,6 +170,8 @@ span#rebours {
left: -100%;
}
/**/
#legume_imageFile label[for="legume_imageFile_file"] {
display: none;
}
......@@ -204,3 +196,5 @@ table#maintab span.details {
#card-button-ajouter .card-header a {
padding: 1em;
}
Markdown is supported
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