olð6°â÷G¤MÜN?ƒK„,¸�ã™çF=QwÌÍTûåõ?ðA.ˆf£]Ò}á=�ÛË-ôY‚QWÔ~FŒ1Óœõƒø$›”ö™„ü Di¿ªžö—ò;(È£Ç®'¸+9Ÿw©Ç"šuR€3ˆúˆÌð�<¥…©ÞŽC”—ƒ”ß8;õ±d†_ËW´É)Ðêˆ‘g9žM6›šÀd3R#‡Q@Ž)Çó~˜rÁlBypîQ˜“fÀ&
Éùhfw@€çèàÚæZyÿä§ø6Ç¢-·üÞUþÍza­ º²®8ÔYˆË\à³¿Ý_ìkÞ-Øù‰þÙ¦üùÞS#êMq€Žµ¯ê7^”™þÚXý�h2þ2…¡AÄ”`È M€®�­ýnÿ^;tá�K­È>ˆ>ÌÕO‘Ô8`Œnö1ŸU…O±æ´Q¶ ^ü	àFo„µGs+ª‹u’’úÉÝdš�ÍM©óhò5ŒOÎ¡�…–µ!KÉ3ËË„ç¸‹wŠKÃ›x¡M¤ŠÄxŸHw)[ZcVê@¿ˆ½æ°�Hl8ZqèƒÍöâzî!�Š¬'[çOšW¾ßái†€;¸ëÎžRÒ·’®¨º)'Ê!Ÿ*?ïì„òzÁÁƒîCKuÿaùV+Ù„¼�'‡UhYÏ[þ-£ÇPú÷�0¾e·Ž±ß®–+;¡A£Þ•¿ÐZ€uÞ%ßß>Ïwþ¤qÇTIpþÎÈ„mw‹:ëRbò#ôíMWI*Ò˜ùÝ¯ò›½Æã¨³ƒv£ñáóÓ'ÿž �:öÆÂð•«À"µ¤“É„GATª«ÝM§•6ñ‹6ô®Mƒ®ôV¸\r­¯¶dmUàHv\ÈÇ2…¢È{«[™íêñÿºGcA�C‹Üj]Jh>�£uÝ”{Eyà#äÄOzÏisøã³¡é�«6õcð‹Õ©Çì»›¤ø*ÁBä÷¤RJt�6;�-¨üO7*ýv	ïž»èÅX4^±
z›ƒ„ÿPGj,B€*¥m*ºeóót_4Ù
NÛD5¥üÏäm_z¿ê‹$Ò ø f†
cÆ¼\™è�#ÙƒgzÛ9“B7+¼ÞR[™½ª:�Ÿ�ï÷Gæ�Éû?ú±é_”°*Ê”Ì�÷ß�³¤
2~�b¢ÔCD|}r«éí]³¸±kF¾-QÜÇß{�çpkXÜ(Ûé|Ê‰TÞO‹Ö5ÍìMx°×\—÷pDÐ0.·å‰QäÙ	æÍ<—°9´[Åßãš1•Èê€ÃýQºQ›Ó¾V“éöe±÷4�n¶}vYOñ½‹îé©º¢õxÓ4›îP(ð”“Ñ'o�\ÊùÉ23²>é„¥6d>\;;U»\ì¬‘/n#²zî¢	‚^À:1ÉÑHi	UA3_”l4Ù
NÛD5¥üÏämiV7s7LÕ¾Jº{ÖAˆÌäÉ(ØŒØ³�&£íð¥Mk›Î(ÃÒÍÊrm¾Œ?c(ïæõ%ú×s˜T2Ô}5]½Êä“Üt|s±ºˆ#UÁŸöSÆÍ(dk‚W^@!ÂÉÌ¹[R'•‹ˆ»—2?¦·ÐñçO;6†#�ˆÈé˜jXºª”,)áE¾/¶2§>˜ûs%WY@Þ!?üÛ;?ùÞ86p©…ü°ô‡¼Ýˆb>meOÞ¥_£_n)lÓ]ÝÆ8œ*BJU^¬|gÉš †Ÿ6ç¹æYŸ°qÂ ½,a9i¥©÷a�ÍÏà8æ¹i;\m{ƒñ-äƒ³^âÉ�ƒ<üoùŸ�1vx'!]}Eö»ƒ1·&XÊ¸™DHGÕlGîÛ)«h¹—xµËfRÊSßô¨	”ëÈ´=t;b+âÆ¿ˆ�Dößqñ=)X`öÆOærÔ€ñËï=Ý¡j, MUÐzu�˜ûÊðhÐ“—™w÷Î÷¢8Ñ}"{~Ov~È¾‡$Üº-^w[+räx‡Tm°‹ö»ÑäH PRÃé^ûì¦M�dÕ©àÔ;šÔŒƒ[˜J¥£q•TÁb'JøÒÉú[_Ò¢�äê•z
Ç Ÿ_òÌà\’v¸Ê“�÷^çHœÓo¥�Pþ(q²utyVzR„8à<\¾cô)Íû’è-h{žÜ—ú~€CRXþ~15:¤Ùh¼†jxïRÕ½¯žr-!7æƒÜ°Z—N„ù&;ú®1{ù¦\ ÅæàÌŒð9ß%G¶•M‘°È‚«:¶Oâf*› ýS'E™iöšv=‚2i–ºÝê‰!FÊÛË4Ù
NÛD5¥üÏämÆðggN¸Ù�€£Ò–ëûŽ¦ÞuQÔ¯ÿ£¬?üÛ;?ùÞ86p©…ü°«:�bª3eìô“‡Çûˆ·[ÄI½ Î ´,ù'à,¾N=äs…±O ‰C*�…º²¥ýº©Ð×sl²êKÛ¨Ð$«Å±®Fcªû¢qÌ©Y�Æ_Û?üÛ;?ùÞ86p©…ü°t¯R¼Ð­—¦µxß¸¦xË^’ª³�	Rê¹/còäèmM"ígu±p  Â=‡¿L^CsB¹A’ ‰©ò�€€¦O•âÕ¼åa‡‹3åõ;ØåWú±‰ó{UÅWaŒÄQ³5EÀ™ÆÞ¯[Cµ�‹”ãìŠ‹ÙóšG%·7Á8£³Ÿ)„H²�Ä§à
V}tÂluÎcqÿÖUñcBŒ)1Ôjàw22®õ\øû„öpaiH.Ñ˜§m¹††?ÚZ@'}€Šå;LJ+áµ¤Wú±‰ó{UÅWaŒÄQ³ß¿£æRS[Ú	*Õ5Î—µß¹í‰øA5iÿvßËÝ¶Ïv °þj¸u[hœŽtZz\1Ä|nƒÞ¾ø+»ÇÌ8l `X(\¾ÎùF’èI>ÃFYgŸ¤öˆ¦�#CžÅºµÞÑJãŽzV[-ïî�+õž2ƒ‡ßÏúEêòô)†ƒ kWŸ�u9c©Cc<TËá³±ëk0YN æ¢Lêß_‰¯–FÌƒá­¶åó=Ì½ê«4Áob7â§M@å>»îÏ9Y‘ÕÛÃ—D I¿l¹ÖûTG\B~c<Ž% ¢éÕ–ôŒ"µ?–ò«\­Qééý!ML�¯|g7^§+�÷™ÀãÉŸ��3”úc^XEIƒšŽ°^ƒ\¿MoóždJ]'7&…3  ïýPuØXâbîK !JD…~k—+wYÇs•BÙ?¡"H³Ø;m¡ ºj®� ¹	myŠ`½ªw^à|Ðô—Òˆ\u£�V%<3l×¯p«�oýÃl,4ÁˆÈAN�ä Cþ§M§¦&'Ø\QfÀ6ã`‚�@…)È_z‹ç¶QÊ¥€¹#(‘¡sd§âÆÄ3"À)Õd�–'vq”¡47«BàÂ`æ52¶n%–î• ñÓ)ÌŠ,ciêKœ]‹³U½‚½Œl|jÔ¨•à|ŸÑˆ¡§’~´‡É%v˜j§%”ÝåÔ|­¿×ªsÆælàq•TÁb'JøÒÉú[`7WÔaäH™:ÙÛr#‘î²å�³´ˆmçmò
Š91×Ã’ô)n©ìÜ¶ßŸÿ”�DùƒšKµ›p¦¶$!mîè¯žÕ_<!1Uþ¥ý{‹Ï4Þ¦.q³Þ™UÅ5«‘Â[F?	Â¥œçÄ¸øsvßÞ�ª%áÚõPZ½
íï7É23²>é„¥6d>\;;U»­	¼s5ïî//†\êþNâÛŽoeT`âEª’wR|¬Ó¡Îk¡\·$MdŽæÞùwéG{A®ñmZ–5n
e½§†R´ÍV)øœ#nG.Ú<0ÃÂÆçbHVe¿6Yæm�3£|ƒoÖæ,�lí×ß™�S5ûÆ¶³¥¬ù7˜	/ÿÐ
€‘¬/oÍµ…„Ú¾SJB¼‹.qMÖáÕ¬…Ö&¦g!Åÿ¢üºÕÃR»÷àwríÄîNŽ)Z(5·àž3�Æe~Y�^:7¯šÁ´EkêJZÑD*¼–ËF´µ¥›H
“šÉ$Ž´ŸÆþ>"¨ð÷þ€‡1æu½‹£òÐî0Â <Ô¤bDdDë3x\€,ŽRH•µ0aV±:ÔbÝLïÔóþÇ!¬P�(©«¸\ÛrûØ˜Í^¹ Ê„³!¡AÏJŽÈÜ*—S8%C ÁpþÏ	�Ò«Ü½d@k"€²o¡IŠíš†¡—…?Mˆº³N!…
 ¤÷šÄ~³Eµnd½E66MÑsë[IýŒjL(coßÉéš¥6­80rPVã»gÎÙ¿§í&êS
8—ëZ[d‰ÞåEìžâcâ›³ËQøäŠÜV*ÑkjV5{ Ù½W3ªŸ=ù¤£sÌ?x¾a06§¦&'Ø\QfÀ6ã`‚�@MJ³Î<ªÛ„Ô»£†xB<Ùïß“ØkÞøŠ�[QøäŠÜV*ÑkjV5{ Ù½ÑR�ú�7/¹xPÓˆü8ÙóLññ8‡ÈÜäÊ3N"AWìÂã’œxß¿£æRS[Ú	*Õ5Î—µÉg�ëµ˜Ð0©ùœþñÎ“9òÞq.è€huª ÃÑ.DŒÔ•b 0¨œRpD¨ð‡Wú±‰ó{UÅWaŒÄQ³Ú�#ÖåGyV"¿š÷`ÿy§¡�$éˆ#®ÔŠfÞWú±‰ó{UÅWaŒÄQ³ýg-ùÞ/2"q¸4XÃö/ŸÐ‘¤¯ KÿæÆx�Wú±‰ó{UÅWaŒÄQ³Q¡M¡ÌÁ�T ¡Tå­ì�0×PŠŒÏÝãw<`.x[ÚÐD?V<e8§è¡¸['3·åºÅîW’ÎU¨§�Z6Ý/3B·jkáEÈyWú±‰ó{UÅWaŒÄQ³&þ ºh�ÕÔxblÊŸíÊ£‰» æá/å5 Ñ o�P¾FYP·eºpífæUùHù	î·Wú†äàçµï;‘‹BEaU†�¨(9–CMjãŒ)1Ôjàw22®õ\øû„xJ‚>ø™÷·Öùf"�ì~`Wdì‹W'Áü2§å’×q ¥Ýœö©»(×1´jÚRRBñ§D–jAkZŒ*ñŽŽ\Ë@rc¶¦kõ�0ø+ûn(XØPâox¢Ûh€µý=š{„«^Ý¿±HÐŒŒ)1Ôjàw22®õ\øû„žî
@\;�ï/�×©îtî§Wú±‰ó{UÅWaŒÄQ³4Ù
NÛD5¥üÏäm	°Í’YûQ7ËÖhÊÙæffÛæ´óÔŠWÒòÒï;Wú±‰ó{UÅWaŒÄQ³M#Œ“ƒª´ÚŠ(ðûŠ]2´¶n¤ð/ê¥‰…¼íÛ}­�^¬|gÉš †Ÿ6ç¹æYwwD˜TT‚N±qnäw                 xAxes:
                        [{
                            ticks:
                            {
                                maxTicksLimit: 20,
                                display: false,
                            }
                        }],
                    },                   
                    responsive: true,
                    animation: false,
                }
            });	           
            
            sensorCharts[sensorPid] = chart;
        }


        function initChartsData()
        {
            sensors.forEach(e =>
            {
                sensorCharts[e[0]].data.datasets[0].data = sensorData[e[0]];
                sensorCharts[e[0]].update();
            });
        }
       


        async function updateSensors()
        {
            await getSensorDataLatest();
            updateCharts();
        }


        async function getSensorDataLatest()
        {
            // console.log(' > getSensorDataLatest');				 

            let t = await $.ajax(
            {
                url: 'scripts/sensors_get_data_latest.php',
                data:
                {
                },
                success: function (json)
                {
                    sensorDataLatest = JSON.parse(json);
                    
                    // console.log(json);				 
                    sensorDataLatest.forEach(e => 
                    {
                        try
                        {
                            sensorData[e[0]].push(e[1]);
                            sensorData[e[0]].shift();
                        }
                        catch(ex)
                        {
                            console.log(ex);
                        }
                    });
                }                
            });
        }   
        
        
        function updateCharts()
        {
            Object.entries(sensorCharts).forEach(([k, v]) =>
            {
                v.update();
            });
        }


        function locationHeader_clicked(src)
        {
            targetPan = $(src).parent().next();
            
            curVis = !targetPan.hasClass('d-none');
            targetPan.toggleClass('d-none', curVis);

            $(src).text(curVis ? 'â–º' : 'â–¼');
        }


        async function startStopBut_clicked()
        {
            isRunning = !isRunning;
            $('#start_stop_but').html(isRunning ? 'â—¼' : 'â–º');

            if (isRunning)
            {
                await initSensorData();
                initChartsData();
                startQueryTimer();
            }
            else
            {
                stopQueryTimer();
            }
        }

    </script>



	<div class="row h-100">			
		<div class="col-md-10 col-lg-10">


<?php

    echo('<h5 class="sensor_prop_header">Innen</h5>');	
    get_sensors(0);

    echo('<hr />');

    echo('<h5 class="sensor_prop_header">AuÃŸen</h5>');	
    get_sensors(1);

?>	

	</div>
		<div class="col-md-2 col-lg-2">
           
            <h5 class="sensor_prop_header">Operation</h5>
            <button id="start_stop_but" type="button" class="btn btn-outline-primary m-0 py-0 px-2" style=" font-family: Arial, Helvetica, sans-serif; font-size: 26px;" onclick="startStopBut_clicked()">â–º</button>

            <h5 class="sensor_prop_header mt-2">Zeit</h5>
            <div class="btn-group btn-group-sm" role="group">
                <input type="radio" class="btn-check" name="btnradio" id="time_live_but" autocomplete="off" checked>
                <label class="btn btn-outline-primary" for="time_live_but">Live</label>

                <input type="radio" class="btn-check" name="btnradio" id="time_hist_but" autocomplete="off">
                <label class="btn btn-outline-primary" for="time_hist_but">historisch</label>
            </div>       
        </div>
    </div>


<?php
	echo getFooter();


    function get_sensors($prop)  // 0: inside, 1: outside
    {
        $db_con = DbManager::GetConnection();
    
        $q = 'SELECT pid, identifier, name_de FROM site.sensor_location WHERE order_info IS NOT NULL ORDER BY order_info ASC';
        $res = $db_con->query($q);
    
        while ($db_row = $res->fetch_assoc())
        {
            echo(get_expandable_header_pan($db_row));
            // echo('<h5 class="sensor_location_header">' . $db_row['name_de'] . '</h5>');	
           
            echo('<div class="row"><div class="col-md-12 col-lg-12">');
    
            $q2 = 'SELECT sen.pid AS sen_pid, sen.name_de AS sen_name FROM site.sensor_physical s_phys, site.sensor sen WHERE sen.sensor_physical = s_phys.pid AND s_phys.location = ' . $db_row['pid'] . ' AND s_phys.location_info = ' . $prop;
            $res2 = $db_con->query($q2);
        
            while ($db_row2 = $res2->fetch_assoc())
            {
                echo(get_sensor_card($db_row2));
            }
    
            echo('</div></div>');
        }
    }


    function get_expandable_header_pan($location)
    {
        echo(
            '<h5 id="location_' . $location['pid'] . '_heading" class="sensor_location_header">
                <span class="header_pan_expander" onclick="locationHeader_clicked(this)">â–¼</span>'
                . $location['name_de'] . 
             '</h5>');	

    }


	function get_sensor_card($sensor)
	{
		$card_html = '';
	
		$card_html .= '
		<div class="card m-1 border-1 float-left" style="width: 370px;">
			<div class="card-body p-2">
				<div class="card-title">
					<h6 style="display: inline;">' . $sensor['sen_name'] . '</h6>
					<span class="float-right" style="font-size: smaller;">' . $sensor['sen_pid'] . '</span>
				</div>
				<div class="sensor_canvas_pan">
                    <canvas id="sensor_chart_' . $sensor['sen_pid'] . '"></canvas>
				</div>
			</div>
		</div>';
	
		return $card_html;
	}	
    
?>