迁移房间后台表单事件
This commit is contained in:
@@ -0,0 +1,89 @@
|
||||
// 房间后台管理页事件代理,替代 Blade 内联显示/隐藏和删除确认逻辑。
|
||||
|
||||
let adminRoomControlsBound = false;
|
||||
|
||||
/**
|
||||
* 读取新增房间表单容器。
|
||||
*
|
||||
* @returns {HTMLElement|null}
|
||||
*/
|
||||
function getCreateRoomForm() {
|
||||
const formPanel = document.getElementById("create-room-form");
|
||||
|
||||
return formPanel instanceof HTMLElement ? formPanel : null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换新增房间表单显示状态。
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
function toggleCreateRoomForm() {
|
||||
getCreateRoomForm()?.classList.toggle("hidden");
|
||||
}
|
||||
|
||||
/**
|
||||
* 关闭新增房间表单。
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
function closeCreateRoomForm() {
|
||||
getCreateRoomForm()?.classList.add("hidden");
|
||||
}
|
||||
|
||||
/**
|
||||
* 校验错误回显时自动展开新增房间表单。
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
function openCreateRoomFormWhenInvalid() {
|
||||
const formPanel = getCreateRoomForm();
|
||||
|
||||
if (formPanel?.hasAttribute("data-room-create-open")) {
|
||||
formPanel.classList.remove("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 绑定房间管理页操作。
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
export function bindAdminRoomControls() {
|
||||
if (adminRoomControlsBound || typeof document === "undefined") {
|
||||
return;
|
||||
}
|
||||
|
||||
adminRoomControlsBound = true;
|
||||
openCreateRoomFormWhenInvalid();
|
||||
|
||||
document.addEventListener("click", (event) => {
|
||||
if (!(event.target instanceof Element)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const toggleButton = event.target.closest("[data-room-create-toggle]");
|
||||
if (toggleButton) {
|
||||
event.preventDefault();
|
||||
toggleCreateRoomForm();
|
||||
return;
|
||||
}
|
||||
|
||||
const closeButton = event.target.closest("[data-room-create-close]");
|
||||
if (closeButton) {
|
||||
event.preventDefault();
|
||||
closeCreateRoomForm();
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener("submit", (event) => {
|
||||
if (!(event.target instanceof HTMLFormElement)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const confirmMessage = event.target.getAttribute("data-room-delete-confirm");
|
||||
if (confirmMessage && !window.confirm(confirmMessage)) {
|
||||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -2,10 +2,12 @@ import './bootstrap';
|
||||
import { bindAdminAutoactControls } from './admin/autoact.js';
|
||||
import { bindAdminFishingEventsControls } from './admin/fishing-events.js';
|
||||
import { bindAdminGameConfigControls } from './admin/game-configs.js';
|
||||
import { bindAdminRoomControls } from './admin/rooms.js';
|
||||
import { bindAdminSignInRulesControls } from './admin/sign-in-rules.js';
|
||||
|
||||
// 后台共用入口只注册轻量事件代理,具体页面通过 data-* 属性决定是否响应。
|
||||
bindAdminAutoactControls();
|
||||
bindAdminFishingEventsControls();
|
||||
bindAdminGameConfigControls();
|
||||
bindAdminRoomControls();
|
||||
bindAdminSignInRulesControls();
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
</div>
|
||||
{{-- 新增房间按钮 --}}
|
||||
@if (auth()->id() === 1)
|
||||
<button onclick="document.getElementById('create-room-form').classList.toggle('hidden')"
|
||||
<button type="button" data-room-create-toggle
|
||||
class="px-4 py-2 bg-indigo-600 text-white rounded-md text-sm font-bold hover:bg-indigo-700 transition shadow-sm">
|
||||
+ 新增房间
|
||||
</button>
|
||||
@@ -20,7 +20,8 @@
|
||||
|
||||
{{-- 新增房间表单(默认隐藏) --}}
|
||||
@if (auth()->id() === 1)
|
||||
<div id="create-room-form" class="hidden border-b border-gray-200 bg-indigo-50 p-6">
|
||||
<div id="create-room-form" class="hidden border-b border-gray-200 bg-indigo-50 p-6"
|
||||
@if ($errors->any()) data-room-create-open @endif>
|
||||
<h3 class="text-sm font-bold text-indigo-800 mb-4">➕ 创建新房间</h3>
|
||||
<form action="{{ route('admin.rooms.store') }}" method="POST">
|
||||
@csrf
|
||||
@@ -67,7 +68,7 @@
|
||||
class="px-5 py-2 bg-indigo-600 text-white rounded-md font-bold hover:bg-indigo-700 shadow-sm transition text-sm">
|
||||
确认创建
|
||||
</button>
|
||||
<button type="button" onclick="document.getElementById('create-room-form').classList.add('hidden')"
|
||||
<button type="button" data-room-create-close
|
||||
class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md font-bold hover:bg-gray-300 transition text-sm">
|
||||
取消
|
||||
</button>
|
||||
@@ -75,14 +76,6 @@
|
||||
</form>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- 新增房间表单展开时自动滚到顶部校验错误 --}}
|
||||
@if ($errors->any())
|
||||
<script>
|
||||
document.getElementById('create-room-form').classList.remove('hidden');
|
||||
</script>
|
||||
@endif
|
||||
|
||||
<div class="p-6">
|
||||
<div class="space-y-4">
|
||||
@foreach ($rooms as $room)
|
||||
@@ -169,7 +162,7 @@
|
||||
@unless ($room->room_keep)
|
||||
<form action="{{ route('admin.rooms.destroy', $room->id) }}" method="POST"
|
||||
class="inline"
|
||||
onsubmit="return confirm('确定要删除房间「{{ $room->room_name }}」吗?此操作不可撤销!')">
|
||||
data-room-delete-confirm="确定要删除房间「{{ $room->room_name }}」吗?此操作不可撤销!">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<button type="submit"
|
||||
|
||||
Reference in New Issue
Block a user