You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@climate.apache.org by sk...@apache.org on 2013/08/12 21:28:50 UTC
svn commit: r1513230 [2/2] - in
/incubator/climate/trunk/rcmet/src/main/ui/app: index.html js/app.js
js/lib/angular-ui/angular-ui-router.min.js
js/lib/angular-ui/ui-bootstrap-tpls-0.5.0.min.js partials/main.html
partials/results.html
Added: incubator/climate/trunk/rcmet/src/main/ui/app/partials/main.html
URL: http://svn.apache.org/viewvc/incubator/climate/trunk/rcmet/src/main/ui/app/partials/main.html?rev=1513230&view=auto
==============================================================================
--- incubator/climate/trunk/rcmet/src/main/ui/app/partials/main.html (added)
+++ incubator/climate/trunk/rcmet/src/main/ui/app/partials/main.html Mon Aug 12 19:28:49 2013
@@ -0,0 +1,237 @@
+
+<!-- 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 grid base.</h4>
+ <select ng-model="settings.spatialSelect" ng-options="dataset.name for dataset in datasets"></select>
+ <hr />
+ <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="filePathInput" type="text" class="input-xlarge" autocomplete="off" />
+ </form>
+ </div>
+ <div class="modal-footer">
+ <a href="#" class="btn btn-primary close">Close</a>
+ </div>
+ </bootstrap-modal>
+
+ <div class="row-fluid">
+ <div class="span12">
+ <div class="row-fluid">
+ <div class="span6">
+ <!--Dataset Select Controls-->
+ <div ng-controller="DatasetSelectCtrl">
+ <div class="row-fluid">
+ <div class="span1 offset10">
+ <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="span1">
+ <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>
+ <div class="row-fluid">
+ <div class="span12">
+ <hr />
+ </div>
+ </div>
+ </div>
+ <!--Dataset display-->
+ <div ng-controller="DatasetDisplayCtrl" id="datasetDiv">
+ <div ng-repeat="dataset in datasets">
+ <div class="row-fluid">
+ <!--Data section-->
+ <div class="span8 offset1 muted">
+ {{dataset.name}}
+ </div>
+ <div class="span1 offset2">
+ <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-fluid">
+ <!--Dataset Info Section-->
+ <div class="span9">
+ <div class="row-fluid">
+ <div class="span2 offset1 text-center">Start:</div>
+ <div class="span2">
+ <div class="span2 text-center">{{dataset.timeVals.start | ISODateToMiddleEndian}}</div>
+ </div>
+ <div class="span2 text-center">End:</div>
+ <div class="span2">
+ <div class="span2 text-center">{{dataset.timeVals.end | ISODateToMiddleEndian}}</div>
+ </div>
+ </div>
+ <!--Lat/Long Values!-->
+ <div class="row-fluid">
+ <div class="span2 offset1 text-center">North:</div>
+ <div class="span2 text-center">
+ {{dataset.latlonVals.latMax}}
+ </div>
+ <div class="span2 text-center">East:</div>
+ <div class="span2 text-center">
+ {{dataset.latlonVals.lonMax}}
+ </div>
+ </div>
+ <div class="row-fluid">
+ <div class="span2 offset1 text-center">South:</div>
+ <div class="span2 text-center">
+ {{dataset.latlonVals.latMin}}
+ </div>
+ <div class="span2 text-center">West:</div>
+ <div class="span2 text-center">
+ {{dataset.latlonVals.lonMin}}
+ </div>
+ </div>
+ </div>
+ <!--Preview Map Section-->
+ <div class="span3">
+ <!--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-fluid">
+ <div class="span6 offset3"><hr /></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="span6">
+ <!--Map-->
+ <div class="row-fluid" ng-controller="WorldMapCtrl">
+ <div class="span12">
+ <leaflet-map id="map"></leaflet-map>
+ </div>
+ </div>
+
+ <!--Timeline-->
+ <div class="row-fluid">
+ <div class="span12" ng-controller="TimelineCtrl">
+ <div class="timeline"></div>
+ </div>
+ </div>
+
+ <div class="row-fluid">
+ <div class="span12" ng-controller="ParameterSelectCtrl">
+ <div class="row-fluid">
+ <div class="span2 text-center">Start Date:</div>
+ <div class="span4">
+ <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="text-center span4" style="width:100%" />
+ </form>
+ </div>
+ <div class="span2 text-center">End Date:</div>
+ <div class="span4">
+ <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="text-center span4" style="width:100%"/>
+ </form>
+ </div>
+ </div>
+ <div class="row-fluid">
+ <div class="span2 text-center">North:</div>
+ <div class="span4">
+ <form action="">
+ <input ng-disabled="shouldDisableControls()" ng-model="displayParams.latMax" on-blur="checkParameters();" type="text" class="span4 text-center" style="width:100%"/>
+ </form>
+ </div>
+ <div class="span2 text-center">South:</div>
+ <div class="span4">
+ <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="span4 text-center" style="width:100%"/>
+ </form>
+ </div>
+ </div>
+ <div class="row-fluid">
+ <div class="span2 text-center">East:</div>
+ <div class="span4">
+ <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="span4 text-center" style="width:100%"/>
+ </form>
+ </div>
+ <div class="span2 text-center">West:</div>
+ <div class="span4">
+ <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="span4 text-center" style="width:100%"/>
+ </form>
+ </div>
+ </div>
+ <div class="row-fluid">
+ <div class="span2 offset6">
+ <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="span4">
+ <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>
Added: incubator/climate/trunk/rcmet/src/main/ui/app/partials/results.html
URL: http://svn.apache.org/viewvc/incubator/climate/trunk/rcmet/src/main/ui/app/partials/results.html?rev=1513230&view=auto
==============================================================================
--- incubator/climate/trunk/rcmet/src/main/ui/app/partials/results.html (added)
+++ incubator/climate/trunk/rcmet/src/main/ui/app/partials/results.html Mon Aug 12 19:28:49 2013
@@ -0,0 +1,15 @@
+<div class="row">
+ <div class="span3">
+ <div class="pa-sidebar well well-small">
+ <ul class="nav nav-list">
+ <li class="nav-header">Latest Run Results</li>
+ <li ng-repeat="result in results"
+ ng-class="{ active: $state.includes('results.detail') && $stateParams.resultId == result }">
+ <a href="#/results/{{result.replace('/', '')}}" >{{result}}</a>
+ </li>
+ </ul>
+ <div ui-view="menu"></div>
+ </div>
+ </div>
+ <div class="span9" ui-view ng-animate="{enter:'fade-enter'}"></div>
+</div>