pllx
80 lines
3.9 KiB
PHP
80 lines
3.9 KiB
PHP
@php
|
||
$roomScopeConfig = $roomScopeConfig ?? ['room_scope_mode' => 'single', 'room_ids' => [1]];
|
||
$roomScopeDataKey = $roomScopeDataKey ?? 'game';
|
||
$roomScopeTitle = $roomScopeTitle ?? '参与房间';
|
||
$roomScopeCheckedRoomIds = collect($roomScopeConfig['room_ids'] ?? [1])->map(fn ($roomId) => (int) $roomId)->all();
|
||
@endphp
|
||
|
||
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
|
||
<div>
|
||
<label class="mb-1 block text-xs font-bold text-gray-600">参与房间模式</label>
|
||
<select name="params[room_scope_mode]"
|
||
data-game-room-mode
|
||
class="w-full rounded-lg border border-gray-300 p-2 text-sm focus:border-indigo-400">
|
||
<option value="all" @selected(($roomScopeConfig['room_scope_mode'] ?? 'single') === 'all')>全部房间</option>
|
||
<option value="single" @selected(($roomScopeConfig['room_scope_mode'] ?? 'single') === 'single')>单选房间</option>
|
||
<option value="multiple" @selected(($roomScopeConfig['room_scope_mode'] ?? 'single') === 'multiple')>多选房间</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="md:col-span-2">
|
||
<label class="mb-2 block text-xs font-bold text-gray-600">{{ $roomScopeTitle }}</label>
|
||
<div class="grid grid-cols-2 gap-2 rounded-xl border border-dashed border-slate-200 bg-white p-3 lg:grid-cols-3">
|
||
@foreach ($availableRooms as $room)
|
||
<label class="flex items-center gap-2 rounded-lg border border-slate-100 px-3 py-2 text-sm text-slate-600">
|
||
<input type="checkbox"
|
||
name="params[room_ids][]"
|
||
value="{{ $room->id }}"
|
||
@checked(in_array((int) $room->id, $roomScopeCheckedRoomIds, true))
|
||
data-game-room-checkbox
|
||
class="rounded border-slate-300 text-indigo-600">
|
||
<span>#{{ $room->id }} {{ $room->name }}</span>
|
||
</label>
|
||
@endforeach
|
||
</div>
|
||
<p class="mt-2 text-xs text-gray-400">单选模式下只保留一个房间，多选模式可同时勾选多个房间。</p>
|
||
</div>
|
||
</div>
|
||
|
||
@once
|
||
@push('scripts')
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
function showAdminAlert(message, title = '提示', icon = 'ℹ️') {
|
||
if (window.adminDialog?.alert) {
|
||
window.adminDialog.alert(message, title, icon);
|
||
return;
|
||
}
|
||
|
||
window.alert(message);
|
||
}
|
||
|
||
document.querySelectorAll('[data-game-room-form]').forEach(function (form) {
|
||
form.addEventListener('submit', function (event) {
|
||
const modeSelect = this.querySelector('[data-game-room-mode]');
|
||
const roomCheckboxes = Array.from(this.querySelectorAll('[data-game-room-checkbox]'));
|
||
const checkedRooms = roomCheckboxes.filter(function (checkbox) {
|
||
return checkbox.checked;
|
||
});
|
||
|
||
if (!modeSelect) {
|
||
return;
|
||
}
|
||
|
||
if (modeSelect.value === 'single' && checkedRooms.length > 1) {
|
||
event.preventDefault();
|
||
showAdminAlert('单选房间模式下只能选择一个房间。', '房间选择有误', '⚠️');
|
||
return;
|
||
}
|
||
|
||
if (modeSelect.value === 'multiple' && checkedRooms.length === 0) {
|
||
event.preventDefault();
|
||
showAdminAlert('多选房间模式下，请至少选择一个房间。', '房间选择有误', '⚠️');
|
||
}
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
@endpush
|
||
@endonce
|