feat: add DeviceCard.svelte phone-frame component
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Sanju Sivalingam
166
web/src/lib/components/DeviceCard.svelte
Normal file
166
web/src/lib/components/DeviceCard.svelte
Normal file
@@ -0,0 +1,166 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
interface Props {
|
||||||
|
deviceId: string;
|
||||||
|
name: string;
|
||||||
|
status: 'online' | 'offline';
|
||||||
|
model: string | null;
|
||||||
|
manufacturer: string | null;
|
||||||
|
androidVersion: string | null;
|
||||||
|
screenWidth: number | null;
|
||||||
|
screenHeight: number | null;
|
||||||
|
batteryLevel: number | null;
|
||||||
|
isCharging: boolean;
|
||||||
|
lastSeen: string;
|
||||||
|
lastGoal: { goal: string; status: string; startedAt: string } | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
let {
|
||||||
|
deviceId,
|
||||||
|
name,
|
||||||
|
status,
|
||||||
|
model,
|
||||||
|
manufacturer,
|
||||||
|
androidVersion,
|
||||||
|
batteryLevel,
|
||||||
|
isCharging,
|
||||||
|
screenWidth,
|
||||||
|
screenHeight,
|
||||||
|
lastSeen,
|
||||||
|
lastGoal
|
||||||
|
}: Props = $props();
|
||||||
|
|
||||||
|
function relativeTime(iso: string) {
|
||||||
|
const diff = Date.now() - new Date(iso).getTime();
|
||||||
|
const mins = Math.floor(diff / 60000);
|
||||||
|
if (mins < 1) return 'just now';
|
||||||
|
if (mins < 60) return `${mins}m ago`;
|
||||||
|
const hrs = Math.floor(mins / 60);
|
||||||
|
if (hrs < 24) return `${hrs}h ago`;
|
||||||
|
const days = Math.floor(hrs / 24);
|
||||||
|
return `${days}d ago`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function batteryIcon(level: number | null, charging: boolean): string {
|
||||||
|
if (level === null || level < 0) return '?';
|
||||||
|
if (charging) return '⚡';
|
||||||
|
if (level > 75) return '█';
|
||||||
|
if (level > 50) return '▆';
|
||||||
|
if (level > 25) return '▄';
|
||||||
|
return '▂';
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<a href="/dashboard/devices/{deviceId}" class="group block">
|
||||||
|
<!-- Phone frame -->
|
||||||
|
<div
|
||||||
|
class="relative mx-auto w-48 overflow-hidden rounded-[2rem] border-2 bg-white transition-all
|
||||||
|
{status === 'online'
|
||||||
|
? 'border-green-400 shadow-[0_0_15px_rgba(74,222,128,0.2)]'
|
||||||
|
: 'border-neutral-200 opacity-60'}
|
||||||
|
group-hover:shadow-lg"
|
||||||
|
style="aspect-ratio: 9 / 18;"
|
||||||
|
>
|
||||||
|
<!-- Notch -->
|
||||||
|
<div
|
||||||
|
class="absolute left-1/2 top-2 h-1.5 w-12 -translate-x-1/2 rounded-full bg-neutral-200"
|
||||||
|
></div>
|
||||||
|
|
||||||
|
<!-- Status bar -->
|
||||||
|
<div class="flex items-center justify-between px-4 pb-2 pt-5">
|
||||||
|
<div class="flex items-center gap-1">
|
||||||
|
<span
|
||||||
|
class="inline-block h-1.5 w-1.5 rounded-full {status === 'online'
|
||||||
|
? 'bg-green-500'
|
||||||
|
: 'bg-neutral-300'}"
|
||||||
|
></span>
|
||||||
|
<span class="text-[10px] text-neutral-400"
|
||||||
|
>{status === 'online' ? 'Online' : 'Offline'}</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
{#if batteryLevel !== null && batteryLevel >= 0}
|
||||||
|
<div class="flex items-center gap-0.5">
|
||||||
|
<span class="text-[10px] {batteryLevel <= 20 ? 'text-red-500' : 'text-neutral-400'}">
|
||||||
|
{batteryIcon(batteryLevel, isCharging)}
|
||||||
|
</span>
|
||||||
|
<span class="text-[10px] {batteryLevel <= 20 ? 'text-red-500' : 'text-neutral-400'}">
|
||||||
|
{batteryLevel}%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Body -->
|
||||||
|
<div class="flex flex-1 flex-col items-center px-4 pt-4">
|
||||||
|
<!-- Device icon -->
|
||||||
|
<div class="mb-2 flex h-10 w-10 items-center justify-center rounded-xl bg-neutral-100">
|
||||||
|
<svg
|
||||||
|
class="h-5 w-5 text-neutral-500"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="1.5"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Device name -->
|
||||||
|
<p class="text-center text-xs font-semibold leading-tight text-neutral-800">
|
||||||
|
{model ?? name}
|
||||||
|
</p>
|
||||||
|
{#if manufacturer}
|
||||||
|
<p class="text-[10px] text-neutral-400">{manufacturer}</p>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<!-- Specs -->
|
||||||
|
<div class="mt-2 flex flex-wrap justify-center gap-1">
|
||||||
|
{#if androidVersion}
|
||||||
|
<span class="rounded-full bg-neutral-100 px-1.5 py-0.5 text-[9px] text-neutral-500">
|
||||||
|
Android {androidVersion}
|
||||||
|
</span>
|
||||||
|
{/if}
|
||||||
|
{#if screenWidth && screenHeight}
|
||||||
|
<span class="rounded-full bg-neutral-100 px-1.5 py-0.5 text-[9px] text-neutral-500">
|
||||||
|
{screenWidth}x{screenHeight}
|
||||||
|
</span>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Footer: last goal -->
|
||||||
|
<div
|
||||||
|
class="absolute bottom-0 left-0 right-0 border-t border-neutral-100 bg-neutral-50/80 px-3 py-2"
|
||||||
|
>
|
||||||
|
{#if lastGoal}
|
||||||
|
<p class="truncate text-[10px] text-neutral-600">{lastGoal.goal}</p>
|
||||||
|
<div class="mt-0.5 flex items-center justify-between">
|
||||||
|
<span
|
||||||
|
class="text-[9px] font-medium {lastGoal.status === 'completed'
|
||||||
|
? 'text-green-600'
|
||||||
|
: lastGoal.status === 'running'
|
||||||
|
? 'text-amber-600'
|
||||||
|
: 'text-red-500'}"
|
||||||
|
>
|
||||||
|
{lastGoal.status === 'completed'
|
||||||
|
? 'Success'
|
||||||
|
: lastGoal.status === 'running'
|
||||||
|
? 'Running'
|
||||||
|
: 'Failed'}
|
||||||
|
</span>
|
||||||
|
<span class="text-[9px] text-neutral-400">{relativeTime(lastGoal.startedAt)}</span>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<p class="text-[10px] italic text-neutral-400">No goals yet</p>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Home indicator -->
|
||||||
|
<div
|
||||||
|
class="absolute bottom-8 left-1/2 h-1 w-8 -translate-x-1/2 rounded-full bg-neutral-200"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
Reference in New Issue
Block a user