Any recommended HTML reports which use the generated JSON? #49
Comments
|
I was looking unsuccessfully for one myself... so I wrote a simple one just now. <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Validation report</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<style>
[href]:after {
content: attr(title)
}
</style>
</head>
<body style="background-color: #e5e5e5; padding: 1%">
<div class="container-fluid">
<div class="row">
<h1>Validation report</h1>
<div id="results"></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script>
+ function ($) {
'use strict';
$(function () {
var reload = function () {
$.ajax('validation-report.json')
.done(function (data) {
var $r = $('<div/>')
$.each(data, function (index, item) {
var $item = $('<h2>').html('<p class="small">filename: </p>' + item.filename).appendTo($r).wrap('<div class="col-sm-4 well"/>').parent()
if(index % 3 === 2) $('<div class="clearfix"></div>').appendTo($r)
$.each(item.error, function (ind, msg) {
var $list = $('<div class="list-group"/>').appendTo($item)
$.each(msg, function (key, desc) {
var $i = $('<div class="list-group-item"/>').appendTo($list)
$i.html('<strong>' + key + ':</strong> ' + desc).find('h1, h2').replaceWith(function () {
return $('<h3/>').append($(this).contents())
})
if(msg.type === 'error') $i.addClass('list-group-item-danger')
})
})
})
$('#results').empty().append($r)
})
}
setInterval( reload, 1000 )
reload()
})
}(jQuery)
</script>
</body>
</html>It uses Bootstrap and jQuery from CDNs, so there is no setup needed to run it. It assumes the HTML file is in the same directory as the "validation-report.json" file. If you prefer to put it elsewhere, just change the argument of Anybody interested is free to copy and use this code. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks for making this cool grunt plugin!
I was wondering if anyone knew of any good HTML reporters which help visualize the generated JSON data?
The text was updated successfully, but these errors were encountered: