tracker/templates/mockups.html

{{define "content"}}{{with .Mockups}}
<div class="mock-page">
<header class="mock-heading"><div><p class="uc-eyebrow">DESIGN WORKSPACE · TNSU EMS</p><h1>Mockup</h1><p>หน้าจอ โครงสร้างการนำทาง และเส้นทางผู้ใช้ จากข้อมูลชุดเดียวกัน</p></div><a href="/files/mockups/README.md" class="mock-doc">Artifact guide ↗</a></header>
<nav class="mock-tabs" aria-label="Mockup"><a href="/mockup/sitemap" {{if eq .Tab "sitemap"}}aria-current="page"{{end}}>Sitemap <small>ผังหน้าจอ</small></a><a href="/mockup/page-flow" {{if eq .Tab "flow"}}aria-current="page"{{end}}>Page flow <small>เส้นทางตาม Use case</small></a><a href="/mockup/screens" {{if eq .Tab "screens"}}aria-current="page"{{end}}>Screen Listing <span>{{.Total}}</span></a></nav>
{{if eq .Tab "screens"}}{{if .Selected}}{{with .Selected}}
<a href="/mockup/screens" class="mock-back">← Screen Listing</a>
<header class="mock-detail-heading"><div><p class="uc-eyebrow">{{.ID}} · {{.Channel}} · {{.ModuleName}}</p><h2>{{.Title}}</h2><p>{{.Description}}</p></div><span class="mock-pill">{{.Status}}</span></header>
<div class="mock-detail-grid"><section class="mock-card"><div class="mock-card-heading"><h3>Screen preview</h3><a id="mock-open-preview" href="{{.Preview}}" target="_blank" rel="noopener">Open original ↗</a></div><div class="mock-variants" role="group" aria-label="Screen variants">{{range .Variants}}<button type="button" data-preview="/mockup-assets/{{.Preview}}" data-variant="{{.ID}}" aria-pressed="{{if eq .ID "default"}}true{{else}}false{{end}}">{{.Name}}</button>{{end}}</div><img id="mock-detail-image" class="mock-detail-image" src="{{.Preview}}" alt="{{.Title}} — แบบร่างหน้าจอ"></section>
<aside class="mock-detail-info"><section class="mock-card"><h3>Artifact details</h3><dl><dt>Screen ID</dt><dd><code>{{.ID}}</code></dd><dt>Channel</dt><dd>{{.Channel}}</dd><dt>Modules</dt><dd>{{range .Modules}}<span class="mock-pill">{{moduleLabel $.Mockups.ModuleNames .}}</span> {{end}}</dd><dt>Route proposal</dt><dd>{{if .Route}}<code>{{.Route}}</code>{{else}}ยังไม่ระบุ{{end}}</dd><dt>Manifest</dt><dd><a href="/files/{{.Manifest}}">{{.Manifest}}</a></dd><dt>Provenance</dt><dd>{{index .Provenance "note"}}</dd></dl><a href="/files/{{index .Provenance "source"}}">ดูแหล่งอ้างอิง ↗</a></section><section class="mock-card"><h3>Use cases ที่อ้างอิง</h3><div class="mock-links">{{range .UseCases}}<a href="/mockup/page-flow/{{.}}">{{.}} · Page flow ↗</a>{{else}}<p>ภาพประกอบจาก proposal ยังไม่ผูกกับขั้นตอนเฉพาะ</p>{{end}}</div></section><section class="mock-card"><h3>Reusable components</h3>{{range .Components}}<p><a href="/files/mockups/components/{{.}}/component.json"><code>{{.}}</code> ↗</a></p>{{else}}<p>ภาพ reference ต้นฉบับ</p>{{end}}<a href="/files/mockups/design-system/components.json">Component catalog ↗</a></section></aside></div>
{{end}}{{else}}
<div class="mock-section-heading"><div><h2>Screen Listing</h2><p>หน้าจอร่างจากรหัสอ้างอิงใน Use cases และภาพแนวคิดเดิม · ยังรอการตรวจแบบ</p></div><span class="mock-count">{{len .Screens}} / {{.Total}} screens</span></div>
<form method="get" class="mock-filters"><label>ค้นหา<input name="q" value="{{.Query}}" placeholder="รหัส ชื่อหน้า หรือ Use case"></label><label>Module<select name="module"><option value="">ทุก module</option>{{range .Modules}}<option value="{{.}}" {{if eq $.Mockups.Module .}}selected{{end}}>{{moduleLabel $.Mockups.ModuleNames .}}</option>{{end}}</select></label><label>Channel<select name="channel"><option value="">ทุก channel</option>{{range .Channels}}<option {{if eq $.Mockups.Channel .}}selected{{end}}>{{.}}</option>{{end}}</select></label><label>Status<select name="status"><option value="">ทุกสถานะ</option><option value="draft" {{if eq .Status "draft"}}selected{{end}}>Draft wireframe</option><option value="reference" {{if eq .Status "reference"}}selected{{end}}>Proposal reference</option></select></label><button>Filter</button><a href="/mockup/screens">Clear</a></form>
<div class="mock-table-wrap"><table class="mock-table"><thead><tr><th>Preview</th><th>Screen / Title</th><th>Channel / Module</th><th>Use cases</th><th>States</th><th>Status</th></tr></thead><tbody>{{range .Screens}}<tr class="mock-screen-row"><td><a href="/mockup/screens/{{.ID}}"><img loading="lazy" src="{{.Preview}}" alt="{{.Title}}"></a></td><td><a class="mock-screen-link" href="/mockup/screens/{{.ID}}"><code>{{.ID}}</code><strong>{{.Title}}</strong></a></td><td><p>{{.Channel}}</p>{{range .Modules}}<span class="mock-pill">{{moduleLabel $.Mockups.ModuleNames .}}</span> {{end}}</td><td>{{range .UseCases}}<a class="mock-uc-link" href="/mockup/page-flow/{{.}}">{{.}}</a> {{else}}—{{end}}</td><td>{{len .Variants}}</td><td><span class="mock-pill">{{.Status}}</span></td></tr>{{else}}<tr><td colspan="6" class="mock-empty">ไม่พบหน้าจอตามตัวกรอง</td></tr>{{end}}</tbody></table></div>
{{end}}{{else if and (eq .Tab "flow") (not .UseCase)}}
<div class="mock-section-heading"><div><h2>Page flow</h2><p>เลือก Use case เพื่อดูหน้าจอ ขั้นตอน และทุก Decision ที่มีในต้นฉบับ · จัดจากซ้ายไปขวา</p></div><span class="mock-count">{{len .UseCases}} use cases</span></div>
<label class="mock-flow-search">ค้นหา Use case<input id="mock-flow-search" placeholder="W-41, สมัครเรียน, การเงิน…"></label>
<div class="mock-flow-actions"><p>{{len .UseCases}} Use cases · {{len .FlowGroups}} modules</p><div><button type="button" data-flow-expand-all>Expand all</button><button type="button" data-flow-collapse-all>Collapse all</button></div></div>
<div class="mock-table-wrap"><table class="mock-table" id="mock-flow-table"><thead><tr><th>Use case</th><th>Module</th><th>ขั้นตอน</th><th>Decisions</th><th>Screen references</th><th></th></tr></thead>
{{range .FlowGroups}}<tbody data-flow-module="{{.Code}}"><tr class="mock-module-header"><th colspan="6"><button type="button" data-flow-toggle="{{.Code}}" aria-expanded="true"><span data-flow-chevron aria-hidden="true">▾</span><span class="mock-flow-name">{{.Name}}</span><span class="mock-flow-group-count" data-flow-count>{{len .Items}} Use cases</span></button></th></tr>
{{range .Items}}<tr class="mock-flow-row" data-flow-search="{{.ID}} {{.Name}} {{range .Modules}}{{.}} {{moduleLabel $.Mockups.ModuleNames .}} {{end}}"><td><a class="mock-screen-link" href="/mockup/page-flow/{{.ID}}"><code>{{.ID}}</code><strong>{{.Name}}</strong></a></td><td>{{range .Modules}}{{moduleLabel $.Mockups.ModuleNames .}} {{end}}</td><td>{{len .Flow}}</td><td>{{if .Workflow}}{{len .Workflow.Decisions}}{{else}}0{{end}}</td><td>{{len .Screens}}</td><td><a href="/mockup/page-flow/{{.ID}}">Open flow ↗</a></td></tr>{{end}}</tbody>{{end}}</table></div>
{{else}}
<div class="mock-section-heading"><div>{{if .UseCase}}<a href="/mockup/page-flow">← Page flows</a> · <a href="/use-cases/{{.UseCase.ID}}">Use case source ↗</a><h2>{{.UseCase.ID}} · {{.UseCase.Name}}</h2><p>ภาพหน้าจอตามขั้นตอน · เรียงซ้ายไปขวา · mapping เบื้องต้นยังเป็นข้อเสนอ</p>{{else}}<h2>Sitemap</h2><p>หน้าจอทั้งหมดที่พบในข้อมูลปัจจุบัน · เรียงบนลงล่าง · เส้น navigation เป็นร่างที่ตรวจแก้ได้</p>{{end}}</div><span class="mock-count" id="mock-count">Loading…</span></div>
<div class="mock-notice" id="mock-source-note">หน้าจอใช้ร่วมจาก Screen Listing · การจับคู่หน้า/สถานะและเส้นทางร่างต้องตรวจยืนยันกับผู้ใช้</div>
<section id="mock-editor" class="mock-editor" data-key="{{.Key}}" aria-label="Mockup diagram editor">
<div class="mock-toolbar"><label class="mock-add-label">Screen<select id="mock-add-screen"><option value="">Loading screens…</option></select></label><button id="mock-add">+ Add screen</button><button id="mock-decision">+ Decision</button><button id="mock-process">+ Process</button><button id="mock-connect" aria-pressed="false">Connect</button><span class="mock-toolbar-spacer"></span><button id="mock-undo" disabled>Undo</button><button id="mock-redo" disabled>Redo</button><button id="mock-save" disabled>Save diagram</button></div>
<div class="mock-toolbar mock-view-toolbar">{{if eq .Tab "sitemap"}}<label>Module<select id="mock-scope-module"><option value="">ทุก module</option></select></label><label>Channel<select id="mock-scope-channel"><option value="">ทุก channel</option></select></label>{{end}}<label>ค้นหาในผัง<input id="mock-find" placeholder="Screen ID / ชื่อหน้า"></label><button id="mock-focus">Focus</button><button id="mock-arrange">Arrange {{if .UseCase}}left → right{{else}}top → bottom{{end}}</button><button id="mock-fit">Fit to view</button><label>Zoom<select id="mock-zoom"><option value="fit">Fit</option><option value="0.1">10%</option><option value="0.25">25%</option><option value="0.5">50%</option><option value="0.75">75%</option><option value="1">100%</option><option value="1.5">150%</option><option value="2">200%</option></select></label><details class="mock-more"><summary>More ⋯</summary><div><button id="mock-export">Export JSON</button><button id="mock-reload">Reload saved</button><button id="mock-reset">Reset to source</button></div></details></div>
<div class="mock-editor-meta"><span>ลากตาม grid 20 · Ctrl + scroll เพื่อ zoom · ลากพื้นที่ว่างเพื่อเลื่อน · ลากจุดเชื่อมเพื่อสร้างเส้น · Double-click หน้าจอเพื่อดู detail</span><span id="mock-status" role="status">Loading…</span></div>
<div class="mock-workspace"><div id="mock-canvas" class="mock-canvas" tabindex="0" aria-label="Diagram canvas"><svg id="mock-svg" xmlns="http://www.w3.org/2000/svg" role="group" aria-label="Mockup graph"></svg></div>
<form id="mock-properties" class="mock-properties" onsubmit="return false"><h3>Properties</h3><p id="mock-no-selection">เลือกหน้าจอหรือเส้นเชื่อมเพื่อแก้ไข</p><fieldset id="mock-node-fields" hidden><label>Type<select id="mock-type"><option value="screen">Screen</option><option value="decision">Decision</option><option value="process">Process</option><option value="start">Start</option><option value="end">End</option></select></label><label>Title<input id="mock-title" maxlength="800"></label><label>Description<textarea id="mock-description" maxlength="20000" rows="6"></textarea></label><div id="mock-screen-fields"><label>Screen<select id="mock-screen"></select></label><label>State / Variant<select id="mock-variant"></select></label><a id="mock-screen-detail" href="/mockup/screens">Open screen detail ↗</a></div><p id="mock-step-ref" class="mock-muted"></p></fieldset><fieldset id="mock-edge-fields" hidden><label>From<select id="mock-source"></select></label><label>To<select id="mock-target"></select></label><label>Label<textarea id="mock-label" maxlength="2000" rows="3"></textarea></label><label>Start marker<select id="mock-tail"><option value="none">None</option><option value="arrow">Arrow</option><option value="open">Open</option><option value="diamond">Diamond</option></select></label><label>End marker<select id="mock-head"><option value="none">None</option><option value="arrow">Arrow</option><option value="open">Open</option><option value="diamond">Diamond</option></select></label></fieldset><button id="mock-delete" type="button" hidden>Delete selected</button></form></div>
<details class="mock-revisions" open><summary>Revision history <span id="mock-revision-count">0</span></summary><div class="mock-history-head"><p>บันทึก/Restore เก็บ snapshot เป็น revision ใหม่ · ข้อเสนอหน้าจอยังต้องตรวจแบบ</p><button id="mock-refresh-history">Refresh</button></div><div id="mock-history" class="mock-history"></div></details>
</section>
{{end}}
</div>{{end}}{{end}}