Dualside printing test realisation

This commit is contained in:
2026-09-17 18:58:25 +03:00
parent 613611d388
commit 906897b83e

View File

@ -15,6 +15,7 @@
const STATUS_LABEL = { const STATUS_LABEL = {
queued: 'В очереди', queued: 'В очереди',
printing: 'Печатается…', printing: 'Печатается…',
awaiting_flip: 'Переверните',
awaiting: 'Далее', awaiting: 'Далее',
done: 'Готово', done: 'Готово',
error: 'Ошибка', error: 'Ошибка',
@ -78,18 +79,31 @@
{#if store.job} {#if store.job}
{#each store.job.files as f, i (i + '-' + f.name)} {#each store.job.files as f, i (i + '-' + f.name)}
{@const b = badge(f.name)} {@const b = badge(f.name)}
<section class="file-card" class:current={f.status === 'awaiting' || f.status === 'printing'}> <section class="file-card" class:current={f.status === 'awaiting_flip' || f.status === 'awaiting' || f.status === 'printing'}>
<div class="file-row"> <div class="file-row">
{#if b}<span class="type-badge">{b}</span>{/if} {#if b}<span class="type-badge">{b}</span>{/if}
<span class="file-name" title={f.name}>{f.name}</span> <span class="file-name" title={f.name}>{f.name}</span>
<span class="file-status st-{f.status}">{STATUS_LABEL[f.status] ?? f.status}</span> <span class="file-status st-{f.status}">{STATUS_LABEL[f.status] ?? f.status}</span>
</div> </div>
<!-- ── Инструкция для РУЧНОГО ДУПЛЕКСА (после 1-го прохода) ── -->
{#if f.status === 'awaiting_flip'}
<ol class="pickup-hint flip-hint">
{#if f.remove_top_sheet}
<li>Уберите верхний листок</li>
{/if}
<li>Не переворачивая, положите остальные листы в слот ручной подачи</li>
</ol>
{/if}
<!-- ── Инструкция для обычного «забери документ» ── -->
{#if f.status === 'awaiting'} {#if f.status === 'awaiting'}
<ol class="pickup-hint"> <ol class="pickup-hint">
<li>Возьмите верхний листок</li> <li>Возьмите готовый документ</li>
<li>Нажмите далее</li> <li>Нажмите далее</li>
</ol> </ol>
{/if} {/if}
{#if f.error} {#if f.error}
<p class="file-error">{f.error}</p> <p class="file-error">{f.error}</p>
{/if} {/if}
@ -109,15 +123,22 @@
</label> </label>
{#if store.jobActive} {#if store.jobActive}
{#if store.job?.phase === 'awaiting_pickup'} {#if store.job?.phase === 'awaiting_flip'}
<!-- Ручной дуплекс: пользователь переложил бумагу -->
<button class="next-btn next-btn-flip" onclick={store.advanceJob}>
Готово — печатать обратную сторону
</button>
{:else if store.job?.phase === 'awaiting_pickup'}
<!-- Обычное: забрал документ → следующий -->
<button class="next-btn" onclick={store.advanceJob}>Далее</button> <button class="next-btn" onclick={store.advanceJob}>Далее</button>
{:else} {:else}
<!-- Кнопка видна, но серая и disabled пока сервер не допечатал --> <!-- Кнопка видна, но серая и disabled пока сервер не допечатал -->
<button class="next-btn next-btn-disabled" disabled> <button class="next-btn next-btn-disabled" disabled>
{store.currentStatus === 'printing' ? 'Печатается…' : 'Ожидание печати…'} {currentStatus === 'printing' ? 'Печатается…' : 'Ожидание печати…'}
</button> </button>
{/if} {/if}
<!-- Кнопка отмены (оригинальный код) -->
<button <button
class="cancel-btn" class="cancel-btn"
onpointerdown={startHold} onpointerdown={startHold}
@ -137,6 +158,16 @@
</div> </div>
<style> <style>
.st-awaiting_flip { color: #f59e0b; }
.flip-hint {
color: #f59e0b;
}
.next-btn-flip {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
box-shadow: 0 8px 24px -6px rgba(245, 158, 11, 0.4);
}
.page-container { width: 100%; min-height: 100dvh; display: flex; flex-direction: column; background: radial-gradient(120% 60% at 50% -10%, rgba(99,102,241,0.18) 0%, transparent 60%); font-family: system-ui, -apple-system, sans-serif; color: #f5f7fa; } .page-container { width: 100%; min-height: 100dvh; display: flex; flex-direction: column; background: radial-gradient(120% 60% at 50% -10%, rgba(99,102,241,0.18) 0%, transparent 60%); font-family: system-ui, -apple-system, sans-serif; color: #f5f7fa; }
.header { padding: 24px 20px 8px; display: flex; align-items: center; position: relative; } .header { padding: 24px 20px 8px; display: flex; align-items: center; position: relative; }
.back-btn { background: none; border: none; color: #6366f1; font-size: 15px; font-weight: 600; cursor: pointer; padding: 8px 4px; margin-right: auto; min-height: 44px; } .back-btn { background: none; border: none; color: #6366f1; font-size: 15px; font-weight: 600; cursor: pointer; padding: 8px 4px; margin-right: auto; min-height: 44px; }