You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@climate.apache.org by jo...@apache.org on 2014/07/21 15:24:45 UTC
[09/50] git commit: Add main.html
Add main.html
Project: http://git-wip-us.apache.org/repos/asf/climate/repo
Commit: http://git-wip-us.apache.org/repos/asf/climate/commit/87c74965
Tree: http://git-wip-us.apache.org/repos/asf/climate/tree/87c74965
Diff: http://git-wip-us.apache.org/repos/asf/climate/diff/87c74965
Branch: refs/heads/master
Commit: 87c749652a2d5fa14ee6ee8eb0e0cae1726101d3
Parents: 7f72bc5
Author: Michael Joyce <jo...@apache.org>
Authored: Wed Jul 16 13:08:06 2014 -0700
Committer: Michael Joyce <jo...@apache.org>
Committed: Wed Jul 16 13:08:06 2014 -0700
----------------------------------------------------------------------
ocw-ui/frontend-new/app/views/main.html | 262 ++++++++++++++++++++++++---
1 file changed, 241 insertions(+), 21 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/climate/blob/87c74965/ocw-ui/frontend-new/app/views/main.html
----------------------------------------------------------------------
diff --git a/ocw-ui/frontend-new/app/views/main.html b/ocw-ui/frontend-new/app/views/main.html
index 7addb36..913aeb7 100644
--- a/ocw-ui/frontend-new/app/views/main.html
+++ b/ocw-ui/frontend-new/app/views/main.html
@@ -1,23 +1,243 @@
-<div class="jumbotron">
- <h1>'Allo, 'Allo!</h1>
- <p class="lead">
- <img src="images/yeoman.png" alt="I'm Yeoman"><br>
- Always a pleasure scaffolding your apps.
- </p>
- <p><a class="btn btn-lg btn-success" ng-href="#">Splendid!<span class="glyphicon glyphicon-ok"></span></a></p>
-</div>
+<!-- Modal for evaluation settings -->
+ <bootstrap-modal modal-id="evaluationSettings">
+ <div class="modal-header">
+ <button class="close">×</button>
+ <h3>Settings</h3>
+ </div>
+ <div class="modal-body" ng-controller="SettingsCtrl">
+ <h4>Select the metrics you would like to run.</h4>
+ <div ng-repeat="metric in settings.metrics">
+ <label><input type="checkbox" ng-model="metric.select"> {{metric.name}}</label>
+ </div>
+ <hr />
+ <h4>Select how you would like to temporally re-grid the datasets.</h4>
+ <select ng-model="settings.temporal.selected" ng-options="opt for opt in settings.temporal.options"></select>
+ <hr />
+ <h4>Select which dataset to use as the reference.</h4>
+ <select ng-model="settings.spatialSelect" ng-options="dataset as dataset.name for dataset in datasets"></select>
+ <hr />
+ <!-- Temporarily hidden for work on CLIMATE-365.-->
+ <div ng-hide=true>
+ <h4>Select a file which will define the bounds of subregions.</h4>
+ <form class="form-inline" autocomplete="off">
+ <input id="subregionFileInput" predictive-file-browser-input ng-model="settings.subregionFile" type="text" class="input-xlarge" autocomplete="off" />
+ </form>
+ </div>
+ <!--End hidden section for CLIMATE-365-->
+ </div>
+ <div class="modal-footer">
+ <a href="#" class="btn btn-warning close">Close</a>
+ </div>
+ </bootstrap-modal>
+<!-- END - Modal for evaluation settings -->
-<div class="row marketing">
- <h4>HTML5 Boilerplate</h4>
- <p>
- HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.
- </p>
+ <div class="row">
+ <div class="col-md-12">
+ <div class="row">
+ <div class="col-md-6">
+ <!--Dataset Select Controls-->
+ <div ng-controller="DatasetSelectCtrl">
+ <div class="row">
+ <div class="col-md-1 col-md-offset-10">
+ <button class="btn btn-link no-color-link" ng-click="clearDatasets()" ng-disabled="shouldDisableClearButton()">
+ <span tooltip-placement="left" tooltip-popup-delay="700" tooltip="Clear Datasets">
+ <i class="icon-trash icon-2x"></i>
+ </span>
+ </button>
+ </div>
+ <div class="col-md-1">
+ <button class="btn btn-link no-color-link" ng-click="open()">
+ <span tooltip-placement="left" tooltip-popup-delay="700" tooltip="Add Dataset">
+ <i class="icon-plus icon-2x"></i>
+ </span>
+ </button>
+ </div>
+ </div>
+ <!-- Modal for dataset selection -->
+ <div modal="datasetSelect" close="close()" options="opts">
+ <div class="modal-header">
+ <h3>Dataset Select</h3>
+ </div>
+ <div class="modal-body">
+ <tabset>
+ <tab ng-repeat="tab in templates" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled">
+ <div ng-include src="tab.url"></div>
+ </tab>
+ <li class="pull-right">Queued Datasets: {{datasetCount.length}}</li>
+ </tabset>
+ </div>
+ <div class="modal-footer">
+ <button class="btn btn-warning cancel" ng-click="close()">Close</button>
+ </div>
+ </div>
+ <!-- END - Modal for dataset selection -->
+ <div class="row">
+ <div class="col-md-12">
+ <hr />
+ </div>
+ </div>
+ </div>
+ <!--Dataset display-->
+ <div ng-controller="DatasetDisplayCtrl" id="datasetDiv">
+ <div ng-repeat="dataset in datasets">
+ <div class="row">
+ <!--Data section-->
+ <div class="col-md-8 col-md-offset-1 muted">
+ {{dataset.name}}
+ </div>
+ <div class="col-md-1 col-md-offset-2">
+ <span tooltip-placement="left" tooltip-popup-delay="700" tooltip="Remove Dataset">
+ <a class="no-color-link" href="#" ng-click="removeDataset($index)">
+ <i class="icon-remove"></i>
+ </a>
+ </span>
+ </div>
+ </div>
+ <!--Time Values!-->
+ <div class="row">
+ <!--Dataset Info Section-->
+ <div class="col-md-9">
+ <div class="row">
+ <div class="col-md-2 col-md-offset-1 text-center">Start:</div>
+ <div class="col-md-2">
+ <div class="col-md-2 text-center">{{dataset.timeVals.start | ISODateToMiddleEndian}}</div>
+ </div>
+ <div class="col-md-2 text-center">End:</div>
+ <div class="col-md-2">
+ <div class="col-md-2 text-center">{{dataset.timeVals.end | ISODateToMiddleEndian}}</div>
+ </div>
+ </div>
+ <!--Lat/Long Values!-->
+ <div class="row">
+ <div class="col-md-2 col-md-offset-1 text-center">North:</div>
+ <div class="col-md-2 text-center">
+ {{dataset.latlonVals.latMax | number:2}}
+ </div>
+ <div class="col-md-2 text-center">West:</div>
+ <div class="col-md-2 text-center">
+ {{dataset.latlonVals.lonMin | number:2}}
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-2 col-md-offset-1 text-center">South:</div>
+ <div class="col-md-2 text-center">
+ {{dataset.latlonVals.latMin | number:2}}
+ </div>
+ <div class="col-md-2 text-center">East:</div>
+ <div class="col-md-2 text-center">
+ {{dataset.latlonVals.lonMax | number:2}}
+ </div>
+ </div>
+ </div>
+ <!--Preview Map Section-->
+ <div class="col-md-3">
+ <!--If the dataset is global we show a picture of a globe instead of the actual map-->
+ <div ng-hide="dataset.latlonVals.lonMin == -180 && dataset.latlonVals.lonMax == 180 &&
+ dataset.latlonVals.latMin == -90 && dataset.latlonVals.latMax == 90"
+ preview-map="dataset" index="$index"></div>
+ <div ng-show="dataset.latlonVals.lonMin == -180 && dataset.latlonVals.lonMax == 180 &&
+ dataset.latlonVals.latMin == -90 && dataset.latlonVals.latMax == 90">
+ <img src="img/globe.png" class="preview-map">
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-6 col-md-offset-3"><hr /></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="col-md-6">
+ <!--Map-->
+ <div class="row" ng-controller="WorldMapCtrl">
+ <div class="col-md-12">
+ <leaflet-map id="map"></leaflet-map>
+ </div>
+ </div>
+
+ <!--Timeline-->
+ <div class="row">
+ <div class="col-md-12" ng-controller="TimelineCtrl">
+ <div class="timeline"></div>
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="col-md-12" ng-controller="ParameterSelectCtrl">
+ <div class="row">
+ <div class="col-md-2 text-center">Start Date:</div>
+ <div class="col-md-4">
+ <form>
+ <!--This styling HAD to be done inline. Using a class wouldn't work and for some -->
+ <!--reason the input boxes refused to be 100% wide when their span size was set.-->
+ <input ng-disabled="shouldDisableControls()" on-blur="checkParameters();" ng-model="displayParams.start" ui-date="datepickerSettings" ui-date-format="yy-mm-dd" type="text" class="col-md-4 text-center" style="width:100%" />
+ </form>
+ </div>
+ <div class="col-md-2 text-center">End Date:</div>
+ <div class="col-md-4">
+ <form>
+ <!--This styling HAD to be done inline. Using a class wouldn't work and for some -->
+ <!--reason the input boxes refused to be 100% wide when their span size was set.-->
+ <input ng-disabled="shouldDisableControls()" on-blur="checkParameters();" ng-model="displayParams.end" ui-date="datepickerSettings" ui-date-format="yy-mm-dd" type="text" class="col-md-4 text-center" style="width:100%"/>
+ </form>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-2 text-center">North:</div>
+ <div class="col-md-4">
+ <form action="">
+ <input ng-disabled="shouldDisableControls()" ng-model="displayParams.latMax" on-blur="checkParameters();" type="text" class="col-md-4 text-center" style="width:100%"/>
+ </form>
+ </div>
+ <div class="col-md-2 text-center">South:</div>
+ <div class="col-md-4">
+ <form action="">
+ <!--This styling HAD to be done inline. Using a class wouldn't work and for some -->
+ <!--reason the input boxes refused to be 100% wide when their span size was set.-->
+ <input ng-disabled="shouldDisableControls()" ng-model="displayParams.latMin" on-blur="checkParameters();" type="text" class="col-md-4 text-center" style="width:100%"/>
+ </form>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-2 text-center">East:</div>
+ <div class="col-md-4">
+ <form>
+ <!--This styling HAD to be done inline. Using a class wouldn't work and for some -->
+ <!--reason the input boxes refused to be 100% wide when their span size was set.-->
+ <input ng-disabled="shouldDisableControls()" ng-model="displayParams.lonMax" on-blur="checkParameters();" type="text" class="col-md-4 text-center" style="width:100%"/>
+ </form>
+ </div>
+ <div class="col-md-2 text-center">West:</div>
+ <div class="col-md-4">
+ <form>
+ <!--This styling HAD to be done inline. Using a class wouldn't work and for some -->
+ <!--reason the input boxes refused to be 100% wide when their span size was set.-->
+ <input ng-disabled="shouldDisableControls()" ng-model="displayParams.lonMin" on-blur="checkParameters();"; type="text" class="col-md-4 text-center" style="width:100%"/>
+ </form>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-2 col-md-offset-6">
+ <button class="btn btn-link no-color-link pull-right" bootstrap-modal-open="evaluationSettings">
+ <span tooltip-placement="left" tooltip-popup-delay="700" tooltip="Settings">
+ <span class="icon-stack">
+ <i class="icon-check-empty icon-stack-base"></i>
+ <i class="icon-cogs"></i>
+ </span>
+ </span>
+ </button>
+ </div>
+ <div class="col-md-4">
+ <button ng-click="runEvaluation()" ng-disabled="shouldDisableEvaluateButton()" 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>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
- <h4>Angular</h4>
- <p>
- AngularJS is a toolset for building the framework most suited to your application development.
- </p>
-
- <h4>Karma</h4>
- <p>Spectacular Test Runner for JavaScript.</p>
-</div>