90 lines
3.3 KiB
Svelte
90 lines
3.3 KiB
Svelte
|
<!-- lib/pages/print/PrintMenu.svelte -->
|
|||
|
|
<script>
|
|||
|
|
import { createPrintStore } from './store.svelte.js';
|
|||
|
|
import PrintUI from './PrintUI.svelte';
|
|||
|
|
import PreviewOverlay from './PreviewOverlay.svelte';
|
|||
|
|
import PaymentPage from '$lib/common/ui/PaymentPage.svelte';
|
|||
|
|
import { plFiles, plCopies } from '$lib/common/utils/pricing.util.js';
|
|||
|
|
|
|||
|
|
let { onBack = () => {} } = $props();
|
|||
|
|
const store = createPrintStore();
|
|||
|
|
let fileInput;
|
|||
|
|
|
|||
|
|
function handleFileSelect(event) {
|
|||
|
|
store.addFiles(event.target.files);
|
|||
|
|
event.target.value = '';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const hasTierSmall = $derived(store.files.some((f) => (f.selectedPages?.size || 0) < 25));
|
|||
|
|
const hasTierMedium = $derived(store.files.some((f) => {
|
|||
|
|
const s = f.selectedPages?.size || 0;
|
|||
|
|
return s >= 25 && s < 1000;
|
|||
|
|
}));
|
|||
|
|
const hasTierLarge = $derived(store.files.some((f) => (f.selectedPages?.size || 0) >= 1000));
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
{#if store.showPayment}
|
|||
|
|
<PaymentPage
|
|||
|
|
totalPrice={store.totalPrice}
|
|||
|
|
filesCount={store.files.length}
|
|||
|
|
onBack={store.hidePayment}
|
|||
|
|
onConfirmPayment={store.submitPrint}
|
|||
|
|
/>
|
|||
|
|
{/if}
|
|||
|
|
|
|||
|
|
{#if !store.activeFile && !store.showPayment}
|
|||
|
|
<div class="page-container">
|
|||
|
|
<header class="header">
|
|||
|
|
<button class="back-btn" onclick={onBack}>←</button>
|
|||
|
|
<h1>Печать</h1>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<main class="options">
|
|||
|
|
{#if store.files.length === 0}
|
|||
|
|
<PrintUI as="upload-zone" onSelect={() => fileInput.click()} />
|
|||
|
|
{:else}
|
|||
|
|
{#each store.files as file (file.id)}
|
|||
|
|
<PrintUI
|
|||
|
|
as="file-card"
|
|||
|
|
{file}
|
|||
|
|
onToggle={store.toggleExpand}
|
|||
|
|
onRemove={store.removeFile}
|
|||
|
|
onUpdate={store.updateFile}
|
|||
|
|
onPreview={(f) => store.openPreview(f)}
|
|||
|
|
onPageSelect={(f) => (f.fileType === 'pdf' ? store.openGallery(f) : store.openPreview(f))}
|
|||
|
|
pagesLabel={store.pagesLabel}
|
|||
|
|
/>
|
|||
|
|
{/each}
|
|||
|
|
<button class="add-file-btn" onclick={() => fileInput.click()}>＋ Добавить файлы</button>
|
|||
|
|
{/if}
|
|||
|
|
</main>
|
|||
|
|
|
|||
|
|
<PrintUI
|
|||
|
|
as="footer"
|
|||
|
|
totalPrice={store.totalPrice}
|
|||
|
|
filesCount={store.files.length}
|
|||
|
|
extraCopies={store.extraCopies}
|
|||
|
|
isPrinting={store.isPrinting}
|
|||
|
|
onSubmit={store.openPayment}
|
|||
|
|
hasTierSmall={hasTierSmall}
|
|||
|
|
hasTierMedium={hasTierMedium}
|
|||
|
|
hasTierLarge={hasTierLarge}
|
|||
|
|
plFiles={plFiles}
|
|||
|
|
plCopies={plCopies}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<input type="file" bind:this={fileInput} accept="image/*,.pdf" multiple onchange={handleFileSelect} hidden />
|
|||
|
|
</div>
|
|||
|
|
{/if}
|
|||
|
|
|
|||
|
|
<PreviewOverlay {store} />
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
.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; }
|
|||
|
|
.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; }
|
|||
|
|
.header h1 { margin: 0; font-size: 28px; font-weight: 700; position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; }
|
|||
|
|
.options { flex: 1; padding: 24px 20px 16px; display: flex; flex-direction: column; gap: 14px; }
|
|||
|
|
.add-file-btn { align-self: center; background: none; border: 1px dashed rgba(255,255,255,0.18); color: #a9b0c0; font-size: 14px; font-weight: 600; padding: 12px 18px; border-radius: 14px; cursor: pointer; margin-top: 8px; }
|
|||
|
|
</style>
|