1.Some changes graphical with calculator

2. Calculate sum depreciation for every year

src/app/asset-calculator/asset-calculator.component.html

@@ -6,16 +6,19 @@
             background-color: #f8f9fa; /* Tło formularza */
         }
         .frame2 {
-            border: 2px solid rgb(225, 228, 86); /* Kolor ramki */
+            border: 2px solid rgb(197, 195, 231); /* 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>
+        <div class="h1 text-center">Kalkulator amortyzacyjny</div>
+     </div>
+     <div class="row">
 
             <form [formGroup]=assetsDepreciationForm class="frame"> 
                 
@@ -87,8 +90,11 @@
 
     </div>
 
-    <div class="row mt-5">
+
-        <table class="table table-striped frame2">
+        <div class="h1 text-center mt-3" style="--bs-bg-opacity: .2;">Plan amortyzacji</div>
+        <div class="frame2 ">
+        <div class="row">
+            <table class="table table-striped ">
                 <thead>
                     <tr>
                         <th scope="col">Lp</th>
@@ -100,19 +106,28 @@
                 </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>	
+                        @if( 12 == position.when.month || $index == positions.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>
             </table>
         </div>
     </div>
+</div>
 

src/app/asset-calculator/asset-calculator.component.ts

@@ -67,10 +67,19 @@ export class AssetCalculatorComponent implements OnInit{
 
     calculateToValues() {
 		let sum :number = 0;
+		let sumThisYear: number = 0;
 		for(let position of this.positions.positions ){
 			position.calculatedDepreciation = position.calculatedDepreciation *0.01;
+
 			sum += position.calculatedDepreciation;
 			position.sum = sum;
+			
+			if( 1 == position.when.month ){
+				sumThisYear = position.calculatedDepreciation;
+			}else{
+				sumThisYear += position.calculatedDepreciation
+			}
+			position.sumThisYear = sumThisYear
 		}
 	}
 

src/app/asset-calculator/assets/asset.ts

@@ -38,6 +38,7 @@ export class AssetPlanPosition{
     when : YearMonth = new YearMonth();
     calculatedDepreciation : number = 0;
     sum:number = 0;
+    sumThisYear:number = 0;
 
 }