From 4c424250f63cbc6e5361fbf48dff0c894c257624 Mon Sep 17 00:00:00 2001 From: PhuocNTB Date: Thu, 11 Jun 2026 21:24:35 +0700 Subject: [PATCH] add --- index.html | 32 +++++++++- src/main.ts | 179 +++++++++++++++++++++++++++++++++++++++++++++------- 2 files changed, 187 insertions(+), 24 deletions(-) diff --git a/index.html b/index.html index 5f42ca5..87a1ee7 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,37 @@ -
+ Ngày xác định + + + + + ------- + Tổng Quan +
+

Số dư hiện tại:

+

Thu tháng này:

+

Chi tháng này:

+ +
+ + + + + + + + + + + + + + + + +
ThángNămNgân Sách
+
diff --git a/src/main.ts b/src/main.ts index 0228966..5a8b585 100644 --- a/src/main.ts +++ b/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 += ` + + ${conf.date.getMonth() + 1} + ${conf.date.getFullYear()} + ${conf.wallet} + + ` + }) + 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();