From 4d69c93620eb07e16a9a7a22cff1c6adb17cd258 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20=C5=9Aci=C5=9Blewski?= Date: Tue, 4 Jun 2024 19:22:28 +0200 Subject: [PATCH] settings and exchange-rates changes --- .../exchange-rates.component.html | 46 ++++---- .../exchange-rates.component.scss | 51 +++++++-- .../src/app/settings/settings.component.html | 59 +++++++++- .../src/app/settings/settings.component.scss | 107 +++++++++++++++++- .../src/app/settings/settings.component.ts | 36 +++++- 5 files changed, 257 insertions(+), 42 deletions(-) diff --git a/Front/kantor-angular/src/app/exchange-rates/exchange-rates.component.html b/Front/kantor-angular/src/app/exchange-rates/exchange-rates.component.html index f148eaec..e228134c 100644 --- a/Front/kantor-angular/src/app/exchange-rates/exchange-rates.component.html +++ b/Front/kantor-angular/src/app/exchange-rates/exchange-rates.component.html @@ -1,27 +1,29 @@ -
- - - - - - - - - - -
WalutaObecna Cena7D1M3M12MWykres 1M
- -
+
+
- - - - - - - - + + + + + + + +

{{ currencyFlags[currency.from] }}

{{ currency.from }} {{ currencyNames[currency.from] }}
{{ currency.rate }}{{ exchangeRatesChanges[7][i].change | number:'1.4-4' }}{{ exchangeRatesChanges[30][i].change | number:'1.4-4' }}{{ exchangeRatesChanges[90][i].change | number:'1.4-4' }}{{ exchangeRatesChanges[365][i].change | number:'1.4-4' }}
WalutaObecna Cena7D1M3M12MWykres 1M
+ +
+ + + + + + + + + + +

{{ currencyFlags[currency.from] }}

{{ currency.from }} {{ currencyNames[currency.from] }}

{{ currency.rate }}{{ exchangeRatesChanges[7][i].percentageChange | number:'1.2-2' }}%{{ exchangeRatesChanges[30][i].percentageChange | number:'1.2-2' }}%{{ exchangeRatesChanges[90][i].percentageChange | number:'1.2-2' }}%{{ exchangeRatesChanges[365][i].percentageChange | number:'1.2-2' }}%
+
diff --git a/Front/kantor-angular/src/app/exchange-rates/exchange-rates.component.scss b/Front/kantor-angular/src/app/exchange-rates/exchange-rates.component.scss index f920da05..aa419190 100644 --- a/Front/kantor-angular/src/app/exchange-rates/exchange-rates.component.scss +++ b/Front/kantor-angular/src/app/exchange-rates/exchange-rates.component.scss @@ -1,3 +1,11 @@ +.content-container{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; +} .table-container{ color: #DBDBDB; font-family: "Twemoji Country Flags", "Helvetica", serif; @@ -6,8 +14,8 @@ border: 2px solid rgba(255, 255, 255, 0.22); background: linear-gradient(94deg, rgba(255, 255, 255, 0.04) 12.6%, rgba(255, 255, 255, 0.02) 100.13%); backdrop-filter: blur(25px); - - max-width: 80%; + height: 90%; + max-width: 90%; } .header-table{ @@ -15,11 +23,12 @@ top: 0; z-index: 2; } - +.header-text{ + width: 10%; +} .inner-table { overflow-y: auto; - max-height: 83vh; - padding: 20px; + max-height: 90%; &::-webkit-scrollbar { width: 20px; @@ -79,8 +88,9 @@ td, th { } .chart-cell { - width: 22%; - overflow: hidden; + width: 30%; + display:flex; + justify-content: center; } @@ -144,4 +154,31 @@ td, th { border-width: 10px 5px 0 5px; border-color: red transparent transparent transparent; } +.rows{ + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} +.one-row { + display: flex; + flex-direction: row; + align-items: center; + width: 100%; +} +.each-column{ + display: flex; + flex-direction: column; + align-items: center; + width: 10%; +} +.header-currency{ + width: 20%; +} +.currency-column{ + width: 20%; +} +.wykres{ + width: 70%; +} diff --git a/Front/kantor-angular/src/app/settings/settings.component.html b/Front/kantor-angular/src/app/settings/settings.component.html index b3e467e1..abac1d6c 100644 --- a/Front/kantor-angular/src/app/settings/settings.component.html +++ b/Front/kantor-angular/src/app/settings/settings.component.html @@ -29,10 +29,63 @@

Ustawienia

-
- -

Profil

+
+

Nazwa użytkownika:

+

Imię:

+

Nazwisko:

+

Email:

+
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+ + +
diff --git a/Front/kantor-angular/src/app/settings/settings.component.scss b/Front/kantor-angular/src/app/settings/settings.component.scss index f8f69bbe..dea1e237 100644 --- a/Front/kantor-angular/src/app/settings/settings.component.scss +++ b/Front/kantor-angular/src/app/settings/settings.component.scss @@ -41,9 +41,10 @@ h1{ } .lower-settings-container{ display: flex; - flex-direction: column; + flex-direction: row; height: 70%; width: 100%; + margin: 2%; } .settings-header{ height: 50%; @@ -61,7 +62,7 @@ h1{ align-items: center; justify-content: center; width: 100%; - height: 40%; + height: 25%; border-radius: 40px; background: linear-gradient(94deg, rgba(255, 255, 255, 0.12) 12.6%, rgba(255, 255, 255, 0.06) 100.13%); } @@ -106,19 +107,29 @@ h1{ color: #5FE5EE; border: none; background: none; - font-size: 1.5vw; + font-size: 1.25vw; height: 100%; width: 100%; + display: flex; + align-items: center; + justify-content: center; } .buttons-inactive{ color: #DBDBDB; border: none; background: none; - font-size: 1.5vw; + font-size: 1.25vw; height: 100%; width: 100%; + display: flex; + align-items: center; + justify-content: center; } .selected-profile, .selected-help, .selected-security{ + display: flex; + flex-direction: row; + height: 100%; + width: 100%; animation: fade-in 1s ease 0s 1 normal forwards; @keyframes fade-in { 0% { @@ -130,3 +141,91 @@ h1{ } } } +.username{ + height: 10%; + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + gap: 1%; +} +.firstname{ + height: 10%; + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + gap: 1%; +} +.lastname{ + height: 10%; + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + gap: 1%; +} +.email +{ + height: 10%; + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + gap: 1%; +} +.settings-text{ + margin: 0; + height: 10%; + display: flex; + align-items: center; +} +.settings-forms{ + display: flex; + flex-direction: row; + background: linear-gradient( + 94deg, + rgba(255, 255, 255, 0.04) 12.6%, + rgba(255, 255, 255, 0.02) 100.13%); + border-radius: 40px; +} +.input-box{ + width: 75%; + background: none; + border: none; + color: rgba(219, 219, 219, 0.56); + padding-left: 4%; + &:focus{ + outline: none; + } +} +#active-username, #active-firstname, #active-lastname{ + color: #DBDBDB; +} +.button-box{ + width: 25%; + background: none; + border-radius: 0 40px 40px 0; + border: none; + color: rgba(219, 219, 219, 0.56); + &:hover{ + color: rgba(219, 219, 219, 0.82); + } +} +.lower-settings-titles +{ + display: flex; + flex-direction: column; + width: 20%; + height: 100%; + gap: 1%; +} +.lower-settings-inputs +{ + display: flex; + flex-direction: column; + width: 80%; + height: 100%; + gap: 1%; +} + diff --git a/Front/kantor-angular/src/app/settings/settings.component.ts b/Front/kantor-angular/src/app/settings/settings.component.ts index 2e10eb63..afe3a643 100644 --- a/Front/kantor-angular/src/app/settings/settings.component.ts +++ b/Front/kantor-angular/src/app/settings/settings.component.ts @@ -17,8 +17,8 @@ export class SettingsComponent implements OnInit, OnDestroy { isLoggedIn: boolean = false; private authStatusSub: Subscription | undefined; isEditingUsername: boolean = false; - - + isEditingFirstName: boolean = false; + isEditingLastName: boolean = false; isProfileSelected: boolean = true; isSecuritySelected: boolean = false; isHelpSelected: boolean = false; @@ -43,7 +43,7 @@ export class SettingsComponent implements OnInit, OnDestroy { updateUserDetails(): void { if (this.isLoggedIn) { this.axiosService.request("POST", - "api/v1/auth/userinfo", + "api/v1/auth/userInfo", {}).then((response) => { this.user_name = response.data.username; this.firstname = response.data.firstName; @@ -56,12 +56,25 @@ export class SettingsComponent implements OnInit, OnDestroy { }); } } + changeUserDetails(): void { + if (this.isLoggedIn) { + this.axiosService.request("PUT", "api/v1/auth/userInfo", { + username: this.user_name, + firstName: this.firstname, + lastName: this.lastname, + email: this.email + }).then((response) => { + console.log(response); + }); + } + } updateUserOnServer(): void { if (this.isLoggedIn) { - this.axiosService.request("PUT", "api/v1/auth/userinfo", { + this.axiosService.request("PUT", "api/v1/auth/userInfo", { username: this.user_name, firstName: this.firstname, - lastName: this.lastname + lastName: this.lastname, + email: this.email }).then((response) => { console.log(response); }); @@ -78,9 +91,20 @@ export class SettingsComponent implements OnInit, OnDestroy { // if (!this.isEditingEmail) { // // Jeśli pole formularza jest wyłączone, wysyłamy dane do serwera - // this.sendDataToServer(this.email); + // this.changeUserDetails(); // } } + + toggleEditFirstName() { + this.updateUserDetails(); + this.isEditingFirstName = !this.isEditingFirstName; + } + + toggleEditLastName() { + this.updateUserDetails(); + this.isEditingLastName = !this.isEditingLastName; + } + ngOnDestroy(): void { if (this.authStatusSub) { this.authStatusSub.unsubscribe();