david/video_upscaler
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement full system directory browser modal for temp directories

Browse Source 
- Add GET /api/system/browse-dir and POST /api/system/create-dir endpoints
- Add Folder Browser Modal overlay in index.html
- Add browse buttons to both job-specific and default setting temp dir inputs
- Add JS helpers and event handlers for directory list loading, parent navigation, directory selection, and new folder creation
This commit is contained in:
david
2026-06-29 10:02:58 -04:00
parent 006eece417
commit c7b637e70a
3 changed files with 319 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/index.html
+46 -2
View File
@@ -279,8 +279,13 @@
<!-- Custom Temporary Directory -->
<div class="form-group">
<label for="temp-dir-input"><i class="fa-solid fa-folder-open" style="color: var(--primary); margin-right: 0.25rem;"></i> Custom Temporary Files Directory</label>
<input type="text" id="temp-dir-input" placeholder="e.g. /mnt/fast_ssd/temp (Leave empty for default temp/)">
<p style="font-size: 0.72rem; color: var(--text-muted); margin-top: 2px;">
<div style="display: flex; gap: 0.5rem; align-items: stretch;">
<input type="text" id="temp-dir-input" placeholder="e.g. /mnt/fast_ssd/temp (Leave empty for default temp/)" style="flex: 1;">
<button type="button" id="browse-job-temp-btn" class="btn btn-secondary" style="padding: 0 1rem;" title="Browse files">
<i class="fa-solid fa-folder-open"></i>
</button>
</div>
<p style="font-size: 0.72rem; color: var(--text-muted); margin-top: 4px;">
Specify a custom location for temporary image frames to prevent running out of primary drive space.
</p>
</div>
@@ -594,6 +599,9 @@
<input type="text" id="default-temp-dir-input"
placeholder="e.g. /mnt/fast_ssd/upscaler_temp (Leave empty for project default temp/)"
style="flex: 1; padding: 0.6rem 0.85rem; border-radius: 8px; background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-primary); font-size: 0.88rem; font-family: 'JetBrains Mono', monospace;">
<button type="button" id="browse-default-temp-btn" class="btn btn-secondary" style="padding: 0 1rem;" title="Browse files">
<i class="fa-solid fa-folder-open"></i>
</button>
<button type="button" id="save-temp-dir-btn" class="btn btn-primary btn-small" style="white-space: nowrap; padding: 0.6rem 1.2rem;">
<i class="fa-solid fa-floppy-disk"></i> Save
</button>
@@ -724,6 +732,42 @@
</div>
</div>
<!-- Folder Browser Modal -->
<div id="folder-modal" class="modal-overlay" style="display: none; z-index: 1100;">
<div class="modal-card" style="max-width: 600px; display: flex; flex-direction: column; max-height: 80vh;">
<div class="modal-header">
<h3><i class="fa-solid fa-folder-open"></i> Select Directory</h3>
<button type="button" class="close-btn" id="folder-modal-close-btn">&times;</button>
</div>
<div class="modal-body" style="overflow-y: hidden; display: flex; flex-direction: column; height: 60vh; padding: 1.5rem; gap: 1rem;">
<div style="display: flex; gap: 0.5rem; align-items: center;">
<button type="button" id="folder-up-btn" class="btn btn-secondary btn-small" style="padding: 0.5rem 0.75rem;">
<i class="fa-solid fa-arrow-up"></i> Up
</button>
<input type="text" id="folder-current-path" style="flex: 1; padding: 0.5rem; border-radius: 6px; background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-primary); font-family: monospace; font-size: 0.85rem;" readonly>
</div>
<div id="folder-list" style="flex: 1; overflow-y: auto; border: 1px solid var(--border-color); border-radius: 8px; background: rgba(0, 0, 0, 0.2); padding: 0.5rem;">
<!-- Folder items list -->
</div>
<div style="display: flex; gap: 0.5rem; align-items: center; border-top: 1px solid var(--border-color); padding-top: 1rem;">
<input type="text" id="new-folder-name" placeholder="New folder name" style="flex: 1; padding: 0.5rem; border-radius: 6px; background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-primary); font-size: 0.88rem;">
<button type="button" id="create-folder-btn" class="btn btn-secondary btn-small" style="padding: 0.5rem 1rem;">
<i class="fa-solid fa-folder-plus"></i> Create Folder
</button>
</div>
<div id="folder-modal-status" style="font-size: 0.78rem; color: var(--danger); min-height: 1.2em;"></div>
<div style="display: flex; justify-content: flex-end; gap: 0.75rem; border-top: 1px solid var(--border-color); padding-top: 1rem;">
<button type="button" id="folder-cancel-btn" class="btn btn-secondary">Cancel</button>
<button type="button" id="folder-select-btn" class="btn btn-primary">Select Current Directory</button>
</div>
</div>
</div>
</div>
<!-- Javascript Orchestration -->
<script src="app.js"></script>
</body>