diff --git a/package.json b/package.json index 712021e..d5343b6 100644 --- a/package.json +++ b/package.json @@ -22,8 +22,10 @@ "@ngx-translate/core": "^12.1.2", "@ngx-translate/http-loader": "^4.0.0", "@sweetalert2/ngx-sweetalert2": "^8.0.0", + "chart.js": "^2.9.3", "leaflet": "^1.6.0", "ngx-pagination": "^5.0.0", + "ngx-skeleton-loader": "^1.2.7", "rxjs": "~6.5.4", "sweetalert2": "^9.10.2", "tailwindcss": "^1.2.0", diff --git a/src/app/api.model.ts b/src/app/api.model.ts index d630e32..061401b 100644 --- a/src/app/api.model.ts +++ b/src/app/api.model.ts @@ -43,6 +43,7 @@ export interface CongoCase { confirmed: string; recovered: string; deaths: string; + region: string; } export interface DailyReport { diff --git a/src/app/api.service.ts b/src/app/api.service.ts index dc3964b..dd6fd06 100644 --- a/src/app/api.service.ts +++ b/src/app/api.service.ts @@ -9,7 +9,7 @@ import * as Model from './api.model'; export class ApiService { readonly BASE_URL = 'https://covid19.mathdro.id/api/'; - readonly NEWS_BASE_URL = 'https://covid19news.devs-cast.com/api/'; + readonly NEWS_BASE_URL = 'https://katanga.digital/api/'; constructor(private http: HttpClient) { } @@ -19,8 +19,8 @@ export class ApiService { return this.http.get(this.BASE_URL); } - getCongoCase(): Observable { - return this.http.get(this.NEWS_BASE_URL + 'cases/1'); + getCongoCase(): Observable { + return this.http.get(this.NEWS_BASE_URL + 'cases'); } getArticles(): Observable { diff --git a/src/app/app.component.html b/src/app/app.component.html index 7870776..64686e8 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -10,7 +10,7 @@ diff --git a/src/app/components/animated/animated-digit.component.scss b/src/app/components/animated/animated-digit.component.scss index 0409c16..0d14307 100644 --- a/src/app/components/animated/animated-digit.component.scss +++ b/src/app/components/animated/animated-digit.component.scss @@ -1,10 +1,7 @@ .animated-digit { - color: white; - background: rgba(0, 0, 0, 0.2) 20%; - text-align: center; - border: 2px solid #e8cce9; - margin-top:1em; + color: black; justify-content:center; align-items: center; - font-size:32pt; + font-size:25pt; + line-height: 1; } diff --git a/src/app/pages/dashboard/dashboard.component.css b/src/app/pages/dashboard/dashboard.component.css new file mode 100644 index 0000000..b8b8312 --- /dev/null +++ b/src/app/pages/dashboard/dashboard.component.css @@ -0,0 +1,265 @@ +.tabs { + left: 50%; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + position: relative; + background: white; + padding: 50px; + padding-bottom: 80px; + width: 100%; + border-radius: 5px; + } + .tabs input[name="tab-control"] { + display: none; + } + .tabs .content section h2, + .tabs ul li label { + color: #000; + } + .tabs > ul { + text-align: center; + } + .tabs ul { + list-style-type: none; + padding-left: 0; + display: -webkit-box; + display: inline-flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + flex-direction: row; + margin-bottom: 10px; + -webkit-box-pack: justify; + justify-content: space-between; + -webkit-box-align: end; + align-items: flex-end; + flex-wrap: wrap; + } + .tabs ul li { + box-sizing: border-box; + -webkit-box-flex: 1; + flex: 1; + padding: 0 10px; + text-align: center; + border: 1px #48bb78 solid; + border-radius: 30px; + margin: 0 10px; + } + .tabs ul li label { + -webkit-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + color: #929daf; + padding: 5px auto; + overflow: hidden; + text-overflow: ellipsis; + display: block; + cursor: pointer; + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + white-space: nowrap; + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + } + .tabs ul li label br { + display: none; + } + .tabs ul li label:hover, .tabs ul li label:focus, .tabs ul li label:active { + outline: 0; + color: #000; + } + .tabs .content { + margin-top: 30px; + } + .tabs .content section { + display: none; + -webkit-animation-name: content; + animation-name: content; + -webkit-animation-direction: normal; + animation-direction: normal; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + line-height: 1.4; + } + .tabs .content section h2 { + color: #48bb78; + display: none; + } + .tabs .content section h2::after { + content: ""; + position: relative; + display: block; + width: 30px; + height: 3px; + background: #48bb78; + margin-top: 5px; + left: 1px; + } + .tabs input[name="tab-control"]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label { + cursor: default; + color: #fff; + } + .tabs input[name="tab-control"]:nth-of-type(1):checked ~ ul > li:nth-child(1) { + background-color: #48bb78; + } + .tabs input[name="tab-control"]:nth-of-type(1):checked ~ .content > section:nth-child(1) { + display: block; + } + .tabs input[name="tab-control"]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label { + cursor: default; + color: #fff; + } + .tabs input[name="tab-control"]:nth-of-type(2):checked ~ ul > li:nth-child(2) { + background-color: #48bb78; + } + .tabs input[name="tab-control"]:nth-of-type(2):checked ~ .content > section:nth-child(2) { + display: block; + } + .tabs input[name="tab-control"]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label { + cursor: default; + color: #48bb78; + } + @media (max-width: 600px) { + .tabs input[name="tab-control"]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label { + background: rgba(0, 0, 0, 0.08); + } + } + .tabs input[name="tab-control"]:nth-of-type(3):checked ~ .content > section:nth-child(3) { + display: block; + } + .tabs input[name="tab-control"]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label { + cursor: default; + color: #48bb78; + } + @media (max-width: 600px) { + .tabs input[name="tab-control"]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label { + background: rgba(0, 0, 0, 0.08); + } + } + .tabs input[name="tab-control"]:nth-of-type(4):checked ~ .content > section:nth-child(4) { + display: block; + } + @-webkit-keyframes content { + from { + opacity: 0; + -webkit-transform: translateY(5%); + transform: translateY(5%); + } + to { + opacity: 1; + -webkit-transform: translateY(0%); + transform: translateY(0%); + } + } + @keyframes content { + from { + opacity: 0; + -webkit-transform: translateY(5%); + transform: translateY(5%); + } + to { + opacity: 1; + -webkit-transform: translateY(0%); + transform: translateY(0%); + } + } + @media (max-width: 1000px) { + .tabs ul li label { + white-space: initial; + } + .tabs ul li label br { + display: initial; + } + } + @media (max-width: 600px) { + .tabs ul { + width: 100%; + } + .tabs ul li { + height: 30px; + } + .tabs ul li label span { + font-size: 12px; + } + .tabs .content { + margin-top: 20px; + } + .tabs .content section h2 { + display: block; + } + } + + + .wrap-collabsible input[type='checkbox'] { + display: none; + } + .lbl-toggle { + display: block; + + font-weight: bold; + font-size: 1.2rem; + text-align: center; + + padding: 1rem; + + color: #fff; + background: #48bb78; + + cursor: pointer; + + border-radius: 7px; + transition: all 0.25s ease-out; + } + .lbl-toggle:hover { + color: #fff; + } + .lbl-toggle::before { + content: ' '; + display: inline-block; + + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + border-left: 5px solid currentColor; + + vertical-align: middle; + margin-right: .7rem; + transform: translateY(-2px); + + transition: transform .2s ease-out; + } + .collapsible-content .content-inner { + background: rgba(146, 146, 146, 0.2); + border-bottom: 1px solid rgba(93, 93, 93, 0.45); + + border-bottom-left-radius: 7px; + border-bottom-right-radius: 7px; + padding: 1rem; + } + .collapsible-content { + max-height: 0px; + overflow: hidden; + + transition: max-height .25s ease-in-out; + } + .toggle:checked + .lbl-toggle + .collapsible-content { + max-height: 100%; + } + .toggle:checked + .lbl-toggle::before { + transform: rotate(90deg) translateX(-3px); + } + + .toggle:checked + .lbl-toggle { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + } + +.region-cases:last-child { + font-weight: bold; + background-color: #48bb784d; +} + \ No newline at end of file diff --git a/src/app/pages/dashboard/dashboard.component.html b/src/app/pages/dashboard/dashboard.component.html index cd7f0a7..fc8717f 100644 --- a/src/app/pages/dashboard/dashboard.component.html +++ b/src/app/pages/dashboard/dashboard.component.html @@ -3,78 +3,151 @@
-
-
-
{{'Situation en RDC' | translate}}
+
+
+ {{'Mise à jour'| translate}} : {{ updatedAt }}
-
-
-
-
-
{{'Confirmés' | translate}}
- - - - + + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+
{{'Tout le territoire national' | translate}}
+ {{'Mise à jour'| translate}} : {{ updatedAt }}
-
-
-
-
-
-
{{'Guérisons' | translate}}
- +
+
+
+
+
+ +
+
+
+
+
+
+

+ {{'Guérisons' | translate}} + +

+

+ {{'Confirmés' | translate}} + +

+

+ {{'Morts' | translate}} + +

+
+
+
+
+
+ + +
+
+
+
+ + + + + + + + + + + + + + + + + +
+ {{'Province' | translate}} + + {{'Confirmés' | translate}} + + {{'Guérisons' | translate}} + + {{'Morts' | translate}} +
+
+
{{ cases.region }}
+
+ 		+ {{ cases.confirmed }} + + {{ cases.recovered }} + + {{ cases.deaths }} +
+
+
+
+
-
-
-
-
-
{{'Morts' | translate}}
- + +
+
+
+
{{'Situation Globale' | translate}}
+ {{'Mise à jour'| translate}} : {{ updatedAt }}
+
+
+
+
+
+
+ +
+
+
+
+
+
+

+ {{'Guérisons' | translate}} + +

+

+ {{'Confirmés' | translate}} + +

+

+ {{'Morts' | translate}} + +

+
+
+
-
+
-
-
-
{{'Situation Globale' | translate}}
- {{'Mise à jour'| translate}} : {{ updatedAt }}
-
-
-
-
-
-
{{'Confirmés' | translate}}
-

- {{ data.confirmed.value }} -

-
-
-
-
-
-
-
{{'Guérisons' | translate}}
-

- {{ data.recovered.value }} -

-
-
-
-
-
-
-
{{'Morts' | translate}}
-

- {{ data.deaths.value }} -

-
-
-
-
-
@@ -100,5 +173,111 @@
+ +
+
{{'La presse parle de nous' | translate}}
+
+
+ + Logo CIO-Mag | Covid-19Info.cd + +
+
+ + Logo Covid Innovation | Covid-19Info.cd + +
+
+ + Logo OSISA, Open Society Initiative for Southern Africa | Covid-19Info.cd + +
+
+ + Logo Global Tamil News | Covid-19Info.cd + +
+
+ + Logo India Thailand Trade | Covid-19Info.cd + +
+
+ + Politico cd | Covid-19Info.cd + +
+
+ + Logo MediaCongo | Covid-19Info.cd + +
+
+ + Radio Okapi | Covid-19Info.cd + +
+
+ + Logo Zoom-Eco | Covid-19Info.cd + +
+
+ + Logo 7sur7 CD | Covid-19Info.cd + +
+
+ + Logo Times CD | Covid-19Info.cd + +
+
+ + Logo Pinshasa | Covid-19Info.cd + +
+
+ + Logo Les News | Covid-19Info.cd + +
+
+ + Logo Election Net | Covid-19Info.cd + +
+
+ + Logo Habari RDC | Covid-19Info.cd + +
+
+ + Logo Congo Numérique | Covid-19Info.cd + +
+
+ + Logo Actu RDC | Covid-19Info.cd + +
+
+ + Logo La Prunelle RDC Info | Covid-19Info.cd + +
+
+ + Logo Hazetu | Covid-19Info.cd + +
+
+ + Logo Provinces 26 RDC | Covid-19Info.cd + +
+
+
diff --git a/src/app/pages/dashboard/dashboard.component.ts b/src/app/pages/dashboard/dashboard.component.ts index 05f944c..be8aac4 100644 --- a/src/app/pages/dashboard/dashboard.component.ts +++ b/src/app/pages/dashboard/dashboard.component.ts @@ -13,24 +13,25 @@ import {ApiService} from 'src/app/api.service'; import sweetAlert from 'sweetalert2'; import {DomSanitizer} from '@angular/platform-browser'; import { TranslateService } from '@ngx-translate/core'; +import { Chart } from 'chart.js'; @Component({ selector: 'app-dashboard', templateUrl: './dashboard.component.html', - styles: [] + styleUrls: ['./dashboard.component.css'] }) export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit { loading: boolean; data: Dashboard; error = false; - drc: CongoCase; + drc: CongoCase[]; articles: Article[]; timer: any; title = 'Animated Count'; nums: Array = [25, 76, 48]; - @ViewChild('oneItem', { static: true }) oneItem: any; + @ViewChild('oneItem', {static: true}) oneItem: any; @ViewChildren('count') count: QueryList; constructor( @@ -38,8 +39,7 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit { private domSanitizer: DomSanitizer, public translate: TranslateService, private elRef: ElementRef - ) { - } + ) {} get updatedAt() { return (new Date(this.data.lastUpdate)).toLocaleString('fr-FR'); @@ -58,9 +58,30 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit { } loadDRC() { + let totalConfirmed = 0; + let totalRecovered = 0; + let totalDeaths = 0; + this.loading = true; this.apiService.getCongoCase() - .subscribe(data => this.drc = data); + .subscribe(data => { + this.drc = data; + + this.drc.forEach((region) => { + totalConfirmed += Number(region.confirmed); + totalRecovered += Number(region.recovered); + totalDeaths += Number(region.deaths); + }); + + this.drc.push({ + confirmed: totalConfirmed.toString(), + recovered: totalRecovered.toString(), + deaths: totalDeaths.toString(), + region: 'Total' + }); + + console.log(this.drc); + }); } load() { @@ -95,6 +116,92 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit { } ngAfterViewInit() { + // tslint:disable-next-line:only-arrow-functions + setTimeout(function() { + + document.getElementById('item-loading-chart').style.display = 'none'; + document.getElementById('item-loading-chart-world').style.display = 'none'; + const configDRC = { + data: { + datasets: [{ + data: [ + document.getElementById('drc-confirmed').getAttribute('ng-reflect-digit'), + document.getElementById('drc-recovered').getAttribute('ng-reflect-digit'), + document.getElementById('drc-deaths').getAttribute('ng-reflect-digit'), + ], + backgroundColor: [ + '#ff00008f', + '#48bb788f', + '#0000008f', + ], + label: 'Situation de la RDC' + }], + labels: [ + 'Cas confirmés', + 'Guérisons', + 'Morts' + ] + }, + options: { + responsive: true, + legend: { + position: 'left', + }, + scale: { + ticks: { + beginAtZero: true + }, + reverse: false + }, + animation: { + animateRotate: false, + animateScale: true + } + } + }; + const configWorld = { + data: { + datasets: [{ + data: [ + document.getElementById('world-confirmed').getAttribute('ng-reflect-digit'), + document.getElementById('world-recovered').getAttribute('ng-reflect-digit'), + document.getElementById('world-deaths').getAttribute('ng-reflect-digit'), + ], + backgroundColor: [ + '#ff00008f', + '#48bb788f', + '#0000008f', + ], + label: 'Situation du Monde' + }], + labels: [ + 'Cas confirmés', + 'Guérisons', + 'Morts' + ] + }, + options: { + responsive: true, + legend: { + position: 'left', + }, + scale: { + ticks: { + beginAtZero: true + }, + reverse: false + }, + animation: { + animateRotate: false, + animateScale: true + } + } + }; + // tslint:disable-next-line:no-unused-expression + new Chart.PolarArea(document.getElementById('canvas'), configDRC); + // tslint:disable-next-line:no-unused-expression + new Chart.PolarArea(document.getElementById('canvas-world'), configWorld); + }, 5000); } animateCount() { diff --git a/src/app/pages/dashboard/dashboard.module.ts b/src/app/pages/dashboard/dashboard.module.ts index 4b93919..4badd8a 100644 --- a/src/app/pages/dashboard/dashboard.module.ts +++ b/src/app/pages/dashboard/dashboard.module.ts @@ -5,6 +5,7 @@ import {DashboardComponent} from './dashboard.component'; import {ComponentsModule} from '../../components/components.module'; import { TranslateModule } from '@ngx-translate/core'; import { AnimatedDigitComponent } from '../../components/animated/animated-digit.component'; +import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; @NgModule({ @@ -17,6 +18,7 @@ import { AnimatedDigitComponent } from '../../components/animated/animated-digit DashboardRoutingModule, ComponentsModule, TranslateModule, + NgxSkeletonLoaderModule ] }) export class DashboardModule { diff --git a/src/assets/press/7sur7-cd.png b/src/assets/press/7sur7-cd.png new file mode 100644 index 0000000..3b77147 Binary files /dev/null and b/src/assets/press/7sur7-cd.png differ diff --git a/src/assets/press/actu-rdc.png b/src/assets/press/actu-rdc.png new file mode 100644 index 0000000..49d1593 Binary files /dev/null and b/src/assets/press/actu-rdc.png differ diff --git a/src/assets/press/cio-mag.png b/src/assets/press/cio-mag.png new file mode 100644 index 0000000..09b98cb Binary files /dev/null and b/src/assets/press/cio-mag.png differ diff --git a/src/assets/press/congo-numerique.png b/src/assets/press/congo-numerique.png new file mode 100644 index 0000000..ca29bb4 Binary files /dev/null and b/src/assets/press/congo-numerique.png differ diff --git a/src/assets/press/covid-innovation.png b/src/assets/press/covid-innovation.png new file mode 100644 index 0000000..e7abd9b Binary files /dev/null and b/src/assets/press/covid-innovation.png differ diff --git a/src/assets/press/election-net.png b/src/assets/press/election-net.png new file mode 100644 index 0000000..f834e23 Binary files /dev/null and b/src/assets/press/election-net.png differ diff --git a/src/assets/press/global-tamil-news.png b/src/assets/press/global-tamil-news.png new file mode 100644 index 0000000..3cdc7d1 Binary files /dev/null and b/src/assets/press/global-tamil-news.png differ diff --git a/src/assets/press/habari-rdc.png b/src/assets/press/habari-rdc.png new file mode 100644 index 0000000..6c61d94 Binary files /dev/null and b/src/assets/press/habari-rdc.png differ diff --git a/src/assets/press/hazetu.png b/src/assets/press/hazetu.png new file mode 100644 index 0000000..43a47c7 Binary files /dev/null and b/src/assets/press/hazetu.png differ diff --git a/src/assets/press/indo-thai-trade.png b/src/assets/press/indo-thai-trade.png new file mode 100644 index 0000000..2f4e029 Binary files /dev/null and b/src/assets/press/indo-thai-trade.png differ diff --git a/src/assets/press/la-prunelle-rdc.png b/src/assets/press/la-prunelle-rdc.png new file mode 100644 index 0000000..98fe5c1 Binary files /dev/null and b/src/assets/press/la-prunelle-rdc.png differ diff --git a/src/assets/press/les-news.png b/src/assets/press/les-news.png new file mode 100644 index 0000000..0390da7 Binary files /dev/null and b/src/assets/press/les-news.png differ diff --git a/src/assets/press/mediacongo.png b/src/assets/press/mediacongo.png new file mode 100644 index 0000000..5fccb7d Binary files /dev/null and b/src/assets/press/mediacongo.png differ diff --git a/src/assets/press/osisa.png b/src/assets/press/osisa.png new file mode 100644 index 0000000..3d0dfed Binary files /dev/null and b/src/assets/press/osisa.png differ diff --git a/src/assets/press/pinshasa.png b/src/assets/press/pinshasa.png new file mode 100644 index 0000000..fc8f781 Binary files /dev/null and b/src/assets/press/pinshasa.png differ diff --git a/src/assets/press/politico-cd.png b/src/assets/press/politico-cd.png new file mode 100644 index 0000000..a5a8500 Binary files /dev/null and b/src/assets/press/politico-cd.png differ diff --git a/src/assets/press/provinces-26-rdc.png b/src/assets/press/provinces-26-rdc.png new file mode 100644 index 0000000..d40e0dd Binary files /dev/null and b/src/assets/press/provinces-26-rdc.png differ diff --git a/src/assets/press/radio-okapi.png b/src/assets/press/radio-okapi.png new file mode 100644 index 0000000..a3c3cf3 Binary files /dev/null and b/src/assets/press/radio-okapi.png differ diff --git a/src/assets/press/times.png b/src/assets/press/times.png new file mode 100644 index 0000000..b31f861 Binary files /dev/null and b/src/assets/press/times.png differ diff --git a/src/assets/press/zoom-eco.png b/src/assets/press/zoom-eco.png new file mode 100644 index 0000000..3ae72cf Binary files /dev/null and b/src/assets/press/zoom-eco.png differ diff --git a/src/index.html b/src/index.html index d8bd8ed..7518370 100644 --- a/src/index.html +++ b/src/index.html @@ -10,8 +10,8 @@ - - + +