add edit modal basic

This commit is contained in:
gebeto 2026-01-04 18:15:24 +02:00
parent ece963cbba
commit 39a07f07b1
2 changed files with 79 additions and 9 deletions

View File

@ -289,15 +289,16 @@ void setup() {
enterNewActivity(new BootActivity(renderer, mappedInputManager)); enterNewActivity(new BootActivity(renderer, mappedInputManager));
APP_STATE.loadFromFile(); APP_STATE.loadFromFile();
if (APP_STATE.openEpubPath.empty()) { onGoToFileTransfer();
onGoHome(); // if (APP_STATE.openEpubPath.empty()) {
} else { // onGoHome();
// Clear app state to avoid getting into a boot loop if the epub doesn't load // } else {
const auto path = APP_STATE.openEpubPath; // // Clear app state to avoid getting into a boot loop if the epub doesn't load
APP_STATE.openEpubPath = ""; // const auto path = APP_STATE.openEpubPath;
APP_STATE.saveToFile(); // APP_STATE.openEpubPath = "";
onGoToReader(path); // APP_STATE.saveToFile();
} // onGoToReader(path);
// }
// Ensure we're not still holding the power button before leaving setup // Ensure we're not still holding the power button before leaving setup
waitForPowerRelease(); waitForPowerRelease();

View File

@ -341,6 +341,21 @@
.actions-col { .actions-col {
width: 60px; width: 60px;
text-align: center; text-align: center;
display: flex;
}
/* Edit button styles */
.edit-btn {
background: none;
border: none;
cursor: pointer;
font-size: 1.1em;
padding: 4px 8px;
border-radius: 4px;
color: #95a5a6;
transition: all 0.15s;
}
.edit-btn:hover {
background-color: #fee;
} }
/* Failed uploads banner */ /* Failed uploads banner */
.failed-uploads-banner { .failed-uploads-banner {
@ -666,6 +681,21 @@
</div> </div>
</div> </div>
<div class="modal-overlay" id="editModal">
<div class="modal">
<button class="modal-close" onclick="closeEditModal()">&times;</button>
<h3>✏️ Edit</h3>
<div class="folder-form">
<input type="hidden" id="editItemType">
<label htmlFor="path-input" class="input-label">Path</label>
<select id="editItemPath" class="text-input" name="path" value="" />
<label htmlFor="name-input" class="file-info">Name</label>
<input id="editItemName" value="" autoFocus type="text" class="folder-input" placeholder="Name" />
<button class="folder-btn" onclick="confirmEdit()">Save</button>
</div>
</div>
</div>
<script> <script>
// get current path from query parameter // get current path from query parameter
let currentPath = decodeURIComponent(new URLSearchParams(window.location.search).get('path') || '/'); let currentPath = decodeURIComponent(new URLSearchParams(window.location.search).get('path') || '/');
@ -779,6 +809,7 @@
<td>Folder</td> <td>Folder</td>
<td>-</td> <td>-</td>
<td class="actions-col"> <td class="actions-col">
<button class="edit-btn" onclick="openEditModal('${file.name.replaceAll("'", "\\'")}', '${folderPath.replaceAll("'", "\\'")}', true)" title="Edit folder">✏️</button>
<button class="delete-btn" onclick="openDeleteModal('${file.name.replaceAll("'", "\\'")}', '${folderPath.replaceAll("'", "\\'")}', true)" title="Delete folder">🗑️</button> <button class="delete-btn" onclick="openDeleteModal('${file.name.replaceAll("'", "\\'")}', '${folderPath.replaceAll("'", "\\'")}', true)" title="Delete folder">🗑️</button>
</td> </td>
</tr> </tr>
@ -797,6 +828,7 @@
<td>${file.name.split('.').pop().toUpperCase()}</td> <td>${file.name.split('.').pop().toUpperCase()}</td>
<td>${formatFileSize(file.size)}</td> <td>${formatFileSize(file.size)}</td>
<td class="actions-col"> <td class="actions-col">
<button class="edit-btn" onclick="openEditModal('${file.name.replaceAll("'", "\\'")}', '${filePath.replaceAll("'", "\\'")}', true)" title="Edit folder">✏️</button>
<button class="delete-btn" onclick="openDeleteModal('${file.name.replaceAll("'", "\\'")}', '${filePath.replaceAll("'", "\\'")}', false)" title="Delete file">🗑️</button> <button class="delete-btn" onclick="openDeleteModal('${file.name.replaceAll("'", "\\'")}', '${filePath.replaceAll("'", "\\'")}', false)" title="Delete file">🗑️</button>
</td> </td>
</tr> </tr>
@ -1106,6 +1138,43 @@ function retryAllFailedUploads() {
xhr.send(formData); xhr.send(formData);
} }
// Edit functions
function openEditModal(name, path, isFolder) {
// document.getElementById('editItemName').textContent = (isFolder ? '📁 ' : '📄 ') + name;
document.getElementById('editItemName').value = name;
document.getElementById('editItemPath').value = path;
document.getElementById('editItemType').value = isFolder ? 'folder' : 'file';
document.getElementById('editModal').classList.add('open');
}
function closeEditModal() {
document.getElementById('editModal').classList.remove('open');
}
function confirmEdit() {
const editModal = document.querySelector("#editModal");
const path = editModal.querySelector('[name="path"]').value;
const newPath = editModal.querySelector('[name="newPath"]').value;
const formData = new FormData();
formData.append('path', path);
formData.append('new_path', newPath);
fetch('/api/move', {
method: 'POST',
body: formData,
}).then(res => {
if (res.status === 200) {
reloadContent();
closeDeleteModal();
return;
}
alert('Failed to edit: ' + xhr.responseText);
}).catch(err => {
alert('Failed to edit - network error');
})
}
hydrate(); hydrate();
</script> </script>
</body> </body>