test

controleurs/c_interventions.php

@@ -13,28 +13,7 @@ switch ($action) {
 	case 'voir': {
 			include("vues/v_entete.php");
 
-			if (!isset($_REQUEST['zSemaine'])) {
-				$_REQUEST['zSemaine'] = date('W');
-			}
-			$semaine = $_REQUEST['zSemaine'];
 					
-			if (!isset($_REQUEST['zAnnee'])) {
-				$_REQUEST['zAnnee'] = date('Y');
-			}
-			$annee = $_REQUEST['zAnnee'];
-			$premierJour = strtotime("+$semaine weeks", mktime(0, 0, 0, 1, 1, $annee));
-
-			if (date('w', $premierJour) != 1) {
-				$premierJour = strtotime("last monday", $premierJour);
-			}
-			$lesTranches = $pdo->getParametre("tranche");
-			$lesTypesDispos = $pdo->getParametre("dispo");
-			$titre = "CIS"; //Centre d'incendie et de secours :";
-			//include("vues/v_choixCaserne.php");
-			//$lesPompiers = $pdo->getLesPompiers($choix);
-			//$lesInterventions = $pdo->getLesInterventions($choix);
-			//$intervention = 1;
-			//$lesParticipants = $pdo->getLesParticipants($choix, $intervention);
 			include("vues/v_Intervention.php");
 			break;
 		}
@@ -42,7 +21,11 @@ switch ($action) {
 			include("vues/v_entete.php");
 			$lesCasernes = $pdo->getLesCasernes($_SESSION["adr1"]);
 			$lesMotifs = $pdo->motifIntervention();
-			$lesPompiers = $pdo->getPompiersDispo('2023-09-23', 2, 2924);
+
+			$tranche = $pdo->getCurrentTranche();
+			$date = date('Y-m-d');
+
+			$lesPompiers = $pdo->getPompiersDispo($date, $tranche, 2904);
 
 			include("vues/v_nouvelleIntervention.php");
 
@@ -53,10 +36,32 @@ switch ($action) {
 
 		$pdo = PdoBD::getPdoBD();
 		
-		$lesPompiers = $pdo->getPompiersDispo('2023-09-23', 2, $_GET['cis']);
+		$tranche = $pdo->getCurrentTranche();
+		$date = date('Y-m-d');
+
+		$lesPompiers = $pdo->getPompiersDispo($date, $tranche, $_GET['cis']);
 
 		echo(json_encode($lesPompiers));
 
+		break;
+	case 'nouvelleInter':
+		require_once ("../include/class.pdo.php");
+
+		$pdo = PdoBD::getPdoBD();
+		//var_dump($_REQUEST);
+
+		$listePompier = $_POST['listePompier'];
+		$data = $_POST['dataForm'];
+
+		$pdo->newIntervention(
+			intval($data['motif']),
+			intval($data['caserne']),
+			$data['adresse'],
+			$data['commentaire'],
+			$listePompier
+		);
+		//var_dump($listePompier);
+
 		break;
 	//----------------------------------------- 
 	case 'majGarde': {

include/class.pdo.php

@@ -79,10 +79,10 @@ class PdoBD
 	public function getInfosPompier($login, $mdp)
 	{
 		/*
-									  $req = "SELECT pCis, pId as id, pNom as nom, pPrenom as prenom, pStatut, pMail, pLogin, pMdp, pGrade, pAdresse, pCp, pVille, pBip, pCommentaire,
+																								  $req = "SELECT pCis, pId as id, pNom as nom, pPrenom as prenom, pStatut, pMail, pLogin, pMdp, pGrade, pAdresse, pCp, pVille, pBip, pCommentaire,
-										  'la caserne' as cNom, 'adresse' as cAdresse, 'telephone' as cTel, 'le groupement' as cGroupement, 'le grade' as wGrade, 'le statut' as wStatut, 'le type' as wType
+																									  'la caserne' as cNom, 'adresse' as cAdresse, 'telephone' as cTel, 'le groupement' as cGroupement, 'le grade' as wGrade, 'le statut' as wStatut, 'le type' as wType
-										  FROM  pompier";
+																									  FROM  pompier";
-										  */
+																									  */
 		$req = "SELECT 
 					pCis, 
 					pId as id,
@@ -358,8 +358,8 @@ class PdoBD
 			$lesDispos[$pompier][$laDate][$couleur] = $uneLigne['dCouleur'];
 		}
 		/*			echo "<PRE>";
-														print_r($lesDispos);
+																													print_r($lesDispos);
-														echo "</PRE>";*/
+																													echo "</PRE>";*/
 		return $lesDispos;
 	}
 
@@ -581,7 +581,7 @@ class PdoBD
 		$cat = PdoBD::$monPdo->query($req);
 		$cat = $cat->fetchAll();
 
-		//Valeur : nbUtil
+		//Valeur : nbUtilisation
 		//Plancher : Time
 		//Plafond: nbPompier estimé
 		$reqType = "SELECT pIndice, pLibelle, pValeur, pPlancher, pPlafond 
@@ -655,6 +655,109 @@ class PdoBD
 		return $result->fetchAll();
 	}
 
+	public function getCurrentTranche()
+	{
+		$req = "SELECT pIndice 
+		FROM parametre
+		WHERE pType = 'tranche' AND :heure >= pPlancher AND :heure < pPlafond;";
+
+		$result = PdoBD::$monPdo->prepare($req);
+		$hour = date("H");
+		$result->bindParam(':heure', $hour);
+		$result->execute();
+		$result = $result->fetch();
+
+		return $result['pIndice'];
+	}
+
+	public function getLastIdIntervention(int $cis)
+	{
+		$req = "SELECT iId 
+		FROM `intervention`
+		WHERE iCis = :cis;";
+
+		$result = PdoBD::$monPdo->prepare($req);
+		$result->bindParam(':cis', $cis);
+		$result->execute();
+		$result = $result->fetch();
+		$id = isset($result['iId']) ? $result['iId'] : 0;
+		return $id;
+	}
+	/**
+	 * Crée une nouvelle intervention
+	 */
+	public function newIntervention(
+		int $motif,
+		int $caserne,
+		string $adresse,
+		string $description,
+		array $pompier
+	) {
+		/**
+		 * Nouvelle intervention
+		 */
+		$req = " INSERT INTO intervention 
+			VALUES(:caserne, :id, :adresse, :description, 
+				NOW(), :tranche, NOW(), NULL, :motif, :nbPompier);";
+
+		$result = PdoBD::$monPdo->prepare($req);
+		$result->bindParam(':caserne', $caserne);
+		$result->bindParam(':adresse', $adresse);
+		$result->bindParam(':description', $description);
+		$result->bindParam(':motif', $motif);
+
+		$nbPompier = count($pompier);
+		$result->bindParam(':nbPompier', $nbPompier);
+
+		$tranche = $this->getCurrentTranche();
+		$result->bindParam(':tranche', $tranche);
+
+		$idIntervention = $this->getLastIdIntervention($caserne) + 1;
+		$result->bindParam(':id', $idIntervention);
+
+		$result->execute();
+
+		/**
+		 * Nouvelle équipe
+		 */
+		foreach ($pompier as $value) {
+			var_dump($value);
+			foreach ($value as $key => $value) {
+				$req2 = "INSERT INTO equipe 
+					VALUES (:caserne, :pompier, :intervention)";
+				$result2 = PdoBD::$monPdo->prepare($req2);
+				$result2->bindParam('caserne', $caserne);
+				$result2->bindParam('intervention', $idIntervention);
+
+				if ($value == 0) {
+					$result2->bindParam('pompier', $key);		
+					
+					$result2->execute();
+				} else {
+					$currentIntervention = "SELECT iId 
+						FROM intervention
+						LEFT OUTER JOIN equipe on intervention.iId = equipe.eIntervention AND intervention.iCis = equipe.eCis
+						WHERE iHeureFin IS NULL AND equipe.ePompier = :pompier AND equipe.eCis = :caserne;";
+					$curentId = PdoBD::$monPdo->prepare($currentIntervention);
+					$curentId->bindParam('pompier', $key);
+					$curentId->bindParam('caserne', $caserne);
+					$curentId->execute();
+					$curentId = $curentId->fetch();
+
+
+					$reqSuprInter = "DELETE FROM equipe
+						WHERE eCis = :caserne AND ePompier = :pompier AND eIntervention = :intervention";
+					$suprInter = PdoBD::$monPdo->prepare($reqSuprInter);
+					$suprInter->bindParam('caserne', $caserne);
+					$suprInter->bindParam('pompier', $key);
+					$suprInter->bindParam('intervention', $currentId['iId']);
+					$suprInter->execute();
+
+				}
+			}
+		}
+
+	}
 }
 
 /**

include/gestionInterventions.js

@@ -3,22 +3,14 @@ date = Date.now()
 
 $(document).ready(function () {
 
-  // $.ajax({
+  $('#motifInter').change(function (e) {
-  // 	url: "/controleurs/c_interventions.php?action=infoFormulaire", 
+    let nbPompier = $(this).find(":selected").attr('data-effectif'); 
-  // 	method: "POST", // Méthode HTTP (GET, POST, etc.)
+    $('#nbPompierCons').html("Nombre de pompiers conseillé: " + nbPompier);
-  // 	dataType: "json", // Type de données attendu
+  });
-  // 	error: function(status, error) {
-  // 		// Gérer les erreurs de la requête AJAX
-  // 		console.error("Erreur lors de la requête AJAX :", status, error);
-  // 	},
-  // 	success: function(result) {
 
-  // 	} 
-  // });
 
   $('#caserneInter').change(function () {
-    console.log($(this).val());
+    caserne = $(this).val();
-    caserne = $(this).val()
     //cis
     $.ajax({
       url: "./../controleurs/c_interventions.php?action=listePompier&cis=" + caserne,
@@ -34,17 +26,17 @@ $(document).ready(function () {
           var ligne = '<div id='
             + element['pId']
             + ' class="' + element['pLibelle']
+            + '" data-intervention="' + element['enIntervention']
             + '" style = "background-color: ' + element['pValeur'] + ';" draggable = "true" ondragstart = "dragstartHandler(event)" >'
             + element['pPrenom'] + ' ' + element['pNom']
             + ' (' + element['statut'] + ')'
             + '</div> ';
 
-            $('#pompierDispo').append(ligne)
+          $('#pompierDispo').append(ligne)
 
         });
       }
     });
-
   });
 
 });
@@ -71,3 +63,51 @@ function dropHandler(ev) {
 }
 
 
+/**
+ * PREPARATION DE L'ENVOIE DU FORMULAIRE
+ */
+$(document).on('submit', '#formulaireInter', function(e){
+  e.preventDefault();
+})
+
+$(document).on('click', '#sendInter', function(e){
+  e.preventDefault();
+
+  //var data = $('#formulaireInter').serialize();
+  var data = {
+    motif: $('#formulaireInter select[name=motif]').val(),
+    adresse: $('#formulaireInter input[name=adresse]').val(),
+    caserne: $('#formulaireInter select[name=caserne]').val(),
+    commentaire: $('#formulaireInter textarea[name=commentaire]').val()
+  };
+
+  let listePompier = [];
+  $('.pompierIntervenant div').each(function(index){
+    num = $(this).attr('id');
+    dispo = $(this).attr('data-intervention');
+    
+    var obj = {};
+    obj[num] = dispo
+    listePompier.push(obj)
+  })
+  
+  var sendingData = {
+    "dataForm" : data,
+    "listePompier" : listePompier
+  };
+
+  $.ajax({
+    url: "./../controleurs/c_interventions.php?action=nouvelleInter",
+    method: "POST", // Méthode HTTP (GET, POST, etc.)
+    data: sendingData,
+    dataType: "json", // Type de données attendu
+    error: function (status, error) {
+      // Gérer les erreurs de la requête AJAX
+      console.error("Erreur lors de la requête AJAX :", status, error);
+    },
+    success: function (result) {
+      //COMPLETE      
+    }
+  });
+
+})

styles/styles.css

@@ -3,38 +3,40 @@
 #navigation {
 	position: relative;
 	float: right;
-	top : -2.75em;
+	top: -2.75em;
 	right: 2em;
 	padding: 0em;
-	color: rgb(0,85,227);
+	color: rgb(0, 85, 227);
-}
-#sommaire {
-	float: right;
-	margin-top : 20px;
-	margin-right: -20px;
-	padding: 0em;
-	color: rgb(0,85,227);
-}
-#sommaire ul {
-	padding:0;
-	margin:0;
-	list-style-type:none;
-}
-#sommaire li
-{
-	vertical-align: middle;
-	margin-left:2px;
-	float:left; /*pour IE*/
 }
 
-#sommaire ul li a
+#sommaire {
-{
+	float: right;
+	margin-top: 20px;
+	margin-right: -20px;
+	padding: 0em;
+	color: rgb(0, 85, 227);
+}
+
+#sommaire ul {
+	padding: 0;
+	margin: 0;
+	list-style-type: none;
+}
+
+#sommaire li {
 	vertical-align: middle;
-	display:block;
+	margin-left: 2px;
-	float:left;   
+	float: left;
-	width:80px; 
+	/*pour IE*/
-	text-decoration:none;
+}
-	text-align:center;
+
+#sommaire ul li a {
+	vertical-align: middle;
+	display: block;
+	float: left;
+	width: 80px;
+	text-decoration: none;
+	text-align: center;
 	/*background-color:#6495ED;
 	color:black;
 	//padding:5px;
@@ -42,220 +44,251 @@
 	border-style:solid;
 	border-color:#DCDCDC #696969 #696969 #DCDCDC;  /*pour avoir un effet "outset" avec IE */
 }
-#sommaire ul li a:hover
+
-{
+#sommaire ul li a:hover {
-	color: #881600; /*rgb(0,85,227);*/
+	color: #881600;
+	/*rgb(0,85,227);*/
 	font-size: 16px;
 	/*background-color:#D3D3D3;
 	border-color: #696969 #DCDCDC #DCDCDC #696969;  */
 }
+
 #sommaire ul li ul {
- display:none;
+	display: none;
 }
+
 #sommaire ul li:hover ul {
- display:block;
+	display: block;
 }
+
 #sommaire li:hover ul li {
- float:none;
+	float: none;
 }
+
 #sommaire li ul {
- position:absolute;
+	position: absolute;
- }
+}
 
 #stats {
-  position: absolute;
+	position: absolute;
-  top: 1em;
+	top: 1em;
-  left: 0.5em;
+	left: 0.5em;
-  background-color: #ffff00;
+	background-color: #ffff00;
-  font-size:0.75em;
+	font-size: 0.75em;
 }
-body{
+
-  	background-color: white;
+body {
+	background-color: white;
 	/* //background-image: url(imgs/FONDGLOBAL.jpg); */
 	background-repeat: repeat-x;
-  	margin:0% 0%;
+	margin: 0% 0%;
-  	font-family:"Trebuchet MS",Verdana,Geneva,Arial,Helvetica,sans-serif;
+	font-family: "Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif;
-  	font-size:0.8em;
+	font-size: 0.8em;
 }
+
 #page {
-  	background-color:white;
+	background-color: white;
-  	width : 95%;
+	width: 95%;
-  	margin : auto ;
+	margin: auto;
-  	border : 1px solid black;
+	border: 1px solid black;
 }
-#entete{
+
-  	background-color: #8B93A7;
+#entete {
-	color : #881600;
+	background-color: #8B93A7;
+	color: #881600;
 	border: solid 2px #881600;
 	border-left: 0;
 	border-right: 0;
 	height: 100px;
 	padding: 0 100px;
 }
-#pied{
+
-  	clear : both;
+#pied {
-	border : solid 0.2em #881600;
+	clear: both;
-	margin-left : 18%;
+	border: solid 0.2em #881600;
-	margin-top : 1em;
+	margin-left: 18%;
-	padding:0.4em;
+	margin-top: 1em;
+	padding: 0.4em;
 	padding: 0.2em;
 	border-collapse: separate;
 }
-#menu{
+
+#menu {
 	position: relative;
-	float:right;
+	float: right;
 	right: 0px;
-	margin-top : -240px;
+	margin-top: -240px;
 	margin-left: -10px;
 	padding: 0em;
-	background-color:transparent;
+	background-color: transparent;
-	color: rgb(0,85,227);
+	color: rgb(0, 85, 227);
 	width: 80px;
 }
 
-#contenu{
+#contenu {
 	border: none;
 	padding: 1.1em;
 	background-color: white;
-	border-left :  groove 0.8em #881600;
+	border-left: groove 0.8em #881600;
-  	margin-top : 1.1em;
+	margin-top: 1.1em;
-	margin-left: 82px; /*162px;   /*18%; */
+	margin-left: 82px;
-/* permet de fixer une hauteur mini sur les navigateurs modernes */
+	/*162px;   /*18%; */
-  	min-height:27em;
+	/* permet de fixer une hauteur mini sur les navigateurs modernes */
-/* pour obtenir le même effet sur IE, sachant que si le contenu dépasse, il "poussera" la hauteur en ne respectant pas la norme. On se joue de ses lacunes */
+	min-height: 27em;
-  	height:27em;
+	/* pour obtenir le même effet sur IE, sachant que si le contenu dépasse, il "poussera" la hauteur en ne respectant pas la norme. On se joue de ses lacunes */
+	height: 27em;
 }
-a, a:visited,
+
-a:hover{
+a,
+a:visited,
+a:hover {
 	color: #881600;
 }
 
 
 /* pour rétablir le mauvais effet sur les nav. modernes */
-html>body #contenu{
+html>body #contenu {
-  height:auto;
+	height: auto;
 }
 
 /* style à appliquer à la balise ul d'identifiant menulist */
-ul#menuList{
+ul#menuList {
-    list-style:none;
+	list-style: none;
-    margin:0px;
+	margin: 0px;
-    padding:0px;
+	padding: 0px;
-    width:98%;
+	width: 98%;
-    font-size: 1em;
+	font-size: 1em;
 }
 
 /* style à appliquer aux éléments de la balise ul d'identifiant menulist */
 ul#menuList li {
-    position:relative;
+	position: relative;
-    margin:0px;
+	margin: 0px;
-    padding:0px;
+	padding: 0px;
 }
 
 /* apparences des liens dans listes et sous-listes non numérotées */
 ul#menuList a {
-    color:rgb(0,85,227);
+	color: rgb(0, 85, 227);
-    display:block;
+	display: block;
-    text-decoration:none;
+	text-decoration: none;
-    width:100%;
+	width: 100%;
 }
+
 ul#menuList a:hover {
-    background: rgb(0,85,227);
+	background: rgb(0, 85, 227);
-    color: white;
+	color: white;
 }
 
 #entete #logo {
-  float : left;
+	float: left;
-  width : 74px;
+	width: 74px;
-  height : 100px;
+	height: 100px;
 }
 
 #entete h1 {
-  margin-top :	50px;
+	margin-top: 50px;
-  margin-right:	20px;
+	margin-right: 20px;
-  font-size :	x-large;
+	font-size: x-large;
-  text-align:	right;
+	text-align: right;
 }
 
 #contenu pre {
-  width:95%;
+	width: 95%;
-  overflow : scroll;
+	overflow: scroll;
 }
+
 #contenu h2 {
-  font-size : large;
+	font-size: large;
-  text-align:left;
+	text-align: left;
-  margin:0;
+	margin: 0;
-  margin-bottom:0.5em;
+	margin-bottom: 0.5em;
 }
 
 .logoValidW3c {
-  display: inline;
+	display: inline;
 }
-#libValidW3c{
+
-  display : inline;
+#libValidW3c {
-  vertical-align:middle;
+	display: inline;
+	vertical-align: middle;
 }
 
 /* Style des formulaires */
 .corpsForm {
-  border : solid 0.1em #000;
+	border: solid 0.1em #000;
-  border-bottom-width:1px;
+	border-bottom-width: 1px;
-  margin-bottom : 0em;
+	margin-bottom: 0em;
-  width : 95%;
+	width: 95%;
 }
+
 .piedForm {
-  border-bottom-width : 0.1em;
+	border-bottom-width: 0.1em;
-  border-left-width : 0.1em;
+	border-left-width: 0.1em;
-  border-right-width : 0.1em;
+	border-right-width: 0.1em;
-  border-top-width : 0em;
+	border-top-width: 0em;
-  border-style : solid;
+	border-style: solid;
-  border-color : #000;
+	border-color: #000;
-  text-align:right ;
+	text-align: right;
-  width : 95%;
+	width: 95%;
-  margin-top:0em;
+	margin-top: 0em;
 }
+
 form {
-  margin-bottom:1em;  
+	margin-bottom: 1em;
 }
+
 .corpsForm legend {
-  font-weight:bold;
+	font-weight: bold;
-  font-size:1.2em;
+	font-size: 1.2em;
 }
-.corpsForm label{
+
+.corpsForm label {
 	float: left;
-	text-align:right;
+	text-align: right;
-	width:33%;
+	width: 33%;
 	margin: 0;
 	padding: 0 .5em 0 0;
 	line-height: 1.8;
 }
-input, button, textarea, select{
+
-  font-family:"Trebuchet MS", sans-serif;
+input,
-  font-size : 1em;
+button,
+textarea,
+select {
+	font-family: "Trebuchet MS", sans-serif;
+	font-size: 1em;
 }
 
-input:focus{
+input:focus {
 	background-color: #ECB2E4;
 }
-button{
+
-  width : 60px;
+button {
-  height : 30px;
+	width: 60px;
-  text-align:center;
+	height: 30px;
-  vertical-align:middle;
+	text-align: center;
+	vertical-align: middle;
 }
-input:hover, textarea:hover, select:hover{
+
-  background-color : #FAFAE6;
+input:hover,
-  cursor : pointer;
+textarea:hover,
+select:hover {
+	background-color: #FAFAE6;
+	cursor: pointer;
 }
+
 .controle {
-  width:75px;
+	width: 75px;
 }
+
 .controleLong {
-  width:195px;
+	width: 195px;
 }
+
 .stNb {
-  width:40px;
+	width: 40px;
-  text-align:center;
+	text-align: center;
 }
 
 .stNb a:link {
@@ -264,153 +297,160 @@ input:hover, textarea:hover, select:hover{
 }
 
 .stTitre {
-  width:40px;
+	width: 40px;
-  text-align:center;
+	text-align: center;
-  font-weight: bold;
+	font-weight: bold;
 }
 
 .stTitre2 {
-  width:80px;
+	width: 80px;
-  text-align:center;
+	text-align: center;
-  font-weight: bold;
+	font-weight: bold;
 }
 
 /*  Le texte des messages d'erreur est de couleur rose sur fond ocre et de 
 taille de caractères légèrement supérieure à la normale */
-.erreur{ 
+.erreur {
-   background-color:rgb(237,210,229);
+	background-color: rgb(237, 210, 229);
-   color:rgb(203,28,128);
+	color: rgb(203, 28, 128);
-   font-size:1.1em;
+	font-size: 1.1em;
-   margin-left:200px;
+	margin-left: 200px;
-   width:75%;
+	width: 75%;
 }
+
 .centre {
-  text-align:center;
+	text-align: center;
 }
 
 .info {
-   background-color:rgb(178,207,81);
+	background-color: rgb(178, 207, 81);
-   color : white;
+	color: white;
-   font-size:1.1em;
+	font-size: 1.1em;
-   width : 95%  
+	width: 95%
 }
 
 .encadre {
-  border : solid 0.1em #000;
+	border: solid 0.1em #000;
-  width : 100%;
+	width: 100%;
 }
+
 /* Style pour les liens de la page principale */
 #contenu .corpsTexte {
-  width:80%;
+	width: 80%;
-  font-size:1.2em;
+	font-size: 1.2em;
 }
 
 /* Style pour les liens de la page principale */
 #contenu a {
-   font-size : 1.1em;
+	font-size: 1.1em;
-   color:gray;
+	color: gray;
-   text-decoration:none;
+	text-decoration: none;
 }
+
 #contenu a:hover {
-   text-decoration:underline;
+	text-decoration: underline;
-   background-color : #D9BB7A;
+	background-color: #D9BB7A;
-   font-size : 1em;
+	font-size: 1em;
 }
 
 /* Style pour les parties importantes de la page principale */
 #contenu strong {
-  font-weight:bold;
+	font-weight: bold;
 }
 
 /* Styles pour les tableaux de la page principale */
 #contenu table {
-   background-color:#FFF;
+	background-color: #FFF;
-   border : 0.1em solid #777777;
+	border: 0.1em solid #777777;
-   color:black;
+	color: black;
-   margin-right : auto ;
+	margin-right: auto;
-   margin-left:0.2em;
+	margin-left: 0.2em;
-   border-collapse : collapse;
+	border-collapse: collapse;
 }
 
 /* Style pour les lignes d'en-tête des tableaux */
 #contenu th {
-   background-color:#E9F1FE; 
+	background-color: #E9F1FE;
-   /* //bleu clair ou bleu plus soutenu : #77AADD; */
+	/* //bleu clair ou bleu plus soutenu : #77AADD; */
-   width:		130px;
+	width: 130px;
-   height:		21px;
+	height: 21px;
-   /* //text-align:	left; */
+	/* //text-align:	left; */
-   vertical-align:top;
+	vertical-align: top;
-   /*font-weight:bold;*/
+	/*font-weight:bold;*/
-   border-bottom:0.1em solid #777777;
+	border-bottom: 0.1em solid #777777;
-   /* //font-size:1.1em; */
+	/* //font-size:1.1em; */
 }
 
 #contenu td {
-   border :1px solid #777777;
+	border: 1px solid #777777;
-   /* //font-size:1.1em; */
+	/* //font-size:1.1em; */
-   }
+}
 
 #contenu h3 {
-    font-size : 1.2em;
+	font-size: 1.2em;
 }
 
-table{
+table {
-  width:100%;
+	width: 100%;
-  border-collapse:collapse;
+	border-collapse: collapse;
 }
-fieldset{
+
-  border-radius : 12px;
+fieldset {
-  border:2px solid ;
+	border-radius: 12px;
-  border-color: purple;
+	border: 2px solid;
+	border-color: purple;
 }
-legend{
+
-  font-size: 20px;
+legend {
+	font-size: 20px;
 }
 
 table.listeLegere {
-    margin-bottom : 0.3em;
+	margin-bottom: 0.3em;
 }
 
 table.stats {
-  width:	80px; 
+	width: 80px;
-  /* //150px; */
+	/* //150px; */
-  border-collapse:collapse;
+	border-collapse: collapse;
 }
 
 table.stats th {
-  border : 		dotted rgb(178,207,81) 0.1em;
+	border: dotted rgb(178, 207, 81) 0.1em;
-  background-color:#E9F1FE; 
+	background-color: #E9F1FE;
-  /* //bleu clair */
+	/* //bleu clair */
-  padding:		0em;
+	padding: 0em;
-  text-align:	center;
+	text-align: center;
-  vertical-align : top;
+	vertical-align: top;
-  witdh:		33%;
+	witdh: 33%;
 }
 
 table.stats td {
-  border : 		dotted rgb(178,207,81) 0.1em;
+	border: dotted rgb(178, 207, 81) 0.1em;
-  padding:		0em;
+	padding: 0em;
-  text-align:	center;
+	text-align: center;
-  vertical-align : top;
+	vertical-align: top;
-  witdh:		33%;
+	witdh: 33%;
 }
 
 /* Tableaux quadrillés utilisés pour l'affichage de listes avec contenu léger*/
-table.listeLegere th, table.listeLegere td {
+table.listeLegere th,
-  border : dotted rgb(178,207,81) 0.1em;
+table.listeLegere td {
-  padding:0.2em;
+	border: dotted rgb(178, 207, 81) 0.1em;
-  vertical-align : top;
+	padding: 0.2em;
+	vertical-align: top;
 }
 
 table.listeLegere caption {
-  font-size : 1.1em;
+	font-size: 1.1em;
-  text-align : left;
+	text-align: left;
-  margin-bottom : 0.2em;
+	margin-bottom: 0.2em;
 }
+
 table.listeLegere td {
-  width:	100px;
+	width: 100px;
-  vertical-align:top;
+	vertical-align: top;
-  font-weight:normal;
+	font-weight: normal;
 }
 
 #contenu h2 {
@@ -419,94 +459,97 @@ table.listeLegere td {
 	font-weight: bold;
 	color: #1D2941;
 	text-decoration: none;
-	border : 1px solid #6988BE;
+	border: 1px solid #6988BE;
 	padding-left: 25px;
 	background-color: #E9F1FE;
-	height : 28px;
+	height: 28px;
 }
 
 #contenu img {
-  height :	21px;
+	height: 21px;
-  border-style:	none;
+	border-style: none;
-  float :	left;
+	float: left;
 }
 
 #contenu li img:hover {
-  height :	26px;
+	height: 26px;
 }
 
-.lesOnglets 
+.lesOnglets {
-{
 	margin: 0;
-	padding:0 0 0 5px;
+	padding: 0 0 0 5px;
 }
 
-.unOnglet
+.unOnglet {
-{
+	background-color: white;
-	background-color:white;
+	margin-top: -1px;
-	margin-top:-1px;
+	padding: 5px;
-	padding:5px;
+	display: none;
-	display:none;
+	border: 1px solid #AAA;
-	border:1px solid #AAA;
+	border-radius: 4px;
-	border-radius:4px;
+	-webkit-border-radius: 4px;
-	-webkit-border-radius:4px;
+	-moz-border-radius: 4px;
-	-moz-border-radius:4px;
+	color: #555;
-	color:#555;
 	cursor: text;
 }
-.onglet
+
-{
+.onglet {
-	display:inline-block;
+	display: inline-block;
-	margin:5px 2px 0 2px;
+	margin: 5px 2px 0 2px;
-	padding:5px 10px ;
+	padding: 5px 10px;
-	border:1px solid #AAA;
+	border: 1px solid #AAA;
-	border-bottom:none;
+	border-bottom: none;
-	border-radius:5px 5px 0 0;
+	border-radius: 5px 5px 0 0;
-	-webkit-border-radius:4px 4px 0 0;
+	-webkit-border-radius: 4px 4px 0 0;
-	-moz-border-radius:4px 4px 0 0;
+	-moz-border-radius: 4px 4px 0 0;
-	color:#555;
+	color: #555;
 	cursor: pointer;
-	font-weight:bold;
+	font-weight: bold;
 }
-.inactif
+
-{
+.inactif {
-	background:#EEE;
+	background: #EEE;
 }
-.inactif:hover
+
-{
+.inactif:hover {
-	background:#AAA;
+	background: #AAA;
 }
-.actif
+
-{
+.actif {
-	background:white;
+	background: white;
-	border-bottom:2px solid white;
+	border-bottom: 2px solid white;
-	padding-bottom:4px;
+	padding-bottom: 4px;
-	cursor:text;
+	cursor: text;
 }
+
 .fdroite {
 	display: inline-block;
 	border-bottom: 7px solid #FFFFFF;
 	border-top: 7px solid #FFFFFF;
 	border-left: 10px solid #9743CC;
 }
+
 .fbas {
 	display: inline-block;
 	border-left: 7px solid #FFFFFF;
 	border-right: 7px solid #FFFFFF;
 	border-top: 10px solid #AABBCC;
 }
+
 .fgauche {
 	display: inline-block;
 	border-bottom: 7px solid #FFFFFF;
 	border-right: 10px solid #9743CC;
 	border-top: 7px solid #FFFFFF;
 }
+
 .fhaut {
 	display: inline-block;
 	border-bottom: 10px solid #AABBCC;
 	border-left: 7px solid #FFFFFF;
 	border-right: 7px solid #FFFFFF;
 }
+
 .boite {
 	border: 1px solid #ddd;
 	-webkit-border-radius: 5px;
@@ -527,7 +570,7 @@ table.listeLegere td {
 
 #tableau th.semaine {
 	color: #666666;
-	text-align : center;
+	text-align: center;
 	vertical-align: middle;
 	background-color: #fafae0;
 }
@@ -552,6 +595,7 @@ table.listeLegere td {
 	background-color: #ffe9e5;
 	color: #000080;
 }
+
 .tableau {
 	background-color: #ebeff2;
 	border-color: #3DA9C9;
@@ -576,6 +620,7 @@ table.listeLegere td {
 	border-width: 1px;
 	border-color: gray;
 }
+
 .tableau th div {
 	width: 25px;
 }
@@ -617,7 +662,8 @@ table.listeLegere td {
 	background-color: #ffe9e5;
 	color: #000080;
 }
-#pompiers{
+
+#pompiers {
 	background-color: #ebeff2;
 	border-color: #3DA9C9;
 	border-width: 1px;
@@ -636,34 +682,39 @@ table.listeLegere td {
 	padding: 0px 0px 0px 0px;
 	vertical-align: middle;
 }
-.select-dispo{
+
+.select-dispo {
 	cursor: pointer;
 }
 
 /* 
 PARTIE DES INTERVENTIONS
 */
-.nouvelleInter{
+.nouvelleInter {
 	margin: 0 20px;
-	overflow:auto;
+	overflow: auto;
 	width: 100%;
 
 }
-.formulaire{
+
+.formulaire {
 	width: 50%;
 	border-right: solid 1px black;
 	float: left;
 }
-.nouvelleInter .formulaire{
+
+.nouvelleInter .formulaire {
 	/* float: right; */
 }
-.selectionPompier{
+
+.selectionPompier {
 	margin: 0 30px;
-	overflow:auto;
+	overflow: auto;
 	display: flex;
 	justify-content: space-between;
 }
-.pompierDispo{
+
+.pompierDispo {
 	background-color: #8B93A7;
 	width: 40%;
 	height: 80%;
@@ -672,18 +723,17 @@ PARTIE DES INTERVENTIONS
 	text-align: center;
 	display: inline-block;
 }
+
 .pompierDispo div,
-.pompierIntervenant div{
+.pompierIntervenant div {
 	text-decoration: none;
 	background-color: #FFFFFF;
 	padding: 3px;
 	margin: 5px;
 	cursor: pointer;
 }
-.pompierDispo .1{
 
-}
+.pompierIntervenant {
-.pompierIntervenant{
 	background-color: red;
 	width: 40%;
 	height: 200px;
@@ -692,8 +742,32 @@ PARTIE DES INTERVENTIONS
 	display: block;
 	text-align: center;
 }
-#sendInter{
+
+#sendInter {
 	width: auto;
 	text-align: center;
 	margin: 10px;
 }
+
+.infobulle {
+	position: relative;
+	/* les .infobulle deviennent référents */
+	cursor: help;
+}
+
+/* on génère un élément :after lors du survol et du focus :*/
+
+.infobulle:hover::after,
+.infobulle:focus::after {
+	content: attr(aria-label);
+	/* on affiche aria-label */
+	position: absolute;
+	top: -2.4em;
+	left: 50%;
+	transform: translateX(-50%);
+	/* on centre horizontalement  */
+	z-index: 1;
+	/* pour s'afficher au dessus des éléments en position relative */
+	white-space: nowrap;
+	/* on interdit le retour à la ligne */
+}

vues/v_intervention.php

@@ -1,106 +1,25 @@
-
 <!-- affichage d'une intervention / Derniere modification le 23 mai 2019 par Pascal Blain -->
-<?php
-//$nbi = count($lesInterventions);
-/*
-$titre="Ajout";
-echo ('
- 	<div id="fiche">
-		<ul class="lesOnglets">	
-			<li class="actif onglet" 	id="onglet1" onclick="javascript:Affiche(\'1\',3);">'.$titre.'</li>
-			<li class="inactif onglet" 	id="onglet2" onclick="javascript:Affiche(\'2\',3);">onglet 2</li>
-			<li class="inactif onglet" 	id="onglet3" onclick="javascript:Affiche(\'3\',3);">onglet 3</li>
-		</ul>');
-			
-/*================================================================================================== nouvelle intervention (1) */
-/*
-echo("		
-		<div style='display: block;' class='unOnglet' id='contenuOnglet1'>
-			<fieldset><legend>Nouvelle intervention</legend>
-			<table>
-				<tr><th style='width:180px;'>Description</th><th>Date</th><th>Lieu</th><th>Horaires</th></th></tr>
-				<tr><td>".$infosIntervention['iDescription']."</td><td>".$infosIntervention['iDdate']."</td><td>".$infosIntervention['iLieu']."</td><td>de ".$infosIntervention['iHeureDebut']." &agrave; ".$infosIntervention['iHeureFin']."</td></tr>
-				<tr><td colspan='4'>".$infosIntervention['programme1']."</td></tr>
-			</table>
-			</fieldset>
-			<table style='border: 0px solid white;'>
-			<tr>
-				<td style='border :0px;'>
-				<fieldset><legend><a href='index.php?uc=intervention&amp;action=ajouterIntervenants&amp;atelier=20132115&amp;reunion=1' title='ajouter les participants'><img alt='ajouter des intervenants' src='images/group.png'>Intervenants</a></legend>
-					<table>");
-					$numPa = 0;
-
-					foreach ($lesParticipants as $unParticipant) {
-						if ( $unParticipant['rOrdre'] == 1 AND $numPa < 7) {
-							$numPa = $numPa+1;
-							$participant=$unParticipant['uNom'] . " " . $unParticipant['uPrenom'];
-							echo("<tr> <th style='width:180px;'>" . $participant . "</th>	<td>x</td> </tr>");
-						}
-					}
-echo("				</table>
-				</fieldset></td>
-				<td style='border :0px;'>
-				<fieldset><legend>(suite)</legend>
-					<table>");
-					$numP = 0;
-					foreach ($lesParticipants as $unParticipant) {
-						if ($unParticipant['rOrdre'] == 1 ) {
-							$numP = $numP+1;
-							if ($numP > 7) {
-								$participant = $unParticipant['uNom'] . " " . $unParticipant['uPrenom'];
-								echo("<tr> <th style='width:180px;'>".$participant."</th>	<td>x</td> </tr>");
-							}
-						}
-					}
-					while ($numP<14) {
-						echo("<tr> <th>...</th>
-						
-						<td>&nbsp;</td> </tr>");
-						$numP = $numP+1;
-					}
-echo("				</table>
-				</fieldset>
-				</td>	
-			</tr>
-			</table>
-			<fieldset><legend>Observations</legend>
-				<table style='border: 0px solid white;'>
-					<tr> 
-						 <td>".$infosIntervention['commentaire1']."</td>
-					</tr>
-				</table>
-			</fieldset>			
-		</div>");
-/*================================================================================================== Onglet (2) */
-/*
-echo ("
-		<div style='display: none;' class='unOnglet' id='contenuOnglet2'>
-			<fieldset><legend>XXXX</legend>
-			<table>
-				<tr><th style='width:130px;'>.....</th></tr>
-				<tr><td>xxxx</td></tr>
-			</table>
-			</fieldset>
-		</div>");
-
-/*================================================================================================== Onglet 3 */
-/*
-echo ("
-		<div style='display: none;' class='unOnglet' id='contenuOnglet3'>
-			<fieldset><legend>XXXX</legend>
-			<table>
-				<tr><th style='width:130px;'>.....</th></tr>
-				<tr><td>xxxx</td></tr>
-			</table>
-			</fieldset>
-		</div>
-
-	</div>
-</div>");			
-*/
-?>
-
 <div class="lesInterventions" style="height: 200px;">
-	<!-- Liste des interventions -->
+	<table>
-</div>
+		<th>
+			<td>Date</td>
+			<td>Caserne</td>
+			<td>Motif</td>
+			<td>Lieu</td>
+			<td>Heure de début</td>
+			<td>Heure de fin</td>
+		</th>
 
+		<?php
+		foreach ($variable as $key => $value) {
+			# code...
+		}
+		?>
+	</table>
+
+
+
+	<p>Lorem Elsass ipsum réchime amet non <span class="infobulle" aria-label="texte de l'infobulle">Choucroute</span>
+		Picon bière Coopé knack tchao bissame hopla</p>
+
+</div>

vues/v_nouvelleIntervention.php

@@ -3,8 +3,8 @@
 
 <div class="nouvelleInter">
     <h1>Nouvelle intervention</h1>
-    <div class="formulaire">
+    <div class="formulaire" >
-        <form action="">
+        <form action="" id="formulaireInter">
 
             <label for="motif">Motif de l'intervention : </label>
             <select name="motif" id="motifInter">
@@ -12,7 +12,10 @@
                 foreach ($lesMotifs as $key => $type) {
                     echo '<optgroup label="' . $key . '">';
                     foreach ($type as $motif) {
-                        echo ' <option value="' . $motif['pIndice'] . '">' . $motif['pLibelle'] . '</option>';
+                        echo ' <option value="' . $motif['pIndice']
+                            . '" data-time="' . $motif['pPlancher'] 
+                            . '" data-effectif="' . $motif['pPlafond'] .'" >'
+                            . $motif['pLibelle'] . '</option>';
                     }
                 }
                 ?>
@@ -50,17 +53,18 @@
                 ?>
                 <div id="<?= $pompier['pId'] ?>" class="<?= $pompier['pLibelle'] ?>"
                     style="background-color: <?= $pompier['pValeur'] ?>" draggable="true"
-                    ondragstart="dragstartHandler(event)">
+                    data-intervention="<?= $pompier['enIntervention'] ?>" ondragstart="dragstartHandler(event)">
                     <?= $pompier['pPrenom'] ?>
                     <?= $pompier['pNom'] ?>
-                    (<?= $pompier['statut'] ?>)
+                    (
+                    <?= $pompier['statut'] ?>)
                 </div>
             <?php endforeach ?>
 
         </div>
         <div id="target" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)"
             ondragstart="dragstartHandler(event)" class="pompierIntervenant">
-            <p>Nombre de pompiers conseillé: 4</p>
+            <p id="nbPompierCons">Nombre de pompiers conseillé: 4</p>
 
         </div>
     </div>