Skip to content
Snippets Groups Projects
Commit c8590cae authored by DEHENNE Lucas, Marc, Lucien's avatar DEHENNE Lucas, Marc, Lucien
Browse files

Upload New File

parent 83736c63
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
v1 front/v3_toutesmodalesfonctionnelles.html 0 → 100644
+ 681
− 0
View file @ c8590cae
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Tableau</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link href=https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css rel=stylesheet>
<link href=https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.20/css/dataTables.bootstrap4.min.css rel=stylesheet>
<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.20/js/jquery.dataTables.min.js></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.20/js/dataTables.bootstrap4.min.js></script>
<!--
4/RECUP DONNEES SERVEUR
5/EDIT DONNES SERVEUR
6/AJOUTER SUR SERVEUR
-->
<style>
body {
color: #566787;
background: #f5f5f5;
font-family: 'Roboto', sans-serif;
}
.table-responsive {
margin: 30px 0;
}
.table-wrapper {
min-width: 1000px;
background: #fff;
padding: 20px;
box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
.table-title {
padding-bottom: 10px;
margin: 0 0 10px;
min-width: 100%;
}
.table-title h2 {
margin: 8px 0 0;
font-size: 22px;
}
.search-box {
position: relative;
float: right;
}
.search-box input {
height: 34px;
border-radius: 20px;
padding-left: 35px;
border-color: #ddd;
box-shadow: none;
}
.search-box input:focus {
border-color: #3FBAE4;
}
.search-box i {
color: #a0a5b1;
position: absolute;
font-size: 19px;
top: 8px;
left: 10px;
}
table.table tr th, table.table tr td {
border-color: #e9e9e9;
}
table.table-striped tbody tr:nth-of-type(odd) {
background-color: #fcfcfc;
}
table.table-striped.table-hover tbody tr:hover {
background: #f5f5f5;
}
table.table th i {
font-size: 13px;
margin: 0 5px;
cursor: pointer;
}
table.table td:last-child {
width: 130px;
}
table.table td a {
color: #a0a5b1;
display: inline-block;
margin: 0 5px;
}
table.table td a.view {
color: #03A9F4;
}
table.table td a.edit {
color: #FFC107;
}
table.table td a.delete {
color: #E34724;
}
table.table td i {
font-size: 19px;
}
.pagination {
float: right;
margin: 0 0 5px;
}
.pagination li a {
border: none;
font-size: 95%;
width: 30px;
height: 30px;
color: #999;
margin: 0 2px;
line-height: 30px;
border-radius: 30px !important;
text-align: center;
padding: 0;
}
.pagination li a:hover {
color: #666;
}
.pagination li.active a {
background: #03A9F4;
}
.pagination li.active a:hover {
background: #0397d6;
}
.pagination li.disabled i {
color: #ccc;
}
.pagination li i {
font-size: 16px;
padding-top: 6px
}
.hint-text {
float: left;
margin-top: 6px;
font-size: 95%;
}
</style>
<script>
$(document).ready(function() {
$('#example').DataTable();
});
$(document).ready(function(){
// Activate tooltips
// Show per page
/*
// Filter table rows based on searched term
$("#search").on("keyup", function() {
var term = $(this).val().toLowerCase();
console.log(term);
$("table tbody tr").each(function(){
$row = $(this);
var name = $row.find("td:nth-child(1)").text().toLowerCase();
//console.log(name);
if(name.search(term) < 0){
$row.hide();
} else{
$row.show();
}
});
});
*/
$(document).on('click','#saveproductedited',function(){
//console.log(10);
let nameed=document.querySelector('#productnameed').value;
console.log(nameed);
let ided=document.querySelector('#productided').value;
console.log(ided);
let qtted=document.querySelector('#productqtted').value;
console.log(qtted);
let typeed=document.querySelector('#producttypeed').value;
console.log(typeed);
let counted=document.querySelector('#select_qtted').value;
console.log(counted);
$('#productnameed').val('');
$('#productided').val('');
$('#productqtted').val('');
$('#producttypeed').val('');
//$('#select_qtt').val('');
let template=`
<li><label><input type="checkbox" name="lay${n}" value="${n}"> ${name}</label></li>
`;
$("#layers").prepend(template);
fileLayerNames.push(name);
$('#layername').val('');
nbLayerAdded++;
$("#editProduct").modal('hide');
featureslist.push([]);
let number= browzedfilelist.length-1;
fileLayers.push(browzedfilelist[number]);
});
$(document).on('click','#saveproductadded',function(){
//console.log(10);
let name=document.querySelector('#productname').value;
console.log(name);
let id=document.querySelector('#productid').value;
console.log(id);
let qtt=document.querySelector('#productqtt').value;
console.log(qtt);
let type=document.querySelector('#producttype').value;
console.log(type);
let count=document.querySelector('#select_qtt').value;
console.log(count);
$('#productname').val('');
$('#productid').val('');
$('#productqtt').val('');
$('#producttype').val('');
//$('#layername').val('');
let template=`
<li><label><input type="checkbox" name="lay${n}" value="${n}"> ${name}</label></li>
`;
$("#layers").prepend(template);
fileLayerNames.push(name);
$('#layername').val('');
nbLayerAdded++;
$("#editProduct").modal('hide');
featureslist.push([]);
let number= browzedfilelist.length-1;
fileLayers.push(browzedfilelist[number]);
});
});
</script>
</head>
<body>
<div class="container-xl">
<div class="table-wrapper">
<div class="row">
<div class="col-sm-9">
<h2>Mes <b>Stocks</b></h2>
</div>
<div class="col-sm-3">
<a href="#addProduct" class="btn btn-success" data-toggle="modal"><i class="material-icons">&#xE147;</i> Ajouter un Produit</a>
<!--
<a href="#save" class="btn btn-primary" data-toggle="modal"><i class="material-icons">save</i> Sauvegarder</a>
-->
</div>
</div>
</div>
<div class="table-responsive">
<div class="table-wrapper">
<div class="table-title">
<div class="row">
<div class="col-sm-8"><h2>Liste des stocks du restaurant</h2></div>
<!--
<div class="col-sm-4">
<div class="search-box">
<i class="material-icons">&#xE8B6;</i>
<input type="text" id = "search"class="form-control" placeholder="Recherche...">
</div>
</div>
-->
</div>
</div>
<table cellspacing=0 class="table table-bordered table-hover table-inverse table-striped"id=example width=100%>
<thead>
<tr class="info">
<th><b>Nom du produit</b></th>
<th><b>id</b></th>
<th><b>Quantité</b></th>
<th><b>Classification</b></th>
<th><b>Type de produit</b></th>
<th><b>Actions</b></th>
</tr>
<!--
<tr>
<th>Nom du produit <i class="fa fa-sort"></i></th>
<th>id</th>
<th>Quantité <i class="fa fa-sort"></i></th>
<th>Classification <i class="fa fa-sort"></i></th>
<th>Type de produit <i class="fa fa-sort"></i></th>
<th>Actions</th>
</tr>
-->
</thead>
<tbody>
<tr>
<td>Tomates</td>
<td>152369</td>
<td>6</td>
<td>Caisses</td>
<td>Fruit</td>
<td>
<a href="#editProduct" class="edit" title="Edit" data-toggle="modal"><i class="material-icons">&#xE254;</i></a>
<a href="#deleteProduct" class="delete" title="Delete" data-toggle="modal"><i class="material-icons">&#xE872;</i></a>
</td>
</tr>
<tr>
<td>Pommes</td>
<td>556983</td>
<td>2</td>
<td>Caisses</td>
<td>Fruit</td>
<td>
<a href="#editProduct" class="edit" title="Edit" data-toggle="modal"><i class="material-icons">&#xE254;</i></a>
<a href="#deleteProduct" class="delete" title="Delete" data-toggle="modal"><i class="material-icons">&#xE872;</i></a>
</td>
</tr>
<tr>
<td>Kwak rouge</td>
<td>5569875</td>
<td>7</td>
<td>Caisses</td>
<td>Biere 33</td>
<td>
<a href="#editProduct" class="edit" title="Edit" data-toggle="modal"><i class="material-icons">&#xE254;</i></a>
<a href="#deleteProduct" class="delete" title="Delete" data-toggle="modal"><i class="material-icons">&#xE872;</i></a>
</td>
</tr>
<tr>
<td>Kwak rouge</td>
<td>5569875</td>
<td>7</td>
<td>Caisses</td>
<td>Biere 33</td>
<td>
<a href="#editProduct" class="edit" title="Edit" data-toggle="modal"><i class="material-icons">&#xE254;</i></a>
<a href="#deleteProduct" class="delete" title="Delete" data-toggle="modal"><i class="material-icons">&#xE872;</i></a>
</td>
</tr>
<tr>
<td>Kwak rouge</td>
<td>5569875</td>
<td>7</td>
<td>Caisses</td>
<td>Biere 33</td>
<td>
<a href="#editProduct" class="edit" title="Edit" data-toggle="modal"><i class="material-icons">&#xE254;</i></a>
<a href="#deleteProduct" class="delete" title="Delete" data-toggle="modal"><i class="material-icons">&#xE872;</i></a>
</td>
</tr>
<tr>
<td>Kwak rouge</td>
<td>5569875</td>
<td>7</td>
<td>Caisses</td>
<td>Biere 33</td>
<td>
<a href="#editProduct" class="edit" title="Edit" data-toggle="modal"><i class="material-icons">&#xE254;</i></a>
<a href="#deleteProduct" class="delete" title="Delete" data-toggle="modal"><i class="material-icons">&#xE872;</i></a>
</td>
</tr>
<tr>
<td>Kwak rouge</td>
<td>5569875</td>
<td>7</td>
<td>Caisses</td>
<td>Biere 33</td>
<td>
<a href="#editProduct" class="edit" title="Edit" data-toggle="modal"><i class="material-icons">&#xE254;</i></a>
<a href="#deleteProduct" class="delete" title="Delete" data-toggle="modal"><i class="material-icons">&#xE872;</i></a>
</td>
</tr>
<tr>
<td>Kwak rouge</td>
<td>5569875</td>
<td>7</td>
<td>Caisses</td>
<td>Biere 33</td>
<td>
<a href="#editProduct" class="edit" title="Edit" data-toggle="modal"><i class="material-icons">&#xE254;</i></a>
<a href="#deleteProduct" class="delete" title="Delete" data-toggle="modal"><i class="material-icons">&#xE872;</i></a>
</td>
</tr>
<tr>
<td>Kwak rouge</td>
<td>5569875</td>
<td>7</td>
<td>Caisses</td>
<td>Biere 33</td>
<td>
<a href="#editProduct" class="edit" title="Edit" data-toggle="modal"><i class="material-icons">&#xE254;</i></a>
<a href="#deleteProduct" class="delete" title="Delete" data-toggle="modal"><i class="material-icons">&#xE872;</i></a>
</td>
</tr>
<tr>
<td>Kwak rouge</td>
<td>5569875</td>
<td>7</td>
<td>Caisses</td>
<td>Biere 33</td>
<td>
<a href="#editProduct" class="edit" title="Edit" data-toggle="modal"><i class="material-icons">&#xE254;</i></a>
<a href="#deleteProduct" class="delete" title="Delete" data-toggle="modal"><i class="material-icons">&#xE872;</i></a>
</td>
</tr>
<tr>
<td>Kwak rouge</td>
<td>5569875</td>
<td>7</td>
<td>Caisses</td>
<td>Biere 33</td>
<td>
<a href="#editProduct" class="edit" title="Edit" data-toggle="modal"><i class="material-icons">&#xE254;</i></a>
<a href="#deleteProduct" class="delete" title="Delete" data-toggle="modal"><i class="material-icons">&#xE872;</i></a>
</td>
</tr>
<tr>
<td>Kwak rouge</td>
<td>5569875</td>
<td>7</td>
<td>Caisses</td>
<td>Biere 33</td>
<td>
<a href="#editProduct" class="edit" title="Edit" data-toggle="modal"><i class="material-icons">&#xE254;</i></a>
<a href="#deleteProduct" class="delete" title="Delete" data-toggle="modal"><i class="material-icons">&#xE872;</i></a>
</td>
</tr>
<tr>
<td>Kwak rouge</td>
<td>5569875</td>
<td>7</td>
<td>Caisses</td>
<td>Biere 33</td>
<td>
<a href="#editProduct" class="edit" title="Edit" data-toggle="modal"><i class="material-icons">&#xE254;</i></a>
<a href="#deleteProduct" class="delete" title="Delete" data-toggle="modal"><i class="material-icons">&#xE872;</i></a>
</td>
</tr>
<tr>
<td>Kwak rouge</td>
<td>5569875</td>
<td>7</td>
<td>Caisses</td>
<td>Biere 33</td>
<td>
<a href="#editProduct" class="edit" title="Edit" data-toggle="modal"><i class="material-icons">&#xE254;</i></a>
<a href="#deleteProduct" class="delete" title="Delete" data-toggle="modal"><i class="material-icons">&#xE872;</i></a>
</td>
</tr>
<tr>
<td>Kwak rouge</td>
<td>5569875</td>
<td>7</td>
<td>Caisses</td>
<td>Biere 33</td>
<td>
<a href="#editProduct" class="edit" title="Edit" data-toggle="modal"><i class="material-icons">&#xE254;</i></a>
<a href="#deleteProduct" class="delete" title="Delete" data-toggle="modal"><i class="material-icons">&#xE872;</i></a>
</td>
</tr>
</tbody>
</table>
<!--
<div class="clearfix">
<div class="hint-text">Produits de <b>3</b> à <b>3</b> </div>
<ul class="pagination">
<li class="page-item disabled"><a href="#"><i class="fa fa-angle-double-left"></i></a></li>
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link"><i class="fa fa-angle-double-right"></i></a></li>
</ul>
</div>
-->
</div>
</div>
</div>
<!-- addProduct Modal HTML -->
<div id="addProduct" class="modal fade show" >
<div class="modal-dialog" role="document" style="min-width: 1000px" >
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"><b>Ajouter un produit</b></h5>
<button type="button" class="close" id="closepopup" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<div class="row">
<div class="col-md-6">
<label class="col-form-label">Nom du produit <sup style="color:red">*</sup></label>
<input type="text" id="productname" class="form-control" name="product[name]" required="">
</div>
<div class="col-md-6">
<label class="col-form-label">Identifiant du produit <sup style="color:red">*</sup></label>
<input type="text" id="productid" class="form-control" name="product[id]" required="">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="col-form-label">Quantité du produit<sup style="color:red">*</sup></label>
<input type="number" id="productqtt" class="form-control" name="product[qtt]" required="">
</div>
<div class="col-md-6">
<label class="col-form-label">Comptage<sup style="color:red">*</sup></label>
<div class="form-group">
<select class="selectpicker form-control" id="select_qtt">
<option>Caisses</option>
<option>Carton</option>
<option>Kg</option>
<option>L</option>
<option>Bouteilles</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<label class="col-form-label">Type de produit <sup style="color:red">*</sup></label>
<input type="text" id="producttype" class="form-control" name="layer[type]" required="">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" id="closepopup2" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
<button type="button" class="btn btn-primary" id="saveproductadded" data-dismiss="modal" data-controller="saveProductadded">Sauvegarder</button>
</div>
</div>
</div>
</div>
<!-- Edit Modal HTML -->
<div id="editProduct" class="modal fade">
<div class="modal-dialog" role="document" style="min-width: 1000px" >
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"><b>Editer un produit</b></h5>
<button type="button" class="close" id="closepopup" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<div class="row">
<div class="col-md-6">
<label class="col-form-label">Nom du produit <sup style="color:red">*</sup></label>
<input type="text" id="productnameed" class="form-control" name="product[name]" required="">
</div>
<div class="col-md-6">
<label class="col-form-label">Identifiant du produit <sup style="color:red">*</sup></label>
<input type="text" id="productided" class="form-control" name="product[id]" required="">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="col-form-label">Quantité du produit<sup style="color:red">*</sup></label>
<input type="number" id="productqtted" class="form-control" name="product[qtt]" required="">
</div>
<div class="col-md-6">
<label class="col-form-label">Comptage<sup style="color:red">*</sup></label>
<div class="form-group">
<select class="selectpicker form-control" id="select_qtted">
<option>Caisses</option>
<option>Carton</option>
<option>Kg</option>
<option>L</option>
<option>Bouteilles</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<label class="col-form-label">Type de produit <sup style="color:red">*</sup></label>
<input type="text" id="producttypeed" class="form-control" name="layer[type]" required="">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" id="closepopup2" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
<button type="button" class="btn btn-primary" id="saveproductedited" data-dismiss="modal" data-controller="saveProductedited">Sauvegarder</button>
</div>
</div>
</div>
</div>
<!-- Delete Modal HTML -->
<div id="deleteProduct" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<form>
<div class="modal-header">
<h4 class="modal-title">Supprimer un produit</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
</div>
<div class="modal-body">
<p>Etes-vous sur de vouloir supprimer ce produit ?</p>
<p class="text-warning"><small>Cette action est définitive</small></p>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Annuler">
<input type="submit" class="btn btn-danger" value="Supprimer">
</div>
</form>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
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