fischgeek/canopy_report_template.html

## 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/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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>
	<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/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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>