Skip to content

Commit

Permalink
design & update centre lieux
Browse files Browse the repository at this point in the history
  • Loading branch information
AndyAndrianjatovo committed Aug 4, 2022
1 parent 2ca5dda commit 97f6ce3
Show file tree
Hide file tree
Showing 27 changed files with 14,704 additions and 71 deletions.
13,634 changes: 13,601 additions & 33 deletions package-lock.json

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
"@types/geojson": "^7946.0.8",
"@types/maplibre-gl": "^1.14.0",
"angular-ng-autocomplete": "^2.0.9",
"chart.js": "^3.9.1",
"express": "^4.18.1",
"html2canvas": "^1.4.1",
"jspdf": "^2.5.1",
Expand Down
6 changes: 5 additions & 1 deletion src/app/app-routing.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,11 @@ import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CreateCentreComponent } from './centre/create-centre/create-centre.component';
import { ListeCentreComponent } from './centre/liste-centre/liste-centre.component';
import { UpdateCentreComponent } from './centre/update-centre/update-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 { UpdateLieuComponent } from './lieu/update-lieu/update-lieu.component';
import { CreateComponent } from './personne/create/create.component';
import { DetailPersonneComponent } from './personne/detail-personne/detail-personne.component';
import { TdbComponent } from './tdb/tdb.component';
Expand All @@ -16,6 +18,8 @@ const routes: Routes = [
{ path: '', redirectTo: 'tdb', pathMatch: 'full' },
{ path: 'det', component: DetailPersonneComponent },
{ path: 'lieux/details/:id', component: DetailLieuComponent },
{ path: 'lieux/details/update/:id', component: UpdateLieuComponent },
{ path: 'centre/details/update/:id', component: UpdateCentreComponent },
{ path: 'listeTest', component: ListeTestComponent },
{
path: 'person',
Expand Down Expand Up @@ -48,7 +52,7 @@ const routes: Routes = [
{
path: 'places',
component: ListeLieuComponent,
}
},
];

@NgModule({
Expand Down
9 changes: 9 additions & 0 deletions src/app/app.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -247,6 +247,15 @@
<span id="tdb" class="link">Ajout</span>
</a>
</li>
<li>
<a
[routerLink]="['/centre']"
routerLinkActive="active"
queryParamsHandling="merge"
>
<span id="tdb" class="link">Liste</span>
</a>
</li>
</ul>
</mat-expansion-panel>
</mat-accordion>
Expand Down
4 changes: 4 additions & 0 deletions src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@ 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';
import { UpdateLieuComponent } from './lieu/update-lieu/update-lieu.component';
import { UpdateCentreComponent } from './centre/update-centre/update-centre.component';

@NgModule({
declarations: [
Expand All @@ -52,6 +54,8 @@ import { ListeLieuComponent } from './lieu/liste-lieu/liste-lieu.component';
ListeTestComponent,
ListeCentreComponent,
ListeLieuComponent,
UpdateLieuComponent,
UpdateCentreComponent,
],
imports: [
BrowserModule,
Expand Down
45 changes: 44 additions & 1 deletion src/app/centre/liste-centre/liste-centre.component.html
Original file line number Diff line number Diff line change
@@ -1,3 +1,46 @@
<div *ngFor="let item of centres">
<!-- <div *ngFor="let item of centres">
{{ item.nom_centre }}
</div> -->
<div class="contain">
<div class="title">
<h1>Liste des centres</h1>
<span>{{ centres.length }} centre</span>
</div>
<div class="container">
<div class="detailLieuPart" *ngFor="let item of centres">
<div class="actionPart">
<button (click)="update(item._id)">
<img
src="assets/img/icon/create-outline.svg"
alt=""
class="icoAction"
/>
</button>
</div>
<div class="titre">
{{ item.nom_centre }}
</div>
<div class="adresse">
{{ item.adresse_centre }}
</div>
<div class="detailsPart">
<img
src="assets/img/icon/navigate-outline.svg"
alt=""
class="icoDetails"
/>
<span> {{ item.coordonnees_centre }} </span>
</div>
<hr />
<!-- <div class="titre">QR Code</div>
<div class="qrcode">
<ngx-qrcode
value="{{ lieux!._id }}"
cssClass="qrcodeshadow"
[width]="500"
[margin]="0"
></ngx-qrcode> -->
<!-- </div> -->
</div>
</div>
</div>
104 changes: 104 additions & 0 deletions src/app/centre/liste-centre/liste-centre.component.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
.contain {
width: 80%;
margin: 0 auto;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
* {
font-family: "Poppins", sans-serif;
}
.title {
padding: 1em;
}

.title h1 {
font-size: 2em;
font-weight: bold;
color: #040608;
font-family: "Poppins", sans-serif;
margin: 0;
}

.title span {
color: #5d5f66;
}

.detailLieuPart {
width: 45%;
background-color: #f6f6f6;
padding: 1em;
border-radius: 5px;
}

.actionPart {
display: flex;
justify-content: flex-end;
margin-bottom: 1em;
}

.actionPart button {
background-color: transparent;
border: 1px solid #e3e3e3;
border-radius: 5px;
cursor: pointer;
}

.actionPart .icoAction {
width: 20px;
height: 20px;
filter: invert(12%) sepia(14%) saturate(177%) hue-rotate(181deg)
brightness(96%) contrast(97%);
margin: 0 0.5em;
}

.detailLieuPart .titre {
font-size: 1.1em;
color: #040608;
}

.detailLieuPart .adresse {
font-size: 0.9em;
color: #828282;
margin-bottom: 1em;
}

.detailsPart {
display: flex;
align-items: center;
}

.detailsPart span {
margin-right: 1em;
}

.detailsPart .icoDetails {
width: 20px;
height: 20px;
filter: invert(42%) sepia(0%) saturate(7040%) hue-rotate(280deg)
brightness(99%) contrast(92%);
margin-right: 0.5em;
}

hr {
border: 2px dotted #e3e3e3;
margin: 2em 0;
}

.qrcode {
display: flex;
justify-content: center;
}

:host ::ng-deep {
.qrcode,
.qrcodeshadow,
.qrcodeshadow img {
// width: 100%;
height: 200px;
margin-top: 0.5em;
margin-bottom: 3em;
}
}
10 changes: 9 additions & 1 deletion src/app/centre/liste-centre/liste-centre.component.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Centre } from 'src/app/models/centre';
import { CentreService } from 'src/app/services/centre.service';

Expand All @@ -10,11 +11,18 @@ import { CentreService } from 'src/app/services/centre.service';
export class ListeCentreComponent implements OnInit {
centres: Centre[] = [];

constructor(private centreService: CentreService) {}
constructor(
private centreService: CentreService,
private route: ActivatedRoute,
private router: Router
) {}

ngOnInit(): void {
this.centreService.getCentres().subscribe((data: any) => {
this.centres = data.docs;
});
}
update(id: String) {
this.router.navigate(['/centre/details/update', id]);
}
}
46 changes: 46 additions & 0 deletions src/app/centre/update-centre/update-centre.component.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<div class="conteuneurFormulaire">
<div class="title">
<h1>Mis à jour centre</h1>
<div class="formButton" (click)="updateCentre()">
<button type="submit"><span id="addPerson"></span> Ajouter</button>
</div>
</div>
<div class="formulaire">
<!-- <mat-card> -->
<div class="formGroupItem">
<div class="formItem">
<label for="nom">Nom centre</label>
<input
type="text"
id="nom"
name="nom"
[(ngModel)]="centre.nom_centre"
/>
</div>
<div class="formItem">
<label for="adresse_centre">Adresse centre</label>
<input
type="text"
id="adresse_centre"
name="adresse_centre"
[(ngModel)]="centre.adresse_centre"
/>
</div>
</div>
<div class="formItem">
<label for="coordonnees_centre">Coordonnées centre</label>
<input
type="text"
id="coordonnees_centre"
name="coordonnees_centre"
[disabled]="centre.id_centre !== ''"
[(ngModel)]="centre.coordonnees_centre"
readonly
/>
</div>
<!-- </mat-card> -->
</div>
</div>

<div class="map-container" #map></div>
<pre id="coordinates" class="coordinates"></pre>
Loading

0 comments on commit 97f6ce3

Please sign in to comment.