Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
374 lines (336 sloc) 15.9 KB
<header id="header" ng-show="streets && streets.length && showSubMenu">
<div class="headerbar">
<div class="headerbar-left">
<ul class="header-nav header-nav-options">
<li class="header-nav-brand">
<div class="brand-holder">
<h4>{{numStreetsSelected}} of {{streets.length}} streets <span class="hidden-xs">selected</span></h4>
</div>
</li>
</ul>
</div>
<div class="headerbar-right">
<div class="print-button-bar" style="margin: 13px 10px 13px 0;">
<div class="btn-group pull-right">
<button analytics-on analytics-event="GenerateGotvCard" analytics-category="GOTV" analytics-label="User generated GOTV card" type="button" ng-click="onPrintSelected()" class="btn ink-reaction btn-default-light">
Print Selected
</button>
<button type="button" class="btn ink-reaction btn-danger dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-caret-down"></i></button>
<ul class="dropdown-menu" role="menu">
<li><a ng-click="onSelectPledges()">Select Pledges</a></li>
<li><a ng-click="onClearSelections()">Clear Selected</a></li>
</ul>
</div>
</div>
</div>
</div>
</header>
<section id="canvassinputcontent" ng-show="contentLoaded">
<br>
<div class="section-body">
<div class="row">
<div class="col-lg-12">
<h2 class="text-primary">Get Out The Vote</h2>
</div>
<div class="col-lg-12">
<article class="lead">
<p>Target voters in your ward using the given filter criteria.</p>
</article>
</div>
</div>
<!-- No data warning -->
<div class="row" ng-if="userHasNoAssociations">
<div class="col-sm-12">
<div class="alert alert-callout alert-warning" role="alert">
<strong>Warning!</strong> You do not have any wards associated with your account. This will prevent
you from submitting canvass data. Please contact <a href="mailto:{{supportEmail}}">{{supportEmail}}</a> to
request access.
</div>
</div>
</div>
<ward-search ng-show="contentLoaded && !userHasNoAssociations"
on-select-constituency="onSelectConstituency"
on-select-ward="onSelectWard"
on-loaded-constituencies="onLoadedConstituencies"></ward-search>
<!-- 3. Select Streets -->
<!-- Download Cards -->
<div id="printCards" class="row" ng-if="streets && streets.length">
<div class="col-md-12">
<div class="card">
<div class="card-head">
<header>3. Download Canvass Cards</header>
</div>
<div class="card-body tab-content style-default-bright">
<div class="row">
<div class="col-lg-12">
<p>You have selected the following constituency and ward.</p>
<br>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="card">
<div class="card-body no-padding">
<div class="alert alert-callout alert-danger no-margin">
<strong class="pull-right text-default-light text-lg">{{constituency.code}}</strong>
<strong class="text-lg">{{constituency.name}}</strong><br/>
<span class="opacity-50">Constituency</span>
<div class="stick-bottom-left-right">
<div class="height-2 sparkline-revenue" data-line-color="#bdc1c1"></div>
</div>
</div>
</div><!--end .card-body -->
</div><!--end .card -->
</div><!--end .col -->
<div class="col-md-4 col-sm-6">
<div class="card">
<div class="card-body no-padding">
<div class="alert alert-callout alert-danger no-margin">
<strong class="pull-right text-default-light text-lg">{{ward.code}}</strong>
<strong class="text-lg">{{ward.name}}</strong><br/>
<span class="opacity-50">Ward</span>
<div class="stick-bottom-left-right">
<div class="height-2 sparkline-revenue" data-line-color="#bdc1c1"></div>
</div>
</div>
</div><!--end .card-body -->
</div><!--end .card -->
</div><!--end .col -->
<!-- Counts Card-->
<div class="col-md-4 hidden-sm">
<div class="card">
<div class="card-body no-padding">
<div class="alert alert-callout alert-danger no-margin">
<strong class="text-lg">{{streetStats.voted_pledges}} / {{streetStats.pledges}}</strong><br/>
<span class="opacity-50">Voted Pledges</span>
<div class="stick-bottom-left-right">
<div class="height-2 sparkline-revenue" data-line-color="#bdc1c1"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-lg-12">
<h4>Filter voters</h4>
</div>
</div>
<!-- Has PV filter -->
<div class="row">
<div class="form-group">
<label class="col-sm-3 control-label">Has Postal Vote</label>
<div class="col-sm-3">
<switch id="hasPVSwitch" name="hasPVSwitch" ng-model="flags.hasPV" class="red"></switch>
</div>
</div>
</div>
<!-- Lift filter -->
<div class="row">
<div class="form-group">
<label class="col-sm-3 control-label">Needs Lift</label>
<div class="col-sm-3">
<switch id="liftSwitch" name="liftSwitch" ng-model="flags.needsLift" class="red"></switch>
</div>
</div>
</div>
<!-- Phone filter -->
<div class="row">
<div class="form-group">
<label class="col-sm-3 control-label">Phone</label>
<div class="col-sm-3">
<switch id="telephoneSwitch" name="telephoneSwitch" ng-model="flags.telephone" class="red"></switch>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-lg-12">
<h4>Select individual streets or download all</h4>
<br>
<div ng-if="errorLoadingData" class="alert alert-callout alert-danger" role="alert">
<strong>Sorry!</strong> We could not find any voters for the selected streets.
</div>
</div>
</div>
<div class="alert alert-callout alert-warning" ng-if="validationErrors.length" role="alert">
<p ng-repeat="error in validationErrors">
<i class="fa fa-warning"></i> &nbsp;{{error}}
</p>
</div>
<div class="card">
<div class="card-body style-gray-dark no-y-padding">
<form class="form form-inverse">
<div class="form-group">
<div class="input-group input-group-lg col-xs-12">
<div class="input-group-content">
<input type="text" class="form-control" ng-model="streetFilter" id="searchInput"
placeholder="Filter Streets">
<div class="form-control-line"></div>
</div>
</div>
</div>
</form>
</div>
<div class="card-body">
<br>
<div class="btn-group pull-left">
<button type="button" analytics-on analytics-event="GenerateGotvCard" analytics-category="GOTV" analytics-label="User generated GOTV card"
ng-click="onPrintSelected()" class="btn ink-reaction btn-default-light">
Print Selected
</button>
<button type="button" class="btn ink-reaction btn-danger dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-caret-down"></i></button>
<ul class="dropdown-menu" role="menu">
<li><a ng-click="onSelectPledges()">Select Pledges</a></li>
<li><a ng-click="onClearSelections()">Clear Selected</a></li>
</ul>
</div>
<div class="btn-group pull-right">
<button type="button" class="btn ink-reaction btn-flat dropdown-toggle" data-toggle="dropdown">
{{currentSort}} <i class="fa fa-caret-down text-default-light"></i>
</button>
<ul class="dropdown-menu animation-expand" role="menu">
<li><a ng-click="sortStreets('priority', 'asc', 'Priority ASC')"><i
class="md md-keyboard-arrow-up"></i> Priority</a></li>
<li><a ng-click="sortStreets('priority', 'desc', 'Priority DESC')"><i
class="md md-keyboard-arrow-down"></i> Priority</a></li>
<li><a ng-click="sortStreets('mainStreet', 'asc', 'Street ASC')"><i
class="md md-keyboard-arrow-up"></i> Street</a></li>
<li><a ng-click="sortStreets('mainStreet', 'desc', 'Street DESC')"><i
class="md md-keyboard-arrow-down"></i> Street</a></li>
<li><a ng-click="sortStreets('numVoters', 'asc', 'Voters ASC')"><i
class="md md-keyboard-arrow-up"></i> # Voters</a></li>
<li><a ng-click="sortStreets('numVoters', 'desc', 'Voters DESC')"><i
class="md md-keyboard-arrow-down"></i> # Voters</a></li>
<li><a ng-click="sortStreets('numPledgesNotVoted', 'desc', 'Pledges Not Voted')"><i
class="md md-keyboard-arrow-up"></i> # Pledges Not Voted</a></li>
</ul>
</div>
<br><br>
<!-- Streets table -->
<table class="table table-hover no-margin">
<thead>
<tr>
<th>
</th>
<th>Street</th>
<th class="hidden-xs stats-cell">Voted / Pledges</th>
<th class="stats-cell">Map
</th>
</tr>
</thead>
<tbody id="streetsList">
<tr ng-repeat="street in streets | filter:streetFilter">
<td>
<div class="checkbox checkbox-inline checkbox-styled">
<label>
<input ng-if="street.pledged > 0" ng-change="updateSelectedStreets()" type="checkbox"
ng-model="street.selected">
<input ng-if="street.pledged === 0" type="checkbox"
ng-model="street.selected" disabled readonly><span></span>
</label>
</div>
</td>
<td ng-class="{streetsText: street.pledged > 0, 'text-faded': street.pledged === 0}">{{street | streetSingleLineFilter}}</td>
<td class="hidden-xs stats-cell">
<span class="text-default text-xl" ng-show="street.pledged > 0"><span class="text-light" uib-tooltip="Voted">{{street.votedPledges}}</span> /
<span uib-tooltip="Pledges">{{street.pledged}}</span>
<span class="text-default-light text-light">({{getRatioPledged(street.votedPledges, street.pledged)}}%)</span>
</span>
<span class="text-default text-sm text-faded" ng-show="street.pledged === 0">
No pledges
</span>
</td>
<td class="text-center">
<button ng-show="street.pledged > 0" ng-click="onShowPopupMap(street)" type="button" class="btn btn-icon-toggle"><i
class="fa icon-med fa-map-marker"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script type="text/ng-template" id="mapModal.html">
<div class="modal-header">
<h3 class="modal-title">{{mapData.street}}</h3>
</div>
<div class="modal-body">
<ui-gmap-google-map id="popupMap" ng-if="render" center='mapData.center' options="mapData.options"
zoom='mapData.zoom'>
<ui-gmap-markers models="mapData.markers" coords="'self'" modelsbyref="false">
<ui-gmap-windows show="show">
<div ng-non-bindable>{{title}}</div>
</ui-gmap-windows>
</ui-gmap-markers>
</ui-gmap-google-map>
</div>
<div class="modal-footer">
<a class="btn btn-danger visible-xs pull-left" type="button" ng-click="cancel()">Close</a>
<a class="btn btn-danger hidden-xs" type="button" ng-click="cancel()">Close</a>
</div>
</script>
<!-- intention modal -->
<div class="modal fade" id="simpleModal" tabindex="-1" role="dialog" aria-labelledby="simpleModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="simpleModalLabel">Voting Intention</h4>
</div>
<div class="modal-body">
<dl class="dl-horizontal">
<dt>1</dt>
<dd>Definitely remain</dd>
<dt>2</dt>
<dd>Probably remain</dd>
<dt>3</dt>
<dd>Undecided</dd>
<dt>4</dt>
<dd>Probably leave</dd>
<dt>5</dt>
<dd>Definitely leave</dd>
</dl>
</div>
</div>
</div>
</div>
<!-- intention modal -->
<div class="modal fade" id="lhoodModal" tabindex="-1" role="dialog" aria-labelledby="lhoodModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="lhoodModalLabel">Voting Likelihood</h4>
</div>
<div class="modal-body">
<dl class="dl-horizontal">
<dt>1</dt>
<dd>Definitely won't vote</dd>
<dt>2</dt>
<dd>Probably won't vote</dd>
<dt>3</dt>
<dd>Undecided</dd>
<dt>4</dt>
<dd>Probably will vote</dd>
<dt>5</dt>
<dd>Definitely will vote</dd>
</dl>
</div>
</div>
</div>
</div>