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

Some little changes in display

This commit is contained in:
Artur 2024-10-27 23:01:11 +01:00
parent 202cf9ab8a
commit 1765c4d17e
1 changed files with 51 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,15 +22,16 @@
<div class="container mt-5"> <div class="container mt-5">
<div class="row"> <div class="row">
<div class="h1 text-center">Kalkulator amortyzacyjny</div> <div class="h1 text-center text-lg-start">Kalkulator amortyzacyjny</div>
</div> </div>
<div class="row">
<div class="row m-1 col-lg-4">
<form [formGroup]=assetsDepreciationFormGroup class="frame"> <form [formGroup]=assetsDepreciationFormGroup class="frame">
<div class="form-group row align-items-center mb-1"> <div class="form-group row align-items-center mb-1">
<div class="col-5 col-lg-2 text-start"> <div class="col-5 col-lg text-start">
<label class="form-label" for="initialValueAsset" >Wartość początkowa ŚT:</label> <label class="form-label" for="initialValueAsset" >Wartość początkowa ŚT:</label>
</div> </div>
<div class="col col-lg-2"> <div class="col col-lg">
<input class="form-control" formControlName="initialValueAsset" [(ngModel)]=initialValueAsset <input class="form-control" formControlName="initialValueAsset" [(ngModel)]=initialValueAsset
type="number" id="initialValueAsset" required > type="number" id="initialValueAsset" required >
@ -43,10 +44,10 @@
</div> </div>
<div class="form-group row align-items-center"> <div class="form-group row align-items-center">
<div class="col-5 col-lg-2 text-start "> <div class="col-5 col-lg text-start ">
<label class="form-label" for="depreciationRate" >Stawka amortyzacyjna:</label> <label class="form-label" for="depreciationRate" >Stawka amortyzacyjna:</label>
</div> </div>
<div class="col-3 col-lg-2"> <div class="col-3 col-lg">
<input class="form-control" formControlName="depreciationRate" [(ngModel)]=depreciationRate <input class="form-control" formControlName="depreciationRate" [(ngModel)]=depreciationRate
type="number" id="depreciationRate" /> type="number" id="depreciationRate" />
</div> </div>
@ -56,10 +57,10 @@
</div> </div>
<div class="form-group row align-items-center "> <div class="form-group row align-items-center ">
<div class="col-5 col-lg-2 text-start "> <div class="col-5 col-lg text-start ">
<label class="form-label">Rozpoczęcie amortyzacji:</label> <label class="form-label">Rozpoczęcie amortyzacji:</label>
</div> </div>
<div class="col-7 col-lg-2"> <div class="col-7 col-lg">
<input type="month" lang="pl" class="form-control" formControlName="year_month" id="year_month" [(ngModel)]=year_month placeholder="2024" /> <input type="month" lang="pl" class="form-control" formControlName="year_month" id="year_month" [(ngModel)]=year_month placeholder="2024" />
</div> </div>
@ -67,10 +68,10 @@
</div> </div>
<div class="form-group row align-items-center"> <div class="form-group row align-items-center">
<div class="col-5 col-lg-2 text-start " > <div class="col-5 col-lg text-start " >
<label class="form-label">Metoda amortyzacji:</label> <label class="form-label">Metoda amortyzacji:</label>
</div> </div>
<div class="col col-lg-2" > <div class="col col-lg" >
<select class="form-select" formControlName="typeDepreciation" [(ngModel)]=typeDepreciation > <select class="form-select" formControlName="typeDepreciation" [(ngModel)]=typeDepreciation >
<option [ngValue]=TypeDepreciation.linear selected="selected">Liniowa</option> <option [ngValue]=TypeDepreciation.linear selected="selected">Liniowa</option>
<option [ngValue]=TypeDepreciation.digressive >Dygresywna</option> <option [ngValue]=TypeDepreciation.digressive >Dygresywna</option>
@ -80,10 +81,10 @@
@if( TypeDepreciation.digressive === typeDepreciation() ){ @if( TypeDepreciation.digressive === typeDepreciation() ){
<div class="form-group row align-items-center"> <div class="form-group row align-items-center">
<div class="col-5 col-lg-2 text-start "> <div class="col-5 col-lg text-start ">
<label for="factorValue" class="form-label">Wspólczynnki degresji</label> <label for="factorValue" class="form-label">Wspólczynnki degresji</label>
</div> </div>
<div class="col col-lg-2" > <div class="col col-lg" >
<input type="text" class="form-control" formControlName="factorValue" [(ngModel)]=factorValue /> <input type="text" class="form-control" formControlName="factorValue" [(ngModel)]=factorValue />
</div> </div>
</div> </div>
@ -93,17 +94,18 @@
[disabled]=assetsDepreciationFormGroup.invalid (click)=calculate() type="button" value="Wylicz "> --> [disabled]=assetsDepreciationFormGroup.invalid (click)=calculate() type="button" value="Wylicz "> -->
</form> </form>
<div class="col-1"> </div>
<div class="col-1">
<input class="btn btn-secondary col-auto" name="addChangeValue" <input class="btn btn-secondary col-auto" name="addChangeValue"
[disabled]=assetsDepreciationFormGroup.invalid (click)=addChangeValue() type="button" value="Dodaj zmianę wartości "> [disabled]=assetsDepreciationFormGroup.invalid (click)=addChangeValue() type="button" value="Dodaj zmianę wartości ">
</div> </div>
@if( lifeFormArray.controls.length > 0 ){ @if( lifeFormArray.controls.length > 0 ){
<div> <div>
<div class="row"> <div class="row">
<div class="col-11 h1 text-center mt-3" >Zmiany wartości</div> <div class="col-11 h1 text-center mt-3" >Zmiany wartości</div>
</div> </div>
<div class="row"> <div class="row m-1">
<table class="table table-striped "> <table class="table table-striped ">
<thead> <thead>
<tr> <tr>
@ -127,46 +129,46 @@
</div> </div>
} }
<div> <div>
<div class="row m-1">
<div class="h1 text-center mt-3" style="--bs-bg-opacity: .2;">Plan amortyzacji</div> <div class="h1 text-center mt-3" style="--bs-bg-opacity: .2;">Plan amortyzacji</div>
<div class="frame2 "> <div class="frame2 ">
<div class="row"> <div class="row">
<table class="table table-striped "> <table class="table table-striped ">
<thead> <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 amortizations.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>
@if( 12 == position.when.month || $index == amortizations.positions.length-1){
<tr> <tr>
<td colspan="4"> <th scope="col">Lp</th>
</td> <th scope="col">Rok</th>
<td colspan="1"> <th scope="col">Miesiąc</th>
<div class="row justify-content-end text-center"> <th scope="col">Kwota odpisu</th>
<div class="frame col-auto">Łącznie w roku {{position.when.year}} odpis : {{ position.sumThisYear| number:'1.2-2' }} </div> <th scope="col">Lączny odpis</th>
</div>
</td>
</tr> </tr>
</thead>
<tbody>
@for (position of amortizations.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>
@if( 12 == position.when.month || $index == amortizations.positions.length-1){
<tr>
<td colspan="4">
</td>
<td colspan="1">
<div class="row justify-content-end text-center">
<div class="frame col-auto">Łącznie w roku {{position.when.year}} odpis : {{ position.sumThisYear| number:'1.2-2' }} </div>
</div>
</td>
</tr>
}
} }
} </tbody>
</tbody> </table>
</table> </div>
</div> </div>
</div> </div>
</div> </div>