feat: mobile-friendly camera upload workflow
- Redesigned upload page into single unified card with camera/gallery buttons - Large touch-friendly capture buttons for mobile devices - Staging gallery grid (3 columns on mobile, auto-fill on desktop) - Sticky add-more bar and process button on mobile - Drag-and-drop support on desktop - Responsive CSS with mobile-first breakpoints
This commit is contained in:
Georges Haddad
+182
-31
@@ -1466,21 +1466,93 @@ a.stat.active { border-color: rgba(15,118,110,.24); background: var(--primary-so
|
||||
}
|
||||
|
||||
/* ============================
|
||||
Staging Gallery (two-step upload)
|
||||
Upload & Staging (mobile-first)
|
||||
============================ */
|
||||
.stage-controls {
|
||||
.desktop-only { display: block; }
|
||||
.mobile-only { display: none; }
|
||||
@media (max-width: 640px) {
|
||||
.desktop-only { display: none !important; }
|
||||
.mobile-only { display: block !important; }
|
||||
}
|
||||
|
||||
/* ── Capture buttons (empty state) ── */
|
||||
.upload-empty-state {
|
||||
padding: 1.5rem .5rem;
|
||||
text-align: center;
|
||||
transition: var(--transition);
|
||||
}
|
||||
.upload-empty-state.drag-over {
|
||||
background: var(--primary-soft);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
.capture-buttons {
|
||||
display: flex;
|
||||
gap: .75rem;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.stage-capture-btn svg { vertical-align: -.15em; margin-inline-end: .3rem; }
|
||||
.capture-btn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: .6rem;
|
||||
padding: 1.5rem 2rem;
|
||||
border-radius: var(--radius);
|
||||
background: var(--surface-tint);
|
||||
border: 2px dashed var(--border);
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
color: var(--text);
|
||||
font-size: .95rem;
|
||||
font-weight: 500;
|
||||
min-width: 160px;
|
||||
}
|
||||
.capture-btn:hover, .capture-btn:active {
|
||||
border-color: var(--primary);
|
||||
background: var(--primary-soft);
|
||||
}
|
||||
.capture-btn svg { stroke: var(--primary); }
|
||||
.capture-btn-camera { border-color: var(--primary-light); }
|
||||
.upload-hint {
|
||||
font-size: .82rem;
|
||||
color: var(--text-muted);
|
||||
margin-top: .5rem;
|
||||
}
|
||||
|
||||
/* ── Mobile: big touch targets ── */
|
||||
@media (max-width: 640px) {
|
||||
.capture-buttons {
|
||||
flex-direction: row;
|
||||
gap: .75rem;
|
||||
}
|
||||
.capture-btn {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 1.2rem .75rem;
|
||||
font-size: .88rem;
|
||||
}
|
||||
.capture-btn svg { width: 28px; height: 28px; }
|
||||
}
|
||||
|
||||
/* ── Gallery grid ── */
|
||||
.staging-gallery {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
|
||||
gap: .75rem;
|
||||
margin-bottom: 1rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
|
||||
gap: .6rem;
|
||||
margin-bottom: .75rem;
|
||||
transition: var(--transition);
|
||||
}
|
||||
.staging-gallery.drag-over {
|
||||
outline: 2px dashed var(--primary);
|
||||
outline-offset: 4px;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.staging-gallery {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: .5rem;
|
||||
}
|
||||
}
|
||||
.staging-thumb {
|
||||
position: relative;
|
||||
@@ -1495,27 +1567,20 @@ a.stat.active { border-color: rgba(15,118,110,.24); background: var(--primary-so
|
||||
justify-content: center;
|
||||
transition: var(--transition);
|
||||
}
|
||||
.staging-thumb.loading {
|
||||
opacity: .6;
|
||||
}
|
||||
.staging-thumb.removing {
|
||||
opacity: 0;
|
||||
transform: scale(.9);
|
||||
}
|
||||
.staging-thumb.loading { opacity: .6; }
|
||||
.staging-thumb.removing { opacity: 0; transform: scale(.9); }
|
||||
.staging-thumb img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.staging-thumb-name {
|
||||
font-size: .72rem;
|
||||
font-size: .68rem;
|
||||
color: var(--text-muted);
|
||||
padding: .25rem .4rem;
|
||||
padding: .2rem .3rem;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0; left: 0; right: 0;
|
||||
background: rgba(255,255,255,.85);
|
||||
backdrop-filter: blur(4px);
|
||||
overflow: hidden;
|
||||
@@ -1526,27 +1591,28 @@ a.stat.active { border-color: rgba(15,118,110,.24); background: var(--primary-so
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: rgba(220,38,38,.85);
|
||||
background: rgba(220,38,38,.9);
|
||||
color: #fff;
|
||||
font-size: 1.1rem;
|
||||
font-size: 1.2rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
opacity: 1; /* always visible on mobile */
|
||||
transition: opacity .15s;
|
||||
}
|
||||
@media (pointer: fine) {
|
||||
.staging-remove { opacity: 0; }
|
||||
.staging-thumb:hover .staging-remove { opacity: 1; }
|
||||
@media (pointer: coarse) { .staging-remove { opacity: 1; } }
|
||||
}
|
||||
|
||||
.staging-thumb-spinner {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
width: 24px; height: 24px;
|
||||
border: 3px solid var(--border);
|
||||
border-top-color: var(--primary);
|
||||
border-radius: 50%;
|
||||
@@ -1554,17 +1620,102 @@ a.stat.active { border-color: rgba(15,118,110,.24); background: var(--primary-so
|
||||
}
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
|
||||
.staging-count {
|
||||
text-align: center;
|
||||
/* ── Add more bar ── */
|
||||
.add-more-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .6rem;
|
||||
flex-wrap: wrap;
|
||||
padding: .5rem 0;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
.add-more-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: .4rem;
|
||||
padding: .55rem 1rem;
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--surface-tint);
|
||||
border: 1.5px solid var(--border);
|
||||
cursor: pointer;
|
||||
font-size: .85rem;
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
transition: var(--transition);
|
||||
}
|
||||
.add-more-btn:hover, .add-more-btn:active {
|
||||
border-color: var(--primary);
|
||||
background: var(--primary-soft);
|
||||
}
|
||||
.add-more-btn svg { stroke: var(--primary); flex-shrink: 0; }
|
||||
.staging-count-inline {
|
||||
margin-inline-start: auto;
|
||||
font-weight: 600;
|
||||
color: var(--primary-dark);
|
||||
margin-bottom: .75rem;
|
||||
font-size: 1rem;
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.add-more-bar {
|
||||
position: sticky;
|
||||
bottom: 72px; /* above mobile dock */
|
||||
background: rgba(248,246,241,.95);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
padding: .6rem .75rem;
|
||||
margin: 0 -1rem;
|
||||
border-top: 1px solid var(--border);
|
||||
z-index: 10;
|
||||
}
|
||||
.add-more-btn {
|
||||
padding: .65rem .85rem;
|
||||
font-size: .82rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Actions / process bar ── */
|
||||
.staging-actions { margin-top: .75rem; }
|
||||
.stage-action-buttons {
|
||||
display: flex;
|
||||
gap: .5rem;
|
||||
justify-content: center;
|
||||
margin-top: .75rem;
|
||||
}
|
||||
.btn-process { position: relative; }
|
||||
.btn-process-count {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 22px; height: 22px;
|
||||
background: #fff;
|
||||
color: var(--primary-dark);
|
||||
border-radius: 99px;
|
||||
font-size: .75rem;
|
||||
font-weight: 700;
|
||||
margin-inline-start: .5rem;
|
||||
padding: 0 .35rem;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.staging-actions {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
background: rgba(248,246,241,.97);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
padding: .75rem;
|
||||
margin: 0 -1rem;
|
||||
border-top: 1px solid var(--border);
|
||||
z-index: 11;
|
||||
}
|
||||
.stage-action-buttons {
|
||||
flex-direction: column;
|
||||
gap: .5rem;
|
||||
}
|
||||
.stage-action-buttons .btn {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
min-height: 52px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
+114
-148
@@ -32,23 +32,49 @@
|
||||
<div class="card-heading">
|
||||
<div>
|
||||
<h2>رفع ملفات جديدة</h2>
|
||||
<p>اختر دفعة صور أو PDF، ثم حدّد محرك الاستخراج قبل بدء المعالجة.</p>
|
||||
<p class="desktop-only">اختر دفعة صور أو PDF، ثم حدّد محرك الاستخراج قبل بدء المعالجة.</p>
|
||||
<p class="mobile-only">التقط صوراً أو اختر ملفات، ثم اضغط «معالجة الكل».</p>
|
||||
</div>
|
||||
</div>
|
||||
<form id="uploadForm" action="/upload" method="post" enctype="multipart/form-data">
|
||||
<input type="file" name="files" id="fileInput" multiple accept=".jpg,.jpeg,.png,.webp,.pdf" class="file-input">
|
||||
<label for="fileInput" class="drop-zone" id="dropZone">
|
||||
<div class="drop-icon">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
|
||||
</div>
|
||||
<p class="drop-text">اسحب الملفات هنا أو انقر للاختيار</p>
|
||||
<p class="drop-hint">JPG، PNG، PDF — يمكن رفع عدة ملفات دفعة واحدة</p>
|
||||
|
||||
<!-- Hidden file inputs -->
|
||||
<input type="file" id="cameraInput" accept="image/*" capture="environment" class="file-input">
|
||||
<input type="file" id="galleryInput" multiple accept=".jpg,.jpeg,.png,.webp,.pdf" class="file-input">
|
||||
|
||||
<!-- Empty state: show capture buttons -->
|
||||
<div id="emptyState" class="upload-empty-state">
|
||||
<div class="capture-buttons">
|
||||
<label for="cameraInput" class="capture-btn capture-btn-camera" id="cameraBtnLabel">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
|
||||
<span>التقط صورة</span>
|
||||
</label>
|
||||
<label for="galleryInput" class="capture-btn capture-btn-gallery">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
|
||||
<span>اختر من المعرض</span>
|
||||
</label>
|
||||
</div>
|
||||
<p class="upload-hint">التقط عدة صور، ثم اضغط «معالجة الكل» دفعة واحدة</p>
|
||||
</div>
|
||||
|
||||
<div id="fileList" class="file-list hidden"></div>
|
||||
<!-- Gallery: shown once images are added -->
|
||||
<div id="stagingGallery" class="staging-gallery hidden"></div>
|
||||
|
||||
<!-- Provider selector -->
|
||||
<div id="providerSection" class="provider-section hidden">
|
||||
<!-- Floating add-more button (appears after first image) -->
|
||||
<div id="addMoreBar" class="add-more-bar hidden">
|
||||
<label for="cameraInput" class="add-more-btn" id="addMoreCameraLabel">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
|
||||
التقط المزيد
|
||||
</label>
|
||||
<label for="galleryInput" class="add-more-btn">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
أضف ملفات
|
||||
</label>
|
||||
<span id="stagingCount" class="staging-count-inline">0 صور</span>
|
||||
</div>
|
||||
|
||||
<!-- Provider + process actions -->
|
||||
<div id="stagingActions" class="staging-actions hidden">
|
||||
<div class="provider-section">
|
||||
<label class="provider-label">محرك الاستخراج:</label>
|
||||
<div class="provider-options">
|
||||
{% for p in providers %}
|
||||
@@ -63,61 +89,9 @@
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="uploadActions" class="upload-actions hidden">
|
||||
<button type="submit" class="btn btn-primary btn-large">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
|
||||
رفع ومعالجة
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" onclick="clearFiles()">إلغاء</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- ─── Two-step: Stage pictures then process ─── -->
|
||||
<div class="upload-card" id="stagingCard">
|
||||
<div class="card-heading">
|
||||
<div>
|
||||
<h2>التقاط صور ثم معالجة دفعة واحدة</h2>
|
||||
<p>التقط أو أضف صوراً واحدة تلو الأخرى، ثم اضغط على «معالجة الكل» عند الانتهاء.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stage-controls">
|
||||
<input type="file" id="stageFileInput" accept=".jpg,.jpeg,.png,.webp,.pdf" capture="environment" class="file-input">
|
||||
<label for="stageFileInput" class="btn btn-secondary btn-large stage-capture-btn">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
|
||||
التقط صورة / أضف ملف
|
||||
</label>
|
||||
<input type="file" id="stageMultiInput" multiple accept=".jpg,.jpeg,.png,.webp,.pdf" class="file-input">
|
||||
<label for="stageMultiInput" class="btn btn-secondary btn-large">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
|
||||
اختر عدة ملفات
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div id="stagingGallery" class="staging-gallery hidden"></div>
|
||||
<div id="stagingCount" class="staging-count hidden"></div>
|
||||
|
||||
<div id="stagingActions" class="upload-actions hidden">
|
||||
<div class="provider-section">
|
||||
<label class="provider-label">محرك الاستخراج:</label>
|
||||
<div class="provider-options">
|
||||
{% for p in providers %}
|
||||
<label class="provider-option">
|
||||
<input type="radio" name="stage_provider" value="{{ p.id }}"
|
||||
{{ 'checked' if p.id == default_provider else '' }}>
|
||||
<span class="provider-card {{ 'provider-free' if p.id == 'easyocr' else 'provider-ai' }}">
|
||||
<span class="provider-name">{{ p.name }}</span>
|
||||
<span class="provider-model">{{ p.model }}</span>
|
||||
</span>
|
||||
</label>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="stage-action-buttons">
|
||||
<button type="button" class="btn btn-primary btn-large" id="processAllBtn" onclick="processStaged()">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>
|
||||
<button type="button" class="btn btn-primary btn-large btn-process" id="processAllBtn" onclick="processStaged()">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>
|
||||
معالجة الكل
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" onclick="clearStaged()">مسح الكل</button>
|
||||
@@ -149,95 +123,87 @@
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
const dropZone = document.getElementById('dropZone');
|
||||
const fileInput = document.getElementById('fileInput');
|
||||
const fileList = document.getElementById('fileList');
|
||||
const uploadActions = document.getElementById('uploadActions');
|
||||
|
||||
// label[for] natively triggers the file input on all platforms including iOS
|
||||
|
||||
dropZone.addEventListener('dragover', e => {
|
||||
e.preventDefault();
|
||||
dropZone.classList.add('drag-over');
|
||||
});
|
||||
dropZone.addEventListener('dragleave', () => dropZone.classList.remove('drag-over'));
|
||||
dropZone.addEventListener('drop', e => {
|
||||
e.preventDefault();
|
||||
dropZone.classList.remove('drag-over');
|
||||
fileInput.files = e.dataTransfer.files;
|
||||
showFiles(fileInput.files);
|
||||
});
|
||||
|
||||
fileInput.addEventListener('change', () => showFiles(fileInput.files));
|
||||
|
||||
function showFiles(files) {
|
||||
if (!files.length) return;
|
||||
fileList.innerHTML = Array.from(files).map(f =>
|
||||
`<div class="file-item">${f.name} <span class="file-size">${(f.size/1024).toFixed(0)} KB</span></div>`
|
||||
).join('');
|
||||
fileList.classList.remove('hidden');
|
||||
document.getElementById('providerSection').classList.remove('hidden');
|
||||
uploadActions.classList.remove('hidden');
|
||||
}
|
||||
|
||||
function clearFiles() {
|
||||
fileInput.value = '';
|
||||
fileList.innerHTML = '';
|
||||
fileList.classList.add('hidden');
|
||||
document.getElementById('providerSection').classList.add('hidden');
|
||||
uploadActions.classList.add('hidden');
|
||||
}
|
||||
|
||||
document.getElementById('uploadForm').addEventListener('submit', function() {
|
||||
document.querySelector('.btn-primary').textContent = 'جارٍ الرفع...';
|
||||
document.querySelector('.btn-primary').disabled = true;
|
||||
});
|
||||
|
||||
// ─── Staging workflow ─────────────────────────────────────────
|
||||
// ─── Unified staging workflow ─────────────────────────────────
|
||||
const stagedItems = []; // {id, image_path, name}
|
||||
let uploading = false;
|
||||
|
||||
async function stageFiles(fileInputEl) {
|
||||
const files = fileInputEl.files;
|
||||
const cameraInput = document.getElementById('cameraInput');
|
||||
const galleryInput = document.getElementById('galleryInput');
|
||||
const emptyState = document.getElementById('emptyState');
|
||||
const gallery = document.getElementById('stagingGallery');
|
||||
const addMoreBar = document.getElementById('addMoreBar');
|
||||
const actionsEl = document.getElementById('stagingActions');
|
||||
const countEl = document.getElementById('stagingCount');
|
||||
|
||||
// Wire up file inputs
|
||||
cameraInput.addEventListener('change', () => stageFiles(cameraInput));
|
||||
galleryInput.addEventListener('change', () => stageFiles(galleryInput));
|
||||
|
||||
// Desktop drag & drop on the empty state
|
||||
emptyState.addEventListener('dragover', e => { e.preventDefault(); emptyState.classList.add('drag-over'); });
|
||||
emptyState.addEventListener('dragleave', () => emptyState.classList.remove('drag-over'));
|
||||
emptyState.addEventListener('drop', e => {
|
||||
e.preventDefault();
|
||||
emptyState.classList.remove('drag-over');
|
||||
stageFileList(e.dataTransfer.files);
|
||||
});
|
||||
|
||||
// Also allow drag & drop on gallery when it's visible
|
||||
gallery.addEventListener('dragover', e => { e.preventDefault(); gallery.classList.add('drag-over'); });
|
||||
gallery.addEventListener('dragleave', () => gallery.classList.remove('drag-over'));
|
||||
gallery.addEventListener('drop', e => {
|
||||
e.preventDefault();
|
||||
gallery.classList.remove('drag-over');
|
||||
stageFileList(e.dataTransfer.files);
|
||||
});
|
||||
|
||||
async function stageFiles(inputEl) {
|
||||
const files = inputEl.files;
|
||||
if (!files.length) return;
|
||||
await stageFileList(files);
|
||||
inputEl.value = '';
|
||||
}
|
||||
|
||||
async function stageFileList(files) {
|
||||
if (!files.length) return;
|
||||
uploading = true;
|
||||
refreshUI();
|
||||
|
||||
for (const file of files) {
|
||||
const formData = new FormData();
|
||||
formData.append('files', file);
|
||||
|
||||
const thumb = addStagingPlaceholder(file.name);
|
||||
const thumb = addPlaceholder(file.name);
|
||||
|
||||
try {
|
||||
const res = await fetch('/upload/stage', { method: 'POST', body: formData });
|
||||
const data = await res.json();
|
||||
for (const item of data.staged) {
|
||||
stagedItems.push(item);
|
||||
updateStagingThumb(thumb, item);
|
||||
finishThumb(thumb, item);
|
||||
}
|
||||
} catch (e) {
|
||||
thumb.remove();
|
||||
alert('خطأ في رفع الملف: ' + file.name);
|
||||
}
|
||||
}
|
||||
|
||||
fileInputEl.value = '';
|
||||
refreshStagingUI();
|
||||
uploading = false;
|
||||
refreshUI();
|
||||
}
|
||||
|
||||
function addStagingPlaceholder(name) {
|
||||
const gallery = document.getElementById('stagingGallery');
|
||||
function addPlaceholder(name) {
|
||||
gallery.classList.remove('hidden');
|
||||
const div = document.createElement('div');
|
||||
div.className = 'staging-thumb loading';
|
||||
div.innerHTML = `<div class="staging-thumb-spinner"></div><span class="staging-thumb-name">${name}</span>`;
|
||||
div.innerHTML = '<div class="staging-thumb-spinner"></div>';
|
||||
gallery.appendChild(div);
|
||||
return div;
|
||||
}
|
||||
|
||||
function updateStagingThumb(thumb, item) {
|
||||
function finishThumb(thumb, item) {
|
||||
thumb.classList.remove('loading');
|
||||
thumb.dataset.id = item.id;
|
||||
thumb.innerHTML = `
|
||||
<img src="/uploads/${item.image_path}" alt="${item.name}">
|
||||
<img src="/uploads/${item.image_path}" alt="">
|
||||
<span class="staging-thumb-name">${item.name}</span>
|
||||
<button type="button" class="staging-remove" onclick="removeStagedItem(${item.id}, this)" title="إزالة">×</button>
|
||||
`;
|
||||
@@ -246,36 +212,39 @@ function updateStagingThumb(thumb, item) {
|
||||
async function removeStagedItem(id, btn) {
|
||||
const thumb = btn.closest('.staging-thumb');
|
||||
thumb.classList.add('removing');
|
||||
try {
|
||||
await fetch('/upload/staged/' + id, { method: 'DELETE' });
|
||||
} catch (e) { /* ignore */ }
|
||||
try { await fetch('/upload/staged/' + id, { method: 'DELETE' }); } catch(e) {}
|
||||
const idx = stagedItems.findIndex(s => s.id === id);
|
||||
if (idx !== -1) stagedItems.splice(idx, 1);
|
||||
thumb.remove();
|
||||
refreshStagingUI();
|
||||
refreshUI();
|
||||
}
|
||||
|
||||
function refreshStagingUI() {
|
||||
const count = stagedItems.length;
|
||||
const countEl = document.getElementById('stagingCount');
|
||||
const actionsEl = document.getElementById('stagingActions');
|
||||
const gallery = document.getElementById('stagingGallery');
|
||||
function refreshUI() {
|
||||
const n = stagedItems.length;
|
||||
const hasItems = n > 0 || uploading;
|
||||
|
||||
if (count > 0) {
|
||||
countEl.textContent = `${count} صورة جاهزة للمعالجة`;
|
||||
countEl.classList.remove('hidden');
|
||||
actionsEl.classList.remove('hidden');
|
||||
} else {
|
||||
countEl.classList.add('hidden');
|
||||
actionsEl.classList.add('hidden');
|
||||
gallery.classList.add('hidden');
|
||||
emptyState.classList.toggle('hidden', hasItems);
|
||||
gallery.classList.toggle('hidden', !hasItems);
|
||||
addMoreBar.classList.toggle('hidden', !hasItems);
|
||||
actionsEl.classList.toggle('hidden', n === 0);
|
||||
countEl.textContent = n === 1 ? 'صورة واحدة' : n + ' صور';
|
||||
|
||||
const processBtn = document.getElementById('processAllBtn');
|
||||
if (processBtn) {
|
||||
processBtn.querySelector('.btn-process-count')?.remove();
|
||||
if (n > 0) {
|
||||
const badge = document.createElement('span');
|
||||
badge.className = 'btn-process-count';
|
||||
badge.textContent = n;
|
||||
processBtn.appendChild(badge);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function processStaged() {
|
||||
function processStaged() {
|
||||
if (!stagedItems.length) return;
|
||||
const ids = stagedItems.map(s => s.id).join(',');
|
||||
const provider = document.querySelector('input[name="stage_provider"]:checked')?.value || '';
|
||||
const provider = document.querySelector('input[name="provider"]:checked')?.value || '';
|
||||
|
||||
const btn = document.getElementById('processAllBtn');
|
||||
btn.textContent = 'جارٍ المعالجة...';
|
||||
@@ -294,11 +263,8 @@ async function clearStaged() {
|
||||
try { await fetch('/upload/staged/' + item.id, { method: 'DELETE' }); } catch(e) {}
|
||||
}
|
||||
stagedItems.length = 0;
|
||||
document.getElementById('stagingGallery').innerHTML = '';
|
||||
refreshStagingUI();
|
||||
gallery.innerHTML = '';
|
||||
refreshUI();
|
||||
}
|
||||
|
||||
document.getElementById('stageFileInput').addEventListener('change', function() { stageFiles(this); });
|
||||
document.getElementById('stageMultiInput').addEventListener('change', function() { stageFiles(this); });
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user