climate-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From jo...@apache.org
Subject [09/50] git commit: Add main.html
Date Mon, 21 Jul 2014 13:24:45 GMT
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 <joyce@apache.org>
Authored: Wed Jul 16 13:08:06 2014 -0700
Committer: Michael Joyce <joyce@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">&times;</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>


Mime
View raw message