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'); const field = document.createElement('li');
field.classList.add("field"); field.classList.add("field");
const attribute = document.createElement('div'); const attributeUpdateId = document.createElement('div');
attribute.classList.add("attribute"); attributeUpdateId.classList.add("attribute");
attribute.innerHTML = "TEXT"; attributeUpdateId.innerHTML = "update id";
const content = document.createElement('div'); const contentUpdateId = document.createElement('div');
content.classList.add("content"); contentUpdateId.classList.add("updateId");
content.innerHTML = 'Pending ' + status.update_id; contentUpdateId.classList.add("content");
contentUpdateId.innerHTML = status.update_id;
field.appendChild(attribute); field.appendChild(attributeUpdateId);
field.appendChild(content); 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); ol.appendChild(field);
elem.appendChild(ol); elem.appendChild(ol);
@ -38,14 +51,14 @@ $(window).on('load', function () {
if (status.type == "Processing") { if (status.type == "Processing") {
const id = 'update-' + status.update_id; const id = 'update-' + status.update_id;
const content = $(`#${id} .content`); const content = $(`#${id} .updateStatus.content`);
content.html('Processing ' + status.update_id); content.html('processing');
} }
if (status.type == "Processed") { if (status.type == "Processed") {
const id = 'update-' + status.update_id; const id = 'update-' + status.update_id;
const content = $(`#${id} .content`); const content = $(`#${id} .updateStatus.content`);
content.html('Processed ' + status.update_id); content.html('processed');
} }
} }
}); });
@ -53,3 +66,13 @@ $(window).on('load', function () {
function prependChild(parent, newFirstChild) { function prependChild(parent, newFirstChild) {
parent.insertBefore(newFirstChild, parent.firstChild) 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="/bulma-prefers-dark.min.css">
<link rel="stylesheet" href="/style.css"> <link rel="stylesheet" href="/style.css">
<script type="text/javascript" src="/jquery-3.4.1.min.js"></script> <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> <title>{{ db_name }} | Updates</title>
</head> </head>
<body> <body>
@ -15,12 +17,14 @@
<div class="hero-body"> <div class="hero-body">
<div class="container"> <div class="container">
<a href="/">
<div class="columns is-flex is-centered mb-6"> <div class="columns is-flex is-centered mb-6">
<figure class="image is-128x128"> <figure class="image is-128x128">
<img id="logo-white" src="logo-white.svg" alt="milli logo in white"> <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"> <img id="logo-black" src="logo-black.svg" alt="milli logo in black">
</figure> </figure>
</div> </div>
</a>
<nav class="level"> <nav class="level">
<div class="level-item has-text-centered"> <div class="level-item has-text-centered">
@ -55,7 +59,8 @@
<li id="update-{{ update_id }}" class="document"> <li id="update-{{ update_id }}" class="document">
<ol> <ol>
<li class="field"> <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> </li>
</ol> </ol>
</li> </li>
@ -63,7 +68,8 @@
<li id="update-{{ update_id }}" class="document"> <li id="update-{{ update_id }}" class="document">
<ol> <ol>
<li class="field"> <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> </li>
</ol> </ol>
</li> </li>