259 lines
14 KiB
HTML
259 lines
14 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 panel-control-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="panel-header sidebar-drawer-header">
|
||
<span class="sidebar-drawer-title">Catalog controls</span>
|
||
<button class="sidebar-close-button panel-control-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>
|
||
|
||
<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>
|
||
|
||
<div class="select-control">
|
||
<div class="select-display" aria-hidden="true">
|
||
<svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#globe"></use></svg>
|
||
<span id="languageValue">Select language</span>
|
||
</div>
|
||
<select class="input-like language-native-select" id="languageSelect" aria-label="Language">
|
||
<option value="">Select language</option>
|
||
</select>
|
||
<span class="select-chevron" aria-hidden="true"></span>
|
||
</div>
|
||
|
||
<div class="manufacturer-picker" id="manufacturerPicker">
|
||
<button class="manufacturer-trigger" id="manufacturerTrigger" type="button" aria-haspopup="listbox" aria-expanded="false">
|
||
<svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#tag"></use></svg>
|
||
<span id="manufacturerValue">Select manufacturer</span>
|
||
<span class="select-chevron picker-chevron" aria-hidden="true"></span>
|
||
</button>
|
||
<div class="manufacturer-menu" id="manufacturerMenu" hidden>
|
||
<input class="manufacturer-search" id="manufacturerSearch" type="search" placeholder="Search manufacturer..." aria-label="Search manufacturer" />
|
||
<div class="manufacturer-options" id="manufacturerOptions" role="listbox"></div>
|
||
</div>
|
||
</div>
|
||
<div class="native-manufacturer-host" hidden>
|
||
<select class="input-like native-manufacturer-select" id="manufacturerSelect" aria-label="Manufacturer">
|
||
<option value="">Select manufacturer</option>
|
||
</select>
|
||
</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>
|
||
<div class="sidebar-footer">
|
||
<div class="mapping-box sidebar-mapping-box" id="mappingBox">
|
||
<details class="mapping-details" id="mappingDetails">
|
||
<summary class="mapping-summary">
|
||
<svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#layers"></use></svg>
|
||
<span class="mapping-title">Mapping</span>
|
||
<span class="mapping-state-dot is-missing" id="mappingState" role="status" aria-label="Mapping not loaded"></span>
|
||
<span class="mapping-toggle" aria-hidden="true"></span>
|
||
</summary>
|
||
<div class="mapping-panel" role="status">
|
||
<div class="mapping-detail-status" id="mappingStatusText">Mapping not loaded</div>
|
||
<div class="mapping-list" id="mappingList"></div>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
<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 secondary-panel" aria-label="Product details">
|
||
<div class="panel-header column-header">
|
||
<span>Product details</span>
|
||
<button class="column-toggle" id="secondaryPanelToggle" type="button" aria-expanded="true" aria-controls="fieldGrid" aria-label="Collapse product details" title="Collapse product details">‹</button>
|
||
</div>
|
||
<div class="field-grid" id="fieldGrid"></div>
|
||
</section>
|
||
|
||
<section class="data-panel main-workspace" aria-label="Catalog workspace">
|
||
<div class="panel-header column-header workspace-header">
|
||
<span>Main workspace</span>
|
||
<button class="column-toggle" id="mainWorkspaceToggle" type="button" aria-expanded="true" aria-controls="variantGrid" aria-label="Collapse main workspace" title="Collapse main workspace">›</button>
|
||
</div>
|
||
<div class="table-wrap">
|
||
<div class="variant-grid" id="variantGrid" role="table" aria-label="Product combinations">
|
||
<div class="variant-header" id="variantHeader" role="row"></div>
|
||
<div class="variant-rows" id="variantRows" role="rowgroup">
|
||
<div class="empty-row" id="emptyTableMessage" role="row">Select manufacturer to load data.</div>
|
||
</div>
|
||
</div>
|
||
</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"><svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#close"></use></svg><span>Close</span></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"><svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#close"></use></svg><span>Close</span></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"><svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#close"></use></svg><span>Close</span></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 9bplus DB</span>
|
||
</label>
|
||
<label class="settings-option">
|
||
<input type="radio" name="databaseMode" value="live" />
|
||
<span>Live 9bplus DB</span>
|
||
</label>
|
||
<label class="settings-option">
|
||
<input type="radio" name="databaseMode" value="scrape" />
|
||
<span>Local scrape 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"><svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#refresh"></use></svg><span>Test connection</span></button>
|
||
<p class="settings-note" id="localDbTestResult">Connection not tested.</p>
|
||
</div>
|
||
<p class="settings-note" id="databaseModeNote">Local 9bplus database selected.</p>
|
||
</fieldset>
|
||
|
||
<fieldset class="settings-group">
|
||
<legend>Appearance</legend>
|
||
<label class="settings-field">
|
||
<span>Light contrast</span>
|
||
<select class="settings-select" id="lightContrastSelect">
|
||
<option value="low">Soft</option>
|
||
<option value="medium" selected>Balanced</option>
|
||
<option value="high">High</option>
|
||
</select>
|
||
</label>
|
||
<label class="settings-field">
|
||
<span>Dark contrast</span>
|
||
<select class="settings-select" id="darkContrastSelect">
|
||
<option value="low">Soft</option>
|
||
<option value="medium" selected>Balanced</option>
|
||
<option value="high">High</option>
|
||
</select>
|
||
</label>
|
||
<p class="settings-note">Controls the contrast of the left sidebar and its controls.</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>
|