fluencelabs/cosmos-hackathon-frontend
1
0
Fork 0
mirror of https://github.com/fluencelabs/cosmos-hackathon-frontend synced 2025-05-21 18:01:18 +00:00
Code Issues Projects Releases Wiki Activity

show and hide error

Browse Source
This commit is contained in:
DieMyst 2019-06-15 19:25:55 +03:00
parent d1ac2959eb
commit b70360481b
2 changed files with 45 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
index.html
View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Init</title> <title>Cosmic Salmon</title>
<script src="bundle.js"></script> <script src="bundle.js"></script>
</head> </head>
<style> <style>
@ -22,17 +22,19 @@
</style> </style>
<body> <body>
<section class="container"> <section class="container">
<div class="input-group border-primary mb-5"> <div class="m-5"><h1>Cosmic Salmon. Hook A Fish</h1></div>
<input type="text" class="form-control" placeholder="Node IP" id="node-ip"> <div class="input-group border-primary m-5">
<input type="text" class="form-control" placeholder="Binary Source" id="binary-url"> <input type="text" class="form-control" placeholder="Node IP" id="node-ip" value="1">
<input type="text" class="form-control" placeholder="Binary Source" id="binary-url" value="1">
<button type="button" class="btn btn-outline-secondary" id="start-check">Start Check</button> <button type="button" class="btn btn-outline-secondary" id="start-check">Start Check</button>
</div> </div>
Last Checked <div class="m-5"><h3>Last Checked</h3>
<div class="border-primary container" id="zoneList"> <div class="border-primary container" id="zoneList">
</div> </div>
</div>
</section> </section>
</body> </body>
</html> </html>

44
index.js
View File

@ -3,8 +3,6 @@ import "bootstrap/dist/css/bootstrap.min.css";
let state = {}; let state = {};
window.onload = function () { window.onload = function () {
console.log("hello to1");
let list = document.getElementById("zoneList"); let list = document.getElementById("zoneList");
let coolZone = { let coolZone = {
@ -54,7 +52,7 @@ function startCheckEvent() {
let someInfo = { let someInfo = {
name: nodeIpEl.value, name: nodeIpEl.value,
nodesNumber: 34, nodesNumber: 34,
lastHeight: 49771, lastHeight: 13,
binaryLink: "#" binaryLink: "#"
}; };
@ -82,10 +80,45 @@ function changeHeight(el, currentHeight) {
el.innerHTML = `Height: ${currentHeight}`; el.innerHTML = `Height: ${currentHeight}`;
} }
function showError(el, btn) {
let infoDiv = el.parentElement.parentElement.getElementsByClassName("bg-white")[0];
infoDiv.innerHTML = "some error about";
btn.innerHTML = "Hide Error";
}
function hideError(el, btn) {
let infoDiv = el.parentElement.parentElement.getElementsByClassName("bg-white")[0];
infoDiv.innerHTML = "";
btn.innerHTML = "Show Error";
}
function errorAction(btn, el) {
showError(el, btn);
}
function unerrorAction(btn, el) {
hideError(el, btn);
}
function setError(el) { function setError(el) {
console.log("ERROR!!!!!!!!!!!"); console.log("ERROR!!!!!!!!!!!");
el.classList.add("progress-error"); el.classList.add("progress-error");
el.parentElement.innerHTML += `<button type="button" class="btn btn-block btn-danger" style="width: 60%;">Get Error Info</button>` let newBtn = document.createElement("button");
newBtn.type = "button";
newBtn.style.width = "60%";
newBtn.classList.add("btn", "btn-block", "btn-danger");
newBtn.innerHTML = "Get Error Info";
let swap = false;
newBtn.onclick = function() {
if (swap) {
unerrorAction(newBtn, el);
swap = false;
} else {
errorAction(newBtn, el);
swap = true;
}
};
el.parentElement.append(newBtn);
} }
function zoneElement(id, info, status) { function zoneElement(id, info, status) {
@ -112,6 +145,7 @@ function zoneElement(id, info, status) {
<div class="progress"> <div class="progress">
<div class="${barStatus}" role="progressbar" style="width: ${percent}%;" aria-valuenow="${percent}" aria-valuemin="0" aria-valuemax="100">Height: ${currentHeight}</div> <div class="${barStatus}" role="progressbar" style="width: ${percent}%;" aria-valuenow="${percent}" aria-valuemin="0" aria-valuemax="100">Height: ${currentHeight}</div>
</div> </div>
<div class="bg-white"></div>
</div> </div>
</div>` </div>`
} }
@ -141,8 +175,6 @@ function startCheck(zoneId, info) {
let data = JSON.parse(event.data); let data = JSON.parse(event.data);
let el = document.getElementById(zoneId).getElementsByClassName("progress-bar")[0]; let el = document.getElementById(zoneId).getElementsByClassName("progress-bar")[0];
k++; k++;
console.log(JSON.stringify(st));
console.log(JSON.stringify(data));
if (data.height) { if (data.height) {
if (st.info.lastHeight < 1000 || k % 100 === 0) { if (st.info.lastHeight < 1000 || k % 100 === 0) {
setHeightAndWidth(el, data.height, st.info.lastHeight); setHeightAndWidth(el, data.height, st.info.lastHeight);