268 lines
14 KiB
Svelte
268 lines
14 KiB
Svelte
<script lang="ts">
|
|
import { goto } from "$app/navigation";
|
|
import Icon from "$lib/components/atoms/icon.svelte";
|
|
import * as AlertDialog from "$lib/components/ui/alert-dialog/index.js";
|
|
import { Button } from "$lib/components/ui/button";
|
|
import { buttonVariants } 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 { filesVM } from "$lib/domains/files/files.vm.svelte";
|
|
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 Trash2 from "@lucide/svelte/icons/trash-2";
|
|
import { onDestroy, onMount } from "svelte";
|
|
|
|
breadcrumbs.set([mainNavTree[0]]);
|
|
|
|
onMount(async () => {
|
|
await mobileVM.refreshDevices();
|
|
mobileVM.startDevicesPolling(5000);
|
|
});
|
|
|
|
onDestroy(() => {
|
|
mobileVM.stopDevicesPolling();
|
|
});
|
|
</script>
|
|
|
|
<MaxWidthWrapper cls="space-y-4">
|
|
<Card.Root>
|
|
<Card.Header>
|
|
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
|
<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>
|
|
<div class="grid grid-cols-2 gap-2 sm:flex sm:items-center">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onclick={() => void filesVM.cleanupDanglingFiles()}
|
|
disabled={filesVM.cleanupLoading}
|
|
class="col-span-1"
|
|
>
|
|
<Icon
|
|
icon={Trash2}
|
|
cls={`h-4 w-4 mr-2 ${filesVM.cleanupLoading ? "animate-spin" : ""}`}
|
|
/>
|
|
<span class="truncate">Cleanup Storage</span>
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onclick={() => void mobileVM.refreshDevices()}
|
|
disabled={mobileVM.devicesLoading}
|
|
class="col-span-1"
|
|
>
|
|
<Icon
|
|
icon={RefreshCw}
|
|
cls={`h-4 w-4 mr-2 ${mobileVM.devicesLoading ? "animate-spin" : ""}`}
|
|
/>
|
|
<span class="hidden sm:inline">Refresh</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative mt-2 w-full sm: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;
|
|
void mobileVM.refreshDevices();
|
|
}}
|
|
/>
|
|
</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}
|
|
<div class="space-y-3 md:hidden">
|
|
{#each mobileVM.devices as device (device.id)}
|
|
<div
|
|
class="rounded-lg border bg-background p-3"
|
|
role="button"
|
|
tabindex="0"
|
|
onclick={() => goto(`/devices/${device.id}`)}
|
|
onkeydown={(e) => {
|
|
if (e.key === "Enter" || e.key === " ") {
|
|
e.preventDefault();
|
|
void goto(`/devices/${device.id}`);
|
|
}
|
|
}}
|
|
>
|
|
<div class="flex items-start justify-between gap-3">
|
|
<div class="min-w-0">
|
|
<p class="truncate text-sm font-medium">{device.name}</p>
|
|
<p class="text-muted-foreground truncate text-xs">
|
|
{device.externalDeviceId}
|
|
</p>
|
|
</div>
|
|
<AlertDialog.Root>
|
|
<AlertDialog.Trigger
|
|
class={buttonVariants({
|
|
variant: "destructive",
|
|
size: "sm",
|
|
})}
|
|
disabled={mobileVM.deletingDeviceId === device.id}
|
|
onclick={(e) => e.stopPropagation()}
|
|
>
|
|
<Icon icon={Trash2} cls="h-4 w-4" />
|
|
</AlertDialog.Trigger>
|
|
<AlertDialog.Content>
|
|
<AlertDialog.Header>
|
|
<AlertDialog.Title>
|
|
Delete device?
|
|
</AlertDialog.Title>
|
|
<AlertDialog.Description>
|
|
This deletes the device and all related SMS/media data.
|
|
Files in storage linked to this device are also removed.
|
|
</AlertDialog.Description>
|
|
</AlertDialog.Header>
|
|
<AlertDialog.Footer>
|
|
<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
|
|
<AlertDialog.Action
|
|
onclick={async (e) => {
|
|
e.stopPropagation();
|
|
await mobileVM.deleteDevice(device.id);
|
|
}}
|
|
>
|
|
Delete
|
|
</AlertDialog.Action>
|
|
</AlertDialog.Footer>
|
|
</AlertDialog.Content>
|
|
</AlertDialog.Root>
|
|
</div>
|
|
|
|
<div class="mt-3 grid grid-cols-2 gap-x-3 gap-y-2 text-xs">
|
|
<div>
|
|
<p class="text-muted-foreground">Manufacturer / Model</p>
|
|
<p class="truncate">{device.manufacturer} / {device.model}</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-muted-foreground">Android</p>
|
|
<p>{device.androidVersion}</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-muted-foreground">Created</p>
|
|
<p class="truncate">
|
|
{new Date(device.createdAt).toLocaleString()}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-muted-foreground">Last Ping</p>
|
|
<p class="truncate">
|
|
{mobileVM.formatLastPing(device.lastPingAt)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
|
|
<div class="hidden md:block">
|
|
<Table.Root>
|
|
<Table.Header>
|
|
<Table.Row>
|
|
<Table.Head>Device</Table.Head>
|
|
<Table.Head>Manufacturer / Model</Table.Head>
|
|
<Table.Head>Android</Table.Head>
|
|
<Table.Head>Created</Table.Head>
|
|
<Table.Head>Last Ping</Table.Head>
|
|
<Table.Head>Actions</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>
|
|
{new Date(device.createdAt).toLocaleString()}
|
|
</Table.Cell>
|
|
<Table.Cell>
|
|
{mobileVM.formatLastPing(device.lastPingAt)}
|
|
</Table.Cell>
|
|
<Table.Cell>
|
|
<AlertDialog.Root>
|
|
<AlertDialog.Trigger
|
|
class={buttonVariants({
|
|
variant: "destructive",
|
|
size: "sm",
|
|
})}
|
|
disabled={mobileVM.deletingDeviceId ===
|
|
device.id}
|
|
onclick={(e) => e.stopPropagation()}
|
|
>
|
|
<Icon
|
|
icon={Trash2}
|
|
cls="h-4 w-4"
|
|
/>
|
|
Delete
|
|
</AlertDialog.Trigger>
|
|
<AlertDialog.Content>
|
|
<AlertDialog.Header>
|
|
<AlertDialog.Title>
|
|
Delete device?
|
|
</AlertDialog.Title>
|
|
<AlertDialog.Description>
|
|
This deletes the device and all related SMS/media data.
|
|
Files in storage linked to this device are also removed.
|
|
</AlertDialog.Description>
|
|
</AlertDialog.Header>
|
|
<AlertDialog.Footer>
|
|
<AlertDialog.Cancel>
|
|
Cancel
|
|
</AlertDialog.Cancel>
|
|
<AlertDialog.Action
|
|
onclick={async (e) => {
|
|
e.stopPropagation();
|
|
await mobileVM.deleteDevice(
|
|
device.id,
|
|
);
|
|
}}
|
|
>
|
|
Delete
|
|
</AlertDialog.Action>
|
|
</AlertDialog.Footer>
|
|
</AlertDialog.Content>
|
|
</AlertDialog.Root>
|
|
</Table.Cell>
|
|
</Table.Row>
|
|
{/each}
|
|
</Table.Body>
|
|
</Table.Root>
|
|
</div>
|
|
{/if}
|
|
</Card.Content>
|
|
</Card.Root>
|
|
</MaxWidthWrapper>
|