1282 lines
103 KiB
PHP
1282 lines
103 KiB
PHP
@extends('layouts.admin')
|
|
|
|
@section('content')
|
|
<div class="space-y-2 pb-20" x-data="discordNotificationApp()">
|
|
<!-- Header -->
|
|
<x-page-header
|
|
:title="__('Discord Notifications')"
|
|
:subtitle="__('Configure Discord Webhook alerts for hardware exceptions and connectivity logs')"
|
|
/>
|
|
|
|
<!-- Tab Selection -->
|
|
<x-tab-nav model="activeTab">
|
|
<x-tab-nav-item value="company" :label="__('Company Settings')" />
|
|
<x-tab-nav-item value="machine" :label="__('Machine Settings')" />
|
|
</x-tab-nav>
|
|
|
|
<!-- Main Container -->
|
|
<div id="ajax-discord-container" class="relative mt-6">
|
|
<x-luxury-spinner show="isLoadingTable" />
|
|
|
|
<div :class="{ 'opacity-30 pointer-events-none': isLoadingTable }"
|
|
@ajax:navigate:discord.prevent="fetchTabContent($event.detail.url, 'ajax-discord-container')">
|
|
|
|
<!-- ================= Tab 1: 公司全域設定 ================= -->
|
|
<div x-show="activeTab === 'company'" class="luxury-card rounded-3xl p-8 animate-luxury-in relative overflow-hidden" x-cloak>
|
|
<!-- 霓虹光斑裝飾 -->
|
|
<div class="absolute -top-40 -right-40 w-80 h-80 bg-cyan-500/5 rounded-full blur-[100px] pointer-events-none"></div>
|
|
|
|
@if(auth()->user()->isSystemAdmin())
|
|
<form action="{{ route('admin.basic-settings.discord-notifications.index') }}" method="GET"
|
|
class="flex flex-col md:flex-row md:items-center gap-3 mb-8 relative z-10"
|
|
@submit.prevent="fetchTabContent($el.action + '?' + new URLSearchParams(new FormData($el)).toString() + '&tab=company', 'ajax-discord-container')">
|
|
<input type="hidden" name="tab" value="company">
|
|
<div class="relative group flex-1 md:flex-none">
|
|
<span class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none z-10">
|
|
<svg class="h-4 w-4 text-slate-400 group-focus-within:text-cyan-500 transition-colors" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
|
</span>
|
|
<input type="text" name="search_company" value="{{ request('search_company') }}"
|
|
class="py-2.5 pl-12 pr-6 block w-full md:w-80 luxury-input"
|
|
placeholder="{{ __('Search company name or code...') }}">
|
|
</div>
|
|
<div class="flex items-center gap-2 shrink-0">
|
|
<button type="submit" class="p-2.5 rounded-xl bg-cyan-500 text-white hover:bg-cyan-600 shadow-lg shadow-cyan-500/25 transition-all" title="{{ __('Search') }}">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
|
|
</button>
|
|
<button type="button"
|
|
@click="$el.closest('form').querySelector('input[name=search_company]').value=''; $el.closest('form').dispatchEvent(new Event('submit'));"
|
|
class="p-2.5 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-all" title="{{ __('Reset') }}">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
@endif
|
|
|
|
{{-- 桌面版表格 --}}
|
|
<div class="hidden xl:block overflow-x-auto {{ !auth()->user()->isSystemAdmin() ? 'mt-6' : '' }}">
|
|
<table class="w-full text-left border-separate border-spacing-y-0">
|
|
<thead>
|
|
<tr class="bg-slate-50/50 dark:bg-slate-900/10">
|
|
<th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">{{ __('Company Info') }}</th>
|
|
<th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">{{ __('Webhook URL') }}</th>
|
|
<th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-center">{{ __('Push Status') }}</th>
|
|
<th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">{{ __('Configured Alert Types') }}</th>
|
|
<th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-right">{{ __('Actions') }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-slate-50 dark:divide-slate-800/80">
|
|
@forelse($companies as $company)
|
|
@php
|
|
$settings = $company->settings ?? [];
|
|
$isEnabled = (bool)($settings['discord_notify_enabled'] ?? false);
|
|
$webhook = $settings['discord_webhook_url'] ?? '';
|
|
$types = $settings['discord_notify_types'] ?? [];
|
|
@endphp
|
|
<tr class="group hover:bg-slate-50/50 dark:hover:bg-white/[0.02] transition-colors duration-200">
|
|
<td class="px-6 py-6">
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-10 h-10 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 border border-slate-200 dark:border-slate-700 group-hover:bg-cyan-500 group-hover:text-white transition-all duration-300 overflow-hidden shadow-sm shrink-0">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
|
|
</div>
|
|
<div class="min-w-0">
|
|
<p class="text-base font-extrabold text-slate-800 dark:text-slate-100 group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors tracking-tight truncate">{{ $company->name }}</p>
|
|
<p class="text-xs font-mono font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest">{{ $company->code }}</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-6 max-w-xs">
|
|
@if($webhook)
|
|
<span class="text-xs font-mono font-bold text-slate-500 dark:text-slate-400 tracking-tight block truncate" title="{{ $webhook }}">{{ Str::limit($webhook, 40) }}</span>
|
|
@else
|
|
<span class="text-xs font-bold text-slate-300 dark:text-slate-600">{{ __('Not Configured') }}</span>
|
|
@endif
|
|
</td>
|
|
<td class="px-6 py-6 text-center">
|
|
<x-status-badge :status="$isEnabled ? 'active' : 'disabled'" size="sm" />
|
|
</td>
|
|
<td class="px-6 py-6">
|
|
<div class="flex flex-wrap gap-1.5">
|
|
@if(empty($types))
|
|
<span class="text-xs font-bold text-slate-300 dark:text-slate-600">—</span>
|
|
@endif
|
|
|
|
@foreach($types as $type)
|
|
@php
|
|
$label = match($type) {
|
|
'submachine' => __('Device Exception'),
|
|
'status' => __('Connectivity Logs'),
|
|
'temperature' => __('Temperature Alert'),
|
|
default => $type
|
|
};
|
|
@endphp
|
|
<span class="px-2.5 py-1 rounded-full text-xs font-black uppercase tracking-widest bg-cyan-500/10 text-cyan-600 dark:text-cyan-400 border border-cyan-500/20">
|
|
{{ $label }}
|
|
</span>
|
|
@endforeach
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-6 text-right">
|
|
<button type="button" @click="openCompanyEdit(@js($company))"
|
|
class="p-2 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 transition-all border border-transparent hover:border-cyan-500/20 tooltip" title="{{ __('Edit Settings') }}">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"/></svg>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<x-empty-state mode="table" :colspan="5" :message="__('No records found')" />
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{{-- 行動版/平版 Card 列表 --}}
|
|
<div class="xl:hidden grid grid-cols-1 md:grid-cols-2 gap-6 {{ !auth()->user()->isSystemAdmin() ? 'mt-6' : '' }}">
|
|
@forelse($companies as $company)
|
|
@php
|
|
$settings = $company->settings ?? [];
|
|
$isEnabled = (bool)($settings['discord_notify_enabled'] ?? false);
|
|
$webhook = $settings['discord_webhook_url'] ?? '';
|
|
$types = $settings['discord_notify_types'] ?? [];
|
|
@endphp
|
|
<div class="luxury-card p-6 rounded-[2rem] border border-slate-100 dark:border-slate-800 bg-white/50 dark:bg-slate-900/50 transition-all duration-300 group">
|
|
<div class="flex items-start justify-between gap-4 mb-6">
|
|
<div class="flex items-center gap-4 min-w-0">
|
|
<div class="w-14 h-14 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 border border-slate-200 dark:border-slate-700 group-hover:bg-cyan-500 group-hover:text-white transition-all duration-300 overflow-hidden shadow-sm shrink-0">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
|
|
</div>
|
|
<div class="min-w-0">
|
|
<h3 class="text-base font-extrabold text-slate-800 dark:text-slate-100 truncate group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors tracking-tight">{{ $company->name }}</h3>
|
|
<p class="text-xs font-mono font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest truncate">{{ $company->code }}</p>
|
|
</div>
|
|
</div>
|
|
<x-status-badge :status="$isEnabled ? 'active' : 'disabled'" size="sm" />
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-y-4 mb-6 border-y border-slate-100 dark:border-slate-800/50 py-4">
|
|
<div class="col-span-2">
|
|
<p class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1">{{ __('Webhook URL') }}</p>
|
|
@if($webhook)
|
|
<p class="text-xs font-mono font-bold text-slate-600 dark:text-slate-300 break-all leading-normal">{{ $webhook }}</p>
|
|
@else
|
|
<p class="text-xs font-bold text-slate-300 dark:text-slate-600">{{ __('Not Configured') }}</p>
|
|
@endif
|
|
</div>
|
|
<div class="col-span-2">
|
|
<p class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1">{{ __('Configured Alert Types') }}</p>
|
|
<div class="flex flex-wrap gap-1.5 mt-1">
|
|
@if(empty($types))
|
|
<span class="text-xs font-bold text-slate-300 dark:text-slate-600">—</span>
|
|
@endif
|
|
|
|
@foreach($types as $type)
|
|
@php
|
|
$label = match($type) {
|
|
'submachine' => __('Device Exception'),
|
|
'status' => __('Connectivity Logs'),
|
|
'temperature' => __('Temperature Alert'),
|
|
default => $type
|
|
};
|
|
@endphp
|
|
<span class="px-2.5 py-1 rounded-full text-xs font-black uppercase tracking-widest bg-cyan-500/10 text-cyan-600 dark:text-cyan-400 border border-cyan-500/20">
|
|
{{ $label }}
|
|
</span>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-3">
|
|
<button type="button" @click="openCompanyEdit(@js($company))"
|
|
class="flex-1 flex items-center justify-center gap-2 py-3 rounded-xl bg-slate-50 dark:bg-slate-800 text-slate-500 dark:text-slate-400 font-bold text-xs hover:bg-cyan-500 hover:text-white transition-all duration-300 border border-slate-200/50 dark:border-slate-700/50">
|
|
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"/></svg>
|
|
{{ __('Edit Settings') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<x-empty-state :message="__('No records found')" />
|
|
@endforelse
|
|
</div>
|
|
|
|
{{-- 分頁 --}}
|
|
<div class="mt-8 border-t border-slate-100/50 dark:border-slate-800/50 pt-6">
|
|
{{ $companies->appends(array_merge(request()->query(), ['tab' => 'company']))->links('vendor.pagination.luxury', [
|
|
'ajax_navigate_event' => 'ajax:navigate:discord',
|
|
'per_page_param' => 'company_per_page',
|
|
]) }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ================= Tab 2: 機台個別設定 ================= -->
|
|
<div x-show="activeTab === 'machine'" class="luxury-card rounded-3xl p-8 animate-luxury-in relative overflow-hidden" x-cloak>
|
|
<!-- 霓虹光斑裝飾 -->
|
|
<div class="absolute -top-40 -right-40 w-80 h-80 bg-cyan-500/5 rounded-full blur-[100px] pointer-events-none"></div>
|
|
|
|
<!-- 搜尋與篩選列 -->
|
|
<form action="{{ route('admin.basic-settings.discord-notifications.index') }}" method="GET"
|
|
class="flex flex-col md:flex-row md:items-center gap-3 mb-8 relative z-10"
|
|
@submit.prevent="fetchTabContent($el.action + '?' + new URLSearchParams(new FormData($el)).toString() + '&tab=machine', 'ajax-discord-container')">
|
|
<input type="hidden" name="tab" value="machine">
|
|
|
|
<!-- 關鍵字 -->
|
|
<div class="relative group flex-1 md:flex-none">
|
|
<span class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none z-10">
|
|
<svg class="h-4 w-4 text-slate-400 group-focus-within:text-cyan-500 transition-colors" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
|
</span>
|
|
<input type="text" name="search_machine" value="{{ request('search_machine') }}"
|
|
class="py-2.5 pl-12 pr-6 block w-full md:w-80 luxury-input"
|
|
placeholder="{{ __('Search machine name or SN...') }}">
|
|
</div>
|
|
|
|
<!-- 公司篩選下拉選單 (僅 System Admin 可見) -->
|
|
@if(auth()->user()->isSystemAdmin())
|
|
<div class="w-full md:w-64 relative focus-within:z-[20]">
|
|
<x-searchable-select name="filter_company_id" :placeholder="__('All Companies')" :selected="request('filter_company_id')">
|
|
@foreach($allCompanies as $c)
|
|
<option value="{{ $c->id }}" data-title="{{ $c->name }}">{{ $c->name }}</option>
|
|
@endforeach
|
|
</x-searchable-select>
|
|
</div>
|
|
@endif
|
|
|
|
<div class="flex items-center gap-2 shrink-0">
|
|
<button type="submit" class="p-2.5 rounded-xl bg-cyan-500 text-white hover:bg-cyan-600 shadow-lg shadow-cyan-500/25 transition-all" title="{{ __('Search') }}">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
|
|
</button>
|
|
<button type="button"
|
|
@click="$el.closest('form').querySelector('input[name=search_machine]').value=''; @if(auth()->user()->isSystemAdmin()) $el.closest('form').querySelector('select[name=filter_company_id]').value=''; @endif $el.closest('form').dispatchEvent(new Event('submit'));"
|
|
class="p-2.5 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-all" title="{{ __('Reset') }}">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
{{-- 桌面版表格 --}}
|
|
<div class="hidden xl:block overflow-x-auto">
|
|
<table class="w-full text-left border-separate border-spacing-y-0">
|
|
<thead>
|
|
<tr class="bg-slate-50/50 dark:bg-slate-900/10">
|
|
<th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">{{ __('Machine Info') }}</th>
|
|
<th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">{{ __('Model') }}</th>
|
|
@if(auth()->user()->isSystemAdmin())
|
|
<th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">{{ __('Company') }}</th>
|
|
@endif
|
|
<th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">{{ __('Webhook Status') }}</th>
|
|
<th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">{{ __('Configured Alert Types') }}</th>
|
|
<th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">{{ __('Temp Alert Range') }}</th>
|
|
<th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-right">{{ __('Actions') }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-slate-50 dark:divide-slate-800/80">
|
|
@forelse($machines as $machine)
|
|
@php
|
|
$mSettings = $machine->settings ?? [];
|
|
$mWebhook = $mSettings['discord_webhook_url'] ?? null;
|
|
$cSettings = $machine->company->settings ?? [];
|
|
$cWebhook = $cSettings['discord_webhook_url'] ?? null;
|
|
$cNotifyTypes = $cSettings['discord_notify_types'] ?? [];
|
|
$mNotifyTypes = array_key_exists('discord_notify_types', $mSettings) && is_array($mSettings['discord_notify_types']) ? $mSettings['discord_notify_types'] : null;
|
|
$effectiveNotifyTypes = $mNotifyTypes ?? $cNotifyTypes;
|
|
$isTypeInherited = $mNotifyTypes === null;
|
|
$hasTemperatureNotify = in_array('temperature', $effectiveNotifyTypes, true);
|
|
|
|
$mTempAlert = $mSettings['temp_alert_enabled'] ?? 'inherit';
|
|
|
|
// 繼承鏈判定
|
|
$mUpper = $mSettings['temp_upper_limit'] ?? null;
|
|
$mLower = $mSettings['temp_lower_limit'] ?? null;
|
|
|
|
$modelSettings = $machine->machineModel->settings ?? [];
|
|
$modelUpper = $modelSettings['temp_upper_limit'] ?? null;
|
|
$modelLower = $modelSettings['temp_lower_limit'] ?? null;
|
|
|
|
$sysUpper = 40.0;
|
|
$sysLower = 0.0;
|
|
|
|
$finalUpper = $sysUpper;
|
|
$finalLower = $sysLower;
|
|
$tempSource = __('System Default');
|
|
|
|
if ($mTempAlert === 'enabled' && $hasTemperatureNotify && ($mUpper !== null || $mLower !== null)) {
|
|
$finalUpper = $mUpper !== null ? $mUpper : $sysUpper;
|
|
$finalLower = $mLower !== null ? $mLower : $sysLower;
|
|
$tempSource = __('Custom');
|
|
} elseif ($hasTemperatureNotify && ($modelUpper !== null || $modelLower !== null)) {
|
|
$finalUpper = $modelUpper !== null ? $modelUpper : $sysUpper;
|
|
$finalLower = $modelLower !== null ? $modelLower : $sysLower;
|
|
$tempSource = __('Model Default');
|
|
}
|
|
@endphp
|
|
<tr class="group hover:bg-slate-50/50 dark:hover:bg-white/[0.02] transition-colors duration-200">
|
|
<td class="px-6 py-6">
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-10 h-10 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 border border-slate-200 dark:border-slate-700 group-hover:bg-cyan-500 group-hover:text-white transition-all duration-300 overflow-hidden shadow-sm shrink-0">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
|
|
</div>
|
|
<div class="min-w-0">
|
|
<p class="text-base font-extrabold text-slate-800 dark:text-slate-100 group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors tracking-tight truncate">{{ $machine->name }}</p>
|
|
<p class="text-xs font-mono font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest">{{ $machine->serial_no }}</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-6">
|
|
<span class="text-sm font-bold text-slate-700 dark:text-slate-300">
|
|
{{ $machine->machineModel->name ?? __('No Model') }}
|
|
</span>
|
|
</td>
|
|
@if(auth()->user()->isSystemAdmin())
|
|
<td class="px-6 py-6">
|
|
<span class="text-sm font-bold text-slate-600 dark:text-slate-400">
|
|
{{ $machine->company->name ?? __('No Company') }}
|
|
</span>
|
|
</td>
|
|
@endif
|
|
<td class="px-6 py-6 max-w-xs">
|
|
@if($mWebhook)
|
|
<span class="text-xs font-mono font-bold text-slate-855 dark:text-slate-200 block truncate" title="{{ $mWebhook }}">{{ Str::limit($mWebhook, 30) }}</span>
|
|
<span class="px-2 py-0.5 rounded text-[9px] font-black uppercase tracking-widest bg-cyan-500/10 text-cyan-600 dark:text-cyan-400 border border-cyan-500/20 mt-1 inline-block">{{ __('Machine Specific') }}</span>
|
|
@elseif($cWebhook)
|
|
<span class="text-xs font-mono font-bold text-slate-400 dark:text-slate-500 block truncate" title="{{ $cWebhook }}">{{ Str::limit($cWebhook, 30) }}</span>
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-black uppercase tracking-widest bg-slate-100 dark:bg-slate-800 text-slate-500 border border-slate-200 dark:border-slate-700 mt-1 inline-block">{{ __('Inherit Company') }}</span>
|
|
@else
|
|
<span class="text-xs font-bold text-slate-300 dark:text-slate-600">{{ __('Not Configured') }}</span>
|
|
@endif
|
|
</td>
|
|
<td class="px-6 py-6">
|
|
<div class="space-y-1.5">
|
|
@if($isTypeInherited && !empty($effectiveNotifyTypes))
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-black uppercase tracking-widest bg-slate-100 dark:bg-slate-800 text-slate-500 border border-slate-200 dark:border-slate-700 inline-block">{{ __('Inherit Company') }}</span>
|
|
@endif
|
|
<div class="flex flex-wrap gap-1.5">
|
|
@foreach($effectiveNotifyTypes as $type)
|
|
@php
|
|
$label = match($type) {
|
|
'submachine' => __('Device Exception'),
|
|
'status' => __('Connectivity Logs'),
|
|
'temperature' => __('Temperature Alert'),
|
|
default => $type
|
|
};
|
|
@endphp
|
|
<span class="px-2.5 py-1 rounded-full text-xs font-black uppercase tracking-widest whitespace-nowrap bg-cyan-500/10 text-cyan-600 dark:text-cyan-400 border border-cyan-500/20">{{ $label }}</span>
|
|
@endforeach
|
|
@if(empty($effectiveNotifyTypes))
|
|
<span class="text-xs font-bold text-slate-300 dark:text-slate-600">{{ __('Not Configured') }}</span>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-6">
|
|
@if($mTempAlert !== 'disabled' && $hasTemperatureNotify)
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="px-2.5 py-1 rounded-full text-xs font-mono font-black bg-cyan-500/10 text-cyan-600 dark:text-cyan-400 border border-cyan-500/20 whitespace-nowrap">
|
|
{{ number_format($finalLower, 0) }}°C ~ {{ number_format($finalUpper, 0) }}°C
|
|
</span>
|
|
<span class="text-[11px] font-bold text-slate-400 dark:text-slate-500" title="{{ __('Source of temperature limit settings') }}">
|
|
({{ $tempSource }})
|
|
</span>
|
|
</div>
|
|
@else
|
|
<span class="text-xs font-bold text-slate-300 dark:text-slate-600">—</span>
|
|
@endif
|
|
</td>
|
|
<td class="px-6 py-6 text-right">
|
|
<button type="button" @click="openMachineEdit(@js($machine))"
|
|
class="p-2 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 transition-all border border-transparent hover:border-cyan-500/20 tooltip" title="{{ __('Edit Settings') }}">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"/></svg>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<x-empty-state mode="table" :colspan="7" :message="__('No records found')" />
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{{-- 行動版/平版 Card 列表 --}}
|
|
<div class="xl:hidden grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
@forelse($machines as $machine)
|
|
@php
|
|
$mSettings = $machine->settings ?? [];
|
|
$mWebhook = $mSettings['discord_webhook_url'] ?? null;
|
|
$cSettings = $machine->company->settings ?? [];
|
|
$cWebhook = $cSettings['discord_webhook_url'] ?? null;
|
|
$cNotifyTypes = $cSettings['discord_notify_types'] ?? [];
|
|
$mNotifyTypes = array_key_exists('discord_notify_types', $mSettings) && is_array($mSettings['discord_notify_types']) ? $mSettings['discord_notify_types'] : null;
|
|
$effectiveNotifyTypes = $mNotifyTypes ?? $cNotifyTypes;
|
|
$isTypeInherited = $mNotifyTypes === null;
|
|
$hasTemperatureNotify = in_array('temperature', $effectiveNotifyTypes, true);
|
|
|
|
$mTempAlert = $mSettings['temp_alert_enabled'] ?? 'inherit';
|
|
|
|
// 繼承鏈
|
|
$mUpper = $mSettings['temp_upper_limit'] ?? null;
|
|
$mLower = $mSettings['temp_lower_limit'] ?? null;
|
|
|
|
$modelSettings = $machine->machineModel->settings ?? [];
|
|
$modelUpper = $modelSettings['temp_upper_limit'] ?? null;
|
|
$modelLower = $modelSettings['temp_lower_limit'] ?? null;
|
|
|
|
$sysUpper = 40.0;
|
|
$sysLower = 0.0;
|
|
|
|
$finalUpper = $sysUpper;
|
|
$finalLower = $sysLower;
|
|
$tempSource = __('System Default');
|
|
|
|
if ($mTempAlert === 'enabled' && $hasTemperatureNotify && ($mUpper !== null || $mLower !== null)) {
|
|
$finalUpper = $mUpper !== null ? $mUpper : $sysUpper;
|
|
$finalLower = $mLower !== null ? $mLower : $sysLower;
|
|
$tempSource = __('Custom');
|
|
} elseif ($hasTemperatureNotify && ($modelUpper !== null || $modelLower !== null)) {
|
|
$finalUpper = $modelUpper !== null ? $modelUpper : $sysUpper;
|
|
$finalLower = $modelLower !== null ? $modelLower : $sysLower;
|
|
$tempSource = __('Model Default');
|
|
}
|
|
@endphp
|
|
<div class="luxury-card p-6 rounded-[2rem] border border-slate-100 dark:border-slate-800 bg-white/50 dark:bg-slate-900/50 transition-all duration-300 group">
|
|
<div class="flex items-start justify-between gap-4 mb-6">
|
|
<div class="flex items-center gap-4 min-w-0">
|
|
<div class="w-14 h-14 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 border border-slate-200 dark:border-slate-700 group-hover:bg-cyan-500 group-hover:text-white transition-all duration-300 overflow-hidden shadow-sm shrink-0">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
|
|
</div>
|
|
<div class="min-w-0">
|
|
<h3 class="text-base font-extrabold text-slate-800 dark:text-slate-100 truncate group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors tracking-tight">{{ $machine->name }}</h3>
|
|
<p class="text-xs font-mono font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest truncate">{{ $machine->serial_no }}</p>
|
|
</div>
|
|
</div>
|
|
{{-- Temperature status is implied by configured alert types; show only range below. --}}
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-y-4 mb-6 border-y border-slate-100 dark:border-slate-800/50 py-4">
|
|
<div>
|
|
<p class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1">{{ __('Model') }}</p>
|
|
<p class="text-sm font-bold text-slate-700 dark:text-slate-300">{{ $machine->machineModel->name ?? __('No Model') }}</p>
|
|
</div>
|
|
@if(auth()->user()->isSystemAdmin())
|
|
<div>
|
|
<p class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1">{{ __('Company') }}</p>
|
|
<p class="text-sm font-bold text-slate-700 dark:text-slate-300 truncate">{{ $machine->company->name ?? __('No Company') }}</p>
|
|
</div>
|
|
@endif
|
|
<div class="col-span-2">
|
|
<p class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1">{{ __('Webhook URL') }}</p>
|
|
@if($mWebhook)
|
|
<p class="text-xs font-mono font-bold text-slate-655 dark:text-slate-200 break-all leading-normal">{{ $mWebhook }}</p>
|
|
<span class="px-2 py-0.5 rounded text-[9px] font-black uppercase tracking-widest bg-cyan-500/10 text-cyan-600 dark:text-cyan-400 border border-cyan-500/20 mt-1 inline-block">{{ __('Machine Specific') }}</span>
|
|
@elseif($cWebhook)
|
|
<p class="text-xs font-mono font-bold text-slate-400 dark:text-slate-500 break-all leading-normal">{{ $cWebhook }}</p>
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-black uppercase tracking-widest bg-slate-100 dark:bg-slate-800 text-slate-500 border border-slate-200 dark:border-slate-700 mt-1 inline-block">{{ __('Inherit Company') }}</span>
|
|
@else
|
|
<p class="text-xs font-bold text-slate-300 dark:text-slate-600">{{ __('Not Configured') }}</p>
|
|
@endif
|
|
</div>
|
|
<div class="col-span-2">
|
|
<p class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1">{{ __('Configured Alert Types') }}</p>
|
|
@if($isTypeInherited && !empty($effectiveNotifyTypes))
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-black uppercase tracking-widest bg-slate-100 dark:bg-slate-800 text-slate-500 border border-slate-200 dark:border-slate-700 inline-block mb-1">{{ __('Inherit Company') }}</span>
|
|
@endif
|
|
<div class="flex flex-wrap gap-1.5">
|
|
@foreach($effectiveNotifyTypes as $type)
|
|
@php
|
|
$label = match($type) {
|
|
'submachine' => __('Device Exception'),
|
|
'status' => __('Connectivity Logs'),
|
|
'temperature' => __('Temperature Alert'),
|
|
default => $type
|
|
};
|
|
@endphp
|
|
<span class="px-2.5 py-1 rounded-full text-xs font-black uppercase tracking-widest whitespace-nowrap bg-cyan-500/10 text-cyan-600 dark:text-cyan-400 border border-cyan-500/20">{{ $label }}</span>
|
|
@endforeach
|
|
@if(empty($effectiveNotifyTypes))
|
|
<p class="text-xs font-bold text-slate-300 dark:text-slate-600">{{ __('Not Configured') }}</p>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@if($mTempAlert !== 'disabled' && $hasTemperatureNotify)
|
|
<div class="col-span-2">
|
|
<p class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1">{{ __('Temp Alert Range') }}</p>
|
|
<div class="flex items-center gap-1.5 mt-1">
|
|
<span class="px-2.5 py-1 rounded-full text-xs font-mono font-black bg-cyan-500/10 text-cyan-600 dark:text-cyan-400 border border-cyan-500/20">
|
|
{{ number_format($finalLower, 0) }}°C ~ {{ number_format($finalUpper, 0) }}°C
|
|
</span>
|
|
<span class="text-[11px] font-bold text-slate-400 dark:text-slate-500">
|
|
({{ $tempSource }})
|
|
</span>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="flex items-center gap-3">
|
|
<button type="button" @click="openMachineEdit(@js($machine))"
|
|
class="flex-1 flex items-center justify-center gap-2 py-3 rounded-xl bg-slate-50 dark:bg-slate-800 text-slate-500 dark:text-slate-400 font-bold text-xs hover:bg-cyan-500 hover:text-white transition-all duration-300 border border-slate-200/50 dark:border-slate-700/50">
|
|
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"/></svg>
|
|
{{ __('Edit Settings') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<x-empty-state :message="__('No records found')" />
|
|
@endforelse
|
|
</div>
|
|
|
|
{{-- 分頁 --}}
|
|
<div class="mt-8 border-t border-slate-100/50 dark:border-slate-800/50 pt-6">
|
|
{{ $machines->appends(array_merge(request()->query(), ['tab' => 'machine']))->links('vendor.pagination.luxury', [
|
|
'ajax_navigate_event' => 'ajax:navigate:discord',
|
|
'per_page_param' => 'machine_per_page',
|
|
]) }}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ======================================================== -->
|
|
<!-- Tab 1: 公司全域設定 Modal -->
|
|
<!-- ======================================================== -->
|
|
<div x-show="showCompanyModal" class="fixed inset-0 z-[110] overflow-y-auto" style="display: none;" x-cloak>
|
|
<div class="flex items-center justify-center min-h-screen px-4 py-6 text-center sm:block sm:p-0">
|
|
<!-- Backdrop -->
|
|
<div x-show="showCompanyModal"
|
|
x-transition:enter="ease-out duration-300"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="ease-in duration-200"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm transition-opacity"
|
|
@click="showCompanyModal = false"></div>
|
|
|
|
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>
|
|
|
|
<!-- Modal Content -->
|
|
<div x-show="showCompanyModal"
|
|
x-transition:enter="ease-out duration-300"
|
|
x-transition:enter-start="opacity-0 translate-y-4 sm:scale-95"
|
|
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
|
|
x-transition:leave="ease-in duration-200"
|
|
x-transition:leave-start="opacity-100 sm:scale-100"
|
|
x-transition:leave-end="opacity-0 translate-y-4 sm:scale-95"
|
|
class="relative inline-block align-bottom bg-white dark:bg-slate-900 rounded-[2.5rem] text-left shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl w-full border border-slate-100 dark:border-slate-800 z-10 overflow-hidden"
|
|
@click.stop>
|
|
|
|
<div class="absolute -top-40 -right-40 w-80 h-80 bg-cyan-500/10 rounded-full blur-[100px] pointer-events-none"></div>
|
|
|
|
<!-- Header -->
|
|
<div class="px-10 py-8 pb-4 flex items-center justify-between relative z-10">
|
|
<div>
|
|
<h3 class="text-2xl font-black text-slate-800 dark:text-white font-display tracking-tight">
|
|
{{ __('Edit Company Alert Settings') }}
|
|
</h3>
|
|
<p class="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mt-1">
|
|
<span x-text="companyName" class="text-cyan-500 font-extrabold"></span>
|
|
</p>
|
|
</div>
|
|
<button @click="showCompanyModal = false"
|
|
class="p-2.5 rounded-full bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-slate-600 dark:hover:text-white transition-all border border-slate-100 dark:border-slate-700">
|
|
<svg class="w-5 h-5 stroke-[2.5]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Form -->
|
|
<form :action="'{{ route('admin.basic-settings.discord-notifications.index') }}/company/' + companyId" method="POST">
|
|
@csrf
|
|
@method('PUT')
|
|
|
|
<div class="px-10 py-6 space-y-6 max-h-[65vh] overflow-y-auto relative z-10">
|
|
<!-- Switch and Webhook URL -->
|
|
<div class="p-6 bg-slate-50 dark:bg-slate-800/25 rounded-2xl border border-slate-100 dark:border-slate-800/50 space-y-6">
|
|
<div class="flex items-center justify-between pb-4 border-b border-slate-100 dark:border-slate-800/50">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-xl bg-indigo-500/10 text-indigo-500 flex items-center justify-center border border-indigo-500/20 shrink-0">
|
|
<svg class="w-5 h-5 stroke-[2]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-sm font-black text-slate-700 dark:text-slate-300">{{ __('General Settings') }}</h4>
|
|
<p class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mt-0.5">{{ __('Enable and paste Webhook URL') }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="relative inline-flex items-center cursor-pointer select-none">
|
|
<input type="hidden" name="discord_notify_enabled" value="0">
|
|
<input type="checkbox" name="discord_notify_enabled" value="1" x-model="companyForm.discord_notify_enabled" class="sr-only peer">
|
|
<div class="w-14 h-7 bg-slate-200 dark:bg-slate-800 rounded-full peer peer-focus:ring-2 peer-focus:ring-cyan-500/20 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[4px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all dark:border-slate-600 peer-checked:bg-cyan-500 shadow-inner"></div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<label class="text-xs font-bold text-slate-500 dark:text-slate-400 tracking-wider mb-2 block">{{ __('Discord Webhook URL') }}</label>
|
|
<div class="flex flex-col sm:flex-row gap-3">
|
|
<div class="relative flex-1">
|
|
<span class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none z-10 text-slate-400 dark:text-slate-500">
|
|
<svg class="h-5 w-5 stroke-[2]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" /></svg>
|
|
</span>
|
|
<input type="url" name="discord_webhook_url" x-model="companyForm.discord_webhook_url" class="luxury-input py-3 pl-12 pr-6 block w-full text-sm">
|
|
</div>
|
|
<button type="button" @click="testWebhook(companyForm.discord_webhook_url)" :disabled="isTesting" class="btn-luxury-ghost flex items-center justify-center gap-2 py-3 px-6 rounded-xl border border-slate-200 dark:border-slate-700/60 font-bold text-sm text-slate-600 dark:text-slate-300 hover:bg-cyan-500 hover:text-white active:scale-95 transition-all duration-300 shrink-0 disabled:opacity-50">
|
|
<template x-if="isTesting">
|
|
<svg class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
|
|
</template>
|
|
<template x-if="!isTesting">
|
|
<svg class="w-4 h-4 stroke-[2]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" /></svg>
|
|
</template>
|
|
<span x-text="isTesting ? '{{ __('Sending...') }}' : '{{ __('Test Connection') }}'"></span>
|
|
</button>
|
|
</div>
|
|
|
|
<div x-show="testStatus !== null" x-transition.duration.300ms class="mt-3 p-4 rounded-xl flex items-start gap-3 text-sm font-bold animate-luxury-in" :class="testStatus === 'success' ? 'bg-emerald-500/10 border border-emerald-500/20 text-emerald-600 dark:text-emerald-400' : 'bg-rose-500/10 border border-rose-500/20 text-rose-600 dark:text-rose-400'" style="display: none;">
|
|
<template x-if="testStatus === 'success'">
|
|
<svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
|
</template>
|
|
<template x-if="testStatus === 'error'">
|
|
<svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
|
</template>
|
|
<span x-text="testMessage"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<label class="text-xs font-bold text-slate-500 dark:text-slate-400 tracking-wider mb-2 block">{{ __('Notification Language') }}</label>
|
|
<x-searchable-select id="company-locale-select" name="discord_notify_locale" x-model="companyForm.discord_notify_locale" :hasSearch="false">
|
|
<option value="zh_TW" data-title="繁體中文 (Traditional Chinese)">繁體中文 (Traditional Chinese)</option>
|
|
<option value="en" data-title="English">English</option>
|
|
<option value="ja" data-title="日本語 (Japanese)">日本語 (Japanese)</option>
|
|
</x-searchable-select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Alert Types -->
|
|
<div class="space-y-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded-lg bg-emerald-500/10 text-emerald-500 flex items-center justify-center border border-emerald-500/20 shrink-0">
|
|
<svg class="w-4 h-4 stroke-[2]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 5.25h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5" /></svg>
|
|
</div>
|
|
<h4 class="text-xs font-black text-slate-800 dark:text-white uppercase tracking-widest">{{ __('Alert Types') }}</h4>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<label class="group relative flex items-center justify-between p-4 rounded-2xl border border-slate-100/80 dark:border-slate-800/80 bg-slate-50/30 dark:bg-slate-900/20 hover:border-cyan-500/40 cursor-pointer transition-all duration-300">
|
|
<div class="flex flex-col flex-1 min-w-0 mr-3">
|
|
<span class="text-sm font-black text-slate-500 dark:text-slate-400 group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors">{{ __('Submachine Alert') }}</span>
|
|
</div>
|
|
<div class="flex-shrink-0 pr-1">
|
|
<input type="checkbox" name="discord_notify_types[]" value="submachine" x-model="companyForm.discord_notify_types"
|
|
class="w-4 h-4 rounded border-2 border-slate-300 dark:border-slate-600 text-cyan-500 focus:ring-cyan-500/20 transition-all cursor-pointer accent-cyan-500">
|
|
</div>
|
|
</label>
|
|
|
|
<label class="group relative flex items-center justify-between p-4 rounded-2xl border border-slate-100/80 dark:border-slate-800/80 bg-slate-50/30 dark:bg-slate-900/20 hover:border-cyan-500/40 cursor-pointer transition-all duration-300">
|
|
<div class="flex flex-col flex-1 min-w-0 mr-3">
|
|
<span class="text-sm font-black text-slate-500 dark:text-slate-400 group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors">{{ __('Machine Connection Alert') }}</span>
|
|
</div>
|
|
<div class="flex-shrink-0 pr-1">
|
|
<input type="checkbox" name="discord_notify_types[]" value="status" x-model="companyForm.discord_notify_types"
|
|
class="w-4 h-4 rounded border-2 border-slate-300 dark:border-slate-600 text-cyan-500 focus:ring-cyan-500/20 transition-all cursor-pointer accent-cyan-500">
|
|
</div>
|
|
</label>
|
|
|
|
<label class="group relative flex items-center justify-between p-4 rounded-2xl border border-slate-100/80 dark:border-slate-800/80 bg-slate-50/30 dark:bg-slate-900/20 hover:border-cyan-500/40 cursor-pointer transition-all duration-300">
|
|
<div class="flex flex-col flex-1 min-w-0 mr-3">
|
|
<span class="text-sm font-black text-slate-500 dark:text-slate-400 group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors">{{ __('Temperature Alert') }}</span>
|
|
</div>
|
|
<div class="flex-shrink-0 pr-1">
|
|
<input type="checkbox" name="discord_notify_types[]" value="temperature" x-model="companyForm.discord_notify_types"
|
|
class="w-4 h-4 rounded border-2 border-slate-300 dark:border-slate-600 text-cyan-500 focus:ring-cyan-500/20 transition-all cursor-pointer accent-cyan-500">
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer Actions -->
|
|
<div class="px-10 py-6 border-t border-slate-100 dark:border-slate-800/50 flex justify-end gap-4 relative z-10">
|
|
<button type="button" @click="showCompanyModal = false" class="btn-luxury-ghost px-8 py-3 rounded-xl border border-slate-200 dark:border-slate-700/60 font-bold text-sm text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800">
|
|
{{ __('Cancel') }}
|
|
</button>
|
|
<button type="submit" class="btn-luxury-primary px-12 py-3 rounded-xl text-white font-bold text-sm bg-cyan-500 hover:bg-cyan-600 active:scale-95 shadow-lg shadow-cyan-500/20 transition-all duration-300">
|
|
{{ __('Save Settings') }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- ======================================================== -->
|
|
<!-- Tab 2: 機台個別設定 Modal -->
|
|
<!-- ======================================================== -->
|
|
<div x-show="showMachineModal" class="fixed inset-0 z-[110] overflow-y-auto" style="display: none;" x-cloak>
|
|
<div class="flex items-center justify-center min-h-screen px-4 py-6 text-center sm:block sm:p-0">
|
|
<!-- Backdrop -->
|
|
<div x-show="showMachineModal"
|
|
x-transition:enter="ease-out duration-300"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="ease-in duration-200"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm transition-opacity"
|
|
@click="showMachineModal = false"></div>
|
|
|
|
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>
|
|
|
|
<!-- Modal Content -->
|
|
<div x-show="showMachineModal"
|
|
x-transition:enter="ease-out duration-300"
|
|
x-transition:enter-start="opacity-0 translate-y-4 sm:scale-95"
|
|
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
|
|
x-transition:leave="ease-in duration-200"
|
|
x-transition:leave-start="opacity-100 sm:scale-100"
|
|
x-transition:leave-end="opacity-0 translate-y-4 sm:scale-95"
|
|
class="relative inline-block align-bottom bg-white dark:bg-slate-900 rounded-[2.5rem] text-left shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl w-full border border-slate-100 dark:border-slate-800 z-10 overflow-hidden"
|
|
@click.stop>
|
|
|
|
<div class="absolute -top-40 -right-40 w-80 h-80 bg-cyan-500/10 rounded-full blur-[100px] pointer-events-none"></div>
|
|
|
|
<!-- Header -->
|
|
<div class="px-10 py-8 pb-4 flex items-center justify-between relative z-10">
|
|
<div>
|
|
<h3 class="text-2xl font-black text-slate-800 dark:text-white font-display tracking-tight">
|
|
{{ __('Edit Machine Alert Settings') }}
|
|
</h3>
|
|
<p class="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mt-1">
|
|
<span x-text="currentMachine.name" class="text-cyan-500 font-extrabold"></span>
|
|
<span class="mx-2 text-slate-300 dark:text-slate-700">|</span>
|
|
<span x-text="currentMachine.serial_no" class="font-mono"></span>
|
|
</p>
|
|
</div>
|
|
<button @click="showMachineModal = false"
|
|
class="p-2.5 rounded-full bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-slate-600 dark:hover:text-white transition-all border border-slate-100 dark:border-slate-700">
|
|
<svg class="w-5 h-5 stroke-[2.5]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Form -->
|
|
<form :action="'{{ route('admin.basic-settings.discord-notifications.index') }}/machine/' + currentMachine.id" method="POST">
|
|
@csrf
|
|
@method('PUT')
|
|
|
|
<div class="px-10 py-6 space-y-4 max-h-[65vh] overflow-y-auto overflow-x-hidden relative z-10">
|
|
|
|
<!-- Pull-style Copy Settings (複製其他機台設定) -->
|
|
<div class="p-5 bg-gradient-to-br from-cyan-500/5 to-blue-500/5 rounded-2xl border border-cyan-500/15 relative z-[30]">
|
|
|
|
<div class="relative focus-within:z-[60] space-y-2">
|
|
<label class="text-xs font-bold text-cyan-600 dark:text-cyan-400 tracking-wider mb-2 block flex items-center gap-1.5">
|
|
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376A8.965 8.965 0 0012 12.75c-.497 0-.982.04-1.455.12l-.178.03A8.965 8.965 0 006 17.25M17.25 12h-9.75m9.75 2.25h-9.75M17.25 16.5H7.5" /></svg>
|
|
{{ __('Copy Settings From Another Machine') }}
|
|
</label>
|
|
|
|
{{-- 標準動態選單包裝容器，支援 x-searchable-select 奢華外觀 --}}
|
|
<div id="copy-select-wrapper" class="relative focus-within:z-[60] w-full"></div>
|
|
|
|
<p class="text-xs font-bold text-slate-400 dark:text-slate-500 mt-1">
|
|
{{ __('Only machines under the same company can be cloned for security.') }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- 複製成功提示 Micro-Toast -->
|
|
<div x-show="showCopyToast"
|
|
x-transition:enter="ease-out duration-300"
|
|
x-transition:enter-start="opacity-0 translate-y-2 scale-95"
|
|
x-transition:enter-end="opacity-100 translate-y-0 scale-100"
|
|
x-transition:leave="ease-in duration-200"
|
|
x-transition:leave-start="opacity-100 scale-100"
|
|
x-transition:leave-end="opacity-0 translate-y-2 scale-95"
|
|
class="mt-3 p-3 bg-emerald-500/10 border border-emerald-500/20 text-emerald-600 dark:text-emerald-400 rounded-xl flex items-center gap-2 text-xs font-bold"
|
|
style="display: none;">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
|
<span>{{ __('Settings loaded from') }} <span x-text="copiedMachineName" class="underline"></span>!</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Webhook Settings -->
|
|
<div class="p-6 bg-slate-50 dark:bg-slate-800/25 rounded-2xl border border-slate-100 dark:border-slate-800/50 space-y-4">
|
|
<div class="flex items-center justify-between pb-3 border-b border-slate-100 dark:border-slate-800/50">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded-lg bg-indigo-500/10 text-indigo-500 flex items-center justify-center border border-indigo-500/20 shrink-0">
|
|
<svg class="w-4 h-4 stroke-[2]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" /></svg>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-sm font-extrabold text-slate-800 dark:text-white">{{ __('Machine-Specific Webhook') }}</h4>
|
|
<p class="text-xs font-bold text-slate-400 dark:text-slate-500 mt-1">{{ __('Leave empty to inherit company settings') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<div class="flex flex-col sm:flex-row gap-3">
|
|
<div class="relative flex-1">
|
|
<span class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none z-10 text-slate-400 dark:text-slate-500">
|
|
<svg class="h-5 w-5 stroke-[2]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" /></svg>
|
|
</span>
|
|
<input type="url" name="discord_webhook_url" x-model="machineForm.discord_webhook_url" class="luxury-input py-3 pl-12 pr-6 block w-full text-sm">
|
|
</div>
|
|
<button type="button" @click="testWebhook(machineForm.discord_webhook_url)" :disabled="isTesting" class="btn-luxury-ghost flex items-center justify-center gap-2 py-3 px-6 rounded-xl border border-slate-200 dark:border-slate-700/60 font-bold text-sm text-slate-600 dark:text-slate-300 hover:bg-cyan-500 hover:text-white active:scale-95 transition-all duration-300 shrink-0 disabled:opacity-50">
|
|
<template x-if="isTesting">
|
|
<svg class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
|
|
</template>
|
|
<template x-if="!isTesting">
|
|
<svg class="w-4 h-4 stroke-[2]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" /></svg>
|
|
</template>
|
|
<span x-text="isTesting ? '{{ __('Sending...') }}' : '{{ __('Test Connection') }}'"></span>
|
|
</button>
|
|
</div>
|
|
|
|
<div x-show="testStatus !== null" x-transition.duration.300ms class="mt-3 p-4 rounded-xl flex items-start gap-3 text-sm font-bold animate-luxury-in" :class="testStatus === 'success' ? 'bg-emerald-500/10 border border-emerald-500/20 text-emerald-600 dark:text-emerald-400' : 'bg-rose-500/10 border border-rose-500/20 text-rose-600 dark:text-rose-400'" style="display: none;">
|
|
<template x-if="testStatus === 'success'">
|
|
<svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
|
</template>
|
|
<template x-if="testStatus === 'error'">
|
|
<svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
|
</template>
|
|
<span x-text="testMessage"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Temperature Overrides -->
|
|
<input type="hidden" name="temp_alert_enabled" x-model="machineForm.temp_alert_enabled">
|
|
<div class="p-6 bg-slate-50 dark:bg-slate-800/25 rounded-2xl border border-slate-100 dark:border-slate-800/50 space-y-5">
|
|
<div class="flex items-center justify-between pb-3 border-b border-slate-100 dark:border-slate-800/50">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded-lg bg-amber-500/10 text-amber-500 flex items-center justify-center border border-amber-500/20 shrink-0">
|
|
<svg class="w-4 h-4 stroke-[2]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3v18m0-18a9 9 0 110 18m0-18a9 9 0 000 18" /></svg>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-sm font-extrabold text-slate-800 dark:text-white">{{ __('Machine Alert Settings') }}</h4>
|
|
<p class="text-xs font-bold text-slate-400 dark:text-slate-500 mt-1">{{ __('Configure alert types and temperature thresholds') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<label class="text-xs font-bold text-slate-500 dark:text-slate-400 tracking-wider mb-2 block">{{ __('Alert Types Source') }}</label>
|
|
<x-searchable-select id="machine-notify-mode-select" name="notify_types_mode" x-model="machineForm.notify_types_mode" :hasSearch="false" @change="syncTempAlertState()">
|
|
<option value="inherit" data-title="{{ __('Inherit Company Alert Types') }}">{{ __('Inherit Company Alert Types') }}</option>
|
|
<option value="custom" data-title="{{ __('Custom Alert Types') }}">{{ __('Custom Alert Types') }}</option>
|
|
</x-searchable-select>
|
|
</div>
|
|
|
|
<div x-show="machineForm.notify_types_mode === 'custom'" x-transition.duration.300ms class="space-y-3 animate-luxury-in">
|
|
<label class="text-xs font-bold text-slate-500 dark:text-slate-400 tracking-wider mb-2 block">{{ __('Alert Types') }}</label>
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
|
<label class="group relative flex items-center justify-between p-4 rounded-2xl border border-slate-100/80 dark:border-slate-800/80 bg-white/70 dark:bg-slate-900/40 hover:border-cyan-500/40 cursor-pointer transition-all duration-300">
|
|
<div class="flex flex-col flex-1 min-w-0 mr-3">
|
|
<span class="text-base font-black text-slate-500 dark:text-slate-400 group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors">{{ __('Submachine Alert') }}</span>
|
|
</div>
|
|
<div class="flex-shrink-0 pr-1">
|
|
<input type="checkbox" name="discord_notify_types[]" value="submachine" x-model="machineForm.discord_notify_types" @change="syncTempAlertState()"
|
|
class="w-4 h-4 rounded border-2 border-slate-300 dark:border-slate-600 text-cyan-500 focus:ring-cyan-500/20 transition-all cursor-pointer accent-cyan-500">
|
|
</div>
|
|
</label>
|
|
<label class="group relative flex items-center justify-between p-4 rounded-2xl border border-slate-100/80 dark:border-slate-800/80 bg-white/70 dark:bg-slate-900/40 hover:border-cyan-500/40 cursor-pointer transition-all duration-300">
|
|
<div class="flex flex-col flex-1 min-w-0 mr-3">
|
|
<span class="text-base font-black text-slate-500 dark:text-slate-400 group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors">{{ __('Machine Connection Alert') }}</span>
|
|
</div>
|
|
<div class="flex-shrink-0 pr-1">
|
|
<input type="checkbox" name="discord_notify_types[]" value="status" x-model="machineForm.discord_notify_types" @change="syncTempAlertState()"
|
|
class="w-4 h-4 rounded border-2 border-slate-300 dark:border-slate-600 text-cyan-500 focus:ring-cyan-500/20 transition-all cursor-pointer accent-cyan-500">
|
|
</div>
|
|
</label>
|
|
<label class="group relative flex items-center justify-between p-4 rounded-2xl border border-slate-100/80 dark:border-slate-800/80 bg-white/70 dark:bg-slate-900/40 hover:border-cyan-500/40 cursor-pointer transition-all duration-300">
|
|
<div class="flex flex-col flex-1 min-w-0 mr-3">
|
|
<span class="text-base font-black text-slate-500 dark:text-slate-400 group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors">{{ __('Temperature Alert') }}</span>
|
|
</div>
|
|
<div class="flex-shrink-0 pr-1">
|
|
<input type="checkbox" name="discord_notify_types[]" value="temperature" x-model="machineForm.discord_notify_types" @change="syncTempAlertState()"
|
|
class="w-4 h-4 rounded border-2 border-slate-300 dark:border-slate-600 text-cyan-500 focus:ring-cyan-500/20 transition-all cursor-pointer accent-cyan-500">
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div x-show="machineForm.notify_types_mode === 'inherit'" x-transition.duration.300ms class="space-y-2 animate-luxury-in">
|
|
<label class="text-xs font-bold text-slate-500 dark:text-slate-400 tracking-wider mb-1 block">{{ __('Effective Alert Types') }}</label>
|
|
<div class="flex flex-wrap gap-2">
|
|
<template x-for="type in effectiveNotifyTypes()" :key="type">
|
|
<span class="px-2.5 py-1 rounded-full text-xs font-black uppercase tracking-widest bg-cyan-500/10 text-cyan-600 dark:text-cyan-400 border border-cyan-500/20" x-text="notifyTypeLabel(type)"></span>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Custom Threshold Limits -->
|
|
<div x-show="machineForm.notify_types_mode === 'custom' && isTemperatureChecked()"
|
|
x-transition.duration.300ms
|
|
class="grid grid-cols-1 sm:grid-cols-2 gap-4 animate-luxury-in">
|
|
<div class="space-y-2">
|
|
<label class="text-xs font-bold text-slate-500 dark:text-slate-400 tracking-wider mb-2 block">{{ __('Custom Upper Limit (°C)') }}</label>
|
|
<div class="flex items-center h-12 rounded-xl border border-slate-200/50 dark:border-slate-700/50 bg-slate-50/50 dark:bg-slate-900/50 overflow-hidden group focus-within:ring-2 focus-within:ring-cyan-500/20 transition-all w-full">
|
|
<button type="button" @click="adjustTemp('temp_upper_limit', -1, currentMachine.machine_model && currentMachine.machine_model.settings && currentMachine.machine_model.settings.temp_upper_limit !== undefined ? currentMachine.machine_model.settings.temp_upper_limit : '40')"
|
|
class="shrink-0 w-12 h-full flex items-center justify-center text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 active:scale-90 transition-all">
|
|
<svg class="w-4 h-4 stroke-[3]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
|
|
</button>
|
|
<div class="h-6 w-px bg-slate-200 dark:bg-slate-700/50"></div>
|
|
<input type="text" inputmode="decimal" name="temp_upper_limit" x-model="machineForm.temp_upper_limit"
|
|
:placeholder="currentMachine.machine_model && currentMachine.machine_model.settings && currentMachine.machine_model.settings.temp_upper_limit !== undefined ? Math.round(parseFloat(currentMachine.machine_model.settings.temp_upper_limit)) : '40'"
|
|
class="w-full bg-transparent border-none text-center text-sm font-bold text-slate-800 dark:text-white focus:ring-0 p-0">
|
|
<div class="h-6 w-px bg-slate-200 dark:bg-slate-700/50"></div>
|
|
<button type="button" @click="adjustTemp('temp_upper_limit', 1, currentMachine.machine_model && currentMachine.machine_model.settings && currentMachine.machine_model.settings.temp_upper_limit !== undefined ? currentMachine.machine_model.settings.temp_upper_limit : '40')"
|
|
class="shrink-0 w-12 h-full flex items-center justify-center text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 active:scale-90 transition-all">
|
|
<svg class="w-4 h-4 stroke-[3]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 5v14M5 12h14"/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="text-xs font-bold text-slate-500 dark:text-slate-400 tracking-wider mb-2 block">{{ __('Custom Lower Limit (°C)') }}</label>
|
|
<div class="flex items-center h-12 rounded-xl border border-slate-200/50 dark:border-slate-700/50 bg-slate-50/50 dark:bg-slate-900/50 overflow-hidden group focus-within:ring-2 focus-within:ring-cyan-500/20 transition-all w-full">
|
|
<button type="button" @click="adjustTemp('temp_lower_limit', -1, currentMachine.machine_model && currentMachine.machine_model.settings && currentMachine.machine_model.settings.temp_lower_limit !== undefined ? currentMachine.machine_model.settings.temp_lower_limit : '0')"
|
|
class="shrink-0 w-12 h-full flex items-center justify-center text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 active:scale-90 transition-all">
|
|
<svg class="w-4 h-4 stroke-[3]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
|
|
</button>
|
|
<div class="h-6 w-px bg-slate-200 dark:bg-slate-700/50"></div>
|
|
<input type="text" inputmode="decimal" name="temp_lower_limit" x-model="machineForm.temp_lower_limit"
|
|
:placeholder="currentMachine.machine_model && currentMachine.machine_model.settings && currentMachine.machine_model.settings.temp_lower_limit !== undefined ? Math.round(parseFloat(currentMachine.machine_model.settings.temp_lower_limit)) : '0'"
|
|
class="w-full bg-transparent border-none text-center text-sm font-bold text-slate-800 dark:text-white focus:ring-0 p-0">
|
|
<div class="h-6 w-px bg-slate-200 dark:bg-slate-700/50"></div>
|
|
<button type="button" @click="adjustTemp('temp_lower_limit', 1, currentMachine.machine_model && currentMachine.machine_model.settings && currentMachine.machine_model.settings.temp_lower_limit !== undefined ? currentMachine.machine_model.settings.temp_lower_limit : '0')"
|
|
class="shrink-0 w-12 h-full flex items-center justify-center text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 active:scale-90 transition-all">
|
|
<svg class="w-4 h-4 stroke-[3]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 5v14M5 12h14"/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer Actions -->
|
|
<div class="px-10 py-6 border-t border-slate-100 dark:border-slate-800/50 flex justify-end gap-4 relative z-10">
|
|
<button type="button" @click="showMachineModal = false" class="btn-luxury-ghost px-8 py-3 rounded-xl border border-slate-200 dark:border-slate-700/60 font-bold text-sm text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800">
|
|
{{ __('Cancel') }}
|
|
</button>
|
|
<button type="submit" class="btn-luxury-primary px-12 py-3 rounded-xl text-white font-bold text-sm bg-cyan-500 hover:bg-cyan-600 active:scale-95 shadow-lg shadow-cyan-500/20 transition-all duration-300">
|
|
{{ __('Save Settings') }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
@endsection
|
|
|
|
@section('scripts')
|
|
<script>
|
|
document.addEventListener('alpine:init', () => {
|
|
Alpine.data('discordNotificationApp', () => ({
|
|
activeTab: '{{ $activeTab }}',
|
|
tabLoading: null,
|
|
showCompanyModal: false,
|
|
showMachineModal: false,
|
|
companyId: null,
|
|
companyName: '',
|
|
companyForm: {
|
|
discord_webhook_url: '',
|
|
discord_notify_enabled: false,
|
|
discord_notify_types: [],
|
|
discord_notify_locale: 'zh_TW'
|
|
},
|
|
currentMachine: {
|
|
id: null,
|
|
name: '',
|
|
serial_no: '',
|
|
company_id: null,
|
|
settings: {},
|
|
machine_model: null
|
|
},
|
|
machineForm: {
|
|
discord_webhook_url: '',
|
|
notify_types_mode: 'inherit',
|
|
discord_notify_types: [],
|
|
temp_alert_enabled: 'inherit',
|
|
temp_upper_limit: '',
|
|
temp_lower_limit: ''
|
|
},
|
|
copyableMachines: @js($copyableMachines),
|
|
isTesting: false,
|
|
testStatus: null,
|
|
testMessage: '',
|
|
isLoadingTable: false,
|
|
showCopyToast: false,
|
|
copiedMachineName: '',
|
|
|
|
openCompanyEdit(company) {
|
|
const settings = company.settings || {};
|
|
this.companyId = company.id;
|
|
this.companyName = company.name;
|
|
this.companyForm.discord_webhook_url = settings.discord_webhook_url || '';
|
|
this.companyForm.discord_notify_enabled = !!(settings.discord_notify_enabled);
|
|
this.companyForm.discord_notify_types = settings.discord_notify_types || ['submachine', 'status'];
|
|
this.companyForm.discord_notify_locale = settings.locale || 'zh_TW';
|
|
|
|
this.testStatus = null;
|
|
this.testMessage = '';
|
|
this.showCompanyModal = true;
|
|
|
|
this.$nextTick(() => {
|
|
const el = window.HSSelect?.getInstance('#company-locale-select');
|
|
if (el) el.setValue(this.companyForm.discord_notify_locale);
|
|
});
|
|
},
|
|
|
|
openMachineEdit(machine) {
|
|
const settings = machine.settings || {};
|
|
const machineNotifyTypes = Array.isArray(settings.discord_notify_types) ? settings.discord_notify_types : null;
|
|
this.currentMachine = machine;
|
|
this.machineForm.discord_webhook_url = settings.discord_webhook_url || '';
|
|
this.machineForm.notify_types_mode = machineNotifyTypes === null ? 'inherit' : 'custom';
|
|
this.machineForm.discord_notify_types = machineNotifyTypes === null ? [] : [...machineNotifyTypes];
|
|
this.machineForm.temp_alert_enabled = settings.temp_alert_enabled || (this.isTemperatureChecked() ? 'enabled' : 'disabled');
|
|
this.machineForm.temp_upper_limit = settings.temp_upper_limit !== undefined && settings.temp_upper_limit !== null ? Math.round(parseFloat(settings.temp_upper_limit)).toString() : '';
|
|
this.machineForm.temp_lower_limit = settings.temp_lower_limit !== undefined && settings.temp_lower_limit !== null ? Math.round(parseFloat(settings.temp_lower_limit)).toString() : '';
|
|
this.syncTempAlertState();
|
|
|
|
this.testStatus = null;
|
|
this.testMessage = '';
|
|
this.showMachineModal = true;
|
|
|
|
this.$nextTick(() => {
|
|
const modeSel = window.HSSelect?.getInstance('#machine-notify-mode-select');
|
|
if (modeSel) modeSel.setValue(this.machineForm.notify_types_mode);
|
|
this.rebuildCopySelect();
|
|
});
|
|
},
|
|
|
|
notifyTypeLabel(type) {
|
|
if (type === 'submachine') return '{{ __('Submachine Alert') }}';
|
|
if (type === 'status') return '{{ __('Machine Connection Alert') }}';
|
|
if (type === 'temperature') return '{{ __('Temperature Alert') }}';
|
|
return type;
|
|
},
|
|
|
|
effectiveNotifyTypes() {
|
|
if (this.machineForm.notify_types_mode === 'custom') {
|
|
return this.machineForm.discord_notify_types;
|
|
}
|
|
return this.currentMachine?.company?.settings?.discord_notify_types || [];
|
|
},
|
|
|
|
isTemperatureChecked() {
|
|
return this.effectiveNotifyTypes().includes('temperature');
|
|
},
|
|
|
|
syncTempAlertState() {
|
|
if (this.machineForm.notify_types_mode === 'inherit') {
|
|
this.machineForm.temp_alert_enabled = 'inherit';
|
|
this.machineForm.temp_upper_limit = '';
|
|
this.machineForm.temp_lower_limit = '';
|
|
return;
|
|
}
|
|
|
|
if (this.machineForm.discord_notify_types.includes('temperature')) {
|
|
this.machineForm.temp_alert_enabled = 'enabled';
|
|
return;
|
|
}
|
|
|
|
this.machineForm.temp_alert_enabled = 'disabled';
|
|
this.machineForm.temp_upper_limit = '';
|
|
this.machineForm.temp_lower_limit = '';
|
|
},
|
|
|
|
rebuildCopySelect() {
|
|
this.$nextTick(() => {
|
|
const wrapper = document.getElementById('copy-select-wrapper');
|
|
if (!wrapper) return;
|
|
|
|
// 1. Destroy existing HSSelect instance if present
|
|
const oldSelect = wrapper.querySelector('select');
|
|
if (oldSelect) {
|
|
const instance = window.HSSelect?.getInstance(oldSelect);
|
|
if (instance) {
|
|
instance.destroy();
|
|
}
|
|
}
|
|
|
|
// 2. Clear wrapper DOM
|
|
wrapper.innerHTML = '';
|
|
|
|
// 3. Filter other machines under the same company
|
|
const list = this.copyableMachines.filter(m =>
|
|
m.company_id === this.currentMachine.company_id &&
|
|
m.id !== this.currentMachine.id
|
|
);
|
|
|
|
// 4. Build standard select element with searchable select attributes
|
|
const selectEl = document.createElement('select');
|
|
selectEl.id = 'copy-machine-select';
|
|
selectEl.name = 'copy_machine_id';
|
|
selectEl.className = 'hidden';
|
|
|
|
const config = {
|
|
"placeholder": "{{ __('Select a machine to copy settings from...') }}",
|
|
"hasSearch": true,
|
|
"searchPlaceholder": "{{ __('Search machines...') }}",
|
|
"isHidePlaceholder": false,
|
|
"searchClasses": "block w-[calc(100%-16px)] mx-2 py-2 px-3 text-sm border-slate-200 dark:border-white/10 rounded-lg focus:border-cyan-500 focus:ring-cyan-500 bg-slate-50 dark:bg-slate-900/50 dark:text-slate-200 placeholder:text-slate-400 dark:placeholder:text-slate-500",
|
|
"searchWrapperClasses": "sticky top-0 bg-white/95 dark:bg-slate-900/95 backdrop-blur-md p-2 z-10",
|
|
"toggleClasses": "hs-select-toggle luxury-select-toggle w-full",
|
|
"toggleTemplate": '<button type="button" aria-expanded="false"><span class="me-2" data-icon></span><span class="text-slate-800 dark:text-slate-200" data-title></span><div class="ms-auto"><svg class="size-4 text-slate-400 transition-transform duration-300" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6" /></svg></div></button>',
|
|
"dropdownClasses": "hs-select-menu w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-white/10 rounded-xl shadow-[0_20px_50px_rgba(0,0,0,0.3)] mt-2 z-[150] animate-luxury-in",
|
|
"optionClasses": "hs-select-option py-2.5 px-3 mb-0.5 text-sm text-slate-800 dark:text-slate-300 cursor-pointer hover:bg-slate-100 dark:hover:bg-cyan-500/10 dark:hover:text-cyan-400 rounded-lg flex items-center justify-between transition-all duration-300",
|
|
"optionTemplate": '<div class="flex items-center justify-between w-full"><span data-title></span><span class="hs-select-active-indicator hidden text-cyan-500"><svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span></div>'
|
|
};
|
|
|
|
selectEl.setAttribute('data-hs-select', JSON.stringify(config));
|
|
|
|
// Append placeholder
|
|
const placeholderOpt = document.createElement('option');
|
|
placeholderOpt.value = ' ';
|
|
placeholderOpt.textContent = "{{ __('Select a machine to copy settings from...') }}";
|
|
placeholderOpt.setAttribute('data-title', "{{ __('Select a machine to copy settings from...') }}");
|
|
selectEl.appendChild(placeholderOpt);
|
|
|
|
if (list.length === 0) {
|
|
const emptyOpt = document.createElement('option');
|
|
emptyOpt.value = ' ';
|
|
emptyOpt.textContent = "{{ __('No machines found') }}";
|
|
emptyOpt.setAttribute('data-title', "{{ __('No machines found') }}");
|
|
emptyOpt.disabled = true;
|
|
selectEl.appendChild(emptyOpt);
|
|
} else {
|
|
list.forEach(m => {
|
|
const opt = document.createElement('option');
|
|
opt.value = m.id;
|
|
opt.textContent = `${m.name} (${m.serial_no})`;
|
|
opt.setAttribute('data-title', `${m.name} (${m.serial_no})`);
|
|
selectEl.appendChild(opt);
|
|
});
|
|
}
|
|
|
|
wrapper.appendChild(selectEl);
|
|
|
|
// Bind change event to copy handler
|
|
selectEl.addEventListener('change', (e) => {
|
|
this.handleCopyMachine(e.target.value);
|
|
});
|
|
|
|
// 5. Initialize select
|
|
this.$nextTick(() => {
|
|
if (window.HSStaticMethods && window.HSStaticMethods.autoInit) {
|
|
window.HSStaticMethods.autoInit(['select']);
|
|
}
|
|
});
|
|
});
|
|
},
|
|
|
|
handleCopyMachine(value) {
|
|
if (!value || !String(value).trim()) return;
|
|
const source = this.copyableMachines.find(m => m.id == value);
|
|
if (source) {
|
|
const s = source.settings || {};
|
|
const sourceNotifyTypes = Array.isArray(s.discord_notify_types) ? s.discord_notify_types : null;
|
|
this.machineForm.discord_webhook_url = s.discord_webhook_url || '';
|
|
this.machineForm.notify_types_mode = sourceNotifyTypes === null ? 'inherit' : 'custom';
|
|
this.machineForm.discord_notify_types = sourceNotifyTypes === null ? [] : [...sourceNotifyTypes];
|
|
this.machineForm.temp_alert_enabled = s.temp_alert_enabled || (this.isTemperatureChecked() ? 'enabled' : 'disabled');
|
|
this.machineForm.temp_upper_limit = s.temp_upper_limit !== undefined && s.temp_upper_limit !== null ? Math.round(parseFloat(s.temp_upper_limit)).toString() : '';
|
|
this.machineForm.temp_lower_limit = s.temp_lower_limit !== undefined && s.temp_lower_limit !== null ? Math.round(parseFloat(s.temp_lower_limit)).toString() : '';
|
|
this.syncTempAlertState();
|
|
|
|
this.$nextTick(() => {
|
|
const modeSel = window.HSSelect?.getInstance('#machine-notify-mode-select');
|
|
if (modeSel) modeSel.setValue(this.machineForm.notify_types_mode);
|
|
const copyEl = document.getElementById('copy-machine-select');
|
|
if (copyEl) {
|
|
copyEl.value = ' ';
|
|
const copyInstance = window.HSSelect?.getInstance('#copy-machine-select');
|
|
if (copyInstance) copyInstance.setValue(' ');
|
|
}
|
|
});
|
|
|
|
this.copiedMachineName = source.name;
|
|
this.showCopyToast = true;
|
|
setTimeout(() => this.showCopyToast = false, 3000);
|
|
}
|
|
},
|
|
|
|
adjustTemp(field, delta, fallbackVal) {
|
|
let current = this.machineForm[field];
|
|
if (current === undefined || current === null || current === '') {
|
|
current = parseInt(fallbackVal);
|
|
} else {
|
|
current = parseInt(current);
|
|
}
|
|
if (isNaN(current)) current = 0;
|
|
let newValue = current + delta;
|
|
if (newValue < -50) newValue = -50;
|
|
if (newValue > 100) newValue = 100;
|
|
this.machineForm[field] = newValue.toString();
|
|
},
|
|
|
|
async testWebhook(webhookUrl) {
|
|
if (!webhookUrl) {
|
|
this.testStatus = 'error';
|
|
this.testMessage = '{{ __('Please enter Webhook URL first.') }}';
|
|
return;
|
|
}
|
|
this.isTesting = true;
|
|
this.testStatus = null;
|
|
try {
|
|
const response = await fetch('{{ route('admin.basic-settings.discord-notifications.test') }}', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}',
|
|
'Accept': 'application/json'
|
|
},
|
|
body: JSON.stringify({ discord_webhook_url: webhookUrl })
|
|
});
|
|
const data = await response.json();
|
|
if (response.ok && data.success) {
|
|
this.testStatus = 'success';
|
|
this.testMessage = data.message;
|
|
} else {
|
|
this.testStatus = 'error';
|
|
this.testMessage = data.message || '{{ __('Failed to send test notification.') }}';
|
|
}
|
|
} catch (error) {
|
|
this.testStatus = 'error';
|
|
this.testMessage = '{{ __('An error occurred during testing.') }}';
|
|
} finally {
|
|
this.isTesting = false;
|
|
}
|
|
},
|
|
|
|
async fetchTabContent(url, containerId) {
|
|
if (!url || this.isLoadingTable) return;
|
|
this.isLoadingTable = true;
|
|
try {
|
|
const res = await fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } });
|
|
if (!res.ok) throw new Error('Network error');
|
|
const html = await res.text();
|
|
const doc = new DOMParser().parseFromString(html, 'text/html');
|
|
const newContent = doc.getElementById(containerId);
|
|
const container = document.getElementById(containerId);
|
|
if (newContent && container) {
|
|
container.innerHTML = newContent.innerHTML;
|
|
window.history.pushState({}, '', url);
|
|
if (window.HSStaticMethods?.autoInit) window.HSStaticMethods.autoInit();
|
|
if (window.Alpine?.initTree) window.Alpine.initTree(container);
|
|
}
|
|
} catch (e) {
|
|
console.error('AJAX Load Failed:', e);
|
|
window.location.href = url;
|
|
} finally {
|
|
this.isLoadingTable = false;
|
|
}
|
|
}
|
|
}));
|
|
});
|
|
</script>
|
|
@endsection
|