fix: 修正位置字段未正确写入问题

This commit is contained in:
2025-10-27 15:37:28 +08:00
parent 46de45f113
commit e13815e4d7
2 changed files with 130 additions and 107 deletions

View File

@@ -5,7 +5,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Saved Images</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.0/socket.io.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.0/socket.io.js "></script>
<style>
body {
font-family: Arial, sans-serif;
@@ -75,6 +75,15 @@
a:hover {
text-decoration: underline;
}
/* Style for position input fields */
.position-input {
width: 50px;
padding: 4px;
text-align: center;
border: 1px solid #ccc;
border-radius: 3px;
}
</style>
</head>
@@ -187,37 +196,18 @@
// Actions
const actionsCell = row.insertCell(6);
console.log(image);
actionsCell.innerHTML = `
<button onclick="deleteImage(${image.id})">删除</button>
<button onclick="manualLabelLeft(${image.id})">人工标注 (左)</button>
<button onclick="manualLabelRight(${image.id})">人工标注 (右)</button>
<!-- 添加位置编号下拉框 -->
<button onclick="deleteImage(${image.id})">DEL</button>
<button onclick="window.open('/manual-annotation?id=${image.id}&side=left', '_blank')">LBL</button>
<button onclick="window.open('/manual-annotation?id=${image.id}&side=right', '_blank')">LBR</button>
<!-- Position inputs -->
<label>左:</label>
<select id="left-position-${image.id}" onchange="updatePosition(${image.id})">
<option value="0" ${image.left_position == 0 ? 'selected' : ''}>未设置</option>
<option value="1" ${image.left_position == 1 ? 'selected' : ''}>1</option>
<option value="2" ${image.left_position == 2 ? 'selected' : ''}>2</option>
<option value="3" ${image.left_position == 3 ? 'selected' : ''}>3</option>
<option value="4" ${image.left_position == 4 ? 'selected' : ''}>4</option>
<option value="5" ${image.left_position == 5 ? 'selected' : ''}>5</option>
<option value="6" ${image.left_position == 6 ? 'selected' : ''}>6</option>
<option value="7" ${image.left_position == 7 ? 'selected' : ''}>7</option>
<option value="8" ${image.left_position == 8 ? 'selected' : ''}>8</option>
<option value="9" ${image.left_position == 9 ? 'selected' : ''}>9</option>
</select>
<input type="number" id="left-position-${image.id}" class="position-input" value="${image.left_position || 0}" min="0" max="14" onchange="updatePosition(${image.id})">
<label>右:</label>
<select id="right-position-${image.id}" onchange="updatePosition(${image.id})">
<option value="0" ${image.right_position == 0 ? 'selected' : ''}>未设置</option>
<option value="1" ${image.right_position == 1 ? 'selected' : ''}>1</option>
<option value="2" ${image.right_position == 2 ? 'selected' : ''}>2</option>
<option value="3" ${image.right_position == 3 ? 'selected' : ''}>3</option>
<option value="4" ${image.right_position == 4 ? 'selected' : ''}>4</option>
<option value="5" ${image.right_position == 5 ? 'selected' : ''}>5</option>
<option value="6" ${image.right_position == 6 ? 'selected' : ''}>6</option>
<option value="7" ${image.right_position == 7 ? 'selected' : ''}>7</option>
<option value="8" ${image.right_position == 8 ? 'selected' : ''}>8</option>
<option value="9" ${image.right_position == 9 ? 'selected' : ''}>9</option>
</select>
<input type="number" id="right-position-${image.id}" class="position-input" value="${image.right_position || 0}" min="0" max="14" onchange="updatePosition(${image.id})">
`;
});
}
@@ -240,6 +230,36 @@
}
}
async function updatePosition(id) {
const leftInput = document.getElementById(`left-position-${id}`);
const rightInput = document.getElementById(`right-position-${id}`);
const leftValue = parseInt(leftInput.value) || 0;
const rightValue = parseInt(rightInput.value) || 0;
console.log(`Updating position for image ID ${id}: Left=${leftValue}, Right=${rightValue}`);
if (leftValue < 0 || leftValue > 14 || rightValue < 0 || rightValue > 14) {
alert("Position values must be between 0 and 14.");
loadImages(); // Reload to reset invalid values
return;
}
try {
const response = await fetch('/api/images/position', {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ id: id, left_position: leftValue, right_position: rightValue })
});
if (!response.ok) {
const errorData = await response.json().catch(() => ({ error: response.statusText }));
throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
}
document.getElementById('status').textContent = `Position for image ID ${id} updated.`;
} catch (error) {
console.error('Error updating position:', error);
document.getElementById('status').textContent = 'Error updating position: ' + error.message;
}
}
async function deleteImage(id) {
if (!confirm(`Are you sure you want to delete image ID ${id}?`)) return;