| <!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">×</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">×</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> |