From 1765c4d17e7b6f4abab1884e9f9f766ad1dc05f9 Mon Sep 17 00:00:00 2001
From: Artur <kusartur@gmail.com>
Date: Sun, 27 Oct 2024 23:01:11 +0100
Subject: [PATCH] Some little changes in display

---
 .../asset-calculator.component.html           | 100 +++++++++---------
 1 file changed, 51 insertions(+), 49 deletions(-)

diff --git a/src/app/asset-calculator/asset-calculator.component.html b/src/app/asset-calculator/asset-calculator.component.html
index 01a3ca9..b8333bc 100644
--- a/src/app/asset-calculator/asset-calculator.component.html
+++ b/src/app/asset-calculator/asset-calculator.component.html
@@ -22,15 +22,16 @@
 <div class="container mt-5">
 
      <div class="row">
-        <div class="h1 text-center">Kalkulator amortyzacyjny</div>
+        <div class="h1 text-center text-lg-start">Kalkulator amortyzacyjny</div>
      </div>
-     <div class="row">
+
+     <div class="row m-1 col-lg-4">
             <form [formGroup]=assetsDepreciationFormGroup class="frame"> 
                 <div class="form-group row align-items-center mb-1">
-                    <div class="col-5 col-lg-2 text-start">
+                    <div class="col-5 col-lg text-start">
                         <label class="form-label" for="initialValueAsset" >Wartość początkowa ŚT:</label>
                     </div>
-                    <div class="col col-lg-2">
+                    <div class="col col-lg">
                         <input class="form-control" formControlName="initialValueAsset"  [(ngModel)]=initialValueAsset 
                                 type="number"  id="initialValueAsset"  required >
                     
@@ -43,10 +44,10 @@
                 </div>  
 
                 <div class="form-group row align-items-center">
-                    <div class="col-5 col-lg-2 text-start ">
+                    <div class="col-5 col-lg text-start ">
                         <label class="form-label" for="depreciationRate" >Stawka amortyzacyjna:</label>
                     </div>   
-                    <div class="col-3 col-lg-2">
+                    <div class="col-3 col-lg">
                         <input class="form-control" formControlName="depreciationRate" [(ngModel)]=depreciationRate
                             type="number" id="depreciationRate"  /> 
                     </div>
@@ -56,10 +57,10 @@
                 </div>
 
                 <div class="form-group row align-items-center ">
-                    <div class="col-5 col-lg-2 text-start ">
+                    <div class="col-5 col-lg text-start ">
                         <label class="form-label">Rozpoczęcie amortyzacji:</label>
                     </div>
-                    <div class="col-7 col-lg-2">
+                    <div class="col-7 col-lg">
                         <input type="month" lang="pl" class="form-control" formControlName="year_month" id="year_month"	[(ngModel)]=year_month placeholder="2024" />
           
                     </div>
@@ -67,10 +68,10 @@
                 </div>
 
                 <div class="form-group row align-items-center">   
-                    <div class="col-5 col-lg-2 text-start " >       
+                    <div class="col-5 col-lg text-start " >       
                         <label class="form-label">Metoda amortyzacji:</label>
                     </div>
-                    <div class="col col-lg-2" >
+                    <div class="col col-lg" >
                         <select class="form-select" formControlName="typeDepreciation"  [(ngModel)]=typeDepreciation  >                           
                             <option [ngValue]=TypeDepreciation.linear selected="selected">Liniowa</option>
                             <option [ngValue]=TypeDepreciation.digressive >Dygresywna</option>
@@ -80,10 +81,10 @@
 
                 @if( TypeDepreciation.digressive === typeDepreciation()  ){
                     <div class="form-group row align-items-center"> 
-                        <div class="col-5 col-lg-2 text-start ">         
+                        <div class="col-5 col-lg text-start ">         
                         <label for="factorValue" class="form-label">Wspólczynnki degresji</label>
                         </div>
-                        <div class="col col-lg-2" >
+                        <div class="col col-lg" >
                             <input type="text" class="form-control" formControlName="factorValue" [(ngModel)]=factorValue   />
                         </div>
                     </div>
@@ -93,17 +94,18 @@
                         [disabled]=assetsDepreciationFormGroup.invalid (click)=calculate()   type="button" value="Wylicz "> -->
                   
       
-        </form>
-        <div class="col-1">
+            </form>
+        </div>
+            <div class="col-1">
             <input  class="btn btn-secondary col-auto" name="addChangeValue"  
                [disabled]=assetsDepreciationFormGroup.invalid (click)=addChangeValue()   type="button" value="Dodaj zmianę wartości ">
-        </div>
+            </div>
         @if( lifeFormArray.controls.length > 0 ){
         <div>   
             <div class="row">
                   <div class="col-11 h1 text-center mt-3" >Zmiany wartości</div>
             </div>
-            <div class="row">
+            <div class="row m-1">
                 <table class="table table-striped ">
                     <thead>
                         <tr>
@@ -127,46 +129,46 @@
         </div>
     }
     <div>
-
+    <div class="row m-1">    
         <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>
-                        <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 amortizations.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 == amortizations.positions.length-1){
+            <div class="row">
+                <table class="table table-striped ">
+                    <thead>
                         <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>
+                            <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 amortizations.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 == amortizations.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>
+                    </tbody>
+                </table>
+            </div>
         </div>
     </div>
 
-
 </div>