add liste lieu et design

src/app/app-routing.module.ts

@@ -4,6 +4,7 @@ import { CreateCentreComponent } from './centre/create-centre/create-centre.comp
 import { ListeCentreComponent } from './centre/liste-centre/liste-centre.component';
 import { CreateLieuComponent } from './lieu/create-lieu/create-lieu.component';
 import { DetailLieuComponent } from './lieu/detail-lieu/detail-lieu.component';
+import { ListeLieuComponent } from './lieu/liste-lieu/liste-lieu.component';
 import { CreateComponent } from './personne/create/create.component';
 import { DetailPersonneComponent } from './personne/detail-personne/detail-personne.component';
 import { TdbComponent } from './tdb/tdb.component';
@@ -14,7 +15,7 @@ import { CreateVaccinComponent } from './vaccins/create-vaccin/create-vaccin.com
 const routes: Routes = [
   { path: '', redirectTo: 'tdb', pathMatch: 'full' },
   { path: 'det', component: DetailPersonneComponent },
-  { path: 'detLieux', component: DetailLieuComponent },
+  { path: 'lieux/details/:id', component: DetailLieuComponent },
   { path: 'listeTest', component: ListeTestComponent },
   {
     path: 'person',
@@ -43,6 +44,10 @@ const routes: Routes = [
   {
     path: 'centre',
     component: ListeCentreComponent,
+  },
+  {
+    path: 'places',
+    component: ListeLieuComponent,
   }
 ];
 

src/app/app.component.html

@@ -202,6 +202,15 @@
                   <span id="tdb" class="link">Ajout</span>
                 </a>
               </li>
+              <li>
+                <a
+                  [routerLink]="['/places']"
+                  routerLinkActive="active"
+                  queryParamsHandling="merge"
+                >
+                  <span id="tdb" class="link">Liste</span>
+                </a>
+              </li>
             </ul>
           </mat-expansion-panel>
         </mat-accordion>

src/app/app.component.scss

@@ -221,7 +221,7 @@
   }
   .mat-expansion-panel-header-title {
     color: #707585;
-    font-size: 14px;
+    font-size: .8rem;
     font-weight: 500;
     font-family: "Poppins", sans-serif;
   }

src/app/app.module.ts

@@ -33,6 +33,7 @@ import { NgxQRCodeModule } from '@techiediaries/ngx-qrcode';
 import { MatInputModule } from '@angular/material/input';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { ListeCentreComponent } from './centre/liste-centre/liste-centre.component';
+import { ListeLieuComponent } from './lieu/liste-lieu/liste-lieu.component';
 
 @NgModule({
   declarations: [
@@ -50,6 +51,7 @@ import { ListeCentreComponent } from './centre/liste-centre/liste-centre.compone
     DetailTestComponent,
     ListeTestComponent,
     ListeCentreComponent,
+    ListeLieuComponent,
   ],
   imports: [
     BrowserModule,

src/app/lieu/detail-lieu/detail-lieu.component.html

@@ -1,6 +1,13 @@
-<div *ngFor="let a of lieux">
-  {{ a.nom_lieu }}
-  {{ a.adresse_lieu }}
-  {{ a.coordonnees_lieu }}
-</div>
-Lieux :{{ lieux?.length }}
+<h1>
+  {{ lieux!.nom_lieu }}
+  {{ lieux!.adresse_lieu }}
+  {{ lieux!.coordonnees_lieu }}
+</h1>
+<div *ngFor="let item of histoToDisp" >
+  {{
+    item.date_passage | date: 'dd/MM/yyyy'
+  }}
+  {{
+    item.personne.nom
+  }}
+</div>

src/app/lieu/detail-lieu/detail-lieu.component.ts

@@ -1,5 +1,10 @@
+import { Personne } from 'src/app/models/personne';
+import { PersonneServiceService } from 'src/app/services/personne-service.service';
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Historique, HistoriqueToDisplay } from 'src/app/models/historique';
 import { Lieu } from 'src/app/models/lieux';
+import { HistoriqueService } from 'src/app/services/historique.service';
 import { LieuxService } from 'src/app/services/lieux.service';
 
 @Component({
@@ -8,19 +13,34 @@ import { LieuxService } from 'src/app/services/lieux.service';
   styleUrls: ['./detail-lieu.component.scss'],
 })
 export class DetailLieuComponent implements OnInit {
-  lieux: Lieu[] | undefined;
+  lieux: Lieu | undefined;
+  historiques: Historique[] = [];
+  histoToDisp: HistoriqueToDisplay[] = [];
 
-  constructor(private lieuService: LieuxService) {}
+  constructor(private lieuService: LieuxService,private activatedRoute: ActivatedRoute,private router: Router,private historiqueService: HistoriqueService, private personneService: PersonneServiceService) {}
 
   ngOnInit(): void {
-    this.getLieux();
-  }
-
-  getLieux() {
-    this.lieuService.getLieux().subscribe((data: any) => {
-      this.lieux = data.docs;
-      console.log(data);
-      console.log(this.lieux);
+    this.activatedRoute.params.subscribe(params => {
+      let id = params['id'];
+      this.lieuService.getLieu(id).subscribe((data: any) => {
+        this.lieux = data;
+        console.log(data);
+        this.historiqueService.getHistoriqueByLieux(this.lieux!._id).subscribe((data: any) => {
+          this.historiques = data;
+          this.historiques.forEach(element => {
+            this.personneService.getPersonne(element.personne_id).subscribe((data: Personne) => {
+              var histo: HistoriqueToDisplay = {
+                personne: data,
+                _id: element._id,
+                date_passage: element.date_passage,
+                lieu_id: element.lieu_id,
+              } 
+              this.histoToDisp.push(histo);
+            });
+          });
+          console.log(data);
+        });
+      });
     });
   }
 }

src/app/lieu/liste-lieu/liste-lieu.component.html

@@ -0,0 +1,48 @@
+<!-- <table>
+    <thead>
+        <tr>
+        <th>_id</th>
+        <th>nom_lieu</th>
+        <th>adresse_lieu</th>
+        <th>statut_lieu</th>
+        <th>Pays</th>
+        <th>coordonnees_lieu</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr *ngFor="let lieu of lieux">
+        <td>{{ lieu._id }}</td>
+        <td>{{ lieu.nom_lieu }}</td>
+        <td>{{ lieu.adresse_lieu }}</td>
+        <td>{{ lieu.statut_lieu }}</td>
+        <td>{{ lieu.coordonnees_lieu }}</td>
+        <td>
+            <button (click)="details(lieu._id)">Details</button>
+        </td>
+        </tr>
+    </tbody>
+</table> -->
+<ol class="articles">
+  <li
+    class="articles__article"
+    style="--animation-order: 1"
+    *ngFor="let lieu of lieux"
+  >
+    <a class="articles__link" (click)="details(lieu._id)">
+      <div class="articles__content articles__content--lhs">
+        <h2 class="articles__title">{{ lieu.nom_lieu }}</h2>
+        <div class="articles__footer">
+          <p>{{ lieu.adresse_lieu }}</p>
+          <!-- <time>1 Jan 2020</time> -->
+        </div>
+      </div>
+      <div class="articles__content articles__content--rhs" aria-hidden="true">
+        <h2 class="articles__title">{{ lieu.nom_lieu }}</h2>
+        <div class="articles__footer">
+          <p>{{ lieu.adresse_lieu }}</p>
+          <!-- <time>1 Jan 2020</time> -->
+        </div>
+      </div></a
+    >
+  </li>
+</ol>

src/app/lieu/liste-lieu/liste-lieu.component.scss

@@ -0,0 +1,116 @@
+
+  *, :after, :before {
+    box-sizing: border-box;
+    margin: 0;
+  }
+
+.articles {
+    margin: calc(8px*2) auto calc(8px*5);
+    display: grid;
+    grid-row-gap: calc(8px*8);
+    grid-column-gap: calc(8px*6);
+    grid-template-columns: repeat(auto-fit,minmax(calc(8px*35),1fr));
+    justify-items: center;
+  }
+
+  .articles__article {
+    cursor: pointer;
+    display: block;
+    position: relative;
+    animation-name: animateIn;
+    animation-duration: .35s;
+    animation-delay: calc(var(--animation-order)*100ms);
+    animation-fill-mode: both;
+    animation-timing-function: ease-in-out;
+  }
+
+  .articles__article:before {
+    content: "";
+    position: absolute;
+    top: calc(8px*-2);
+    left: calc(8px*-2);
+    border: 2px dashed #0DB28A;
+    background-image: repeating-linear-gradient(-24deg,transparent,transparent 4px,rgba(255,255,255,.5) 0, rgba(255,255,255,.5) 5px);
+    z-index: -1;
+  }
+
+  .articles__article,
+  .articles__article:before {
+    width: calc(8px*35);
+    height: calc(8px*35);
+  }
+
+  .articles__link {
+    background-color: #0DB28A;
+    border: 2px solid #fff;
+    display: block;
+    width: 100%;
+    height: 100%;
+    perspective: 1000px;
+  }
+
+  .articles__link:after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    right: calc(8px*3);
+    width: calc(8px*2);
+    height: calc(8px*2);
+    margin-top: calc(8px*-1);
+    clip-path: polygon(75% 0,100% 50%,75% 100%,0 100%,25% 50%,0 0);
+    -webkit-clip-path: polygon(75% 0,100% 50%,75% 100%,0 100%,25% 50%,0 0);
+    background-color: #fff;
+    opacity: 0;
+    transition: opacity .5s ease-in,transform .3s ease-in-out 0ms;
+  }
+
+  .articles__content {
+    background-color: #fff;
+    color: #1a1a1a;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    padding: calc(8px*2);
+    display: flex;
+    flex-direction: column;
+    border: 2px solid #0DB28A;
+  }
+
+  .articles__content--lhs {
+    clip-path: polygon(0 0,51% 0,51% 100%,0 100%);
+    -webkit-clip-path: polygon(0 0,51% 0,51% 100%,0 100%);
+  }
+
+  .articles__content--rhs {
+    clip-path: polygon(50% 0,100% 0,100% 100%,50% 100%);
+    -webkit-clip-path: polygon(50% 0,100% 0,100% 100%,50% 100%);
+    transition: transform .5s ease-in-out,background-color .4s ease-in-out;
+  }
+
+  .articles__title {
+    font-size: calc(8px*4);
+    line-height: 1.125;
+    font-weight: 700;
+    letter-spacing: -.02em;
+  }
+
+  .articles__footer {
+    margin-top: auto;
+    font-size: calc(8px*2);
+    line-height: calc(8px*2);
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .articles__link:hover .articles__content--rhs {
+    background-color: #f5f5f5;
+    transform: rotateY(-50deg);
+  }
+
+  .articles__link:hover:after {
+    opacity: 1;
+    transform: translateX(calc(8px*1.5));
+    transition: opacity .5s ease-in,transform .3s ease-in-out .25s;
+  }

src/app/lieu/liste-lieu/liste-lieu.component.ts

@@ -0,0 +1,29 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Lieu } from 'src/app/models/lieux';
+import { LieuxService } from 'src/app/services/lieux.service';
+
+@Component({
+  selector: 'app-liste-lieu',
+  templateUrl: './liste-lieu.component.html',
+  styleUrls: ['./liste-lieu.component.scss']
+})
+export class ListeLieuComponent implements OnInit {
+  lieux: Lieu[] =  [];
+
+  constructor(private lieuService: LieuxService,private route: ActivatedRoute,private router: Router ) { }
+
+  ngOnInit(): void {
+    this.getLieux();
+  }
+
+  getLieux() {
+    this.lieuService.getLieux().subscribe((data: any) => {
+      this.lieux = data.docs;
+    });
+  }
+
+  details(lieu_id: String) {
+    this.router.navigate(['/lieux/details', lieu_id]);
+  }
+}

src/app/models/historique.ts

@@ -1,6 +1,14 @@
+import { Personne } from 'src/app/models/personne';
 export interface Historique {
   _id: String;
   lieu_id: String;
   personne_id: String;
   date_passage: Date;
 }
+
+export interface HistoriqueToDisplay{
+  _id: String;
+  lieu_id: String;
+  personne: Personne;
+  date_passage: Date;
+}

src/app/services/historique.service.ts

@@ -19,6 +19,10 @@ export class HistoriqueService {
     return this.http.get<Historique>(this.configUrl + 'historique/' + id);
   }
 
+  getHistoriqueByLieux(id:String){
+    return this.http.get<Historique[]>(this.configUrl + 'historiqueLieux/' + id);
+  }
+
   checkIfMayBe(historique: Historique, dateTest: Date) {
     var dateHistorique = historique.date_passage;
     var dateHistoriquePossible = new Date(

src/app/tdb/tdb.component.html

@@ -29,7 +29,7 @@ <h1>Tableau des résultats No-Vid</h1>
 <div class="graphe" *ngIf="this.saleData.length == 4">
   <div>
     <ngx-charts-bar-vertical
-      [view]="[1250, 400]"
+      [view]="[1050, 400]"
       [results]="saleData"
       [xAxisLabel]="''"
       [legendTitle]="'Statistiques COVID-19 Madagascar'"

src/styles.scss

@@ -5,5 +5,5 @@ body {
   font-family: "Poppins", sans-serif;
   width: 100vw;
   box-sizing: border-box;
-  // overflow: hidden;
+  overflow: hidden;
 }