Create customers.html
Browse files- static/customers.html +79 -0
static/customers.html
ADDED
|
@@ -0,0 +1,79 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!doctype html>
|
| 2 |
+
<html lang="ja">
|
| 3 |
+
<meta charset="utf-8">
|
| 4 |
+
<title>顧客管理</title>
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
| 6 |
+
<style>
|
| 7 |
+
body { font-family: system-ui, -apple-system, "Noto Sans JP", sans-serif; margin: 24px; }
|
| 8 |
+
.row { display:flex; gap:16px; flex-wrap:wrap; }
|
| 9 |
+
.card { border:1px solid #e5e7eb; border-radius:12px; padding:16px; flex:1; min-width:320px; }
|
| 10 |
+
label{display:block; font-size:12px; color:#374151; margin-top:8px}
|
| 11 |
+
input{width:100%; padding:10px; border:1px solid #d1d5db; border-radius:8px}
|
| 12 |
+
.btn{ padding:10px 14px; border:1px solid #0ea5e9; background:#0ea5e9; color:#fff; border-radius:8px; cursor:pointer; }
|
| 13 |
+
table{ width:100%; border-collapse:collapse; margin-top:8px }
|
| 14 |
+
th,td{ border-bottom:1px solid #eee; padding:8px; font-size:14px }
|
| 15 |
+
</style>
|
| 16 |
+
<body>
|
| 17 |
+
<h1>顧客管理</h1>
|
| 18 |
+
<div>API Key: <input id="apiKey" style="width:200px"> <button class="btn" id="save">保存</button></div>
|
| 19 |
+
|
| 20 |
+
<div class="row" style="margin-top:12px">
|
| 21 |
+
<div class="card" style="max-width:500px">
|
| 22 |
+
<h3>新規顧客</h3>
|
| 23 |
+
<label>会社名*</label><input id="name">
|
| 24 |
+
<label>メール</label><input id="email">
|
| 25 |
+
<label>電話</label><input id="phone">
|
| 26 |
+
<label>住所</label><input id="address">
|
| 27 |
+
<div class="row">
|
| 28 |
+
<div style="flex:1"><label>市区町村</label><input id="city"></div>
|
| 29 |
+
<div style="flex:1"><label>国</label><input id="country" placeholder="JP"></div>
|
| 30 |
+
</div>
|
| 31 |
+
<div style="margin-top:8px"><button class="btn" id="create">登録</button></div>
|
| 32 |
+
<div id="msg" style="margin-top:6px"></div>
|
| 33 |
+
</div>
|
| 34 |
+
|
| 35 |
+
<div class="card">
|
| 36 |
+
<h3>顧客一覧</h3>
|
| 37 |
+
<div>検索: <input id="q" placeholder="社名/メール/電話"> <button class="btn" id="search">検索</button></div>
|
| 38 |
+
<table><thead><tr><th>ID</th><th>社名</th><th>連絡先</th></tr></thead><tbody id="tb"></tbody></table>
|
| 39 |
+
</div>
|
| 40 |
+
</div>
|
| 41 |
+
|
| 42 |
+
<script>
|
| 43 |
+
const BASE = location.origin;
|
| 44 |
+
const LSKEY = "mini_invoice_api_key";
|
| 45 |
+
const apiKeyEl = document.getElementById('apiKey'); apiKeyEl.value = localStorage.getItem(LSKEY) || "dev";
|
| 46 |
+
document.getElementById('save').onclick = ()=>{ localStorage.setItem(LSKEY, apiKeyEl.value.trim()); alert("保存しました"); load(); };
|
| 47 |
+
const headers = ()=>({ "Content-Type":"application/json", "X-API-Key": (localStorage.getItem(LSKEY)||"dev") });
|
| 48 |
+
|
| 49 |
+
async function load(){
|
| 50 |
+
const q = document.getElementById('q').value.trim();
|
| 51 |
+
const url = new URL(BASE + "/customers"); if(q) url.searchParams.set("q", q);
|
| 52 |
+
const res = await fetch(url, {headers:headers()}); const tb = document.getElementById('tb'); tb.innerHTML="";
|
| 53 |
+
if(!res.ok){ tb.innerHTML = `<tr><td colspan="3">読み込みエラー: ${await res.text()}</td></tr>`; return; }
|
| 54 |
+
const js = await res.json();
|
| 55 |
+
(js.data||[]).forEach(c=>{
|
| 56 |
+
const tr = document.createElement('tr');
|
| 57 |
+
tr.innerHTML = `<td>${c.id}</td><td>${c.name}</td><td>${[c.email,c.phone].filter(Boolean).join(" / ")}</td>`;
|
| 58 |
+
tb.append(tr);
|
| 59 |
+
});
|
| 60 |
+
}
|
| 61 |
+
document.getElementById('search').onclick = load; load();
|
| 62 |
+
|
| 63 |
+
document.getElementById('create').onclick = async ()=>{
|
| 64 |
+
const name = document.getElementById('name').value.trim(); if(!name){ alert("会社名は必須です"); return; }
|
| 65 |
+
const payload = {
|
| 66 |
+
name,
|
| 67 |
+
email: document.getElementById('email').value||null,
|
| 68 |
+
phone: document.getElementById('phone').value||null,
|
| 69 |
+
address: document.getElementById('address').value||null,
|
| 70 |
+
city: document.getElementById('city').value||null,
|
| 71 |
+
country: document.getElementById('country').value||null,
|
| 72 |
+
};
|
| 73 |
+
const res = await fetch(BASE + "/customers", {method:"POST", headers:headers(), body:JSON.stringify(payload)});
|
| 74 |
+
document.getElementById('msg').innerText = res.ok ? "登録しました" : ("登録失敗: " + await res.text());
|
| 75 |
+
if(res.ok){ load(); }
|
| 76 |
+
};
|
| 77 |
+
</script>
|
| 78 |
+
</body>
|
| 79 |
+
</html>
|