Split the update attributes on the updates front page

This commit is contained in:
Clément Renault 2020-10-20 12:19:48 +02:00
parent 03ca1ff634
commit 3a934b7020
No known key found for this signature in database
GPG Key ID: 92ADA4E935E71FA4
2 changed files with 49 additions and 20 deletions

View File

@ -19,16 +19,29 @@ $(window).on('load', function () {
const field = document.createElement('li');
field.classList.add("field");
const attribute = document.createElement('div');
attribute.classList.add("attribute");
attribute.innerHTML = "TEXT";
const attributeUpdateId = document.createElement('div');
attributeUpdateId.classList.add("attribute");
attributeUpdateId.innerHTML = "update id";
const content = document.createElement('div');
content.classList.add("content");
content.innerHTML = 'Pending ' + status.update_id;
const contentUpdateId = document.createElement('div');
contentUpdateId.classList.add("updateId");
contentUpdateId.classList.add("content");
contentUpdateId.innerHTML = status.update_id;
field.appendChild(attribute);
field.appendChild(content);
field.appendChild(attributeUpdateId);
field.appendChild(contentUpdateId);
const attributeUpdateStatus = document.createElement('div');
attributeUpdateStatus.classList.add("attribute");
attributeUpdateStatus.innerHTML = "update status";
const contentUpdateStatus = document.createElement('div');
contentUpdateStatus.classList.add("updateStatus");
contentUpdateStatus.classList.add("content");
contentUpdateStatus.innerHTML = 'pending';
field.appendChild(attributeUpdateStatus);
field.appendChild(contentUpdateStatus);
ol.appendChild(field);
elem.appendChild(ol);
@ -38,14 +51,14 @@ $(window).on('load', function () {
if (status.type == "Processing") {
const id = 'update-' + status.update_id;
const content = $(`#${id} .content`);
content.html('Processing ' + status.update_id);
const content = $(`#${id} .updateStatus.content`);
content.html('processing');
}
if (status.type == "Processed") {
const id = 'update-' + status.update_id;
const content = $(`#${id} .content`);
content.html('Processed ' + status.update_id);
const content = $(`#${id} .updateStatus.content`);
content.html('processed');
}
}
});
@ -53,3 +66,13 @@ $(window).on('load', function () {
function prependChild(parent, newFirstChild) {
parent.insertBefore(newFirstChild, parent.firstChild)
}
// Make the number of document a little bit prettier
$('#docs-count').text(function(index, text) {
return parseInt(text).toLocaleString()
});
// Make the database a little bit easier to read
$('#db-size').text(function(index, text) {
return filesize(parseInt(text))
});

View File

@ -7,6 +7,8 @@
<link rel="stylesheet" href="/bulma-prefers-dark.min.css">
<link rel="stylesheet" href="/style.css">
<script type="text/javascript" src="/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="/papaparse.min.js"></script>
<script type="text/javascript" src="/filesize.min.js"></script>
<title>{{ db_name }} | Updates</title>
</head>
<body>
@ -15,12 +17,14 @@
<div class="hero-body">
<div class="container">
<div class="columns is-flex is-centered mb-6">
<figure class="image is-128x128">
<img id="logo-white" src="logo-white.svg" alt="milli logo in white">
<img id="logo-black" src="logo-black.svg" alt="milli logo in black">
</figure>
</div>
<a href="/">
<div class="columns is-flex is-centered mb-6">
<figure class="image is-128x128">
<img id="logo-white" src="logo-white.svg" alt="milli logo in white">
<img id="logo-black" src="logo-black.svg" alt="milli logo in black">
</figure>
</div>
</a>
<nav class="level">
<div class="level-item has-text-centered">
@ -55,7 +59,8 @@
<li id="update-{{ update_id }}" class="document">
<ol>
<li class="field">
<div class="attribute">text</div><div class="content">Pending {{ update_id }}</div>
<div class="attribute">update id</div><div class="updateId content">{{ update_id }}</div>
<div class="attribute">update status</div><div class="updateStatus content">pending</div>
</li>
</ol>
</li>
@ -63,7 +68,8 @@
<li id="update-{{ update_id }}" class="document">
<ol>
<li class="field">
<div class="attribute">text</div><div class="content">Processed {{ update_id }}</div>
<div class="attribute">update id</div><div class="updateId content">{{ update_id }}</div>
<div class="attribute">update status</div><div class="updateStatus content">processed</div>
</li>
</ol>
</li>