Adding assets in Angular
This commit is contained in:
parent
e16aea812e
commit
bfe4a36743
|
|
@ -5,7 +5,14 @@ import { RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
|
|||
selector: 'app-root',
|
||||
standalone: true,
|
||||
imports: [RouterOutlet, RouterLink, RouterLinkActive],
|
||||
templateUrl: './app.component.html',
|
||||
template: `
|
||||
<nav>
|
||||
<a href="/">Home</a>
|
||||
| <a href="/quotes">Kursy</a>
|
||||
| <a href="/asset-calculator">Kalkulator</a>
|
||||
</nav>
|
||||
<router-outlet />
|
||||
`,
|
||||
styleUrl: './app.component.css'
|
||||
})
|
||||
export class AppComponent {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,15 @@
|
|||
import { Routes } from '@angular/router';
|
||||
import { CommodityComponent } from './components/commodity/commodity.component';
|
||||
import { DashboardComponent } from './components/dashboard/dashboard.component';
|
||||
import { AssetCalculatorComponent } from './asset-calculator/asset-calculator.component';
|
||||
|
||||
export const routes: Routes = [
|
||||
{ path: "", component:DashboardComponent },
|
||||
{ path: "group/:group", component: DashboardComponent }
|
||||
{ path: "",
|
||||
title:"Kalkulator",
|
||||
component: AssetCalculatorComponent },
|
||||
{ path: "asset-calculator",
|
||||
title: "Kalkulator",
|
||||
component:AssetCalculatorComponent },
|
||||
{ path: "quotes",
|
||||
title:"Kursy!",
|
||||
component: DashboardComponent }
|
||||
];
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<p>asset-calculator works!</p>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { AssetCalculatorComponent } from './asset-calculator.component';
|
||||
|
||||
describe('AssetCalculatorComponent', () => {
|
||||
let component: AssetCalculatorComponent;
|
||||
let fixture: ComponentFixture<AssetCalculatorComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [AssetCalculatorComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(AssetCalculatorComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
import {Component, OnInit } from '@angular/core';
|
||||
import {FormsModule} from '@angular/forms';
|
||||
import {CurrencyPipe,DecimalPipe,PercentPipe} from '@angular/common';
|
||||
import {AssetsModule} from './assets/assets.module'
|
||||
import {Asset, Positions, AssetPlanPosition } from './assets/asset';
|
||||
import {AssetService} from './assets/service/asset.service'
|
||||
|
||||
@Component({
|
||||
selector: 'app-asset-calculator',
|
||||
standalone: true,
|
||||
imports: [FormsModule, CurrencyPipe, DecimalPipe, PercentPipe, AssetsModule],
|
||||
template: `
|
||||
<h1>Kalkulator amortyzacyjny</h1>
|
||||
|
||||
<table class="table-striped">
|
||||
<tr>
|
||||
<td>Wartość początkowa środka trwałego:</td>
|
||||
<td colspan="2"><input
|
||||
type="text" id="value" name="value"
|
||||
[ngModel]="asset.initialValueAsset | number:'1.2-2'"
|
||||
(ngModelChange)="asset.initialValueAsset=$event;calculate()"
|
||||
/> Zł</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td colspan="1" >Stawka amortyzacyjna</td>
|
||||
<td colspan="2"><input type="text" id="rate" name="rate"
|
||||
[ngModel]="asset.depreciationRate | number:'1.2-2'"
|
||||
(ngModelChange)="asset.depreciationRate=$event;calculate()"
|
||||
/> %</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td >Miesiąc rozpoczęcia amortyzacjii</td>
|
||||
<td colspan="2">
|
||||
<input type="number" id="year" name="year"
|
||||
[ngModel]="asset.year "
|
||||
(ngModelChange)="asset.year=$event;calculate()"
|
||||
/>
|
||||
<input type="number" id="month" name="month"
|
||||
[ngModel]="asset.month"
|
||||
(ngModelChange)="asset.month=$event;calculate()"
|
||||
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Metoda amortyzacji</td>
|
||||
<td><select onchange="hideWskaznik()" id="rodzajAmortyzacji" name="metodaAmortyzacji" >
|
||||
<option value="0" selected="selected"
|
||||
>Liniowa</option>
|
||||
<option value="1"
|
||||
>Dygresywna</option>
|
||||
</select></td>
|
||||
<td id="wskaznik" style="display: block">
|
||||
<input type="text" id="factor" name="factor"
|
||||
[ngModel]="asset.factorValue | number:'1.2-2' "
|
||||
(ngModelChange)="asset.factorValue=$event"/>
|
||||
</td>
|
||||
</tr>
|
||||
<input class="btn btn-primary" name="calculate" (click)=calculate() type="button" value="Wylicz ">
|
||||
|
||||
</table>
|
||||
<div class="container">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Lp</th>
|
||||
<th scope="col">Rok</th>
|
||||
<th scope="col">Miesiąc</th>
|
||||
<th scope="col">Kwota odpisu</th>
|
||||
<th scope="col">Lączny odpis</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (position of positions.positions; track $index) {
|
||||
|
||||
|
||||
<tr [class]="clazz(position)" >
|
||||
|
||||
<th scope="row">{{$index+1}}</th>
|
||||
<td>{{position.when.year}}</td>
|
||||
<td>{{position.when.month}}</td>
|
||||
<td>{{ position.calculatedDepreciation | number:'1.2-2' }}</td>
|
||||
<td>{{ position.sum | number:'1.2-2' }}</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
`,
|
||||
styleUrl: './asset-calculator.component.css'
|
||||
})
|
||||
export class AssetCalculatorComponent implements OnInit{
|
||||
|
||||
constructor(private assetService : AssetService ){
|
||||
|
||||
}
|
||||
|
||||
|
||||
asset = new Asset();
|
||||
positions = new Positions();
|
||||
|
||||
calculate() {
|
||||
this.assetService.calculate(this.asset).subscribe( positions => { this.positions=positions; this.calculateToValues() });
|
||||
}
|
||||
|
||||
calculateToValues() {
|
||||
let sum :number = 0;
|
||||
for(let position of this.positions.positions ){
|
||||
position.calculatedDepreciation = position.calculatedDepreciation *0.01;
|
||||
sum += position.calculatedDepreciation;
|
||||
position.sum = sum;
|
||||
}
|
||||
}
|
||||
|
||||
clazz(pos : AssetPlanPosition ){
|
||||
return pos.when.year % 2 === 0 ? "table-light" : "table-dark";
|
||||
}
|
||||
|
||||
ngOnInit(): void{
|
||||
this.calculate();
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import { Asset } from './asset';
|
||||
|
||||
describe('Asset', () => {
|
||||
it('should create an instance', () => {
|
||||
expect(new Asset()).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
export class Asset {
|
||||
initialValueAsset = 2000;
|
||||
depreciationRate = 20;
|
||||
year = 2024;
|
||||
month = 10;
|
||||
factorValue = 2;
|
||||
}
|
||||
|
||||
export class YearMonth{
|
||||
year : number = 0;
|
||||
month :number = 0;
|
||||
}
|
||||
|
||||
export class AssetPlanPosition{
|
||||
when : YearMonth = new YearMonth();
|
||||
calculatedDepreciation : number = 0;
|
||||
sum:number = 0;
|
||||
|
||||
}
|
||||
|
||||
export class Positions {
|
||||
positions : AssetPlanPosition[]=[];
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
|
||||
|
||||
@NgModule({
|
||||
declarations: [],
|
||||
imports: [
|
||||
CommonModule
|
||||
]
|
||||
})
|
||||
export class AssetsModule { }
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import { TestBed } from '@angular/core/testing';
|
||||
|
||||
import { AssetService } from './asset.service';
|
||||
|
||||
describe('AssetService', () => {
|
||||
let service: AssetService;
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({});
|
||||
service = TestBed.inject(AssetService);
|
||||
});
|
||||
|
||||
it('should be created', () => {
|
||||
expect(service).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
|
||||
import { HttpClient,HttpErrorResponse } from '@angular/common/http';
|
||||
import { Asset, Positions } from '../asset';
|
||||
import { Observable } from 'rxjs';
|
||||
|
||||
|
||||
let assetUrl: string ='http://localhost:8181/rest-api/assets/calculate';
|
||||
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class AssetService {
|
||||
|
||||
constructor(private http: HttpClient) { }
|
||||
|
||||
calculate(asset: Asset) : Observable<Positions>{
|
||||
return this.http.post<Positions>(assetUrl, asset) ;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { Component, OnInit, Injectable, Input } from '@angular/core';
|
||||
import { Component, OnInit, Injectable, Input, inject } from '@angular/core';
|
||||
import { CommodityService } from './services/commodity.service';
|
||||
|
||||
@Component({
|
||||
|
|
@ -8,7 +8,7 @@ import { CommodityService } from './services/commodity.service';
|
|||
styleUrl: './commodity.component.css'
|
||||
})
|
||||
|
||||
@Injectable()
|
||||
|
||||
export class CommodityComponent implements OnInit {
|
||||
|
||||
@Input()
|
||||
|
|
@ -16,7 +16,6 @@ export class CommodityComponent implements OnInit {
|
|||
|
||||
info: any;
|
||||
|
||||
|
||||
constructor(private commodityService: CommodityService) {
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,13 +4,11 @@
|
|||
<ul class="nav nav-tabs card-header-tabs">
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="true" href="/group/all">Wszystko</a>
|
||||
<a class="nav-link active" aria-current="true" href="/quotes">Obecne notowania</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/group/commodities">Metale</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/group/currency">Waluta</a>
|
||||
<a class="nav-link" href="/asset-calculator">Kalkulator amortyzacyjny</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -17,32 +17,16 @@ export class DashboardComponent implements OnInit {
|
|||
|
||||
commodities: Array<string> = [ "AU" ]
|
||||
|
||||
group: string = "all";
|
||||
|
||||
symbols : Array<string> = this.commodities.concat(this.currency);
|
||||
|
||||
getSymbolsForGroup(group: string): Array<string> {
|
||||
switch (group) {
|
||||
case "all":
|
||||
return this.commodities.concat(this.currency);
|
||||
case "currency":
|
||||
return this.currency;
|
||||
case "commodities":
|
||||
return this.commodities
|
||||
default:
|
||||
return this.currency.concat( this.commodities );
|
||||
}
|
||||
}
|
||||
|
||||
constructor(private route: ActivatedRoute) {
|
||||
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.route.params.subscribe((params: Params) => {
|
||||
let group = params["group"];
|
||||
this.symbols = this.getSymbolsForGroup(group)
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
// this.route.paramMap.
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue