Skip to content

Commit

Permalink
settings and exchange-rates changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@Zaikouu
Zaikouu committed Jun 4, 2024
1 parent 7198ab2 commit 4d69c93
Show file tree
Hide file tree
Showing 5 changed files with 257 additions and 42 deletions.
46 changes: 24 additions & 22 deletions Front/kantor-angular/src/app/exchange-rates/exchange-rates.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,29 @@
<div class="table-container">
<table>
<tr class="header">
<th>Waluta</th>
<th>Obecna Cena</th>
<th>7D</th>
<th>1M</th>
<th>3M</th>
<th>12M</th>
<th style="width: 23%;">Wykres 1M</th>
</tr>
</table>

<div class="inner-table">
<div class="content-container">
<div class="table-container">
<table>
<tr *ngFor="let currency of exchangeRatesChanges[30]; let i = index">
<td> <div class="currency-click"[routerLink]="['/currency', currency.from]" ><h2>{{ currencyFlags[currency.from] }} </h2> {{ currency.from }} {{ currencyNames[currency.from] }} </div> </td>
<td>{{ currency.rate }}</td>
<td [ngClass]="getChangeClass(exchangeRatesChanges[7][i].change)">{{ exchangeRatesChanges[7][i].change | number:'1.4-4' }}</td>
<td [ngClass]="getChangeClass(exchangeRatesChanges[30][i].change)">{{ exchangeRatesChanges[30][i].change | number:'1.4-4' }}</td>
<td [ngClass]="getChangeClass(exchangeRatesChanges[90][i].change)">{{ exchangeRatesChanges[90][i].change | number:'1.4-4' }}</td>
<td [ngClass]="getChangeClass(exchangeRatesChanges[365][i].change)">{{ exchangeRatesChanges[365][i].change | number:'1.4-4' }}</td>
<td class="chart-cell"><canvas id="{{ 'chart' + i }}"></canvas></td>
<tr class="header">
<th class="header-currency">Waluta</th>
<th class="header-text">Obecna Cena</th>
<th class="header-text">7D</th>
<th class="header-text">1M</th>
<th class="header-text">3M</th>
<th class="header-text">12M</th>
<th class="header-text" style="width: 30%;">Wykres 1M</th>
</tr>
</table>

<div class="inner-table">
<table class="rows">
<tr class="one-row" *ngFor="let currency of exchangeRatesChanges[30]; let i = index">
<td class="currency-column"> <div class="currency-click"[routerLink]="['/currency', currency.from]" ><h2>{{ currencyFlags[currency.from] }} </h2> <p class="row-text">{{ currency.from }} {{ currencyNames[currency.from] }}</p> </div> </td>
<td class="each-column">{{ currency.rate }}</td>
<td class="each-column" [ngClass]="getChangeClass(exchangeRatesChanges[7][i].percentageChange)">{{ exchangeRatesChanges[7][i].percentageChange | number:'1.2-2' }}%</td>
<td class="each-column" [ngClass]="getChangeClass(exchangeRatesChanges[30][i].percentageChange)">{{ exchangeRatesChanges[30][i].percentageChange | number:'1.2-2' }}%</td>
<td class="each-column" [ngClass]="getChangeClass(exchangeRatesChanges[90][i].percentageChange)">{{ exchangeRatesChanges[90][i].percentageChange | number:'1.2-2' }}%</td>
<td class="each-column" [ngClass]="getChangeClass(exchangeRatesChanges[365][i].percentageChange)">{{ exchangeRatesChanges[365][i].percentageChange | number:'1.2-2' }}%</td>
<td class="chart-cell"><canvas class="wykres" id="{{ 'chart' + i }}"></canvas></td>
</tr>
</table>
</div>
</div>
</div>
51 changes: 44 additions & 7 deletions Front/kantor-angular/src/app/exchange-rates/exchange-rates.component.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -6,20 +14,21 @@
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{
position: sticky;
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;
Expand Down Expand Up @@ -79,8 +88,9 @@ td, th {
}

.chart-cell {
width: 22%;
overflow: hidden;
width: 30%;
display:flex;
justify-content: center;
}


Expand Down Expand Up @@ -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%;
}
59 changes: 56 additions & 3 deletions Front/kantor-angular/src/app/settings/settings.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,63 @@ <h1>Ustawienia</h1>
</div>
</div>
<div class="lower-settings-container">

<div class="selected-profile" *ngIf="isProfileSelected">
<!-- Profile settings go here -->
<p> Profil </p>
<div class="lower-settings-titles">
<p class="settings-text">Nazwa użytkownika:</p>
<p class="settings-text">Imię:</p>
<p class="settings-text">Nazwisko:</p>
<p class="settings-text">Email:</p>
</div>
<div class="lower-settings-inputs">
<div class="username" *ngIf="!isEditingUsername">
<form class="settings-forms">
<input class="input-box" [readonly]="true" [(ngModel)]="user_name" name="username">
<button class="button-box" (click)="toggleEditUsername()">Zmień</button>
</form>
</div>
<div class="username" *ngIf="isEditingUsername">
<form class="settings-forms" (ngSubmit)="updateUserOnServer()">
<input id="active-username" class="input-box" [(ngModel)]="user_name" name="username">
<button class="button-box" type="submit">Zapisz</button>
</form>
</div>
<div class="firstname" *ngIf="!isEditingFirstName">
<form class="settings-forms">
<input class="input-box" [readonly]="true" [(ngModel)]="firstname" name="firstname">
<button class="button-box" (click)="toggleEditFirstName()">Zmień</button>
</form>
</div>
<div class="firstname" *ngIf="isEditingFirstName">
<form class="settings-forms" (ngSubmit)="updateUserOnServer()">
<input id="active-firstname" class="input-box" [(ngModel)]="firstname" name="firstname">
<button class="button-box" type="submit">Zapisz</button>
</form>
</div>
<div class="lastname" *ngIf="!isEditingLastName">
<form class="settings-forms">
<input class="input-box" [readonly]="true" [(ngModel)]="lastname" name="lastname">
<button class="button-box" (click)="toggleEditLastName()">Zmień</button>
</form>
</div>
<div class="lastname" *ngIf="isEditingLastName">
<form class="settings-forms" (ngSubmit)="updateUserOnServer()">
<input id="active-lastname" class="input-box" [(ngModel)]="lastname" name="lastname">
<button class="button-box" type="submit">Zapisz</button>
</form>
</div>
<div class="email" *ngIf="!isEditingEmail">
<form class="settings-forms">
<input class="input-box" [readonly]="true" [(ngModel)]="email" name="email">
<button class="button-box" (click)="toggleEditEmail()">Zmień</button>
</form>
</div>
<div class="email" *ngIf="isEditingEmail">
<form class="settings-forms" (ngSubmit)="updateUserOnServer()">
<input id="active-email" class="input-box" [(ngModel)]="email" name="email">
<button class="button-box" (click)="updateUserOnServer()" type="submit">Zapisz</button>
</form>
</div>
</div>
</div>

<div class="selected-security" *ngIf="isSecuritySelected">
Expand Down
107 changes: 103 additions & 4 deletions Front/kantor-angular/src/app/settings/settings.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand All @@ -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%);
}
Expand Down Expand Up @@ -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% {
Expand All @@ -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%;
}

Loading

0 comments on commit 4d69c93

Please sign in to comment.