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

<div class="container mt-5">
    <!-- Language Switcher in app.component.html -->


    <div class="row">
        <div class="h1 text-center text-lg-start">
            {{ 'asset-calculator.depreciationCalculator' | translate }}
        </div>
    </div>

    <div class="row">
        <div class="col mx-2 mx-lg-0 mb-2 col-lg-4 frame">
            <div class="row ">
                <div class="h5 text-center">{{ 'asset-calculator.fixedAsset' | translate }}</div>
            </div>

            <div class="row form-group  align-items-center mb-1">
                <div class="col-5 col-lg-6 text-start">
                    <label class="form-label" for="initialValueAsset">
                        {{ 'asset-calculator.initialValue' | translate }}</label>
                </div>
                <div class="col col-lg">
                    <input class="form-control" [(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="row form-group align-items-center">
                <div class="col-5 col-lg-6 text-start ">
                    <label class="form-label" for="rate">{{ 'asset-calculator.depreciationRate' | translate }}</label>
                </div>
                <div class="col-3 col-lg-3">
                    <input class="form-control" [(ngModel)]="rate" type="number" id="rate" />
                </div>
                <div class="col-1 col-lg-1 text-start">
                    <label for="rate">%</label>
                </div>
            </div>

            <div class="form-group row align-items-center ">

                <div class="col-5 col-lg-6 text-start ">
                    <label class="form-label" for="startDepreciation">{{ 'asset-calculator.startOfDepreciation' |
                        translate }} </label>
                </div>

                <div class="col-7 col-lg-6">
                    <mat-form-field appearance="outline" class="w-100">
                        <mat-label>{{ 'asset-calculator.startOfDepreciation' | translate }}</mat-label>
                        <input matInput [(ngModel)]="startDepreciation" [matDatepicker]="picker" readonly>
                        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                        <mat-datepicker #picker startView="multi-year" (monthSelected)="onMonthSelected($event, picker)"
                            panelClass="month-picker"></mat-datepicker>
                    </mat-form-field>
                </div>

            </div>

            <div class="form-group row align-items-center">
                <div class="col-5 col-lg text-start ">
                    <label class="form-label" for="typeDepreciation">{{ 'asset-calculator.depreciationMethod' |
                        translate }}</label>
                </div>
                <div class="col col-lg">
                    <select class="form-select" [(ngModel)]="typeDepreciation" id="typeDepreciation">
                        <option [ngValue]=TypeDepreciation.linear selected="selected">{{ 'asset-calculator.linear' |
                            translate }}</option>
                        <option [ngValue]=TypeDepreciation.digressive>{{ 'asset-calculator.digressive' | translate }}
                        </option>
                    </select>
                </div>
            </div>

            @if( TypeDepreciation.digressive === typeDepreciation() ) {
            <div class="row form-group align-items-center">
                <div class="col-5 col-lg text-start ">
                    <label for="factor" class="form-label">{{ 'asset-calculator.degressionCoefficients' | translate
                        }}</label>
                </div>
                <div class="col col-lg">
                    <input type="text" class="form-control" [(ngModel)]="factor" id="factor" />
                </div>
            </div>
            }
            <div class="row">
                <div class="col-6">
                    <input class="btn btn-secondary " name="addChangeValue" (click)=addLifeChange()
                        type="button" value="{{  'asset-calculator.addChangeValue' | translate }}">
                </div>
        
                <div class="col-auto">
                     <input class="btn btn-secondary " name="calculate" (click)=reCalculate() type="button"
                        value="{{  'asset-calculator.recalculate' | translate }}">
                </div>
            </div>

        </div>

        @if( lifeChangesSignal().length > 0 ){
        <div class="col col-lg-6 mb-2 ms-lg-3">
            <div class="row">
                <div class="h5 text-center my-1">
                    <h5>{{ 'asset-calculator.valueChanges' | translate }}</h5>
                </div>
            </div>
            <div class="row p-2 ">
                <table class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th class="col-1 text-center" scope="col-auto"> {{ 'asset-calculator.lp' | translate }}</th>
                            <th class="col-2 text-center" scope="col-auto"> {{ 'asset-calculator.month' | translate }}
                            </th>
                            <th class="col-2 text-center" scope="col"> {{ 'asset-calculator.change' | translate }}</th>
                            <th class="col-1 text-center" scope="col"></th>
                        </tr>
                    </thead>
                    <tbody>
                        @for( life of lifeChangesSignal(); track $index ) {
                        <tr>
                            <th class="align-middle text-center col-auto" scope="row">{{$index+1}}</th>
                            <td><input class="form-control" type="month" [(ngModel)]="life.when"></td>
                            <td><input class="form-control" type="number" [(ngModel)]="life.initial"
                                    placeholder="Wprowadź wartość {{$index}}"></td>
                            <td><button class="btn btn-sm btn-secondary" type="button"
                                    (click)=removeLifeChange($index)>{{ 'asset-calculator.remove' | translate
                                    }}</button>
                        </tr>
                        }
                    </tbody>
                </table>
            </div>
        </div>
        }

    </div>

    <div class="row justify-content-center frame2  ">
        <div class="row h2 text-center" style="--bs-bg-opacity: .2;">
            <h2 i18n="@@depreciationPlan">{{ 'asset-calculator.depreciationPlan' | translate }}</h2>
        </div>
        <div class="mt-lg-3 mt-0 col justify-content-center ">
            <div class="row justify-content-center">
                <table class="table table-striped table-bordered ">
                    <thead>
                        <tr class="text-center fw-bold ">
                            <th scope="col">{{ 'asset-calculator.lp' | translate }}</th>
                            <th scope="col">{{ 'asset-calculator.year' | translate }}</th>
                            <th scope="col">{{ 'asset-calculator.month' | translate }}</th>
                            <th scope="col">{{ 'asset-calculator.amountWriteOf' | translate }}</th>
                            <th scope="col">{{ 'asset-calculator.totalWriteOf' | translate }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @for (position of amortizationsSignal(); track $index) {
                        <tr [class]="clazz(position)" class="text-center">
                            <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 === amortizationsSignal.length-1){
                        <tr>
                            <td colspan="3">
                            </td>
                            <td colspan="2">
                                <div class="row justify-content-end  text-center">
                                    <div class="frame col-auto">{{ 'asset-calculator.totalInTheYear' | translate:{ year:
                                        position.when.year, total : position.sumThisYear| number:'1.2-2' } }} </div>
                                </div>
                            </td>
                        </tr>
                        <tr class="text-center fw-bold frame">
                            <th scope="col">{{ 'asset-calculator.lp' | translate }}</th>
                            <th scope="col">{{ 'asset-calculator.year' | translate }}</th>
                            <th scope="col">{{ 'asset-calculator.month' | translate }}</th>
                            <th scope="col">{{ 'asset-calculator.amountWriteOf' | translate }}</th>
                            <th scope="col">{{ 'asset-calculator.totalWriteOf' | translate }}</th>
                        </tr>
                        }
                        }
                    </tbody>
                </table>
            </div>
        </div>
    </div>


</div>