<?php
	$width_charts 			= 1200;
	$height_charts 			=  120;
	$height_charts_small		=   80;
?>

<html>

	<head>
	
		<title>AQCM05</title>
		
		<meta name="Description" content="Sondes AQCM05">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=0.65, maximum-scale=2.0, minimum-scale=0.10">
		
		<script type="text/javascript" src="../chart_js/node_modules/chart.js/dist/chart.umd.js"></script>  
		<script type="text/javascript" src="../chart_js/node_modules/chartjs-plugin-annotation/dist/chartjs-plugin-annotation.min.js"></script>  
		<script type="text/javascript" src="../chart_js/node_modules/chart.js/downloads/luxon_2"></script>  
		<script type="text/javascript" src="../chart_js/node_modules/chart.js/downloads/chartjs-adapter-luxon_1"></script>  
		
		<style>
		
			label{
			font-family:Arial;
			font-size:16px;
			color:#cccccc;
			}

			header {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				background-color: #000033;
				color: #ffffff;
				padding: 4px;
			} 

			main {
				top: 0;
				left: 0;
				width: 100%;
				margin-top: 50px;
				background-color: #000033;
				padding: 4px;
			}

			.btn-graphiques{
				width: 184px;
				margin: 2px 6px 2px 6px;
				padding: 5px 8px 5px 8px;
				font-family: Arial, Helvetica, sans-serif;
				font-size: 15px;
				text-align: center;
				cursor: pointer;
				outline: none;
				border: none;
				border-radius: 3px;
				color:#000000;
				background-color:#dddddd;
				border-color:#dddddd
			}
			.btn-graphiques:hover{
				background-color:#ffffff;
				font-style:italic;  
			}

			
		</style>
		
	</head>

	<body bgcolor="#000033" text="#CCCCCC">

		<header>

			<table width="<?php echo( "" . $width_charts ); ?>" border="1" align="center" >
				  
				<tr>
				
					<td align="center" width="26%" >
						<label>
							<font size="5" color="lightblue" face="Arial, Helvetica, sans-serif">
								<?php echo($_SESSION['SITE_ID'] . " : " . $_SESSION['NAME']); ?>
							</font>
						</label>
					</td>
					<td align="left" >
						&nbsp;&nbsp;
						<button id="seuil_Btn" 		class="btn-graphiques" >cacher les seuils</button>
						<button id="FS_Btn" 		class="btn-graphiques" style="width:200px;">augmenter la pleine échelle</button>
						<button id="tooltip_Btn" 	class="btn-graphiques">montrer les info-bulles</button>
					</td>
					<td align="center" width="16%" >
						<label>
							<?php 
								if ( $_SESSION['PRESENCE'] != "sans" ) {
									echo( "présence(" . $_SESSION['PRESENCE'] . ")" ) ;
								}
							?>
						</label>
					</td>

				</tr>
				
			</table>
			
		</header>

		<main>

			<table width="<?php echo( "" . $width_charts ); ?>" border="1" align="center" >
				
				<?php
								
					//--------------------------------------------------------------------
					// affichage des graphiques
					//--------------------------------------------------------------------
					if ( $code_erreur == 0 ) {
						
						include("./charts_communs.js");
						
						if ( $aqcm_MESURES[2] == "Y" ) {
							echo('<tr><td><div><canvas id="Chart_CO2" height="' . $height_charts . '" style="background-color: #ffffff;" ></canvas></div></td></tr>');
							if ( $_SESSION['PRESENCE'] != "sans" ) { include("./chart_CO2.js"); } else { include("./chart_CO2_sans.js"); }			
						}
				 
						if ( $aqcm_MESURES[8] == "Y" ) {
							echo('<tr><td><div><canvas id="Chart_SPL" height="' . $height_charts_small . '" style="background-color: #ffffff;" ></canvas></div></td></tr>');
							include("./chart_SPL.js");
						}

						if ( $aqcm_MESURES[0] == "Y" ) {
							echo('<tr><td><div><canvas id="Chart_T" height="' . $height_charts_small . '" style="background-color: #ffffff;" ></canvas></div></td></tr>');
							include("./chart_T.js");
						}

						if ( $aqcm_MESURES[1] == "Y" ) {
							echo('<tr><td><div><canvas id="Chart_HR" height="' . $height_charts_small . '" style="background-color: #ffffff;" ></canvas></div></td></tr>');
							include("./chart_HR.js");
						}

						if ( $aqcm_MESURES[4] == "Y" ) {
							echo('<tr><td><div><canvas id="Chart_COV" height="' . $height_charts_small . '" style="background-color: #ffffff;" ></canvas></div></td></tr>');
							include("./chart_COV.js");
						}

						if ( $aqcm_MESURES[3] == "Y" ) {
							echo('<tr><td><div><canvas id="Chart_P" height="' . $height_charts_small . '" style="background-color: #ffffff;" ></canvas></div></td></tr>');
							include("./chart_P.js");
						}

						if ( $aqcm_MESURES[5] == "Y" ) {
							echo('<tr><td><div><canvas id="Chart_PM25" height="' . $height_charts_small . '" style="background-color: #ffffff;" ></canvas></div></td></tr>');
							include("./chart_PM25.js");
						}

						if ( $aqcm_MESURES[6] == "Y" ) {
							echo('<tr><td><div><canvas id="Chart_HCHO" height="' . $height_charts_small . '" style="background-color: #ffffff;" ></canvas></div></td></tr>');
							include("./chart_HCHO.js");
						}

						if ( $aqcm_MESURES[9] == "Y" ) {
							echo('<tr><td><div><canvas id="Chart_NOX_IAQ" height="' . $height_charts_small . '" style="background-color: #ffffff;" ></canvas></div></td></tr>');
							include("./chart_NOX_IAQ.js");
						}

						if ( $aqcm_MESURES[7] == "Y" ) {
							echo('<tr><td><div><canvas id="Chart_LUX" height="' . $height_charts_small . '" style="background-color: #ffffff;" ></canvas></div></td></tr>');
							include("./chart_LUX.js");
						}
						
					}

					//--------------------------------------------------------------------

				?>

			</table>
			
		</main>

	</body>

</html>

<?php include("./one_sonde_consult_graphiques.js"); ?>

