File size: 3,798 Bytes
31434be |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
<!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>
|