141 lines
4.8 KiB
HTML
141 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Shot Delete Event Fix Test</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
.test-section {
|
|
margin: 20px 0;
|
|
padding: 20px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 8px;
|
|
}
|
|
.event-log {
|
|
background: #f5f5f5;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
margin-top: 10px;
|
|
min-height: 100px;
|
|
font-family: monospace;
|
|
white-space: pre-wrap;
|
|
}
|
|
.table-row {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10px;
|
|
border: 1px solid #ccc;
|
|
margin: 5px 0;
|
|
cursor: pointer;
|
|
background: white;
|
|
}
|
|
.table-row:hover {
|
|
background: #f0f0f0;
|
|
}
|
|
.dropdown-button {
|
|
margin-left: auto;
|
|
padding: 5px 10px;
|
|
background: #007bff;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
.dropdown-button:hover {
|
|
background: #0056b3;
|
|
}
|
|
.delete-button {
|
|
background: #dc3545;
|
|
margin-left: 5px;
|
|
}
|
|
.delete-button:hover {
|
|
background: #c82333;
|
|
}
|
|
.clear-button {
|
|
background: #6c757d;
|
|
color: white;
|
|
border: none;
|
|
padding: 5px 10px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
margin-bottom: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Shot Delete Event Fix Test</h1>
|
|
<p>This test simulates the issue where clicking the delete button in a table row also triggers the row click event.</p>
|
|
|
|
<div class="test-section">
|
|
<h2>Test Scenario</h2>
|
|
<p>Click the "Delete Shot" button. It should NOT trigger the "Row clicked" event.</p>
|
|
<p>Click anywhere else on the row. It SHOULD trigger the "Row clicked" event.</p>
|
|
|
|
<button class="clear-button" onclick="clearLog()">Clear Log</button>
|
|
|
|
<div class="table-row" onclick="handleRowClick(event, 'Shot 001')">
|
|
<span>Shot 001 - Test Shot</span>
|
|
<button class="dropdown-button" onclick="handleEdit(event, 'Shot 001')">Edit</button>
|
|
<button class="dropdown-button delete-button" onclick="handleDelete(event, 'Shot 001')">Delete Shot</button>
|
|
</div>
|
|
|
|
<div class="table-row" onclick="handleRowClick(event, 'Shot 002')">
|
|
<span>Shot 002 - Another Shot</span>
|
|
<button class="dropdown-button" onclick="handleEdit(event, 'Shot 002')">Edit</button>
|
|
<button class="dropdown-button delete-button" onclick="handleDelete(event, 'Shot 002')">Delete Shot</button>
|
|
</div>
|
|
|
|
<div class="event-log" id="eventLog">Event log will appear here...</div>
|
|
</div>
|
|
|
|
<script>
|
|
function logEvent(message) {
|
|
const log = document.getElementById('eventLog');
|
|
const timestamp = new Date().toLocaleTimeString();
|
|
log.textContent += `[${timestamp}] ${message}\n`;
|
|
log.scrollTop = log.scrollHeight;
|
|
}
|
|
|
|
function clearLog() {
|
|
document.getElementById('eventLog').textContent = 'Event log cleared...\n';
|
|
}
|
|
|
|
function handleRowClick(event, shotName) {
|
|
// Check if the click target is within a button or other interactive element
|
|
const target = event.target;
|
|
if (target) {
|
|
// Check if the click is on a button or any interactive element
|
|
const isInteractiveElement = target.closest('button, [role="menuitem"], [data-radix-collection-item]');
|
|
if (isInteractiveElement) {
|
|
// Don't handle row click if clicking on interactive elements
|
|
logEvent(`Row click prevented for ${shotName} (clicked on interactive element)`);
|
|
return;
|
|
}
|
|
}
|
|
|
|
logEvent(`Row clicked: ${shotName} - This would open the shot detail panel`);
|
|
}
|
|
|
|
function handleEdit(event, shotName) {
|
|
event.stopPropagation();
|
|
event.preventDefault();
|
|
logEvent(`Edit clicked for ${shotName}`);
|
|
}
|
|
|
|
function handleDelete(event, shotName) {
|
|
event.stopPropagation();
|
|
event.preventDefault();
|
|
logEvent(`Delete clicked for ${shotName} - This would open the delete confirmation dialog`);
|
|
}
|
|
|
|
// Initialize log
|
|
clearLog();
|
|
</script>
|
|
</body>
|
|
</html> |