diff --git a/src/main.js b/src/main.js index 4c74c47..b6682bb 100644 --- a/src/main.js +++ b/src/main.js @@ -1,15 +1,16 @@ import { renderScanView } from './ui/scan-view.js'; -import { showResult } from './ui/result-overlay.js'; +import { askForStack } from './ui/ambiguous-dialog.js'; import { startCamera } from './camera.js'; const app = document.querySelector('#app'); const view = renderScanView(app, { - onCapture: () => - showResult(app, { - stackId: 'B', - spec: { capacityGb: 64, rank: '4DRx4', speed: 'PC4-2400', formFactor: 'LRDIMM', partNumber: 'M386A8K40BM1-CRC4Y' }, - confidence: 'green', - }), + onCapture: async () => { + const answer = await askForStack(app, { + spec: { capacityGb: 64, rank: null, speed: null, formFactor: null, partNumber: null }, + candidates: ['A', 'B'], + }); + view.setLast(`Antwort: ${JSON.stringify(answer)}`); + }, onUndo: () => view.setLast('zurueckgenommen'), onOpenList: () => {}, onPickFile: () => {}, diff --git a/src/ui/ambiguous-dialog.js b/src/ui/ambiguous-dialog.js new file mode 100644 index 0000000..eeadd8f --- /dev/null +++ b/src/ui/ambiguous-dialog.js @@ -0,0 +1,78 @@ +/** + * Fasst die erkannten Merkmale zu einer kurzen Lesehilfe zusammen. + * Rein darstellend - keine fachliche Bewertung. + */ +function describeReading(spec) { + const parts = [ + spec.capacityGb ? `${spec.capacityGb}GB` : null, + spec.rank, + spec.speed, + spec.formFactor, + spec.partNumber, + ].filter(Boolean); + return parts.length ? parts.join(' ') : 'nichts Verwertbares'; +} + +/** + * Haelt den Ablauf an und laesst den Nutzer entscheiden. + * Der einzige Punkt der App, an dem eine Eingabe verlangt wird. + * Reine Darstellung: kennt weder Stapel-Logik noch Erkennung, + * bekommt die zur Wahl stehenden Stapel als Liste herein. + * + * @param {HTMLElement} root + * @param {{spec: object, candidates: string[]}} args + * @returns {Promise<{action: 'stack', stackId: string}|{action: 'new'}|{action: 'retry'}>} + */ +export function askForStack(root, { spec, candidates }) { + const overlay = document.createElement('div'); + overlay.className = 'overlay red'; + overlay.setAttribute('role', 'dialog'); + overlay.setAttribute('aria-modal', 'true'); + overlay.setAttribute('aria-labelledby', 'ambiguous-dialog-heading'); + overlay.innerHTML = ` +