{*********************************************************
@author:Julien George
@ email: j.george@esia-sa.com
**********************************************************}
{if isset($errors) && !empty($errors)}
    <div class="EventCritical">

        <p>{$errors}</p>

    </div>
{/if}

{if $tab eq ''}
    {include file='overall_header.html'}
    <link rel="stylesheet" type="text/css" href="{$apache_path}ups.css"/>
       <!--<link rel="stylesheet" type="text/css" href="{$apache_path}o365.css"/>-->
        <div id="messages"></div>
        {include file='overall_node_control_header.html' node=$node status=$node_status idListService='ListService' jsCloseDialog="Utils.reload_active_tabs('#tabs')"}
	    <div id="tabs" style="float:left;height:100%; width:99%;margin:1px;">
		    <ul>
		        <li class="node-state"><a href="{$apache_path}/control_ups.php?nodeid={$node.id}&amp;tab=servicestate" class="menutabs">
		        	{$lang.SHOW_SERVICE}</a>
		        </li>
				{include file='overall_node_control_header.html' node=$node default_tab='on'}
                {*Ajout d'autre onglets
		        <li class="cloud-services-icn small800">
		            <a href="{$apache_path}/control_ups.php?nodeid={$node.id}&amp;tab=ups_Line" class="menutabs">

			        </a>
			    </li>
                *}
                <li class="node-state">
		            <a href="{$apache_path}/control_ups.php?nodeid={$node.id}&amp;tab=ups_Line" class="menutabs">
				    {$lang.UPS_LINE}
			        </a>
			    </li>
		    </ul>
	    </div>
        {include file='overall_node_control_footer.html'}
        <script type="text/javascript">
        /* <![CDATA[ */ {literal}

          $(function() {
            $( "#tabs" ).tabs({
                heightStyle: "content",
                beforeLoad: function( event, ui ) {
	              	$('#esiaOverlay').show();
	              	$('#loadingGif').show();
			        return true;
                ui.jqXHR.fail(function() {
                  ui.panel.html(
                    "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                    "If this wouldn't be a demo." );
	              	$('#esiaOverlay').hide();
	              	$('#loadingGif').hide();
                });
              },
              load: function (event, ui){
	              	$('#esiaOverlay').hide();
	              	$('#loadingGif').hide();
			        if(ui.panel.find("#page_login_detect").length > 0) location.reload();
		        },
            });
          });

            {/literal}
          </script>
    {include file='overall_footer.html'}
{elseif $tab =='servicestate'}
        {*Onglet par défaut*}
        <div>
            <div id="ups_stats" class="bigFive" class="small800">

                <div class="slider" id="slider_ups" style="height: auto;">
                    <a href="#" id="next" class="next control">&gt;</a>
                    <a href="#" id="prev" class="prev control">&lt;</a>
                <ul>
                    <li id="L1" class="active">
                        <div class="tableview_title">
                            <H1>{$lang.UPS_LINE} 1</H1>
                        </div>
                        <div class="nodeViewInner ups_inner">

                            <div class="charts" id="charts-rrd-l1"></div>
                            <div class="label_charts" style="text-align: center;"> {$lang.UPS_INFO_GAUGE}</div>
                            <div class="charts" id="charts-gauge-l1"> </div>
                        </div>
                    </li>
                    <li id="L2">
                        <div class="tableview_title">
                            <H1>{$lang.UPS_LINE} 2</H1>
                        </div>
                        <div class="nodeViewInner ups_inner">

                            <div class="charts" id="charts-rrd-l2"></div>
                            <div class="label_charts" style="text-align: center;"> {$lang.UPS_INFO_GAUGE}</div>
                            <div class="charts" id="charts-gauge-l2"></div>
                        </div>
                    </li>
                    <li id="L3">
                        <div class="tableview_title">
                            <H1>{$lang.UPS_LINE} 3</H1>
                        </div>
                        <div class="nodeViewInner ups_inner">

                            <div class="charts" id="charts-rrd-l3"></div>
                            <div class="label_charts" style="text-align: center;"> {$lang.UPS_INFO_GAUGE}</div>
                            <div class="charts" id="charts-gauge-l3"></div>
                        </div>
                    </li>
                </ul>
                </div>
            </div>

            <div id="ups_snmp" class="bigFive" >
                <div class="tableview_title">
                    <h1>{$lang.UPS_SYSTEM}</h1>
                </div>
                <div class="nodeViewInner" id="system" style="padding:5px; height:399px;">		
                	<div id="load_snmp_bar"><div class="progress-label">{$lang.LOADING}</div></div>          
					<table class="tab switchTab" id="system_snmp" style="display:none;width:100%; bottom:0px;">
                        <tbody>
                        	<tr>
                            	<td class="" style="font-weight: bold;">{$lang.UPS_SYSNAME} : </td>
                            	<td id="sysname"></td>
                        	</tr>
                        	<tr>
                        		<td class="" style="font-weight: bold;">{$lang.UPS_SYSLOCATION} : </td>
                        		<td id="syslocation"></td></td>
                        	</tr>
                        	<tr>
                        		<td class="" style="font-weight: bold;">{$lang.UPS_SYSCONTACT} : </td>
                        		<td id="syscontact"></td>
                        	</tr>
                        	<tr>
	                        	<td class="" style="white-space: nowrap;font-weight: bold;">{$lang.UPS_SYSDESCRIPTION} : </td>
	                        	<td id="sysdescr"></td>
							</tr>
                        </tbody>
                    </table>                 
                </div>
               <script type="text/javascript">
		          /* <![CDATA[ */
                var request = $.ajax({ldelim}url:'/node_control.php',
					type : 'GET',
					cache : false,
					data : 'id={$node.id}&action=show_snmp&format=json',
					dataType : 'html',
				{rdelim});
		        {literal}
		        $('#load_snmp_bar').progressbar({value: false});
				request.done(function(data)
				{
					data = JSON.parse(data);
					$('#load_snmp_bar').progressbar( "destroy");
					$(".progress-label").text("");
					if(data['ERROR'])
					{	
						let text =$('<p>'+ data['ERROR']+'</p>' );
						text.addClass('EventCritical')
						$('#system').prepend(text);
					}
					else
					{
						
						let img = $('<img src="'+data['manufacturer']['logo']+'" alt="'+data['manufacturer']['name']+'" />');
						$('#system').prepend(img);
						img.width('120px');
						img.height('120px');
						$('#system_snmp').show();
						$('#sysname').text(data['sysname']);
						$('#syslocation').text(data['syslocation']);
						$('#syscontact').text(data['syscontact']);
						$('#sysdescr').text(data['sysdescr']);
					}
				//$('#sysuptime').text(to_string(data['uptime']));
				});
				{/literal}
		         	/* ]]> */
		        </script>
            </div>

            <div id="ups_visual" class="bigFive upsShow1400px">
                <div class="tableview_title">
                    <h1>{$lang.UPS_VISUAL}</h1>
                </div>
                <div class="nodeViewInner" id="svg">
                <svg xmlns="http://www.w3.org/2000/svg" width="400px" height="400px" viewBox="39 70 400 400">
                    {if isset($array['timeBattery'])}
                    	 <text id="time" x="215" y="165" font-size="12px">{$array['timeBattery']}</text>
                    {/if}
                    {if isset($array['levelBattery'])}
                    	 <text id="levelbatt" x="195" y="225" font-size="12px">{$lang.UPS_BATTERY_LOAD} {$array['levelBattery']}</text>
                         <text id="tempbatteri" x="180" y="240" font-size="12px">{$lang.UPS_BATTERY_TEMP} {$array['tempBattery']}</text>
                    {/if}

                    {if isset($array['in_Line1']['Volt'])}
                    	<text id="Volt1" x="60" y="210" font-size="12px">
                   		 	L1: {$array['in_Line1']['Volt']} Volts
                   		</text>
                   		<path class="line fill{$array['in_Line1']['State']}" id="line_in1" style="stroke-width:.30661067" d="m 57.572307,213.85757 h 83.630483 v 4.19175 H 57.572307 Z"/>
                   		<path class="line fill{$array['in_Line1']['State']}" style="stroke-width:.28396422" d="m 141.23662,190.20968 h 56.53033 v 2.93391 h -56.53033 z"/>
                   		<path class="line fill{$array['in_Line1']['State']}" style="stroke-width:.28396422" d="m 141.23662,193.14359 h 2.81657 v 24.67711 h -2.81657 z"/>
                   	{else}
                   	    <path class="line" id="line_in1" style="stroke-width:.30661067" d="m 57.572307,213.85757 h 83.630483 v 4.19175 H 57.572307 Z"/>
                   		<path class="line" style="stroke-width:.28396422" d="m 141.23662,190.20968 h 56.53033 v 2.93391 h -56.53033 z"/>
                   		<path class="line" style="stroke-width:.28396422" d="m 141.23662,193.14359 h 2.81657 v 24.67711 h -2.81657 z"/>
                    {/if}
                    {if isset($array['in_Line2']['Volt'])}
		                <text id="Volt2" x="60" y="240" font-size="12px">
		                    L2: {$array['in_Line2']['Volt']} Volts
		                </text>
		                <path class="line fill{$array['in_Line2']['State']}" id="line_in2" style="stroke-width:0.94294637" d="m 57.782514,244.08595 h 83.420276 v 4.19175 H 57.782514 Z"/>
                    {/if}
                    {if isset($array['in_Line3']['Volt'])}
		               <text id="Volt3" x="60" y="270" font-size="12px">
		                    L3: {$array['in_Line3']['Volt']} Volts
		                 </text>
		                <path class="line fill{$array['in_Line3']['State']}" id="line_in3" style="stroke-width:0.94294637" d="m 57.572307,275.36531 h 83.630483 v 4.19175 H 57.572307 Z"/>
					{/if}
					{if isset($array['in_Line1']['Volt']) || isset($array['in_Line2']['Volt']) || isset($array['in_Line3']['Volt'])}
		                <path class="line fillOK" style="stroke-width:.32399106" d="m 141.23662,217.8207 h 2.81657 v 95.67201 h -2.81657 z"/>
		                <path class="line fillOK" style="stroke-width:.26837823" d="m 144.01187,310.17129 h 175.93568 v 3.35217 H 144.01187 Z"/>
		                <path class="line fillOK" style="stroke-width:.51848441" d="m 319.94755,217.1405 h 3.09363 v 96.38296 h -3.09363 z"/>
					{else}
			            <path class="line" style="stroke-width:.32399106" d="m 141.23662,217.8207 h 2.81657 v 95.67201 h -2.81657 z"/>
		                <path class="line" style="stroke-width:.26837823" d="m 144.01187,310.17129 h 175.93568 v 3.35217 H 144.01187 Z"/>
		                <path class="line" style="stroke-width:.51848441" d="m 319.94755,217.1405 h 3.09363 v 96.38296 h -3.09363 z"/>
					{/if}
                    <path style="stroke-width:.07340292" d="m 206.94647,170.53336 h 2.75555 v 4.34245 h -2.75555 z"/>
                    <path style="stroke-width:.08679613" d="m 258.71138,168.71581 h 2.75555 v 6.07081 h -2.75555 z"/>

                    <path id="rectBattery" class="fill{$array['batteryState']}" style="stroke:#000;stroke-width:.50624835;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
                    		d="m 198.57733,175.41603 h 72.04093 v 31.23055 h -72.04093 z"/>
                    {if isset($array['Line1']['Volt'])}
						<text id="out_load1" x="325" y="210" font-size="12px">
		                		L1: {$array['Line1']['Volt']}V, {$array['Line1']['Line']}% load
		                </text>
		                <path class="line fill{$array['Line1']['State']}" style="stroke-width:.18881969" d="m 271.46186,190.00055 h 49.67258 v 2.93392 h -49.67258 z"/>
		                <path class="line fill{$array['Line1']['State']}" style="stroke-width:.24896605" d="m 319.94755,189.95636 h 3.09363 v 27.18414 h -3.09363 z"/>
		                <path class="line fill{$array['Line1']['State']}" id="line_out1" style="stroke-width:.30661067" d="m 322.99813,213.01674 h 111.7885 v 4.19175 h -111.7885 z"/>
		            {else}
		                <path class="line" style="stroke-width:.18881969" d="m 271.46186,190.00055 h 49.67258 v 2.93392 h -49.67258 z"/>
		                <path class="line" style="stroke-width:.24896605" d="m 319.94755,189.95636 h 3.09363 v 27.18414 h -3.09363 z"/>
						<path class="line" id="line_out1" style="stroke-width:.30661067" d="m 322.99813,213.01674 h 111.7885 v 4.19175 h -111.7885 z"/>
                    {/if}
                    {if isset($array['Line3']['Volt'])}
						<text id="out_load2" x="325" y="240" font-size="12px">
		                		L2: {$array['Line2']['Volt']}V, {$array['Line2']['Line']}% load
		                </text>
		                <path class="line fill{$array['Line2']['State']}" id="line_out2" style="stroke-width:.30661067" d="m 322.99813,243.77062 h 111.7885 v 4.19175 h -111.7885 z"/>
                    {/if}
                    {if isset($array['Line3']['Volt'])}
						<text id="out_load3" x="325" y="270" font-size="12px">
		                		L3: {$array['Line3']['Volt']}V, {$array['Line3']['Line']}% load
		                </text>
                   		<path class="line fill{$array['Line3']['State']}" id="line_out3" style="stroke-width:.30661067" d="m 322.99813,274.52448 h 111.49122 v 4.19175 H 322.99813 Z"/>
                    {/if}
                </svg>
                </div>
        	</div>
        	</div>
        </div>
        <div id="screen_node"></div>

        <script type="text/javascript">
            /* <![CDATA[ */
            Utils.getServiceState({$node.id},'screen_node');
            /* ]]> */
        {if ! isset($array['Line2']['Line']) && ! isset($array['Line3']['Line'])}
            $(".next").css("visibility"," hidden");
            $(".prev").css("visibility"," hidden");
        {/if}
        {if isset($array['Line1']['Line'])}

            if({$array['Line1']['isActive']} != 0 )

            {
                {if isset($array['Line1']['Line'])}
                Utils.generateGauge({$array['Line1']['Line']},'charts-gauge-l1','Usage');
                Utils.RRDgenerateSimpleGraphic({$array['Line1']['id']},'#charts-rrd-l1','-1d',true);
                {/if}
            }
            if({$array['Line2']['isActive']} != 0 )
            {
                {if isset($array['Line2']['Line'])}
                Utils.generateGauge({$array['Line2']['Line']},'charts-gauge-l2','Usage');
                Utils.RRDgenerateSimpleGraphic({$array['Line2']['id']},'#charts-rrd-l2','-1d',true);

                {/if}
            }



            if({$array['Line3']['isActive']} != 0)

            {
                {if isset($array['Line3']['Line'])}
                Utils.generateGauge({$array['Line3']['Line']},'charts-gauge-l3','Usage');
                Utils.RRDgenerateSimpleGraphic({$array['Line3']['id']},'#charts-rrd-l3','-1d',true);
                {/if}
            }


         {/if}

        </script>
        <script type="text/javascript">
            {literal}
             $(document).ready(function(){
                $(function() {

                  var slideCount =  $(".slider ul li").length;
                  var slideWidth =  $(".slider ul li").width();
                  var slideHeight =  $(".slider ul li").height();
                  var slideUlWidth =  slideCount * slideWidth;

                  $(".slider").css({"max-width":slideWidth, "height": slideHeight});
                  $(".slider ul").css({"width":slideUlWidth, "margin-left": - slideWidth });
                  $(".slider ul li:last-child").prependTo($(".slider ul"));

                  function moveLeft() {
                    $(".slider ul").stop().animate({
                      left: + slideWidth
                    },700, function() {
                      $(".slider ul li:last-child").prependTo($(".slider ul"));
                      $(".slider ul").css("left","");
                    });
                  }

                  function moveRight() {
                    $(".slider ul").stop().animate({
                      left: - slideWidth
                    },700, function() {
                      $(".slider ul li:first-child").appendTo($(".slider ul"));
                      $(".slider ul").css("left","");
                    });
                  }


                  $(".next").on("click",function(){
                    moveRight();
                  });

                  $(".prev").on("click",function(){
                    moveLeft();
                  });
                });
             });

         {/literal}

        </script>
    {elseif $tab =='ups_Line'}
    {if isset($arrayLine)}
    <form action="/plugin/ups/control_ups.php?nodeid={$nodeid}" method="POST" >
       <table class="tab" id="ServiceTable">
			    <thead>
				    <tr>
					    <th>
						    <input type="checkbox" id="selectall" name="selectall" onclick="selectall()"/>
					    </th>
					    <th>{$lang.UPS_SERVICENAME}</th>
					    <th>{$lang.UPS_STATE}</th>
                        <th>Volt</th>
                        <th>Watt</th>
				    </tr>
			    </thead>
			    <tbody>
				    {foreach name=outer  item=service from=$arrayLine }
					    <tr>
                            <td>
                            {if $service.active==0 && $service.volt !=0}
								    <input type="checkbox" class="checkbox1" name="check-{$service.id}-output" value="{$service.id}"  onclick="addService()">
							{/if}
                            </td>
						    <td>{$lang.UPS_LINE_OUTPUT} {$service.id}</td>
						    {if $service.volt==0}
						    	<td class="EventUnknown">{$lang.UPS_NOT_CONNECTE}</td>
						    {elseif $service.state eq 'OK'}
						    	<td class="EventOK">{$service.state}</td>
						    {/if}
                            <td>{$service.volt} V</td>
                            <td data-text="{$service.watt}">{$service.watt|number_format:0:",":" "} WATT</td>
                    	</tr>
				    {/foreach}
				    {foreach name=outer  item=service from=$arrayInputLine }
					    <tr>
                            <td>
                            {if $service.active==0 && $service.volt !=0}
								    <input type="checkbox" class="checkbox1" name="check-{$service.id}-input" value="{$service.id}"  onclick="addService()">
							{/if}
                            </td>
						    <td>{$lang.UPS_LINE_INPUT} {$service.id}</td>
						    {if $service.volt==0}
						    	<td class="EventUnknown">{$lang.UPS_NOT_CONNECTE}</td>
						    {elseif $service.state eq 'OK'}
						    	<td class="EventOK">{$service.state}</td>
						    {/if}
                            <td>{$service.volt} V</td>
                            <td data-text="{$service.va}" >{$service.va|number_format:0:",":" "} VA</td>
                    	</tr>
				    {/foreach}
			    </tbody>
			    </table>
        <input type='submit' id="submit"  value="{$lang.UPS_ADD}"/>
        <input type='hidden' name="randomForm" value="{$hidden}" />
       </form>
        <script type="text/javascript">


		{literal}
			function selectall(event)
			{

	            if($('#selectall').is(':checked'))

	            {
	             	$('#ServiceTable tr:not(.filtered) input.checkbox1').each(function() {
	             		this.checked = true;
	             		});
	            }
	            else
	            {
                    $('.checkbox1').each(function() { //loop through each checkbox
	                this.checked = false; });
	            }
            }
	    Utils.createTable("#ServiceTable");
	      //-->
	      </script>
        {/literal}
        {/if}
{/if}