Skip to content

Commit 8c8217d

Browse files
bodom0015bodom0015
committed
Whoops, forgot to add the actual view
1 parent 49db6bf commit 8c8217d

File tree

1 file changed

+176
-0
lines changed

1 file changed

+176
-0
lines changed

‎app/views/extractorLabels.scala.html‎

Lines changed: 176 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
@(labels: List[ExtractorsLabel], extractors: List[ExtractorInfo])(implicit user: Option[models.User], request: RequestHeader)
2+
@import helper._
3+
@import collection.JavaConverters._
4+
@import play.api.libs.json.Json
5+
6+
@main("Extractor Labels") {
7+
8+
<link rel="stylesheet" href="@routes.Assets.at("stylesheets/extractions.css")">
9+
<script src="@routes.Assets.at("javascripts/extractors/extractors.js")" type="text/javascript"></script>
10+
11+
<div class="row">
12+
<div class="col-12-sm">
13+
<h2>Extractor Labels</h2>
14+
<p>Administrators can add new labels here. Labels can be used to categorize extractors by assigning labels to them.</p>
15+
</div>
16+
</div>
17+
18+
<div class="row">
19+
<div class="col-12-sm">
20+
<button type="button" class="btn btn-primary btn-lg" onclick="createNewLabel()">
21+
Create New Label
22+
</button>
23+
</div>
24+
</div>
25+
26+
27+
<div class="row">
28+
<div class="col-12-sm">
29+
<table class="table table-striped table-hover">
30+
<thead>
31+
<tr>
32+
<th>Label Name</th>
33+
<th>Label Category</th>
34+
<th>Assigned Extractors</th>
35+
<th></th>
36+
</tr>
37+
</thead>
38+
<tbody>
39+
@for(label <- labels) {
40+
<tr>
41+
<td>@label.name</td>
42+
<td>@label.category.getOrElse("")</td>
43+
<td>
44+
<ul>
45+
@for(extractorName <- label.extractors) {
46+
<li>@extractorName</li>
47+
}
48+
</ul>
49+
</td>
50+
<td>
51+
<button class="btn btn-xs btn-default" onclick="editLabel('@label.id','@label.name', '@label.category', @Json.toJson(label.extractors.map(_.replaceAll("&quot;", "'"))))"><span class="glyphicon glyphicon-pencil"></span></button>
52+
</td>
53+
</tr>
54+
}
55+
</tbody>
56+
</table>
57+
58+
</div>
59+
</div>
60+
61+
<div id="createEditLabelModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="createEditLabelModalLabel">
62+
<div class="modal-dialog" role="document">
63+
<div class="modal-content">
64+
<div class="modal-header">
65+
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
66+
<h4 class="modal-title">Create / Edit Label</h4>
67+
</div>
68+
<div class="modal-body">
69+
<form class="form">
70+
<!-- Hidden field for ID (edit only) -->
71+
<input id="labelIdHiddenField" hidden>
72+
73+
<!-- Label Name (required) -->
74+
<div class="form-group">
75+
<label for="labelNameField">Label Name</label>
76+
<input class="form-control" id="labelNameField" placeholder="Label Name (required)" onkeydown="onNameChanged()" required>
77+
</div>
78+
79+
<!-- Category Name (optional) -->
80+
<div class="form-group">
81+
<label for="labelCategoryField">Category Name</label>
82+
<input class="form-control" id="labelCategoryField" placeholder="Category Name (optional)">
83+
</div>
84+
85+
<!-- Assign Label to Extractors (optional) -->
86+
<div class="form-group">
87+
<label for="labelAssignmentField">Assign to Extractors</label>
88+
<select multiple class="form-control" id="labelAssignmentField">
89+
@for(info <- extractors) {
90+
<option value="@info.name">@info.name</option>
91+
}
92+
</select>
93+
</div>
94+
</form>
95+
</div>
96+
<div class="modal-footer">
97+
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
98+
<button id="labelSaveBtn" type="submit" class="btn btn-primary" onclick="saveExtractorsLabel(getModalValues()).then(refresh)">Save</button>
99+
</div>
100+
</div><!-- /.modal-content -->
101+
</div><!-- /.modal-dialog -->
102+
</div><!-- /.modal -->
103+
104+
<script>
105+
const modalSelector = '#createEditLabelModal';
106+
const formSelector = '#createEditLabelForm'
107+
const labelIdHiddenFieldSelector = '#labelIdHiddenField';
108+
const labelNameFieldSelector = '#labelNameField';
109+
const labelCategoryFieldSelector = '#labelCategoryField';
110+
const labelExtractorsFieldSelector = '#labelAssignmentField';
111+
const labelSaveBtnSelector = '#labelSaveBtn';
112+
113+
$(document).ready(function() {
114+
$(modalSelector).on('shown.bs.modal', function () {
115+
$(labelNameFieldSelector).focus();
116+
})
117+
});
118+
119+
function onNameChanged() {
120+
// Enable Save button only if name is provided
121+
const name = $(labelNameFieldSelector).val();
122+
enableSave(name);
123+
}
124+
125+
// Show "Create New Label"-flavored modal
126+
function createNewLabel() {
127+
setModalValues("", "", "", []);
128+
enableSave(false);
129+
showModal(true);
130+
}
131+
132+
// Show "Edit Label"-flavored modal
133+
function editLabel(id, name, category, extractors) {
134+
setModalValues(id, name, category, extractors);
135+
showModal(true);
136+
}
137+
138+
function getModalValues(id, name, category, extractors) {
139+
return {
140+
id: $(labelIdHiddenFieldSelector).val(),
141+
name: $(labelNameFieldSelector).val(),
142+
category: $(labelCategoryFieldSelector).val() || "Other",
143+
extractors: $(labelExtractorsFieldSelector).val() || [],
144+
};
145+
}
146+
147+
function setModalValues(id, name, category, extractors) {
148+
id ? setModalTitle("Edit Label: " + name) : setModalTitle("Create New Label");
149+
150+
$(labelIdHiddenFieldSelector).val(id);
151+
$(labelNameFieldSelector).val(name);
152+
$(labelCategoryFieldSelector).val(category);
153+
$(labelExtractorsFieldSelector).val(extractors);
154+
}
155+
156+
// Set the title for our Create / Edit modal
157+
function setModalTitle(newTitle) {
158+
$('#createEditLabelModal .modal-title').html(newTitle);
159+
}
160+
161+
function enableSave(enable) {
162+
enable ? $(labelSaveBtnSelector).attr("disabled", false).removeClass("disabled") :
163+
$(labelSaveBtnSelector).attr("disabled", true).addClass("disabled");
164+
}
165+
166+
function showModal(show) {
167+
show ? $(modalSelector).modal('show') : $(modalSelector).modal('hide');
168+
}
169+
170+
function refresh() {
171+
showModal(false);
172+
window.location.reload();
173+
}
174+
</script>
175+
176+
}

0 commit comments

Comments
 (0)