✅ base implementation done, now onto mobile app
This commit is contained in:
user
@@ -1,18 +1,112 @@
|
||||
<script lang="ts">
|
||||
import { goto } from "$app/navigation";
|
||||
import Icon from "$lib/components/atoms/icon.svelte";
|
||||
import { Button } from "$lib/components/ui/button";
|
||||
import * as Card from "$lib/components/ui/card";
|
||||
import { Input } from "$lib/components/ui/input";
|
||||
import * as Table from "$lib/components/ui/table";
|
||||
import MaxWidthWrapper from "$lib/components/molecules/max-width-wrapper.svelte";
|
||||
import { mainNavTree } from "$lib/core/constants";
|
||||
import { mobileVM } from "$lib/domains/mobile/mobile.vm.svelte";
|
||||
import { breadcrumbs } from "$lib/global.stores";
|
||||
import Smartphone from "@lucide/svelte/icons/smartphone";
|
||||
import RefreshCw from "@lucide/svelte/icons/refresh-cw";
|
||||
import Search from "@lucide/svelte/icons/search";
|
||||
import { onDestroy, onMount } from "svelte";
|
||||
|
||||
breadcrumbs.set([mainNavTree[0]]);
|
||||
|
||||
onMount(async () => {
|
||||
await mobileVM.fetchDevices();
|
||||
mobileVM.startDevicesPolling(5000);
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
mobileVM.stopDevicesPolling();
|
||||
});
|
||||
</script>
|
||||
|
||||
<MaxWidthWrapper cls="space-y-8">
|
||||
<div class="space-y-2">
|
||||
<h1 class="text-3xl font-bold tracking-tight">
|
||||
Dashboard Not Yet Implemented
|
||||
</h1>
|
||||
<p class="text-muted-foreground">
|
||||
This is where your implementation will go
|
||||
</p>
|
||||
</div>
|
||||
<MaxWidthWrapper cls="space-y-4">
|
||||
<Card.Root>
|
||||
<Card.Header>
|
||||
<div class="flex items-center justify-between gap-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<Icon icon={Smartphone} cls="h-5 w-5 text-primary" />
|
||||
<Card.Title>Devices</Card.Title>
|
||||
<span class="text-muted-foreground text-xs">
|
||||
{mobileVM.devicesTotal} total
|
||||
</span>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onclick={() => mobileVM.fetchDevices()}
|
||||
disabled={mobileVM.devicesLoading}
|
||||
>
|
||||
<Icon
|
||||
icon={RefreshCw}
|
||||
cls={`h-4 w-4 mr-2 ${mobileVM.devicesLoading ? "animate-spin" : ""}`}
|
||||
/>
|
||||
Refresh
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div class="relative mt-3 max-w-sm">
|
||||
<Icon
|
||||
icon={Search}
|
||||
cls="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground"
|
||||
/>
|
||||
<Input
|
||||
class="pl-10"
|
||||
placeholder="Search device name/id/model..."
|
||||
bind:value={mobileVM.devicesSearch}
|
||||
oninput={() => {
|
||||
mobileVM.devicesPage = 1;
|
||||
mobileVM.fetchDevices();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Card.Header>
|
||||
|
||||
<Card.Content>
|
||||
{#if !mobileVM.devicesLoading && mobileVM.devices.length === 0}
|
||||
<div class="py-10 text-center text-sm text-muted-foreground">
|
||||
No devices registered yet.
|
||||
</div>
|
||||
{:else}
|
||||
<Table.Root>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.Head>Device</Table.Head>
|
||||
<Table.Head>Manufacturer / Model</Table.Head>
|
||||
<Table.Head>Android</Table.Head>
|
||||
<Table.Head>Last Ping</Table.Head>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{#each mobileVM.devices as device (device.id)}
|
||||
<Table.Row
|
||||
class="cursor-pointer"
|
||||
onclick={() => goto(`/devices/${device.id}`)}
|
||||
>
|
||||
<Table.Cell>
|
||||
<div class="font-medium">{device.name}</div>
|
||||
<div class="text-muted-foreground text-xs">
|
||||
{device.externalDeviceId}
|
||||
</div>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
{device.manufacturer} / {device.model}
|
||||
</Table.Cell>
|
||||
<Table.Cell>{device.androidVersion}</Table.Cell>
|
||||
<Table.Cell>
|
||||
{mobileVM.formatLastPing(device.lastPingAt)}
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
{/each}
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
{/if}
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</MaxWidthWrapper>
|
||||
|
||||
8
apps/main/src/routes/(main)/devices/+page.svelte
Normal file
8
apps/main/src/routes/(main)/devices/+page.svelte
Normal file
@@ -0,0 +1,8 @@
|
||||
<script lang="ts">
|
||||
import { goto } from "$app/navigation";
|
||||
import { onMount } from "svelte";
|
||||
|
||||
onMount(() => {
|
||||
goto("/dashboard");
|
||||
});
|
||||
</script>
|
||||
198
apps/main/src/routes/(main)/devices/[deviceId]/+page.svelte
Normal file
198
apps/main/src/routes/(main)/devices/[deviceId]/+page.svelte
Normal file
@@ -0,0 +1,198 @@
|
||||
<script lang="ts">
|
||||
import { page } from "$app/state";
|
||||
import Icon from "$lib/components/atoms/icon.svelte";
|
||||
import { Button } from "$lib/components/ui/button";
|
||||
import * as Card from "$lib/components/ui/card";
|
||||
import * as Table from "$lib/components/ui/table";
|
||||
import * as Tabs from "$lib/components/ui/tabs/index.js";
|
||||
import { mainNavTree } from "$lib/core/constants";
|
||||
import { mobileVM } from "$lib/domains/mobile/mobile.vm.svelte";
|
||||
import { breadcrumbs } from "$lib/global.stores";
|
||||
import ArrowLeft from "@lucide/svelte/icons/arrow-left";
|
||||
import ImageIcon from "@lucide/svelte/icons/image";
|
||||
import MessageSquare from "@lucide/svelte/icons/message-square";
|
||||
import Smartphone from "@lucide/svelte/icons/smartphone";
|
||||
import { onDestroy, onMount } from "svelte";
|
||||
|
||||
let selectedTab = $state("sms");
|
||||
const deviceId = $derived(Number(page.params.deviceId));
|
||||
|
||||
breadcrumbs.set([
|
||||
mainNavTree[0],
|
||||
{ title: "Device Detail", url: page.url.pathname },
|
||||
]);
|
||||
|
||||
onMount(async () => {
|
||||
if (!deviceId || Number.isNaN(deviceId)) {
|
||||
return;
|
||||
}
|
||||
await mobileVM.fetchDeviceDetail(deviceId);
|
||||
await mobileVM.fetchSMS(deviceId);
|
||||
await mobileVM.fetchMedia(deviceId);
|
||||
mobileVM.startSmsPolling(deviceId, 5000);
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
mobileVM.stopSmsPolling();
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm" href="/dashboard">
|
||||
<Icon icon={ArrowLeft} cls="h-4 w-4 mr-1" />
|
||||
Back
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Card.Root>
|
||||
<Card.Header>
|
||||
<div class="flex items-center gap-2">
|
||||
<Icon icon={Smartphone} cls="h-5 w-5 text-primary" />
|
||||
<Card.Title>
|
||||
{mobileVM.selectedDeviceDetail?.device.name || "Device"}
|
||||
</Card.Title>
|
||||
</div>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
{#if mobileVM.selectedDeviceDetail}
|
||||
<div class="grid grid-cols-1 gap-3 text-sm md:grid-cols-2">
|
||||
<div>
|
||||
<span class="text-muted-foreground">External ID:</span>
|
||||
<div class="font-mono">
|
||||
{mobileVM.selectedDeviceDetail.device.externalDeviceId}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-muted-foreground">Last Ping:</span>
|
||||
<div>
|
||||
{mobileVM.formatLastPing(
|
||||
mobileVM.selectedDeviceDetail.device.lastPingAt,
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-muted-foreground">Manufacturer:</span>
|
||||
<div>{mobileVM.selectedDeviceDetail.device.manufacturer}</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-muted-foreground">Model:</span>
|
||||
<div>{mobileVM.selectedDeviceDetail.device.model}</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-muted-foreground">Android:</span>
|
||||
<div>{mobileVM.selectedDeviceDetail.device.androidVersion}</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-muted-foreground">Counts:</span>
|
||||
<div>
|
||||
SMS: {mobileVM.selectedDeviceDetail.smsCount}, Media:
|
||||
{mobileVM.selectedDeviceDetail.mediaCount}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
|
||||
<Tabs.Root bind:value={selectedTab}>
|
||||
<Tabs.List>
|
||||
<Tabs.Trigger value="sms">
|
||||
<Icon icon={MessageSquare} cls="mr-1 h-4 w-4" />
|
||||
SMS
|
||||
</Tabs.Trigger>
|
||||
<Tabs.Trigger value="media">
|
||||
<Icon icon={ImageIcon} cls="mr-1 h-4 w-4" />
|
||||
Media Assets
|
||||
</Tabs.Trigger>
|
||||
</Tabs.List>
|
||||
|
||||
<Tabs.Content value="sms" class="mt-3">
|
||||
<Card.Root>
|
||||
<Card.Header>
|
||||
<Card.Title>SMS</Card.Title>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
{#if !mobileVM.smsLoading && mobileVM.sms.length === 0}
|
||||
<div class="py-8 text-center text-sm text-muted-foreground">
|
||||
No SMS records yet.
|
||||
</div>
|
||||
{:else}
|
||||
<Table.Root>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.Head>From</Table.Head>
|
||||
<Table.Head>To</Table.Head>
|
||||
<Table.Head>Body</Table.Head>
|
||||
<Table.Head>Sent</Table.Head>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{#each mobileVM.sms as message (message.id)}
|
||||
<Table.Row>
|
||||
<Table.Cell>{message.sender}</Table.Cell>
|
||||
<Table.Cell>
|
||||
{message.recipient || "-"}
|
||||
</Table.Cell>
|
||||
<Table.Cell class="max-w-[520px] truncate">
|
||||
{message.body}
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
{new Date(message.sentAt).toLocaleString()}
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
{/each}
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
{/if}
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</Tabs.Content>
|
||||
|
||||
<Tabs.Content value="media" class="mt-3">
|
||||
<Card.Root>
|
||||
<Card.Header>
|
||||
<Card.Title>Media Assets</Card.Title>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
{#if !mobileVM.mediaLoading && mobileVM.media.length === 0}
|
||||
<div class="py-8 text-center text-sm text-muted-foreground">
|
||||
No media assets yet.
|
||||
</div>
|
||||
{:else}
|
||||
<Table.Root>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.Head>Filename</Table.Head>
|
||||
<Table.Head>MIME</Table.Head>
|
||||
<Table.Head>Size</Table.Head>
|
||||
<Table.Head>Captured</Table.Head>
|
||||
<Table.Head>File ID</Table.Head>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{#each mobileVM.media as asset (asset.id)}
|
||||
<Table.Row>
|
||||
<Table.Cell>{asset.filename || "-"}</Table.Cell>
|
||||
<Table.Cell>{asset.mimeType}</Table.Cell>
|
||||
<Table.Cell>
|
||||
{asset.sizeBytes ? `${asset.sizeBytes} B` : "-"}
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
{asset.capturedAt
|
||||
? new Date(asset.capturedAt).toLocaleString()
|
||||
: "-"}
|
||||
</Table.Cell>
|
||||
<Table.Cell class="font-mono text-xs">
|
||||
{asset.fileId}
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
{/each}
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
{/if}
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</Tabs.Content>
|
||||
</Tabs.Root>
|
||||
</div>
|
||||
Reference in New Issue
Block a user