Bonjour,
Je suis en-train de développer une application web de gestion de parking et j'ai un petit problème que je n'arrive pas à résoudre.
Tout d'abord je vous montre quelques screens de mon application pour que vous compreniez mieux :
Voici la page d'acceuil d'un user de type locataire :
Comme vous le pouvez le voir il y a un tableau qui donne des informations sur les places disponibles d'un local, et il y a le bouton réserver, lorsque je clic sur le bouton réserver il y a un modal qui s'ouvre le voici :
les premiers champs sont insérer dans les inputs directements aprés avoir cliquer sur le bouton réserver d'une ligne, après l'utilisateur doit saisir sont Cin et l'heure de debut et de fin de la réservation, lorsqu'il clic sur le bouton réserver un nouveau modal de paiement s'ouvre le voici :
C'est dans ce modal que j'ai mon problème en faite je veux que dans le champ "prix" le prix s'affiche directement dans ce input en fonction du prix par heure de la place choisie ( le prix par heure de la place choisie il est afficher sur le tableau dans le premier screen) et c'est avec ce prix et la date de debut et de fin que je veux calculer le prix final.
Par exemple si l'utilisateur choisie la premiere place celle qui est à 10 dhs l'heure alors s'il réserve juste 1h par exemple de 10h à 11h dans ce cas il doit payer 10 dhs, s'il réserve 2h il doit payer 20 dhs et si par exemple il réserve juste 30min dans ce cas il doit payer juste 5 dhs.
Le problème c'est que je ne sais vraiment pas comment faire niveau code.
voici ma page jsp si besoin :
<%@page import="controller.Cnx"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="java.sql.*"%>
<%@page import="java.util.Map"%>
<!DOCTYPE html>
<%
Connection c=Cnx.getcnx();
Statement st=c.createStatement();
ResultSet re=st.executeQuery("select * from place");
Statement st2=c.createStatement();
ResultSet re2=st2.executeQuery("select * from local");
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Interface locataire</title>
<meta name="description" content="Sufee Admin - HTML5 Admin Template">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-icon.png">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="vendors/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="vendors/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="vendors/themify-icons/css/themify-icons.css">
<link rel="stylesheet" href="vendors/flag-icon-css/css/flag-icon.min.css">
<link rel="stylesheet" href="vendors/selectFX/css/cs-skin-elastic.css">
<link rel="stylesheet" href="vendors/jqvmap/dist/jqvmap.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="css/Css_acceuil_locataire.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/e3fd0d5f24.js" crossorigin="anonymous"></script>
</head>
<body>
<%
String msg=(String) request.getAttribute("msg");
if(msg!=null && !msg.equals("") ){
%>
<script>
$(document).ready(function (){
$("#myModal").modal('toggle');
});
</script>
<% } %>
<aside id="left-panel" class="left-panel">
<nav class="navbar navbar-expand-sm navbar-default" style="flex-flow:column wrap;">
<div class="navbar-header">
<a class="navbar-brand" href="#">Gestion parkings</a>
<a class="navbar-brand hidden" href="./"><img src="images/logo2.png" alt="Logo"></a>
</div>
<div id="main-menu" class="main-menu collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="nav-item ">
<a href="#" class="nav-link" aria-haspopup="true" aria-expanded="false" style="margin-right: 80px;"> <i class="fas fa-arrow-alt-circle-right" style="margin-right: 10px;" selected></i>Réservation</a>
</li>
<li class="nav-item ">
<a href="#" class="nav-link" aria-haspopup="true" aria-expanded="false" style="margin-right: 80px;"> <i class="fas fa-arrow-alt-circle-right" style="margin-right: 10px;" selected></i>Liste réservation</a>
</li>
</ul>
</div>
</nav>
</aside>
<nav class="navbar" style="height:70px;" id='nav-proprietaire'>
<ul class="nav navbar-nav">
<li class="nav-item ">
<a href="Page_de_cnx" class="nav-link" aria-haspopup="true" aria-expanded="false" style="padding-left: 1430px; text-transform: uppercase"> <i class="fas fa-exclamation-circle" style="margin-right: 20px;"></i>Déconnection</a>
</li>
</ul>
</nav>
<label id="label1">Liste des places disponibles avec leurs emplacements :</label>
<table class="table table-hover" style="margin-top: 20px;" id="table1">
<thead>
<tr class="table-active">
<th scope="col">Nom local</th>
<th scope="col">Numéro place</th>
<th scope="col">Prix par heure</th>
<th scope="col">Taille</th>
<th scope="col">Action</th>
</tr>
</thead>
<%while(re.next()){%>
<tbody id="corps">
<tr>
<td scope="row"><%=re.getObject(2)%></td>
<td><%=re.getObject(3)%></td>
<td><%=re.getObject(4)%></td>
<td><%=re.getObject(5)%></td>
<td><a href="#" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#reservation" name="reservermodal" ><i class="fas fa-plus" style="margin-right: 10px;"></i>Réserver</a></td>
</tr>
<%}%>
</tbody>
</table>
<div class="modal" id="reservation">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Information</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<form method="POST" id="f" action="Acceuil_locataire">
<div class="form-group">
<label class='labelproprietaire'>Nom du local approprié à la place :</label>
<input type="hidden" class="form-control" id="nom_localhidden" name="nom_localhidden">
<input type="text" class="form-control" id="nom_local" name="nom_local" disabled>
</div>
<div class="form-group">
<label class='labelproprietaire'>Numéro place :</label>
<input type="hidden" class="form-control" id="numeroplacehidden" name="numeroplacehidden">
<input type="number" class="form-control" id="numeroplace" name="numeroplace" disabled>
</div>
<div class="form-group">
<label class='labelproprietaire'>Prix par heure:</label>
<input type="hidden" class="form-control" id="prixplacehidden" name="prixplacehidden">
<input type="text" class="form-control" id="prixplace" placeholder="Entrer le prix de la place" name="prixplace" disabled>
</div>
<div class="form-group">
<label class='labelproprietaire'>Taille de la place :</label>
<input type="hidden" class="form-control" id="tailleplacehidden" name="tailleplacehidden">
<input type="text" class="form-control" id="tailleplace" placeholder="Entrer la taille de la place" name="tailleplace" disabled>
</div>
<div class="form-group">
<label class='labelproprietaire'>Votre Cin :</label>
<input type="text" class="form-control" id="Cinlocataire" placeholder="Entrer votre cin" name="cinlocataire" required>
</div>
<div class="form-group">
<label class='labelproprietaire'>Heure début de la réservation :</label>
<input type="time" class="form-control" id="heure_debut" placeholder="Entrer l'heure de début" name="heure_debut" required>
</div>
<div class="form-group">
<label class='labelproprietaire'>Heure fin de la réservation :</label>
<input type="time" class="form-control" id="heure_fin" placeholder="Entrer l'heure de fin" name="heure_fin" required>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<div id='divbtnaddplace'>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" id='btnreserver' style='vertical-align: 0; margin-right: 240px;' name='action' value='reserver'>Reserver</button>
</div>
<button type="button" class="btn btn-danger btn-lg" data-dismiss="modal">Fermer</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Information</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
${msg}
</div>
<!-- Modal footer -->
<div class="modal-footer">
<a href="#" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#paiement" data-dismiss="modal" style="margin-right: 165px;">Passez au paiement</a>
<button type="button" class="btn btn-danger btn-lg" data-dismiss="modal">Fermer</button>
</div>
</div>
</div>
</div>
<div class="modal" id="paiement">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Information</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<form method="POST" id="f" action="Acceuil_locataire">
<div class="form-group">
<label class='labelproprietaire'>Votre Cin :</label>
<input type="text" class="form-control" id="Cin" name="cin">
</div>
<div class="form-group">
<label class='labelproprietaire'>Type paiement :</label>
<div class="row">
<div class="col-md-6 select-outline">
<select class="mdb-select md-form md-outline colorful-select dropdown-primary btn-lg" style="width: 465px;" name="typepaiement">
<option value="" disabled selected>Choose your option</option>
<option value="Paypal">Paypal</option>
<option value="Carte bancaire">Carte bancaire</option>
<option value="Payonner">Payonner</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label class='labelproprietaire'>Prix</label>
<input type="text" class="form-control" id="prix" name="prix">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="submit" class="btn btn-primary btn-lg" data-dismiss="modal" name="action" value="payer" style="margin-right: 250px;">Payer</button>
<button type="button" class="btn btn-danger btn-lg" data-dismiss="modal">Fermer</button>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="vendors/jquery/dist/jquery.min.js"></script>
<script src="vendors/popper.js/dist/umd/popper.min.js"></script>
<script src="vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="assets/js/main.js"></script>
<script src="vendors/chart.js/dist/Chart.bundle.min.js"></script>
<script src="assets/js/dashboard.js"></script>
<script src="assets/js/widgets.js"></script>
<script src="vendors/jqvmap/dist/jquery.vmap.min.js"></script>
<script src="vendors/jqvmap/examples/js/jquery.vmap.sampledata.js"></script>
<script src="vendors/jqvmap/dist/maps/jquery.vmap.world.js"></script>
<script>
function afficher(e){
e.preventDefault();//pour inhiber le lien, parce que le bouton .btn est un <a href="#">
var tr=$(this).closest('tr');
$('#f .custom-select')
.html('<option value="'+tr.find('td:eq(0)').text()+'">'+tr.find('td:eq(0)').text()+'</option>');
$('#nom_local').val(tr.find('td:eq(0)').text());
$('#numeroplace').val(tr.find('td:eq(1)').text());
$('#prixplace').val(tr.find('td:eq(2)').text());
$('#tailleplace').val(tr.find('td:eq(3)').text());
$('#nom_localhidden').val(tr.find('td:eq(0)').text());
$('#numeroplacehidden').val(tr.find('td:eq(1)').text());
$('#prixplacehidden').val(tr.find('td:eq(2)').text());
$('#tailleplacehidden').val(tr.find('td:eq(3)').text());
}
/* Quand le document est prêt */
$(document).ready(function(){
$('#table1').on('click','#corps .btn',afficher);
});
</script>
</body>
</html>
Si quelqu'un veux bien m'aider je lui serai vraiment très reconnaissant, je vous remercie d'avance pour votre aide !
Configuration: Windows / Chrome 78.0.3904.70
Afficher la suite
29 oct. 2019 à 13:21
http://www.finalclap.com/faq/88-javascript-difference-date