220 lines
9.2 KiB
HTML
220 lines
9.2 KiB
HTML
<h3>Subscriptions (Postgres database)</h3>
|
|
|
|
<form class="form-inline text-right" style="margin-top:40px; margin-bottom:20px">
|
|
<button class="btn btn-primary" data-target="#addSubscriptionModal" data-toggle="modal" ng-click="resetFormFields()">
|
|
<span class="glyphicon glyphicon-plus"></span>
|
|
add
|
|
</button>
|
|
<button class="btn btn-default" ng-click="refresh()">
|
|
<span class="glyphicon glyphicon-refresh"></span>
|
|
refresh
|
|
</button>
|
|
</form>
|
|
|
|
<table class="table table-striped" style="margin-top:20px; font-size: 12px">
|
|
<thead>
|
|
<tr>
|
|
<th class="col-xs-2">ID</th>
|
|
<th class="col-xs-1">Subscriber</th>
|
|
<th class="col-xs-1">Creation Date</th>
|
|
<th class="col-xs-1">Topic</th>
|
|
<th class="col-xs-3">Conditions</th>
|
|
<th class="col-xs-1 text-center">Notification frequency</th>
|
|
<th class="col-xs-1 text-center">Notification mode</th>
|
|
<th class="col-xs-1 text-right">Last notification</th>
|
|
<th class="col-xs-1"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr ng-if="list.length == 0">
|
|
<td colspan="8" class="text-center text-muted">No subscriptions</td>
|
|
</tr>
|
|
<tr ng-repeat="s in list">
|
|
<th style="font-family: monospace;">{{s.subscriptionId}}</th>
|
|
<td>{{s.subscriber}}</td>
|
|
<td>{{s.creationDate | date:'yyyy-MM-dd HH:mm'}}</td>
|
|
<td>{{s.topic}}</td>
|
|
<td style="font-size: 12px; font-family: monospace;">
|
|
<ul>
|
|
<li ng-repeat="c in s.conditionsAsList">
|
|
<b>{{c.field}}</b>
|
|
<ul>
|
|
<li ng-repeat="p in c.listParams">
|
|
<b>{{c.operator}}</b>
|
|
<span ng-if="c.operator != 'RANGE'">"{{p.value}}"</span>
|
|
<span ng-if="c.operator == 'RANGE'">[{{p.value ? '"' + p.value + '"': 'NULL'}}, {{p.otherValue ? '"' + p.otherValue + '"' : 'NULL'}}]</span>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</td>
|
|
<td class="text-center">{{s.frequency}}</td>
|
|
<td class="text-center">{{s.mode}}</td>
|
|
<td class="text-right">{{s.lastNotificationDate ? (s.lastNotificationDate | date:'yyyy-MM-dd HH:mm') : 'not yet'}}</td>
|
|
<td class="text-right">
|
|
<button type="button" class="btn btn-sm btn-primary" ng-click="resetNotificationDate(s.subscriptionId)">
|
|
reset date
|
|
</button>
|
|
<button type="button" class="btn btn-sm btn-primary" ng-click="startMatching(s.subscriptionId)">
|
|
match
|
|
</button>
|
|
<button type="button" class="btn btn-sm btn-danger" ng-click="remove(s.subscriptionId)">
|
|
<span class="glyphicon glyphicon-minus"></span>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div id="addSubscriptionModal" class="modal fade" tabindex="-1" role="dialog">
|
|
<div class="modal-dialog modal-lg"">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
<h4 class="modal-title">Add subscription</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form name="newSubscriptionForm" class="form-horizontal">
|
|
<div class="form-group" ng-class="{'has-error' : !subscriber, 'has-success' : subscriber }">
|
|
<label class="control-label col-sm-4">Subscriber</label>
|
|
<div class="col-sm-8">
|
|
<input type="email" class="form-control" placeholder="email" required="required" ng-model="subscriber"/>
|
|
</div>
|
|
</div>
|
|
<div class="form-group" ng-class="{'has-error' : !frequency, 'has-success' : frequency }">
|
|
<label class="control-label col-sm-4">Notification frequency</label>
|
|
<div class="col-sm-8">
|
|
<select class="form-control" ng-model="frequency" required="required">
|
|
<option>never</option>
|
|
<option>daily</option>
|
|
<option>weekly</option>
|
|
<option>monthly</option>
|
|
<option>realtime</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-group" ng-class="{'has-error' : !mode, 'has-success' : mode }">
|
|
<label class="control-label col-sm-4">Notification mode</label>
|
|
<div class="col-sm-8">
|
|
<select class="form-control" ng-model="mode" required="required">
|
|
<option>MOCK</option>
|
|
<option>EMAIL</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-group" ng-class="{'has-error' : !topicType, 'has-success' : topicType }">
|
|
<label class="control-label col-sm-4">Topic name</label>
|
|
<div class="col-sm-8">
|
|
<select class="form-control" ng-options="topic.name for topic in availableTopics" ng-model="topicType" ng-change="onSelectTopicType(topicType)" required="required"></select>
|
|
</div>
|
|
</div>
|
|
<div class="form-group" ng-repeat="t in topicParts" ng-if="t.variable" ng-class="{'has-error' : !t.value, 'has-success' : t.value}">
|
|
<label class="control-label col-sm-4" style="font-family: monospace;">{{t.name}}</label>
|
|
<div class="col-sm-8">
|
|
<input type="text" class="form-control" required="required" ng-model="t.value" ng-pattern="/^[a-zA-Z0-9._-]+$/" ng-change="updateTopic()"/>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="control-label col-sm-4">Topic expression</label>
|
|
<p class="form-control-static col-sm-8">{{topic ? topic : 'missing'}}</p>
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
<label class="control-label col-sm-4">Conditions (on map values)</label>
|
|
<div class="col-sm-8">
|
|
<table class="table table-condensed">
|
|
<tbody ng-repeat="tc in topicConditions" style="border: 2px solid #ddd;">
|
|
<tr ng-class="{'has-error' : !tc.field, 'has-success' : tc.field }">
|
|
<td class="col-xs-1" rowspan="{{tc.listParams.length + 4}}">
|
|
<button type="button" class="btn btn-sm btn-danger" ng-click="removeCondition($index)">
|
|
<span class="glyphicon glyphicon-minus"></span>
|
|
</button>
|
|
</td>
|
|
<th class="col-xs-2 control-label">Field</th>
|
|
<td class="col-sm-9" colspan="3">
|
|
<input type="text" class="form-control" required="required" ng-model="tc.field" required="required" />
|
|
</td>
|
|
</tr>
|
|
<tr ng-class="{'has-error' : !tc.fieldType, 'has-success' : tc.fieldType }">
|
|
<th class="control-label">Field type</th>
|
|
<td colspan="3">
|
|
<select class="form-control" ng-model="tc.fieldType" required="required">
|
|
<option>STRING</option>
|
|
<option>INTEGER</option>
|
|
<option>FLOAT</option>
|
|
<option>DATE</option>
|
|
<option>BOOLEAN</option>
|
|
<option>LIST_STRING</option>
|
|
<option>LIST_INTEGER</option>
|
|
<option>LIST_FLOAT</option>
|
|
<option>LIST_DATE</option>
|
|
<option>LIST_BOOLEAN</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
<tr ng-class="{'has-error' : !tc.operator, 'has-success' : tc.operator }">
|
|
<th class="control-label">Operator</th>
|
|
<td colspan="3">
|
|
<select class="form-control" ng-model="tc.operator" required="required">
|
|
<option>EXACT</option>
|
|
<option>MATCH_ANY</option>
|
|
<option>MATCH_ALL</option>
|
|
<option>RANGE</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr ng-class="{'has-error' : !(p.value || p.otherValue), 'has-success' : p.value || p.otherValue}" ng-if="$parent.tc.operator == 'RANGE'" ng-repeat="p in tc.listParams">
|
|
<th class="control-label" rowspan="{{$parent.tc.listParams.length}}" ng-if="$first">Range</th>
|
|
<td><input type="text" class="form-control" ng-model="p.value" /></td>
|
|
<td><input type="text" class="form-control" ng-model="p.otherValue" /></td>
|
|
<td>
|
|
<button type="button" class="btn btn-sm btn-danger" ng-click="$parent.tc.listParams.splice($index, 1)">
|
|
<span class="glyphicon glyphicon-minus"></span>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr ng-class="{'has-error' : !p.value, 'has-success' : p.value }" ng-if="$parent.tc.operator != 'RANGE'" ng-repeat="p in tc.listParams">
|
|
<th class="control-label" rowspan="{{$parent.tc.listParams.length + 1}}" ng-if="$first">Values</th>
|
|
<td colspan="2"><input type="text" class="form-control" ng-model="p.value" /></td>
|
|
<td>
|
|
<button type="button" class="btn btn-sm btn-danger" ng-click="$parent.tc.listParams.splice($index, 1)">
|
|
<span class="glyphicon glyphicon-minus"></span>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="3">
|
|
<button type="button" class="btn btn-sm btn-success" ng-click="tc.listParams.push({ 'value' : '', 'otherValue': '' })">
|
|
<span class="glyphicon glyphicon-plus"></span> add
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tfoot>
|
|
<tr>
|
|
<td colspan="5">
|
|
<button type="button" class="btn btn-sm btn-success" ng-click="addCondition()">
|
|
<span class="glyphicon glyphicon-plus"></span>
|
|
add condition
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
<button type="submit" class="btn btn-primary" data-dismiss="modal" ng-disabled="newSubscriptionForm.$invalid" ng-click="add(subscriber, topic, frequency, mode, topicConditions)">Add</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|