adrien/Jade
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Better usage menu

Browse Source
This commit is contained in:
adrien
2024-05-23 17:00:31 +02:00
parent 26450e7d39
commit 255f86e48b
4 changed files with 172 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
views/layouts/main.html
+1 -1
View File
@@ -9,7 +9,7 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<link href="https://fonts.googleapis.com/css?family=Russo+One" rel="stylesheet">
<link rel="stylesheet" href="/animations.css">
<!--link rel="stylesheet" href="/animations.css"-->
<link rel="stylesheet" href="/style.css">
<script src="https://unpkg.com/htmx.org@1.9.11"></script>
views/partials/popover-models.html
+3 -10
View File
@@ -6,7 +6,7 @@
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu3" role="menu">
<div class="dropdown-content is-small">
<div class="dropdown-content">
<div class="dropdown-item" id="models-list">
{% for LLM in LLMs %}
<div class="icon-text has-text unselected" onclick="toggleSelection(this)" style="cursor: pointer;"
@@ -84,18 +84,11 @@
</div>
<script>
function toggleDropdown(event) {
event.stopPropagation();
document.getElementById('models-dropdown').classList.toggle('is-active');
}
function closeDropdown(event) {
document.addEventListener('click', function (event) {
if (!document.getElementById('models-dropdown').contains(event.target)) {
document.getElementById('models-dropdown').classList.remove('is-active');
}
}
document.addEventListener('click', closeDropdown);
});
document.getElementById('model-id-input').querySelector('select').addEventListener('change', function () {
const customEndpoint = this.value === 'custom';
views/partials/popover-usage.html
+106 -8
View File
@@ -1,17 +1,115 @@
<div class="dropdown is-hoverable is-up is-right">
<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-menu4">
<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-menu4" role="menu">
<div class="dropdown-menu" id="dropdown-menu3" role="menu">
<div class="dropdown-content">
<div class="dropdown-item">
<div><strong>Total: {{ TotalUsage }}$</strong></div>
<div><strong>Month: {{ MonthUsage }}$</strong></div>
<div><strong>Week: {{ WeekUsage }}$</strong></div>
<div><strong>Today: {{ TodayUsage }}$</strong></div>
<!-- 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">
<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>
</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>