<?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="48%" >
						<label style="color: lightblue;font-size:18px;" >
							SITE : <?php echo( $_SESSION['SITE_ID'] . " | " . $time_start_string); ?>
						</label>
					</td>
					<td align="left" >
						&nbsp;&nbsp;
						<button id="seuil_Btn" 		class="btn-graphiques">cacher les seuils</button>
						<button id="tooltip_Btn" 	class="btn-graphiques">montrer les info-bulles</button>
						<button id="width_Btn" 		class="btn-graphiques"><?php echo($width_Btn_text); ?></button>
					</td>

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

		<main>

			<table width="<?php echo( "" . $width_charts ); ?>" border="1" align="center" >
				
				<?php
								
					//--------------------------------------------------------------------
					// affichage des graphiques
					//--------------------------------------------------------------------
						include("./charts_communs.js");
						
						if ( $mesures_sondes_str[2] == "Y" ) {
							echo('<tr><td><div><canvas id="Chart_CO2" height="' . $height_charts . '" style="background-color: #ffffff;" ></canvas></div></td></tr>');
							include("./chart_CO2.js");			
						}
				 
						if ( $mesures_sondes_str[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 ( $mesures_sondes_str[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 ( $mesures_sondes_str[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 ( $mesures_sondes_str[8] == "Y" ) {
							echo('<tr><td><div><canvas id="Chart_SPL_peak" height="' . $height_charts_small . '" style="background-color: #ffffff;" ></canvas></div></td></tr>');
							include("./chart_SPL_peak.js");
						}

						if ( $mesures_sondes_str[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 ( $mesures_sondes_str[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 ( $mesures_sondes_str[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 ( $mesures_sondes_str[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 ( $mesures_sondes_str[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 ( $mesures_sondes_str[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_site_consult_display_graphs.js"); 
?>

