blob: db85cf43d7d91f8c9ee6a9fe8c7c6743bd577bce [file] [log] [blame]
<!doctype html>
<html lang="en" ng-app="rcmes">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RCMET UI</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/bootstrap-responsive.min.css"/>
<link rel="stylesheet" href="css/jasny-bootstrap.min.css"/>
<link rel="stylesheet" href="css/jasny-bootstrap-responsive.min.css"/>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
<link rel="stylesheet" href="css/font-awesome.min.css"/>
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.ie.css" />
<![endif]-->
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<bootstrap-modal modal-id="datasetSelect">
<div class="modal-header">
<button class="close">&times;</button>
<h3>Dataset Select</h3>
</div>
<div class="modal-body">
<div ng-view></div>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-primary close">Close</a>
</div>
</bootstrap-modal>
<bootstrap-modal modal-id="evaluationResults">
<div class="modal-header">
<button class="close">&times;</button>
<h3>Evaluation Results</h3>
</div>
<div class="modal-body">
<p>
Comparison: <a href="{{baseURL}}/static/evalResults/{{evalResults.comparisonPath}}">
{{evalResults.comparisonPath}}</a>
</p>
<p>
Model: <a href="{{baseURL}}/static/evalResults/{{evalResults.modelPath}}">
{{evalResults.modelPath}}</a>
</p>
<p>
Observation: <a href="{{baseURL}}/static/evalResults/{{evalResults.obsPath}}">
{{evalResults.obsPath}}</a>
</p>
<p><img src="{{baseURL}}/static/evalResults/{{evalResults.comparisonPath}}" alt="" /></p>
<p><img src="{{baseURL}}/static/evalResults/{{evalResults.modelPath}}" alt="" /></p>
<p><img src="{{baseURL}}/static/evalResults/{{evalResults.obsPath}}" alt="" /></p>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-primary close">Close</a>
</div>
</bootstrap-modal>
<h1 id="rcmetHeader">RCMET UI</h1>
<div ng-controller="WorldMapCtrl">
<sap id="map"></sap>
</div>
<div ng-controller="ParameterSelectCtrl">
<div class="row">
<div class="span1 offset2 text-center">Start Date:</div>
<div class="span2">
<form>
<input ng-model="displayParams.start" type="text" class="span2" />
</form>
</div>
<div class="span1 text-center">End Date:</div>
<div class="span2">
<form>
<input ng-model="displayParams.end" type="text" class="span2" />
</form>
</div>
<div class="span1">
<button ng-click="runEvaluation()" ng-disabled="shouldDisableEvaluate()" class="btn btn-block btn-primary">
<div ng-hide="runningEval">Evaluate</div>
<div ng-show="runningEval"><i class="icon-spinner icon-spin"></i></div>
</button>
</div>
<div class="span2">
<button class="btn btn-block btn-success" bootstrap-modal-open="datasetSelect">Select a Dataset</button>
</div>
<div class="span1">
<button class="btn btn-block btn-primary" ng-disabled="shouldDisableResultsView()" bootstrap-modal-open="evaluationResults">Results</button>
</div>
</div>
<div class="row">
<div class="span1 offset2 text-center">North:</div>
<div class="span2">
<form action="">
<input ng-model="displayParams.latMax" type="text" class="span2" />
</form>
</div>
<div class="span1 text-center">East:</div>
<div class="span2">
<form>
<input ng-model="displayParams.lonMax" type="text" class="span2" />
</form>
</div>
<div class="span1">
<button ng-click="updateParameters()" ng-disabled="shouldDisableControls()" class="btn btn-block btn-info">Update</button>
</div>
<div class="span2">
<button ng-click="clearDatasets()" ng-disabled="shouldDisableClearButton()" class="btn btn-block btn-warning">Clear Datasets</button>
</div>
</div>
<div class="row">
<div class="span1 offset2 text-center">South:</div>
<div class="span2">
<form action="">
<input ng-model="displayParams.latMin" type="text" class="span2" />
</form>
</div>
<div class="span1 text-center">West:</div>
<div class="span2">
<form>
<input ng-model="displayParams.lonMin" type="text" class="span2" />
</form>
</div>
</div>
</div>
<!--Dataset display-->
<div ng-controller="DatasetDisplayCtrl">
<div ng-repeat="dataset in datasets">
<div class="row displayRow">
<div class="span10 offset2"><hr /></div>
</div>
<div class="row displayRow">
<div class="span4 offset2">
<input class="span6 text-center" type="text" value="{{dataset.name}}" />
</div>
</div>
<!--Time Values!-->
<div class="row displayRow">
<div class="span1 offset2 text-center">Start Date:</div>
<div class="span2">
<input class="span2 text-center" type="text" value="{{dataset.timeVals.start}}" readonly/>
</div>
<div class="span1 text-center">End Date:</div>
<div class="span2">
<input class="span2 text-center" type="text" value="{{dataset.timeVals.end}}" readonly/>
</div>
</div>
<!--Lat/Long Values!-->
<div class="row displayRow">
<div class="span1 offset2 text-center">North:</div>
<div class="span2">
<input class="span2 text-center" type="text" value="{{dataset.latlonVals.latMax}}" readonly/>
</div>
<div class="span1 text-center">East:</div>
<div class="span2">
<input class="span2 text-center" type="text" value="{{dataset.latlonVals.lonMax}}" readonly/>
</div>
<div class="span2">
<a class="btn btn-block" ng-click="removeDataset($index)">Remove Dataset</a>
</div>
<div class="span1" style="background-color: {{fillColors[$index]}}; height: 28px; width: 28px;"></div>
</div>
<div class="row displayRow">
<div class="span1 offset2 text-center">South:</div>
<div class="span2">
<input class="span2 text-center" type="text" value="{{dataset.latlonVals.latMin}}" readonly/>
</div>
<div class="span1 text-center">West:</div>
<div class="span2">
<input class="span2 text-center" type="text" value="{{dataset.latlonVals.lonMin}}" readonly/>
</div>
</div>
</div>
</div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
-->
<!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>-->
<script src="http://code.jquery.com/jquery.js"></script>
<!--<script src="js/bootstrap.min.js"></script>-->
<script src="js/bootstrap.js"></script>
<script src="js/jasny-bootstrap.min.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
</body>
</html>