pretty status html

This commit is contained in:
Evgenii Alekseev 2021-03-13 03:57:27 +03:00
parent 4445c8c871
commit 3405105dce

View File

@ -26,12 +26,36 @@
100% { background-color: rgba(var(--color-building), 0.0); }
}
table, th, td {
div.root {
width: 70%;
padding: 15px 15% 0;
}
section.element {
width: 100%;
}
input, table {
width: inherit;
padding: 10px 0;
}
th, td {
padding: 5px;
}
td.package {
font-weight: bolder;
tr.package:nth-child(odd) {
background-color: rgba(255, 255, 255, 1);
}
tr.package:nth-child(even) {
background-color: rgba(235, 235, 255, 1);
}
tr.header, tr.package:hover {
background-color: rgba(200, 200, 255, 1);
}
td.package-unknown {
background-color: rgba(var(--color-unknown), 1.0);
}
@ -55,32 +79,64 @@
</style>
<script src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>
<script type="text/javascript">
function searchInTable() {
const input = document.getElementById("search");
const filter = input.value.toLowerCase();
const table = document.getElementById("builds");
const tr = table.getElementsByTagName("tr");
// from 1 coz of header
for (var i = 1; i < tr.length; i++) {
let td = tr[i].getElementsByClassName("include-search");
let display = "none";
for (var j = 0; j < td.length; j++) {
if (td[j].tagName.toLowerCase() === "td") {
if (td[j].innerHTML.toLowerCase().indexOf(filter) > -1) {
display = "";
break;
}
}
}
tr[i].style.display = display;
}
}
</script>
</head>
<body>
<h1>ahriman {{ version|e }}</h1>
<div class="root">
<h1>ahriman {{ version|e }}</h1>
<table class="sortable" id="builds">
<tr>
<th>package base</th>
<th>packages</th>
<th>version</th>
<th>architecture</th>
<th>timestamp</th>
<th>status</th>
</tr>
<section class="element">
<input type="search" id="search" onkeyup="searchInTable()" placeholder="search for package" title="search for package"/>
</section>
{% for package in packages %}
<tr>
<td class="package"><a href="{{ package.web_url|e }}" title="{{ package.base|e }}">{{ package.base|e }}</a></td>
<td>{{ package.packages|join("<br>"|safe) }}</td>
<td>{{ package.version|e }}</td>
<td>{{ architecture|e }}</td>
<td>{{ package.timestamp|e }}</td>
<td class="package-{{ package.status|e }}">{{ package.status|e }}</td>
</tr>
{% endfor %}
</table>
<section class="element">
<table class="sortable" id="builds">
<tr class="header">
<th>package base</th>
<th>packages</th>
<th>version</th>
<th>architecture</th>
<th>last update</th>
<th>status</th>
</tr>
{% for package in packages %}
<tr class="package">
<td class="package include-search"><a href="{{ package.web_url|e }}" title="{{ package.base|e }}">{{ package.base|e }}</a></td>
<td class="include-search">{{ package.packages|join("<br>"|safe) }}</td>
<td>{{ package.version|e }}</td>
<td>{{ architecture|e }}</td>
<td>{{ package.timestamp|e }}</td>
<td class="package-{{ package.status|e }}">{{ package.status|e }}</td>
</tr>
{% endfor %}
</table>
</section>
</div>
</body>
</html>