[tor-commits] [compass/master] Transformed form to use Angular

karsten at torproject.org karsten at torproject.org
Mon Jan 7 07:09:40 UTC 2013


commit ef94d9c1a897b3bb4983f4a9e71e297fe787ff95
Author: Chris Wacek <cwacek at cs.georgetown.edu>
Date:   Thu Dec 20 16:45:18 2012 -0500

    Transformed form to use Angular
---
 templates/index.html |  147 ++++++++++++++++++++++++++------------------------
 1 files changed, 76 insertions(+), 71 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index 6883741..1df374f 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -40,7 +40,7 @@
             <ul class="nav">
               <li class="active"><a href="/">Home</a></li>
               <li><a href="https://trac.torproject.org/projects/tor/ticket/6498">Trac
-              Ticket #6498</a></li>
+                Ticket #6498</a></li>
             </ul>
           </div><!--/.nav-collapse -->
         </div>
@@ -49,101 +49,106 @@
 
     <div class="container" ng-controller="CompassCtrl">
       <div class="hero-unit">
-        <form class="form-horizontal" action=""
-              method=get id="form">
+        <form class="form-horizontal" id="form">
           <fieldset>
             <legend>Compass</legend>
             <div class="control-group">
               <h3> Filter </h3>
               <label class="control-label" for="inactive">Inactive</label>
-            <div class="controls">
-              <label class="checkbox">
-                <input type="checkbox" id="inactive" value="True" name="inactive" ng-model='inactive'>
+              <div class="controls">
+                <label class="checkbox">
+                  <input type="checkbox" id="inactive" value="True" name="inactive" ng-model='query.inactive'>
                   include relays in selection that aren't currently running </label>
-            </div>
-            <label class="control-label" for="guards">Guards</label>
-            <div class="controls">
-              <label class="checkbox">
-                <input type="checkbox" id="guards_only" value="True" name="guards_only" ng-model='guards_only'>
-                 select only relays suitable for guard position
-              </label>
-            </div>
-            <label class="control-label" for="exits_only">Exits</label>
-            <div class="controls">
-              <label class="checkbox">
-                <input type="checkbox" id="exits_only" value="True" name="exits_only">
+              </div>
+              <label class="control-label" for="guards">Guards</label>
+              <div class="controls">
+                <label class="checkbox">
+                  <input type="checkbox" id="guards_only" value="True" name="guards_only" ng-model='query.guards_only'>
+                  select only relays suitable for guard position
+                </label>
+              </div>
+              <label class="control-label" for="exits_only">Exits</label>
+              <div class="controls">
+                <label class="checkbox">
+                  <input type="checkbox" id="exits_only" value="True" name="exits_only" ng-model='query.exits_only'>
                   select only relays suitable for exit position</label>
-            </div>
-            <label class="control-label" for="family">Family</label>
+              </div>
+              <label class="control-label" for="family">Family</label>
               <div class="controls">
-                <input type="text" class="input-xlarge" id="family" name="family"
-                       placeholder="A59E1E7C7EAEE083D756EE1FF6EC31CA3D8651D7">
-                  <span class="help-inline">Select family by fingerprint or nickname</span>
+                <input type="text" class="input-xlarge" id="family" name="family" ng-model="query.family"
+                placeholder="A59E1E7C7EAEE083D756EE1FF6EC31CA3D8651D7">
+                <span class="help-inline">Select family by fingerprint or nickname</span>
               </div>              
-            <label class="control-label" for="asNo">AS Number</label>
+              <label class="control-label" for="asNo">AS Number</label>
               <div class="controls">
-                <input type="text" class="input-xlarge" id="ases" name="ases"
-                       placeholder="AS39138">
-                  <span class="help-inline">select only relays from AS number</span>
+                <input type="text" class="input-xlarge" id="ases" name="ases" ng-model="query.ases"
+                placeholder="AS3320">
+                <span class="help-inline">select only relays from AS number</span>
               </div>              
-            <label class="control-label" for="cc">Country Code</label>
+              <label class="control-label" for="cc">Country</label>
               <div class="controls">
-                <input type="text" class="input-xlarge" id="country" name="country"
-                       placeholder="de">
-                  <span class="help-inline">select only relays from country with code</span>
+                 <select id="country" name="country" ng-model='query.country' 
+                   ui-select2 multiple data-placeholder="Germany">
+                   <option ng-repeat="country in cc_data" value="{{country.id}}" >{{country.text}}</option>
+                </select>
+                <span class="help-inline">select only relays from these countries</span>
               </div>              
             </div>
             <label class="control-label" for="exits">Exits</label>
             <div class="controls">
               <label class="radio">
-                <input type="radio" class="exits" name="exits" id="all_relays" value="all_relays" checked>
-                  All relays
-                </label>
-                <label class="radio">
-                  <input type="radio" class="exits" name="exits" id="fast_exits_only" value="fast_exits_only">
-                    Fast exit relays (95+ Mbit/s, 5000+ KB/s,
-                    80/443/554/1755, 2 relays per /24)
-                  </label>
-                <label class="radio">
-                  <input type="radio" class="exits" name="exits" id="almost_fast_exits_only" value="almost_fast_exits_only">
-                    Almost fast exit relays (80+ Mbit/s, 2000+ KB/s, 80/443, not in set of fast exits)
-                  </label>
-                <label class="radio">
-                  <input type="radio" class="exits" name="exits" id="fast_exits_only_any_network" value="fast_exits_only_any_network">
-                    Fast exits relays any network (95+ Mbit/s, 5000+ KB/s, 80/443/554/1755)
-                  </label>
-                </div>
+                <input type="radio" class="exits" name="exits" id="all_relays" value="all_relays" 
+                ng-model='query.exit_filter' checked>
+                All relays
+              </label>
+              <label class="radio">
+                <input type="radio" class="exits" name="exits" id="fast_exits_only" value="fast_exits_only"
+                ng-model='query.exit_filter'>
+                Fast exit relays (95+ Mbit/s, 5000+ KB/s,
+                80/443/554/1755, 2 relays per /24)
+              </label>
+              <label class="radio">
+                <input type="radio" class="exits" name="exits" id="almost_fast_exits_only" 
+                value="almost_fast_exits_only" ng-model="almost_fast_exits_only">
+                Almost fast exit relays (80+ Mbit/s, 2000+ KB/s, 80/443, not in set of fast exits)
+              </label>
+              <label class="radio">
+                <input type="radio" class="exits" name="exits" id="fast_exits_only_any_network" 
+                ng-model="query.exit_filter" value="fast_exits_only_any_network">
+                Fast exits relays any network (95+ Mbit/s, 5000+ KB/s, 80/443/554/1755)
+              </label>
+            </div>
             <div class="control-group">
               <h3> Group </h3>
               <label class="control-label" for="country">Country</label>
-            <div class="controls">
-              <label class="checkbox">
-                <input type="checkbox" id="by_country" value="True" name="by_country">
-                 group relays by country </label>
-            </div>
+              <div class="controls">
+                <label class="checkbox">
+                  <input type="checkbox" id="by_country" value="True" name="by_country" ng-model="query.by_country">
+                  group relays by country </label>
+              </div>
               <label class="control-label" for="as">AS</label>
-            <div class="controls">
-                <input type="checkbox" id="by_as" value="True" name="by_as">
-                 group relays by AS </label>
-            </div>
+              <div class="controls">
+                <input type="checkbox" id="by_as" value="True" name="by_as" ng-model="query.by_as">
+                group relays by AS </label>
             </div>
-
-            <div class="control-group">
-              <h3> Display </h3>
+          </div>
+          <div class="control-group">
+            <h3> Display </h3>
             <label class="control-label" for="top">Number of results</label>
-              <div class="controls">
-                <input type="text" class="input-xlarge" id="top" name="top"
-                       placeholder="-1" value="-1">
-                  <span class="help-inline">display only the top results (-1 for all)</span>
-              </div>
+            <div class="controls">
+              <input type="text" class="input-xlarge" id="top" name="top"
+              placeholder="-1" value="-1" ng-model="query.top">
+              <span class="help-inline">display only the top results (-1 for all)</span>
             </div>
-            <div class="form-actions">
-            <button type="submit" class="btn btn-primary">Submit</button>
-            <button class="btn" type=reset>Reset</button>
           </div>
-          </fieldset>
-        </form>
-      </div>
+          <div class="form-actions">
+            <button  class="btn btn-primary" ng-click="request(query)">Submit</button>
+            <button class="btn" ng-click="reset()">Reset</button>
+            <div ng-show="state == loading" class="loading"><img src="/static/img/loader.gif" /></div>
+          </div>
+        </fieldset>
+      </form>
+    </div>
 
       <div class="loading"><img src="{{ url_for('static', filename='img/loader.gif') }}" /></div>
       <hr>





More information about the tor-commits mailing list