Skip to content
Snippets Groups Projects
Commit f1c46f53 authored by Éloïs's avatar Éloïs
Browse files

[feat] improve css

parent 8d0d7337
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
index.html
+ 15
− 7
View file @ f1c46f53
......@@ -18,33 +18,41 @@
<div id="textareas_headers">
<div>
<select name="doc_type" id="doc_type"></select>
<input type="button" id="get_example" value="Get example" disabled>
<input type="button" id="get_example" value="Get document example" disabled>
</div>
</div>
<div id="textareas">
<textarea id="textarea_left" rows="25" cols="80"></textarea>
<input type="button" id="convert_button" value=">>>">
<div class="blank_separators"></div>
<div class="vl"></div>
<div class="blank_separators"></div>
<textarea id="textarea_right" rows="25" cols="80"></textarea>
</div>
<div id="textareas_footers">
<div>
<b>
<p id="check_result">-</p>
<p id="check_result"></p>
</b>
</div>
<div>
<pre id="parse_err"></pre>
</div>
<div>
<div class="w-50 ta-center">
<input type="button" id="verify_button" value="Verify document">
</div>
<div class="w-50"></div>
</div>
</div>
</div>
</main>
<footer>
<a href="https://git.duniter.org/tools/dup-tools-front" id="sourceRibbon" title="Fork me !">
<span>AGPL-3.0</span>
<span>Logiciel Libre</span>
<span>Remonter aux sources</span>
<span>AGPL-3.0</span>
<span>Logiciel Libre</span>
<span>Remonter aux sources</span>
</a>
</footer>
</footer>
<script src="./bootstrap.js"></script>
</body>
......
index.js
+ 36
− 33
View file @ f1c46f53
......@@ -22,7 +22,7 @@ const CHECK_RESULT_VALID_SIG = 3;
const doc_type = document.getElementById('doc_type');
const get_example = document.getElementById('get_example');
const textarea_left = document.getElementById('textarea_left');
const convert_button = document.getElementById('convert_button');
const verify_button = document.getElementById('verify_button');
const textarea_right = document.getElementById('textarea_right');
const check_result = document.getElementById('check_result');
const parse_err = document.getElementById('parse_err');
......@@ -37,7 +37,7 @@ for (let i = 1; i <= DOCUMENTS_TYPES_COUNT; i++) {
}
// Create listeners
convert_button.addEventListener("click", check_input);
verify_button.addEventListener("click", check_input);
doc_type.addEventListener("change", () => {
if (doc_type.value != ANY_DOC_TYPE) {
get_example.disabled = false;
......@@ -69,43 +69,46 @@ function create_doc_type_options() {
// Check user input
function check_input() {
const input = textarea_left.value;
const result = wasm.parse_doc_and_verify(input, doc_type.value);
let output = wasm.parse_doc_into_json(input, doc_type.value);
if (input.length > 0) {
const result = wasm.parse_doc_and_verify(input, doc_type.value);
let output = wasm.parse_doc_into_json(input, doc_type.value);
// Log for debug
console.log("input="+input);
console.log("result="+result);
console.log("output="+output);
// Log for debug
console.log("input="+input);
console.log("result="+result);
console.log("output="+output);
// Clear all texts
textarea_right.value = "";
check_result.innerText = "";
parse_err.innerText = "";
// Clear all texts
textarea_right.value = "";
check_result.innerText = "";
parse_err.innerText = "";
switch (result) {
case CHECK_RESULT_UNKNOWN_DOC_TYPE:
check_result.style.color = 'red';
check_result.innerText = "Invalid document. Specify expected document type for more informations.";
break;
case CHECK_RESULT_WRONG_FORMAT:
check_result.style.color = 'red';
check_result.innerText = "Wrong format.";
breakText(output, parse_err);
break;
case CHECK_RESULT_INVALID_SIG:
check_result.style.color = 'orange';
prettyPrintJsonInTextarea(output, textarea_right);
check_result.innerText = "Correct format but invalid signature !";
break;
case CHECK_RESULT_VALID_SIG:
check_result.style.color = 'green';
prettyPrintJsonInTextarea(output, textarea_right);
check_result.innerText = "Valid Document.";
break;
switch (result) {
case CHECK_RESULT_UNKNOWN_DOC_TYPE:
check_result.style.color = 'red';
check_result.innerText = "Format : Invalid \u2716";
parse_err.innerText = "Specify expected document type for more informations !"
break;
case CHECK_RESULT_WRONG_FORMAT:
check_result.style.color = 'red';
check_result.innerText = "Format : Invalid \u2716";
breakText(output, parse_err);
break;
case CHECK_RESULT_INVALID_SIG:
check_result.style.color = 'orange';
prettyPrintJson(output, textarea_right);
check_result.innerHTML = "Format: Valid \u2714<br>Signature: Invalid \u2716";
break;
case CHECK_RESULT_VALID_SIG:
check_result.style.color = 'green';
prettyPrintJson(output, textarea_right);
check_result.innerHTML = "Format: Valid \u2714<br>Signature: Valid \u2714";
break;
}
}
}
function prettyPrintJsonInTextarea(str, elem) {
function prettyPrintJson(str, elem) {
let obj = JSON.parse(str);
let pretty = JSON.stringify(obj, undefined, 4);
elem.value = pretty;
......
main.css
+ 34
− 2
View file @ f1c46f53
/* Generic class */
.ta-center {
text-align: center;
}
.w-50 {
width: 50%;
}
.vl {
border-left:1px solid #ccc;
}
/* Css */
header {
text-align: center;
}
......@@ -10,7 +26,7 @@ main {
}
#documents_validator {
width: 80%;
width: 90%;
}
#textareas {
......@@ -19,6 +35,10 @@ main {
justify-content: center;
}
.blank_separators {
width: 20px;
}
#textareas_headers #textareas_footers {
display: flex;
flex-direction: column;
......@@ -35,10 +55,22 @@ main {
textarea {
width: 100%;
white-space: pre-line;
resize : none;
}
#convert_button {
#verify_button {
font-size: 1.2em;
border: 1px solid green;
border-radius: 50px;
color: green;
background-color: rgb(255, 255, 255);
margin: 10px;
box-shadow: 0px 0px 15px black;
}
#verify_button:disabled {
border: 1px solid grey;
color: grey;
}
#parse_err {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment