[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