arti24
/
arti-angular-app
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Graphical changes in the interface to the depreciation calculator

This commit is contained in:
Artur 2024-10-13 18:48:46 +02:00
parent 3865ae867a
commit f930af39c1
3 changed files with 128 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

188
src/app/asset-calculator/asset-calculator.component.html
View File

@ -1,85 +1,119 @@
<style>
.frame {
border: 2px solid gray; /* Kolor ramki */
border-radius: 8px; /* Zaokrąglenie krawędzi */
padding: 20px; /* Odstęp wewnętrzny */
background-color: #f8f9fa; /* Tło formularza */
}
.frame2 {
border: 2px solid rgb(225, 228, 86); /* Kolor ramki */
border-radius: 8px; /* Zaokrąglenie krawędzi */
padding: 20px; /* Odstęp wewnętrzny */
background-color: #f8f9fa; /* Tło formularza */
}
</style>
<div class="container mt-5"> <div class="container mt-5">
<h1 class="heading">Kalkulator amortyzacyjny</h1> <h1 class="heading text-center">Kalkulator amortyzacyjny</h1>
<div class="form-group">
<form [formGroup]="assetsDepreciationForm">
<table>
<tr>
<td>
<label for="initialValueSet" >Wartość początkowa środka trwałego: </label>
</td>
<td>
<input type="text" id="initialValueSet" formControlName="initialValueSet" required
[ngModel]="asset.initialValueAsset | number:'0.2-2'"
(ngModelChange)="asset.initialValueAsset=$event;calculate()" />
</td>
</tr>
<tr> <div class="row">
<td>Stawka amortyzacyjna</td> <div class="col-6">
<td><input type="text" formControlName="depreciationRate" <form [formGroup]=assetsDepreciationForm class="frame">
[ngModel]="asset.depreciationRate | number:'1.2-2'" <div class="form-group row">
(ngModelChange)="asset.depreciationRate=$event;calculate()" <label for="initialValueSet" class="col-7" >Wartość początkowa środka trwałego: </label>
/> %</td> <div class="col-3">
</tr> <input type="text" class="form-control" id="initialValueSet" aria-describedby="initialValueHelpInline" formControlName="initialValueSet" required
<tr> [ngModel]="asset.initialValueAsset"
<td >Rok i miesiąc rozpoczęcia amortyzacjii</td> (ngModelChange)="asset.initialValueAsset=$event" />
<td colspan="2">
<input type="number" formControlName="year" [ngModel]="asset.year "
(ngModelChange)="asset.year=$event;calculate()"
/>
<input type="number" formControlName="month" </div>
[ngModel]="asset.month" <div class="col-auto">
(ngModelChange)="asset.month=$event;calculate()" /> <span>PLN</span>
</td> </div>
</tr> @if(assetsDepreciationForm.get('initialValueSet')?.invalid && assetsDepreciationForm.get('initialValueSet')?.touched){
<tr> <div class="text-danger col-auto"> Wartość niepoprawna!. Podaj kwotę w zł np 3000.05 (czyli 3000 zł i 5 gr)</div>
<td>Metoda amortyzacji</td> }@else{
<td><select [ngModel]=asset.type }
(ngModelChange)="asset.type=$event;calculate()" formControlName="typeDepreciation" > </div>
<option [ngValue]="TypeDepreciation.linear" selected="selected">Liniowa</option> <div class="form-group row">
<option [ngValue]="TypeDepreciation.digressive" >Dygresywna</option> <label for="depreciationRate" class="col-7">Stawka amortyzacyjna w procentach :</label>
</select> <div class="col-3">
</td> <input type="text" class="form-control" id="depreciationRate" formControlName="depreciationRate"
[ngModel]="asset.depreciationRate | number:'1.2-2'"
(ngModelChange)="asset.depreciationRate=$event"/>
</div>
<div class="col-auto">
<span>%</span>
</div>
</div>
<div class="form-group row">
<label class="col-7">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()" />
</div>
<div class="col">
<input type="number" class="form-control" formControlName="month"
[ngModel]=asset.month
(ngModelChange)="asset.month=$event;calculate()" />
</div>
</div>
@if( TypeDepreciation.digressive === asset.type ){ <div class="form-group row">
<td style="display: block"> <label class="col-7">Metoda amortyzacji</label>
<input type="text" class="form-control" formControlName="factorValue" <div class="col" >
[ngModel]="asset.factorValue | number:'1.2-2' " <select class="form-control" formControlName="typeDepreciation"
(ngModelChange)="asset.factorValue=$event;calculate()"/> [ngModel]=asset.type
</td> (ngModelChange)="asset.type=$event;calculate()" >
} <option [ngValue]=TypeDepreciation.linear selected="selected">Liniowa</option>
<option [ngValue]=TypeDepreciation.digressive >Dygresywna</option>
</select>
</div>
</tr> </div>
<input class="btn btn-primary" name="calculate" (click)=calculate() type="button" value="Wylicz "> @if( TypeDepreciation.digressive === asset.type ){
</table> <div class="form-group row">
</form> <label for="factorValue" class="col-7">Wspólczynnki degresji</label>
<div class="container"> <div class="col-auto" >
<table class="table table-striped"> <input type="text" class="form-control" formControlName="factorValue"
<thead> [ngModel]="asset.factorValue | number:'1.2-2' "
<tr> (ngModelChange)="asset.factorValue=$event;calculate()"/>
<th scope="col">Lp</th> </div>
<th scope="col">Rok</th> </div>
<th scope="col">Miesiąc</th> }
<th scope="col">Kwota odpisu</th>
<th scope="col">Lączny odpis</th> <input class="btn btn-secondary col-auto" name="calculate"
</tr> [disabled]=assetsDepreciationForm.invalid (click)=calculate() type="button" value="Wylicz ">
</thead>
<tbody> </form>
@for (position of positions.positions; track $index) { </div>
<div class="col-6">
<table class="table table-striped frame2">
<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)" > <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>
</div>
</div>
<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>
</div>
</div>

13
src/app/asset-calculator/asset-calculator.component.ts
View File

@ -16,10 +16,10 @@ export class AssetCalculatorComponent implements OnInit{
assetsDepreciationForm = new FormGroup( assetsDepreciationForm = new FormGroup(
{ {
initialValueSet : new FormControl('20000.00'), initialValueSet : new FormControl( '', [Validators.required, this.currencyValidator]),
depreciationRate: new FormControl('') , depreciationRate: new FormControl('') ,
year : new FormControl('2022'), year : new FormControl(''),
month : new FormControl('10'), month : new FormControl(''),
typeDepreciation: new FormControl( TypeDepreciation.linear ), typeDepreciation: new FormControl( TypeDepreciation.linear ),
factorValue : new FormControl( 2,[Validators.required,Validators.max(2)] ) factorValue : new FormControl( 2,[Validators.required,Validators.max(2)] )
} ); } );
@ -50,6 +50,13 @@ export class AssetCalculatorComponent implements OnInit{
return pos.when.year % 2 === 0 ? "table-light" : "table-dark"; return pos.when.year % 2 === 0 ? "table-light" : "table-dark";
} }
// Walidator dla kwoty
currencyValidator(control: any) {
const value = control.value;
const regex = /^\d+(\.\d{1,2})?$/; // Akceptuje liczby z maksymalnie dwoma miejscami po przecinku
return regex.test(value) ? null : { invalidCurrency: true };
}
ngOnInit(): void{ ngOnInit(): void{
this.calculate(); this.calculate();
} }

2
src/app/asset-calculator/assets/asset.ts
View File

@ -4,7 +4,7 @@ export enum TypeDepreciation{
} }
export class Asset { export class Asset {
initialValueAsset = '2000'; initialValueAsset = 3000.00;
year = 2024; year = 2024;
month = 10; month = 10;