New version 'amortyzacji' bez przycisku kalkulate.
This commit is contained in:
parent
d809a4c247
commit
c67c03ee3a
|
|
@ -15,13 +15,12 @@
|
|||
width: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
</style>\
|
||||
<div class="container frame">
|
||||
<div class="container frame mt-5">
|
||||
|
||||
<div class="card" style="width: 18rem;">
|
||||
<img src="ARTI-1.jpg" class="card-img-to" alt="Ja">
|
||||
<img ngSrc="ARTI-1.jpg" width="200" height="350" priority class="card-img-to" alt="Ja">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Wrocław</h5>
|
||||
<div class="col-auto">
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
import { Component } from '@angular/core';
|
||||
import {NgOptimizedImage} from '@angular/common'
|
||||
|
||||
@Component({
|
||||
selector: 'app-about-me',
|
||||
standalone: true,
|
||||
imports: [],
|
||||
imports: [NgOptimizedImage],
|
||||
templateUrl: './about-me.component.html',
|
||||
styleUrl: './about-me.component.css'
|
||||
})
|
||||
|
|
|
|||
|
|
@ -18,68 +18,71 @@
|
|||
<h1 class="heading text-center">Kalkulator amortyzacyjny</h1>
|
||||
|
||||
<form [formGroup]=assetsDepreciationForm class="frame">
|
||||
|
||||
<div class="align-items-start" >
|
||||
<div class="form-group row">
|
||||
<label for="initialValueSet" class="form-label col-auto" >Wartość początkowa środka trwałego:</label>
|
||||
<label for="initialValueAsset" class="form-label col-auto" >Wartość początkowa środka trwałego:</label>
|
||||
<div class="col">
|
||||
<input type="text" class="form-control" id="initialValueSet" aria-describedby="initialValueHelpInline" formControlName="initialValueSet" required
|
||||
[ngModel]="asset.initialValueAsset"
|
||||
(ngModelChange)="asset.initialValueAsset=$event" />
|
||||
<input type="number" class="form-control" id="initialValueAsset"
|
||||
aria-describedby="initialValueHelpInline"
|
||||
formControlName="initialValueAsset" required
|
||||
[(ngModel)]=initialValueAsset >
|
||||
|
||||
</div>
|
||||
@if(assetsDepreciationForm.get('initialValueSet')?.invalid && assetsDepreciationForm.get('initialValueSet')?.touched){
|
||||
<div class="text-danger col-auto"> Wartość niepoprawna!. Podaj kwotę w zł np 3000.05 (czyli 3000 zł i 5 gr)</div>
|
||||
}@else{
|
||||
}
|
||||
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="depreciationRate" class="form-label col-auto" >Stawka amortyzacyjna w procentach:</label>
|
||||
<div class="col">
|
||||
<input type="text" class="form-control" id="depreciationRate" formControlName="depreciationRate"
|
||||
[ngModel]="asset.depreciationRate | number:'1.2-2'"
|
||||
(ngModelChange)="asset.depreciationRate=$event"/>
|
||||
<input type="number" class="form-control" id="depreciationRate"
|
||||
formControlName="depreciationRate"
|
||||
[(ngModel)]=depreciationRate />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="form-label col-auto">Rok i miesiąc rozpoczęcia amortyzacji</label>
|
||||
<div class="col">
|
||||
<input type="number" class="form-control" formControlName="year"
|
||||
[ngModel]=asset.year
|
||||
(ngModelChange)="asset.year=$event;calculate()" />
|
||||
[(ngModel)]=year
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="number" class="form-control" formControlName="month"
|
||||
[ngModel]=asset.month
|
||||
(ngModelChange)="asset.month=$event;calculate()" />
|
||||
<input type="number" class="form-control" formControlName="month"
|
||||
[(ngModel)]=month />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="form-label col-auto">Metoda amortyzacji</label>
|
||||
<div class="col-auto" >
|
||||
<select class="form-control" formControlName="typeDepreciation"
|
||||
[ngModel]=asset.type
|
||||
(ngModelChange)="asset.type=$event;calculate()" >
|
||||
<select class="form-control" formControlName="typeDepreciation" [(ngModel)]=typeDepreciation >
|
||||
<option [ngValue]=TypeDepreciation.linear selected="selected">Liniowa</option>
|
||||
<option [ngValue]=TypeDepreciation.digressive >Dygresywna</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@if( TypeDepreciation.digressive === asset.type ){
|
||||
@if( TypeDepreciation.digressive === typeDepreciation() ){
|
||||
<div class="form-group row">
|
||||
<label for="factorValue" class="form-label col-auto">Wspólczynnki degresji</label>
|
||||
<div class="col-auto" >
|
||||
<input type="text" class="form-control" formControlName="factorValue"
|
||||
[ngModel]="asset.factorValue | number:'1.2-2' "
|
||||
(ngModelChange)="asset.factorValue=$event;calculate()"/>
|
||||
[(ngModel)]=factorValue
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!--
|
||||
<input class="btn btn-secondary col-auto" name="calculate"
|
||||
[disabled]=assetsDepreciationForm.invalid (click)=calculate() type="button" value="Wylicz ">
|
||||
|
||||
</div>
|
||||
|
||||
-->
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import {Component, OnInit } from '@angular/core';
|
||||
import {Component, computed, effect, OnInit ,signal } from '@angular/core';
|
||||
import {FormsModule, ReactiveFormsModule, FormControl, FormGroup, Validators} from '@angular/forms';
|
||||
import {CurrencyPipe,DecimalPipe,PercentPipe} from '@angular/common';
|
||||
import {AssetsModule} from './assets/assets.module'
|
||||
|
|
@ -14,26 +14,56 @@ import {AssetService} from './assets/service/asset.service'
|
|||
})
|
||||
export class AssetCalculatorComponent implements OnInit{
|
||||
|
||||
assetsDepreciationForm = new FormGroup(
|
||||
{
|
||||
initialValueSet : new FormControl( '', [Validators.required, this.currencyValidator]),
|
||||
depreciationRate: new FormControl('') ,
|
||||
year : new FormControl(''),
|
||||
month : new FormControl(''),
|
||||
typeDepreciation: new FormControl( TypeDepreciation.linear ),
|
||||
factorValue : new FormControl( 2,[Validators.required,Validators.max(2)] )
|
||||
TypeDepreciation = TypeDepreciation;
|
||||
|
||||
// Asset{}
|
||||
|
||||
initialValueAsset = signal<number>( 3000 );
|
||||
depreciationRate = signal<number>( 20 );
|
||||
year = signal<number>( 2024 );
|
||||
month = signal<number>( 10 );
|
||||
typeDepreciation = signal< TypeDepreciation>( TypeDepreciation.linear );
|
||||
factorValue = signal<number>( 2 );
|
||||
|
||||
// Asset
|
||||
|
||||
|
||||
positions = new Positions();
|
||||
|
||||
assetsDepreciationForm = new FormGroup( {
|
||||
initialValueAsset : new FormControl( this.initialValueAsset(), [ Validators.required, this.currencyValidator ]),
|
||||
depreciationRate : new FormControl( this.depreciationRate() ) ,
|
||||
year : new FormControl( this.year() ),
|
||||
month : new FormControl( this.month() ),
|
||||
typeDepreciation : new FormControl( this.typeDepreciation ),
|
||||
factorValue : new FormControl( this.factorValue, [Validators.required,Validators.max(2)] )
|
||||
} );
|
||||
|
||||
constructor(private assetService : AssetService ){
|
||||
|
||||
effect( () => { this.calculate();});
|
||||
// this.assetsDepreciationForm.valueChanges.subscribe( (value)=> { this.calculateForAsset(value); });
|
||||
}
|
||||
|
||||
TypeDepreciation = TypeDepreciation;
|
||||
asset = new Asset();
|
||||
positions = new Positions();
|
||||
ngOnInit(): void{
|
||||
|
||||
}
|
||||
|
||||
calculate(){
|
||||
const asset : Asset = {
|
||||
initialValueAsset : this.initialValueAsset(),
|
||||
depreciationRate : this.depreciationRate(),
|
||||
year : this.year(),
|
||||
month : this.month(),
|
||||
type : this.typeDepreciation(),
|
||||
factorValue : this.factorValue()
|
||||
}
|
||||
this.calculateForAsset( asset );
|
||||
}
|
||||
|
||||
calculateForAsset( asset : Asset ) {
|
||||
this.assetService.calculate( asset ).subscribe(
|
||||
positions => { this.positions=positions; this.calculateToValues() });
|
||||
|
||||
calculate() {
|
||||
this.assetService.calculate(this.asset).subscribe( positions => { this.positions=positions; this.calculateToValues() });
|
||||
}
|
||||
|
||||
calculateToValues() {
|
||||
|
|
@ -57,8 +87,5 @@ export class AssetCalculatorComponent implements OnInit{
|
|||
return regex.test(value) ? null : { invalidCurrency: true };
|
||||
}
|
||||
|
||||
ngOnInit(): void{
|
||||
this.calculate();
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,15 +3,30 @@ export enum TypeDepreciation{
|
|||
linear, digressive
|
||||
}
|
||||
|
||||
export class Asset {
|
||||
initialValueAsset = 3000.00;
|
||||
|
||||
year = 2024;
|
||||
month = 10;
|
||||
export interface Asset {
|
||||
initialValueAsset : number ;
|
||||
depreciationRate : number ;
|
||||
type : TypeDepreciation;
|
||||
|
||||
type = TypeDepreciation.linear;
|
||||
depreciationRate = 20;
|
||||
factorValue = 2;
|
||||
year : number;
|
||||
month : number;
|
||||
|
||||
factorValue : number;
|
||||
/*
|
||||
constructor( initialValueAsset : number,
|
||||
depreciationRate : number,
|
||||
typeDepreciation : TypeDepreciation,
|
||||
year : number,
|
||||
month: number,
|
||||
factorValue: number ){
|
||||
this.initialValueAsset = initialValueAsset;
|
||||
this.depreciationRate = depreciationRate;
|
||||
this.type = typeDepreciation;
|
||||
this.year = year;
|
||||
this.month = month;
|
||||
this.factorValue = factorValue;
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
export class YearMonth{
|
||||
|
|
|
|||
Loading…
Reference in New Issue