some html implementation

This commit is contained in:
2019-09-08 03:06:31 +03:00
parent 52a3c7fee7
commit 9bd51d9267
18 changed files with 425 additions and 13 deletions

67
templates/bis.jinja2 Normal file
View File

@ -0,0 +1,67 @@
<html lang="en">
<head>
<title>Best in slot</title>
{% include "style.jinja2" %}
</head>
<body>
<h2>best in slot</h2>
{% include "error.jinja2" %}
{% include "search_line.jinja2" %}
<form action="/bis" method="post">
<select name="player" id="player" title="player">
{% for player in players %}
<option>{{ player.player|e }}</option>
{% endfor %}
</select>
<select name="piece" id="piece" title="piece">
{% for piece in pieces %}
<option>{{ piece|e }}</option>
{% endfor %}
</select>
<input name="is_tome" id="is_tome" title="is tome" type="checkbox"/>
<input name="action" id="action" type="hidden" value="add"/>
<input name="method" id="method" type="hidden" value="post"/>
<button>add</button>
</form>
<form action="/bis" method="post">
<select name="player" id="player" title="player">
{% for player in players %}
<option>{{ player.player|e }}</option>
{% endfor %}
</select>
<input name="bis" id="bis" placeholder="player bis link" title="bis" type="text"/>
<input name="method" id="method" type="hidden" value="put"/>
<button>add</button>
</form>
<table id="result">
<tr>
<th>player</th>
<th>piece</th>
<th>is_tome</th>
<th></th>
</tr>
{% for player in players %}
<tr>
<td class="include_search">{{ player.player|e }}</td>
<td class="include_search">{{ player.piece|e }}</td>
<td>{{ player.is_tome|e }}</td>
<td>
<form action="/bis" method="post">
<input name="action" id="action" type="hidden" value="remove"/>
<button>remove</button>
</form>
</td>
</tr>
{% endfor %}
</table>
{% include "export_to_csv.jinja2" %}
{% include "root.jinja2" %}
{% include "search.jinja2" %}
</body>
</html>

3
templates/error.jinja2 Normal file
View File

@ -0,0 +1,3 @@
{% if request_error is defined and request_error is not none %}
<p id="error">Error occurs: {{ request_error|e }}</p>
{% endif %}

View File

@ -0,0 +1,35 @@
<button onclick="exportTableToCsv('result.csv')">Export to csv</button>
<script type="application/javascript">
function downloadCsv(csv, filename) {
var csvFile = new Blob([csv], {"type": "text/csv"});
var downloadLink = document.createElement("a");
downloadLink.download = filename;
downloadLink.href = window.URL.createObjectURL(csvFile);
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
downloadLink.click();
}
function exportTableToCsv(filename) {
var table = document.getElementById("result");
var rows = table.getElementsByTagName("tr");
var csv = [];
for (var i = 0; i < rows.length; i++) {
if (rows[i].style.display === "none")
continue
var cols = rows[i].querySelectorAll("td, th");
var row = [];
for (var j = 0; j < cols.length; j++)
row.push(cols[j].innerText);
csv.push(row.join(","));
}
downloadCsv(csv.join("\n"), filename);
}
</script>

13
templates/index.jinja2 Normal file
View File

@ -0,0 +1,13 @@
<html lang="en">
<head>
<title>FFXIV loot helper</title>
</head>
<body>
<center>
<a href="/party" title="party"><h2>party</h2></a>
<a href="/bis" title="bis management"><h2>bis</h2></a>
<a href="/loot" title="loot management"><h2>loot</h2></a>
</center>
</body>
</html>

53
templates/party.jinja2 Normal file
View File

@ -0,0 +1,53 @@
<html lang="en">
<head>
<title>Party</title>
{% include "style.jinja2" %}
</head>
<body>
<h2>party</h2>
{% include "error.jinja2" %}
{% include "search_line.jinja2" %}
<form action="/party" method="post">
<input name="nick" id="nick" placeholder="player nick name" title="nick" type="text"/>
<input name="job" id="job" placeholder="player job" title="job" type="text"/>
<input name="bis" id="bis" placeholder="player bis link" title="bis" type="text"/>
<input name="priority" id="priority" placeholder="player priority" title="priority" type="number" value="0"/>
<input name="action" id="action" type="hidden" value="add"/>
<button>add</button>
</form>
<table id="result">
<tr>
<th>nick</th>
<th>job</th>
<th>bis pieces looted</th>
<th>total pieces looted</th>
<th>priority</th>
<th></th>
</tr>
{% for player in players %}
<tr>
<td class="include_search">{{ player.nick|e }}</td>
<td class="include_search">{{ player.job|e }}</td>
<td>{{ player.loot_count_bis|e }}</td>
<td>{{ player.loot_count|e }}</td>
<td>{{ player.priority|e }}</td>
<td>
<form action="/party" method="post">
<input name="action" id="action" type="hidden" value="remove"/>
<button>remove</button>
</form>
</td>
</tr>
{% endfor %}
</table>
{% include "export_to_csv.jinja2" %}
{% include "root.jinja2" %}
{% include "search.jinja2" %}
</body>
</html>

1
templates/root.jinja2 Normal file
View File

@ -0,0 +1 @@
<p><a href="/" title="root">root</a></p>

23
templates/search.jinja2 Normal file
View File

@ -0,0 +1,23 @@
<script type="text/javascript">
function searchTable() {
var input = document.getElementById("search");
var filter = input.value.toLowerCase();
var table = document.getElementById("result");
var tr = table.getElementsByTagName("tr");
// from 1 coz of header
for (var i = 1; i < tr.length; i++) {
var td = tr[i].getElementsByClassName("include_search");
var 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>

View File

@ -0,0 +1,3 @@
<div>
<input type="text" id="search" onkeyup="searchTable()" placeholder="search for data" title="search"/>
</div>

6
templates/style.jinja2 Normal file
View File

@ -0,0 +1,6 @@
<style>
table { border-collapse: collapse; }
table, th, td { border: 1px solid black; padding: 5px; }
input { margin: 5px; }
#error { color: #ff0000; }
</style>