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

fraud button, improvements

Browse Source
This commit is contained in:
DieMyst 2019-06-16 16:06:11 +03:00
parent e1a69b05a0
commit 3e0591b513
2 changed files with 67 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
index.html
View File

@ -38,11 +38,12 @@
value="QmQ69JoPDaKFpPSbWvvUGRGG5E83u6nTP2hRegmCoa6aW5"> value="QmQ69JoPDaKFpPSbWvvUGRGG5E83u6nTP2hRegmCoa6aW5">
<input type="text" class="form-control m-2" placeholder="Name" id="node-name" value="name-service"> <input type="text" class="form-control m-2" placeholder="Name" id="node-name" value="name-service">
</div> </div>
<button type="button" class="btn btn-outline-secondary m-3" id="start-check">Start Check</button> <button type="button" class="btn btn-outline-info m-3" id="start-check">Start Check</button>
<button type="button" class="btn btn-outline-secondary m-3" id="name-service-hlp">Name Service</button>
<button type="button" class="btn btn-outline-secondary m-3" id="commercio-hlp">Commercio.network</button>
</div> </div>
<div class="m-3"><h3>Last Checked</h3>
<div class="m-5"><h3>Last Checked</h3>
<div class="border-primary container" id="zoneList"> <div class="border-primary container" id="zoneList">
</div> </div>

87
index.js
View File

@ -2,9 +2,11 @@ import "bootstrap/dist/css/bootstrap.min.css";
let state = {}; let state = {};
let url = "http://localhost:8090/"; let url = "http://salmon.fluence.one:8080/";
let wsUrl = "ws://salmon.fluence.one:8080/";
window.onload = function () { window.onload = function () {
getApps();
let list = document.getElementById("zoneList"); let list = document.getElementById("zoneList");
let coolZone = { let coolZone = {
@ -51,14 +53,27 @@ window.onload = function () {
} }
] ]
}`); }`);
console.log("bzid === " + bzId);
console.log("sdfsfsdf === " + state[bzId].errorInfo);
appendNewZone(bzId, badZone, nameStatus); appendNewZone(bzId, badZone, nameStatus);
let buttonEl = document.getElementById("start-check"); let buttonEl = document.getElementById("start-check");
buttonEl.addEventListener("click", function() { buttonEl.addEventListener("click", function() {
startCheckEvent() startCheckEvent()
}); });
document.getElementById("name-service-hlp").onclick = function() {
document.getElementById("node-ip").value = "207.154.210.117";
document.getElementById("node-port").value = "26657";
document.getElementById("binary-url").value = "QmQ69JoPDaKFpPSbWvvUGRGG5E83u6nTP2hRegmCoa6aW5";
document.getElementById("node-name").value = "nameservice";
};
document.getElementById("commercio-hlp").onclick = function() {
document.getElementById("node-ip").value = "188.166.71.251 ";
document.getElementById("node-port").value = "26657";
document.getElementById("binary-url").value = "QmepV645qHM9XR97KiK7Bvd2jjK3MiKTGbq8cYm7izRyQK";
document.getElementById("node-name").value = "commercionetwork";
};
}; };
function startCheckEvent() { function startCheckEvent() {
@ -74,13 +89,27 @@ function startCheckEvent() {
name: name name: name
}; };
let someInfo = { let app = state.apps.find((r) => {
name: name, return r.name === name
nodesNumber: 34, });
lastHeight: 48,
binaryLink: "#"
};
let someInfo;
if (app) {
someInfo = {
name: name,
nodesNumber: 13,
lastHeight: app.consensusHeight,
binaryLink: app.binaryHash
};
} else {
// mock
someInfo = {
name: name,
nodesNumber: 34,
lastHeight: 48,
binaryLink: "#"
};
}
startCheck(params, someInfo.name, someInfo); startCheck(params, someInfo.name, someInfo);
@ -122,7 +151,7 @@ function changeHeight(el, currentHeight) {
function getInfo(id) { function getInfo(id) {
let el = document.getElementById(id); let el = document.getElementById(id);
return el.getElementsByClassName("bg-white")[0]; return el.getElementsByClassName("error-info")[0];
} }
function showError(id, btn) { function showError(id, btn) {
@ -168,7 +197,7 @@ function genErrorButton(id) {
let newBtn = document.createElement("button"); let newBtn = document.createElement("button");
newBtn.type = "button"; newBtn.type = "button";
newBtn.id = id + "-btn"; newBtn.id = id + "-btn";
newBtn.style.width = "60%"; newBtn.style.width = "20%";
newBtn.classList.add("btn", "btn-block", "btn-danger"); newBtn.classList.add("btn", "btn-block", "btn-danger");
newBtn.innerHTML = "Get Error Info"; newBtn.innerHTML = "Get Error Info";
return newBtn; return newBtn;
@ -184,6 +213,10 @@ function setError(id, erroredHeight) {
state[id].block = JSON.parse(r).result.block; state[id].block = JSON.parse(r).result.block;
}); });
el.classList.add("progress-error"); el.classList.add("progress-error");
let claimBtn = document.getElementById(id).getElementsByClassName("claim-btn")[0];
claimBtn.style.display = "block";
let btn = genErrorButton(id); let btn = genErrorButton(id);
state[id].swap = false; state[id].swap = false;
state[id].errorButton = btn; state[id].errorButton = btn;
@ -208,6 +241,7 @@ function setError(id, erroredHeight) {
function zoneElement(id, info, status) { function zoneElement(id, info, status) {
let barStatus; let barStatus;
let percent = "100"; let percent = "100";
let currentHeight = info.lastHeight; let currentHeight = info.lastHeight;
if (status.status === "success") { if (status.status === "success") {
@ -218,21 +252,19 @@ function zoneElement(id, info, status) {
barStatus = "progress-bar"; barStatus = "progress-bar";
currentHeight = status.height; currentHeight = status.height;
percent = currentHeight / info.lastHeight * 100; percent = currentHeight / info.lastHeight * 100;
console.log("last height: " + info.lastHeight);
console.log("cur height: " + currentHeight);
console.log("percent: " + percent);
} }
console.log("hi " + id);
return `<div class="row border border-dark p-2" id="${id}"> return `<div class="row border border-dark p-2" id="${id}">
<div class="col-12 list-info"> <div class="col-9 list-info">
<p>Name: ${info.name}</p><p>Validator Number: ${info.nodesNumber}</p><p>Last Height: ${info.lastHeight}</p><p><a href="${info.binaryLink}">Binary link</a></p> <p>Name: ${info.name}</p><p>Validator Number: 4</p><p>Consensus Height: ${info.lastHeight}</p><p>Binary in IPFS: ${info.binaryLink}</p>
</div> </div>
<div class="text-right col-3"><button type="button" class="btn btn-info btn-block claim-btn pull-right" style="display: none;">Send Fraud Proof</button></div>
<div class="col-12"> <div class="col-12">
<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 class="bg-white error-info"></div>
</div> </div>
</div>`; </div>`;
} }
@ -248,7 +280,7 @@ function startCheck(params, zoneId, info) {
} }
createCheck(params).then((sa) => { createCheck(params).then((sa) => {
let socket = new WebSocket("ws://127.0.0.1:8090/file"); let socket = new WebSocket(wsUrl + "websocket/" + params.name);
socket.onopen = function(e) { socket.onopen = function(e) {
@ -265,7 +297,6 @@ function startCheck(params, zoneId, info) {
let st = state[zoneId]; let st = state[zoneId];
let data = JSON.parse(event.data); let data = JSON.parse(event.data);
if (data.height) { if (data.height) {
console.log("current height = " + data.height);
state[zoneId].currentHeight = data.height state[zoneId].currentHeight = data.height
} }
let el = getProgressBar(zoneId); let el = getProgressBar(zoneId);
@ -277,8 +308,10 @@ function startCheck(params, zoneId, info) {
changeHeight(el, data.height) changeHeight(el, data.height)
} }
} else { } else {
setHeightAndWidth(el, st.info.lastHeight, st.info.lastHeight);
changeHeight(el, data.height);
let erroredHeight = state[zoneId].currentHeight; let erroredHeight = state[zoneId].currentHeight;
setError(zoneId, erroredHeight); setError(zoneId, erroredHeight - 1);
socket.close() socket.close()
} }
}; };
@ -293,16 +326,20 @@ function startCheck(params, zoneId, info) {
}); });
} }
async function getApps(id, height) { async function getApps() {
return fetch(`${url}/apps`) fetch(`${url}apps`).then((r) => {
return r.text()
}).then((r) => {
state.apps = JSON.parse(r)
})
} }
async function getBlock(id, height) { async function getBlock(id, height) {
return fetch(`${url}/block/${id}/${height}`) return fetch(`${url}block/${id}/${height}`)
} }
async function createCheck(params) { async function createCheck(params) {
let createUrl = `${url}/create/${params.name}/${params.nodeIp}/${params.port}/${params.binaryUrl}`; let createUrl = `${url}create/${params.name}/${params.nodeIp}/${params.port}/${params.binaryUrl}`;
fetch(createUrl); fetch(createUrl);
return Promise.resolve() return Promise.resolve()
} }