From d9155dc87da823df3c2c69077e79b8b4055db781 Mon Sep 17 00:00:00 2001
From: Artur <kusartur@gmail.com>
Date: Fri, 11 Oct 2024 16:39:33 +0200
Subject: [PATCH] I try put nice interface

---
 .../asset-calculator.component.html           |  86 ++++++++++++++-
 .../asset-calculator.component.ts             | 102 +++---------------
 src/app/asset-calculator/assets/asset.ts      |   2 +-
 3 files changed, 100 insertions(+), 90 deletions(-)

diff --git a/src/app/asset-calculator/asset-calculator.component.html b/src/app/asset-calculator/asset-calculator.component.html
index d5f2157..0f98bd0 100644
--- a/src/app/asset-calculator/asset-calculator.component.html
+++ b/src/app/asset-calculator/asset-calculator.component.html
@@ -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>
diff --git a/src/app/asset-calculator/asset-calculator.component.ts b/src/app/asset-calculator/asset-calculator.component.ts
index b502832..43735ea 100644
--- a/src/app/asset-calculator/asset-calculator.component.ts
+++ b/src/app/asset-calculator/asset-calculator.component.ts
@@ -1,5 +1,5 @@
 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 {AssetsModule} from './assets/assets.module'
 import {Asset, Positions, AssetPlanPosition, TypeDepreciation } from './assets/asset';
@@ -8,96 +8,22 @@ import {AssetService} from './assets/service/asset.service'
 @Component({
   selector: 'app-asset-calculator',
   standalone: true,
-  imports: [FormsModule, CurrencyPipe, DecimalPipe, PercentPipe, AssetsModule],
-  template: `
-  	<h1>Kalkulator amortyzacyjny</h1>
-		      
-	        <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'
+  imports: [FormsModule, CurrencyPipe, DecimalPipe, PercentPipe, AssetsModule, ReactiveFormsModule ] ,
+  templateUrl: "asset-calculator.component.html",
+  styleUrl: 'asset-calculator.component.css'
 })
 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 ){
 
     }
diff --git a/src/app/asset-calculator/assets/asset.ts b/src/app/asset-calculator/assets/asset.ts
index 51844ba..eec5eda 100644
--- a/src/app/asset-calculator/assets/asset.ts
+++ b/src/app/asset-calculator/assets/asset.ts
@@ -4,7 +4,7 @@ export enum TypeDepreciation{
 }
 
 export class Asset {
-    initialValueAsset        = 2000;
+    initialValueAsset        = '2000';
     
     year                     = 2024;
     month                    = 10;