203 lines
4.9 KiB
HTML
203 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ja">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>資金状況</title>
|
|
<style>
|
|
body {
|
|
font-family: sans-serif;
|
|
margin: 24px;
|
|
}
|
|
h2,
|
|
h3 {
|
|
margin-top: 0;
|
|
}
|
|
table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
margin-top: 12px;
|
|
}
|
|
th,
|
|
td {
|
|
border: 1px solid #ccc;
|
|
padding: 6px;
|
|
text-align: right;
|
|
}
|
|
th {
|
|
background: #f5f5f5;
|
|
}
|
|
th.left,
|
|
td.left {
|
|
text-align: left;
|
|
}
|
|
.total {
|
|
font-weight: bold;
|
|
background: #f0f0f0;
|
|
}
|
|
.filter {
|
|
margin: 8px 0;
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: center;
|
|
}
|
|
input,
|
|
select,
|
|
button {
|
|
padding: 4px 6px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<h2>💰 現在の資金状況</h2>
|
|
|
|
<!-- 残高 -->
|
|
<table id="balanceTable">
|
|
<thead>
|
|
<tr>
|
|
<th class="left">口座</th>
|
|
<th>残高</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
<tfoot>
|
|
<tr class="total">
|
|
<td class="left">合計</td>
|
|
<td id="totalBalance">-</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
|
|
<hr />
|
|
|
|
<h3>📄 資金流水</h3>
|
|
|
|
<!-- 条件 -->
|
|
<div class="filter">
|
|
<label>口座：</label>
|
|
<select id="accountSelect"></select>
|
|
|
|
<label>期間：</label>
|
|
<input type="date" id="fromDate" min="1900-01-01" max="2099-12-31" />
|
|
〜
|
|
<input type="date" id="toDate" min="1900-01-01" max="2099-12-31" />
|
|
|
|
<button onclick="reloadTransactions()">表示</button>
|
|
</div>
|
|
|
|
<!-- 流水表 -->
|
|
<table id="txTable">
|
|
<thead>
|
|
<tr>
|
|
<th class="left">日付</th>
|
|
<th class="left">摘要</th>
|
|
<th class="left">相手科目</th>
|
|
<th>入金</th>
|
|
<th>出金</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
|
|
<script>
|
|
const API = "http://127.0.0.1:8000";
|
|
|
|
// --------------------
|
|
// 初期化
|
|
// --------------------
|
|
async function init() {
|
|
await loadBalances();
|
|
await loadAccounts();
|
|
|
|
// 初期期間：当月
|
|
const now = new Date();
|
|
const first = new Date(now.getFullYear(), now.getMonth(), 1);
|
|
document.getElementById("fromDate").value = first
|
|
.toISOString()
|
|
.slice(0, 10);
|
|
document.getElementById("toDate").value = now
|
|
.toISOString()
|
|
.slice(0, 10);
|
|
}
|
|
init();
|
|
|
|
// --------------------
|
|
// 残高
|
|
// --------------------
|
|
async function loadBalances() {
|
|
const res = await fetch(`${API}/cash/balance`);
|
|
const data = await res.json();
|
|
|
|
const tbody = document.querySelector("#balanceTable tbody");
|
|
tbody.innerHTML = "";
|
|
|
|
data.items.forEach((i) => {
|
|
tbody.innerHTML += `
|
|
<tr>
|
|
<td class="left">${i.account_name}</td>
|
|
<td>${Number(i.balance).toLocaleString()}</td>
|
|
</tr>`;
|
|
});
|
|
|
|
document.getElementById("totalBalance").innerText = Number(
|
|
data.total_balance
|
|
).toLocaleString();
|
|
}
|
|
|
|
// --------------------
|
|
// 口座一覧
|
|
// --------------------
|
|
async function loadAccounts() {
|
|
const res = await fetch(`${API}/cash/balance`);
|
|
const data = await res.json();
|
|
|
|
const sel = document.getElementById("accountSelect");
|
|
sel.innerHTML = data.items
|
|
.map(
|
|
(i) => `<option value="${i.account_id}">${i.account_name}</option>`
|
|
)
|
|
.join("");
|
|
|
|
reloadTransactions();
|
|
}
|
|
|
|
// --------------------
|
|
// 再表示
|
|
// --------------------
|
|
function reloadTransactions() {
|
|
const accountId = document.getElementById("accountSelect").value;
|
|
const from = document.getElementById("fromDate").value;
|
|
const to = document.getElementById("toDate").value;
|
|
|
|
loadTransactions(accountId, from, to);
|
|
}
|
|
|
|
// --------------------
|
|
// 流水
|
|
// --------------------
|
|
async function loadTransactions(accountId, from, to) {
|
|
let url = `${API}/cash/transactions?account_id=${accountId}`;
|
|
if (from) url += `&from=${from}`;
|
|
if (to) url += `&to=${to}`;
|
|
|
|
const res = await fetch(url);
|
|
const rows = await res.json();
|
|
|
|
const tbody = document.querySelector("#txTable tbody");
|
|
tbody.innerHTML = "";
|
|
|
|
rows.forEach((r) => {
|
|
tbody.innerHTML += `
|
|
<tr>
|
|
<td class="left">${r.journal_date}</td>
|
|
<td class="left">${r.description}</td>
|
|
<td class="left">${r.counter_account}</td>
|
|
<td>${r.amount > 0 ? r.amount.toLocaleString() : ""}</td>
|
|
<td>${r.amount < 0 ? (-r.amount).toLocaleString() : ""}</td>
|
|
</tr>`;
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|