us + pl flags
This commit is contained in:
parent
13784652ca
commit
073917b495
15
angular.json
15
angular.json
|
|
@ -17,7 +17,8 @@
|
|||
"index": "src/index.html",
|
||||
"browser": "src/main.ts",
|
||||
"polyfills": [
|
||||
"zone.js"
|
||||
"zone.js",
|
||||
"@angular/localize/init"
|
||||
],
|
||||
"tsConfig": "tsconfig.app.json",
|
||||
"assets": [
|
||||
|
|
@ -51,6 +52,15 @@
|
|||
],
|
||||
"outputHashing": "all"
|
||||
},
|
||||
"en": {
|
||||
"localize": ["en"],
|
||||
"outputPath": "dist/arti-angular-app-en"
|
||||
},
|
||||
"pl": {
|
||||
"localize": ["pl"],
|
||||
"outputPath": "dist/arti-angular-app-pl"
|
||||
},
|
||||
|
||||
"development": {
|
||||
"optimization": false,
|
||||
"extractLicenses": false,
|
||||
|
|
@ -83,7 +93,8 @@
|
|||
"options": {
|
||||
"polyfills": [
|
||||
"zone.js",
|
||||
"zone.js/testing"
|
||||
"zone.js/testing",
|
||||
"@angular/localize/init"
|
||||
],
|
||||
"tsConfig": "tsconfig.spec.json",
|
||||
"assets": [
|
||||
|
|
|
|||
|
|
@ -16,6 +16,8 @@
|
|||
"@angular/platform-browser": "^18.2.0",
|
||||
"@angular/platform-browser-dynamic": "^18.2.0",
|
||||
"@angular/router": "^18.2.0",
|
||||
"@ngx-translate/core": "^16.0.3",
|
||||
"@ngx-translate/http-loader": "^16.0.0",
|
||||
"bootstrap": "^5.3.3",
|
||||
"rxjs": "~7.8.0",
|
||||
"tslib": "^2.3.0",
|
||||
|
|
@ -25,6 +27,7 @@
|
|||
"@angular-devkit/build-angular": "^18.2.4",
|
||||
"@angular/cli": "^18.2.4",
|
||||
"@angular/compiler-cli": "^18.2.0",
|
||||
"@angular/localize": "^18.2.4",
|
||||
"@types/jasmine": "~5.1.0",
|
||||
"jasmine-core": "~5.2.0",
|
||||
"karma": "~6.4.0",
|
||||
|
|
@ -1652,6 +1655,30 @@
|
|||
"rxjs": "^6.5.3 || ^7.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@angular/localize": {
|
||||
"version": "18.2.4",
|
||||
"resolved": "https://registry.npmjs.org/@angular/localize/-/localize-18.2.4.tgz",
|
||||
"integrity": "sha512-3QgfYNwM4Dkd7sWu/JXZfOToporIrgdyi/G8T2zgTtArbvPNbZdSmihpSjKVmsDzB4ScXlOCH/sf0rLKIYkKwQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@babel/core": "7.25.2",
|
||||
"@types/babel__core": "7.20.5",
|
||||
"fast-glob": "3.3.2",
|
||||
"yargs": "^17.2.1"
|
||||
},
|
||||
"bin": {
|
||||
"localize-extract": "tools/bundles/src/extract/cli.js",
|
||||
"localize-migrate": "tools/bundles/src/migrate/cli.js",
|
||||
"localize-translate": "tools/bundles/src/translate/cli.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^18.19.1 || ^20.11.1 || >=22.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular/compiler": "18.2.4",
|
||||
"@angular/compiler-cli": "18.2.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@angular/platform-browser": {
|
||||
"version": "18.2.4",
|
||||
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-18.2.4.tgz",
|
||||
|
|
@ -4491,6 +4518,30 @@
|
|||
"webpack": "^5.54.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@ngx-translate/core": {
|
||||
"version": "16.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@ngx-translate/core/-/core-16.0.3.tgz",
|
||||
"integrity": "sha512-UPse66z9tRUmIpeorYodXBQY6O4foUmj9jy9cCuuja7lqdOwRBWPzCWqc+qYIXv5L2QoqZdxgHtqoUz+Q9weSA==",
|
||||
"dependencies": {
|
||||
"tslib": "^2.3.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular/common": ">=16",
|
||||
"@angular/core": ">=16"
|
||||
}
|
||||
},
|
||||
"node_modules/@ngx-translate/http-loader": {
|
||||
"version": "16.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@ngx-translate/http-loader/-/http-loader-16.0.0.tgz",
|
||||
"integrity": "sha512-l3okOHGVxZ1Bm55OpakSfXvI2yYmVmhYqgwGU4aIQIRUqpkBCrSDZnmrHTcZfsGJzXKB5E2D2rko9i28gBijmA==",
|
||||
"dependencies": {
|
||||
"tslib": "^2.3.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular/common": ">=16",
|
||||
"@angular/core": ">=16"
|
||||
}
|
||||
},
|
||||
"node_modules/@nodelib/fs.scandir": {
|
||||
"version": "2.1.5",
|
||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
|
||||
|
|
@ -5191,6 +5242,47 @@
|
|||
"url": "https://github.com/sponsors/isaacs"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/babel__core": {
|
||||
"version": "7.20.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
|
||||
"integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@babel/parser": "^7.20.7",
|
||||
"@babel/types": "^7.20.7",
|
||||
"@types/babel__generator": "*",
|
||||
"@types/babel__template": "*",
|
||||
"@types/babel__traverse": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/babel__generator": {
|
||||
"version": "7.6.8",
|
||||
"resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.8.tgz",
|
||||
"integrity": "sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@babel/types": "^7.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/babel__template": {
|
||||
"version": "7.4.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
|
||||
"integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@babel/parser": "^7.1.0",
|
||||
"@babel/types": "^7.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/babel__traverse": {
|
||||
"version": "7.20.6",
|
||||
"resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.6.tgz",
|
||||
"integrity": "sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@babel/types": "^7.20.7"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/body-parser": {
|
||||
"version": "1.19.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.5.tgz",
|
||||
|
|
|
|||
|
|
@ -18,6 +18,8 @@
|
|||
"@angular/platform-browser": "^18.2.0",
|
||||
"@angular/platform-browser-dynamic": "^18.2.0",
|
||||
"@angular/router": "^18.2.0",
|
||||
"@ngx-translate/core": "^16.0.3",
|
||||
"@ngx-translate/http-loader": "^16.0.0",
|
||||
"bootstrap": "^5.3.3",
|
||||
"rxjs": "~7.8.0",
|
||||
"tslib": "^2.3.0",
|
||||
|
|
@ -27,6 +29,7 @@
|
|||
"@angular-devkit/build-angular": "^18.2.4",
|
||||
"@angular/cli": "^18.2.4",
|
||||
"@angular/compiler-cli": "^18.2.0",
|
||||
"@angular/localize": "^18.2.4",
|
||||
"@types/jasmine": "~5.1.0",
|
||||
"jasmine-core": "~5.2.0",
|
||||
"karma": "~6.4.0",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-pl" viewBox="0 0 512 512">
|
||||
<g fill-rule="evenodd">
|
||||
<path fill="#fff" d="M512 512H0V0h512z"/>
|
||||
<path fill="#dc143c" d="M512 512H0V256h512z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 219 B |
|
|
@ -0,0 +1,9 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-us" viewBox="0 0 512 512">
|
||||
<path fill="#bd3d44" d="M0 0h512v512H0"/>
|
||||
<path stroke="#fff" stroke-width="40" d="M0 58h512M0 137h512M0 216h512M0 295h512M0 374h512M0 453h512"/>
|
||||
<path fill="#192f5d" d="M0 0h390v275H0z"/>
|
||||
<marker id="us-a" markerHeight="30" markerWidth="30">
|
||||
<path fill="#fff" d="m15 0 9.3 28.6L0 11h30L5.7 28.6"/>
|
||||
</marker>
|
||||
<path fill="none" marker-mid="url(#us-a)" d="m0 0 18 11h65 65 65 65 66L51 39h65 65 65 65L18 66h65 65 65 65 66L51 94h65 65 65 65L18 121h65 65 65 65 66L51 149h65 65 65 65L18 177h65 65 65 65 66L51 205h65 65 65 65L18 232h65 65 65 65 66z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 650 B |
|
|
@ -0,0 +1,6 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-pl" viewBox="0 0 640 480">
|
||||
<g fill-rule="evenodd">
|
||||
<path fill="#fff" d="M640 480H0V0h640z"/>
|
||||
<path fill="#dc143c" d="M640 480H0V240h640z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 219 B |
|
|
@ -0,0 +1,9 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-us" viewBox="0 0 640 480">
|
||||
<path fill="#bd3d44" d="M0 0h640v480H0"/>
|
||||
<path stroke="#fff" stroke-width="37" d="M0 55.3h640M0 129h640M0 203h640M0 277h640M0 351h640M0 425h640"/>
|
||||
<path fill="#192f5d" d="M0 0h364.8v258.5H0"/>
|
||||
<marker id="us-a" markerHeight="30" markerWidth="30">
|
||||
<path fill="#fff" d="m14 0 9 27L0 10h28L5 27z"/>
|
||||
</marker>
|
||||
<path fill="none" marker-mid="url(#us-a)" d="m0 0 16 11h61 61 61 61 60L47 37h61 61 60 61L16 63h61 61 61 61 60L47 89h61 61 60 61L16 115h61 61 61 61 60L47 141h61 61 60 61L16 166h61 61 61 61 60L47 192h61 61 60 61L16 218h61 61 61 61 60z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 648 B |
|
|
@ -27,44 +27,8 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col col-lg-9">
|
||||
<div class="frame2">
|
||||
<p>Jestem doświadczonym inżynierem oprogramowania z ponad 20-letnim doświadczeniem w branży IT.</p>
|
||||
<p>Specjalizuję się w technologiach Java i Angular, a także w rozwijaniu i wdrażaniu skalowalnych aplikacji webowych.</p>
|
||||
<p> Jestem posiadaczem certyfikatu Oracle Cloud Infrastructure 2024 Generative AI Certified Professional oraz wcześniejszych
|
||||
kwalifikacji w obszarze chmury Oracle i programowania w języku Java.</p>
|
||||
<p>Te umiejętności wspierają moje działania w zakresie wdrażania nowoczesnych rozwiązań opartych na chmurze
|
||||
oraz tworzenia aplikacji zorientowanych na przyszłość.</p>
|
||||
<ul>
|
||||
<b>Główne technologie i narzędzia:</b>
|
||||
<li>Języki programowania: Java, JavaScript, C++ </li>
|
||||
<li>Frameworki: Spring Boot, Angular, Thymeleaf</li>
|
||||
<li>Bazy danych: Oracle, MSSQL, JavaDB</li>
|
||||
<li>Środowiska chmurowe: Oracle Cloud Infrastructure, Docker</li>
|
||||
<li>Inne: HTML, CSS, Bootstrap, SVN, WildFly</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
Ostatnie projekty:
|
||||
|
||||
arti24.eu – rozwój serwisu w Angularze, wykorzystujący najnowsze technologie, takie jak Angular 18, Spring Boot 3.3.4 i Bootstrap 5.3.3.
|
||||
bodypainter.eu – kompleksowy projekt realizacji i rozwoju strony internetowej, wdrożony na Oracle Cloud, z użyciem technologii Java, Spring Boot, Docker i Thymeleaf.
|
||||
|
||||
Dodatkowe osiągnięcia:
|
||||
|
||||
Jestem posiadaczem certyfikatu Oracle Cloud Infrastructure 2024 Generative AI Certified Professional oraz wcześniejszych kwalifikacji w obszarze chmury Oracle i programowania w języku Java. Te umiejętności wspierają moje działania w zakresie wdrażania nowoczesnych rozwiązań opartych na chmurze oraz tworzenia aplikacji zorientowanych na przyszłość.
|
||||
|
||||
Główne technologie i narzędzia:
|
||||
|
||||
Języki programowania: Java, JavaScript, C++
|
||||
Frameworki: Spring Boot, Angular, Thymeleaf
|
||||
Bazy danych: Oracle, MSSQL, JavaDB
|
||||
Środowiska chmurowe: Oracle Cloud Infrastructure, Docker
|
||||
Inne: HTML, CSS, Bootstrap, SVN, WildFly
|
||||
|
||||
Zapraszam do współpracy lub kontaktu – chętnie dzielę się swoją wiedzą i pomagam we wdrażaniu ambitnych projektów!
|
||||
-->
|
||||
<div class="col col-lg-9">
|
||||
<div class="frame2" [innerHTML]="aboutDescription"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,51 @@
|
|||
import { Component } from '@angular/core';
|
||||
import {NgOptimizedImage} from '@angular/common'
|
||||
import { Component, OnDestroy } from '@angular/core';
|
||||
import { NgOptimizedImage } from '@angular/common'
|
||||
import { TranslateModule, TranslateService, LangChangeEvent } from "@ngx-translate/core";
|
||||
import { Pipe, PipeTransform } from '@angular/core';
|
||||
import { DomSanitizer } from '@angular/platform-browser';
|
||||
import { Subscription } from 'rxjs';
|
||||
|
||||
@Pipe({ name: 'sanitizeHtml' })
|
||||
export class SanitizeHtmlPipe implements PipeTransform {
|
||||
|
||||
constructor(private sanitizer: DomSanitizer) { }
|
||||
|
||||
transform(html: string): any {
|
||||
return this.sanitizer.bypassSecurityTrustHtml(html);
|
||||
}
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-about-me',
|
||||
standalone: true,
|
||||
imports: [NgOptimizedImage],
|
||||
imports: [NgOptimizedImage, TranslateModule],
|
||||
templateUrl: './about-me.component.html',
|
||||
styleUrl: './about-me.component.css'
|
||||
})
|
||||
export class AboutMeComponent {
|
||||
|
||||
}
|
||||
export class AboutMeComponent implements OnDestroy{
|
||||
|
||||
aboutDescription: string | undefined;
|
||||
private langChangeSub: Subscription;
|
||||
constructor(private translate: TranslateService) {
|
||||
|
||||
this.langChangeSub = this.translate.onLangChange.subscribe(() => {
|
||||
this.loadAboutDescription();
|
||||
});
|
||||
this.loadAboutDescription();
|
||||
}
|
||||
|
||||
private loadAboutDescription(): void {
|
||||
this.translate.get('aboutMe.description').subscribe((text: string) => {
|
||||
this.aboutDescription = text;
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
// Unsubscribe to avoid memory leaks
|
||||
if (this.langChangeSub) {
|
||||
this.langChangeSub.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,11 +1,22 @@
|
|||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
|
||||
<div class="container">
|
||||
| <a class="navbar-brand" href="/about-me">O mnie</a>
|
||||
| <a class="navbar-brand" href="/asset-calculator">Kalkulator amortyzacyjny</a>
|
||||
<!-- | <a class="navbar-brand" href="/fixed-asset">Środki trwałe</a> -->
|
||||
| <a class="navbar-brand" href="/quotes">Kursy</a>
|
||||
<!-- <a class="navbar-brand" href="/jobfinder">Oferty</a> -->
|
||||
</div>
|
||||
</nav>
|
||||
<router-outlet />
|
||||
<div class="me-auto col-auto">
|
||||
<a class="navbar-brand ms-2">
|
||||
<img
|
||||
loading="lazy"
|
||||
class="border border-dark"
|
||||
height="25"
|
||||
src="/flag-icons-main/flags/4x3/{{ translate.currentLang === 'pl' ? 'us' : 'pl' }}.svg"
|
||||
(click)="switchLanguage(translate.currentLang === 'pl' ? 'en' : 'pl')"
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
<div class="container d-flex justify-content-between align-items-center">
|
||||
<!-- Navbar links -->
|
||||
<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>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<router-outlet />
|
||||
`
|
||||
|
|
@ -1,13 +1,24 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
|
||||
|
||||
import { TranslateService, TranslateModule} from "@ngx-translate/core";
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
standalone: true,
|
||||
imports: [RouterOutlet, RouterLink, RouterLinkActive],
|
||||
imports: [ RouterOutlet, TranslateModule ],
|
||||
templateUrl: './app.component.html',
|
||||
styleUrl: './app.component.css'
|
||||
})
|
||||
export class AppComponent {
|
||||
constructor( public translate: TranslateService ){
|
||||
this.translate.addLangs(['pl', 'en']);
|
||||
this.translate.setDefaultLang('pl');
|
||||
this.translate.use('en');
|
||||
}
|
||||
|
||||
// app.component.ts
|
||||
switchLanguage(language: string) {
|
||||
this.translate.use(language);
|
||||
}
|
||||
|
||||
title = 'arti-angular-app';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,30 @@
|
|||
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
|
||||
import { ApplicationConfig, importProvidersFrom, provideZoneChangeDetection } from '@angular/core';
|
||||
import { provideRouter } from '@angular/router';
|
||||
|
||||
import { routes } from './app.routes';
|
||||
import { provideHttpClient } from '@angular/common/http';
|
||||
import { HttpClient, provideHttpClient} from '@angular/common/http';
|
||||
|
||||
|
||||
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
|
||||
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
|
||||
|
||||
const httpLoaderFactory: (http: HttpClient) => TranslateHttpLoader = (http: HttpClient) =>
|
||||
new TranslateHttpLoader(http, './i18n/', '.json');
|
||||
// Configuration function for TranslateModule
|
||||
|
||||
export const appConfig: ApplicationConfig = {
|
||||
providers: [provideZoneChangeDetection({ eventCoalescing: true }),
|
||||
provideRouter(routes),
|
||||
provideHttpClient()]
|
||||
providers: [
|
||||
provideZoneChangeDetection({ eventCoalescing: true }),
|
||||
provideHttpClient(),
|
||||
provideRouter(routes),
|
||||
importProvidersFrom([
|
||||
TranslateModule.forRoot({
|
||||
loader: {
|
||||
provide: TranslateLoader,
|
||||
useFactory: httpLoaderFactory,
|
||||
deps: [ HttpClient ],
|
||||
},
|
||||
})])
|
||||
],
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,17 +1,22 @@
|
|||
|
||||
<div class="container mt-5 ">
|
||||
<div class="container mt-5">
|
||||
<!-- Language Switcher in app.component.html -->
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="h1 text-center text-lg-start ">Kalkulator amortyzacyjny</div>
|
||||
<div class="h1 text-center text-lg-start" i18n="@@depreciationCalculator">
|
||||
{{ '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>Środek trwały</h5></div>
|
||||
<div class="row text-center h5 "><h5 i18n="@@fixedAsset">{{ 'asset-calculator.fixedAsset' | translate }}</h5></div>
|
||||
<form [formGroup]=assetsDepreciationFormGroup >
|
||||
<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:</label>
|
||||
<label class="form-label" for="initialValueAsset" i18n="@@initialValue" >
|
||||
{{ 'asset-calculator.initialValue' | translate }}</label>
|
||||
</div>
|
||||
<div class="col col-lg">
|
||||
<input class="form-control" formControlName="initialValueAsset" type="number" id="initialValueAsset" required >
|
||||
|
|
@ -26,7 +31,7 @@
|
|||
|
||||
<div class="form-group row align-items-center">
|
||||
<div class="col-5 col-lg-6 text-start ">
|
||||
<label class="form-label" for="rate" >Stawka amortyzacyjna:</label>
|
||||
<label class="form-label" for="rate" i18n="@@depreciationRate" >{{ 'asset-calculator.depreciationRate' | translate }}</label>
|
||||
</div>
|
||||
<div class="col-3 col-lg-3">
|
||||
<input class="form-control" formControlName="rate" type="number" id="rate" />
|
||||
|
|
@ -38,7 +43,7 @@
|
|||
|
||||
<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>
|
||||
<label class="form-label" i18n="@@startOfDepreciation" >{{ '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" />
|
||||
|
|
@ -49,12 +54,12 @@
|
|||
|
||||
<div class="form-group row align-items-center">
|
||||
<div class="col-5 col-lg text-start " >
|
||||
<label class="form-label">Metoda amortyzacji:</label>
|
||||
<label class="form-label" (click)=addChangeValue() i18n="@@depreciationMethod" >{{ 'asset-calculator.depreciationMethod' | translate }}</label>
|
||||
</div>
|
||||
<div class="col col-lg" >
|
||||
<select class="form-select" formControlName="typeDepreciation" >
|
||||
<option [ngValue]=TypeDepreciation.linear selected="selected">Liniowa</option>
|
||||
<option [ngValue]=TypeDepreciation.digressive >Dygresywna</option>
|
||||
<option [ngValue]=TypeDepreciation.linear selected="selected" i18n="@@linear">{{ 'asset-calculator.linear' | translate }}</option>
|
||||
<option [ngValue]=TypeDepreciation.digressive i18n="@@digressive">{{ 'asset-calculator.digressive' | translate }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -62,17 +67,17 @@
|
|||
@if( TypeDepreciation.digressive === assetsDepreciationFormGroup.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">Wspólczynnki degresji</label>
|
||||
<label for="factor" class="form-label">{{ 'asset-calculator.degressionCoefficients' | translate }}</label>
|
||||
</div>
|
||||
<div class="col col-lg" >
|
||||
<input type="text" class="form-control" formControlName="factor" id="factor" />
|
||||
<input type="text" class(click)=addChangeValue()="form-control" formControlName="factor" id="factor" />
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</form>
|
||||
<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 ">
|
||||
[disabled]=assetsDepreciationFormGroup.invalid (click)=addChangeValue() type="button" value="{{ 'asset-calculator.addChangeValue' | translate }}">
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -81,15 +86,15 @@
|
|||
@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>Zmiany wartości</h5></div>
|
||||
<div class="h5 text-center my-1" ><h5 i18n="@@valueChanges">{{ '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">Lp</th>
|
||||
<th class="col-2 text-center" scope="col-auto">Miesiąc</th>
|
||||
<th class="col-2 text-center" scope="col">Zmiana</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" i18n="@@change">{{ 'asset-calculator.change' | translate }}</th>
|
||||
<th class="col-1 text-center" scope="col"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
|
@ -99,7 +104,7 @@
|
|||
<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 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)>Usuń</button>
|
||||
<td ><button class="btn btn-sm btn-secondary" type="button" (click)=removeChange($index)>{{ 'asset-calculator.remove' | translate }}</button>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
|
|
@ -111,17 +116,17 @@
|
|||
</div>
|
||||
|
||||
<div class="row justify-content-center frame2 ">
|
||||
<div class="row h2 text-center" style="--bs-bg-opacity: .2;"><h2>Plan amortyzacji</h2></div>
|
||||
<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" >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>
|
||||
<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>
|
||||
|
|
@ -139,17 +144,17 @@
|
|||
</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 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" >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>
|
||||
<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>
|
||||
|
|
@ -158,5 +163,6 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,10 @@
|
|||
import { Component, OnInit, OnDestroy } from '@angular/core';
|
||||
import { ReactiveFormsModule, FormGroup, Validators, FormControl, FormArray } from '@angular/forms';
|
||||
import { CurrencyPipe,DecimalPipe,PercentPipe } from '@angular/common';
|
||||
|
||||
import { DecimalPipe } from '@angular/common';
|
||||
|
||||
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";
|
||||
|
||||
interface FormValues {
|
||||
initialValueAsset: number;
|
||||
|
|
@ -15,11 +14,11 @@ interface FormValues {
|
|||
factor: number;
|
||||
}
|
||||
@Component({
|
||||
selector: 'app-asset-calculator',
|
||||
standalone: true,
|
||||
imports: [ CurrencyPipe, DecimalPipe, PercentPipe, ReactiveFormsModule ] ,
|
||||
templateUrl: "asset-calculator.component.html",
|
||||
styleUrl: 'asset-calculator.component.css'
|
||||
selector: 'app-asset-calculator',
|
||||
standalone: true,
|
||||
imports: [ DecimalPipe, ReactiveFormsModule, TranslateModule ] ,
|
||||
templateUrl: "asset-calculator.component.html",
|
||||
styleUrl: 'asset-calculator.component.css'
|
||||
})
|
||||
export class AssetCalculatorComponent implements OnInit, OnDestroy{
|
||||
|
||||
|
|
@ -40,11 +39,11 @@ export class AssetCalculatorComponent implements OnInit, OnDestroy{
|
|||
[key in keyof FormValues]: FormControl<FormValues[key]>
|
||||
});
|
||||
|
||||
constructor(private assetService : AssetService ){
|
||||
constructor(private assetService : AssetService){
|
||||
this.assetsDepreciationFormGroup.valueChanges.subscribe( (value) => this.calculate() );
|
||||
this.lifeFormArray.valueChanges.subscribe( (value) => this.calculate() );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
ngOnInit(): void{
|
||||
const savedAsset = localStorage.getItem('assetForCalculator');
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
/// <reference types="@angular/localize" />
|
||||
|
||||
import { bootstrapApplication } from '@angular/platform-browser';
|
||||
import { appConfig } from './app/app.config';
|
||||
import { AppComponent } from './app/app.component';
|
||||
|
|
|
|||
|
|
@ -4,7 +4,9 @@
|
|||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./out-tsc/app",
|
||||
"types": []
|
||||
"types": [
|
||||
"@angular/localize"
|
||||
]
|
||||
},
|
||||
"files": [
|
||||
"src/main.ts"
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@
|
|||
"compilerOptions": {
|
||||
"outDir": "./out-tsc/spec",
|
||||
"types": [
|
||||
"jasmine"
|
||||
"jasmine",
|
||||
"@angular/localize"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
|
|
|
|||
Loading…
Reference in New Issue