|
|
<!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> |
|
|
|
