From c67c03ee3ae2bfab92b02be3d781ddd52600eb43 Mon Sep 17 00:00:00 2001
From: Artur <kusartur@gmail.com>
Date: Wed, 16 Oct 2024 15:20:47 +0200
Subject: [PATCH] New version 'amortyzacji' bez przycisku kalkulate.

---
 src/app/about-me/about-me.component.html      |  7 +--
 src/app/about-me/about-me.component.ts        |  3 +-
 .../asset-calculator.component.html           | 43 +++++++------
 .../asset-calculator.component.ts             | 63 +++++++++++++------
 src/app/asset-calculator/assets/asset.ts      | 31 ++++++---
 5 files changed, 96 insertions(+), 51 deletions(-)

diff --git a/src/app/about-me/about-me.component.html b/src/app/about-me/about-me.component.html
index 22f54bb..a4f6cf5 100644
--- a/src/app/about-me/about-me.component.html
+++ b/src/app/about-me/about-me.component.html
@@ -15,13 +15,12 @@
 		width: 100%;
 		border-radius: 50%;
 	}
-}
+</style>
 
-</style>\
-<div class="container frame">
+<div class="container frame mt-5">
 
 	<div class="card" style="width: 18rem;">
-		<img src="ARTI-1.jpg" class="card-img-to" alt="Ja">
+		<img ngSrc="ARTI-1.jpg"  width="200" height="350" priority  class="card-img-to" alt="Ja">
 		<div class="card-body">
 			<h5 class="card-title">Wrocław</h5>
 			<div class="col-auto">
diff --git a/src/app/about-me/about-me.component.ts b/src/app/about-me/about-me.component.ts
index bcac009..a2e4b92 100644
--- a/src/app/about-me/about-me.component.ts
+++ b/src/app/about-me/about-me.component.ts
@@ -1,9 +1,10 @@
 import { Component } from '@angular/core';
+import {NgOptimizedImage} from '@angular/common'
 
 @Component({
   selector: 'app-about-me',
   standalone: true,
-  imports: [],
+  imports: [NgOptimizedImage],
   templateUrl: './about-me.component.html',
   styleUrl: './about-me.component.css'
 })
diff --git a/src/app/asset-calculator/asset-calculator.component.html b/src/app/asset-calculator/asset-calculator.component.html
index e2471e3..29248fa 100644
--- a/src/app/asset-calculator/asset-calculator.component.html
+++ b/src/app/asset-calculator/asset-calculator.component.html
@@ -18,68 +18,71 @@
         <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="initialValueSet" class="form-label col-auto" >Wartość początkowa środka trwałego:</label>
+                    <label for="initialValueAsset" class="form-label col-auto" >Wartość początkowa środka trwałego:</label>
                     <div class="col">
-                        <input type="text" class="form-control" id="initialValueSet" aria-describedby="initialValueHelpInline" formControlName="initialValueSet" required
-                            [ngModel]="asset.initialValueAsset" 
-                            (ngModelChange)="asset.initialValueAsset=$event"  /> 
+                        <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="text" class="form-control" id="depreciationRate"  formControlName="depreciationRate"
-                            [ngModel]="asset.depreciationRate | number:'1.2-2'" 
-                            (ngModelChange)="asset.depreciationRate=$event"/> 
+                            <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]=asset.year 
-                        (ngModelChange)="asset.year=$event;calculate()" />
+                        [(ngModel)]=year 
+                     />
                     </div>
                     <div class="col">
-                            <input type="number" class="form-control" formControlName="month"
-                            [ngModel]=asset.month   
-                            (ngModelChange)="asset.month=$event;calculate()"  />
+                        <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]=asset.type
-                            (ngModelChange)="asset.type=$event;calculate()" >
+                        <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 === asset.type  ){
+                @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]="asset.factorValue | number:'1.2-2' "
-                                (ngModelChange)="asset.factorValue=$event;calculate()"/>
+                                [(ngModel)]=factorValue
+                                />
                         </div>
                     </div>
                 }
 
+                <!--
                 <input  class="btn btn-secondary col-auto" name="calculate"   
                         [disabled]=assetsDepreciationForm.invalid (click)=calculate()   type="button" value="Wylicz ">
-
-                    </div>
+                  
+                -->
+            </div>   
         </form>
 
     </div>
diff --git a/src/app/asset-calculator/asset-calculator.component.ts b/src/app/asset-calculator/asset-calculator.component.ts
index 5cf9003..3d02cf9 100644
--- a/src/app/asset-calculator/asset-calculator.component.ts
+++ b/src/app/asset-calculator/asset-calculator.component.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit } from '@angular/core';
+import {Component, computed, effect, OnInit ,signal } from '@angular/core';
 import {FormsModule, ReactiveFormsModule, FormControl, FormGroup, Validators} from '@angular/forms';
 import {CurrencyPipe,DecimalPipe,PercentPipe} from '@angular/common';
 import {AssetsModule} from './assets/assets.module'
@@ -14,26 +14,56 @@ import {AssetService} from './assets/service/asset.service'
 })
 export class AssetCalculatorComponent implements OnInit{
 
-	assetsDepreciationForm = new FormGroup(
-	{    
-		initialValueSet : new FormControl( '', [Validators.required, this.currencyValidator]),    
-		depreciationRate: new FormControl('') ,
-		year            : new FormControl(''),
-		month 			: new FormControl(''),
-		typeDepreciation: new FormControl( TypeDepreciation.linear ),
-		factorValue     : new FormControl( 2,[Validators.required,Validators.max(2)] )
+	TypeDepreciation = TypeDepreciation;
+
+	// Asset{}
+	
+	initialValueAsset = signal<number>( 3000 );
+	depreciationRate  = signal<number>( 20 );
+	year              = signal<number>( 2024 );
+	month             = signal<number>( 10 );
+	typeDepreciation  = signal< TypeDepreciation>( TypeDepreciation.linear );
+	factorValue       =  signal<number>( 2 );
+
+	// Asset
+
+
+	positions = new Positions();
+
+	assetsDepreciationForm = new FormGroup(	{    
+		initialValueAsset : new FormControl( this.initialValueAsset(), [ Validators.required, this.currencyValidator ]),    
+		depreciationRate  : new FormControl( this.depreciationRate() ) ,
+		year              : new FormControl( this.year() ),
+		month 			  : new FormControl( this.month() ),
+		typeDepreciation  : new FormControl( this.typeDepreciation ),
+		factorValue       : new FormControl( this.factorValue, [Validators.required,Validators.max(2)] )
 	} );
 
     constructor(private assetService : AssetService ){
-
+		effect( () => {  this.calculate();});
+//		this.assetsDepreciationForm.valueChanges.subscribe( (value)=> {	this.calculateForAsset(value);	});
     }
 
-	TypeDepreciation = TypeDepreciation;
-    asset = new Asset();
-	positions = new Positions();
+	ngOnInit(): void{
+		
+	}
+
+	calculate(){
+		const asset : Asset = {
+			initialValueAsset : this.initialValueAsset(),
+			depreciationRate  : this.depreciationRate(),
+			year  : this.year(),
+			month : this.month(),
+			type  : this.typeDepreciation(),
+			factorValue : this.factorValue() 
+		}
+		this.calculateForAsset( asset );
+	}
+
+	calculateForAsset( asset : Asset ) { 
+		this.assetService.calculate( asset ).subscribe( 
+			positions => { this.positions=positions; this.calculateToValues() });
 
-    calculate() { 
-		this.assetService.calculate(this.asset).subscribe( positions => { this.positions=positions; this.calculateToValues() });
     }
 
     calculateToValues() {
@@ -57,8 +87,5 @@ export class AssetCalculatorComponent implements OnInit{
 		return regex.test(value) ? null : { invalidCurrency: true };
 	}
 
-	ngOnInit(): void{
-		this.calculate();
-	}
 
 }
diff --git a/src/app/asset-calculator/assets/asset.ts b/src/app/asset-calculator/assets/asset.ts
index 12b8cad..dfe6c09 100644
--- a/src/app/asset-calculator/assets/asset.ts
+++ b/src/app/asset-calculator/assets/asset.ts
@@ -3,15 +3,30 @@ export enum TypeDepreciation{
     linear, digressive
 }
 
-export class Asset {
-    initialValueAsset        = 3000.00;
-    
-    year                     = 2024;
-    month                    = 10;
+export interface Asset {
+    initialValueAsset   : number ;
+    depreciationRate    : number ;
+    type    : TypeDepreciation;
 
-    type                     = TypeDepreciation.linear;
-    depreciationRate         = 20;
-    factorValue              = 2;
+    year                : number;
+    month               : number;
+
+    factorValue         : number;
+/*
+    constructor( initialValueAsset : number,
+                 depreciationRate : number,
+                 typeDepreciation    : TypeDepreciation,
+                 year : number,
+                 month: number,
+                 factorValue: number ){
+        this.initialValueAsset = initialValueAsset;
+        this.depreciationRate  = depreciationRate;
+        this.type  = typeDepreciation;
+        this.year  = year;
+        this.month = month;
+        this.factorValue = factorValue;
+    }
+  */      
 }
 
 export class YearMonth{