131 lines
6.0 KiB
HTML
131 lines
6.0 KiB
HTML
<div class="dropdown is-up is-right {% if IsActive %} is-active{% endif %}" id="usage-dropdown">
|
|
<div class="dropdown-trigger">
|
|
<button class="button is-small" aria-haspopup="true" aria-controls="dropdown-menu3"
|
|
onclick="this.parentElement.parentElement.classList.toggle('is-active')">
|
|
<span class="icon"><i class="fa-regular fa-money-bill-1"></i></span>
|
|
</button>
|
|
</div>
|
|
<div class="dropdown-menu" id="dropdown-menu3" role="menu">
|
|
<div class="dropdown-content">
|
|
<div class="dropdown-item">
|
|
<!-- Placeholder for additional text -->
|
|
<div class="content" style="max-height: 50vh; overflow-y: auto;">
|
|
<table class="table is-narrow is-fullwidth is-striped">
|
|
<tbody>
|
|
{% for usage in usages %}
|
|
<tr>
|
|
<td>
|
|
<small>{{ usage.Key.ModelID }}</small>
|
|
</td>
|
|
<td class="has-text-right totalCostCell">
|
|
<small>{{ usage.TotalCost|floatformat:2 }}$</small>
|
|
</td>
|
|
<td class="has-text-right is-hidden totalCountCell">
|
|
<small>{{ usage.TotalCount }}</small>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- Total cost -->
|
|
<div class="content totalCostCell">
|
|
<p>
|
|
<strong>Total: </strong>
|
|
<span class="totalCost">
|
|
{{ TotalCost|floatformat:2 }}$
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<!-- Total count -->
|
|
<div class="content is-hidden totalCountCell">
|
|
<p>
|
|
<strong>Total: </strong>
|
|
<span class="totalCount">
|
|
{{ TotalCount }} messages
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<!-- Top buttons -->
|
|
<div class="buttons has-addons is-centered">
|
|
<button class="button is-small is-primary" title="Money Spent" id="money-spent-button">
|
|
<span class="icon ml-4 mr-4"><i class="fa-regular fa-money-bill-1"></i></span>
|
|
</button>
|
|
<button class="button is-small" title="Messages Sent" id="messages-sent-button">
|
|
<span class="icon ml-4 mr-4"><i class="fa-regular fa-envelope"></i></span>
|
|
</button>
|
|
</div>
|
|
<!-- Row with text and buttons -->
|
|
<div class="level is-mobile">
|
|
<div class="level-left">
|
|
<button class="button is-small" hx-get="/loadUsageKPI?month={{ DateID }}&offset=-1"
|
|
hx-swap="outerHTML" hx-target="#usage-dropdown">
|
|
<span class="icon"><i class="fa-solid fa-chevron-left"></i></span>
|
|
</button>
|
|
</div>
|
|
<div class="level-item">
|
|
<p>{{ Date }}</p>
|
|
</div>
|
|
<div class="level-right">
|
|
<button class="button is-small" hx-get="/loadUsageKPI?month={{ DateID }}&offset=1"
|
|
hx-swap="outerHTML" hx-target="#usage-dropdown">
|
|
<span class="icon"><i class="fa-solid fa-chevron-right"></i></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('click', function (event) {
|
|
if (!document.getElementById('usage-dropdown').contains(event.target)) {
|
|
document.getElementById('usage-dropdown').classList.remove('is-active');
|
|
}
|
|
});
|
|
|
|
document.getElementById('money-spent-button').addEventListener('click', function () {
|
|
document.getElementById('money-spent-button').classList.add('is-primary');
|
|
document.getElementById('messages-sent-button').classList.remove('is-primary');
|
|
// Change all totalCountCell to is-hidden and remove is-hidden from totalCostCell
|
|
const totalCountCells = document.getElementsByClassName('totalCountCell');
|
|
for (let i = 0; i < totalCountCells.length; i++) {
|
|
totalCountCells[i].classList.add('is-hidden');
|
|
}
|
|
const totalCostCells = document.getElementsByClassName('totalCostCell');
|
|
for (let i = 0; i < totalCostCells.length; i++) {
|
|
totalCostCells[i].classList.remove('is-hidden');
|
|
}
|
|
})
|
|
|
|
document.getElementById('messages-sent-button').addEventListener('click', function () {
|
|
document.getElementById('messages-sent-button').classList.add('is-primary');
|
|
document.getElementById('money-spent-button').classList.remove('is-primary');
|
|
// Change all totalCostCell to is-hidden and remove is-hidden from totalCountCell
|
|
const totalCostCells = document.getElementsByClassName('totalCostCell');
|
|
for (let i = 0; i < totalCostCells.length; i++) {
|
|
totalCostCells[i].classList.add('is-hidden');
|
|
}
|
|
const totalCountCells = document.getElementsByClassName('totalCountCell');
|
|
for (let i = 0; i < totalCountCells.length; i++) {
|
|
totalCountCells[i].classList.remove('is-hidden');
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
.level {
|
|
width: 100%;
|
|
/* Ensure the level takes the full width of its container */
|
|
max-width: 300px;
|
|
/* Set a max-width to keep the popover size consistent */
|
|
margin: 0 auto;
|
|
/* Center the level horizontally */
|
|
}
|
|
|
|
.level-item p {
|
|
white-space: nowrap;
|
|
/* Prevent the text from wrapping */
|
|
}
|
|
</style> |