diff --git a/index.html b/index.html index 105d458..5f42ca5 100644 --- a/index.html +++ b/index.html @@ -1,23 +1,54 @@ - - - - - demo_project - - -
- -
- - - -
- - - - + + + + + demo_project + + + +
+ +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + + + + + + + + + + + + + + + + + +
Danh MụcHạn MứcĐã Chi Tháng NàyThao Tác
+ + + + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 82499a0..5dd7656 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,6 +7,9 @@ "": { "name": "demo_project", "version": "0.0.0", + "dependencies": { + "moment": "^2.30.1" + }, "devDependencies": { "typescript": "~6.0.2", "vite": "^8.0.12" @@ -684,6 +687,15 @@ "url": "https://opencollective.com/parcel" } }, + "node_modules/moment": { + "version": "2.30.1", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz", + "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==", + "license": "MIT", + "engines": { + "node": "*" + } + }, "node_modules/nanoid": { "version": "3.3.12", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.12.tgz", diff --git a/package.json b/package.json index a0274f3..ed1b0ad 100644 --- a/package.json +++ b/package.json @@ -11,5 +11,8 @@ "devDependencies": { "typescript": "~6.0.2", "vite": "^8.0.12" + }, + "dependencies": { + "moment": "^2.30.1" } } diff --git a/src/main.ts b/src/main.ts index 4f80881..0228966 100644 --- a/src/main.ts +++ b/src/main.ts @@ -9,7 +9,7 @@ interface Trade { categoryId: number; valueMoney: number; // có thể âm + thu, - chi createAt: Date; - note: string; + note?: string; } type PersonalFinanceManagerData = Trade[] | null; @@ -17,13 +17,19 @@ type CategoryData = Category[] | null; class PersonalFinanceManager { - private personalFinanceManagerData: Trade[] | null; - private categoryData: Category[] | null; + private personalFinanceManagerData: PersonalFinanceManagerData; + private categoryData: CategoryData; + + static tradeCount: number = 0 + private form_select: Element | null; + private tableBodyCategoryEL: Element | null; constructor() { this.form_select = document.querySelector("#form_select"); - this.personalFinanceManagerData = []; + this.tableBodyCategoryEL = document.querySelector("#tableBodyCategory"); + + this.categoryData = [ { id: -2, @@ -37,6 +43,15 @@ class PersonalFinanceManager { } ]; + this.personalFinanceManagerData = [ + { + id: -1, + categoryId: -1, + valueMoney: -10000, + createAt: new Date(), + } + ]; + this.renderUi(this.personalFinanceManagerData) } @@ -53,11 +68,80 @@ class PersonalFinanceManager { this.form_select.innerHTML = optionHtmlList; } } + + /* Render Danh Sách Danh mục */ + if (this.categoryData) { + console.log("vào 1") + let trHtmlList = ``; + for (let i = 0; i < this.categoryData.length; i++) { + trHtmlList += ` + + ${this.categoryData[i].title} + ${this.categoryData[i].limitMoney} + ${this.getMoneyTradeNowMonth(this.categoryData[i].id)} + + + + + ` + } + if (this.tableBodyCategoryEL) { + this.tableBodyCategoryEL.innerHTML = trHtmlList; + } + + } } - public addTrade() { + private getMoneyTradeNowMonth(categoryId: number) { + let result = 0; + if (this.personalFinanceManagerData) + for (let i = 0; i < this.personalFinanceManagerData.length; i++) { + if (this.personalFinanceManagerData[i].categoryId == categoryId) { + if (this.checkDateInMonth(this.personalFinanceManagerData[i].createAt)) { + if (this.personalFinanceManagerData[i].valueMoney < 0) { + result += this.personalFinanceManagerData[i].valueMoney; + } + } + } + } + + 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(); + + if (targetDate.getFullYear() != nowDate.getFullYear()) { + return false; + } + + if (targetDate.getMonth() != nowDate.getMonth()) { + return false; + } + + return true; + } } const myPersonalFinanceManager = new PersonalFinanceManager();