Use custom List classes for corpora and job lists.

This commit is contained in:
Patrick Jentsch
2019-08-20 11:24:52 +02:00
parent 74c863e0f7
commit 5ff2ef9301
8 changed files with 197 additions and 136 deletions

View File

@ -29,8 +29,8 @@
{% endif %}
<script src="{{ url_for('static', filename='js/list.js') }}"></script>
<script src="{{ url_for('static', filename='js/utils.js') }}"></script>
<script src="{{ url_for('static', filename='js/corpora.js') }}"></script>
<script src="{{ url_for('static', filename='js/jobs.js') }}"></script>
<script src="{{ url_for('static', filename='js/CorpusList.js') }}"></script>
<script src="{{ url_for('static', filename='js/JobList.js') }}"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>

View File

@ -31,15 +31,13 @@
</div>
</div>
<script>
corpusList = new List("corpus-list", {valueNames: ["title"],
page: 4,
pagination: true});
corpusList.on("filterComplete", updatePagination);
corpusList.on("searchComplete", updatePagination);
createCorpusElements(corpusList);
subscribers.corpora.push(function() {
console.log('[Corpora]: Something changed.');
});
var corpusListOptions = {item: '<a><span class="title"></span><span class="description"></span></a>',
page: 4,
pagination: true,
valueNames: ["description", "title", {data: ["id"]}]}
var corpusList = new CorpusList("corpus-list", corpusListOptions, true);
corpusList.on("filterComplete", List.updatePagination);
corpusList.on("searchComplete", List.updatePagination);
</script>
<div class="col s12">
@ -76,45 +74,13 @@
</div>
</div>
<script>
var template = '<a><span class="title"></span></a>'
var jobList = new List("job-list", {item: '<a><span class="title"></span></a>',
page: 4,
pagination: true,
valueNames: ["description",
"title",
{data: ["id"]}]});
jobList.on("filterComplete", updatePagination);
jobList.on("searchComplete", updatePagination);
createJobElements(jobList);
subscribers.jobs.push(function(delta) {
for (key in delta) {
if (key === "_t") {continue;}
if (key.startsWith("_")) {
jobList.remove("id", delta[key][0].id);
} else if (Array.isArray(delta[key])) {
jobElement = createJobElement(delta[key][0]);
listItem = jobList.add({"description": delta[key][0].description,
"title": delta[key][0].title,
"id": delta[key][0].id})[0];
listItem.elm.replaceWith(jobElement);
listItem.elm = jobElement;
} else {
var listItem = jobList.get("id", jobs[parseInt(key)].id)[0];
if (delta[key]["status"]) {
var jobStatusElement = listItem.elm.querySelector(".status");
jobStatusElement.classList.remove(STATUS_COLORS[delta[key]["status"][0]]);
jobStatusElement.classList.add(STATUS_COLORS[delta[key]["status"][1]]);
jobStatusElement.innerHTML = delta[key]["status"][1];
}
if (delta[key]["description"]) {
listItem.values({"description": delta[key]["description"][1]});
}
if (delta[key]["title"]) {
listItem.values({"title": delta[key]["title"][1]});
}
}
}
});
jobListOptions = {item: '<a><span class="title"></span><span class="description"></span></a>',
page: 4,
pagination: true,
valueNames: ["description", "title", {data: ["id"]}]}
var jobList = new JobList("job-list", jobListOptions, true);
jobList.on("filterComplete", List.updatePagination);
jobList.on("searchComplete", List.updatePagination);
</script>
<div id="new-corpus-modal" class="modal">