Untitled

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="css/bootstrap.css" rel="stylesheet">
		<script src="js/jquery-3.3.1.js"></script>
		<script src="js/bootstrap.js"></script>
	</head>
	<body class="container-fluid">
		<header class="row" style="background-color: #FF5722; border-width: 0em 0em 0.2em 0em; border-color: black; border-style: solid;">
			<div class="col-md-12 m-1" style="color: white; font-size: 2em;">
			UCBL Parking
			</div>
		</header>

		<main class="row">
			<div class="row col-md-2">
				<div class="col-md-12 m-3" style="color: #F4511E; font-size: 1.5em;">
					Parkings
				</div>
			</div>

			<div class="row col-md-2 col-md-offset-6">
				<div class="col-md-12 m-3" style="color: #F4511E; font-size: 1.5em;">
					<a id="bouton1" class="btn btn-secondary" data-toggle="collapse" role="button" href="#tab" onclick="changerNom();">Masquer</a>
				</div>
			</div>

			<br>

			<div id="tab" class="collapse show row col-md-12">
				<table class="col-md-10 col-sd-12 col-md-offset-2 m-3" style="border-color: black; border-width: 0.2em 0.2em 0.2em 0.2em; border-style: solid;">
					<thead id="tabhead" style="color: white; background-color: #F4511E;">
						<tr>
							<th>Nom</th>
							<th>Type de véhicules</th>
							<th>Coordonnées GPS</th>
							<th>Nombre de places</th>
							<th>Email Responsable</th>
							<th>Système de comptage</th>
						</tr>
					</thead>
					<tbody id="tabbody" style="background-color: #FFCCBC">
						<tr>
							<td>Nautibus</td><td>Voitures</td><td>Lat. 3.14 Lon. 3.14</td><td>100</td><td>exemple@hotmail.fr</td><td>Compteur</td>
						</tr>
						<tr>
							<td>Nautibus</td><td>Voitures</td><td>Lat. 3.14 Lon. 3.14</td><td>100</td><td>exemple@hotmail.fr</td><td>Compteur</td>
						</tr>
						<tr>
							<td>Nautibus</td><td>Voitures</td><td>Lat. 3.14 Lon. 3.14</td><td>100</td><td>exemple@hotmail.fr</td><td>Compteur</td>
						</tr>
						<tr>
							<td>Nautibus</td><td>Voitures</td><td>Lat. 3.14 Lon. 3.14</td><td>100</td><td>exemple@hotmail.fr</td><td>Compteur</td>
						</tr>
						<tr>
							<td>Nautibus</td><td>Voitures</td><td>Lat. 3.14 Lon. 3.14</td><td>100</td><td>exemple@hotmail.fr</td><td>Compteur</td>
						</tr>
						<tr>
							<td>Nautibus</td><td>Voitures</td><td>Lat. 3.14 Lon. 3.14</td><td>100</td><td>exemple@hotmail.fr</td><td>Compteur</td>
						</tr>
						<tr>
							<td>Nautibus</td><td>Voitures</td><td>Lat. 3.14 Lon. 3.14</td><td>100</td><td>exemple@hotmail.fr</td><td>Compteur</td>
						</tr>
						<tr>
							<td>Nautibus</td><td>Voitures</td><td>Lat. 3.14 Lon. 3.14</td><td>100</td><td>exemple@hotmail.fr</td><td>Compteur</td>
						</tr>
						<tr>
							<td>Nautibus</td><td>Voitures</td><td>Lat. 3.14 Lon. 3.14</td><td>100</td><td>exemple@hotmail.fr</td><td>Compteur</td>
						</tr>
						<tr>
							<td>Nautibus</td><td>Voitures</td><td>Lat. 3.14 Lon. 3.14</td><td>100</td><td>exemple@hotmail.fr</td><td>Compteur</td>
						</tr>
					</tbody>
				</table>
			</div>

			<div class="row col-md-2 col-md-offset-2 col-sd-offset-1 m-3">
					<a id="bouton2" class="btn btn-primary" data-toggle="collapse" role="button" href="#tabnouveau">Ajouter un parking</a>
			</div>

			<div class="row col-md-2 col-md-offset-2 col-sd-offset-1 m-3">
					<a id="bouton2" class="btn btn-danger" data-toggle="collapse" role="button" href="#tabsupprimer">Supprimer un parking</a>
			</div>

			<div id="tabnouveau" class="collapse row col-md-12">
				<table class="col-md-10 col-sd-12 col-md-offset-2 m-3" style="border-color: black; border-width: 0.1em 0.1em 0.1em 0.1em; border-style: solid;">
					<thead style="color: white; background-color: #F4511E;">
						<tr>
							<th>Nom</th>
							<th>Type de véhicules</th>
							<th>Coordonnées GPS</th>
							<th>Nombre de places</th>
							<th>Email Responsable</th>
							<th>Système de comptage</th>
						</tr>
					</thead>
					<tbody style="background-color: #FFCCBC">
					<tr>
						<td><input id="input_nom"></input></td>
						<td><input id="input_type"></input></td>
						<td><input id="input_gps"></input></td>
						<td><input id="input_nb"></input></td>
						<td><input id="input_email"></input></td>
						<td><input id="input_sys"></input></td>
					</tr>
				</tbody>
				</table>

				<div class="row col-md-2 ml-5 mb-3">
						<a id="bouton2" class="btn btn-outline-success" data-toggle="collapse" role="button" href="#tabnouveau" onclick="nouveau();">Ajouter</a>
				</div>

			</div>

			<div id="tabsupprimer" class="collapse row col-md-12">
				<div class="row col-md-10 col-sd-12 col-md-offset-2 m-3">
					<p style="padding: 0; margin: 0;">Numéro du parking : </p>
					<input id="input_supprimer" style="margin-left: 0.3em;"></input>
				</div>
				<div class="col-md-2 ml-5 mb-3">
						<a id="bouton3" class="btn btn-outline-danger" data-toggle="collapse" role="button" href="#tabsupprimer" onclick="supprimer();">Supprimer</a>
				</div>
			</div>
		</main>

		<footer class="row" style="background-color: #FF5722; border-width: 0.2em 0em 0em 0em; border-color: black; border-style: solid;">
			<div class="col-md-12 m-1" style="color: white;">
				UCBL Parking
			</div>
		</footer>
	</body>
	<script>
		function changerNom()
		{
			let texte = document.getElementById("bouton1").innerHTML;
			if(texte == "Afficher")
			{
				document.getElementById("bouton1").innerHTML = "Masquer";
			}
			else
			{
				document.getElementById("bouton1").innerHTML = "Afficher";
			}
		}

		function nouveau()
		{
			let nom = document.getElementById("input_nom").value;
			let type = document.getElementById("input_type").value;
			let gps = document.getElementById("input_gps").value;
			let nb = document.getElementById("input_nb").value;
			let email = document.getElementById("input_email").value;
			let sys = document.getElementById("input_sys").value;

			if(nom != "" && type != "" && gps != "" && nb != "" && email != "" && sys !=  "")
			{
				let number = Number(nb);
				if(!isNaN(number))
				{
					if(number > 0)
					{
						if(email.includes('@') && email.includes('.'))
						{
							let noeud_nom = document.createElement("TD");
							let noeud_type = document.createElement("TD");
							let noeud_gps = document.createElement("TD");
							let noeud_nb = document.createElement("TD");
							let noeud_email = document.createElement("TD");
							let noeud_sys = document.createElement("TD");

							var texte_nom = document.createTextNode(nom);
							var texte_type = document.createTextNode(type);
							var texte_gps = document.createTextNode(gps);
							var texte_nb = document.createTextNode(nb);
							var texte_email = document.createTextNode(email);
							var texte_sys = document.createTextNode(sys);

							noeud_nom.appendChild(texte_nom);
							noeud_type.appendChild(texte_type);
							noeud_gps.appendChild(texte_gps);
							noeud_nb.appendChild(texte_nb);
							noeud_email.appendChild(texte_email);
							noeud_sys.appendChild(texte_sys);

							let insert = document.createElement("TR");

							insert.appendChild(noeud_nom);
							insert.appendChild(noeud_type);
							insert.appendChild(noeud_gps);
							insert.appendChild(noeud_nb);
							insert.appendChild(noeud_email);
							insert.appendChild(noeud_sys);

							document.getElementById("tabbody").appendChild(insert);
						}
						else
						{
							alert("Erreur : L'adresse email est invalide.");
						}
					}
					else
					{
						alert("Erreur : le nombre de place est incorrecte.");
					}
				}
				else
				{
					alert("Erreur : le nombre de place est incorrecte.");
				}
			}
			else
			{
				alert("Erreur : Un des champs est vide.");
			}
		}

		function supprimer()
		{
			let nb_elem = document.getElementById("tabbody").childNodes.length;
			console.log(nb_elem);

			let id = document.getElementById("input_supprimer").value;
			let n_id = Number(id);
			if(id != "" && !isNaN(n_id))
			{
				if(Number.isInteger(n_id))
				{
					if(n_id > 0)
					{
						if(n_id <= nb_elem)
						{
							let tabs = document.getElementById("tabbody");
							tabs.removeChild(tabs.childNodes[n_id - 1]);
							console.log("ok");
						}
						else
						{
							alert("Saisie du numéro incorrecte");
						}
					}
					else
					{
						alert("Saisie du numéro incorrecte.");
					}
				}
				else
				{
					alert("Saisie du numéro incorrecte.");
				}
			}
			else
			{
				alert("Saisie du numéro incorrecte.");
			}

		}
	</script>
</html>