v1.1.0 upd connections instruct and checkup

This commit is contained in:
2026-09-19 17:36:33 +03:00
parent db9be1a90a
commit 4aa07b621b
5 changed files with 278 additions and 233 deletions

View File

@ -7,7 +7,6 @@
import PaymentPage from '$lib/common/ui/PaymentPage.svelte';
import { plFiles, plCopies } from '$lib/common/utils/pricing.util.js';
import NetworkGate from '$lib/common/ui/NetworkGate.svelte';
import { isLocalNetwork } from '$lib/common/services/network.service.js';
let { onBack = () => {} } = $props();
const store = createPrintStore();
@ -38,32 +37,27 @@
/* ── Проверка сети перед отправкой печати ──
* Печать работает только в локальной сети принтера (домен → 192.168.20.1).
* Если «Я оплатил(а)» нажата не в той сети — показываем экран подключения
* и автоматически отправляем печать, как только сеть появится.
* Гейт открывается мгновенно по нажатию «Я оплатил(а)» и сам внутри себя
* делает первую проверку: если мы уже в локалке — короткая зелёная вспышка
* и печать ушла; если нет — инструкции и авто-проход при появлении сети.
*/
/** @type {null | 'checking' | 'blocked'} */
let printNetGate = $state(null);
/** true → показываем экран подключения к принтеру */
let printNetGate = $state(false);
async function handleConfirmPayment() {
if (printNetGate === 'checking') return;
printNetGate = 'checking';
const net = await isLocalNetwork();
if (net === 'local') {
printNetGate = null;
store.submitPrint();
} else {
printNetGate = 'blocked';
}
function handleConfirmPayment() {
// Гейт сам проверит сеть: если уже локальная — сразу пропустит и напечатает,
// если нет — покажет инструкции и будет ждать появления сети.
printNetGate = true;
}
function handleGateReady() {
// сеть принтера появилась — пропускаем пользователя и сразу печатаем
printNetGate = null;
printNetGate = false;
store.submitPrint();
}
function handleGateBack() {
printNetGate = null; // возврат к странице оплаты
printNetGate = false; // возврат к странице оплаты
}
</script>
@ -71,15 +65,8 @@
<!-- Страница прогресса печати (после оплаты) -->
<PrintProgress {store} onBack={onBack} />
{:else if store.showPayment}
{#if printNetGate === 'blocked'}
{#if printNetGate}
<NetworkGate mode="need-local" onReady={handleGateReady} onBack={handleGateBack} />
{:else if printNetGate === 'checking'}
<div class="page-container">
<div class="net-checking">
<div class="net-spinner"></div>
<p>Проверка подключения…</p>
</div>
</div>
{:else}
<PaymentPage
totalPrice={store.totalPrice}
@ -142,9 +129,6 @@
{/if}
<style>
.net-checking { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 40px 20px; color: #8b93a1; font-size: 15px; font-weight: 600; text-align: center; }
.net-spinner { width: 42px; height: 42px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.12); border-top-color: #6366f1; animation: net-spin 0.8s linear infinite; }
@keyframes net-spin { to { transform: rotate(360deg); } }
.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; }