214 lines
11 KiB
HTML
214 lines
11 KiB
HTML
<!doctype html>
|
|
<html lang="cs">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Catalog Maker</title>
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
<link rel="stylesheet" href="/styles.css" />
|
|
<script src="/app.js" type="module"></script>
|
|
</head>
|
|
<body>
|
|
<main class="catalog-screen">
|
|
<button class="sidebar-open-button" id="sidebarOpenButton" type="button" aria-controls="sidebarDrawer" aria-expanded="false" aria-label="Open sidebar" title="Open sidebar">
|
|
<svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#menu"></use></svg>
|
|
</button>
|
|
|
|
<button class="sidebar-overlay" id="sidebarOverlay" type="button" aria-label="Close sidebar"></button>
|
|
|
|
<aside class="control-panel sidebar-drawer" id="sidebarDrawer" aria-label="Catalog controls">
|
|
<div class="sidebar-drawer-header">
|
|
<span class="sidebar-drawer-title">Catalog controls</span>
|
|
<button class="sidebar-close-button" id="sidebarCloseButton" type="button" aria-label="Close sidebar" title="Close sidebar">
|
|
<svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#close"></use></svg>
|
|
</button>
|
|
</div>
|
|
<div class="record-id" id="recordId"> </div>
|
|
|
|
<div class="arrow-row">
|
|
<button class="arrow-button arrow-button-prev" id="previousProductButton" type="button" title="Previous product" aria-label="Previous product"></button>
|
|
<button class="arrow-button arrow-button-next" id="nextProductButton" type="button" title="Next product" aria-label="Next product"></button>
|
|
</div>
|
|
|
|
<button class="drawer-trigger" id="parserDrawerToggle" type="button" aria-expanded="true" aria-controls="parserDrawer">
|
|
<svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#sliders"></use></svg>
|
|
<span>Parser tools</span>
|
|
<span class="drawer-chevron" aria-hidden="true">⌃</span>
|
|
</button>
|
|
|
|
<div class="sidebar-section parser-drawer" id="parserDrawer">
|
|
<div class="parser-actions" aria-label="Parser actions">
|
|
<button class="action-button" id="findSourcesButton" type="button"><svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#search"></use></svg><span>Find sources</span></button>
|
|
<button class="action-button" id="getPicturesButton" type="button"><svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#image"></use></svg><span>Get pictures</span></button>
|
|
<button class="action-button" type="button"><svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#sliders"></use></svg><span>Get features</span></button>
|
|
<button class="action-button" type="button"><svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#text"></use></svg><span>Get texts</span></button>
|
|
<button class="action-button" type="button"><svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#eye"></use></svg><span>Preview parsed data</span></button>
|
|
<button class="action-button" type="button" disabled><svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#save"></use></svg><span>Apply / Save</span></button>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="action-button" id="loadProductButton" type="button"><svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#info"></use></svg><span>Get product info - 00</span></button>
|
|
<button class="action-button" type="button"><svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#layers"></use></svg><span>Creat combin. - 02</span></button>
|
|
|
|
<input class="input-like" id="scanInput" aria-label="Scan EAN" placeholder="Scan EAN" />
|
|
|
|
<div class="picture-slot" id="pictureSlot">
|
|
<span>No picture</span>
|
|
</div>
|
|
|
|
<select class="input-like" id="languageSelect" aria-label="Language">
|
|
<option value="">Select language</option>
|
|
</select>
|
|
|
|
<select class="input-like" id="manufacturerSelect" aria-label="Manufacturer">
|
|
<option value="">Select manufacturer</option>
|
|
</select>
|
|
|
|
<div class="mapping-box" id="mappingBox">
|
|
<details class="mapping-details" id="mappingDetails">
|
|
<summary>
|
|
<span class="mapping-state is-missing" id="mappingState">Mapping not loaded</span>
|
|
<span class="mapping-toggle" aria-hidden="true"></span>
|
|
</summary>
|
|
<div class="mapping-list" id="mappingList"></div>
|
|
</details>
|
|
</div>
|
|
|
|
<button class="action-button primary" type="button"><svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#menu"></use></svg><span>Show menu (20)</span></button>
|
|
<button class="action-button" type="button"><svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#scan"></use></svg><span>Scraper - 03</span></button>
|
|
<button class="action-button" type="button"><svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#erase"></use></svg><span>BG remover - 04</span></button>
|
|
<div class="sidebar-footer">
|
|
<div class="app-status">
|
|
<span class="safe-mode" id="databaseStatus">DB read-only</span>
|
|
</div>
|
|
<button class="action-button" id="themeToggle" type="button" aria-pressed="false"><svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#moon"></use></svg><span>Dark theme</span></button>
|
|
<button class="action-button" id="settingsButton" type="button"><svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#settings"></use></svg><span>Settings</span></button>
|
|
</div>
|
|
</aside>
|
|
|
|
<section class="product-panel">
|
|
<div class="field-grid" id="fieldGrid"></div>
|
|
</section>
|
|
|
|
<section class="data-panel">
|
|
<div class="table-wrap">
|
|
<table class="variant-table">
|
|
<thead>
|
|
<tr id="variantHeader"></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="empty-row" id="emptyTableMessage" colspan="13">Select manufacturer to load data.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<div class="modal-backdrop" id="suggestedModal" hidden>
|
|
<section class="suggested-dialog" aria-labelledby="suggestedTitle">
|
|
<header class="suggested-header">
|
|
<h2 id="suggestedTitle">Sugested product for</h2>
|
|
<button class="modal-close" id="suggestedCloseButton" type="button">Close</button>
|
|
</header>
|
|
<div class="suggested-list" id="suggestedList"></div>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="modal-backdrop" id="sourceModal" hidden>
|
|
<section class="source-dialog" aria-labelledby="sourceTitle">
|
|
<header class="suggested-header">
|
|
<h2 id="sourceTitle">Source candidates</h2>
|
|
<button class="modal-close" id="sourceCloseButton" type="button">Close</button>
|
|
</header>
|
|
<div class="source-list" id="sourceList"></div>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="modal-backdrop" id="settingsModal" hidden>
|
|
<section class="settings-dialog" aria-labelledby="settingsTitle">
|
|
<header class="suggested-header">
|
|
<h2 id="settingsTitle">Settings</h2>
|
|
<button class="modal-close" id="settingsCloseButton" type="button">Close</button>
|
|
</header>
|
|
<div class="settings-content">
|
|
<fieldset class="settings-group">
|
|
<legend>Database</legend>
|
|
<label class="settings-option">
|
|
<input type="radio" name="databaseMode" value="local" checked />
|
|
<span>Local DB</span>
|
|
</label>
|
|
<label class="settings-option">
|
|
<input type="radio" name="databaseMode" value="live" />
|
|
<span>Live DB</span>
|
|
</label>
|
|
<div class="local-db-fields" id="localDbFields">
|
|
<label class="settings-field">
|
|
<span>Host</span>
|
|
<input id="localDbHost" type="text" autocomplete="off" value="127.0.0.1" />
|
|
</label>
|
|
<label class="settings-field">
|
|
<span>Port</span>
|
|
<input id="localDbPort" type="number" inputmode="numeric" value="3306" />
|
|
</label>
|
|
<label class="settings-field">
|
|
<span>Database</span>
|
|
<input id="localDbName" type="text" autocomplete="off" value="9bplus" />
|
|
</label>
|
|
<label class="settings-field">
|
|
<span>User</span>
|
|
<input id="localDbUser" type="text" autocomplete="username" value="root" />
|
|
</label>
|
|
<label class="settings-field">
|
|
<span>Password</span>
|
|
<input id="localDbPassword" type="text" autocomplete="off" />
|
|
</label>
|
|
<button class="settings-test-button" id="testLocalDbButton" type="button">Test connection</button>
|
|
<p class="settings-note" id="localDbTestResult">Connection not tested.</p>
|
|
</div>
|
|
<p class="settings-note" id="databaseModeNote">Local test database selected.</p>
|
|
</fieldset>
|
|
|
|
<fieldset class="settings-group">
|
|
<legend>Access permissions</legend>
|
|
<label class="settings-option">
|
|
<input type="checkbox" id="allowReadToggle" checked disabled />
|
|
<span>Allow read</span>
|
|
</label>
|
|
<label class="settings-option">
|
|
<input type="checkbox" id="allowInsertToggle" />
|
|
<span>Allow insert</span>
|
|
</label>
|
|
<label class="settings-option">
|
|
<input type="checkbox" id="allowUpdateToggle" />
|
|
<span>Allow update</span>
|
|
</label>
|
|
<label class="settings-option">
|
|
<input type="checkbox" id="allowDeleteToggle" />
|
|
<span>Allow delete</span>
|
|
</label>
|
|
<p class="settings-note">Live DB is always read-only. Write permissions apply only to Local DB.</p>
|
|
</fieldset>
|
|
|
|
<fieldset class="settings-group">
|
|
<legend>Execution safety</legend>
|
|
<label class="settings-option">
|
|
<input type="radio" name="transactionMode" value="transaction" checked />
|
|
<span>Transaction mode: confirm before commit</span>
|
|
</label>
|
|
<label class="settings-option">
|
|
<input type="radio" name="transactionMode" value="dry-run" />
|
|
<span>Dry-run: preview SQL only</span>
|
|
</label>
|
|
<div class="settings-permissions">
|
|
<span>DROP, TRUNCATE and ALTER remain blocked.</span>
|
|
<span>Every write will be logged before execution.</span>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</body>
|
|
</html>
|