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

200
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">
<h1 class="heading">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>
<td>Stawka amortyzacyjna</td>
<td><input type="text" formControlName="depreciationRate"
[ngModel]="asset.depreciationRate | number:'1.2-2'"
(ngModelChange)="asset.depreciationRate=$event;calculate()"
/> %</td>
</tr>
<tr>
<td >Rok i miesiąc rozpoczęcia amortyzacjii</td>
<td colspan="2">
<input type="number" formControlName="year" [ngModel]="asset.year "
(ngModelChange)="asset.year=$event;calculate()"
/>
<input type="number" formControlName="month"
[ngModel]="asset.month"
(ngModelChange)="asset.month=$event;calculate()" />
</td>
</tr>
<tr>
<td>Metoda amortyzacji</td>
<td><select [ngModel]=asset.type
(ngModelChange)="asset.type=$event;calculate()" formControlName="typeDepreciation" >
<option [ngValue]="TypeDepreciation.linear" selected="selected">Liniowa</option>
<option [ngValue]="TypeDepreciation.digressive" >Dygresywna</option>
</select>
</td>
<h1 class="heading text-center">Kalkulator amortyzacyjny</h1>
<div class="row">
<div class="col-6">
<form [formGroup]=assetsDepreciationForm class="frame">
<div class="form-group row">
<label for="initialValueSet" class="col-7" >Wartość początkowa środka trwałego: </label>
<div class="col-3">
<input type="text" class="form-control" id="initialValueSet" aria-describedby="initialValueHelpInline" formControlName="initialValueSet" required
[ngModel]="asset.initialValueAsset"
(ngModelChange)="asset.initialValueAsset=$event" />
</div>
<div class="col-auto">
<span>PLN</span>
</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="col-7">Stawka amortyzacyjna w procentach :</label>
<div class="col-3">
<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>
<div class="form-group row">
<label class="col-7">Metoda amortyzacji</label>
<div class="col" >
<select class="form-control" formControlName="typeDepreciation"
[ngModel]=asset.type
(ngModelChange)="asset.type=$event;calculate()" >
<option [ngValue]=TypeDepreciation.linear selected="selected">Liniowa</option>
<option [ngValue]=TypeDepreciation.digressive >Dygresywna</option>
</select>
</div>
</div>
@if( TypeDepreciation.digressive === asset.type ){
<div class="form-group row">
<label for="factorValue" class="col-7">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()"/>
</div>
</div>
}
<input class="btn btn-secondary col-auto" name="calculate"
[disabled]=assetsDepreciationForm.invalid (click)=calculate() type="button" value="Wylicz ">
</form>
</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)" >
<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>
@if( TypeDepreciation.digressive === asset.type ){
<td style="display: block">
<input type="text" class="form-control" formControlName="factorValue"
[ngModel]="asset.factorValue | number:'1.2-2' "
(ngModelChange)="asset.factorValue=$event;calculate()"/>
</td>
}
</tr>
<input class="btn btn-primary" name="calculate" (click)=calculate() type="button" value="Wylicz ">
</table>
</form>
<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>
</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(
{
initialValueSet : new FormControl('20000.00'),
initialValueSet : new FormControl( '', [Validators.required, this.currencyValidator]),
depreciationRate: new FormControl('') ,
year : new FormControl('2022'),
month : new FormControl('10'),
year : new FormControl(''),
month : new FormControl(''),
typeDepreciation: new FormControl( TypeDepreciation.linear ),
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";
}
// 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{
this.calculate();
}

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

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