From 13c43df7a2e1d4ce45d5e52b7ee30aa0d3b2e8d0 Mon Sep 17 00:00:00 2001
From: Artur <kusartur@gmail.com>
Date: Sun, 13 Oct 2024 19:28:04 +0200
Subject: [PATCH] Some changes in display for assets

---
 .../asset-calculator.component.html           | 183 +++++++++---------
 1 file changed, 95 insertions(+), 88 deletions(-)

diff --git a/src/app/asset-calculator/asset-calculator.component.html b/src/app/asset-calculator/asset-calculator.component.html
index f142c3b..5bfc55d 100644
--- a/src/app/asset-calculator/asset-calculator.component.html
+++ b/src/app/asset-calculator/asset-calculator.component.html
@@ -13,102 +13,109 @@
         }
     </style>
 <div class="container mt-5">
-    <h1 class="heading text-center">Kalkulator amortyzacyjny</h1>
 
-        <form [formGroup]=assetsDepreciationForm class="frame "> 
-            <div class="form-group row">
-                <label for="initialValueSet" class="form-label col-3" >Wartość początkowa środka trwałego: </label>
-                <div class="col-3">
-                    <input type="text" class="form-control" id="initialValueSet" aria-describedby="initialValueHelpInline" formControlName="initialValueSet" required
-                        [ngModel]="asset.initialValueAsset" 
-                        (ngModelChange)="asset.initialValueAsset=$event"  /> 
-                </div>        
-                <div class="col-auto">
-                    <span>PLN</span>
-                </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-3" >Stawka amortyzacyjna w procentach  :</label>
-                    <div class="col-3">
-                        <input type="text" class="form-control" id="depreciationRate"  formControlName="depreciationRate"
-                        [ngModel]="asset.depreciationRate | number:'1.2-2'" 
-                        (ngModelChange)="asset.depreciationRate=$event"/> 
-                </div>
-                <div class="col-auto">
-                    <span>%</span>
-                </div>
-            </div>     
-            <div class="form-group row">
-                <label class="form-label col-3">Rok i miesiąc rozpoczęcia amortyzacji</label>
-                <div class="col-1">
-                    <input type="number" class="form-control" formControlName="year"	
-                    [ngModel]=asset.year 
-                    (ngModelChange)="asset.year=$event;calculate()" />
-                </div>
-                <div class="col-1">
-                        <input type="number" class="form-control" formControlName="month"
-                        [ngModel]=asset.month   
-                        (ngModelChange)="asset.month=$event;calculate()"  />
-                </div>
-            </div>
+     <div class="row">
+        <h1 class="heading text-center">Kalkulator amortyzacyjny</h1>
 
-            <div class="form-group row">          
-                <label class="form-label col-3">Metoda amortyzacji</label>
-                <div class="col-3" >
-                    <select class="form-control" formControlName="typeDepreciation" 
-                        [ngModel]=asset.type
-                        (ngModelChange)="asset.type=$event;calculate()" >
-                        <option [ngValue]=TypeDepreciation.linear selected="selected">Liniowa</option>
-                        <option [ngValue]=TypeDepreciation.digressive >Dygresywna</option>
-                    </select>
+            <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>
+                    <div class="col">
+                        <input type="text" class="form-control" id="initialValueSet" aria-describedby="initialValueHelpInline" formControlName="initialValueSet" required
+                            [ngModel]="asset.initialValueAsset" 
+                            (ngModelChange)="asset.initialValueAsset=$event"  /> 
+                    </div>        
+                    <div class="col">
+                        <span>PLN</span>
+                    </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>
-            @if( TypeDepreciation.digressive === asset.type  ){
-                <div class="form-group row">          
-                    <label for="factorValue" class="form-label col-3">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()"/>
+                <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"/> 
+                    </div>
+                    <div class="col">
+                        <span>%</span>
+                    </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()" />
+                    </div>
+                    <div class="col">
+                            <input type="number" class="form-control" formControlName="month"
+                            [ngModel]=asset.month   
+                            (ngModelChange)="asset.month=$event;calculate()"  />
                     </div>
                 </div>
-            }
 
-            <input  class="btn btn-secondary col-auto" name="calculate"   
-                    [disabled]=assetsDepreciationForm.invalid (click)=calculate()   type="button" value="Wylicz ">
+                <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()" >
+                            <option [ngValue]=TypeDepreciation.linear selected="selected">Liniowa</option>
+                            <option [ngValue]=TypeDepreciation.digressive >Dygresywna</option>
+                        </select>
+                    </div>
 
-    </form>
-    <div class="mt-5">
-    <table class="table table-striped frame2">
-            <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>	
+                </div>
+                @if( TypeDepreciation.digressive === asset.type  ){
+                    <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()"/>
+                        </div>
+                    </div>
                 }
-            </tbody>
-        </table>
+
+                <input  class="btn btn-secondary col-auto" name="calculate"   
+                        [disabled]=assetsDepreciationForm.invalid (click)=calculate()   type="button" value="Wylicz ">
+
+                    </div>
+        </form>
+
+    </div>
+
+    <div class="row mt-5">
+        <table class="table table-striped frame2">
+                <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>