pearswj/index.html

## index.html

<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="centered">
    <h1>SpeckleRhino</h1>
  </div>

  <p class="centered">
    Daily builds of SpeckleRhino...
  </p>

  <div id="listing" class="centered"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="list.js"></script>
</body>
</html>

## list.js
$('#listing').html('<pre>Loading...</pre>');

// var repo = "mcneel/compat";
// var job = "compat";

var api = "https://ci.appveyor.com/api/projects/speckleworks/SpeckleRhino/history?recordsNumber=10&branch=master";

var xhr = new XMLHttpRequest();
xhr.open('get', api, false);
xhr.send(null);

var json = JSON.parse(xhr.response);

var max = json.builds.length > 20 ? 20 : json.builds.length;

var items = [];
for (var i = 0; i < max; i++) {
  var build = json.builds[i]

  if (build.status != 'success') {
    continue;
  }

  var api = "https://ci.appveyor.com/api/projects/speckleworks/SpeckleRhino/build/" + build.version;
  xhr.open('get', api, false);
  xhr.send(null);

  var build_json = JSON.parse(xhr.response);

  var jobId = build_json.build.jobs[0].jobId;


  var item = {};

  var date = Date.parse(build.finished);
  var date = new Date(build.finished);

  item.date = date.toISOString();
  item.number = build.version;
  item.ci_url = 'https://ci.appveyor.com/project/speckleworks/SpeckleRhino/build/' + build.version;

  item.sha = build.commitId;
  item.sha_short = item.sha.slice(0,7);
  item.github_url = 'https://github.com/speckleworks/SpeckleRhino/commit/' + item.sha;
  // item.message = build.message;

  item.artifact = 'specklerhino.rhi';
  var artifact_url = "https://ci.appveyor.com/api/buildJobs/" + jobId + "/artifacts/specklerhino.rhi";
  item.artifact_url = artifact_url;

  item.ref = build.branch;
  if (build.pullRequestId != null) {
    item.ref = '#' + build.pullRequestId;
    item.ref_url = 'https://github.com/speckleworks/SpeckleRhino/pull/' + build.pullRequestId
  }

  items.push(item);
}

  $('#listing').html('');
  document.getElementById('listing').innerHTML = '<pre>' + prepareTable(items) + '</pre>';

function prepareTable(items) {
  // items is object like:
  // [
  //   {
  //      number: ..
  //      ref: ..
  //      sha: ..
  //      sha_short: ..
  //      github_url: ..
  //      artifact: ..
  //      artifact_url: ..
  //   },
  //   ...
  // ]
  var cols = [ 29, 10, 12, 25, 16 ];
  var content = [];
  content.push(padRight('Date', cols[0]) + padRight('Number', cols[1]) + padRight('SHA', cols[2]) + padRight('Artifact', cols[3]) + 'Branch\n');
  content.push(new Array(cols[0] + cols[1] + cols[2] + cols[3] + cols[4] + 4).join('-') + '\n');


  jQuery.each(items, function(idx, item) {
    var row = renderRow(item, cols);
    content.push(row + '\n');
  });

  return content.join('');
}

function renderRow(item, cols) {
  var row = '';
  row += padRight(item.date, cols[0]);
  row += padRightUrl(item.number, item.ci_url, cols[1]);
  row += padRightUrl(item.sha_short, item.github_url, cols[2], item.message);
  row += padRightUrl(item.artifact, item.artifact_url, cols[3]);
  if (item.ref_url != null) {
    row += padRightUrl(item.ref, item.ref_url, cols[4]);
  } else {
    row += padRight(item.ref, cols[4]);
  }
  // row += '  ';
  return row;
}

function padRight(padString, length) {
  var str = String(padString).slice(0, length-3);
  if (padString.length > str.length) {
    str += '...';
  }
  while (str.length < length) {
    str = str + ' ';
  }
  return str;
}

function padRightUrl(padString, padUrl, length, title) {
  var str = String(padString).slice(0, length-3);
  if (padString.length > str.length) {
    str += '...';
  }
  var len = str.length;
  if (title) {
    title = ' title="' + title + '" ';
  }
  else {
    title = '';
  }
  str = '<a href="' + padUrl + '"' + title + '>' + str + '</a>'
  while (len < length) {
    str = str + ' ';
    len++;
  }
  return str;
}

## style.css
body { margin: 0 }
.row, .col { overflow: hidden; position: absolute; }
.row { left: 0; right: 0; }
.col { top: 0; bottom: 0; }
.scroll-x { overflow-x: auto; }
.scroll-y { overflow-y: auto; }

body {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
  font-size: 13px;
}

h1 {
  padding-top: 40px;
  font-weight: 300;
}

.centered {
    width: 750px;
    margin: 0 50 50;
}

p .centered {
    font-size: 16px;
}

	<html>
	<head>
	<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<div class="centered">
	<h1>SpeckleRhino</h1>
	</div>

	<p class="centered">
	Daily builds of SpeckleRhino...
	</p>

	<div id="listing" class="centered"></div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
	<script src="list.js"></script>
	</body>
	</html>
	$('#listing').html('<pre>Loading...</pre>');

	// var repo = "mcneel/compat";
	// var job = "compat";

	var api = "https://ci.appveyor.com/api/projects/speckleworks/SpeckleRhino/history?recordsNumber=10&branch=master";

	var xhr = new XMLHttpRequest();
	xhr.open('get', api, false);
	xhr.send(null);

	var json = JSON.parse(xhr.response);

	var max = json.builds.length > 20 ? 20 : json.builds.length;

	var items = [];
	for (var i = 0; i < max; i++) {
	var build = json.builds[i]

	if (build.status != 'success') {
	continue;
	}

	var api = "https://ci.appveyor.com/api/projects/speckleworks/SpeckleRhino/build/" + build.version;
	xhr.open('get', api, false);
	xhr.send(null);

	var build_json = JSON.parse(xhr.response);

	var jobId = build_json.build.jobs[0].jobId;


	var item = {};

	var date = Date.parse(build.finished);
	var date = new Date(build.finished);

	item.date = date.toISOString();
	item.number = build.version;
	item.ci_url = 'https://ci.appveyor.com/project/speckleworks/SpeckleRhino/build/' + build.version;

	item.sha = build.commitId;
	item.sha_short = item.sha.slice(0,7);
	item.github_url = 'https://github.com/speckleworks/SpeckleRhino/commit/' + item.sha;
	// item.message = build.message;

	item.artifact = 'specklerhino.rhi';
	var artifact_url = "https://ci.appveyor.com/api/buildJobs/" + jobId + "/artifacts/specklerhino.rhi";
	item.artifact_url = artifact_url;

	item.ref = build.branch;
	if (build.pullRequestId != null) {
	item.ref = '#' + build.pullRequestId;
	item.ref_url = 'https://github.com/speckleworks/SpeckleRhino/pull/' + build.pullRequestId
	}

	items.push(item);
	}

	$('#listing').html('');
	document.getElementById('listing').innerHTML = '<pre>' + prepareTable(items) + '</pre>';

	function prepareTable(items) {
	// items is object like:
	// [
	// {
	// number: ..
	// ref: ..
	// sha: ..
	// sha_short: ..
	// github_url: ..
	// artifact: ..
	// artifact_url: ..
	// },
	// ...
	// ]
	var cols = [ 29, 10, 12, 25, 16 ];
	var content = [];
	content.push(padRight('Date', cols[0]) + padRight('Number', cols[1]) + padRight('SHA', cols[2]) + padRight('Artifact', cols[3]) + 'Branch\n');
	content.push(new Array(cols[0] + cols[1] + cols[2] + cols[3] + cols[4] + 4).join('-') + '\n');


	jQuery.each(items, function(idx, item) {
	var row = renderRow(item, cols);
	content.push(row + '\n');
	});

	return content.join('');
	}

	function renderRow(item, cols) {
	var row = '';
	row += padRight(item.date, cols[0]);
	row += padRightUrl(item.number, item.ci_url, cols[1]);
	row += padRightUrl(item.sha_short, item.github_url, cols[2], item.message);
	row += padRightUrl(item.artifact, item.artifact_url, cols[3]);
	if (item.ref_url != null) {
	row += padRightUrl(item.ref, item.ref_url, cols[4]);
	} else {
	row += padRight(item.ref, cols[4]);
	}
	// row += ' ';
	return row;
	}

	function padRight(padString, length) {
	var str = String(padString).slice(0, length-3);
	if (padString.length > str.length) {
	str += '...';
	}
	while (str.length < length) {
	str = str + ' ';
	}
	return str;
	}

	function padRightUrl(padString, padUrl, length, title) {
	var str = String(padString).slice(0, length-3);
	if (padString.length > str.length) {
	str += '...';
	}
	var len = str.length;
	if (title) {
	title = ' title="' + title + '" ';
	}
	else {
	title = '';
	}
	str = '<a href="' + padUrl + '"' + title + '>' + str + '</a>'
	while (len < length) {
	str = str + ' ';
	len++;
	}
	return str;
	}
	body { margin: 0 }
	.row, .col { overflow: hidden; position: absolute; }
	.row { left: 0; right: 0; }
	.col { top: 0; bottom: 0; }
	.scroll-x { overflow-x: auto; }
	.scroll-y { overflow-y: auto; }

	body {
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-weight: 300;
	font-size: 13px;
	}

	h1 {
	padding-top: 40px;
	font-weight: 300;
	}

	.centered {
	width: 750px;
	margin: 0 50 50;
	}

	p .centered {
	font-size: 16px;
	}