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

improve error

Browse Source
This commit is contained in:
DieMyst 2019-06-15 23:10:31 +03:00
parent b70360481b
commit e2ac75d18f
1 changed files with 81 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
index.js
View File

@ -15,7 +15,7 @@ window.onload = function () {
status: "in-progress", status: "in-progress",
height: 3545 height: 3545
}; };
list.innerHTML += zoneElement("cool-zone", coolZone, coolStatus); appendNewZone("cool-zone", coolZone, coolStatus);
let iris = { let iris = {
name: "Iris", name: "Iris",
@ -26,7 +26,7 @@ window.onload = function () {
let irisStatus = { let irisStatus = {
status: "success" status: "success"
}; };
list.innerHTML += zoneElement("iris", iris, irisStatus); appendNewZone("iris", iris, irisStatus);
let nameService = { let nameService = {
name: "Name Service", name: "Name Service",
@ -37,12 +37,12 @@ window.onload = function () {
let nameStatus = { let nameStatus = {
status: "error" status: "error"
}; };
list.innerHTML += zoneElement("name service", nameService, nameStatus); appendNewZone("name service", nameService, nameStatus);
let buttonEl = document.getElementById("start-check"); let buttonEl = document.getElementById("start-check");
buttonEl.onclick = function() { buttonEl.addEventListener("click", function() {
startCheckEvent() startCheckEvent()
} });
}; };
function startCheckEvent() { function startCheckEvent() {
@ -59,14 +59,23 @@ function startCheckEvent() {
startCheck(someInfo.name, someInfo); startCheck(someInfo.name, someInfo);
} }
function appendNewZone(id, info) { function appendNewZone(id, info, status) {
state[id] = {
info: info,
status: status
};
let list = document.getElementById("zoneList"); let list = document.getElementById("zoneList");
let status = { if (!status) {
status: "in-progress", status = {
height: 0 status: "in-progress",
}; height: 0
};
}
let zoneInfo = zoneElement(id, info, status); let zoneInfo = zoneElement(id, info, status);
list.innerHTML = zoneInfo + list.innerHTML list.innerHTML = zoneInfo + list.innerHTML;
if (status.status === "error") {
setError(id)
}
} }
function setHeightAndWidth(el, currentHeight, lastHeight) { function setHeightAndWidth(el, currentHeight, lastHeight) {
@ -80,45 +89,65 @@ function changeHeight(el, currentHeight) {
el.innerHTML = `Height: ${currentHeight}`; el.innerHTML = `Height: ${currentHeight}`;
} }
function showError(el, btn) { function getInfo(id) {
let infoDiv = el.parentElement.parentElement.getElementsByClassName("bg-white")[0]; let el = document.getElementById(id);
return el.getElementsByClassName("bg-white")[0];
}
function showError(id, btn) {
let infoDiv = getInfo(id);
infoDiv.innerHTML = "some error about"; infoDiv.innerHTML = "some error about";
btn.innerHTML = "Hide Error"; btn.innerHTML = "Hide Error";
} }
function hideError(el, btn) { function hideError(id, btn) {
let infoDiv = el.parentElement.parentElement.getElementsByClassName("bg-white")[0]; let infoDiv = getInfo(id);
infoDiv.innerHTML = ""; infoDiv.innerHTML = "";
btn.innerHTML = "Show Error"; btn.innerHTML = "Show Error";
} }
function errorAction(btn, el) { function errorAction(btn, id) {
showError(el, btn); showError(id, btn);
} }
function unerrorAction(btn, el) { function unerrorAction(btn, id) {
hideError(el, btn); hideError(id, btn);
} }
function setError(el) { function genErrorButton(id) {
console.log("ERROR!!!!!!!!!!!"); let newBtn = document.createElement("button");
newBtn.type = "button";
newBtn.id = id + "-btn";
newBtn.style.width = "60%";
newBtn.classList.add("btn", "btn-block", "btn-danger");
newBtn.innerHTML = "Get Error Info";
return newBtn;
}
function setError(id) {
let el = getProgressBar(id);
console.log("ERROR!!!!!!!!!!! ");
el.classList.add("progress-error"); el.classList.add("progress-error");
let newBtn = document.createElement("button"); let btn = genErrorButton(id);
newBtn.type = "button"; state[id].swap = false;
newBtn.style.width = "60%"; state[id].errorButton = btn;
newBtn.classList.add("btn", "btn-block", "btn-danger"); state[id].errorFunc = function(e) {
newBtn.innerHTML = "Get Error Info"; console.log("error button clicked = " + id);
let swap = false; if (state[id].swap) {
newBtn.onclick = function() { unerrorAction(btn, id);
if (swap) { state[id].swap = false;
unerrorAction(newBtn, el);
swap = false;
} else { } else {
errorAction(newBtn, el); errorAction(btn, id);
swap = true; state[id].swap = true;
} }
}; };
el.parentElement.append(newBtn); el.parentElement.appendChild(btn);
// to avoid `onclick` erasure for some reasons
Object.keys(state).forEach(function(key) {
if (state[key].errorButton) {
document.getElementById(key).onclick = state[key].errorFunc
}
});
} }
function zoneElement(id, info, status) { function zoneElement(id, info, status) {
@ -138,7 +167,8 @@ function zoneElement(id, info, status) {
console.log("percent: " + percent); console.log("percent: " + percent);
} }
console.log("hi " + id); console.log("hi " + id);
return `<div class="row border border-dark" id="${id}">
return `<div class="row border border-dark" id="${id}">
<div class="row"><div class="col-12">${info.name}, ${info.nodesNumber} nodes, ${info.lastHeight}</div></div> <div class="row"><div class="col-12">${info.name}, ${info.nodesNumber} nodes, ${info.lastHeight}</div></div>
<div class="row"><div class="col-12"><a href="${info.binaryLink}">Binary link</a></div></div> <div class="row"><div class="col-12"><a href="${info.binaryLink}">Binary link</a></div></div>
<div class="col-12"> <div class="col-12">
@ -147,11 +177,19 @@ function zoneElement(id, info, status) {
</div> </div>
<div class="bg-white"></div> <div class="bg-white"></div>
</div> </div>
</div>` </div>`;
}
function getProgressBar(id) {
return document.getElementById(id).getElementsByClassName("progress-bar")[0];
} }
function startCheck(zoneId, info) { function startCheck(zoneId, info) {
if (state[zoneId]) {
return;
}
var xmlHttp = new XMLHttpRequest(); var xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", "http://localhost:8090/create/" + zoneId, false ); // false for synchronous request xmlHttp.open( "GET", "http://localhost:8090/create/" + zoneId, false ); // false for synchronous request
xmlHttp.send( null ); xmlHttp.send( null );
@ -160,12 +198,11 @@ function startCheck(zoneId, info) {
socket.onopen = function(e) { socket.onopen = function(e) {
state[zoneId] = {
info: info
};
appendNewZone(zoneId, info); appendNewZone(zoneId, info);
console.log("Websocket was opened: " + JSON.stringify(e)); console.log("Websocket was opened: " + JSON.stringify(e));
state[zoneId] = {
info: info
}
}; };
let k = 0; let k = 0;
@ -173,7 +210,7 @@ function startCheck(zoneId, info) {
socket.onmessage = function(event) { socket.onmessage = function(event) {
let st = state[zoneId]; let st = state[zoneId];
let data = JSON.parse(event.data); let data = JSON.parse(event.data);
let el = document.getElementById(zoneId).getElementsByClassName("progress-bar")[0]; let el = getProgressBar(zoneId);
k++; k++;
if (data.height) { if (data.height) {
if (st.info.lastHeight < 1000 || k % 100 === 0) { if (st.info.lastHeight < 1000 || k % 100 === 0) {
@ -182,7 +219,7 @@ function startCheck(zoneId, info) {
changeHeight(el, data.height) changeHeight(el, data.height)
} }
} else { } else {
setError(el); setError(zoneId);
socket.close() socket.close()
} }
}; };