eventman/angular_app/event-detail.html
2015-04-05 09:28:08 +02:00

83 lines
4.4 KiB
HTML

<!-- show details of a single Event (editing also take place here) -->
<div class="container">
<form name="eventForm" ng-model="eventdetails" ng-submit="save()">
<alert class="clearfix">
<span>{{event.title}}</span>
<button type="button" class="btn btn-default pull-right" ng-click="save($event)" ng-disabled="!eventForm.$dirty">save</button>
</alert>
<div class="input-group input-group-lg">
<span class="input-group-addon">Title</span>
<input type="text" class="form-control" placeholder="Title" ng-model="event.title" ng-required="1">
</div>
<div class="input-group top5 well form-horizontal" ng-controller="DatetimePickerCtrl">
<div class="form-group">
<label for="begin-date" class="col-sm-3 control-label">begin date:</label>
<div id="begin-date" class="input-group col-sm-9">
<input type="text" class="form-control" datepicker-popup="dd-MMMM-yyyy" ng-model="event['begin-date']" is-open="opened" ng-required="true" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
<div class="form-group">
<label for="begin-time" class="col-sm-3 control-label">begin time:</label>
<timepicker id="begin-time" class="input-group" ng-model="event['begin-time']" show-meridian="false"></timepicker>
</div>
</div>
<div class="input-group top5 well form-horizontal" ng-controller="DatetimePickerCtrl">
<div class="form-group">
<label for="end-date" class="col-sm-3 control-label">End date:</label>
<div id="end-date" class="input-group col-sm-9">
<input type="text" class="form-control" datepicker-popup="dd-MMMM-yyyy" ng-model="event['end-date']" is-open="opened" ng-required="true" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
<div class="form-group">
<label for="end-time" class="col-sm-3 control-label">End time:</label>
<timepicker id="end-time" class="input-group" ng-model="event['end-time']" show-meridian="false"></timepicker>
</div>
</div>
<input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>
</form>
<div class="panel panel-primary table-striped top5">
<div class="panel-heading">Events</div>
<div class="panel-body">
<form class="form-inline">
<div class="form-group">
<label for="query-persons">Search:</label>
<input type="text" id="query-persons" class="form-control" placeholder="Name or email" ng-model="query">
</div>
<div class="form-group">
<label for="persons-order">Sort by:</label>
<select id="persons-order" class="form-control" ng-model="orderProp">
<option value="name" ng-selected="selected">Alphabetical</option>
<option value="_id">ID</option>
</select>
</div>
</form>
<table class="table table-striped">
<thead>
<tr>
<th>Person</th>
<th>Attended</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in event.persons | filter:query | orderBy:orderProp">
<td><a href="/#/persons/{{person.person_id}}">{{person.name}} {{person.surname}}</a></td>
<td>
<button class="btn btn-link" name="switch-attended" ng-click="updateAttendee(person, !person.attended)"><span class="glyphicon {{(person.attended) && 'glyphicon-ok-sign text-success' || 'glyphicon-remove-sign text-danger'}}"></span></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>