119 lines
5.3 KiB
HTML
119 lines
5.3 KiB
HTML
<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="row">
|
|
<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="initialValueAsset" class="form-label col-auto" >Wartość początkowa środka trwałego:</label>
|
|
<div class="col">
|
|
<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="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)]=year
|
|
/>
|
|
</div>
|
|
<div class="col">
|
|
<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)]=typeDepreciation >
|
|
<option [ngValue]=TypeDepreciation.linear selected="selected">Liniowa</option>
|
|
<option [ngValue]=TypeDepreciation.digressive >Dygresywna</option>
|
|
</select>
|
|
</div>
|
|
|
|
</div>
|
|
@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)]=factorValue
|
|
/>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
<!--
|
|
<input class="btn btn-secondary col-auto" name="calculate"
|
|
[disabled]=assetsDepreciationForm.invalid (click)=calculate() type="button" value="Wylicz ">
|
|
|
|
-->
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
|
|
<div class="row mt-5">
|
|
<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>
|
|
|