UnitPrint/web-app
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1.1.0 upd connections instruct and checkup

Browse Source
This commit is contained in:
TraceLumen
2026-09-19 17:36:33 +03:00
parent db9be1a90a
commit ce08f60c89
4 changed files with 139 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/lib/common/services/network.service.js
View File

@ -1,88 +1,45 @@
// lib/common/services/network.service.js // lib/common/services/network.service.js
// //
// Проверка подключения через эндпоинты бэкенда: // Определение сети, в которой находится устройство.
// //
// - /api/is_server — публичный сервер unitprint.ru. // - внутри локальной сети принтера (Wi-Fi UnitPrintLocal)
// Отвечает {"is_server":true} → интернет есть, скан доступен; // домен unitprint.ru резолвится на 192.168.20.1 — локальный сервер печати;
// - local.unitprint.ru/api/is_local — локальный сервер печати. // - из интернета домен отвечает публичным адресом 95.165.135.233.
// Отвечает {"is_local":true} → устройство в Wi-Fi принтера (UnitPrintLocal),
// печать доступна.
// //
// Сайт всегда отдаётся с unitprint.ru, поэтому проверка локалки ходит // Клиент не может сам отличить эти случаи по IP (сертификаты, mixed content),
// на отдельный хост local.unitprint.ru: вне локальной сети принтера // поэтому спрашиваем сам сервер: GET /api/is_local → { "is_local": true|false }.
// он просто недоступен. // Эндпоинт обязан быть на обоих инстансах:
// // локальный → { "is_local": true }
// Скан работает только через интернет, печать — только через локальную сеть. // публичный → { "is_local": false }
export const LOCAL_HOST = 'local.unitprint.ru'; export const DOMAIN = 'unitprint.ru';
export const PUBLIC_IP = '95.165.135.233';
export const LOCAL_IP = '192.168.20.1';
export const LOCAL_WIFI_NAME = 'UnitPrintLocal'; export const LOCAL_WIFI_NAME = 'UnitPrintLocal';
/** /**
* GET с таймаутом, читаем JSON. * Определяет текущий режим сети.
* @returns {Promise<any|null>} null — если хост недоступен или ошибка. * @returns {Promise<'local' | 'internet' | 'offline'>}
* - 'local' → отвечающий сервер — локальный (домен → 192.168.20.1)
* - 'internet' → отвечающий сервер — публичный (домен → 95.165.135.233)
* - 'offline' → сервер вообще не ответил
*/ */
async function getJson(url, timeoutMs = 4000) { export async function detectNetwork(timeoutMs = 6000) {
if (typeof fetch === 'undefined') return null; if (typeof fetch === 'undefined') return 'offline';
const controller = new AbortController(); const controller = new AbortController();
const timer = setTimeout(() => controller.abort(), timeoutMs); const timer = setTimeout(() => controller.abort(), timeoutMs);
try { try {
const res = await fetch(url, { const res = await fetch('/api/is_local', {
method: 'GET',
cache: 'no-store', cache: 'no-store',
signal: controller.signal, signal: controller.signal,
}); });
if (!res.ok) return null; if (!res.ok) return 'offline';
return await res.json(); const data = await res.json();
if (typeof data?.is_local !== 'boolean') return 'offline';
return data.is_local ? 'local' : 'internet';
} catch { } catch {
return null; return 'offline';
} finally { } finally {
clearTimeout(timer); clearTimeout(timer);
} }
} }
/**
* Доступность хоста в режиме 'no-cors': CORS не мешает, важен сам факт ответа.
*/
async function canReach(url, timeoutMs = 4000) {
if (typeof fetch === 'undefined') return false;
const controller = new AbortController();
const timer = setTimeout(() => controller.abort(), timeoutMs);
try {
await fetch(url, {
method: 'GET',
mode: 'no-cors',
cache: 'no-store',
signal: controller.signal,
});
return true;
} catch {
return false;
} finally {
clearTimeout(timer);
}
}
/**
* Устройство в локальной сети принтера:
* local.unitprint.ru/api/is_local отвечает {"is_local":true}.
*/
export async function isLocalNetwork() {
const ts = Date.now();
const httpsUrl = `https://${LOCAL_HOST}/api/is_local?ping=${ts}`;
const httpUrl = `http://${LOCAL_HOST}/api/is_local?ping=${ts}`;
const data = (await getJson(httpsUrl, 3000)) ?? (await getJson(httpUrl, 3000));
if (data) return data.is_local === true;
// JSON не читается (CORS / самоподписанный сертификат) —fallback:
// сам факт ответа local.unitprint.ru означает, что мы в локалке.
return canReach(httpsUrl, 3000);
}
/**
* Есть интернет: публичный сервер отвечает на /api/is_server.
*/
export async function isServerReachable() {
const data = await getJson(`/api/is_server?ping=${Date.now()}`, 5000);
return data?.is_server === true;
}

169
src/lib/common/ui/NetworkGate.svelte
View File

@ -15,7 +15,7 @@ mode:
mode, mode,
onReady = () => {}, onReady = () => {},
onBack = () => {}, onBack = () => {},
pollMs = 3000, pollMs = 700,
} = $props(); } = $props();
let success = $state(false); let success = $state(false);
@ -69,76 +69,109 @@ mode:
<button type="button" class="back-btn" onclick={() => onBack?.()}>←</button> <button type="button" class="back-btn" onclick={() => onBack?.()}>←</button>
</header> </header>
<main class="gate-content"> <main class="gate-content">
{#if success} {#if status === 'success'}
<div class="state-block"> <div class="state-block">
<div class="success-icon"> <div class="success-icon">
<svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"></polyline></svg> <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"></polyline></svg>
</div> </div>
<p class="state-title ok">{isLocalMode ? 'Принтер найден' : 'Интернет подключен'}</p> <p class="state-title ok">{isLocalMode ? 'Принтер найден' : 'Интернет подключен'}</p>
<p class="state-sub">Продолжаем…</p> <p class="state-sub">Продолжаем…</p>
</div> </div>
{:else} {:else}
<div class="icon-wrap {isLocalMode ? 'local' : 'internet'}"> <!-- Инструкции видны сразу: первая проверка идёт фоном -->
{#if isLocalMode} <div class="icon-wrap {isLocalMode ? 'local' : 'internet'}">
<svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> {#if isLocalMode}
<path d="M5 12.55a11 11 0 0 1 14.08 0"></path> <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M1.42 9a16 16 0 0 1 21.16 0"></path> <path d="M5 12.55a11 11 0 0 1 14.08 0"></path>
<path d="M8.53 16.11a6 6 0 0 1 6.95 0"></path> <path d="M1.42 9a16 16 0 0 1 21.16 0"></path>
<line x1="12" y1="20" x2="12.01" y2="20"></line> <path d="M8.53 16.11a6 6 0 0 1 6.95 0"></path>
</svg> <line x1="12" y1="20" x2="12.01" y2="20"></line>
{:else} </svg>
<svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> {:else}
<circle cx="12" cy="12" r="10"></circle> <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<line x1="2" y1="12" x2="22" y2="12"></line> <circle cx="12" cy="12" r="10"></circle>
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path> <line x1="2" y1="12" x2="22" y2="12"></line>
</svg> <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
{/if} </svg>
</div> {/if}
</div>
<div class="gate-info"> <div class="gate-info">
{#if isLocalMode} {#if isLocalMode}
<h2>Подключитесь к принтеру</h2> <h2>Нет связи с принтером</h2>
<p>Печать доступна только в локальной сети принтера. Подключите устройство к сети:</p> <p>Печать доступна только в локальной сети принтера. Подключите устройство к сети:</p>
{:else} {:else}
<h2>Необходимо подключение к интернету</h2> <h2>Необходимо подключение к интернету</h2>
<p>Сканирование доступно только онлайн</p> <p>Убедитесь, что вы отключены от локальной сети Wi-Fi принтера.</p>
{/if} {/if}
</div> </div>
{#if isLocalMode} <div class="steps">
<div class="steps-card"> {#if isLocalMode}
<div class="step"> <div class="step">
<span class="step-num">1</span> <span class="step-num">1</span>
<span class="step-body"> <div class="step-body">
<span class="step-text">Подключитесь к Wi-Fi</span> <span class="step-text">Подключитесь к Wi-Fi</span>
<span class="wifi-name"> <div class="wifi-chip-row">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <span class="wifi-chip">
<path d="M5 12.55a11 11 0 0 1 14.08 0"></path> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M8.53 16.11a6 6 0 0 1 6.95 0"></path> <path d="M5 12.55a11 11 0 0 1 14.08 0"></path>
<line x1="12" y1="20" x2="12.01" y2="20"></line> <path d="M8.53 16.11a6 6 0 0 1 6.95 0"></path>
</svg> <line x1="12" y1="20" x2="12.01" y2="20"></line>
{LOCAL_WIFI_NAME} </svg>
</span> {LOCAL_WIFI_NAME}
</span> </span>
</div> <button
<div class="step"> type="button"
<span class="step-num">2</span> class="copy-btn"
<span class="step-text">Отключите мобильный интернет</span> class:success={copySuccess}
</div> onclick={copyWifiName}
<div class="step"> title={copySuccess ? 'Скопировано' : 'Скопировать название сети'}
<span class="step-num">3</span> aria-label={copySuccess ? 'Скопировано' : 'Скопировать название сети'}
<span class="step-text">Отключите VPN</span> >
</div> {copySuccess ? '✓' : '📋'}
</div> </button>
{/if} </div>
</div>
</div>
<div class="step">
<span class="step-num">2</span>
<span class="step-text">Отключите мобильный интернет</span>
</div>
<div class="step">
<span class="step-num">3</span>
<span class="step-text">Отключите VPN</span>
</div>
{:else}
<div class="step">
<span class="step-num">1</span>
<span class="step-text">Отключитесь от сети <strong>{LOCAL_WIFI_NAME}</strong></span>
</div>
<div class="step">
<span class="step-num">2</span>
<span class="step-text">Включите мобильный интернет или подключитесь к другому Wi-Fi</span>
</div>
{/if}
</div>
<div class="waiting-row"> <div class="waiting-row">
<div class="spinner small"></div> <div class="spinner small"></div>
<span>Ожидание подключения…</span> <span>
</div> {#if status === 'checking'}
{/if} Проверка подключения…
</main> {:else if isLocalMode}
Ожидание подключения к принтеру…
{:else}
Ожидание интернета…
{/if}
</span>
</div>
<p class="auto-hint">Как только подключение появится — продолжим автоматически</p>
<button type="button" class="retry-btn" onclick={check}>Проверить снова</button>
{/if}
</main>
</div> </div>
<style> <style>

2
src/lib/pages/main/MainMenu.svelte
View File

@ -205,5 +205,5 @@
<div class="version"> <div class="version">
<span>v{backendVersion}</span> <span>v{backendVersion}</span>
<span>v1.0.9</span> <span>v1.1.0</span>
</div> </div>

40
src/lib/pages/print/PrintMenu.svelte
View File

@ -7,7 +7,6 @@
import PaymentPage from '$lib/common/ui/PaymentPage.svelte'; import PaymentPage from '$lib/common/ui/PaymentPage.svelte';
import { plFiles, plCopies } from '$lib/common/utils/pricing.util.js'; import { plFiles, plCopies } from '$lib/common/utils/pricing.util.js';
import NetworkGate from '$lib/common/ui/NetworkGate.svelte'; import NetworkGate from '$lib/common/ui/NetworkGate.svelte';
import { isLocalNetwork } from '$lib/common/services/network.service.js';
let { onBack = () => {} } = $props(); let { onBack = () => {} } = $props();
const store = createPrintStore(); const store = createPrintStore();
@ -38,32 +37,27 @@
/* ── Проверка сети перед отправкой печати ── /* ── Проверка сети перед отправкой печати ──
* Печать работает только в локальной сети принтера (домен → 192.168.20.1). * Печать работает только в локальной сети принтера (домен → 192.168.20.1).
* Если «Я оплатил(а)» нажата не в той сети — показываем экран подключения * Гейт открывается мгновенно по нажатию «Я оплатил(а)» и сам внутри себя
* и автоматически отправляем печать, как только сеть появится. * делает первую проверку: если мы уже в локалке — короткая зелёная вспышка
* и печать ушла; если нет — инструкции и авто-проход при появлении сети.
*/ */
/** @type {null | 'checking' | 'blocked'} */ /** true → показываем экран подключения к принтеру */
let printNetGate = $state(null); let printNetGate = $state(false);
async function handleConfirmPayment() { function handleConfirmPayment() {
if (printNetGate === 'checking') return; // Гейт сам проверит сеть: если уже локальная — сразу пропустит и напечатает,
printNetGate = 'checking'; // если нет — покажет инструкции и будет ждать появления сети.
const net = await isLocalNetwork(); printNetGate = true;
if (net === 'local') {
printNetGate = null;
store.submitPrint();
} else {
printNetGate = 'blocked';
}
} }
function handleGateReady() { function handleGateReady() {
// сеть принтера появилась — пропускаем пользователя и сразу печатаем // сеть принтера появилась — пропускаем пользователя и сразу печатаем
printNetGate = null; printNetGate = false;
store.submitPrint(); store.submitPrint();
} }
function handleGateBack() { function handleGateBack() {
printNetGate = null; // возврат к странице оплаты printNetGate = false; // возврат к странице оплаты
} }
</script> </script>
@ -71,15 +65,8 @@
<!-- Страница прогресса печати (после оплаты) --> <!-- Страница прогресса печати (после оплаты) -->
<PrintProgress {store} onBack={onBack} /> <PrintProgress {store} onBack={onBack} />
{:else if store.showPayment} {:else if store.showPayment}
{#if printNetGate === 'blocked'} {#if printNetGate}
<NetworkGate mode="need-local" onReady={handleGateReady} onBack={handleGateBack} /> <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} {:else}
<PaymentPage <PaymentPage
totalPrice={store.totalPrice} totalPrice={store.totalPrice}
@ -142,9 +129,6 @@
{/if} {/if}
<style> <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; } .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; }