109 lines
4.9 KiB
HTML
109 lines
4.9 KiB
HTML
<h3>Topic typologies</h3>
|
|
|
|
<form class="form-inline text-right" style="margin-top:40px; margin-bottom:20px">
|
|
<button class="btn btn-primary" data-target="#addTopicTypeModal" 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-2">Name</th>
|
|
<th class="col-xs-1">Producer ID</th>
|
|
<th class="col-xs-2">Topic expression</th>
|
|
<th class="col-xs-3">Topic regex</th>
|
|
<th class="col-xs-2">Required map fields</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr ng-if="list.length == 0">
|
|
<td colspan="6" class="text-center text-muted">No topic types</td>
|
|
</tr>
|
|
<tr ng-repeat="t in list">
|
|
<th style="font-family: monospace;">{{t.id}}</th>
|
|
<td>{{t.name}}</td>
|
|
<td>{{t.producerId}}</td>
|
|
<td style="font-family: monospace;">{{t.expression}}</td>
|
|
<td style="font-family: monospace;">{{t.regex}}</td>
|
|
<td>{{t.mapKeys}}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div id="addTopicTypeModal" 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 topic typology</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form name="newTopicTypeForm">
|
|
<div class="form-group" ng-class="{'has-error' : !topicName, 'has-success' : topicName}">
|
|
<label class="control-label">Name</label>
|
|
<input type="text" class="form-control" placeholder="name" required="required" ng-model="topicName" />
|
|
</div>
|
|
<div class="form-group" ng-class="{'has-warning' : !topicProducerId, 'has-success' : topicProducerId}">
|
|
<label class="control-label">Producer ID</label>
|
|
<input type="text" class="form-control" placeholder="producer" ng-model="topicProducerId" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="control-label" ng-class="{'text-success' : topicExpression, 'text-danger' : !topicExpression}">Topic expression</label>
|
|
|
|
<table class="table table-condensed table-bordered">
|
|
<tr>
|
|
<td ng-repeat="s in segments" valign="middle">
|
|
<select class="form-control" required="required" ng-model="s.type" ng-change="updateTopicExpression()">
|
|
<option>Fixed</option>
|
|
<option>Variable</option>
|
|
</select>
|
|
</td>
|
|
<td rowspan="2" class="text-center" style="width: 80px;">
|
|
<div class="btn-group">
|
|
<button class="btn btn-sm btn-danger" ng-click="segments.splice(-1,1); updateTopicExpression()" ng-disabled="segments.length < 3">
|
|
<span class="glyphicon glyphicon-minus"></span>
|
|
</button>
|
|
<button class="btn btn-sm btn-success" ng-click="segments.push({}); updateTopicExpression()" ng-disabled="segments.length > 5">
|
|
<span class="glyphicon glyphicon-plus"></span>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td ng-repeat="s in segments" valign="middle">
|
|
<input type="text" class="form-control" required="required" disabled="disabled" ng-if="!s.type" placeholder="..." />
|
|
<input type="text" class="form-control" required="required" ng-model="s.value" ng-if="s.type == 'Fixed'" placeholder="segment" ng-pattern="/^[a-zA-Z0-9._-]+$/" ng-change="updateTopicExpression()" />
|
|
<input type="text" class="form-control" required="required" ng-model="s.value" ng-if="s.type == 'Variable'" placeholder="variable name" ng-pattern="/^[a-zA-Z0-9._-]+$/" ng-change="updateTopicExpression()" />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="{{segments.length + 1}}">
|
|
<b>Expression:</b> <span style="font-family: monospace;" ng-class="{'text-success' : topicExpression, 'text-danger' : !topicExpression}">{{topicExpression ? topicExpression : 'invalid'}}</span>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="form-group" ng-class="{'has-warning' : topicMapKeys.length == 0, 'has-success' : topicMapKeys.length > 0}">
|
|
<label class="control-label">Required map fields (comma separated)</label>
|
|
<input type="text" class="form-control" ng-model="topicMapKeys" ng-list="," ng-trim="true"></input>
|
|
<span class="label label-default" ng-repeat="k in topicMapKeys track by $index" style="margin-left: 4px;">{{k}}</span>
|
|
</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="newTopicTypeForm.$invalid" ng-click="add(topicName, topicProducerId, topicExpression, topicMapKeys)">Add</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|