Skip to content

Add a column to display estimated expiration date #12

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
zire wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add a column to display estimated expiration date #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/tipjar_assets/src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@
th {
font-weight: normal;
min-width: 5rem;
vertical-align: top;
}
.left {
text-align: left;
Expand Down Expand Up @@ -354,11 +355,12 @@ <h2>Canister Tip Jar</h2>
<th class="fixed-th">Canister</th>
<th class="right">Allocated</th>
<th class="right">Donated</th>
<th class="right">Est. Expiration Date</th>
Copy link
Copy Markdown
Owner

@ninegua ninegua Jul 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This name is a bit long, the table won't look as nice on mobile phone. How about "Est. TTL"? TTL = time to live

Copy link
Copy Markdown
Author

@zire zire Jul 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agree. Est. TTL sounds good. The original col header is indeed too long, even on the desktop.

</tr>
</thead>
<tbody id="canisters">
<tr>
<td colspan="3" id="login_area">
<td colspan="4" id="login_area">
<div id="add_canister_form" hidden>
<div class="center">
<div class="table-inner">
Expand Down
41 changes: 40 additions & 1 deletion src/tipjar_assets/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,6 +164,29 @@ function toDays(period) {
return Number(period / 1000000000n / 3600n / 24n);
}

function calculateEstimatedDays(allocation) {
let canister = allocation.canister;
if (canister.usage.length <= 3) {
return "N/A";
}

var usage = 0n;
var period = 0n;
for (var i = 0; i < canister.usage.length; i++) {
usage += canister.usage[i].cycle;
period += canister.usage[i].period;
}
period = period / 3600000000000n;
if (period > 0) {
let hourly = usage / period;
if (hourly > 0) {
let days = canister.total_allocation / hourly / 24n;
return Number(days);
}
}
return "N/A";
}

function canister_summary(allocation) {
let canister = allocation.canister;
console.log(canister);
Expand Down Expand Up @@ -212,12 +235,28 @@ function canister_summary(allocation) {

function canister_row(allocation) {
let id = allocation.canister.id.toString();
let estimatedDays = calculateEstimatedDays(allocation);
let expirationText;

if (estimatedDays === "N/A") {
expirationText = "N/A";
} else {
let expirationDate = new Date();
expirationDate.setDate(expirationDate.getDate() + estimatedDays);
expirationText = expirationDate.toLocaleDateString('en-US', {
month: 'short',
day: 'numeric',
year: 'numeric'
});
}

return [
`<td><a id='anchor_${id}'>${formatAlias(
allocation,
)}<span class="max"><i class="far fa-edit"></i></span></a></td>`,
`<td class='right'>${formatCycle(allocation.allocated)}T</td>`,
`<td class='right'>${formatCycle(allocation.donated)}T</td>`,
`<td class='right'>${expirationText}</td>`,
].join("");
}

Expand Down Expand Up @@ -304,7 +343,7 @@ async function save_canister(tr, id, allocation) {
function show_canister(tr, allocation, autofocus = false) {
let id = allocation.canister.id;
tr.innerHTML = [
`<td colspan='3'><a>${formatAlias(allocation)}</a><br>`,
`<td colspan='4'><a>${formatAlias(allocation)}</a><br>`,
"<div class='center'><div class='table-inner'>",
`<label class='input-label' for='alias_${id}'><b>Alias</b></label><div class="input-box-wrapper"><div id="alias_${id}_spinner" hidden><i class="fas fa-spinner fa-spin"></i></div><input autocomplete="off" id='alias_${id}' value='${allocation.alias}' /></div><br>`,
`<label class='input-label' for='allocated_${id}'><b>Allocated</b></label><div class="input-box-wrapper"><div id="allocated_${id}_spinner" hidden><i class="fas fa-spinner fa-spin"></i></div><input autocomplete="off" id='allocated_${id}' value='${formatCycle(
Expand Down