arti24
/
arti-angular-app
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Prace z Angular material we współpracy z Bootstrapem na razie nie zakończone sukcesem

This commit is contained in:
Artur 2024-11-13 20:21:56 +01:00
parent 38e904857c
commit f9aa246718
16 changed files with 1934 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
angular.json
View File

@ -25,10 +25,10 @@
{ {
"glob": "**/*", "glob": "**/*",
"input": "public" "input": "public"
} }
], ],
"styles": [ "styles": [
"node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.css", "src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.css" "node_modules/bootstrap/dist/css/bootstrap.css"
], ],
@ -53,14 +53,17 @@
"outputHashing": "all" "outputHashing": "all"
}, },
"en": { "en": {
"localize": ["en"], "localize": [
"en"
],
"outputPath": "dist/arti-angular-app-en" "outputPath": "dist/arti-angular-app-en"
}, },
"pl": { "pl": {
"localize": ["pl"], "localize": [
"pl"
],
"outputPath": "dist/arti-angular-app-pl" "outputPath": "dist/arti-angular-app-pl"
}, },
"development": { "development": {
"optimization": false, "optimization": false,
"extractLicenses": false, "extractLicenses": false,
@ -104,12 +107,27 @@
} }
], ],
"styles": [ "styles": [
"@angular/material/prebuilt-themes/azure-blue.css",
"src/styles.css" "src/styles.css"
], ],
"scripts": [] "scripts": []
} }
},
"lint": {
"builder": "@angular-eslint/builder:lint",
"options": {
"lintFilePatterns": [
"src/**/*.ts",
"src/**/*.html"
]
} }
} }
} }
} }
},
"cli": {
"schematicCollections": [
"@angular-eslint/schematics"
]
}
} }

43
eslint.config.js Normal file
View File

@ -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: {},
}
);

1637
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

8
package.json
View File

@ -6,15 +6,18 @@
"start": "ng serve", "start": "ng serve",
"build": "ng build", "build": "ng build",
"watch": "ng build --watch --configuration development", "watch": "ng build --watch --configuration development",
"test": "ng test" "test": "ng test",
"lint": "ng lint"
}, },
"private": true, "private": true,
"dependencies": { "dependencies": {
"@angular/animations": "^18.2.0", "@angular/animations": "^18.2.0",
"@angular/cdk": "^18.2.13",
"@angular/common": "^18.2.0", "@angular/common": "^18.2.0",
"@angular/compiler": "^18.2.0", "@angular/compiler": "^18.2.0",
"@angular/core": "^18.2.0", "@angular/core": "^18.2.0",
"@angular/forms": "^18.2.0", "@angular/forms": "^18.2.0",
"@angular/material": "^18.2.13",
"@angular/platform-browser": "^18.2.0", "@angular/platform-browser": "^18.2.0",
"@angular/platform-browser-dynamic": "^18.2.0", "@angular/platform-browser-dynamic": "^18.2.0",
"@angular/router": "^18.2.0", "@angular/router": "^18.2.0",
@ -31,6 +34,8 @@
"@angular/compiler-cli": "^18.2.0", "@angular/compiler-cli": "^18.2.0",
"@angular/localize": "^18.2.4", "@angular/localize": "^18.2.4",
"@types/jasmine": "~5.1.0", "@types/jasmine": "~5.1.0",
"angular-eslint": "18.4.0",
"eslint": "^9.13.0",
"jasmine-core": "~5.2.0", "jasmine-core": "~5.2.0",
"karma": "~6.4.0", "karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0", "karma-chrome-launcher": "~3.2.0",
@ -38,6 +43,7 @@
"karma-jasmine": "~5.1.0", "karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0", "karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.5.2", "typescript": "~5.5.2",
"typescript-eslint": "8.10.0",
"vite": "^5.4.10" "vite": "^5.4.10"
} }
} }

1
src/app/app.component.html
View File

@ -15,6 +15,7 @@
<a class="navbar-brand" href="/about-me">{{ 'topBar.aboutMe' | translate }}</a> <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="/asset-calculator">{{ 'topBar.depreciationCalculator' | translate }}</a>
<a class="navbar-brand" href="/quotes">{{ 'topBar.courses' | translate }}</a> <a class="navbar-brand" href="/quotes">{{ 'topBar.courses' | translate }}</a>
<a class="navbar-brand" href="/material">{{ 'work.with.material' | translate }}</a>
</div> </div>
</nav> </nav>

3
src/app/app.config.ts
View File

@ -7,6 +7,7 @@ import { HttpClient, provideHttpClient} from '@angular/common/http';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core'; import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader'; import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
const httpLoaderFactory: (http: HttpClient) => TranslateHttpLoader = (http: HttpClient) => const httpLoaderFactory: (http: HttpClient) => TranslateHttpLoader = (http: HttpClient) =>
new TranslateHttpLoader(http, './i18n/', '.json'); new TranslateHttpLoader(http, './i18n/', '.json');
@ -24,7 +25,7 @@ export const appConfig: ApplicationConfig = {
useFactory: httpLoaderFactory, useFactory: httpLoaderFactory,
deps: [ HttpClient ], deps: [ HttpClient ],
}, },
})]) })]), provideAnimationsAsync()
], ],
}; };

11
src/app/app.routes.ts
View File

@ -5,13 +5,14 @@ import { AboutMeComponent } from './about-me/about-me.component';
import { ChatGPTComponent } from './chat-gpt/chat-gpt.component'; import { ChatGPTComponent } from './chat-gpt/chat-gpt.component';
import {JobfinderComponent } from './jobfinder/jobfinder.component'; import {JobfinderComponent } from './jobfinder/jobfinder.component';
import { FixedAssetComponent } from './fixed-asset/fixed-asset.component'; import { FixedAssetComponent } from './fixed-asset/fixed-asset.component';
import {MaterialExperimentComponent} from './material-experiment/material-experiment.component'
export const routes: Routes = [ export const routes: Routes = [
{ {
path: "", path: "",
title: "Środki trwałe", title: "Work with material",
component:AssetCalculatorComponent component:MaterialExperimentComponent
}, },
{ {
path: "about-me", path: "about-me",
@ -37,6 +38,12 @@ export const routes: Routes = [
path: "fixed-asset", path: "fixed-asset",
title:"Środki trwałe", title:"Środki trwałe",
component: FixedAssetComponent component: FixedAssetComponent
},
{
path: "material",
title:"Material work",
component: MaterialExperimentComponent
} }
] ]
; ;

66
src/app/asset-calculator/asset-calculator.component.html
View File

@ -1,18 +1,19 @@
<div class="container mt-5"> <div class="container mt-5">
<!-- Language Switcher in app.component.html --> <!-- Language Switcher in app.component.html -->
<div class="row"> <div class="row">
<div class="h1 text-center text-lg-start" i18n="@@depreciationCalculator"> <div class="h1 text-center text-lg-start" > {{ 'asset-calculator.depreciationCalculator' | translate }}
{{ 'asset-calculator.depreciationCalculator' | translate }}
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col mx-2 mx-lg-0 mb-2 col-lg-4 frame"> <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> <div class="row text-center h5 "><h5 >{{ 'asset-calculator.fixedAsset' | translate }}</h5></div>
<form [formGroup]=assetsDepreciationFormGroup > <form [formGroup]=assetMainData >
<div class="form-group row align-items-center mb-1"> <div class="form-group row align-items-center mb-1">
<div class="col-5 col-lg-6 text-start"> <div class="col-5 col-lg-6 text-start">
<label class="form-label" for="initialValueAsset" i18n="@@initialValue" > <label class="form-label" for="initialValueAsset" i18n="@@initialValue" >
@ -21,7 +22,7 @@
<div class="col col-lg"> <div class="col col-lg">
<input class="form-control" formControlName="initialValueAsset" type="number" id="initialValueAsset" required > <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> <div class="text-danger col-auto"> Wartość niepoprawna!. Podaj kwotę w zł np 3000.05 (czyli 3000 zł i 5 gr)</div>
}@else{ }@else{
} }
@ -31,7 +32,7 @@
<div class="form-group row align-items-center"> <div class="form-group row align-items-center">
<div class="col-5 col-lg-6 text-start "> <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>
<div class="col-3 col-lg-3"> <div class="col-3 col-lg-3">
<input class="form-control" formControlName="rate" type="number" id="rate" /> <input class="form-control" formControlName="rate" type="number" id="rate" />
@ -40,31 +41,47 @@
<label for="rate">%</label> <label for="rate">%</label>
</div> </div>
</div> </div>
<!--
<div class="form-group row align-items-center "> <div class="form-group row align-items-center ">
<div class="col-5 col-lg-6 text-start "> <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>
<div class="col-7 col-lg-6"> <div class="col-7 col-lg-6">
<input type="month" lang="pl" class="form-control" formControlName="year_month" id="year_month" placeholder="2024" /> <input type="month" lang="pl" class="form-control" formControlName="year_month" id="year_month" placeholder="2024" />
</div> </div>
</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="form-group row align-items-center">
<div class="col-5 col-lg text-start" > <div class="col-5 col-lg text-start" >
<label class="form-label" (click)=addChangeValue() i18n="@@depreciationMethod" >{{ 'asset-calculator.depreciationMethod' | translate }}</label> <label class="form-label" for="typeDepreciation" >{{ 'asset-calculator.depreciationMethod' | translate }}</label>
</div> </div>
<div class="col col-lg" > <div class="col col-lg" >
<select class="form-select" formControlName="typeDepreciation" > <select class="form-select" formControlName="typeDepreciation" >
<option [ngValue]=TypeDepreciation.linear selected="selected" i18n="@@linear">{{ 'asset-calculator.linear' | translate }}</option> <option [ngValue]=TypeDepreciation.linear selected="selected">{{ 'asset-calculator.linear' | translate }}</option>
<option [ngValue]=TypeDepreciation.digressive i18n="@@digressive">{{ 'asset-calculator.digressive' | translate }}</option> <option [ngValue]=TypeDepreciation.digressive >{{ 'asset-calculator.digressive' | translate }}</option>
</select> </select>
</div> </div>
</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="form-group row align-items-center">
<div class="col-5 col-lg text-start "> <div class="col-5 col-lg text-start ">
<label for="factor" class="form-label">{{ 'asset-calculator.degressionCoefficients' | translate }}</label> <label for="factor" class="form-label">{{ 'asset-calculator.degressionCoefficients' | translate }}</label>
@ -75,9 +92,10 @@
</div> </div>
} }
</form> </form>
<div class="col-1"> <div class="col-1">
<input class="btn btn-secondary col-auto" name="addChangeValue" <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> </div>
@ -86,15 +104,23 @@
@if( lifeFormArray.controls.length > 0 ){ @if( lifeFormArray.controls.length > 0 ){
<div class="col col-lg-6 mb-2 ms-lg-3"> <div class="col col-lg-6 mb-2 ms-lg-3">
<div class="row"> <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>
<div class="row p-2 "> <div class="row p-2 ">
<table class="table table-striped table-bordered"> <table class="table table-striped table-bordered">
<thead> <thead>
<tr> <tr>
<th class="col-1 text-center" scope="col-auto">{{ 'asset-calculator.lp' | translate }}</th> <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-auto">{{ 'asset-calculator.month' | translate }}
<th class="col-2 text-center" scope="col" i18n="@@change">{{ 'asset-calculator.change' | translate }}</th> <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> <th class="col-1 text-center" scope="col"></th>
</tr> </tr>
</thead> </thead>
@ -102,7 +128,7 @@
@for( changeGroup of lifeFormArray.controls; track $index ) { @for( changeGroup of lifeFormArray.controls; track $index ) {
<tr [formGroup] = changeGroup > <tr [formGroup] = changeGroup >
<th class="align-middle text-center col-auto" scope="row">{{$index+1}}</th> <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><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> <td ><button class="btn btn-sm btn-secondary" type="button" (click)=removeChange($index)>{{ 'asset-calculator.remove' | translate }}</button>
</tr> </tr>
@ -138,7 +164,7 @@
<td>{{ position.calculatedDepreciation | number:'1.2-2' }}</td> <td>{{ position.calculatedDepreciation | number:'1.2-2' }}</td>
<td>{{ position.sum | number:'1.2-2' }}</td> <td>{{ position.sum | number:'1.2-2' }}</td>
</tr> </tr>
@if( 12 == position.when.month || $index == amortizations.positions.length-1){ @if( 12 === position.when.month || $index === amortizations.positions.length-1){
<tr> <tr>
<td colspan="3"> <td colspan="3">
</td> </td>

81
src/app/asset-calculator/asset-calculator.component.ts
View File

@ -1,22 +1,40 @@
import { Component, OnInit, OnDestroy } from '@angular/core'; import { Component, OnInit, OnDestroy } from '@angular/core';
import { ReactiveFormsModule, FormGroup, Validators, FormControl, FormArray } from '@angular/forms'; import { ReactiveFormsModule, FormGroup, Validators, FormControl, FormArray } from '@angular/forms';
import { AbstractControl, ValidationErrors } from '@angular/forms';
import { DecimalPipe } from '@angular/common'; import { DecimalPipe } from '@angular/common';
import {provideNativeDateAdapter} from '@angular/material/core';
import {Asset, Positions, AssetPlanPosition, TypeDepreciation, YearMonth, AssetLifeChange, AssetDepreciationMethod, YearMonthUtil } from '../assets/asset'; import {Asset, Positions, AssetPlanPosition, TypeDepreciation, YearMonth, AssetLifeChange, AssetDepreciationMethod, YearMonthUtil } from '../assets/asset';
import {AssetService} from '../assets/service/asset.service' import {AssetService} from '../assets/service/asset.service'
import {TranslateModule} from "@ngx-translate/core"; 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 { interface FormValues {
initialValueAsset: number; initialValueAsset: number;
rate: number; rate: number;
year_month: string; startDepreciationYM: Date;
typeDepreciation : TypeDepreciation; typeDepreciation : TypeDepreciation;
factor: number; factor: number;
} }
@Component({ @Component({
selector: 'app-asset-calculator', selector: 'app-asset-calculator',
standalone: true, 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", templateUrl: "asset-calculator.component.html",
styleUrl: 'asset-calculator.component.css' styleUrl: 'asset-calculator.component.css'
}) })
@ -24,14 +42,12 @@ export class AssetCalculatorComponent implements OnInit, OnDestroy{
TypeDepreciation = TypeDepreciation; TypeDepreciation = TypeDepreciation;
amortizations = new Positions(); amortizations = new Positions();
lifeFormArray = new FormArray<FormGroup>([]); lifeFormArray = new FormArray<FormGroup>([]);
assetsDepreciationFormGroup = new FormGroup({ assetMainData = new FormGroup({
initialValueAsset : new FormControl<number>( 5000, [ Validators.required, this.currencyValidator ]), initialValueAsset : new FormControl<number>( 5000, [ Validators.required, this.currencyValidator ]),
rate : new FormControl<number>( 20 ) , rate : new FormControl<number>( 20 ) ,
year_month : new FormControl<string>( "2024-10" ), startDepreciationYM : new FormControl<Date>( new Date() ),
typeDepreciation : new FormControl<TypeDepreciation>( TypeDepreciation.linear ), typeDepreciation : new FormControl<TypeDepreciation>( TypeDepreciation.linear ),
factor : new FormControl<number>( 2/*, [Validators.required,Validators.max(2)]*/ ), factor : new FormControl<number>( 2/*, [Validators.required,Validators.max(2)]*/ ),
@ -39,15 +55,27 @@ export class AssetCalculatorComponent implements OnInit, OnDestroy{
[key in keyof FormValues]: FormControl<FormValues[key]> [key in keyof FormValues]: FormControl<FormValues[key]>
}); });
constructor(private assetService : AssetService){ constructor( private assetService : AssetService,
this.assetsDepreciationFormGroup.valueChanges.subscribe( (value) => this.calculate() ); private dateAdapter: DateAdapter<Date>){
this.lifeFormArray.valueChanges.subscribe( (value) => this.calculate() );
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{ ngOnInit(): void{
const savedAsset = localStorage.getItem('assetForCalculator'); const savedAsset = localStorage.getItem('assetForCalculator');
if (savedAsset) this.assetToControls(JSON.parse(savedAsset)); if ( savedAsset ) {
this.assetToControls(JSON.parse(savedAsset));
}
this.calculate(); this.calculate();
} }
@ -58,31 +86,33 @@ export class AssetCalculatorComponent implements OnInit, OnDestroy{
private assetToControls( asset : Asset ) { private assetToControls( asset : Asset ) {
if( asset.life.length > 0 ){ if( asset.life.length > 0 ){
const year_month = YearMonthUtil.toTxt( asset.life[0].when ); const startYM : Date = YearMonthUtil.toDate( asset.life[0].when );
this.assetsDepreciationFormGroup.patchValue({ this.assetMainData.patchValue({
year_month : year_month, startDepreciationYM : startYM,
initialValueAsset : asset.life[0].initial, initialValueAsset : asset.life[0].initial,
rate : asset.depreciationMethods[0].rate, rate : asset.depreciationMethods[0].rate,
typeDepreciation : asset.depreciationMethods[0].type, typeDepreciation : asset.depreciationMethods[0].type,
factor : asset.depreciationMethods[0].factor, factor : asset.depreciationMethods[0].factor,
}) })
/*
asset.life.slice(1).forEach( lifeChange => { asset.life.slice(1).forEach( lifeChange => {
this.addChangeValue(); this.addChangeValue();
const row = this.lifeFormArray.at( this.lifeFormArray.length - 1 ) as FormGroup; const row = this.lifeFormArray.at( this.lifeFormArray.length - 1 ) as FormGroup;
row.patchValue( { row.patchValue( {
initialValueAsset: lifeChange.initial, initialValueAsset: lifeChange.initial,
year_month: YearMonthUtil.toTxt( lifeChange.when ) startMonth: YearMonthUtil.toDate( lifeChange.when )
} ); } );
}); });
*/
} }
} }
private controlsToAsset() : Asset { 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 asset = new Asset( when );
const method = new AssetDepreciationMethod( when.year, formValues.rate, formValues.typeDepreciation, formValues.factor ); 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 ) { calculateForAsset( asset : Asset ) {
this.assetService.calculate( asset ).subscribe( this.assetService.calculate( asset ).subscribe(
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
positions => { this.calculateToValues(positions), this.amortizations = positions }); positions => { this.calculateToValues(positions), this.amortizations = positions });
} }
calculateToValues( positions:Positions ) { calculateToValues( positions:Positions ) {
let sum :number = 0; let sum = 0;
let sumThisYear: number = 0; let sumThisYear = 0;
positions.positions.forEach(position => { positions.positions.forEach(position => {
position.calculatedDepreciation *= 0.01; position.calculatedDepreciation *= 0.01;
sum += position.calculatedDepreciation; sum += position.calculatedDepreciation;
@ -139,21 +170,21 @@ export class AssetCalculatorComponent implements OnInit, OnDestroy{
} }
// Walidator dla kwoty // Walidator dla kwoty
currencyValidator(control: any) { currencyValidator(control: AbstractControl): ValidationErrors | null {
const value = control.value; const value = control.value;
const regex = /^\d+(\.\d{1,2})?$/; // Akceptuje liczby z maksymalnie dwoma miejscami po przecinku const regex = /^\d+(\.\d{1,2})?$/; // Akceptuje liczby z maksymalnie dwoma miejscami po przecinku
return regex.test(value) ? null : { invalidCurrency: true }; return regex.test(value) ? null : { invalidCurrency: true };
} }
addChangeValue() { 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 ), const newLifeGroup = new FormGroup( { initialValueAsset: new FormControl( change.initial ),
year_month : new FormControl( formValues.year_month )}) year_month : new FormControl( formValues.startDepreciationYM )})
this.lifeFormArray.push(newFormGroup); this.lifeFormArray.push(newLifeGroup);
// this.lifeSignal.set( this.lifeFormArray ); // this.lifeSignal.set( this.lifeFormArray );
} }

23
src/app/assets/asset.ts
View File

@ -7,11 +7,9 @@ export class YearMonth{
readonly year : number ; readonly year : number ;
readonly month : number ; readonly month : number ;
constructor( year_month:string ){ constructor( year_month:Date ){
const [year, month] = year_month.split('-').map(Number); this.year = year_month.getFullYear();
this.year = year; this.month = year_month.getMonth()+1;
this.month = month;
} }
} }
@ -22,9 +20,13 @@ export class YearMonthUtil{
return ym.year + '-' + ym.month ; return ym.year + '-' + ym.month ;
} }
static toDate( ym : YearMonth ):Date{
return new Date( ym.year, ym.month-1, 1 );
}
static today( ):YearMonth{ static today( ):YearMonth{
const today = new Date(); 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{ export class AssetsContainer{
assets: Map<string,Asset> = new Map(); assets: Map<string,Asset> = new Map<string,Asset>();
delete( nrInv: string ){ delete( nrInv: string ){
this.assets.delete(nrInv); this.assets.delete(nrInv);
@ -113,11 +115,8 @@ export class AssetsContainer{
} }
export class AssetPlanPosition{ export class AssetPlanPosition{
when : YearMonth = new YearMonth('0-0'); when : YearMonth = new YearMonth( new Date( 0, 0 ) );
calculatedDepreciation : number = 0; calculatedDepreciation = 0; sum = 0; sumThisYear = 0;
sum:number = 0;
sumThisYear:number = 0;
} }
export class Positions { export class Positions {

0
src/app/material-experiment/material-experiment.component.css Normal file
View File

9
src/app/material-experiment/material-experiment.component.html Normal file
View File

@ -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>

23
src/app/material-experiment/material-experiment.component.spec.ts Normal file
View File

@ -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();
});
});

24
src/app/material-experiment/material-experiment.component.ts Normal file
View File

@ -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 {
}

4
src/index.html
View File

@ -6,8 +6,10 @@
<base href="/"> <base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico"> <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> </head>
<body> <body class="mat-typography">
<app-root></app-root> <app-root></app-root>
</body> </body>
</html> </html>

32
src/styles.css
View File

@ -16,3 +16,35 @@ main {
padding: 20px; /* Odstęp wewnętrzny */ padding: 20px; /* Odstęp wewnętrzny */
background-color: #f8f9fa; /* Tło formularza */ 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 */
}