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;
 		}

styles/styles.css

@@ -8,6 +8,7 @@
 	padding: 0em;
 	color: rgb(0, 85, 227);
 }
+
 #sommaire {
 	float: right;
 	margin-top: 20px;
@@ -15,20 +16,21 @@
 	padding: 0em;
 	color: rgb(0, 85, 227);
 }
+
 #sommaire ul {
 	padding: 0;
 	margin: 0;
 	list-style-type: none;
 }
-#sommaire li
+
-{
+#sommaire li {
 	vertical-align: middle;
 	margin-left: 2px;
-	float:left; /*pour IE*/
+	float: left;
+	/*pour IE*/
 }
 
-#sommaire ul li a
+#sommaire ul li a {
-{
 	vertical-align: middle;
 	display: block;
 	float: left;
@@ -42,22 +44,27 @@
 	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;
 }
+
 #sommaire ul li:hover ul {
 	display: block;
 }
+
 #sommaire li:hover ul li {
 	float: none;
 }
+
 #sommaire li ul {
 	position: absolute;
 }
@@ -69,6 +76,7 @@
 	background-color: #ffff00;
 	font-size: 0.75em;
 }
+
 body {
 	background-color: white;
 	/* //background-image: url(imgs/FONDGLOBAL.jpg); */
@@ -77,12 +85,14 @@ body{
 	font-family: "Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif;
 	font-size: 0.8em;
 }
+
 #page {
 	background-color: white;
 	width: 95%;
 	margin: auto;
 	border: 1px solid black;
 }
+
 #entete {
 	background-color: #8B93A7;
 	color: #881600;
@@ -92,6 +102,7 @@ body{
 	height: 100px;
 	padding: 0 100px;
 }
+
 #pied {
 	clear: both;
 	border: solid 0.2em #881600;
@@ -101,6 +112,7 @@ body{
 	padding: 0.2em;
 	border-collapse: separate;
 }
+
 #menu {
 	position: relative;
 	float: right;
@@ -119,13 +131,16 @@ body{
 	background-color: white;
 	border-left: groove 0.8em #881600;
 	margin-top: 1.1em;
-	margin-left: 82px; /*162px;   /*18%; */
+	margin-left: 82px;
+	/*162px;   /*18%; */
 	/* permet de fixer une hauteur mini sur les navigateurs modernes */
 	min-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,
+a:visited,
 a:hover {
 	color: #881600;
 }
@@ -159,6 +174,7 @@ ul#menuList a {
 	text-decoration: none;
 	width: 100%;
 }
+
 ul#menuList a:hover {
 	background: rgb(0, 85, 227);
 	color: white;
@@ -181,6 +197,7 @@ ul#menuList a:hover {
 	width: 95%;
 	overflow: scroll;
 }
+
 #contenu h2 {
 	font-size: large;
 	text-align: left;
@@ -191,6 +208,7 @@ ul#menuList a:hover {
 .logoValidW3c {
 	display: inline;
 }
+
 #libValidW3c {
 	display: inline;
 	vertical-align: middle;
@@ -203,6 +221,7 @@ ul#menuList a:hover {
 	margin-bottom: 0em;
 	width: 95%;
 }
+
 .piedForm {
 	border-bottom-width: 0.1em;
 	border-left-width: 0.1em;
@@ -214,13 +233,16 @@ ul#menuList a:hover {
 	width: 95%;
 	margin-top: 0em;
 }
+
 form {
 	margin-bottom: 1em;
 }
+
 .corpsForm legend {
 	font-weight: bold;
 	font-size: 1.2em;
 }
+
 .corpsForm label {
 	float: left;
 	text-align: right;
@@ -229,7 +251,11 @@ form {
 	padding: 0 .5em 0 0;
 	line-height: 1.8;
 }
-input, button, textarea, select{
+
+input,
+button,
+textarea,
+select {
 	font-family: "Trebuchet MS", sans-serif;
 	font-size: 1em;
 }
@@ -237,22 +263,29 @@ input, button, textarea, select{
 input:focus {
 	background-color: #ECB2E4;
 }
+
 button {
 	width: 60px;
 	height: 30px;
 	text-align: center;
 	vertical-align: middle;
 }
-input:hover, textarea:hover, select:hover{
+
+input:hover,
+textarea:hover,
+select:hover {
 	background-color: #FAFAE6;
 	cursor: pointer;
 }
+
 .controle {
 	width: 75px;
 }
+
 .controleLong {
 	width: 195px;
 }
+
 .stNb {
 	width: 40px;
 	text-align: center;
@@ -284,6 +317,7 @@ taille de caractères légèrement supérieure à la normale */
 	margin-left: 200px;
 	width: 75%;
 }
+
 .centre {
 	text-align: center;
 }
@@ -299,6 +333,7 @@ taille de caractères légèrement supérieure à la normale */
 	border: solid 0.1em #000;
 	width: 100%;
 }
+
 /* Style pour les liens de la page principale */
 #contenu .corpsTexte {
 	width: 80%;
@@ -311,6 +346,7 @@ taille de caractères légèrement supérieure à la normale */
 	color: gray;
 	text-decoration: none;
 }
+
 #contenu a:hover {
 	text-decoration: underline;
 	background-color: #D9BB7A;
@@ -358,11 +394,13 @@ table{
 	width: 100%;
 	border-collapse: collapse;
 }
+
 fieldset {
 	border-radius: 12px;
 	border: 2px solid;
 	border-color: purple;
 }
+
 legend {
 	font-size: 20px;
 }
@@ -396,7 +434,8 @@ table.stats td {
 }
 
 /* Tableaux quadrillés utilisés pour l'affichage de listes avec contenu léger*/
-table.listeLegere th, table.listeLegere td {
+table.listeLegere th,
+table.listeLegere td {
 	border: dotted rgb(178, 207, 81) 0.1em;
 	padding: 0.2em;
 	vertical-align: top;
@@ -407,6 +446,7 @@ table.listeLegere caption {
 	text-align: left;
 	margin-bottom: 0.2em;
 }
+
 table.listeLegere td {
 	width: 100px;
 	vertical-align: top;
@@ -435,14 +475,12 @@ table.listeLegere td {
 	height: 26px;
 }
 
-.lesOnglets 
+.lesOnglets {
-{
 	margin: 0;
 	padding: 0 0 0 5px;
 }
 
-.unOnglet
+.unOnglet {
-{
 	background-color: white;
 	margin-top: -1px;
 	padding: 5px;
@@ -454,8 +492,8 @@ table.listeLegere td {
 	color: #555;
 	cursor: text;
 }
-.onglet
+
-{
+.onglet {
 	display: inline-block;
 	margin: 5px 2px 0 2px;
 	padding: 5px 10px;
@@ -468,45 +506,50 @@ table.listeLegere td {
 	cursor: pointer;
 	font-weight: bold;
 }
-.inactif
+
-{
+.inactif {
 	background: #EEE;
 }
-.inactif:hover
+
-{
+.inactif:hover {
 	background: #AAA;
 }
-.actif
+
-{
+.actif {
 	background: white;
 	border-bottom: 2px solid white;
 	padding-bottom: 4px;
 	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;
@@ -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,6 +662,7 @@ table.listeLegere td {
 	background-color: #ffe9e5;
 	color: #000080;
 }
+
 #pompiers {
 	background-color: #ebeff2;
 	border-color: #3DA9C9;
@@ -636,6 +682,7 @@ table.listeLegere td {
 	padding: 0px 0px 0px 0px;
 	vertical-align: middle;
 }
+
 .select-dispo {
 	cursor: pointer;
 }
@@ -649,20 +696,24 @@ PARTIE DES INTERVENTIONS
 	width: 100%;
 
 }
+
 .formulaire {
 	width: 50%;
 	border-right: solid 1px black;
 	float: left;
 }
+
 .nouvelleInter .formulaire {
 	/* float: right; */
 }
+
 .selectionPompier {
 	margin: 0 30px;
 	overflow: auto;
 	display: flex;
 	justify-content: space-between;
 }
+
 .pompierDispo {
 	background-color: #8B93A7;
 	width: 40%;
@@ -672,6 +723,7 @@ PARTIE DES INTERVENTIONS
 	text-align: center;
 	display: inline-block;
 }
+
 .pompierDispo div,
 .pompierIntervenant div {
 	text-decoration: none;
@@ -680,6 +732,7 @@ PARTIE DES INTERVENTIONS
 	margin: 5px;
 	cursor: pointer;
 }
+
 .pompierIntervenant {
 	background-color: red;
 	width: 40%;
@@ -689,8 +742,32 @@ PARTIE DES INTERVENTIONS
 	display: block;
 	text-align: center;
 }
+
 #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>