154 lines
7.3 KiB
HTML
154 lines
7.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Live Inventory CDC Demo — FLÓ</title>
|
|
|
|
<!-- Load Noto Sans -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;700&display=swap" rel="stylesheet">
|
|
|
|
<script>
|
|
(function () {
|
|
var stored = localStorage.getItem('poc-theme');
|
|
var theme = stored || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'macchiato' : 'light');
|
|
document.documentElement.setAttribute('data-theme', theme);
|
|
})();
|
|
</script>
|
|
|
|
<link rel="stylesheet" href="/static/css/style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<header>
|
|
<a href="https://fló.fo" class="back-link">← FLÓ.FO</a>
|
|
<span class="brand">FLÓ <span class="brand-sep">/</span> <span class="brand-sub">CDC POC</span></span>
|
|
</header>
|
|
|
|
<main id="main" class="workbench">
|
|
<section class="interaction-pane">
|
|
<section class="inventory-shell">
|
|
<div class="section-heading">
|
|
<h2>Inventory</h2>
|
|
<span id="inventory-note" class="muted">Loading products...</span>
|
|
</div>
|
|
<div id="inventory-grid" class="inventory-grid"></div>
|
|
</section>
|
|
|
|
<section class="control-deck">
|
|
<select id="selected-item" name="id" class="visually-hidden" aria-label="Selected item"></select>
|
|
|
|
<section id="selected-summary" class="selected-summary">
|
|
<span class="summary-kicker">Active product</span>
|
|
<div>
|
|
<strong id="selected-name">No product selected</strong>
|
|
<span id="selected-meta" class="muted">Pick a product above.</span>
|
|
</div>
|
|
</section>
|
|
|
|
<form id="edit-form" class="action-form selected-actions">
|
|
<div class="primary-action-row">
|
|
<button type="button" id="sell-one" class="primary-stock-action">
|
|
<span>Sell</span>
|
|
<strong>1</strong>
|
|
</button>
|
|
<button type="button" id="restock-five" class="primary-stock-action">
|
|
<span>Restock</span>
|
|
<strong>5</strong>
|
|
</button>
|
|
</div>
|
|
|
|
<details class="more-actions">
|
|
<summary>More actions</summary>
|
|
<div class="more-actions-panel">
|
|
<fieldset class="edit-actions">
|
|
<legend>Rename or move</legend>
|
|
<div class="compact-form-grid">
|
|
<label>Name <input name="name" placeholder="leave unchanged"></label>
|
|
<label>Location <input name="location" placeholder="leave unchanged"></label>
|
|
</div>
|
|
<button type="submit">Save changes</button>
|
|
</fieldset>
|
|
|
|
<fieldset class="danger-actions">
|
|
<legend>Remove</legend>
|
|
<button type="button" id="delete-item" class="danger">Delete product</button>
|
|
</fieldset>
|
|
</div>
|
|
</details>
|
|
</form>
|
|
|
|
<form id="create-form" class="action-form create-actions">
|
|
<fieldset>
|
|
<legend>Create product</legend>
|
|
<p id="slot-note" class="muted">Create a product in the selected empty slot.</p>
|
|
<div class="create-form-grid">
|
|
<label>SKU <input name="sku" value="FL-440" required></label>
|
|
<label>Name <input name="name" value="USB barcode scanner" required></label>
|
|
<label>Quantity <input name="quantity" type="number" value="4" min="0" required></label>
|
|
<label>Location <input name="location" value="Torshavn" required></label>
|
|
<button type="submit">Create product</button>
|
|
</div>
|
|
</fieldset>
|
|
</form>
|
|
</section>
|
|
</section>
|
|
|
|
<aside class="cdc-pane" aria-label="CDC trace">
|
|
<div class="section-heading cdc-heading">
|
|
<h2>CDC trace</h2>
|
|
<span class="muted">Debezium -> NATS -> browser</span>
|
|
</div>
|
|
|
|
<section class="event-grid">
|
|
<fieldset>
|
|
<legend>Command sent</legend>
|
|
<pre><code id="command-json">No command sent yet.</code></pre>
|
|
</fieldset>
|
|
|
|
<fieldset>
|
|
<legend>CDC event received</legend>
|
|
<div id="event-summary" class="event-summary">Waiting for Debezium/NATS event...</div>
|
|
</fieldset>
|
|
|
|
<div class="detail-panel">
|
|
<div class="detail-tabs" role="tablist" aria-label="CDC details">
|
|
<button type="button" class="detail-tab active" data-detail-tab="raw">Raw JSON</button>
|
|
<button type="button" class="detail-tab" data-detail-tab="audit">Audit trail</button>
|
|
</div>
|
|
<div class="detail-view active" data-detail-view="raw">
|
|
<pre class="json-output"><code id="raw-json">{}</code></pre>
|
|
</div>
|
|
<div class="detail-view" data-detail-view="audit">
|
|
<div id="audit-list" class="audit-list">
|
|
<p class="muted">CDC events will appear here.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</aside>
|
|
</main>
|
|
|
|
<footer>
|
|
<span>© <script>document.write(new Date().getFullYear())</script> FLÓ.FO | ALL RIGHTS RESERVED</span>
|
|
<a href="https://www.facebook.com/people/FL%C3%93/61593006613799/" target="_blank" rel="noopener" class="footer-icon" aria-label="Facebook">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
|
|
</a>
|
|
<a href="https://git.flo.fo/FLO" target="_blank" rel="noopener" class="footer-icon" aria-label="Gitea">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
|
|
</a>
|
|
<a href="https://www.linkedin.com/in/bartal-l%C3%A6arsson-63793895/" target="_blank" rel="noopener" class="footer-icon" aria-label="LinkedIn">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
|
|
</a>
|
|
</footer>
|
|
|
|
|
|
<button class="theme-toggle" id="theme-toggle" aria-label="Toggle theme"></button>
|
|
|
|
<script src="/static/js/theme.js"></script>
|
|
<script src="/static/js/app.js"></script>
|
|
</body>
|
|
</html>
|