迁移房间后台表单事件
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 { bindAdminAutoactControls } from './admin/autoact.js';
|
||||||
import { bindAdminFishingEventsControls } from './admin/fishing-events.js';
|
import { bindAdminFishingEventsControls } from './admin/fishing-events.js';
|
||||||
import { bindAdminGameConfigControls } from './admin/game-configs.js';
|
import { bindAdminGameConfigControls } from './admin/game-configs.js';
|
||||||
|
import { bindAdminRoomControls } from './admin/rooms.js';
|
||||||
import { bindAdminSignInRulesControls } from './admin/sign-in-rules.js';
|
import { bindAdminSignInRulesControls } from './admin/sign-in-rules.js';
|
||||||
|
|
||||||
// 后台共用入口只注册轻量事件代理,具体页面通过 data-* 属性决定是否响应。
|
// 后台共用入口只注册轻量事件代理,具体页面通过 data-* 属性决定是否响应。
|
||||||
bindAdminAutoactControls();
|
bindAdminAutoactControls();
|
||||||
bindAdminFishingEventsControls();
|
bindAdminFishingEventsControls();
|
||||||
bindAdminGameConfigControls();
|
bindAdminGameConfigControls();
|
||||||
|
bindAdminRoomControls();
|
||||||
bindAdminSignInRulesControls();
|
bindAdminSignInRulesControls();
|
||||||
|
|||||||
@@ -11,7 +11,7 @@
|
|||||||
</div>
|
</div>
|
||||||
{{-- 新增房间按钮 --}}
|
{{-- 新增房间按钮 --}}
|
||||||
@if (auth()->id() === 1)
|
@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">
|
class="px-4 py-2 bg-indigo-600 text-white rounded-md text-sm font-bold hover:bg-indigo-700 transition shadow-sm">
|
||||||
+ 新增房间
|
+ 新增房间
|
||||||
</button>
|
</button>
|
||||||
@@ -20,7 +20,8 @@
|
|||||||
|
|
||||||
{{-- 新增房间表单(默认隐藏) --}}
|
{{-- 新增房间表单(默认隐藏) --}}
|
||||||
@if (auth()->id() === 1)
|
@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>
|
<h3 class="text-sm font-bold text-indigo-800 mb-4">➕ 创建新房间</h3>
|
||||||
<form action="{{ route('admin.rooms.store') }}" method="POST">
|
<form action="{{ route('admin.rooms.store') }}" method="POST">
|
||||||
@csrf
|
@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">
|
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>
|
||||||
<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">
|
class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md font-bold hover:bg-gray-300 transition text-sm">
|
||||||
取消
|
取消
|
||||||
</button>
|
</button>
|
||||||
@@ -75,14 +76,6 @@
|
|||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
@endif
|
@endif
|
||||||
|
|
||||||
{{-- 新增房间表单展开时自动滚到顶部校验错误 --}}
|
|
||||||
@if ($errors->any())
|
|
||||||
<script>
|
|
||||||
document.getElementById('create-room-form').classList.remove('hidden');
|
|
||||||
</script>
|
|
||||||
@endif
|
|
||||||
|
|
||||||
<div class="p-6">
|
<div class="p-6">
|
||||||
<div class="space-y-4">
|
<div class="space-y-4">
|
||||||
@foreach ($rooms as $room)
|
@foreach ($rooms as $room)
|
||||||
@@ -169,7 +162,7 @@
|
|||||||
@unless ($room->room_keep)
|
@unless ($room->room_keep)
|
||||||
<form action="{{ route('admin.rooms.destroy', $room->id) }}" method="POST"
|
<form action="{{ route('admin.rooms.destroy', $room->id) }}" method="POST"
|
||||||
class="inline"
|
class="inline"
|
||||||
onsubmit="return confirm('确定要删除房间「{{ $room->room_name }}」吗?此操作不可撤销!')">
|
data-room-delete-confirm="确定要删除房间「{{ $room->room_name }}」吗?此操作不可撤销!">
|
||||||
@csrf
|
@csrf
|
||||||
@method('DELETE')
|
@method('DELETE')
|
||||||
<button type="submit"
|
<button type="submit"
|
||||||
|
|||||||
Reference in New Issue
Block a user