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

I try put nice interface

This commit is contained in:
Artur 2024-10-11 16:39:33 +02:00
parent 6fa03e080c
commit d9155dc87d
3 changed files with 100 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1 +1,85 @@
<p>asset-calculator works!</p> <div class="container">
<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>
@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>

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

@ -1,5 +1,5 @@
import {Component, OnInit } from '@angular/core'; import {Component, OnInit } from '@angular/core';
import {FormsModule} from '@angular/forms'; import {FormsModule, ReactiveFormsModule, FormControl, FormGroup, Validators} from '@angular/forms';
import {CurrencyPipe,DecimalPipe,PercentPipe} from '@angular/common'; import {CurrencyPipe,DecimalPipe,PercentPipe} from '@angular/common';
import {AssetsModule} from './assets/assets.module' import {AssetsModule} from './assets/assets.module'
import {Asset, Positions, AssetPlanPosition, TypeDepreciation } from './assets/asset'; import {Asset, Positions, AssetPlanPosition, TypeDepreciation } from './assets/asset';
@ -8,96 +8,22 @@ import {AssetService} from './assets/service/asset.service'
@Component({ @Component({
selector: 'app-asset-calculator', selector: 'app-asset-calculator',
standalone: true, standalone: true,
imports: [FormsModule, CurrencyPipe, DecimalPipe, PercentPipe, AssetsModule], imports: [FormsModule, CurrencyPipe, DecimalPipe, PercentPipe, AssetsModule, ReactiveFormsModule ] ,
template: ` templateUrl: "asset-calculator.component.html",
<h1>Kalkulator amortyzacyjny</h1> styleUrl: 'asset-calculator.component.css'
<table class="table-striped">
<tr>
<td>Wartość początkowa środka trwałego:</td>
<td colspan="2"><input
type="text" id="value" name="value"
[ngModel]="asset.initialValueAsset | number:'1.2-2'"
(ngModelChange)="asset.initialValueAsset=$event;calculate()"
/> Zł</td>
</tr>
<tr>
<td colspan="1" >Stawka amortyzacyjna</td>
<td colspan="2"><input type="text" id="rate" name="rate"
[ngModel]="asset.depreciationRate | number:'1.2-2'"
(ngModelChange)="asset.depreciationRate=$event;calculate()"
/> %</td>
</tr>
<tr>
<td >Miesiąc rozpoczęcia amortyzacjii</td>
<td colspan="2">
<input type="number" id="year" name="year"
[ngModel]="asset.year "
(ngModelChange)="asset.year=$event;calculate()"
/>
<input type="number" id="month" name="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() ">
<option [ngValue]="TypeDepreciation.linear" selected="selected">Liniowa</option>
<option [ngValue]="TypeDepreciation.digressive" >Dygresywna</option>
</select>
</td>
@if( TypeDepreciation.digressive === asset.type ){
<td id="wskaznik" style="display: block">
<input type="text" id="factor" name="factor"
[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>
<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>
`,
styleUrl: './asset-calculator.component.css'
}) })
export class AssetCalculatorComponent implements OnInit{ export class AssetCalculatorComponent implements OnInit{
assetsDepreciationForm = new FormGroup(
{
initialValueSet : new FormControl('20000.00'),
depreciationRate: new FormControl('') ,
year : new FormControl('2022'),
month : new FormControl('10'),
typeDepreciation: new FormControl( TypeDepreciation.linear ),
factorValue : new FormControl( 2,[Validators.required,Validators.max(2)] )
} );
constructor(private assetService : AssetService ){ constructor(private assetService : AssetService ){
} }

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 = '2000';
year = 2024; year = 2024;
month = 10; month = 10;