fwtrash/tpl/vermessung.html
2022-12-20 12:21:31 +01:00

110 lines
3.8 KiB
HTML

{% extends tpl/layout.html %}
{% block title %}irgendwas mit Vermessungen{% endblock %}
{% block content %}
<form action="/vermessung" method="post">
<p>Gesamtes Clanprotokoll einfügen (strg-a, strg-c):</p>
<textarea name="protocol" rows="4" cols="60">{{ $protocol }}</textarea>
<br />
<input type="submit" value="abschnalzen" />
</form>
{% if(isset($newest)): %}
<hr />
<span id="wao">wao, {{ number_format($newest['gm'], 0, '', '.') }} Goldm&uuml;nzen durch {{ count($newest['list']) }} Vermessungen erwirtschaftet!</span>
<select id="dtswitch">
{% foreach($vms as $vm): %}
<option>{{ $vm['dtact'] }}</option>
{% endforeach; %}
</select>
<hr />
<div class="container-fluid">
<div class="row justify-content-md-center">
<div class="col-sm-4">
<div class="card">
<h5 class="card-header">Topliste:</h5>
<div class="card-body">
<ul class="list-group list-group-flush list-top" id="toplist">
{% foreach($newest['user'] as $name => $c): %}
<li class="list-group-item d-flex justify-content-between align-items-center p-1">
{{ $name }}
<span class="badge bg-primary rounded-pill">{{ $c }} Vermessungen</span>
</li>
{% endforeach; %}
</ul>
</div>
</div>
</div>
<div class="col">
<div class="card">
<h5 class="card-header">ber&uuml;cksichtigte Messungen:</h5>
<div class="card-body">
<table class="table table-sm table-striped" style="width: 100%">
<thead>
<tr>
<th>Datum</th>
<th>Goldm&uuml;nzen</th>
<th>Amtsteher</th>
<th>L&auml;ufer</th>
</tr>
</thead>
<tbody id="vmlist">
{% foreach($newest['list'] as $tmp): %}
<tr>
<td style="vertical-align: top">{{ $tmp['datum'] }}</td>
<td style="vertical-align: top">{{ $tmp['gold'] }} gm</td>
<td style="vertical-align: top">{{ $tmp['amt'] }}</td>
<td style="vertical-align: top">{{ implode(', ', $tmp['laeufer']) }}</td>
</tr>
{% endforeach; %}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script>const vms = {{ json_encode($vms) }};
(() => {
const toplist = document.querySelector('#toplist');
const vmlist = document.querySelector('#vmlist');
const wao = document.querySelector('#wao');
const dtswitch = document.querySelector('#dtswitch');
dtswitch.addEventListener('change', e => {
const vm = vms[dtswitch.value];
toplist.innerHTML = '';
vmlist.innerHTML = '';
let gm = 0;
let cvm = 0;
for(let [ user, count ] of Object.entries(vm.user)) {
// fill toplist
const li = document.createElement('li');
li.classList.add('list-group-item', 'd-flex', 'justify-content-between', 'align-items-center', 'p-1');
li.innerText = user;
const span = document.createElement('span');
span.classList.add('badge', 'bg-primary', 'rounded-pill');
span.innerText = `${count} Vermessungen`;
li.insertAdjacentElement('beforeend', span);
toplist.insertAdjacentElement('beforeend', li);
}
for(let entry of vm.list) {
// fill vmlist
const tr = document.createElement('tr');
tr.innerHTML = `<td>${entry.datum}</td><td>${entry.gold} gm</td><td>${entry.amt}</td><td>${entry.laeufer.join(', ')}</td>`;
vmlist.insertAdjacentElement('beforeend', tr);
}
wao.innerHTML = `wao, ${vm.gm.toLocaleString('de-DE')} Goldm&uuml;nzen durch ${vm.list.length} Vermessungen erwirtschaftet!`;
});
})();
</script>
{% endif; %}
{% endblock %}