Some changes in display for assets

This commit is contained in:
Artur 2024-10-13 19:28:04 +02:00
parent b02119f12b
commit 13c43df7a2
1 changed files with 95 additions and 88 deletions

View File

@ -13,17 +13,20 @@
} }
</style> </style>
<div class="container mt-5"> <div class="container mt-5">
<div class="row">
<h1 class="heading text-center">Kalkulator amortyzacyjny</h1> <h1 class="heading text-center">Kalkulator amortyzacyjny</h1>
<form [formGroup]=assetsDepreciationForm class="frame"> <form [formGroup]=assetsDepreciationForm class="frame">
<div class="align-items-start" >
<div class="form-group row"> <div class="form-group row">
<label for="initialValueSet" class="form-label col-3" >Wartość początkowa środka trwałego: </label> <label for="initialValueSet" class="form-label col-auto" >Wartość początkowa środka trwałego:</label>
<div class="col-3"> <div class="col">
<input type="text" class="form-control" id="initialValueSet" aria-describedby="initialValueHelpInline" formControlName="initialValueSet" required <input type="text" class="form-control" id="initialValueSet" aria-describedby="initialValueHelpInline" formControlName="initialValueSet" required
[ngModel]="asset.initialValueAsset" [ngModel]="asset.initialValueAsset"
(ngModelChange)="asset.initialValueAsset=$event" /> (ngModelChange)="asset.initialValueAsset=$event" />
</div> </div>
<div class="col-auto"> <div class="col">
<span>PLN</span> <span>PLN</span>
</div> </div>
@if(assetsDepreciationForm.get('initialValueSet')?.invalid && assetsDepreciationForm.get('initialValueSet')?.touched){ @if(assetsDepreciationForm.get('initialValueSet')?.invalid && assetsDepreciationForm.get('initialValueSet')?.touched){
@ -32,24 +35,24 @@
} }
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label for="depreciationRate" class="form-label col-3" >Stawka amortyzacyjna w procentach :</label> <label for="depreciationRate" class="form-label col-auto" >Stawka amortyzacyjna w procentach:</label>
<div class="col-3"> <div class="col">
<input type="text" class="form-control" id="depreciationRate" formControlName="depreciationRate" <input type="text" class="form-control" id="depreciationRate" formControlName="depreciationRate"
[ngModel]="asset.depreciationRate | number:'1.2-2'" [ngModel]="asset.depreciationRate | number:'1.2-2'"
(ngModelChange)="asset.depreciationRate=$event"/> (ngModelChange)="asset.depreciationRate=$event"/>
</div> </div>
<div class="col-auto"> <div class="col">
<span>%</span> <span>%</span>
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label class="form-label col-3">Rok i miesiąc rozpoczęcia amortyzacji</label> <label class="form-label col-auto">Rok i miesiąc rozpoczęcia amortyzacji</label>
<div class="col-1"> <div class="col">
<input type="number" class="form-control" formControlName="year" <input type="number" class="form-control" formControlName="year"
[ngModel]=asset.year [ngModel]=asset.year
(ngModelChange)="asset.year=$event;calculate()" /> (ngModelChange)="asset.year=$event;calculate()" />
</div> </div>
<div class="col-1"> <div class="col">
<input type="number" class="form-control" formControlName="month" <input type="number" class="form-control" formControlName="month"
[ngModel]=asset.month [ngModel]=asset.month
(ngModelChange)="asset.month=$event;calculate()" /> (ngModelChange)="asset.month=$event;calculate()" />
@ -57,8 +60,8 @@
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label class="form-label col-3">Metoda amortyzacji</label> <label class="form-label col-auto">Metoda amortyzacji</label>
<div class="col-3" > <div class="col-auto" >
<select class="form-control" formControlName="typeDepreciation" <select class="form-control" formControlName="typeDepreciation"
[ngModel]=asset.type [ngModel]=asset.type
(ngModelChange)="asset.type=$event;calculate()" > (ngModelChange)="asset.type=$event;calculate()" >
@ -70,7 +73,7 @@
</div> </div>
@if( TypeDepreciation.digressive === asset.type ){ @if( TypeDepreciation.digressive === asset.type ){
<div class="form-group row"> <div class="form-group row">
<label for="factorValue" class="form-label col-3">Wspólczynnki degresji</label> <label for="factorValue" class="form-label col-auto">Wspólczynnki degresji</label>
<div class="col-auto" > <div class="col-auto" >
<input type="text" class="form-control" formControlName="factorValue" <input type="text" class="form-control" formControlName="factorValue"
[ngModel]="asset.factorValue | number:'1.2-2' " [ngModel]="asset.factorValue | number:'1.2-2' "
@ -82,8 +85,12 @@
<input class="btn btn-secondary col-auto" name="calculate" <input class="btn btn-secondary col-auto" name="calculate"
[disabled]=assetsDepreciationForm.invalid (click)=calculate() type="button" value="Wylicz "> [disabled]=assetsDepreciationForm.invalid (click)=calculate() type="button" value="Wylicz ">
</div>
</form> </form>
<div class="mt-5">
</div>
<div class="row mt-5">
<table class="table table-striped frame2"> <table class="table table-striped frame2">
<thead> <thead>
<tr> <tr>