Mirrors/headscale-ui
1
0
Fork 0
mirror of https://github.com/gurucomputing/headscale-ui.git synced 2026-08-04 13:42:46 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #32 from gurucomputing/9-visual-indicator-for-last-login-period

Browse source 
created visual indicator
This commit is contained in:
routerino 2022-08-08 14:18:32 +10:00 • committed by GitHub
commit d6e2a63eb5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 29 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/lib/devices/DeviceCard.svelte
View file

@ -10,13 +10,41 @@
export let device = new Device();
let cardExpanded = false;
let cardEditing = false;
// returns button colour based on time difference
function timeDifference (date: Date) {
let currentTime = new Date();
let timeDifference = (Math.round((currentTime.getTime() - date.getTime()) / 1000));
if(timeDifference < 3600) {
return "bg-success"
} else if (timeDifference < 216000) {
return "bg-warning"
}
}
// returns time last seen in human readable format
function timeSince(date: Date) {
let currentTime = new Date();
// gets time difference in seconds
let timeDifference = (Math.round((currentTime.getTime() - date.getTime()) / 1000));
if(timeDifference < 60) {
return `Last seen ${timeDifference} seconds ago`
} else if(timeDifference < 3600) {
return `Last seen ${Math.floor(timeDifference / 60)} minutes ago`
} else if(timeDifference < 216000) {
return `Last seen ${Math.floor(timeDifference / 3600)} hours ago`
} else {
return `Last seen ${Math.floor(timeDifference / 216000)} days ago`
}
}
</script>
<div class="card-primary">
<div on:click={() => (cardExpanded = !cardExpanded)} class="flex">
<span class="min-w-64 w-1/2 font-bold">
{#if cardEditing == false}
{device.id}: {device.givenName}
<span class="badge badge-xs tooltip {timeDifference(new Date(device.lastSeen))}" data-tip={timeSince(new Date(device.lastSeen))} /> {device.id}: {device.givenName}
{/if}
<RenameDevice bind:cardEditing {device} />
</span>