Skip to content

Commit 0bf47c6

Browse files
volodyakurpitavolodyakurpita
committed
Implement budget functionality
1 parent 7db8a47 commit 0bf47c6

File tree

12 files changed

+225
-9
lines changed

12 files changed

+225
-9
lines changed

‎app/app.module.ts‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ import { AppRoutingModule } from "./app.routing";
55
import { AppComponent } from "./app.component";
66
import { CostModule } from "./tabs/cost/cost.module";
77
import { CalendarModule } from "./tabs/calendar/calendar.module"
8-
8+
import { BudgetModule } from "./budget/budget.module";
9+
910

1011
import { TabsComponent } from "./tabs/tabs.component";
1112
import { CostsComponent } from "./tabs/cost/costs.component";
@@ -16,6 +17,8 @@ import { CalendarComponent} from "./tabs/calendar/calendar.component";
1617
import { CalendarDateRangeComponent } from "./tabs/calendar/date-range/calendar-date-range.component";
1718
import { CalendarDateRangeCostListComponent } from "./tabs/calendar/date-range-cost-list/calendar-date-range-cost-list.component";
1819
import { ListComponent } from "./list/list.component";
20+
import { ChartComponent } from "./tabs/charts/chart.component";
21+
import { BudgetComponent } from "./budget/budget.component";
1922

2023
@NgModule({
2124
bootstrap: [
@@ -25,7 +28,8 @@ import { ListComponent } from "./list/list.component";
2528
NativeScriptModule,
2629
AppRoutingModule,
2730
CostModule,
28-
CalendarModule
31+
CalendarModule,
32+
BudgetModule
2933
],
3034
declarations: [
3135
AppComponent,
@@ -36,7 +40,9 @@ import { ListComponent } from "./list/list.component";
3640
CalendarComponent,
3741
CalendarDateRangeComponent,
3842
CalendarDateRangeCostListComponent,
39-
ListComponent
43+
ListComponent,
44+
ChartComponent,
45+
BudgetComponent
4046
],
4147
providers: [
4248
],

‎app/app.routing.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ import { CalendarComponent } from "./tabs/calendar/calendar.component";
1212
import { CalendarDateRangeComponent } from "./tabs/calendar/date-range/calendar-date-range.component";
1313
import { CalendarDateRangeCostListComponent } from "./tabs/calendar/date-range-cost-list/calendar-date-range-cost-list.component";
1414
import { ListComponent } from "./list/list.component";
15+
import { ChartComponent } from "./tabs/charts/chart.component";
16+
import { BudgetComponent } from "./budget/budget.component";
1517

1618
const routes: Routes = [
1719
{ path: "", component: LoginComponent },
@@ -23,7 +25,9 @@ const routes: Routes = [
2325
{ path: "calendar", component: CalendarComponent },
2426
{ path: "date-range", component: CalendarDateRangeComponent },
2527
{ path: "date-range-cost-list", component: CalendarDateRangeCostListComponent },
26-
{ path: "list", component: ListComponent }
28+
{ path: "list", component: ListComponent },
29+
{ path: "charts", component: ChartComponent },
30+
{ path: "budget", component: BudgetComponent }
2731
];
2832

2933
@NgModule({

‎app/budget/budget.component.css‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
ActionBar {
2+
background-color: #7ada2f;
3+
color: aliceblue;
4+
}
5+
6+
.budget-label {
7+
padding-left: 25;
8+
padding-top: 25;
9+
font-size: 18pt;
10+
}
11+
12+
.get-budget {
13+
padding-top: 30;
14+
margin-left: 15;
15+
margin-right: 20;
16+
}
17+
18+
.budget-item {
19+
padding-left: 10;
20+
padding-top: 25;
21+
font-weight: bold;
22+
font-size: 18pt;
23+
}
24+
25+
.btn-back {
26+
background-color: aliceblue;
27+
}

‎app/budget/budget.component.html‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<ActionBar title="Budget"
2+
class="action-bar">
3+
<ActionItem (tap)="onEditButtonTap()"
4+
ios.systemIcon="2"
5+
ios.position="right"
6+
android.position="left"
7+
*ngIf="state == 'read'">
8+
<Label text="Edit"
9+
class="action-item"></Label>
10+
</ActionItem>
11+
<ActionItem ios.position="right"
12+
android.position="right"
13+
(tap)="onSaveButtonTap()"
14+
*ngIf="state == 'edit'">
15+
<Label text="Save"
16+
class="action-item"></Label>
17+
</ActionItem>
18+
<ActionItem ios.position="left"
19+
android.position="left"
20+
(tap)="onCancelButtonTap()"
21+
*ngIf="state == 'edit'">
22+
<Label text="Cancel"
23+
class="action-item"></Label>
24+
</ActionItem>
25+
<NavigationButton text="Go Back"
26+
android.systemIcon="ic_menu_back"
27+
(tap)="onBackTap()"
28+
class="btn-back"></NavigationButton>
29+
</ActionBar>
30+
31+
<StackLayout>
32+
<FlexboxLayout>
33+
<Label text="Budget for a mounth - "
34+
class="budget-label"
35+
*ngIf="state == 'read'"></Label>
36+
<Label [text]="budgetService.budget"
37+
class="budget-item"
38+
*ngIf="state == 'read'"></Label>
39+
</FlexboxLayout>
40+
41+
<TextField [text]="budgetService.budget"
42+
keyboardType="number"
43+
*ngIf="state == 'edit'"
44+
class="get-budget"
45+
#newBudgetTextField></TextField>
46+
47+
<FlexboxLayout>
48+
<Label text="Budget for a day - "
49+
class="budget-label"></Label>
50+
<Label [text]="budgetService.budgetForDay"
51+
class="budget-item"></Label>
52+
</FlexboxLayout>
53+
</StackLayout>
54+
55+

‎app/budget/budget.component.ts‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { Component, ViewChild, ElementRef, OnInit } from "@angular/core";
2+
import { TextField } from "ui/text-field";
3+
import { RouterExtensions } from "nativescript-angular/router";
4+
5+
import { BudgetService } from "./budget.service";
6+
7+
@Component({
8+
selector: "budget",
9+
moduleId: module.id,
10+
templateUrl: "./budget.component.html",
11+
styleUrls: ["./budget.component.css"]
12+
})
13+
export class BudgetComponent {
14+
15+
@ViewChild("newBudgetTextField") newBudgetTextField: ElementRef;
16+
17+
private state: string = 'read';
18+
19+
constructor(
20+
private routerExtensions: RouterExtensions,
21+
private budgetService: BudgetService
22+
) { }
23+
24+
onEditButtonTap() {
25+
this.state = 'edit';
26+
}
27+
28+
onSaveButtonTap() {
29+
let textField = <TextField>this.newBudgetTextField.nativeElement;
30+
textField.dismissSoftInput();
31+
32+
if (textField.text.trim() === "") {
33+
alert("Incorrect Value");
34+
return;
35+
}
36+
37+
this.budgetService.budget = Number(textField.text);
38+
this.state = 'read';
39+
}
40+
41+
onCancelButtonTap() {
42+
this.state = 'read';
43+
}
44+
45+
onBackTap() {
46+
this.routerExtensions.back();
47+
}
48+
}

‎app/budget/budget.module.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
2+
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
3+
import { AppRoutingModule } from "../app.routing";
4+
import { NativeScriptFormsModule } from "nativescript-angular/forms"
5+
6+
import { BudgetService } from "./budget.service";
7+
8+
@NgModule({
9+
imports: [
10+
NativeScriptModule,
11+
AppRoutingModule,
12+
NativeScriptFormsModule
13+
],
14+
declarations: [
15+
],
16+
providers: [
17+
BudgetService
18+
],
19+
schemas: [
20+
NO_ERRORS_SCHEMA
21+
]
22+
})
23+
24+
export class BudgetModule { }

‎app/budget/budget.service.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { Injectable } from "@angular/core";
2+
3+
@Injectable()
4+
export class BudgetService {
5+
private _budget: number = 3000;
6+
public budgetForDay: number = 0;
7+
8+
private getDayBudget() {
9+
let currentDaysMonth = this.daysInCurrentMonth();
10+
this.budgetForDay = Number((this._budget / currentDaysMonth).toFixed(2));
11+
}
12+
13+
private daysInCurrentMonth() {
14+
let dateNow = new Date();
15+
return new Date(dateNow.getFullYear(), dateNow.getMonth()+1, 0).getDate();
16+
}
17+
18+
public set budget(value : number) {
19+
this._budget = value;
20+
this.getDayBudget();
21+
}
22+
23+
public get budget() : number {
24+
return this._budget;
25+
}
26+
27+
}

‎app/tabs/calendar/date-range/calendar-date-range.component.ts‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,25 +32,21 @@ export class CalendarDateRangeComponent {
3232
let datePicker = <DatePicker>args.object;
3333
datePicker.date = new Date();
3434
this._startDate = datePicker.date.toDateString();
35-
console.log(this._startDate);
3635
}
3736

3837
onEndPickerLoaded(args) {
3938
let datePicker = <DatePicker>args.object;
4039
datePicker.date = new Date();
4140
this._endDate = datePicker.date.toDateString();
42-
console.log(this._endDate);
4341
}
4442

4543
onStartDateChange(args) {
4644
let startDateStr: string = args.value;
4745
this._startDate = startDateStr;
48-
console.log(this._startDate);
4946
}
5047

5148
onEndDateChange(args) {
5249
let endDateStr: string = args.value;
5350
this._endDate = endDateStr;
54-
console.log(this._endDate);
5551
}
5652
}

‎app/tabs/charts/chart.component.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.btn-budget {
2+
width: 100;
3+
height: 35;
4+
text-align: center;
5+
font-size: 12;
6+
}

‎app/tabs/charts/chart.component.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<StackLayout>
2+
<Button text="Budget"
3+
class="btn-budget"
4+
[nsRouterLink]="['/budget']"
5+
(tap)="onTap()"></Button>
6+
</StackLayout>
7+

0 commit comments

Comments
 (0)