102 lines
3.5 KiB
HTML
102 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Information Service - Vocabularies</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>
|
|
|
|
<body ng-app="vocabulariesApp" ng-controller="vocabulariesController">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col">
|
|
<h1>Information Service - Vocabularies</h1>
|
|
<hr />
|
|
<p>
|
|
<a href="javascript:void(0)" data-toggle="modal" data-target="#editVocabularyModal" ng-click="prepareNewVoc()">create a new vocabulary</a>
|
|
</p>
|
|
<p ng-show="vocabularies.length > 0">
|
|
<input type="text" class="form-control form-control-sm" ng-model="vocFilter" placeholder="Filter..."/>
|
|
</p>
|
|
<p>
|
|
<span class="text-muted"><b>Number of vocabularies:</b> {{(vocabularies | filter:vocFilter).length}}</span>
|
|
</p>
|
|
<table class="table table-sm table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 25%">ID</th>
|
|
<th style="width: 25%">Name</th>
|
|
<th>Description</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr ng-show="(vocabularies|filter:vocFilter).length == 0">
|
|
<td colspan="4" class="text-muted">no vocabularies</td>
|
|
</tr>
|
|
<tr ng-repeat="v in vocabularies|filter:vocFilter">
|
|
<th><a href="vocabularyEditor?id={{v.id}}">{{v.id}}</a></th>
|
|
<td>{{v.name}}</td>
|
|
<td>{{v.description}}</td>
|
|
<td align="right">
|
|
<button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#editVocabularyModal" ng-click="prepareEditVoc(v)" >edit</button>
|
|
<button type="button" class="btn btn-sm btn-danger" ng-click="deleteVocabulary(v.id)">delete</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modals -->
|
|
|
|
<div class="modal fade" tabindex="-1" id="editVocabularyModal">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" ng-if="mode == 'new'">New vocabulary</h4>
|
|
<h4 class="modal-title" ng-if="mode == 'edit'">Edit vocabulary</h4>
|
|
<button type="button" class="close" data-dismiss="modal">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form>
|
|
<div class="form-group">
|
|
<label>ID</label>
|
|
<input ng-show="mode == 'new'" type="text" class="form-control" ng-model="tmpVoc.id" />
|
|
<input ng-show="mode == 'edit'" type="text" readonly class="form-control-plaintext" ng-model="tmpVoc.id" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Name</label>
|
|
<input type="text" class="form-control" ng-model="tmpVoc.name" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Description</label>
|
|
<textarea class="form-control" ng-model="tmpVoc.description"></textarea>
|
|
</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="saveVocabulary(tmpVoc)">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/vocabularies.js"></script>
|
|
</html> |