| | <!doctype html> |
| | <html lang="ja"> |
| | <meta charset="utf-8"> |
| | <title>顧客管理</title> |
| | <meta name="viewport" content="width=device-width, initial-scale=1"> |
| | <style> |
| | body { font-family: system-ui, -apple-system, "Noto Sans JP", sans-serif; margin: 24px; } |
| | .row { display:flex; gap:16px; flex-wrap:wrap; } |
| | .card { border:1px solid #e5e7eb; border-radius:12px; padding:16px; flex:1; min-width:320px; } |
| | label{display:block; font-size:12px; color:#374151; margin-top:8px} |
| | input{width:100%; padding:10px; border:1px solid #d1d5db; border-radius:8px} |
| | .btn{ padding:10px 14px; border:1px solid #0ea5e9; background:#0ea5e9; color:#fff; border-radius:8px; cursor:pointer; } |
| | table{ width:100%; border-collapse:collapse; margin-top:8px } |
| | th,td{ border-bottom:1px solid #eee; padding:8px; font-size:14px } |
| | </style> |
| | <body> |
| | <h1>顧客管理</h1> |
| | <div>API Key: <input id="apiKey" style="width:200px"> <button class="btn" id="save">保存</button></div> |
| |
|
| | <div class="row" style="margin-top:12px"> |
| | <div class="card" style="max-width:500px"> |
| | <h3>新規顧客</h3> |
| | <label>会社名*</label><input id="name"> |
| | <label>メール</label><input id="email"> |
| | <label>電話</label><input id="phone"> |
| | <label>住所</label><input id="address"> |
| | <div class="row"> |
| | <div style="flex:1"><label>市区町村</label><input id="city"></div> |
| | <div style="flex:1"><label>国</label><input id="country" placeholder="JP"></div> |
| | </div> |
| | <div style="margin-top:8px"><button class="btn" id="create">登録</button></div> |
| | <div id="msg" style="margin-top:6px"></div> |
| | </div> |
| |
|
| | <div class="card"> |
| | <h3>顧客一覧</h3> |
| | <div>検索: <input id="q" placeholder="社名/メール/電話"> <button class="btn" id="search">検索</button></div> |
| | <table><thead><tr><th>ID</th><th>社名</th><th>連絡先</th></tr></thead><tbody id="tb"></tbody></table> |
| | </div> |
| | </div> |
| |
|
| | <script> |
| | const BASE = location.origin; |
| | const LSKEY = "mini_invoice_api_key"; |
| | const apiKeyEl = document.getElementById('apiKey'); apiKeyEl.value = localStorage.getItem(LSKEY) || "dev"; |
| | document.getElementById('save').onclick = ()=>{ localStorage.setItem(LSKEY, apiKeyEl.value.trim()); alert("保存しました"); load(); }; |
| | const headers = ()=>({ "Content-Type":"application/json", "X-API-Key": (localStorage.getItem(LSKEY)||"dev") }); |
| | |
| | async function load(){ |
| | const q = document.getElementById('q').value.trim(); |
| | const url = new URL(BASE + "/customers"); if(q) url.searchParams.set("q", q); |
| | const res = await fetch(url, {headers:headers()}); const tb = document.getElementById('tb'); tb.innerHTML=""; |
| | if(!res.ok){ tb.innerHTML = `<tr><td colspan="3">読み込みエラー: ${await res.text()}</td></tr>`; return; } |
| | const js = await res.json(); |
| | (js.data||[]).forEach(c=>{ |
| | const tr = document.createElement('tr'); |
| | tr.innerHTML = `<td>${c.id}</td><td>${c.name}</td><td>${[c.email,c.phone].filter(Boolean).join(" / ")}</td>`; |
| | tb.append(tr); |
| | }); |
| | } |
| | document.getElementById('search').onclick = load; load(); |
| | |
| | document.getElementById('create').onclick = async ()=>{ |
| | const name = document.getElementById('name').value.trim(); if(!name){ alert("会社名は必須です"); return; } |
| | const payload = { |
| | name, |
| | email: document.getElementById('email').value||null, |
| | phone: document.getElementById('phone').value||null, |
| | address: document.getElementById('address').value||null, |
| | city: document.getElementById('city').value||null, |
| | country: document.getElementById('country').value||null, |
| | }; |
| | const res = await fetch(BASE + "/customers", {method:"POST", headers:headers(), body:JSON.stringify(payload)}); |
| | document.getElementById('msg').innerText = res.ok ? "登録しました" : ("登録失敗: " + await res.text()); |
| | if(res.ok){ load(); } |
| | }; |
| | </script> |
| | </body> |
| | </html> |
| |
|
