<?php
$datetime = new DateTime(‘NOW’);
$askedDay = empty($_POST[‘submit_day’]) ? $datetime->format(‘d/m/Y’) : $_POST[‘day_choice’];
?>
<!DOCTYPE html>
<html lang=« fr »>
<head>
<meta charset=« UTF-8 »>
<meta name=« viewport » content=« width=device-width, initial-scale=1.0 »>
<title>Document</title>
<link rel=« stylesheet » href=« style.css »>
<link rel=« stylesheet » href=« //code.jquery.com/ui/1.13.0/themes/Black-Tie/jquery-ui.css »>
<script type=« text/javascript » src=« https://www.gstatic.com/charts/loader.js »></script>
<script type=« text/javascript »>
<?php echo « var askedDay = ‘$askedDay‘; »; ?>
console.log(askedDay);
google.charts.load(‘current’, {‘packages’:[‘corechart’]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
ajaxCall();
setInterval(ajaxCall, 900000); //900000 MS == 15 minutes
function ajaxCall() {
var jsonData = $.ajax({
url: « http://jardin-connect.alwaysdata.net/********/api.php?day= » +askedDay,
dataType: « json »,
async: false
}).responseText;
var data = new google.visualization.DataTable(jsonData);
var options = {
title:‘Irrigation’,
curveType: ‘function’,
legend:{position:‘bottom’},
chartArea:{
width:‘90%’,
height:‘65%’
},
animation:{
duration: 1000,
easing: ‘out’,
},
hAxis:{
gridlines:{
color:‘red’,
format: ‘scientific’
}
},
vAxis: {
maxValue: 100,
minValue: –20
},
pointShape: ‘circle’,
pointSize: 10,
lineWidth: 3,
colors: [‘#ff9b00’,‘#138cff’, ‘#008000’],
backgroundColor:{
fill:‘#fcfcfc’
},
crosshair:{
color:‘#000’
}
}
var chart = new google.visualization.LineChart(document.getElementById(‘chart_display’));
chart.draw(data, options);
}
}
</script>
</head>
<body>
<main class=« ak_container »>
<div id=« homepage_page »>
<a href=« »>Aujourd’ui</a>
<form id=« asked_date_form » action=« » method=« POST »>
<label for=« datepicker »>Jour</label>
<input id=« datepicker » name=« day_choice » type=« text » autocomplete=« off » value=« »>
<input type=« submit » id=« submit_day » name=« submit_day » value=« Afficher »>
</form>
<p id=« today »>
<?php echo $askedDay ?>
</p>
<div id=« chart_display »></div>
</div>
</main>
<script src=« https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js » integrity=« sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ== » crossorigin=« anonymous » referrerpolicy=« no-referrer »></script>
<script src=« https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js » integrity=« sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA== » crossorigin=« anonymous » referrerpolicy=« no-referrer »></script>
<script type=« text/javascript »>
$( function() {
$( « #datepicker » ).datepicker({
altField: « #datepicker »,
closeText: ‘Fermer’,
prevText: ‘Précédent’,
nextText: ‘Suivant’,
currentText: ‘Aujourd\’hui’,
monthNames: [‘Janvier’, ‘Février’, ‘Mars’, ‘Avril’, ‘Mai’, ‘Juin’, ‘Juillet’, ‘Août’, ‘Septembre’, ‘Octobre’, ‘Novembre’, ‘Décembre’],
monthNamesShort: [‘Janv.’, ‘Févr.’, ‘Mars’, ‘Avril’, ‘Mai’, ‘Juin’, ‘Juil.’, ‘Août’, ‘Sept.’, ‘Oct.’, ‘Nov.’, ‘Déc.’],
dayNames: [‘Dimanche’, ‘Lundi’, ‘Mardi’, ‘Mercredi’, ‘Jeudi’, ‘Vendredi’, ‘Samedi’],
dayNamesShort: [‘Dim.’, ‘Lun.’, ‘Mar.’, ‘Mer.’, ‘Jeu.’, ‘Ven.’, ‘Sam.’],
dayNamesMin: [‘D’, ‘L’, ‘M’, ‘M’, ‘J’, ‘V’, ‘S’],
weekHeader: ‘Sem.’,
dateFormat: ‘dd/mm/yy’
});
});
</script>
</body>
</html>