mirror of
https://github.com/usetrmnl/byos_laravel.git
synced 2026-01-13 23:18:10 +00:00
feat: added device edit popover
wip
This commit is contained in:
Benjamin Nussbaum
parent
60f8899960
commit
c0fe31da9e
1 changed files with 70 additions and 26 deletions
|
|
@ -6,6 +6,12 @@ new class extends Component {
|
||||||
|
|
||||||
public $device;
|
public $device;
|
||||||
|
|
||||||
|
public $name;
|
||||||
|
public $api_key;
|
||||||
|
public $friendly_id;
|
||||||
|
public $mac_address;
|
||||||
|
public $default_refresh_interval;
|
||||||
|
|
||||||
public function mount(\App\Models\Device $device)
|
public function mount(\App\Models\Device $device)
|
||||||
{
|
{
|
||||||
abort_unless(auth()->user()->devices->contains($device), 403);
|
abort_unless(auth()->user()->devices->contains($device), 403);
|
||||||
|
|
@ -13,7 +19,13 @@ new class extends Component {
|
||||||
$current_image_uuid = $device->current_screen_image;
|
$current_image_uuid = $device->current_screen_image;
|
||||||
$current_image_path = 'images/generated/' . $current_image_uuid . '.png';
|
$current_image_path = 'images/generated/' . $current_image_uuid . '.png';
|
||||||
|
|
||||||
return view('livewire.devices.configure', compact('device'), [
|
$this->name = $device->name;
|
||||||
|
$this->api_key = $device->api_key;
|
||||||
|
$this->friendly_id = $device->friendly_id;
|
||||||
|
$this->mac_address = $device->mac_address;
|
||||||
|
$this->default_refresh_interval = $device->default_refresh_interval;
|
||||||
|
|
||||||
|
return view('livewire.devices.configure', [
|
||||||
'image' => ($current_image_uuid) ? url($current_image_path) : null,
|
'image' => ($current_image_uuid) ? url($current_image_path) : null,
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
|
|
@ -25,13 +37,34 @@ new class extends Component {
|
||||||
|
|
||||||
redirect()->route('devices');
|
redirect()->route('devices');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public function updateDevice()
|
||||||
|
{
|
||||||
|
abort_unless(auth()->user()->devices->contains($this->device), 403);
|
||||||
|
|
||||||
|
$this->validate([
|
||||||
|
'name' => 'required|string|max:255',
|
||||||
|
'friendly_id' => 'required|string|max:255',
|
||||||
|
'mac_address' => 'required|string|max:255',
|
||||||
|
'default_refresh_interval' => 'required|integer|min:1',
|
||||||
|
]);
|
||||||
|
|
||||||
|
$this->device->update([
|
||||||
|
'name' => $this->name,
|
||||||
|
'friendly_id' => $this->friendly_id,
|
||||||
|
'mac_address' => $this->mac_address,
|
||||||
|
'default_refresh_interval' => $this->default_refresh_interval,
|
||||||
|
]);
|
||||||
|
|
||||||
|
Flux::modal('edit-device')->close();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<div class="bg-muted flex flex-col items-center justify-center gap-6 p-6 md:p-10">
|
<div class="bg-muted flex flex-col items-center justify-center gap-6 p-6 md:p-10">
|
||||||
<div class="flex flex-col gap-6">
|
<div class="flex flex-col gap-6">
|
||||||
<div
|
<div
|
||||||
class="rounded-xl border bg-white dark:bg-stone-950 dark:border-stone-800 text-stone-800 shadow-xs">
|
class="rounded-xl border bg-white dark:bg-stone-950 dark:border-stone-800 text-stone-800 shadow-xs">
|
||||||
<div class="px-10 py-8 min-w-lg">
|
<div class="px-10 py-8 min-w-lg">
|
||||||
@php
|
@php
|
||||||
$current_image_uuid =$device->current_screen_image;
|
$current_image_uuid =$device->current_screen_image;
|
||||||
|
|
@ -43,14 +76,6 @@ new class extends Component {
|
||||||
<flux:tooltip content="Friendly ID: {{$device->friendly_id}}" position="bottom">
|
<flux:tooltip content="Friendly ID: {{$device->friendly_id}}" position="bottom">
|
||||||
<h1 class="text-xl font-medium dark:text-zinc-200">{{ $device->name }}</h1>
|
<h1 class="text-xl font-medium dark:text-zinc-200">{{ $device->name }}</h1>
|
||||||
</flux:tooltip>
|
</flux:tooltip>
|
||||||
<div>
|
|
||||||
<flux:modal.trigger name="edit-device">
|
|
||||||
<flux:button icon="key" variant="subtle"/>
|
|
||||||
</flux:modal.trigger>
|
|
||||||
<flux:modal.trigger name="delete-device">
|
|
||||||
<flux:button icon="trash" variant="danger"/>
|
|
||||||
</flux:modal.trigger>
|
|
||||||
</div>
|
|
||||||
<div class="flex gap-2">
|
<div class="flex gap-2">
|
||||||
<flux:tooltip content="Last update" position="bottom">
|
<flux:tooltip content="Last update" position="bottom">
|
||||||
<span class="dark:text-zinc-200">{{$device->updated_at->diffForHumans()}}</span>
|
<span class="dark:text-zinc-200">{{$device->updated_at->diffForHumans()}}</span>
|
||||||
|
|
@ -59,15 +84,29 @@ new class extends Component {
|
||||||
<flux:tooltip content="MAC Address" position="bottom">
|
<flux:tooltip content="MAC Address" position="bottom">
|
||||||
<span class="dark:text-zinc-200">{{$device->mac_address}}</span>
|
<span class="dark:text-zinc-200">{{$device->mac_address}}</span>
|
||||||
</flux:tooltip>
|
</flux:tooltip>
|
||||||
<flux:separator vertical/>
|
@if($device->last_firmware_version)
|
||||||
<flux:tooltip content="Firmware Version" position="bottom">
|
<flux:separator vertical/>
|
||||||
<span class="dark:text-zinc-200">{{$device->last_firmware_version}}</span>
|
<flux:tooltip content="Firmware Version" position="bottom">
|
||||||
</flux:tooltip>
|
<span class="dark:text-zinc-200">{{$device->last_firmware_version}}</span>
|
||||||
<flux:separator vertical/>
|
</flux:tooltip>
|
||||||
<x-responsive-icons.wifi :strength="$device->wifiStrengh" :rssi="$device->last_rssi_level"
|
@endif
|
||||||
class="dark:text-zinc-200"/>
|
@if($device->wifiStrengh)
|
||||||
<flux:separator vertical/>
|
<flux:separator vertical/>
|
||||||
<x-responsive-icons.battery :percent="$device->batteryPercent"/>
|
<x-responsive-icons.wifi :strength="$device->wifiStrengh" :rssi="$device->last_rssi_level"
|
||||||
|
class="dark:text-zinc-200"/>
|
||||||
|
@endif
|
||||||
|
@if($device->batteryPercent)
|
||||||
|
<flux:separator vertical/>
|
||||||
|
<x-responsive-icons.battery :percent="$device->batteryPercent"/>
|
||||||
|
@endif
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<flux:modal.trigger name="edit-device">
|
||||||
|
<flux:button icon="pencil-square" variant="subtle"/>
|
||||||
|
</flux:modal.trigger>
|
||||||
|
<flux:modal.trigger name="delete-device">
|
||||||
|
<flux:button icon="trash" variant="danger"/>
|
||||||
|
</flux:modal.trigger>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -75,20 +114,24 @@ new class extends Component {
|
||||||
<flux:modal name="edit-device" class="md:w-96">
|
<flux:modal name="edit-device" class="md:w-96">
|
||||||
<div class="space-y-6">
|
<div class="space-y-6">
|
||||||
<div>
|
<div>
|
||||||
{{-- <flux:heading size="lg">Edit TRMNL</flux:heading>--}}
|
<flux:heading size="lg">Edit TRMNL</flux:heading>
|
||||||
{{-- <flux:subheading></flux:subheading>--}}
|
<flux:subheading></flux:subheading>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- @dump($device) -->
|
||||||
{{-- <flux:input label="Name" value="{{ $device->name }}"/>--}}
|
<flux:input label="Name" wire:model="name"/>
|
||||||
|
|
||||||
<flux:input label="API Key" icon="key" value="{{ $device->api_key }}" type="password"
|
<flux:input label="API Key" icon="key" value="{{ $device->api_key }}" type="password"
|
||||||
viewable class="max-w-xs"/>
|
viewable class="max-w-xs" readonly/>
|
||||||
|
|
||||||
|
<flux:input label="Friendly ID" wire:model="friendly_id"/>
|
||||||
|
<flux:input label="MAC Address" wire:model="mac_address"/>
|
||||||
|
<flux:input label="Default Refresh Interval" wire:model="default_refresh_interval"/>
|
||||||
|
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<flux:spacer/>
|
<flux:spacer/>
|
||||||
|
|
||||||
{{-- <flux:button type="submit" variant="primary">Save changes</flux:button>--}}
|
<flux:button type="submit" wire:click="updateDevice" variant="primary">Save changes
|
||||||
|
</flux:button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</flux:modal>
|
</flux:modal>
|
||||||
|
|
@ -104,7 +147,8 @@ new class extends Component {
|
||||||
<flux:modal.close>
|
<flux:modal.close>
|
||||||
<flux:button variant="ghost">Cancel</flux:button>
|
<flux:button variant="ghost">Cancel</flux:button>
|
||||||
</flux:modal.close>
|
</flux:modal.close>
|
||||||
<flux:button wire:click="deleteDevice({{ $device->id }})" variant="danger">Delete device</flux:button>
|
<flux:button wire:click="deleteDevice({{ $device->id }})" variant="danger">Delete device
|
||||||
|
</flux:button>
|
||||||
</div>
|
</div>
|
||||||
</flux:modal>
|
</flux:modal>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue