-
-
-
+
+
-
- {{ 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' }} |
- |
+
+
+
+
+
+ {{ 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();