tartiflette/www/template.html
2017-03-12 20:46:23 -04:00

215 lines
8 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Yunohost Pull Requests Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="css/bootstrap.css" media="screen">
<link rel="stylesheet" href="skins/eden.css" media="screen">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<style>
.navbar-holder-dark{
padding: 20px 20px 200px 20px;
background: #333333;
}
.container {
width:1300px;
}
.column-pr-id {
width:190px;
text-align:center;
}
.column-pr-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 350px;
}
.column-pr-created {
width:170px;
}
.column-pr-labels {
}
.column-pr-reviews {
width:150px;
}
</style>
</head>
<body>
<div class="container">
<div class="page-header" id="banner">
<div class="row">
<h1>Yunohost Pull Requests Dashboard</h1>
</div>
</div>
<h3>What should you review ?</h3>
<div class="row">
<div class="col-md-offset-3 col-md-6">
<div class="bs-component">
<ul id="select-team" class="nav nav-pills">
<li id="select-team-all" class="active">
<a href="javascript:void(0)" onclick="filter('')">All <span class="badge">{{ data.teams.all }}</span></a>
</li>
<li id="select-team-core"><a href="javascript:void(0)" onclick="filter('team-core')">Core <span class="badge">{{ data.teams.core }}</span></a></li>
<li id="select-team-apps"><a href="javascript:void(0)" onclick="filter('team-apps')">Apps <span class="badge">{{ data.teams.apps }}</span></a/li>
<li id="select-team-infra"><a href="javascript:void(0)" onclick="filter('team-infra')">Infra / dist<span class="badge">{{ data.teams.infra }}</span></a></li>
<li id="select-team-doc" ><a href="javascript:void(0)" onclick="filter('team-doc')">Doc<span class="badge">{{ data.teams.doc }}</span></a></li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div>
<table id="thePRlist" class="table table-striped table-responsive">
<thead>
<tr>
<th></th>
<th>Title</th>
<th>Created</th>
<th>Labels</th>
<th>Reviews</th>
</tr>
</thead>
<tbody>
{% for pr in data.prs %}
<tr class="{% for team in pr.teams %}team-{{ team }} {% endfor %}">
<td class="column-pr-id">
<a class="btn
{% if pr.priority >= 90 %}btn-warning{% else %}
{% if pr.priority >= 40 %}btn-primary{% else %}
{% if pr.priority >= -10 %}btn-info{% else %}
{% if pr.priority >= -60 %}btn-default{% else %}
btn-link{% endif %}
{% endif %}
{% endif %}
{% endif %}"
href="{{ pr.url }}">{{ pr.id }}</a>
</td>
<td class="column-pr-title"><strong>{{ pr.title }}</strong></td>
<td class="column-pr-created">{{ pr.createdDaysAgo }} days ago</td>
<td class="column-pr-labels">
{% for label in pr.labels %}
<span class="label
{% if label == "important" %}label-danger{%else%}
{% if label == "opinion needed" %}label-warning{%else%}
{% if label == "small decision" %}label-info{%else%}
{% if label == "medium decision" %}label-info{%else%}
{% if label == "big decision" %}label-info{%else%}
{% if label == "work needed" %}label-primary{%else%}
{% if label == "inactive" %}label-default{%else%}
{% if label == "postponed" %}label-default{%else%}
{% if label == "dying" %}label-danger{%else%}
label-primary
{%endif%}{%endif%}{%endif%}{%endif%}{%endif%}{%endif%}{%endif%}{%endif%}{%endif%}
">{{ label }}</span>
&nbsp;
{% endfor %}
</td>
<td class="column-pr-reviews">
<span style="border:1px solid black; border-radius:4px; padding-left:2px; padding-right:2px;">foo <span class="text-success"></span></span>
<span style="border:1px solid black; border-radius:4px; padding-left:2px; padding-right:2px;">bar <span class="text-danger" ></span></span>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
<h3>WTF is this shit? How is priority defined?</h3>
<div class="row">
<div class="col-md-12">
<strong>With labels</strong>
<ul>
<li>"important" = top priority</li>
<li>"opinion-needed" = medium priority</li>
<li>"inactive/postponed" = very low priority</li>
</ul>
<p>PR with 'work needed' have a small malus in priority</p>
<p>PR with 'dying' status have a small bonus in priority</p>
<strong>Then with creation time</strong>
<p>older PRs have higher priority than newer PR</p>
<strong>'Dying' status</strong>
<p>A PR is considered "dying" if it has been created more than 60
days ago and not updated since 30 days. This is meant to be an incentive to
either revive it or flag it as inactive/postponed... </p>
</div>
</div>
</div>
<footer>
<div class="row">
<div class="col-lg-12">
<hr/>
<p>CSS Skin/boilerplate/whatever you call it : <a href="http://scripteden.com/" rel="nofollow">Script Eden</a>.</p>
</div>
</div>
</footer>
</div>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
function filter(team) {
// Declare variables
var input, filter, table, tr, td, i;
table = document.getElementById("thePRlist");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++)
{
if (team == '') { tr[i].style.display = ""; }
else if (tr[i].classList == "") { tr[i].style.display = ""; }
else if (tr[i].classList.contains(team)) { tr[i].style.display = ""; }
else { tr[i].style.display = "none"; }
}
selector = document.getElementById("select-team");
li = selector.getElementsByTagName("li");
if (team == "") { team = "team-all"; }
for (i = 0; i < li.length; i++)
{
if (li[i].getAttribute("id") == "select-".concat(team))
{
li[i].classList.add("active");
}
else
{
li[i].classList.remove("active");
}
}
}
</script>
</body>
</html>