Skip to content

Instantly share code, notes, and snippets.

@cdax

cdax/1.json

Last active February 21, 2018 09:22
Download ZIP
CCQ Demo
Raw
index.html
<html>
<head>
<title>CCQ Demo</title>
<style type="text/css">
body {
font-family: "Helvetica Neue";
}
.urls {
border: 1px solid black;
}
.urls td {
border: 1px solid black;
width: 100px;
}
.urls td.waiting {
color: #757575;
background-color: #E0E0E0;
}
.urls td.fetching {
color: #000000;
background-color: #FFF59D;
}
.urls td.done {
color: #1B5E20;
background-color: #A5D6A7;
}
.urls td.error {
color: #B71C1C;
background-color: #EF9A9A;
}
div.status {
color: #1B5E20;
}
div.error {
color: #B71C1C;
}
</style>
</head>
<body>
<div>
<strong>Choose a concurrency</strong>
<input type="radio" id="concurrency1"
name="concurrency" value="1">
<label for="concurrency1">None</label>
<input type="radio" id="concurrency2"
name="concurrency" value="2">
<label for="concurrency2">2</label>
<input type="radio" id="concurrency5"
name="concurrency" value="5">
<label for="concurrency5">5</label>
<input type="radio" id="concurrencyInf"
name="concurrency" value="Infinity">
<label for="concurrencyInf">Unbounded</label>
<button type="submit" onclick="runDemo()">Run!</button>
</div>
<br>
<div id="status" class="status"></div>
<div id="error" class="error"></div>
<br>
<table id="urls" class="urls"></table>
<script src="https://github.com/grofers/ccq/releases/download/v0.1.0/ccq-0.1.0.min.js"></script>
<script>
var queue = new Queue();
urls = [
'1.json',
'2.json',
'3.json',
'4.json',
'5.json',
'5a.json',
'6.json',
'7.json',
'8.json',
'9.json',
'10.json',
'10a.json',
'11.json',
'12.json',
'13.json',
'14.json',
'15.json',
'15a.json',
'16.json',
'17.json',
'18.json',
'19.json',
'20.json',
'20a.json',
'21.json',
'22.json',
'23.json',
'24.json',
'25.json',
'25a.json',
'26.json',
'27.json',
'28.json',
'29.json',
'30.json',
'30a.json',
]
var urlTable = document.getElementById("urls");
var statusDiv = document.getElementById("status"),
errorDiv = document.getElementById("error");
function fetchURL(url, statusCell, callback) {
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", function(event) {
if(event.target.status === 200) {
statusCell.classList.remove("fetching");
statusCell.classList.add("done");
statusCell.innerText = "DONE";
callback(null, true);
} else {
statusCell.classList.remove("fetching");
statusCell.classList.add("error");
statusCell.innerText = "ERROR";
callback(new Error("File not found"));
}
});
oReq.addEventListener("error", function(error) {
callback(error);
console.log(error);
statusCell.classList.remove("fetching");
statusCell.classList.add("error");
statusCell.innerText = "ERROR";
});
oReq.open("GET", url);
oReq.send();
statusCell.classList.remove("waiting");
statusCell.classList.add("fetching");
statusCell.innerText = "FETCHING ...";
}
function demo(concurrency) {
urlTable.innerHTML = "";
statusDiv.innerText = "";
var statusCells = [];
for(var i = 0; i < urls.length; i += 1) {
var urlRow = document.createElement("tr");
var urlCell = document.createElement("td");
urlCell.innerText = urls[i];
var statusCell = document.createElement("td");
statusCell.innerText = "WAITING ...";
statusCell.classList.add("waiting");
statusCells.push(statusCell);
urlRow.appendChild(urlCell)
urlRow.appendChild(statusCell);
urlTable.appendChild(urlRow);
}
var q = new Queue(concurrency);
var startDate = new Date();
for(var i = 0; i < urls.length; i += 1) {
q.add(fetchURL, urls[i], statusCells[i]);
}
q.await(function(results) {
var endDate = new Date();
var errors = results.filter(function(result) { return result.isError; });
statusDiv.innerText = (urls.length - errors.length) + "/" + (urls.length) + " successful. ";
statusDiv.innerText += "Took " + (endDate.getTime() - startDate.getTime()) + "ms";
});
}
var concurrency1 = document.getElementById("concurrency1"),
concurrency2 = document.getElementById("concurrency2"),
concurrency5 = document.getElementById("concurrency5"),
concurrencyInf = document.getElementById("concurrencyInf");
function runDemo() {
errorDiv.innerText = "";
if(concurrency1.checked) {
demo(1);
} else if(concurrency2.checked) {
demo(2);
} else if(concurrency5.checked) {
demo(5);
} else if(concurrencyInf.checked) {
demo();
} else {
errorDiv.innerText = "Please select a concurrency value";
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment