dnet-applications/apps/dnet-is-application/src/main/resources/templates/vocabularyEditor.html

77 lines
2.2 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;
}
</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>
<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: 25%">Code</th>
<th style="width: 20%">English Name</th>
<th style="width: 20%">Native Name</th>
<th style="width: 10%">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.englishName}}</td>
<td>{{t.nativeName}}</td>
<td>{{t.synonyms.length}} synonym(s)</td>
<td align="right"><button type="button" class="btn btn-sm btn-danger" ng-click="deleteTerm(t.id)">delete</button></td>
</tr>
</tbody>
</table>
</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>