add
This commit is contained in:
32
index.html
32
index.html
@@ -9,7 +9,37 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
Ngày xác định
|
||||
<input id="input_config_month_date" type="date">
|
||||
<input id="input_config_month_money" type="number" placeholder="ngân sách">
|
||||
<button onclick="myPersonalFinanceManager.addConfigMonth()">Cài ngân sách</button>
|
||||
|
||||
-------
|
||||
Tổng Quan
|
||||
<div>
|
||||
<p >Số dư hiện tại: <span id="soDuHienTai"></span></p>
|
||||
<p >Thu tháng này: <span id="thuThangNay"></span></p>
|
||||
<p >Chi tháng này: <span id="chiThangNay"></span></p>
|
||||
<progress id="phanTramThuChi" id="file" value="32" max="100"> </progress>
|
||||
</div>
|
||||
|
||||
<table border="1px">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Tháng</th>
|
||||
<th>Năm</th>
|
||||
<th>Ngân Sách</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="nganSachBody">
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
<form onsubmit="myPersonalFinanceManager.addTrade(event)">
|
||||
<label for="">Danh mục giao dịch</label>
|
||||
|
||||
179
src/main.ts
179
src/main.ts
@@ -15,6 +15,11 @@ interface Trade {
|
||||
type PersonalFinanceManagerData = Trade[] | null;
|
||||
type CategoryData = Category[] | null;
|
||||
|
||||
interface ConfigMonth {
|
||||
date: Date;
|
||||
wallet: number;
|
||||
}
|
||||
|
||||
class PersonalFinanceManager {
|
||||
|
||||
private personalFinanceManagerData: PersonalFinanceManagerData;
|
||||
@@ -24,12 +29,17 @@ class PersonalFinanceManager {
|
||||
|
||||
private form_select: Element | null;
|
||||
private tableBodyCategoryEL: Element | null;
|
||||
private selectMonthEL: Element | null;
|
||||
|
||||
private configMonth: ConfigMonth[];
|
||||
|
||||
|
||||
|
||||
constructor() {
|
||||
this.form_select = document.querySelector("#form_select");
|
||||
this.tableBodyCategoryEL = document.querySelector("#tableBodyCategory");
|
||||
this.selectMonthEL = document.querySelector("#select_month");
|
||||
|
||||
|
||||
this.categoryData = [
|
||||
{
|
||||
id: -2,
|
||||
@@ -47,11 +57,13 @@ class PersonalFinanceManager {
|
||||
{
|
||||
id: -1,
|
||||
categoryId: -1,
|
||||
valueMoney: -10000,
|
||||
valueMoney: -10000,
|
||||
createAt: new Date(),
|
||||
}
|
||||
];
|
||||
|
||||
this.configMonth = []
|
||||
|
||||
this.renderUi(this.personalFinanceManagerData)
|
||||
}
|
||||
|
||||
@@ -90,6 +102,90 @@ class PersonalFinanceManager {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Render UI dashboard */
|
||||
let targetMonth = new Date();
|
||||
if (this.selectMonthEL) {
|
||||
/* dã chọn */
|
||||
targetMonth = new Date((this.selectMonthEL as any).value)
|
||||
}
|
||||
|
||||
/* ngân sách */
|
||||
let nganSachBodyHTML = ``
|
||||
this.configMonth.forEach((conf) => {
|
||||
nganSachBodyHTML += `
|
||||
<tr>
|
||||
<td>${conf.date.getMonth() + 1}</td>
|
||||
<td>${conf.date.getFullYear()}</td>
|
||||
<td>${conf.wallet}</td>
|
||||
</tr>
|
||||
`
|
||||
})
|
||||
let nganSachBodyEL = document.querySelector("#nganSachBody");
|
||||
if (nganSachBodyEL)
|
||||
nganSachBodyEL.innerHTML = nganSachBodyHTML;
|
||||
|
||||
/* Render Tổng Quan */
|
||||
let chiThangNayEl = document.querySelector("#chiThangNay");
|
||||
let thuThangNayEl = document.querySelector("#thuThangNay");
|
||||
let soDuHienTaiEl = document.querySelector("#soDuHienTai");
|
||||
let phanTramThuChi = document.querySelector("#phanTramThuChi");
|
||||
|
||||
console.log("getNganSachThang", this.getNganSachThang());
|
||||
|
||||
(soDuHienTaiEl as any).innerText = this.getNganSachThang() == -1 ? "Chưa set ngân sách tháng" : this.getNganSachThang() - this.getChiThangNay();
|
||||
(thuThangNayEl as any).innerText = this.getThuThangNay();
|
||||
(chiThangNayEl as any).innerText = this.getChiThangNay();
|
||||
|
||||
(phanTramThuChi as any).value = this.getChiThangNay() * 100 / this.getNganSachThang();
|
||||
|
||||
|
||||
console.log("đã vào", this.personalFinanceManagerData)
|
||||
}
|
||||
|
||||
|
||||
|
||||
public addTrade(e: FormDataEvent) {
|
||||
e.preventDefault();
|
||||
let form: any = e.target;
|
||||
if (form) {
|
||||
let newTrade: Trade = {
|
||||
id: PersonalFinanceManager.tradeCount++,
|
||||
categoryId: form.categoryId.value,
|
||||
valueMoney: +form.valueMoney.value,
|
||||
createAt: new Date(form.createAt.value),
|
||||
note: form.note.value
|
||||
}
|
||||
|
||||
console.log("newTrade", newTrade)
|
||||
|
||||
this.personalFinanceManagerData?.push(newTrade)
|
||||
|
||||
this.renderUi(this.personalFinanceManagerData)
|
||||
} else {
|
||||
alert("Form Lỗi Đọc!")
|
||||
}
|
||||
|
||||
console.log("đã vào")
|
||||
}
|
||||
|
||||
public addConfigMonth() {
|
||||
let input_config_month_dateEl = document.querySelector("#input_config_month_date");
|
||||
let input_config_month_moneyEL = document.querySelector("#input_config_month_money");
|
||||
let newConfigMonth: ConfigMonth = {
|
||||
date: new Date((input_config_month_dateEl as any).value),
|
||||
wallet: +(input_config_month_moneyEL as any).value
|
||||
}
|
||||
|
||||
for (let cf of this.configMonth) {
|
||||
if (this.checkDateInOneMonth(cf.date, newConfigMonth.date)) {
|
||||
alert("đã có cấu hình cho tháng tháng tương ứng")
|
||||
return
|
||||
}
|
||||
}
|
||||
this.configMonth.push(newConfigMonth);
|
||||
|
||||
this.renderUi(this.personalFinanceManagerData)
|
||||
}
|
||||
|
||||
private getMoneyTradeNowMonth(categoryId: number) {
|
||||
@@ -108,30 +204,12 @@ class PersonalFinanceManager {
|
||||
return result * -1;
|
||||
}
|
||||
|
||||
public addTrade(e: FormDataEvent) {
|
||||
e.preventDefault();
|
||||
let form: any = e.target;
|
||||
if (form) {
|
||||
let newTrade: Trade = {
|
||||
id: PersonalFinanceManager.tradeCount++,
|
||||
categoryId: form.categoryId.value,
|
||||
valueMoney: form.valueMoney.value,
|
||||
createAt: form.createAt.value,
|
||||
note: form.note.value
|
||||
}
|
||||
|
||||
this.personalFinanceManagerData?.push(newTrade)
|
||||
} else {
|
||||
alert("Form Lỗi Đọc!")
|
||||
}
|
||||
|
||||
console.log("đã vào")
|
||||
}
|
||||
|
||||
|
||||
public checkDateInMonth(targetDate: Date): boolean {
|
||||
let nowDate = new Date();
|
||||
|
||||
console.log("nowDate", nowDate)
|
||||
console.log("targetDate", targetDate)
|
||||
|
||||
if (targetDate.getFullYear() != nowDate.getFullYear()) {
|
||||
return false;
|
||||
}
|
||||
@@ -142,6 +220,61 @@ class PersonalFinanceManager {
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
public checkDateInOneMonth(targetDateA: Date, targetDateB: Date): boolean {
|
||||
|
||||
if (targetDateA.getFullYear() != targetDateB.getFullYear()) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (targetDateA.getMonth() != targetDateB.getMonth()) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
public getNganSachThang(): number {
|
||||
|
||||
|
||||
if (this.configMonth) {
|
||||
for (let cf of this.configMonth) {
|
||||
if (this.checkDateInMonth(cf.date)) {
|
||||
return cf.wallet
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return -1
|
||||
}
|
||||
|
||||
public getChiThangNay(): number {
|
||||
let result = 0;
|
||||
this.personalFinanceManagerData?.forEach(cfg => {
|
||||
if (this.checkDateInMonth(cfg.createAt)) {
|
||||
if (cfg.valueMoney < 0) {
|
||||
result += cfg.valueMoney;
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
return result * -1;
|
||||
}
|
||||
|
||||
public getThuThangNay(): number {
|
||||
let result = 0;
|
||||
this.personalFinanceManagerData?.forEach(cfg => {
|
||||
if (this.checkDateInMonth(cfg.createAt)) {
|
||||
if (cfg.valueMoney > 0) {
|
||||
result += cfg.valueMoney;
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const myPersonalFinanceManager = new PersonalFinanceManager();
|
||||
|
||||
Reference in New Issue
Block a user