cosmos-hackathon-frontend/index.js

import "bootstrap/dist/css/bootstrap.min.css";

let state = {};

window.onload = function () {
	let list = document.getElementById("zoneList");

	let coolZone = {
		name: "Cool Zone",
		nodesNumber: 12,
		lastHeight: 49771,
		binaryLink: "#"
	};
	let coolStatus = {
		status: "in-progress",
		height: 3545
	};
	appendNewZone("cool-zone", coolZone, coolStatus);

	let iris = {
		name: "Iris",
		nodesNumber: 57,
		lastHeight: 12567,
		binaryLink: "#"
	};
	let irisStatus = {
		status: "success"
	};
	appendNewZone("iris", iris, irisStatus);

	let nameService = {
		name: "Name Service",
		nodesNumber: 4,
		lastHeight: 2566,
		binaryLink: "#"
	};
	let nameStatus = {
		status: "error"
	};
	appendNewZone("name service", nameService, nameStatus);

	let buttonEl = document.getElementById("start-check");
	buttonEl.addEventListener("click", function() {
        startCheckEvent()
    });
};

function startCheckEvent() {
	let nodeIpEl = document.getElementById("node-ip").value;
    let portEl = document.getElementById("node-port").value;
    let binaryUrlEl = document.getElementById("binary-url").value;
	let nameEl = document.getElementById("node-name").value;

    let someInfo = {
        name: nameEl,
        nodesNumber: 34,
        lastHeight: 13,
        binaryLink: "#"
    };

    let createUrl = `http://localhost:8090/create/${nameEl}/${nodeIpEl}/${portEl}/${binaryUrlEl}`;

    startCheck(createUrl, someInfo.name, someInfo);
}

function appendNewZone(id, info, status) {
    state[id] = {
        info: info,
        status: status
    };
	let list = document.getElementById("zoneList");
	if (!status) {
        status = {
            status: "in-progress",
            height: 0
        };
    }
	let zoneInfo = zoneElement(id, info, status);
	list.innerHTML = zoneInfo + list.innerHTML;
    if (status.status === "error") {
        setError(id)
    }
}

function setHeightAndWidth(el, currentHeight, lastHeight) {
	let percent = currentHeight / lastHeight * 100;
	el.style.width = `${percent}%`;
	el.innerHTML = `Height: ${currentHeight}`;
}

function changeHeight(el, currentHeight) {
	el.innerHTML = `Height: ${currentHeight}`;
}

function getInfo(id) {
    let el = document.getElementById(id);
    return el.getElementsByClassName("bg-white")[0];
}

function showError(id, btn) {
    let infoDiv = getInfo(id);
    infoDiv.innerHTML = "some error about";
    btn.innerHTML = "Hide Error";
}

function hideError(id, btn) {
    let infoDiv = getInfo(id);
    infoDiv.innerHTML = "";
    btn.innerHTML = "Show Error";
}

function errorAction(btn, id) {
    showError(id, btn);
}

function unerrorAction(btn, id) {
    hideError(id, btn);
}

function genErrorButton(id) {
    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");
	let btn = genErrorButton(id);
	state[id].swap = false;
	state[id].errorButton = btn;
	state[id].errorFunc = function(e) {
        console.log("error button clicked = " + id);
        if (state[id].swap) {
            unerrorAction(btn, id);
            state[id].swap = false;
        } else {
            errorAction(btn, id);
            state[id].swap = true;
        }
    };
    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) {
	let barStatus;
	let percent = "100";
	let currentHeight = info.lastHeight;
	if (status.status === "success") {
		barStatus = "progress-bar"
	} else if (status.status === "error") {
		barStatus = "progress-bar progress-error"
	} else if (status.status === "in-progress") {
		barStatus = "progress-bar";
		currentHeight = status.height;
		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" 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"><a href="${info.binaryLink}">Binary link</a></div></div>                   
                    <div class="col-12">
                        <div class="progress">
                            <div class="${barStatus}" role="progressbar" style="width: ${percent}%;" aria-valuenow="${percent}" aria-valuemin="0" aria-valuemax="100">Height: ${currentHeight}</div>                        
                        </div>
                        <div class="bg-white"></div>
                    </div>
                </div>`;
}

function getProgressBar(id) {
    return document.getElementById(id).getElementsByClassName("progress-bar")[0];
}

function startCheck(createUrl, zoneId, info) {

    if (state[zoneId]) {
        return;
    }

	fetch(createUrl).then((sa) => {
        let socket = new WebSocket("ws://127.0.0.1:8090/websocket/" + zoneId);

        socket.onopen = function(e) {

            console.log(e);
            state[zoneId] = {
                info: info
            };
            appendNewZone(zoneId, info);
        };

        let k = 0;

        socket.onmessage = function(event) {
            let st = state[zoneId];
            let data = JSON.parse(event.data);
            let el = getProgressBar(zoneId);
            k++;
            if (data.correct) {
                if (st.info.lastHeight < 1000 || k % 100 === 0) {
                    setHeightAndWidth(el, data.height, st.info.lastHeight);
                } else {
                    changeHeight(el, data.height)
                }
            } else {
                setError(zoneId);
                socket.close()
            }
        };

        socket.onclose = function(event) {
            console.log("Websocket was closed. Cause: " + JSON.stringify(event))
        };

        socket.onerror = function(error) {
            console.log("Error: " + JSON.stringify(error))
        };
    });
}