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 <[email protected]> Authored: Wed Jul 16 13:08:06 2014 -0700 Committer: Michael Joyce <[email protected]> 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>
