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

    <style>
        .frame {
            border: 2px solid gray; /* Kolor ramki */
            border-radius: 8px; /* Zaokrąglenie krawędzi */
            padding: 20px; /* Odstęp wewnętrzny */
            background-color: #f8f9fa; /* Tło formularza */
        }
        .frame2 {
            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-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div> -->

<div class="container mt-5">

     <div class="row">
        <div class="h1 text-center text-lg-start">Kalkulator amortyzacyjny</div>
     </div>

     <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-6 text-start">
                        <label class="form-label" for="initialValueAsset" >Wartość początkowa ŚT:</label>
                    </div>
                    <div class="col col-lg">
                        <input class="form-control" formControlName="initialValueAsset"  [(ngModel)]=initialValueAsset 
                                type="number"  id="initialValueAsset"  required >
                    
                        @if(assetsDepreciationFormGroup.get('initialValueSet')?.invalid && assetsDepreciationFormGroup.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>  

                <div class="form-group row align-items-center">
                    <div class="col-5 col-lg-6 text-start ">
                        <label class="form-label" for="depreciationRate" >Stawka amortyzacyjna:</label>
                    </div>   
                    <div class="col-3 col-lg-3">
                        <input class="form-control" formControlName="depreciationRate" [(ngModel)]=depreciationRate
                            type="number" id="depreciationRate"  /> 
                    </div>
                    <div class="col-1 col-lg-1 text-start">
                    <label for="depreciationRate">%</label>
                    </div>
                </div>

                <div class="form-group row align-items-center ">
                    <div class="col-5 col-lg-6 text-start ">
                        <label class="form-label">Rozpoczęcie amortyzacji:</label>
                    </div>
                    <div class="col-7 col-lg-6">
                        <input type="month" lang="pl" class="form-control" formControlName="year_month" id="year_month"	[(ngModel)]=year_month placeholder="2024" />
          
                    </div>

                </div>

                <div class="form-group row align-items-center">   
                    <div class="col-5 col-lg text-start " >       
                        <label class="form-label">Metoda amortyzacji:</label>
                    </div>
                    <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>
                        </select>
                    </div>
                </div>

                @if( TypeDepreciation.digressive === typeDepreciation()  ){
                    <div class="form-group row align-items-center"> 
                        <div class="col-5 col-lg text-start ">         
                        <label for="factorValue" class="form-label">Wspólczynnki degresji</label>
                        </div>
                        <div class="col col-lg" >
                            <input type="text" class="form-control" formControlName="factorValue" [(ngModel)]=factorValue   />
                        </div>
                    </div>
                }

                <!-- <input  class="btn btn-secondary col-auto" name="calculate"   
                        [disabled]=assetsDepreciationFormGroup.invalid (click)=calculate()   type="button" value="Wylicz "> -->
                  
      
            </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>
        @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 m-1">
                <table class="table table-striped ">
                    <thead>
                        <tr>
                            <th scope="col">Lp</th>
                            <th scope="col">Miesiąc</th> 
                            <th scope="col">Zmiana</th>
                        </tr>
                    </thead>
                    <tbody>
                        @for( changeGroup of lifeFormArray.controls; track  $index ) {
                            <tr [formGroup] = changeGroup >
                                <th scope="row">{{$index+1}}</th>
                                <td><input class="form-control" type="month"  formControlName="year_month" ></td>
                                <td><input class="form-control" type="number" formControlName="initialValueAsset"  placeholder="Wprowadź wartość {{$index}}"></td> 
                                <td><button class="btn btn-secondary" type="button" (click)=removeChange($index)>Usuń</button>
                            </tr>	
                        } 
                    </tbody>
                </table>
            </div>
        </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){
                            <tr>
                                <td colspan="3">
                                </td>    
                                <td colspan="2">
                                    <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>

</div>