Prace z Angular material we współpracy z Bootstrapem na razie nie zakończone sukcesem
This commit is contained in:
parent
38e904857c
commit
f9aa246718
28
angular.json
28
angular.json
|
|
@ -25,10 +25,10 @@
|
|||
{
|
||||
"glob": "**/*",
|
||||
"input": "public"
|
||||
|
||||
}
|
||||
],
|
||||
"styles": [
|
||||
"node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
|
||||
"src/styles.css",
|
||||
"node_modules/bootstrap/dist/css/bootstrap.css"
|
||||
],
|
||||
|
|
@ -53,14 +53,17 @@
|
|||
"outputHashing": "all"
|
||||
},
|
||||
"en": {
|
||||
"localize": ["en"],
|
||||
"localize": [
|
||||
"en"
|
||||
],
|
||||
"outputPath": "dist/arti-angular-app-en"
|
||||
},
|
||||
"pl": {
|
||||
"localize": ["pl"],
|
||||
"localize": [
|
||||
"pl"
|
||||
],
|
||||
"outputPath": "dist/arti-angular-app-pl"
|
||||
},
|
||||
|
||||
"development": {
|
||||
"optimization": false,
|
||||
"extractLicenses": false,
|
||||
|
|
@ -74,7 +77,7 @@
|
|||
"options": {
|
||||
"port": 4201,
|
||||
"host": "0.0.0.0"
|
||||
},
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"buildTarget": "arti-angular-app:build:production"
|
||||
|
|
@ -104,12 +107,27 @@
|
|||
}
|
||||
],
|
||||
"styles": [
|
||||
"@angular/material/prebuilt-themes/azure-blue.css",
|
||||
"src/styles.css"
|
||||
],
|
||||
"scripts": []
|
||||
}
|
||||
},
|
||||
"lint": {
|
||||
"builder": "@angular-eslint/builder:lint",
|
||||
"options": {
|
||||
"lintFilePatterns": [
|
||||
"src/**/*.ts",
|
||||
"src/**/*.html"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"cli": {
|
||||
"schematicCollections": [
|
||||
"@angular-eslint/schematics"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,43 @@
|
|||
// @ts-check
|
||||
const eslint = require("@eslint/js");
|
||||
const tseslint = require("typescript-eslint");
|
||||
const angular = require("angular-eslint");
|
||||
|
||||
module.exports = tseslint.config(
|
||||
{
|
||||
files: ["**/*.ts"],
|
||||
extends: [
|
||||
eslint.configs.recommended,
|
||||
...tseslint.configs.recommended,
|
||||
...tseslint.configs.stylistic,
|
||||
...angular.configs.tsRecommended,
|
||||
],
|
||||
processor: angular.processInlineTemplates,
|
||||
rules: {
|
||||
"@angular-eslint/directive-selector": [
|
||||
"error",
|
||||
{
|
||||
type: "attribute",
|
||||
prefix: "app",
|
||||
style: "camelCase",
|
||||
},
|
||||
],
|
||||
"@angular-eslint/component-selector": [
|
||||
"error",
|
||||
{
|
||||
type: "element",
|
||||
prefix: "app",
|
||||
style: "kebab-case",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
files: ["**/*.html"],
|
||||
extends: [
|
||||
...angular.configs.templateRecommended,
|
||||
...angular.configs.templateAccessibility,
|
||||
],
|
||||
rules: {},
|
||||
}
|
||||
);
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -6,15 +6,18 @@
|
|||
"start": "ng serve",
|
||||
"build": "ng build",
|
||||
"watch": "ng build --watch --configuration development",
|
||||
"test": "ng test"
|
||||
"test": "ng test",
|
||||
"lint": "ng lint"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^18.2.0",
|
||||
"@angular/cdk": "^18.2.13",
|
||||
"@angular/common": "^18.2.0",
|
||||
"@angular/compiler": "^18.2.0",
|
||||
"@angular/core": "^18.2.0",
|
||||
"@angular/forms": "^18.2.0",
|
||||
"@angular/material": "^18.2.13",
|
||||
"@angular/platform-browser": "^18.2.0",
|
||||
"@angular/platform-browser-dynamic": "^18.2.0",
|
||||
"@angular/router": "^18.2.0",
|
||||
|
|
@ -31,6 +34,8 @@
|
|||
"@angular/compiler-cli": "^18.2.0",
|
||||
"@angular/localize": "^18.2.4",
|
||||
"@types/jasmine": "~5.1.0",
|
||||
"angular-eslint": "18.4.0",
|
||||
"eslint": "^9.13.0",
|
||||
"jasmine-core": "~5.2.0",
|
||||
"karma": "~6.4.0",
|
||||
"karma-chrome-launcher": "~3.2.0",
|
||||
|
|
@ -38,6 +43,7 @@
|
|||
"karma-jasmine": "~5.1.0",
|
||||
"karma-jasmine-html-reporter": "~2.1.0",
|
||||
"typescript": "~5.5.2",
|
||||
"typescript-eslint": "8.10.0",
|
||||
"vite": "^5.4.10"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
<a class="navbar-brand" href="/about-me">{{ 'topBar.aboutMe' | translate }}</a>
|
||||
<a class="navbar-brand" href="/asset-calculator">{{ 'topBar.depreciationCalculator' | translate }}</a>
|
||||
<a class="navbar-brand" href="/quotes">{{ 'topBar.courses' | translate }}</a>
|
||||
<a class="navbar-brand" href="/material">{{ 'work.with.material' | translate }}</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import { HttpClient, provideHttpClient} from '@angular/common/http';
|
|||
|
||||
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
|
||||
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
|
||||
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
|
||||
|
||||
const httpLoaderFactory: (http: HttpClient) => TranslateHttpLoader = (http: HttpClient) =>
|
||||
new TranslateHttpLoader(http, './i18n/', '.json');
|
||||
|
|
@ -24,7 +25,7 @@ export const appConfig: ApplicationConfig = {
|
|||
useFactory: httpLoaderFactory,
|
||||
deps: [ HttpClient ],
|
||||
},
|
||||
})])
|
||||
})]), provideAnimationsAsync()
|
||||
],
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -5,13 +5,14 @@ import { AboutMeComponent } from './about-me/about-me.component';
|
|||
import { ChatGPTComponent } from './chat-gpt/chat-gpt.component';
|
||||
import {JobfinderComponent } from './jobfinder/jobfinder.component';
|
||||
import { FixedAssetComponent } from './fixed-asset/fixed-asset.component';
|
||||
import {MaterialExperimentComponent} from './material-experiment/material-experiment.component'
|
||||
|
||||
|
||||
export const routes: Routes = [
|
||||
{
|
||||
path: "",
|
||||
title: "Środki trwałe",
|
||||
component:AssetCalculatorComponent
|
||||
title: "Work with material",
|
||||
component:MaterialExperimentComponent
|
||||
},
|
||||
{
|
||||
path: "about-me",
|
||||
|
|
@ -37,6 +38,12 @@ export const routes: Routes = [
|
|||
path: "fixed-asset",
|
||||
title:"Środki trwałe",
|
||||
component: FixedAssetComponent
|
||||
},
|
||||
{
|
||||
path: "material",
|
||||
title:"Material work",
|
||||
component: MaterialExperimentComponent
|
||||
}
|
||||
|
||||
]
|
||||
;
|
||||
|
|
|
|||
|
|
@ -1,18 +1,19 @@
|
|||
|
||||
|
||||
|
||||
|
||||
<div class="container mt-5">
|
||||
<!-- Language Switcher in app.component.html -->
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="h1 text-center text-lg-start" i18n="@@depreciationCalculator">
|
||||
{{ 'asset-calculator.depreciationCalculator' | translate }}
|
||||
<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 text-center h5 "><h5 i18n="@@fixedAsset">{{ 'asset-calculator.fixedAsset' | translate }}</h5></div>
|
||||
<form [formGroup]=assetsDepreciationFormGroup >
|
||||
<div class="row text-center h5 "><h5 >{{ 'asset-calculator.fixedAsset' | translate }}</h5></div>
|
||||
<form [formGroup]=assetMainData >
|
||||
<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" i18n="@@initialValue" >
|
||||
|
|
@ -21,7 +22,7 @@
|
|||
<div class="col col-lg">
|
||||
<input class="form-control" formControlName="initialValueAsset" type="number" id="initialValueAsset" required >
|
||||
|
||||
@if(assetsDepreciationFormGroup.get('initialValueSet')?.invalid && assetsDepreciationFormGroup.get('initialValueSet')?.touched){
|
||||
@if(assetMainData.get('initialValueSet')?.invalid && assetMainData.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{
|
||||
}
|
||||
|
|
@ -31,7 +32,7 @@
|
|||
|
||||
<div class="form-group row align-items-center">
|
||||
<div class="col-5 col-lg-6 text-start ">
|
||||
<label class="form-label" for="rate" i18n="@@depreciationRate" >{{ 'asset-calculator.depreciationRate' | translate }}</label>
|
||||
<label class="form-label" for="rate">{{ 'asset-calculator.depreciationRate' | translate }}</label>
|
||||
</div>
|
||||
<div class="col-3 col-lg-3">
|
||||
<input class="form-control" formControlName="rate" type="number" id="rate" />
|
||||
|
|
@ -40,31 +41,47 @@
|
|||
<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" i18n="@@startOfDepreciation" >{{ 'asset-calculator.startOfDepreciation' | translate }} </label>
|
||||
<label class="form-label" >{{ 'asset-calculator.startOfDepreciation' | translate }} </label>
|
||||
</div>
|
||||
<div class="col-7 col-lg-6">
|
||||
<input type="month" lang="pl" class="form-control" formControlName="year_month" id="year_month" placeholder="2024" />
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
-->
|
||||
|
||||
<div class="form-group row align-items-center">
|
||||
<div class="col-5 col-lg-6 text-start">
|
||||
<label class="form-label" for="startDepreciationYM">{{ 'asset-calculator.startOfDepreciation' | translate }}</label>
|
||||
</div>
|
||||
<div class="col-7 col-lg-6 ">
|
||||
<input matInput [matDatepicker]="monthPicker"
|
||||
formControlName="startDepreciationYM" id="startDepreciationYM" placeholder="YYYY-MM" />
|
||||
<mat-datepicker-toggle matIconSuffix [for]="monthPicker">
|
||||
<mat-icon matDatepickerToggleIcon>keyboard_arrow_down</mat-icon>
|
||||
</mat-datepicker-toggle>
|
||||
<mat-datepicker #monthPicker startView="month" (monthSelected)="chosenMonthHandler($event, monthPicker)"
|
||||
panelClass="example-month-picker">
|
||||
</mat-datepicker>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row align-items-center">
|
||||
<div class="col-5 col-lg text-start " >
|
||||
<label class="form-label" (click)=addChangeValue() i18n="@@depreciationMethod" >{{ 'asset-calculator.depreciationMethod' | translate }}</label>
|
||||
<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" formControlName="typeDepreciation" >
|
||||
<option [ngValue]=TypeDepreciation.linear selected="selected" i18n="@@linear">{{ 'asset-calculator.linear' | translate }}</option>
|
||||
<option [ngValue]=TypeDepreciation.digressive i18n="@@digressive">{{ 'asset-calculator.digressive' | translate }}</option>
|
||||
<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 === assetsDepreciationFormGroup.get( 'typeDepreciation' )?.value ) {
|
||||
@if( TypeDepreciation.digressive === assetMainData.get( 'typeDepreciation' )?.value ) {
|
||||
<div class="form-group row align-items-center">
|
||||
<div class="col-5 col-lg text-start ">
|
||||
<label for="factor" class="form-label">{{ 'asset-calculator.degressionCoefficients' | translate }}</label>
|
||||
|
|
@ -75,9 +92,10 @@
|
|||
</div>
|
||||
}
|
||||
</form>
|
||||
|
||||
<div class="col-1">
|
||||
<input class="btn btn-secondary col-auto" name="addChangeValue"
|
||||
[disabled]=assetsDepreciationFormGroup.invalid (click)=addChangeValue() type="button" value="{{ 'asset-calculator.addChangeValue' | translate }}">
|
||||
[disabled]=assetMainData.invalid (click)=addChangeValue() type="button" value="{{ 'asset-calculator.addChangeValue' | translate }}">
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -86,15 +104,23 @@
|
|||
@if( lifeFormArray.controls.length > 0 ){
|
||||
<div class="col col-lg-6 mb-2 ms-lg-3">
|
||||
<div class="row">
|
||||
<div class="h5 text-center my-1" ><h5 i18n="@@valueChanges">{{ 'asset-calculator.valueChanges' | translate }}</h5></div>
|
||||
<div class="h5 text-center my-1" ><h5 class="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" i18n="@@month">{{ 'asset-calculator.month' | translate }}</th>
|
||||
<th class="col-2 text-center" scope="col" i18n="@@change">{{ 'asset-calculator.change' | translate }}</th>
|
||||
<th class="col-2 text-center" scope="col-auto">{{ 'asset-calculator.month' | translate }}
|
||||
<mat-form-field appearance="fill" class="w-100">
|
||||
<input matInput [matDatepicker]="monthPicker" formControlName="startMonth" placeholder="YYYY-MM" />
|
||||
<mat-datepicker-toggle matSuffix [for]="monthPicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #monthPicker startView="month" (monthSelected)="chosenMonthHandler($event, monthPicker)"
|
||||
panelClass="example-month-picker">
|
||||
</mat-datepicker>
|
||||
</mat-form-field>
|
||||
</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>
|
||||
|
|
@ -102,7 +128,7 @@
|
|||
@for( changeGroup of lifeFormArray.controls; track $index ) {
|
||||
<tr [formGroup] = changeGroup >
|
||||
<th class="align-middle text-center col-auto" scope="row">{{$index+1}}</th>
|
||||
<td><input class="form-control" type="month" formControlName="year_month" ></td>
|
||||
<td><input matInput class="form-control" type="month" formControlName="startMonth" ></td>
|
||||
<td><input class="form-control" type="number" formControlName="initialValueAsset" placeholder="Wprowadź wartość {{$index}}"></td>
|
||||
<td ><button class="btn btn-sm btn-secondary" type="button" (click)=removeChange($index)>{{ 'asset-calculator.remove' | translate }}</button>
|
||||
</tr>
|
||||
|
|
@ -138,7 +164,7 @@
|
|||
<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){
|
||||
@if( 12 === position.when.month || $index === amortizations.positions.length-1){
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
</td>
|
||||
|
|
|
|||
|
|
@ -1,22 +1,40 @@
|
|||
import { Component, OnInit, OnDestroy } from '@angular/core';
|
||||
import { ReactiveFormsModule, FormGroup, Validators, FormControl, FormArray } from '@angular/forms';
|
||||
import { AbstractControl, ValidationErrors } from '@angular/forms';
|
||||
import { DecimalPipe } from '@angular/common';
|
||||
|
||||
import {provideNativeDateAdapter} from '@angular/material/core';
|
||||
import {Asset, Positions, AssetPlanPosition, TypeDepreciation, YearMonth, AssetLifeChange, AssetDepreciationMethod, YearMonthUtil } from '../assets/asset';
|
||||
import {AssetService} from '../assets/service/asset.service'
|
||||
import {TranslateModule} from "@ngx-translate/core";
|
||||
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
||||
|
||||
// Angular material
|
||||
import { MatDatepicker } from '@angular/material/datepicker';
|
||||
import { MatNativeDateModule } from '@angular/material/core';
|
||||
import { DateAdapter } from '@angular/material/core';
|
||||
import {ChangeDetectionStrategy } from '@angular/core';
|
||||
import {MatDatepickerModule} from '@angular/material/datepicker';
|
||||
import {MatFormFieldModule} from '@angular/material/form-field';
|
||||
import {MatIconModule} from '@angular/material/icon';
|
||||
import {MatInputModule} from '@angular/material/input';
|
||||
|
||||
interface FormValues {
|
||||
initialValueAsset: number;
|
||||
rate: number;
|
||||
year_month: string;
|
||||
typeDepreciation: TypeDepreciation;
|
||||
startDepreciationYM: Date;
|
||||
typeDepreciation : TypeDepreciation;
|
||||
factor: number;
|
||||
}
|
||||
@Component({
|
||||
selector: 'app-asset-calculator',
|
||||
standalone: true,
|
||||
imports: [ DecimalPipe, ReactiveFormsModule, TranslateModule ] ,
|
||||
imports: [
|
||||
DecimalPipe, ReactiveFormsModule, TranslateModule,
|
||||
MatDatepickerModule, MatNativeDateModule, MatFormFieldModule, MatDatepicker, MatIconModule,
|
||||
MatSlideToggleModule
|
||||
] ,
|
||||
providers: [provideNativeDateAdapter()],
|
||||
// template:"<mat-slide-toggle>Toggle me!</mat-slide-toggle>",
|
||||
templateUrl: "asset-calculator.component.html",
|
||||
styleUrl: 'asset-calculator.component.css'
|
||||
})
|
||||
|
|
@ -24,31 +42,41 @@ export class AssetCalculatorComponent implements OnInit, OnDestroy{
|
|||
|
||||
TypeDepreciation = TypeDepreciation;
|
||||
amortizations = new Positions();
|
||||
|
||||
|
||||
lifeFormArray = new FormArray<FormGroup>([]);
|
||||
|
||||
assetsDepreciationFormGroup = new FormGroup({
|
||||
initialValueAsset : new FormControl<number>( 5000, [ Validators.required, this.currencyValidator ]),
|
||||
rate : new FormControl<number>( 20 ) ,
|
||||
year_month : new FormControl<string>( "2024-10" ),
|
||||
typeDepreciation : new FormControl<TypeDepreciation>( TypeDepreciation.linear ),
|
||||
factor : new FormControl<number>( 2/*, [Validators.required,Validators.max(2)]*/ ),
|
||||
assetMainData = new FormGroup({
|
||||
initialValueAsset : new FormControl<number>( 5000, [ Validators.required, this.currencyValidator ]),
|
||||
rate : new FormControl<number>( 20 ) ,
|
||||
startDepreciationYM : new FormControl<Date>( new Date() ),
|
||||
typeDepreciation : new FormControl<TypeDepreciation>( TypeDepreciation.linear ),
|
||||
factor : new FormControl<number>( 2/*, [Validators.required,Validators.max(2)]*/ ),
|
||||
|
||||
} as {
|
||||
[key in keyof FormValues]: FormControl<FormValues[key]>
|
||||
});
|
||||
|
||||
constructor(private assetService : AssetService){
|
||||
this.assetsDepreciationFormGroup.valueChanges.subscribe( (value) => this.calculate() );
|
||||
this.lifeFormArray.valueChanges.subscribe( (value) => this.calculate() );
|
||||
constructor( private assetService : AssetService,
|
||||
private dateAdapter: DateAdapter<Date>){
|
||||
|
||||
this.dateAdapter.setLocale('pl');
|
||||
this.assetMainData.valueChanges.subscribe( () => this.calculate() );
|
||||
this.lifeFormArray.valueChanges.subscribe( () => this.calculate() );
|
||||
}
|
||||
|
||||
chosenMonthHandler( normalizedMonth: Date, datepicker: MatDatepicker<Date> ) {
|
||||
const ctrlValue = new Date();
|
||||
ctrlValue.setMonth( normalizedMonth.getMonth() );
|
||||
ctrlValue.setFullYear( normalizedMonth.getFullYear() );
|
||||
this.assetMainData.get('startDepreciationYM')?.setValue(ctrlValue);
|
||||
datepicker.close();
|
||||
}
|
||||
|
||||
ngOnInit(): void{
|
||||
const savedAsset = localStorage.getItem('assetForCalculator');
|
||||
if (savedAsset) this.assetToControls(JSON.parse(savedAsset));
|
||||
this.calculate();
|
||||
const savedAsset = localStorage.getItem('assetForCalculator');
|
||||
if ( savedAsset ) {
|
||||
this.assetToControls(JSON.parse(savedAsset));
|
||||
}
|
||||
this.calculate();
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
|
|
@ -58,31 +86,33 @@ export class AssetCalculatorComponent implements OnInit, OnDestroy{
|
|||
|
||||
private assetToControls( asset : Asset ) {
|
||||
if( asset.life.length > 0 ){
|
||||
const year_month = YearMonthUtil.toTxt( asset.life[0].when );
|
||||
this.assetsDepreciationFormGroup.patchValue({
|
||||
year_month : year_month,
|
||||
initialValueAsset : asset.life[0].initial,
|
||||
rate : asset.depreciationMethods[0].rate,
|
||||
typeDepreciation : asset.depreciationMethods[0].type,
|
||||
factor : asset.depreciationMethods[0].factor,
|
||||
const startYM : Date = YearMonthUtil.toDate( asset.life[0].when );
|
||||
this.assetMainData.patchValue({
|
||||
startDepreciationYM : startYM,
|
||||
initialValueAsset : asset.life[0].initial,
|
||||
rate : asset.depreciationMethods[0].rate,
|
||||
typeDepreciation : asset.depreciationMethods[0].type,
|
||||
factor : asset.depreciationMethods[0].factor,
|
||||
})
|
||||
/*
|
||||
asset.life.slice(1).forEach( lifeChange => {
|
||||
this.addChangeValue();
|
||||
const row = this.lifeFormArray.at( this.lifeFormArray.length - 1 ) as FormGroup;
|
||||
row.patchValue( {
|
||||
initialValueAsset: lifeChange.initial,
|
||||
year_month: YearMonthUtil.toTxt( lifeChange.when )
|
||||
startMonth: YearMonthUtil.toDate( lifeChange.when )
|
||||
} );
|
||||
});
|
||||
*/
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
private controlsToAsset() : Asset {
|
||||
|
||||
const formValues = this.assetsDepreciationFormGroup.getRawValue();
|
||||
const formValues = this.assetMainData.getRawValue();
|
||||
|
||||
const when = new YearMonth( formValues.year_month );
|
||||
const when = new YearMonth( formValues.startDepreciationYM );
|
||||
const asset = new Asset( when );
|
||||
|
||||
const method = new AssetDepreciationMethod( when.year, formValues.rate, formValues.typeDepreciation, formValues.factor );
|
||||
|
|
@ -112,13 +142,14 @@ export class AssetCalculatorComponent implements OnInit, OnDestroy{
|
|||
|
||||
calculateForAsset( asset : Asset ) {
|
||||
this.assetService.calculate( asset ).subscribe(
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
|
||||
positions => { this.calculateToValues(positions), this.amortizations = positions });
|
||||
|
||||
}
|
||||
|
||||
calculateToValues( positions:Positions ) {
|
||||
let sum :number = 0;
|
||||
let sumThisYear: number = 0;
|
||||
let sum = 0;
|
||||
let sumThisYear = 0;
|
||||
positions.positions.forEach(position => {
|
||||
position.calculatedDepreciation *= 0.01;
|
||||
sum += position.calculatedDepreciation;
|
||||
|
|
@ -139,21 +170,21 @@ export class AssetCalculatorComponent implements OnInit, OnDestroy{
|
|||
}
|
||||
|
||||
// Walidator dla kwoty
|
||||
currencyValidator(control: any) {
|
||||
currencyValidator(control: AbstractControl): ValidationErrors | null {
|
||||
const value = control.value;
|
||||
const regex = /^\d+(\.\d{1,2})?$/; // Akceptuje liczby z maksymalnie dwoma miejscami po przecinku
|
||||
return regex.test(value) ? null : { invalidCurrency: true };
|
||||
}
|
||||
|
||||
addChangeValue() {
|
||||
const formValues = this.assetsDepreciationFormGroup.value as FormValues;
|
||||
const formValues = this.assetMainData.value as FormValues;
|
||||
|
||||
const change = new AssetLifeChange(new YearMonth( formValues.year_month ), 1000, 0, 0 );
|
||||
const change = new AssetLifeChange(new YearMonth( formValues.startDepreciationYM ), 1000, 0, 0 );
|
||||
|
||||
const newFormGroup = new FormGroup( { initialValueAsset: new FormControl( change.initial ),
|
||||
year_month : new FormControl( formValues.year_month )})
|
||||
const newLifeGroup = new FormGroup( { initialValueAsset: new FormControl( change.initial ),
|
||||
year_month : new FormControl( formValues.startDepreciationYM )})
|
||||
|
||||
this.lifeFormArray.push(newFormGroup);
|
||||
this.lifeFormArray.push(newLifeGroup);
|
||||
|
||||
// this.lifeSignal.set( this.lifeFormArray );
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,11 +7,9 @@ export class YearMonth{
|
|||
|
||||
readonly year : number ;
|
||||
readonly month : number ;
|
||||
constructor( year_month:string ){
|
||||
const [year, month] = year_month.split('-').map(Number);
|
||||
this.year = year;
|
||||
this.month = month;
|
||||
|
||||
constructor( year_month:Date ){
|
||||
this.year = year_month.getFullYear();
|
||||
this.month = year_month.getMonth()+1;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -22,9 +20,13 @@ export class YearMonthUtil{
|
|||
return ym.year + '-' + ym.month ;
|
||||
}
|
||||
|
||||
static toDate( ym : YearMonth ):Date{
|
||||
return new Date( ym.year, ym.month-1, 1 );
|
||||
}
|
||||
|
||||
static today( ):YearMonth{
|
||||
const today = new Date();
|
||||
return new YearMonth( today.getFullYear() + '-' +today.getMonth()+1 );
|
||||
return new YearMonth( today );
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -91,7 +93,7 @@ export class Asset {
|
|||
|
||||
export class AssetsContainer{
|
||||
|
||||
assets: Map<string,Asset> = new Map();
|
||||
assets: Map<string,Asset> = new Map<string,Asset>();
|
||||
|
||||
delete( nrInv: string ){
|
||||
this.assets.delete(nrInv);
|
||||
|
|
@ -113,11 +115,8 @@ export class AssetsContainer{
|
|||
}
|
||||
|
||||
export class AssetPlanPosition{
|
||||
when : YearMonth = new YearMonth('0-0');
|
||||
calculatedDepreciation : number = 0;
|
||||
sum:number = 0;
|
||||
sumThisYear:number = 0;
|
||||
|
||||
when : YearMonth = new YearMonth( new Date( 0, 0 ) );
|
||||
calculatedDepreciation = 0; sum = 0; sumThisYear = 0;
|
||||
}
|
||||
|
||||
export class Positions {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
|
||||
|
||||
<mat-label>Wybierz rok i miesiąc</mat-label>
|
||||
<input matInput [matDatepicker]="monthPicker" placeholder="YYYY-MM" >
|
||||
<mat-datepicker-toggle matSuffix [for]="monthPicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #monthPicker startView="multi-year" (monthSelected)="chosenMonthHandler($event, monthPicker)"
|
||||
panelClass="example-month-picker">
|
||||
</mat-datepicker>
|
||||
<mat-slide-toggle>Toggle me!</mat-slide-toggle>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { MaterialExperimentComponent } from './material-experiment.component';
|
||||
|
||||
describe('MaterialExperimentComponent', () => {
|
||||
let component: MaterialExperimentComponent;
|
||||
let fixture: ComponentFixture<MaterialExperimentComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [MaterialExperimentComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(MaterialExperimentComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
||||
|
||||
// Angular material
|
||||
|
||||
@Component({
|
||||
selector: 'app-material-experiment',
|
||||
standalone: true,
|
||||
imports: [ MatSlideToggleModule, MatFormFieldModule ],
|
||||
// templateUrl: './material-experiment.component.html',
|
||||
template:
|
||||
`
|
||||
|
||||
<mat-slide-toggle>Toggle me!</mat-slide-toggle>
|
||||
|
||||
|
||||
`,
|
||||
styleUrl: './material-experiment.component.css'
|
||||
})
|
||||
export class MaterialExperimentComponent {
|
||||
|
||||
}
|
||||
|
|
@ -6,8 +6,10 @@
|
|||
<base href="/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<body class="mat-typography">
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -16,3 +16,35 @@ main {
|
|||
padding: 20px; /* Odstęp wewnętrzny */
|
||||
background-color: #f8f9fa; /* Tło formularza */
|
||||
}
|
||||
|
||||
html, body { height: 100%; }
|
||||
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
|
||||
/* Custom styles for mat-form-field with outline */
|
||||
.custom-mat-form-field .mat-form-field-outline {
|
||||
padding-right: 40px; /* Adjust based on your input field size */
|
||||
}
|
||||
|
||||
.custom-mat-form-field .mat-datepicker-toggle.mat-suffix {
|
||||
position: absolute;
|
||||
right: 10px; /* Fine-tune the position */
|
||||
}
|
||||
|
||||
.custom-mat-form-field .example-month-picker .mat-calendar {
|
||||
margin-top: 0; /* Align the calendar */
|
||||
}
|
||||
.mat-form-field-appearance-outline .mat-slide-toggle {
|
||||
margin-top: 16px; /* Adjust the margin to prevent overlapping or misalignment */
|
||||
position: relative;
|
||||
}
|
||||
.form-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px; /* Adjust spacing between elements */
|
||||
}
|
||||
.mat-slide-toggle {
|
||||
display: inline-block; /* Ensure the toggle behaves correctly */
|
||||
margin-top: 16px; /* Adjust the margin if necessary */
|
||||
}
|
||||
.mat-form-field, .mat-slide-toggle {
|
||||
position: relative; /* Ensure both are positioned correctly */
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue