<!doctype html>
<html ng-app="airbox">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Airbox Konfigurator</title>

    <link href='https://fonts.googleapis.com/css?family=Roboto:400,700,300,300italic,400italic,700italic,500,500italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/wesco-theme.min.css">

    <script src="js/lib/angular.js"></script>
    <script src="js/lib/ui-bootstrap-tpls.min.js"></script>
    <script src="js/app.js"></script>
    <script src="js/angular-dss.js"></script>
    <script src="js/airbox-dss.js"></script>
    <script src="js/controllers.js"></script>

    <link rel="stylesheet" href="app.css" />
  </head>
  <body ng-controller="OverviewCtrl">

    <nav class="navbar navbar-default">
      <div class="container">
	<div class="navbar-header">
	  <a class="navbar-brand" href="#" style="padding-top:8px;"><img src="bs2_small.png"/></a>
	  <a class="navbar-brand" href="#" style="padding-top:25px;">Airbox<sup>&reg;</sup> Konfigurator</a>
	</div>
      </div>
    </nav>

    <div class="container" ng-show="ajaxError">
      <div class="alert alert-danger" role="alert">
	<h3 class="panel-title"><span class="glyphicon
					     glyphicon-alert" aria-hidden="true"></span>
	  Fehler beim Laden der Übersicht.</h3>
	<p style="font-size:0.8em;color:#888;">Keine Airbox vorhanden. Bitte überprüfen Sie ihre Installation!</p>
	<!-- <p style="font-size:0.8em;color:#888;">{{ajaxError}}</p> -->
      </div>
    </div>

    <div class="container">
      <div class="row">

	    <div class="col-md-12" style="padding-bottom:40px;text-align:center;">
	      <h2>Lüftungsstufe</h2>
	      <div class="btn-group btn-group-lg" role="group" aria-label="Lüftungsstufe">
		<label class="btn btn-primary" ng-model="currentLevel"
		btn-radio="1" ng-disabled="settingLevel"  ng-click="setLevel(1)">Minimal</label>
		<label class="btn btn-primary" ng-model="currentLevel"
		btn-radio="3" ng-disabled="settingLevel"  ng-click="setLevel(3)">Nominal</label>
	      </div>
	    </div>
	<div class="col-md-12">
	  <div class="panel panel-primary">
	    <div class="panel-heading">
	      <h3 class="panel-title">Lüftungsgeräte</h3>
	    </div>

	    <div class="panel-body" ng-show="!Airboxes.Devices.length">
	      <span class="glyphicon glyphicon-info-sign" aria-hidden="true">Keine Airboxen gefunden</span>
	    </div>

	    <ul class="list-group" ng-show="ajax.deviceListReady && Airboxes.Devices.length">
	      <li class="list-group-item" ng-repeat="airbox in Airboxes.Devices">
		<div>
		  <span class="label label-success"
		  ng-show="airbox.errorCode=='NOERROR'">Wesco Airbox<sup>&reg;</sup></span>
		  <span class="label label-danger"
		  ng-show="airbox.errorCode!='NOERROR'">Wesco Airbox<sup>&reg;</sup></span>
		</div>
		<b>{{airbox.Description}}<span ng-show="airbox.Description==''"><i>Kein Name</i></span></b>
		<div>{{airbox.dSUID}}</div>

		<div ng-show="airbox.errorCode!='NOERROR'">
		  <span class="glyphicon glyphicon-alert" aria-hidden="true"></span>
		  {{airbox_error_texts[airbox.errorCode]}}
		  <span am-time-ago="airbox.errorTime" tooltip="{{airbox.errorTime}}" ng-show="airbox.errorCode!='NOERROR'"></span>
		</div>
	      </li>
	    </ul>
	    <div class="panel-body">
	      <div ng-show="ajax.deviceListReady">
		<a class="btn btn-default" ng-click="refreshAirboxes();$event.preventDefault();$event.stopPropagation();"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> Aktualisieren</a>
		<a class="btn btn-default"
		ng-click="clearAllAirboxErrors();$event.preventDefault();$event.stopPropagation();"
		ng-show="Airboxes.Error"><span class="glyphicon
		glyphicon-remove" aria-hidden="true"></span>
		  Störungsmeldungen entfernen</a>
				<a class="btn btn-default"
		ng-click="restartAirboxes();$event.preventDefault();$event.stopPropagation();"><span class="glyphicon
		glyphicon-off" aria-hidden="true"></span> Geräte einschalten</a>

	      </div>
	      <div ng-show="!ajax.deviceListReady&&!ajaxError" style="text-align: center;">
		<img src="spinner.gif" />
		<div style="color:rgb(0, 130, 180);font-weight:bold;margin-top:5px;">Loading Airboxes</div></span>
</div>
</div>
</div>
</div>

<div class="col-md-6">
  <div class="panel panel-primary">
    <div class="panel-heading">
      <h3 class="panel-title">Aktionen bei Airbox-Störung</h3>
    </div>
    <div class="panel-body" ng-show="ajax.configReady&&ajax.exhaustFlapCandidatesReady">

      <div class="input-group" style="margin-top:10px;">
	<b>Push-Nachricht senden:</b><br>
	<div ng-show="pushTargetOptions.length==0">
	  Es konnten keine Geräte gefunden werden.
	</div>
	<div ng-repeat="target in pushTargetOptions">
	  <label>
	    <input
	       type="checkbox"
	       value="{{target.UUID}}"
	       ng-model="selectedPushTargets[target.UUID]"
	       >
	    {{target.name.replace('\&\#039;','\'')}}
	  </label>
	</div>
      </div>

      <div class="input-group" style="margin-top:10px;">
	<b>Email senden:</b>
	<input class="form-control" ng-model="config.EmailAddress">
      </div>


      <div class="input-group" style="margin-top:10px;">
	<a class="btn btn-default" ng-click="updateSmartPhonesList();$event.preventDefault();$event.stopPropagation();"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> Aktualisieren</a>
	<a class="btn btn-default" ng-click="updateConfig();$event.preventDefault();$event.stopPropagation();"><span class="glyphicon glyphicon-save"></span> Speichern</a>
      </div>
    </div>
  </div>
</div>

<div class="col-md-6">
  <div class="panel panel-primary">
    <div class="panel-heading">
      <h3 class="panel-title">Abluftklappe konfigurieren</h3>
    </div>
    <div class="panel-body" ng-show="ajax.configReady&&ajax.exhaustFlapCandidatesReady">
      <b>Abluftklappe:</b>
      <div class="input-group">
	<select ng-disabled="settingExhaustFlap" class="form-control btn btn-default dropdown-toggle" ng-model="config.ExhaustFlap" ng-options="device.value as device.name for device in exhaustFlapCandidates">
	  <option value="">---</option>
	</select>
      </div>

      <div class="input-group" style="margin-top:10px;">
	<a class="btn btn-default" ng-click="updateExhaustFlap();$event.preventDefault();$event.stopPropagation();"><span class="glyphicon glyphicon-save"></span> Speichern</a>
      </div>
    </div>
  </div>
</div>

<!-- <div class="col-md-6"> -->
<!--   <div class="panel panel-primary"> -->
<!--     <div class="panel-heading"> -->
<!--       <h3 class="panel-title">Aktionen bei Airbox-Störung</h3> -->
<!--     </div> -->
<!--     <div class="panel-body" ng-show="ajax.configReady&&ajax.exhaustFlapCandidatesReady"> -->
<!--       <b>Abluftklappe schliessen:</b> -->
<!--       <div class="input-group"> -->
<!-- 	<select ng-disabled="settingExhaustFlap" class="form-control btn btn-default dropdown-toggle" ng-model="config.ExhaustFlap" ng-options="device.value as device.name for device in exhaustFlapCandidates"> -->
<!-- 	  <option value="">---</option> -->
<!-- 	</select> -->
<!--       </div> -->

<!--       <div class="input-group" style="margin-top:10px;"> -->
<!-- 	<b>Push-Nachricht senden:</b><br> -->
<!-- 	<div ng-show="pushTargetOptions.length==0"> -->
<!-- 	  Es konnten keine Geräte gefunden werden. -->
<!-- 	</div> -->
<!-- 	<div ng-repeat="target in pushTargetOptions"> -->
<!-- 	  <label> -->
<!-- 	    <input -->
<!-- 	       type="checkbox" -->
<!-- 	       value="{{target.UUID}}" -->
<!-- 	       ng-model="selectedPushTargets[target.UUID]" -->
<!-- 	       > {{target.name}} -->
<!-- 	  </label> -->
<!-- 	</div> -->
<!--       </div> -->

<!--       <div class="input-group" style="margin-top:10px;"> -->
<!-- 	<b>Email senden:</b> -->
<!-- 	<input class="form-control" ng-model="config.EmailAddress"> -->
<!--       </div> -->

<!--       <div class="input-group" style="margin-top:10px;"> -->
<!-- 	<a class="btn btn-default" ng-click="updateConfig();$event.preventDefault();$event.stopPropagation();"><span class="glyphicon glyphicon-save"></span> Speichern</a> -->
<!--       </div> -->
<!--     </div> -->
<!--   </div> -->
<!-- </div> -->

<div class="col-md-12">
  <div class="panel panel-primary">
    <div class="panel-heading">
      <h3 class="panel-title">Logbuch</h3>
    </div>

    <table class="table table-striped table-condensed" ng-show="ajax.errorlogReady">
      <tbody>
	<tr ng-repeat="message in errorLog.slice(((logTable.currentPage-1)*10), ((logTable.currentPage)*10)) track by $index">
	  <td>{{message.datetime.toLocaleString()}}</td>
	  <td>{{message.name}}</td>
	  <td><span class="glyphicon glyphicon-warning-sign" aria-hidden="true" ng-show="message.type=='W'"></span><span class="glyphicon glyphicon-alert" aria-hidden="true" ng-show="message.type=='E'"></span><span class="glyphicon glyphicon-info-sign" aria-hidden="true" ng-show="message.type=='I'"></span> {{airbox_error_texts[message.errorcode]}}</td>
	</tr>
      </tbody>
    </table>
    <div class="panel-body">
      <div ng-show="ajax.errorlogReady">
	<pagination total-items="errorLog.length" ng-model="logTable.currentPage" boundary-links="true" rotate="false" max-size="logTable.maxSize"></pagination>

	<div><a class="btn btn-default" ng-click="refreshErrorLog();$event.preventDefault();$event.stopPropagation();"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> Aktualisieren</a></div>
      </div>

      <div ng-show="!ajax.errorlogReady&&!ajaxError" style="text-align: center;">
	<img src="spinner.gif" />
	<div style="color:rgb(0, 130, 180);font-weight:bold;margin-top:5px;">Loading Logfiles</div></span>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
