Skip to content

Instantly share code, notes, and snippets.

@fischgeek

fischgeek/canopy_report_template.html

Created May 31, 2023 20:04
Show Gist options
  • Save fischgeek/fbb069608266e61b370d1d869b0c8c87 to your computer and use it in GitHub Desktop.
Save fischgeek/fbb069608266e61b370d1d869b0c8c87 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
canopy_report_template.html
<html lang="en">
<head>
<meta charset="utf-8">
<title>canopy test results</title>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
.masthead ul,
.masthead li {
margin-bottom: 0px;
}
hr {
margin: 0px 0px 20px 0px;
}
.table.results {
margin-bottom: 0px;
}
.table.results td {
border-left: 0px solid #dddddd;
}
.black {
margin-left: 5px;
color: black;
}
.well.mini {
min-height: 0px;
margin-bottom: 0px;
padding: 2px;
position: relative;
top: -3px;
}
.well.mini.clear {
background-color: inherit;
border: none;
-webkit-box-shadow: inherit;
-moz-box-shadow: inherit;
box-shadow: inherit;
top: 0px;
}
.test,
.context {
padding: 2px 0 6px 0;
}
</style>
</head>
<body>
<div class="container">
<div class="masthead">
<ul class="nav nav-pills">
<li>
<a>
<label class="checkbox">
<input id="passedInput" checked="checked" value="" type="checkbox">
<span id="passed">0</span>&nbspPassed
</label>
</a>
</li>
<li>
<a>
<label class="checkbox">
<input id="failedInput" checked="checked" value="" type="checkbox">
<span id="failed">0</span>&nbspFailed
</label>
</a>
</li>
<li>
<a>
<label class="checkbox">
<input id="todoInput" checked="checked" value="" type="checkbox">
<span id="todo">0</span>&nbspTodo
</label>
</a>
</li>
<li>
<a>
<label class="checkbox">
<input id="skippedInput" checked="checked" value="" type="checkbox">
<span id="skipped">0</span>&nbspSkipped
</label>
</a>
</li>
<li class="pull-right" id="start">
<a>
<label>Start:<span class="black"></span>
</label>
</a>
</li>
<li class="pull-right" id="total">
<a>
<label>Total:<span class="black"></span>
</label>
</a>
</li>
<li class="pull-right hidden" id="environment">
<a>
<label>Environment:<span class="black"></span>
</label>
</a>
</li>
</ul>
</div>
<hr>
<table class="table table-bordered table-condensed" id="contexts">
<tbody>
</tbody>
</table>
</div>
<script type="text/javascript">
var beginContextResults = function(context) {
var ctx = $("#contexts").find('tr[data-context="' + context + '"]');
ctx.after('<tr class="result" data-owning-context="' + context + '"><td><table class="table results"><tbody></tbody></table></td></tr>');
ctx.click(function() {
if ($(this).next().is(":visible")) {
$(this).next().hide();
} else {
$(this).next().show();
}
});
};
var addContext = function(context) {
$("#contexts").last('tr').append('<tr data-context="' + context + '"><td><div class="context"><span class="mini well clear">Context: ' + context + '</span><span class="pull-right mini well hidden context-time">0m 0s</span></div></td></tr>');
beginContextResults(context);
};
var recalculateTotals = function() {
$("#passed").text($(".results .success").length);
$("#failed").text($(".results .error").length);
$("#todo").text($(".results .warning").length);
$("#skipped").text($(".results .info").length);
};
var addToContext = function(context, testName) {
var ctx = $('#contexts tr[data-context="' + context + '"]');
ctx.next('tr').find('table').append('<tr><td><div class="test"><span class="mini well clear">' + testName + '</span><span class="pull-right mini well hidden test-time"></span></div></td></tr>');
};
var updateTestInContext = function(context, passFailSkip, image) {
var ctx = $('#contexts tr[data-context="' + context + '"]');
if (passFailSkip === "Pass") {
ctx.next('tr').find('table').find('tr').last().addClass('success');
if (ctx.hasClass("error") === false) {
ctx.removeClass("warning").removeClass("info").addClass("success");
}
}
if (passFailSkip === "Fail") {
ctx.next('tr').find('table').find('tr').last().addClass('error');
ctx.removeClass("success").removeClass("warning").removeClass("info").addClass("error");
}
if (passFailSkip === "Todo") {
ctx.next('tr').find('table').find('tr').last().addClass('warning');
if (ctx.hasClass("error") === false && ctx.hasClass("info") === false && ctx.hasClass("success") === false) {
ctx.addClass("warning");
}
}
if (passFailSkip === "Skip") {
ctx.next('tr').find('table').find('tr').last().addClass('info');
if (ctx.hasClass("error") === false && ctx.hasClass("warning") === false && ctx.hasClass("success") === false) {
ctx.addClass("info");
}
}
if (image !== "") {
ctx.next('tr').find('table').find('tr').last().find('td').last().append('<div><img alt="" src="data:image/jpeg;base64,' + image + '" /></div>')
}
recalculateTotals();
};
var addUrlToTest = function(context, url) {
var ctx = $('#contexts tr[data-context="' + context + '"]');
ctx.next('tr').find('table').last('tr').find('.test').last().after('<div class="url"><pre>' + url + '</pre></div>');
};
var addStackToTest = function(context, stack) {
var ctx = $('#contexts tr[data-context="' + context + '"]');
ctx.next('tr').find('table').last('tr').find('.test').last().after('<div class="stack"><pre>' + stack + '</pre></div>');
};
var addTimeToTest = function(context, time) {
var ctx = $('#contexts tr[data-context="' + context + '"]');
ctx.next('tr').find('table').last('tr').find('.test').last().find('.test-time').removeClass('hidden').text(time);
};
var addTimeToContext = function(context, time) {
var ctx = $('#contexts tr[data-context="' + context + '"]');
ctx.find('.context-time').removeClass('hidden').text(time);
};
var setTotalTime = function(time) {
$("#total .black").text(time);
};
var setStartTime = function(time) {
$("#start .black").text(time);
};
var setEnvironment = function(environment) {
$("#environment").removeClass('hidden').find(".black").text(environment);
};
var addMessageToTest = function(context, message) {
var ctx = $('#contexts tr[data-context="' + context + '"]');
if (ctx.next('tr').find('table').last('tr').find('.test').last().siblings('pre').length === 0) {
ctx.next('tr').find('table').last('tr').find('.test').last().after('<pre><ol class="message"><li>' + message + '</li></ol></pre>');
} else {
ctx.next('tr').find('table').last('tr').find('.test').last().siblings('pre').find('ol').append('<li>' + message + '</li>');
}
};
var collapseContextsExcept = function(context) {
var ctxs = $('#contexts tr.result[data-owning-context !="' + context + '"]');
ctxs.each(function() {
$(this).hide();
});
};
$(document).ready(function() {
var showHide = function(next) {
if (next.is(":visible")) {
next.hide();
} else {
next.show();
}
};
//wire up to existing contexts on the page
var ctx = $('#contexts tr[data-context]').each(function(i, c) {
var $c = $(c);
if ($c.is('.error, .warning')) showHide($c.next()); //if there is an error show it.
$c.click(function() {
var next = $(this).next();
showHide(next);
});
});
var toggleRowClass = function(el, klass) {
var show = $(el).is(":checked")
$('tr.result .' + klass).toggle(show);
}
$("#passedInput").change(function() {
toggleRowClass(this, 'success');
});
$("#failedInput").change(function() {
toggleRowClass(this, 'error');
});
$("#todoInput").change(function() {
toggleRowClass(this, 'warning');
});
$("#skippedInput").change(function() {
toggleRowClass(this, 'info');
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment