homeos/resources/views/livewire/modals/create-automation.blade.php

110 lines
7.8 KiB
PHP

<form wire:submit="save">
<x-modal :title="__('automations.add_title')" icon="automation">
<div class="p-5 grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="flex flex-col gap-1.5 sm:col-span-2">
<label for="a-name" class="text-[12px] font-semibold text-ink-2">{{ __('automations.name') }}</label>
<input wire:model="name" id="a-name" type="text" autofocus
class="w-full rounded-lg bg-raised border border-line px-3 py-2.5 text-sm text-ink outline-none focus:border-accent focus:ring-1 focus:ring-accent">
@error('name') <p class="text-[12px] text-offline">{{ $message }}</p> @enderror
</div>
{{-- Trigger --}}
<fieldset class="flex flex-col gap-3 rounded-xl border border-line-soft p-3.5">
<legend class="px-1.5 text-[11px] font-bold uppercase tracking-wide text-ink-3">{{ __('automations.trigger') }}</legend>
<select wire:model.live="triggerType" class="w-full rounded-lg bg-raised border border-line px-3 py-2.5 text-sm text-ink outline-none focus:border-accent">
<option value="state_change">{{ __('automations.trigger_state_change') }}</option>
<option value="time">{{ __('automations.trigger_time') }}</option>
</select>
@if ($triggerType === 'state_change')
<div class="flex flex-col gap-1.5">
<label for="a-tent" class="text-[12px] font-semibold text-ink-2">{{ __('automations.trigger_entity') }}</label>
<select wire:model="triggerEntity" id="a-tent" class="w-full rounded-lg bg-raised border border-line px-3 py-2.5 text-sm text-ink outline-none focus:border-accent">
<option value=""></option>
@foreach ($this->entityOptions as $o)
<option value="{{ $o['value'] }}">{{ $o['label'] }}</option>
@endforeach
</select>
@error('triggerEntity') <p class="text-[12px] text-offline">{{ $message }}</p> @enderror
</div>
<div class="flex flex-col gap-1.5">
<label for="a-teq" class="text-[12px] font-semibold text-ink-2">{{ __('automations.trigger_equals') }}</label>
<select wire:model="triggerEquals" id="a-teq" class="w-full rounded-lg bg-raised border border-line px-3 py-2.5 text-sm text-ink outline-none focus:border-accent">
<option value="1">{{ __('automations.state_on') }}</option>
<option value="0">{{ __('automations.state_off') }}</option>
</select>
</div>
@else
<div class="flex flex-col gap-1.5">
<label for="a-at" class="text-[12px] font-semibold text-ink-2">{{ __('automations.trigger_at') }}</label>
<input wire:model="triggerAt" id="a-at" type="time"
class="w-full rounded-lg bg-raised border border-line px-3 py-2.5 text-sm text-ink outline-none focus:border-accent focus:ring-1 focus:ring-accent">
@error('triggerAt') <p class="text-[12px] text-offline">{{ $message }}</p> @enderror
</div>
@endif
</fieldset>
{{-- Action --}}
<fieldset class="flex flex-col gap-3 rounded-xl border border-line-soft p-3.5">
<legend class="px-1.5 text-[11px] font-bold uppercase tracking-wide text-ink-3">{{ __('automations.action') }}</legend>
<select wire:model.live="actionType" class="w-full rounded-lg bg-raised border border-line px-3 py-2.5 text-sm text-ink outline-none focus:border-accent">
<option value="switch">{{ __('automations.action_switch') }}</option>
<option value="notify">{{ __('automations.action_notify') }}</option>
</select>
@if ($actionType === 'switch')
<div class="flex flex-col gap-1.5">
<label for="a-aent" class="text-[12px] font-semibold text-ink-2">{{ __('automations.action_entity') }}</label>
<select wire:model="actionEntity" id="a-aent" class="w-full rounded-lg bg-raised border border-line px-3 py-2.5 text-sm text-ink outline-none focus:border-accent">
<option value=""></option>
@foreach ($this->entityOptions as $o)
@if ($o['controllable'])
<option value="{{ $o['value'] }}">{{ $o['label'] }}</option>
@endif
@endforeach
</select>
@error('actionEntity') <p class="text-[12px] text-offline">{{ $message }}</p> @enderror
</div>
<div class="flex flex-col gap-1.5">
<label for="a-aon" class="text-[12px] font-semibold text-ink-2">{{ __('automations.action_on') }}</label>
<select wire:model="actionOn" id="a-aon" class="w-full rounded-lg bg-raised border border-line px-3 py-2.5 text-sm text-ink outline-none focus:border-accent">
<option value="1">{{ __('automations.state_on') }}</option>
<option value="0">{{ __('automations.state_off') }}</option>
</select>
</div>
@else
<div class="flex flex-col gap-1.5">
<label for="a-msg" class="text-[12px] font-semibold text-ink-2">{{ __('automations.message') }}</label>
<input wire:model="actionMessage" id="a-msg" type="text"
class="w-full rounded-lg bg-raised border border-line px-3 py-2.5 text-sm text-ink outline-none focus:border-accent focus:ring-1 focus:ring-accent">
@error('actionMessage') <p class="text-[12px] text-offline">{{ $message }}</p> @enderror
</div>
@endif
</fieldset>
<div class="flex flex-col gap-1.5">
<label for="a-cd" class="text-[12px] font-semibold text-ink-2">{{ __('automations.cooldown') }}</label>
<input wire:model="cooldownSeconds" id="a-cd" type="number" min="0" max="86400"
class="w-full rounded-lg bg-raised border border-line px-3 py-2.5 text-sm text-ink outline-none focus:border-accent focus:ring-1 focus:ring-accent">
<p class="text-[11.5px] text-ink-3">{{ __('automations.cooldown_hint') }}</p>
@error('cooldownSeconds') <p class="text-[12px] text-offline">{{ $message }}</p> @enderror
</div>
<label class="flex items-start gap-3 cursor-pointer self-end pb-1">
<input wire:model="dryRun" type="checkbox" class="checkbox mt-0.5">
<span class="flex flex-col">
<span class="text-[13px] font-semibold text-ink">{{ __('automations.dry_run') }}</span>
<span class="text-[11.5px] text-ink-3">{{ __('automations.dry_run_hint') }}</span>
</span>
</label>
</div>
<x-slot:footer>
<button type="button" wire:click="closeModal" class="rounded-lg border border-line px-3.5 py-2 text-[13px] font-semibold text-ink-2 hover:text-ink hover:bg-raised transition-colors">{{ __('common.cancel') }}</button>
<button type="submit" class="rounded-lg bg-accent px-3.5 py-2 text-[13px] font-bold text-base hover:brightness-110 transition-[filter]">{{ __('automations.add') }}</button>
</x-slot:footer>
</x-modal>
</form>