Added /exchange-rates

Front/kantor-angular/src/app/app-routing.module.ts

@@ -7,6 +7,7 @@ import { CurrencyDetailComponent } from "./currency-detail/currency-detail.compo
 import { CurrencyAccountComponent } from './currency-account/currency-account.component';
 import { SettingsComponent} from "./settings/settings.component";
 import {WelcomeContentComponent} from "./welcome-content/welcome-content.component";
+import { ExchangeRatesComponent } from './exchange-rates/exchange-rates.component';
 
 
 const routes: Routes = [
@@ -17,6 +18,7 @@ const routes: Routes = [
   { path: 'currency-account', component: CurrencyAccountComponent},
   { path: 'currency/:code', component: CurrencyDetailComponent },
   { path: 'settings', component: SettingsComponent},
+  { path: 'exchange-rates', component: ExchangeRatesComponent}
 ];
 @NgModule({
 

Front/kantor-angular/src/app/app.module.ts

@@ -24,6 +24,7 @@ import { SettingsComponent } from './settings/settings.component';
 import {MatSnackBarModule} from "@angular/material/snack-bar";
 import { SidebarLeftComponent } from './sidebar-left/sidebar-left.component';
 import {NgOptimizedImage} from "@angular/common";
+import { ExchangeRatesComponent } from './exchange-rates/exchange-rates.component';
 
 
 
@@ -45,7 +46,8 @@ import {NgOptimizedImage} from "@angular/common";
     CurrencyDetailComponent,
     CurrencyChartComponent,
     SettingsComponent,
-    SidebarLeftComponent
+    SidebarLeftComponent,
+    ExchangeRatesComponent
   ],
   imports: [
     BrowserModule,

Front/kantor-angular/src/app/exchange-rates/exchange-rates.component.html

@@ -0,0 +1,27 @@
+<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">
+    <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>
+    </table>
+  </div>
+</div>

Front/kantor-angular/src/app/exchange-rates/exchange-rates.component.scss

@@ -0,0 +1,146 @@
+.table-container{
+  color: #DBDBDB;
+  font-family: "Twemoji Country Flags", "Helvetica", serif;
+
+  border-radius: 40px;
+  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%;
+}
+
+.header-table{
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+
+.inner-table {
+  overflow-y: auto;
+  max-height: 83vh;
+  padding: 20px;
+
+  &::-webkit-scrollbar {
+    width: 20px;
+    padding-right: 20px;
+    padding-top: 10%;
+    padding-bottom: 10%;
+  }
+
+  &::-webkit-scrollbar-track {
+    border-radius: 10px;
+    box-shadow: inset 0 0 10px 10px transparentize(#888, 0.5);
+    border: solid 5px transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    box-shadow: inset 0 0 10px 10px transparentize(#888, 0.5);
+    border: solid 5px transparent;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    box-shadow: inset 0 0 10px 10px #555;
+    border: solid 5px transparent;
+  }
+
+}
+
+
+th{
+  border-bottom: 2px solid rgba(255, 255, 255, 0.22);
+  //border
+  text-align: center;
+  padding: 10px;
+  vertical-align: middle;
+  margin-top: 20px;
+  margin-left: 10px;
+
+
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+
+
+td{
+  text-align: center;
+  padding: 10px;
+  vertical-align: middle;
+  //border: 1px solid #DBDBDB;
+}
+
+td, th {
+  width: 70vw;
+  text-align: center;
+  padding: 10px;
+  vertical-align: middle;
+}
+
+.chart-cell {
+  width: 22%;
+  overflow: hidden;
+}
+
+
+.currency-click {
+  text-align: center;
+  padding: 10px;
+  vertical-align: middle;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+
+  margin: 0 auto;
+  color: #DBDBDB;
+  text-decoration: none;
+  //font-size: 1.5em;
+  font-weight: bold;
+  &:hover{
+    color: #81BCCE;
+    text-decoration: none;
+  }
+}
+
+
+
+.positive {
+  color: green;
+}
+
+.negative {
+  color: red;
+}
+
+.zero {
+  color: #5fe5ee;
+}
+
+.square {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  background-color: #5fe5ee;
+  transform: rotate(45deg) translateY(-4px);
+}
+
+.arrow {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  margin-left: 5px;
+  border-style: solid;
+}
+
+.up {
+  border-width: 0 5px 10px 5px;
+  border-color: transparent transparent green transparent;
+}
+
+.down {
+  border-width: 10px 5px 0 5px;
+  border-color: red transparent transparent transparent;
+}
+

Front/kantor-angular/src/app/exchange-rates/exchange-rates.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ExchangeRatesComponent } from './exchange-rates.component';
+
+describe('ExchangeRatesComponent', () => {
+  let component: ExchangeRatesComponent;
+  let fixture: ComponentFixture<ExchangeRatesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ExchangeRatesComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ExchangeRatesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});