Because since now the API we are using got discontinue, not we have s…

…tatic files with the last time fetched data

.gitignore

@@ -47,3 +47,7 @@ Thumbs.db
 .angular/cache/*
 *.pack
 
+# ignore dist folder
+/dist
+
+

package.json

@@ -11,23 +11,26 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^15.2.0",
-    "@angular/cdk": "^15.2.3",
+    "@angular/cdk": "^15.2.7",
     "@angular/common": "^15.2.0",
     "@angular/compiler": "^15.2.0",
     "@angular/core": "^15.2.0",
-    "@angular/elements": "^15.2.5",
+    "@angular/flex-layout": "^15.0.0-beta.42",
     "@angular/forms": "^15.2.0",
-    "@angular/material": "^15.2.3",
+    "@angular/material": "^15.2.7",
     "@angular/platform-browser": "^15.2.0",
     "@angular/platform-browser-dynamic": "^15.2.0",
     "@angular/router": "^15.2.0",
     "@fortawesome/angular-fontawesome": "^0.12.1",
     "@fortawesome/fontawesome-free": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
-    "apexcharts": "^3.37.3",
-    "ng-apexcharts": "^1.7.4",
+    "apexcharts": "^3.41.0",
+    "ng-apexcharts": "^1.7.7",
+    "primeflex": "^3.3.0",
+    "primeicons": "^6.0.1",
+    "primeng": "^15.4.1",
     "rxjs": "~7.8.0",
-    "sass": "^1.59.3",
+    "sass": "^1.63.6",
     "tslib": "^2.3.0",
     "zone.js": "~0.12.0"
   },

src/app/app.module.ts

@@ -14,6 +14,9 @@ import {NumberWithSignPipe} from "./covid-case/pipes/number-with-sign.pipe";
 import {CovidService} from "./covid-case/service/covid-case.service";
 import {CountriesService} from "./country/countries.service";
 import {NgApexchartsModule} from "ng-apexcharts";
+import { MessagesModule } from "primeng/messages";
+import {MessageModule} from "primeng/message";
+import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
 
 @NgModule({
   declarations: [
@@ -30,7 +33,10 @@ import {NgApexchartsModule} from "ng-apexcharts";
     MatIconModule,
     HttpClientModule,
     MatCardModule,
-    NgApexchartsModule
+    NgApexchartsModule,
+    MessagesModule,
+    MessageModule,
+    BrowserAnimationsModule
   ],
   providers: [
     CovidService,

src/app/covid-case/covid-case.component.html

@@ -1,3 +1,4 @@
+<p-messages [value]="msgs"></p-messages>
 <div class="container-fluid covid-19-cases">
   <div class="row">
     <div class="col-12 col-md-6 col-lg-3 countries p-0">
@@ -8,7 +9,9 @@
         </div>
         <div class="card-body">
           <div *ngFor="let covidCase of covidCases">
-            <div class="country-block" (click)="onCountrySelect(covidCase)">
+            <div class="country-block"
+                 [ngClass]="{'selected-country': covidCase.country === selectedCountry?.country}"
+                 (click)="onCountrySelect(covidCase)">
               <div class="country">
                 <img *ngIf="covidCase?.countryInfo?.flag" src="assets/images/flag/flag_placeholder.png" [class]="'mr-2 flag flag-' + covidCase?.countryInfo?.iso2?.toLowerCase()"  alt="Flag of {{covidCase?.country}}"/>
                 <span>{{covidCase.country}}</span>
@@ -79,7 +82,7 @@
         </div>
       </div>
     </div>
-    <div class="col-12 col-lg-4 p-0">
+    <div class="col-12 col-lg-4 p-0 charts">
       <div class="card">
         <div class="card-header">
           <span class="fas fa-chart-line mr-2"></span>

src/app/covid-case/covid-case.component.scss

@@ -7,7 +7,7 @@
       padding: 5px;
       cursor: pointer;
 
-      &:hover {
+      &:hover, &.selected-country {
         background-color: #f5f5f5;
         color: black;
       }
@@ -46,6 +46,11 @@
     height: auto;
   }
 
+  #chart {
+    display: flex;
+    justify-content: center;
+  }
+
   .card-header {
     background-color: #808080;
     font-size: 20px;

src/app/covid-case/covid-case.component.ts

@@ -7,6 +7,7 @@ import { Country } from '../country/countries.interface';
 import { AllCovidCase } from './model/all-covid-case.model';
 import { ChartComponent } from 'ng-apexcharts';
 import { ChartOptions } from './model/chart-options.model';
+import { Message } from 'primeng/api';
 
 @Component({
   selector: 'app-covid-case',
@@ -20,6 +21,7 @@ export class CovidCaseComponent implements OnInit, OnDestroy {
   public selectedCountry: CovidCase | undefined;
   @ViewChild('chart') chart: ChartComponent | undefined;
   public chartOptions: Partial<ChartOptions> | undefined;
+  public msgs: Message[] = [];
   private unsubscribe$: Subject<void> = new Subject();
 
   constructor(
@@ -28,6 +30,7 @@ export class CovidCaseComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit() {
+    this.showWarningMessage();
     this.getCountries();
     this.getAllCovidData();
   }
@@ -113,5 +116,13 @@ export class CovidCaseComponent implements OnInit, OnDestroy {
       });
   }
 
+  private showWarningMessage(): void {
+    this.msgs = [];
+    this.msgs.push({
+      severity: 'warn',
+      summary: 'Important Notice',
+      detail: 'Apologies, but our live data API for tracking COVID-19 has been discontinued.'
+    });
+  }
 
 }

src/app/covid-case/service/covid-case.service.ts

@@ -7,8 +7,8 @@ import {AllCovidCase} from "../model/all-covid-case.model";
 @Injectable()
 export class CovidService {
 
-  private url = 'https://corona.lmao.ninja/v2/countries';
-  private all_cases_url = 'https://corona.lmao.ninja/v2/all';
+  private url = /*'https://corona.lmao.ninja/v2/countries'*/'assets/api/countries.json';
+  private all_cases_url = /*'https://corona.lmao.ninja/v2/all'*/'assets/api/all.json';
 
   constructor(private http: HttpClient) { }
 

src/assets/api/all.json

@@ -0,0 +1 @@
+{"updated":1688093297269,"cases":690920090,"todayCases":9,"deaths":6895422,"todayDeaths":0,"recovered":663448471,"todayRecovered":7579,"active":20576197,"critical":37335,"casesPerOneMillion":88639,"deathsPerOneMillion":884.6,"tests":6996566417,"testsPerOneMillion":880632.29,"population":7944935131,"oneCasePerPeople":0,"oneDeathPerPeople":0,"oneTestPerPeople":0,"activePerOneMillion":2589.85,"recoveredPerOneMillion":83505.84,"criticalPerOneMillion":4.7,"affectedCountries":231}

src/styles.scss

@@ -4,6 +4,11 @@
 @import 'theme';
 @import "assets/style/flags.css";
 
+/* PrimeNG */
+@import "../node_modules/primeng/resources/primeng.min.css";
+@import "../node_modules/primeflex/primeflex.scss";
+@import "../node_modules/primeicons/primeicons.css";
+
 /* You can add global styles to this file, and also import other style files */
 
 
@@ -49,3 +54,88 @@ footer {
   padding: 50px;
   background: mat-color($primary);
 }
+
+.p-message {
+  margin: 1rem 0;
+  border-radius: 4px;
+}
+.p-message .p-message-wrapper {
+  padding: 1rem 1.5rem;
+}
+.p-message .p-message-close {
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  background: transparent;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-message .p-message-close:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+.p-message .p-message-close:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #a6e8f0;
+}
+.p-message.p-message-info {
+  background: #B3E5FC;
+  border: solid #0891cf;
+  border-width: 0 0 0 6px;
+  color: #044868;
+}
+.p-message.p-message-info .p-message-icon {
+  color: #044868;
+}
+.p-message.p-message-info .p-message-close {
+  color: #044868;
+}
+.p-message.p-message-success {
+  background: #C8E6C9;
+  border: solid #439446;
+  border-width: 0 0 0 6px;
+  color: #224a23;
+}
+.p-message.p-message-success .p-message-icon {
+  color: #224a23;
+}
+.p-message.p-message-success .p-message-close {
+  color: #224a23;
+}
+.p-message.p-message-warn {
+  background: #FFECB3;
+  border: solid #d9a300;
+  border-width: 0 0 0 6px;
+  color: #6d5100;
+}
+.p-message.p-message-warn .p-message-icon {
+  color: #6d5100;
+}
+.p-message.p-message-warn .p-message-close {
+  color: #6d5100;
+}
+.p-message.p-message-error {
+  background: #FFCDD2;
+  border: solid #e60017;
+  border-width: 0 0 0 6px;
+  color: #73000c;
+}
+.p-message.p-message-error .p-message-icon {
+  color: #73000c;
+}
+.p-message.p-message-error .p-message-close {
+  color: #73000c;
+}
+.p-message .p-message-text {
+  font-size: 1rem;
+  font-weight: 500;
+}
+.p-message .p-message-icon {
+  font-size: 1.5rem;
+  margin-right: 0.5rem;
+}
+.p-message .p-message-summary {
+  font-weight: 700;
+}
+.p-message .p-message-detail {
+  margin-left: 0.5rem;
+}