160 lines
5.4 KiB
HTML
160 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Information Service - Vocabulary</title>
|
|
<link rel="stylesheet" href="common/css/bootstrap.cerulean.min.css" />
|
|
<link rel="stylesheet" href="common/css/fontawesome-all.min.css" />
|
|
</head>
|
|
|
|
<style>
|
|
td {
|
|
vertical-align: middle !important;
|
|
}
|
|
label {
|
|
font-weight: bold;
|
|
}
|
|
</style>
|
|
|
|
<script th:inline="javascript">
|
|
/*<![CDATA[*/
|
|
function vocId() { return /*[[${vocId}]]*/ ''; }
|
|
/*]]>*/
|
|
</script>
|
|
|
|
|
|
<body ng-app="vocabularyApp" ng-controller="vocabularyController">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col">
|
|
<h1>Information Service - Vocabulary Editor</h1>
|
|
|
|
<p>
|
|
<b>ID: </b><span th:text="${vocId}"></span><br />
|
|
<b>Name: </b><span th:text="${vocName}"></span><br />
|
|
<b>Description: </b><span th:text="${vocDesc}"></span>
|
|
</p>
|
|
<hr />
|
|
<p>
|
|
<a href="javascript:void(0)" data-toggle="modal" data-target="#editVocabularyTermModal" ng-click="prepareNewTerm()">create a new term</a>
|
|
</p>
|
|
|
|
<p ng-show="terms.length > 0">
|
|
<input type="text" class="form-control form-control-sm" ng-model="termFilter" placeholder="Filter..."/>
|
|
</p>
|
|
<p>
|
|
<span class="text-muted"><b>Number of terms:</b> {{(terms | filter:termFilter).length}}</span>
|
|
</p>
|
|
|
|
<table class="table table-sm table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 20%">Code</th>
|
|
<th style="width: 20%">Name</th>
|
|
<th style="width: 10%">Encoding</th>
|
|
<th style="width: 40%">Synonyms</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr ng-show="(terms|filter:termFilter).length == 0">
|
|
<td colspan="5" class="text-muted">no terms</td>
|
|
</tr>
|
|
<tr ng-repeat="t in terms|filter:termFilter">
|
|
<th>{{t.code}}</th>
|
|
<td>{{t.name}}</td>
|
|
<td><span class="badge badge-warning">{{t.encoding}}</span></td>
|
|
<td>
|
|
<span class="text-muted" ng-show="t.synonyms.length == 0">0 synonym(s)</span>
|
|
<span class="badge badge-primary mr-1" ng-repeat="s in t.synonyms">{{s.term}}</span>
|
|
</td>
|
|
<td align="right">
|
|
<button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#editVocabularyTermModal" ng-click="prepareEditTerm(t)" >edit</button>
|
|
<button type="button" class="btn btn-sm btn-danger" ng-click="deleteTerm(t.code)">delete</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modals -->
|
|
|
|
<div class="modal fade" tabindex="-1" id="editVocabularyTermModal">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" ng-if="mode == 'new'">New term</h4>
|
|
<h4 class="modal-title" ng-if="mode == 'edit'">Edit term</h4>
|
|
<button type="button" class="close" data-dismiss="modal">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form>
|
|
<div class="form-group">
|
|
<label>Code</label>
|
|
<input type="text" class="form-control" ng-model="tmpTerm.code" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Name</label>
|
|
<input type="text" class="form-control" ng-model="tmpTerm.name" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Encoding</label>
|
|
<input type="text" class="form-control" ng-model="tmpTerm.encoding" />
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<table class="table table-sm table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Synonym</th>
|
|
<th>Encoding</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr ng-show="tmpTerm.synonyms.length == 0">
|
|
<td colspan="3">0 synonym(s)</td>
|
|
</tr>
|
|
<tr ng-repeat="s in tmpTerm.synonyms">
|
|
<td>{{s.term}}</td>
|
|
<td>{{s.encoding}}</td>
|
|
<td align="right"><button class="btn btn-sm btn-danger" type="button" ng-click="tmpTerm.synonyms.splice($index, 1)"><i class="fa fa-trash"></i></button></td>
|
|
</tr>
|
|
</tbody>
|
|
<tfoot>
|
|
<tr ng-init="newSynomym=newEncoding=''">
|
|
<td><input type="text" class="form-control form-control-sm" placeholder="new synomym..." ng-model="newSynomym" /></td>
|
|
<td><input type="text" class="form-control form-control-sm" placeholder="encoding..." ng-model="newEncoding" /></td>
|
|
<td align="right">
|
|
<button type="button" class="btn btn-sm btn-outline-success"
|
|
ng-click="tmpTerm.synonyms.push({'term': newSynomym, 'encoding': newEncoding}); newSynomym=newEncoding=''"
|
|
ng-disabled="!newSynomym">
|
|
<i class="fa fa-plus"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tfoot>
|
|
|
|
</table>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Close</button>
|
|
<button type="submit" class="btn btn-sm btn-primary" data-dismiss="modal" ng-click="saveTerm(tmpTerm)" ng-disabled="newSynomym || !tmpTerm.code || !tmpTerm.name">Submit</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
|
|
<script src="common/js/jquery.min.js"></script>
|
|
<script src="common/js/popper.min.js"></script>
|
|
<script src="common/js/bootstrap.min.js"></script>
|
|
<script src="common/js/angular.min.js"></script>
|
|
|
|
<script src="js/vocabularyEditor.js"></script>
|
|
</html> |