mirror of
https://github.com/gojp/goreportcard.git
synced 2026-01-29 06:49:05 +08:00
406 lines
12 KiB
HTML
406 lines
12 KiB
HTML
<!doctype html>
|
|
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Go Report Card | Go project code quality report cards</title>
|
|
<link rel="stylesheet" href="https://cdn.rawgit.com/jgthms/bulma/master/css/bulma.min.css">
|
|
<script>
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
|
|
|
ga('create', 'UA-58936835-1', 'auto');
|
|
ga('send', 'pageview');
|
|
|
|
</script>
|
|
<style>
|
|
.header .is-active {
|
|
font-weight: bold;
|
|
}
|
|
.header .title {
|
|
font-size: 1.5em;
|
|
}
|
|
.hero-content .subtitle {
|
|
font-size: 1.5em;
|
|
font-weight: 300;
|
|
color: rgb(255, 255, 255) !important;
|
|
text-shadow: 0px 0px 4px rgba(150, 150, 150, 1);
|
|
}
|
|
#check_form {
|
|
font-size: 1.5em;
|
|
}
|
|
#check_form .input-box {
|
|
padding: 0.5em;
|
|
min-width: 350px;
|
|
}
|
|
#check_form .btn-test {
|
|
margin-top: 1em;
|
|
font-weight: 200;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.menu.results .percentage {
|
|
float: right;
|
|
}
|
|
.percentage.danger {
|
|
color: #F32F22;
|
|
}
|
|
.percentage.info {
|
|
}
|
|
.percentage.warning {
|
|
color: #F39922;
|
|
}
|
|
.percentage.success {
|
|
color: #82F322;
|
|
}
|
|
.results-text {
|
|
font-size: 1.4em;
|
|
}
|
|
.results-text .huge {
|
|
font-size: 2em;
|
|
color: black;
|
|
}
|
|
.results-text .badge-col {
|
|
text-align: right;
|
|
}
|
|
.results-text .badge-col img {
|
|
margin-top: 10px;
|
|
}
|
|
.menu-block.is-active {
|
|
font-weight: bold;
|
|
background: #f0f0f0;
|
|
}
|
|
.results-details .files, .results .errors {
|
|
padding-left: 0;
|
|
}
|
|
.results-details .files .file {
|
|
list-style-type: none;
|
|
padding-left: 0;
|
|
}
|
|
.results-details .files .errors .error {
|
|
list-style-type: none;
|
|
padding-left: 4em;
|
|
margin: 1em 0;
|
|
}
|
|
.results-details .tool-title {
|
|
font-size: 1.8em;
|
|
color: #050505;
|
|
margin-bottom: 10px;
|
|
}
|
|
.results-details .percentage {
|
|
float: right;
|
|
}
|
|
.results-details .wrapper {
|
|
margin-bottom: 20px;
|
|
}
|
|
nav.results.stickytop {
|
|
position:fixed;
|
|
top:0;
|
|
width: auto;
|
|
min-width: 200px;
|
|
}
|
|
|
|
@media (max-width: 800px) {
|
|
nav.results.stickytop {
|
|
display: none;
|
|
}
|
|
}
|
|
@media (min-width: 600px) {
|
|
.hero.gopher {
|
|
background-image: url(/assets/biggopher.png);
|
|
background-repeat: no-repeat;
|
|
background-position: left middle;
|
|
background-size: cover;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="notifications">
|
|
</div>
|
|
<header class="header">
|
|
<div class="container">
|
|
<!-- Left side -->
|
|
<div class="header-left">
|
|
<a class="header-item" href="/">
|
|
<h3 class="title">Go Report Card</h3>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Hamburger menu (on mobile) -->
|
|
<span class="header-toggle">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</span>
|
|
|
|
<!-- Right side -->
|
|
<div class="header-right header-menu">
|
|
<span class="header-item">
|
|
<a href="/high_scores">High Scores</a>
|
|
</span>
|
|
<span class="header-item">
|
|
<a href="https://github.com/gojp/goreportcard">Github</a>
|
|
</span>
|
|
<span class="header-item">
|
|
<a href="/about">About</a>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<section class="hero is-primary is-medium gopher">
|
|
<div class="hero-content">
|
|
<div class="container">
|
|
<h2 class="subtitle">
|
|
Enter the <strong>go get</strong> path to the project below:
|
|
</h2>
|
|
<form method="GET" action="/checks" id="check_form">
|
|
<div>
|
|
<p class="url">
|
|
<input name="repo" type="text" class="input-box" placeholder="github.com/gojp/goreportcard"/>
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<button type="submit" class="button btn-test is-large" href="#" role="button">Generate Report</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section container-results hidden">
|
|
<div class="container">
|
|
<div class="columns results-text">
|
|
</div>
|
|
<div class="columns">
|
|
<div class="column is-quarter">
|
|
<nav class="menu results">
|
|
</nav>
|
|
</div>
|
|
<div class="column">
|
|
<div class="results-details">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<div class="content is-centered">
|
|
<p>
|
|
<strong>Go Report Card</strong> by
|
|
<a href="https://twitter.com/shawnps">Shawn Smith</a> and
|
|
<a href="https://twitter.com/ironzeb">Herman Schaaf</a>.
|
|
</p>
|
|
<p>
|
|
<a href="https://www.digitalocean.com/" class="dolink">
|
|
<img width="15%" src="/assets/do-proudly-hosted.png">
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script>
|
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>
|
|
<script id="template-alert" type="text/x-handlebars-template">
|
|
<div class="notification is-primary">
|
|
<button class="delete"></button>
|
|
{{{message}}}
|
|
</div>
|
|
</div>
|
|
</script>
|
|
<script id="template-grade" type="text/x-handlebars-template">
|
|
<div class="column">
|
|
<p><span class="huge">{{grade}}</span> {{gradeMessage grade}}    Found <strong>{{issues}}</strong> issues across <strong>{{files}}</strong> files</p>
|
|
</div>
|
|
<div class="column badge-col"><img src="http://goreportcard.com/badge/{{repo}}"/></div>
|
|
</script>
|
|
<script id="template-check" type="text/x-handlebars-template">
|
|
<a class="menu-block" href="#{{{name}}}">
|
|
{{{name}}}
|
|
<span class="percentage {{color percentage}}">{{percentage}}%</span>
|
|
</a>
|
|
</script>
|
|
<script id="template-details" type="text/x-handlebars-template">
|
|
<div class="wrapper">
|
|
<a name="{{{name}}}"></a><h1 class="tool-title">{{{name}}}<span class="percentage {{color percentage}}">{{percentage}}%</span></h1>
|
|
<p class="tool-description">{{{description}}}</p>
|
|
{{^file_summaries}}
|
|
<p class="perfect">No problems detected. Good job!</p>
|
|
{{/file_summaries}}
|
|
{{#each file_summaries}}
|
|
<ul class="files">
|
|
<li class="file">
|
|
<ul class="errors">
|
|
<a href="{{this.file_url}}">{{this.filename}}</a>
|
|
{{#each this.errors}}
|
|
{{#if line_number}}
|
|
<li class="error"><a href="{{../../file_url}}#L{{this.line_number}}">Line {{this.line_number}}</a>: {{this.error_string}}</li>
|
|
{{/if}}
|
|
{{/each}}
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
{{/each}}
|
|
</div>
|
|
</script>
|
|
<script id="template-lastrefresh" type="text/x-handlebars-template">
|
|
<p>Last refresh: {{last_refresh}}</p>
|
|
<br>
|
|
<p><a class="refresh-button button" href=""><strong>Refresh now</strong></a></p>
|
|
</script>
|
|
<script type="text/javascript">
|
|
var loading = false;
|
|
|
|
Handlebars.registerHelper('gradeMessage', function(grade, options) {
|
|
var gradeMessages = {
|
|
"A+": "Excellent!",
|
|
"A": "Great!",
|
|
"B": "Not bad!",
|
|
"C": "Needs some work",
|
|
"D": "Needs lots of improvement",
|
|
"E": "Urgent improvement needed",
|
|
"F": "... is for lots of things to Fix!"
|
|
};
|
|
return gradeMessages[grade];
|
|
});
|
|
|
|
// add a helper for picking the progress bar colors
|
|
Handlebars.registerHelper('color', function(percentage, options) {
|
|
switch(true){
|
|
case percentage < 30:
|
|
return 'danger';
|
|
case percentage < 50:
|
|
return 'warning';
|
|
case percentage < 80:
|
|
return 'info';
|
|
default:
|
|
return 'success';
|
|
};
|
|
});
|
|
|
|
Handlebars.registerHelper('isfalse', function(percentage, options) {
|
|
return percentage == false;
|
|
});
|
|
|
|
// initialize handlebars templates
|
|
var templates = {};
|
|
$("script[id^=template]").each(function(){
|
|
var name = $(this).attr("id").substring(9);
|
|
var source = $(this).html();
|
|
templates[name] = Handlebars.compile(source);
|
|
});
|
|
|
|
var shrinkHeader = function(){
|
|
var $hero = $("section.hero");
|
|
$hero.slideUp();
|
|
}
|
|
|
|
var populateResults = function(data){
|
|
var checks = data.checks;
|
|
var $resultsText = $(".results-text");
|
|
var $resultsDetails = $('.results-details');
|
|
$resultsText.html($(templates.grade(data)));
|
|
|
|
var $table = $(".results");
|
|
$table.html('<p class="menu-heading">Results</p>');
|
|
for (var i = 0; i < checks.length; i++) {
|
|
checks[i].percentage = parseInt(checks[i].percentage * 100.0);
|
|
var $headRow = $(templates.check(checks[i]));
|
|
$headRow.on("click", function(){
|
|
$(this).closest("nav").find(".is-active").removeClass("is-active");
|
|
$(this).toggleClass("is-active");
|
|
});
|
|
$headRow.appendTo($table);
|
|
if (i == 0) {
|
|
$headRow.toggleClass("is-active");
|
|
}
|
|
|
|
var $details = $(templates.details(checks[i]));
|
|
$details.appendTo($resultsDetails);
|
|
}
|
|
$(".container-results").removeClass('hidden').slideDown();
|
|
|
|
$lastRefresh = $(templates.lastrefresh(data));
|
|
$div = $(".container-update").html($lastRefresh);
|
|
$div.find("a.refresh-button").on("click", function(e){
|
|
loadData.call($("form#check_form")[0], false);
|
|
return false;
|
|
});
|
|
};
|
|
|
|
function alertMessage(msg){
|
|
var html = templates.alert({message: msg});
|
|
var $alert = $(html);
|
|
$alert.find(".delete").on("click", function(){
|
|
$(this).closest(".notification").remove();
|
|
})
|
|
$alert.hide();
|
|
$alert.appendTo("#notifications");
|
|
$alert.slideDown();
|
|
}
|
|
|
|
var loadData = function(getRequest){
|
|
loading = true;
|
|
var $form = $(this),
|
|
url = $form.attr("action"),
|
|
method = $form.attr("method"),
|
|
data = {};
|
|
shrinkHeader();
|
|
hideResults();
|
|
$form.serializeArray().map(function(x){data[x.name] = x.value;});
|
|
$.ajax({
|
|
type: getRequest ? "GET" : "POST",
|
|
url: url,
|
|
data: data,
|
|
dataType: "json"
|
|
}).fail(function(xhr, status, err){;
|
|
alertMessage("There was an error processing your request: " + xhr.responseText);
|
|
}).done(function(data, textStatus, jqXHR){
|
|
populateResults(data);
|
|
}).always(function(){
|
|
loading = false;
|
|
});
|
|
history.pushState('', "Go Report Card for " + data.repo + "", "/report/" + data.repo);
|
|
return false;
|
|
};
|
|
|
|
var hideResults = function(){
|
|
// $(".container-results").hide();
|
|
};
|
|
|
|
// on ready
|
|
$(function(){
|
|
|
|
// handle form submission
|
|
$("form#check_form").submit(loadData);
|
|
|
|
var path = window.location.pathname;
|
|
if (path.indexOf("/report/") == 0) {
|
|
repo = path.replace(/^\/report\//, "");
|
|
$("form#check_form").find("input").val(repo);
|
|
loadData.call($("form#check_form")[0], true);
|
|
}
|
|
|
|
// sticky menu
|
|
$(window).scroll(function() {
|
|
if ($(this).scrollTop() >= 180) {
|
|
$('nav.results').addClass('stickytop');
|
|
}
|
|
else {
|
|
$('nav.results').removeClass('stickytop');
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|