96 lines
6.4 KiB
PHP
96 lines
6.4 KiB
PHP
<div>
|
|
<x-topbar :title="__('nav.settings')" :subtitle="__('settings.subtitle')" />
|
|
|
|
<div class="px-5 lg:px-[26px] py-6 flex flex-col gap-5 max-w-[1560px] mx-auto w-full">
|
|
{{-- Device MQTT — the one shared credential every Shelly uses (HA-style) --}}
|
|
<x-panel :title="__('settings.device_mqtt')">
|
|
<p class="text-[12.5px] text-ink-2 mb-4 max-w-3xl">{{ __('settings.device_mqtt_intro') }}</p>
|
|
|
|
@php
|
|
$rows = [
|
|
['label' => __('settings.device_mqtt_server'), 'value' => $deviceMqtt['host'] ?: '⟨'.__('settings.device_mqtt_host_hint').'⟩'],
|
|
['label' => __('settings.device_mqtt_user'), 'value' => $deviceMqtt['username']],
|
|
];
|
|
@endphp
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
|
@foreach ($rows as $row)
|
|
<div x-data="{ copied: false }" class="flex items-center gap-2 rounded-lg border border-line-soft bg-raised px-3 py-2.5">
|
|
<div class="min-w-0">
|
|
<div class="text-[11px] font-semibold text-ink-3">{{ $row['label'] }}</div>
|
|
<div class="text-[13px] font-mono text-ink truncate">{{ $row['value'] }}</div>
|
|
</div>
|
|
<button type="button"
|
|
x-on:click="navigator.clipboard.writeText(@js($row['value'])); copied = true; setTimeout(() => copied = false, 1500)"
|
|
class="ml-auto shrink-0 rounded-md border border-line px-2 py-1 text-[11px] font-semibold text-ink-2 hover:text-ink hover:bg-inset transition-colors">
|
|
<span x-show="!copied">{{ __('settings.device_mqtt_copy') }}</span>
|
|
<span x-show="copied" x-cloak class="text-online">{{ __('settings.device_mqtt_copied') }}</span>
|
|
</button>
|
|
</div>
|
|
@endforeach
|
|
|
|
{{-- password: hidden by default, reveal + copy --}}
|
|
<div x-data="{ show: false, copied: false }" class="sm:col-span-2 flex items-center gap-2 rounded-lg border border-line-soft bg-raised px-3 py-2.5">
|
|
<div class="min-w-0 flex-1">
|
|
<div class="text-[11px] font-semibold text-ink-3">{{ __('settings.device_mqtt_pass') }}</div>
|
|
@if ($deviceMqtt['password'])
|
|
<div class="text-[13px] font-mono text-ink truncate">
|
|
<span x-show="show">{{ $deviceMqtt['password'] }}</span>
|
|
<span x-show="!show">••••••••••••••••</span>
|
|
</div>
|
|
@else
|
|
<div class="text-[12px] text-warning">{{ __('settings.device_mqtt_missing') }}</div>
|
|
@endif
|
|
</div>
|
|
@if ($deviceMqtt['password'])
|
|
<button type="button" x-on:click="show = !show"
|
|
class="shrink-0 rounded-md border border-line px-2 py-1 text-[11px] font-semibold text-ink-2 hover:text-ink hover:bg-inset transition-colors"
|
|
x-text="show ? @js(__('settings.device_mqtt_hide')) : @js(__('settings.device_mqtt_reveal'))"></button>
|
|
<button type="button"
|
|
x-on:click="navigator.clipboard.writeText(@js($deviceMqtt['password'])); copied = true; setTimeout(() => copied = false, 1500)"
|
|
class="shrink-0 rounded-md border border-line px-2 py-1 text-[11px] font-semibold text-ink-2 hover:text-ink hover:bg-inset transition-colors">
|
|
<span x-show="!copied">{{ __('settings.device_mqtt_copy') }}</span>
|
|
<span x-show="copied" x-cloak class="text-online">{{ __('settings.device_mqtt_copied') }}</span>
|
|
</button>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4 pt-4 border-t border-line-soft">
|
|
<h3 class="text-[12px] font-bold text-ink-2 mb-2">{{ __('settings.device_mqtt_steps_title') }}</h3>
|
|
<ol class="flex flex-col gap-1.5 text-[12.5px] text-ink-2 list-decimal list-inside marker:text-ink-3 marker:font-mono">
|
|
<li>{{ __('settings.device_mqtt_step1') }}</li>
|
|
<li>{{ __('settings.device_mqtt_step2') }}</li>
|
|
<li>{{ __('settings.device_mqtt_step3') }}</li>
|
|
<li>{{ __('settings.device_mqtt_step4') }}</li>
|
|
</ol>
|
|
</div>
|
|
</x-panel>
|
|
|
|
<x-panel :title="__('settings.integrations')">
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-3">
|
|
@foreach ($integrations as $i)
|
|
<div class="flex items-center gap-3 rounded-lg border border-line-soft bg-raised p-3">
|
|
<span class="grid place-items-center w-9 h-9 rounded-lg bg-inset text-ink-2 shrink-0"><x-icon :name="$i['icon']" :size="18" /></span>
|
|
<div class="min-w-0">
|
|
<div class="text-[13px] font-semibold text-ink truncate">{{ $i['name'] }}</div>
|
|
<div class="text-[11.5px] text-ink-3 font-mono truncate">{{ $i['detail'] }}</div>
|
|
</div>
|
|
<x-status-pill :state="$i['state'] === 'active' ? 'online' : ($i['state'] === 'inactive' ? 'offline' : 'neutral')" class="ml-auto shrink-0">
|
|
{{ __('settings.state_'.$i['state']) }}
|
|
</x-status-pill>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</x-panel>
|
|
|
|
<x-panel :title="__('settings.system')">
|
|
<dl class="grid grid-cols-2 sm:grid-cols-4 gap-x-4 gap-y-3">
|
|
<x-detail :label="__('host.stack_framework')" mono>Laravel {{ $version }}</x-detail>
|
|
<x-detail :label="__('settings.locale')" mono>{{ strtoupper(app()->getLocale()) }}</x-detail>
|
|
<x-detail :label="__('settings.timezone')" mono>{{ config('app.timezone') }}</x-detail>
|
|
<x-detail :label="__('settings.host')"><a href="{{ route('host') }}" wire:navigate class="text-accent hover:underline">{{ __('nav.host') }}</a></x-detail>
|
|
</dl>
|
|
</x-panel>
|
|
</div>
|
|
</div>
|