fluencelabs/cosmos-hackathon-frontend
1
0
Fork 0
mirror of https://github.com/fluencelabs/cosmos-hackathon-frontend synced 2025-06-06 09:31:27 +00:00
Code Issues Projects Releases Wiki Activity

list of zones draft

Browse Source
This commit is contained in:
DieMyst 2019-06-15 13:13:56 +03:00
parent 0d1db73074
commit e18950b1cb
2 changed files with 88 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
index.html
View File

@ -5,6 +5,20 @@
<title>Init</title> <title>Init</title>
<script src="bundle.js"></script> <script src="bundle.js"></script>
</head> </head>
<style>
.progress {
height: 40px;
margin-bottom: 6px;
}
.progress-bar {
background-color: #e8fbe8;
color: black;
}
.progress-error {
background-color: #fdd8d8;
}
</style>
<body> <body>
<section class="container"> <section class="container">
<div class="input-group border-primary mb-5"> <div class="input-group border-primary mb-5">
@ -15,13 +29,8 @@
Last Checked Last Checked
<div class="border-primary"> <div class="border-primary container" id="zoneList">
<div class="progress" style="height:60px">
<div class="progress-bar bg-white" role="progressbar" style="width: 25%; background-color: white;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress" style="height:60px">
<div class="progress-bar" role="progressbar" style="width: 100%; height: 100px" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div> </div>
</section> </section>
</body> </body>

74
index.js
View File

@ -1,13 +1,83 @@
import "bootstrap/dist/css/bootstrap.min.css"; import "bootstrap/dist/css/bootstrap.min.css";
window.onload = function () { window.onload = function () {
console.log("hello to1") console.log("hello to1");
let list = document.getElementById("zoneList");
let coolZone = {
name: "Cool Zone",
nodesNumber: 12,
lastHeight: 6546,
binaryLink: "#"
};
list.innerHTML += zoneElement("cool zone", coolZone, true);
let iris = {
name: "Iris",
nodesNumber: 57,
lastHeight: 12567,
binaryLink: "#"
};
list.innerHTML += zoneElement("iris", iris, true);
let nameService = {
name: "Name Service",
nodesNumber: 4,
lastHeight: 2566,
binaryLink: "#"
};
list.innerHTML += zoneElement("name service", nameService, false);
}; };
/*
<div class="row border border-dark">
Iris, 50 nodes, last height 12023
<a href="#">Binary link</a>
<div class="col-12">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">Height: 2543</div>
</div>
</div>
</div>
<div class="row">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 100%; height: 100px;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="row">
<div class="progress">
<div class="progress-bar progress-error" role="progressbar" style="width: 100%; height: 100px;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
*/
function zoneElement(id, info, statusOk) {
let barStatus;
if (statusOk) {
barStatus = "progress-bar"
} else {
barStatus = "progress-bar progress-error"
}
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: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">Height: 2543</div>
</div>
</div>
</div>`
}
let socket = new WebSocket("ws://ip:port"); let socket = new WebSocket("ws://ip:port");
socket.onopen = function(e) { socket.onopen = function(e) {
console.log("Waaaa ebsocket was opened: " + JSON.stringify(e)); console.log("Waa ebsocket was opened: " + JSON.stringify(e));
}; };