vincentRamiere
/
simpleat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

admin:crea suppr restau, search bar

This commit is contained in:
Thomas Cardon 2022-03-02 12:43:16 +01:00
parent 4d92ddb960
commit e72283e305
19 changed files with 276 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

161
src/app/admin-component/add-restau/add-restau.component.html
View File

@ -1,36 +1,33 @@
<div class="signup-form text-center">
<main class="form-signup">
<form (ngSubmit)="onSubmit()" [formGroup]="signupForm">
<h1>Enregistrer un restaurant</h1>
<h2>Enregistrer un restaurant</h2>
<div class="form-floating">
<input type="text"
class="form-control"
id="floatingInputNom"
placeholder=""
name="nom"
formControlName="nomFc"
[ngClass]="{'is-valid' : signupForm.controls['nomFc'].touched && signupForm.controls['nomFc'].valid,
<input type="text" class="form-control" id="floatingInputNom" placeholder="" name="nom"
formControlName="nomFc"
[ngClass]="{'is-valid' : signupForm.controls['nomFc'].touched && signupForm.controls['nomFc'].valid,
'is-invalid': signupForm.controls['nomFc'].touched && !signupForm.controls['nomFc'].valid}">
<label for="floatingInputNom">Nom **</label>
</div>
<!-- <div class="form-floating">
<select type="number" class="form-control" id="floatingInputCategories" placeholder="" name="categories"
formControlName="typerestausFc">
<option value=null></option>
<option *ngFor="let category of listCategories" value={{category.id}}>{{category.libelle}}</option>
</select>
<label for="floatingInputlastName">Categorie</label>
</div> -->
<div class="form-floating">
<input type="text"
class="form-control"
id="floatingInputAdresse"
placeholder=""
name="adresse"
formControlName="adresseFc"
[ngClass]="{'is-valid' : signupForm.controls['adresseFc'].touched && signupForm.controls['adresseFc'].valid,
<input type="text" class="form-control" id="floatingInputAdresse" placeholder="" name="adresse"
formControlName="adresseFc"
[ngClass]="{'is-valid' : signupForm.controls['adresseFc'].touched && signupForm.controls['adresseFc'].valid,
'is-invalid': signupForm.controls['adresseFc'].touched && !signupForm.controls['adresseFc'].valid}">
<label for="floatingInputAdresse">Adresse **</label>
</div>
<div class="form-floating">
<select type="number"
class="form-control"
id="floatingInputPrice"
placeholder=""
name="prix"
formControlName="prixFc">
<select type="number" class="form-control" id="floatingInputPrice" placeholder="" name="prix"
formControlName="prixFc">
<option value=1>€ 1€ à 10€</option>
<option value=2>€€ 11€ à 20€</option>
<option value=3>€€€ 21€ à 30€</option>
@ -39,44 +36,28 @@
<label for="floatingInputlastName">Prix</label>
</div>
<div class="form-floating">
<input type="text"
class="form-control"
id="floatingInputLat"
placeholder=""
name="latitude"
formControlName="latitudeFc"
[ngClass]="{'is-valid' : signupForm.controls['latitudeFc'].touched && signupForm.controls['latitudeFc'].valid,
<input type="text" class="form-control" id="floatingInputLat" placeholder="" name="latitude"
formControlName="latitudeFc"
[ngClass]="{'is-valid' : signupForm.controls['latitudeFc'].touched && signupForm.controls['latitudeFc'].valid,
'is-invalid': signupForm.controls['latitudeFc'].touched && !signupForm.controls['latitudeFc'].valid}">
<label for="floatingInputLat">Latitude **</label>
</div>
<div class="form-floating">
<input type="text"
class="form-control"
id="floatingInputLong"
placeholder=""
name="longitude"
formControlName="longitudeFc"
[ngClass]="{'is-valid' : signupForm.controls['longitudeFc'].touched && signupForm.controls['longitudeFc'].valid,
<input type="text" class="form-control" id="floatingInputLong" placeholder="" name="longitude"
formControlName="longitudeFc"
[ngClass]="{'is-valid' : signupForm.controls['longitudeFc'].touched && signupForm.controls['longitudeFc'].valid,
'is-invalid': signupForm.controls['longitudeFc'].touched && !signupForm.controls['longitudeFc'].valid}">
<label for="floatingInputLong">Longitude **</label>
</div>
<div class="form-floating">
<input type="text"
class="form-control"
id="floatingInputTel"
placeholder=""
name="telephone"
formControlName="telephoneFc">
<input type="text" class="form-control" id="floatingInputTel" placeholder="" name="telephone"
formControlName="telephoneFc">
<label for="floatingInputTel">Téléphone</label>
</div>
<div class="form-floating">
<input type="text"
class="form-control"
id="floatingInputWebsite"
placeholder=""
name="website"
formControlName="websiteFc"
[ngClass]="{'is-valid' : signupForm.controls['websiteFc'].touched && signupForm.controls['websiteFc'].valid,
<input type="text" class="form-control" id="floatingInputWebsite" placeholder="" name="website"
formControlName="websiteFc"
[ngClass]="{'is-valid' : signupForm.controls['websiteFc'].touched && signupForm.controls['websiteFc'].valid,
'is-invalid': signupForm.controls['websiteFc'].touched && !signupForm.controls['websiteFc'].valid}">
<label for="floatingInputWebsite">Site Web</label>
</div>
@ -84,33 +65,18 @@
<div class="form-control">
<p class="text-left"> Sur Place :</p>
<div class="form-check form-check-inline">
<input
type="radio"
class="form-check-input"
id="checkboxSurPlaceTrue"
name="surPlaceFc"
value=true
formControlName="surPlaceFc">
<input type="radio" class="form-check-input" id="checkboxSurPlaceTrue" name="surPlaceFc" value=true
formControlName="surPlaceFc">
<label class="form-check-label" for="checkboxSurPlaceTrue">Oui</label>
</div>
<div class="form-check form-check-inline">
<input
type="radio"
class="form-check-input"
id="checkboxSurPlaceFalse"
name="surPlaceFc"
value=false
formControlName="surPlaceFc">
<input type="radio" class="form-check-input" id="checkboxSurPlaceFalse" name="surPlaceFc"
value=false formControlName="surPlaceFc">
<label class="form-check-label" for="checkboxSurPlaceFalse">Non</label>
</div>
<div class="form-check form-check-inline">
<input
type="radio"
class="form-check-input"
id="checkboxSurPlaceNull"
name="surPlaceFc"
value=null
formControlName="surPlaceFc">
<input type="radio" class="form-check-input" id="checkboxSurPlaceNull" name="surPlaceFc" value=null
formControlName="surPlaceFc">
<label class="form-check-label" for="checkboxSurPlaceNull">Pas d'infos</label>
</div>
</div>
@ -118,33 +84,18 @@
<div class="form-control">
<p class="text-left"> A Emporter :</p>
<div class="form-check form-check-inline">
<input
type="radio"
class="form-check-input"
id="checkboxAEmporterTrue"
name="aEmporterFc"
value=true
formControlName="aEmporterFc">
<input type="radio" class="form-check-input" id="checkboxAEmporterTrue" name="aEmporterFc"
value=true formControlName="aEmporterFc">
<label class="form-check-label" for="checkboxAEmporterTrue">Oui</label>
</div>
<div class="form-check form-check-inline">
<input
type="radio"
class="form-check-input"
id="checkboxAEmporterFalse"
name="aEmporterFc"
value=false
formControlName="aEmporterFc">
<input type="radio" class="form-check-input" id="checkboxAEmporterFalse" name="aEmporterFc"
value=false formControlName="aEmporterFc">
<label class="form-check-label" for="checkboxAEmporterFalse">Non</label>
</div>
<div class="form-check form-check-inline">
<input
type="radio"
class="form-check-input"
id="checkboxAEmporterNull"
name="aEmporterFc"
value=null
formControlName="aEmporterFc">
<input type="radio" class="form-check-input" id="checkboxAEmporterNull" name="aEmporterFc"
value=null formControlName="aEmporterFc">
<label class="form-check-label" for="checkboxAEmporterNull">Pas d'infos</label>
</div>
</div>
@ -152,33 +103,18 @@
<div class="form-control">
<p class="text-left"> Accès PMR :</p>
<div class="form-check form-check-inline">
<input
type="radio"
class="form-check-input"
id="checkboxAccesPMRTrue"
name="accesPMRFc"
value=true
formControlName="accesPMRFc">
<input type="radio" class="form-check-input" id="checkboxAccesPMRTrue" name="accesPMRFc" value=true
formControlName="accesPMRFc">
<label class="form-check-label" for="checkboxAccesPMRTrue">Oui</label>
</div>
<div class="form-check form-check-inline">
<input
type="radio"
class="form-check-input"
id="checkboxAccesPMRFalse"
name="accesPMRFc"
value=false
formControlName="accesPMRFc">
<input type="radio" class="form-check-input" id="checkboxAccesPMRFalse" name="accesPMRFc"
value=false formControlName="accesPMRFc">
<label class="form-check-label" for="checkboxAccesPMRFalse">Non</label>
</div>
<div class="form-check form-check-inline">
<input
type="radio"
class="form-check-input"
id="checkboxAccesPMRNull"
name="accesPMRFc"
value=null
formControlName="accesPMRFc">
<input type="radio" class="form-check-input" id="checkboxAccesPMRNull" name="accesPMRFc" value=null
formControlName="accesPMRFc">
<label class="form-check-label" for="checkboxAccesPMRNull">Pas d'infos</label>
</div>
</div>
@ -187,8 +123,7 @@
<p class="alert-link">{{errorMessage}}</p>
</div>
<button class="w-100 btn btn-lg btn-success"
type="submit">Enregistrer</button>
<button class="w-100 btn btn-lg btn-success" type="submit">Enregistrer</button>
</form>
</main>

27
src/app/admin-component/add-restau/add-restau.component.ts
View File

@ -1,7 +1,8 @@
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { Observable } from 'rxjs';
import { Restaurant } from 'src/app/pages/models/restaurant';
import { ApiBackService } from 'src/app/services/api-back.service';
@ -15,12 +16,18 @@ export class AddRestauComponent implements OnInit {
public signupForm: FormGroup;
public errorMessage ?: string;
public listCategories : any[];
public expanded = false;
constructor( private router: Router, private apiBackService : ApiBackService) {
this.signupForm = new FormGroup({});
this.listCategories = [];
}
ngOnInit(): void {
this.getCategories();
this.signupForm = new FormGroup({
nomFc : new FormControl('', [Validators.required]),
prixFc : new FormControl(''),
@ -31,10 +38,21 @@ export class AddRestauComponent implements OnInit {
websiteFc : new FormControl('',[Validators.pattern("/^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/")]),
surPlaceFc : new FormControl(''),
aEmporterFc : new FormControl(''),
accesPMRFc : new FormControl('')
accesPMRFc : new FormControl(''),
// typerestausFc : new FormControl('')
})
}
public getCategories() : void{
this.apiBackService.getCategories().subscribe((listCategories: any[]) => {
// console.log(listCategories);
this.listCategories = listCategories;
});
}
public onSubmit(): void {
console.log("value : ", this.signupForm.value);
console.log("form : ", this.signupForm);
@ -48,6 +66,7 @@ export class AddRestauComponent implements OnInit {
const surPlaceFc = this.signupForm.value['surPlaceFc'];
const aEmporterFc = this.signupForm.value['aEmporterFc'];
const accesPMRFc = this.signupForm.value['accesPMRFc'];
// const typerestausFc = this.signupForm.value['typerestausFc'];
const restaurant: Restaurant = {
latitude: latitudeFc,
@ -59,8 +78,10 @@ export class AddRestauComponent implements OnInit {
website : websiteFc,
surPlace : surPlaceFc,
aEmporter : aEmporterFc,
accesPMR : accesPMRFc
accesPMR : accesPMRFc,
// typerestaus : typerestausFc
}
if( restaurant.latitude !== '' &&
restaurant.longitude !== '' &&
restaurant.nom !== '' &&

12
src/app/admin-component/update-del-restau/update-del-restau.component.html Normal file
View File

@ -0,0 +1,12 @@
<h2>Modifier/Supprimer un restaurant</h2>
<app-search-bar (resultSearch)="saveRestauList($event)"></app-search-bar>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between" *ngFor="let restau of restauList" >
<div>
{{restau.nom}}
</div>
<div>
<button class="btn btn-danger" type="button" (click)="deleteRestau(restau.id)"><i class="bi bi-trash"></i></button>
</div>
</li>
</ul>

0
src/app/admin-component/update-del-restau/update-del-restau.component.scss Normal file
View File

25
src/app/admin-component/update-del-restau/update-del-restau.component.spec.ts Normal file
View File

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

38
src/app/admin-component/update-del-restau/update-del-restau.component.ts Normal file
View File

@ -0,0 +1,38 @@
import { Component, Input, OnInit } from '@angular/core';
import { Restaurant } from 'src/app/pages/models/restaurant';
import { ApiBackService } from 'src/app/services/api-back.service';
@Component({
selector: 'app-update-del-restau',
templateUrl: './update-del-restau.component.html',
styleUrls: ['./update-del-restau.component.scss']
})
export class UpdateDelRestauComponent implements OnInit {
restauList : Restaurant[];
constructor(private apiBackService : ApiBackService) {
this.restauList = [];
}
ngOnInit(): void {
}
saveRestauList(event : any){
console.log(event);
this.restauList = event;
}
deleteRestau(idRestau : number | undefined){
this.apiBackService.deleteRestau(idRestau).subscribe(
resp =>{
this.restauList = this.restauList.filter(restaus => restaus.id != idRestau)
});
}
}

2
src/app/app.component.html
View File

@ -1,4 +1,4 @@
<app-search-bar *ngIf="dontShow"></app-search-bar>
<app-header-logo *ngIf="dontShow"></app-header-logo>
<app-nav-bar *ngIf="dontShow"></app-nav-bar>
<router-outlet></router-outlet>
<app-footer *ngIf="dontShow"></app-footer>

6
src/app/app.module.ts
View File

@ -20,6 +20,8 @@ import { IconComponent } from './filters/icon/icon.component';
import { TemplatePageComponent } from './components/template-page/template-page.component';
import { AdminPageComponent } from './pages/admin-page/admin-page.component';
import { AddRestauComponent } from './admin-component/add-restau/add-restau.component';
import { UpdateDelRestauComponent } from './admin-component/update-del-restau/update-del-restau.component';
import { HeaderLogoComponent } from './header/components/header-logo/header-logo.component';
@NgModule({
declarations: [
@ -39,7 +41,9 @@ import { AddRestauComponent } from './admin-component/add-restau/add-restau.comp
SigninComponent,
TemplatePageComponent,
AdminPageComponent,
AddRestauComponent
AddRestauComponent,
UpdateDelRestauComponent,
HeaderLogoComponent
],
imports: [
BrowserModule,

13
src/app/header/components/header-logo/header-logo.component.html Normal file
View File

@ -0,0 +1,13 @@
<nav class="navbar navbar-light p-0">
<div class="container-fluid d-flex align-items-center pt-3">
<div class="logo ps-4">
<img src="assets/images-header/LOGO2.png" alt="logo">
</div>
<app-search-bar></app-search-bar>
<div class="trait">
<p>LE BON PLAN POUR MANGER</p>
</div>
</div>
</nav>

29
src/app/header/components/header-logo/header-logo.component.scss Normal file
View File

@ -0,0 +1,29 @@
.container-fluid
{
padding-top: 2%;
width : 100%;
margin: auto;
padding-bottom: 0,5%;
padding-left: 0;
padding-right: 0;
max-height: 20%;
}
.trait{
width: 100%;
height: 30px;
border-bottom: 2px solid #CE0000;
position: relative;
}
p{
background-color: white;
position: absolute;
top: 15px;
left: 68px;
padding : 0 10px 0 10px;
color: grey;
}

25
src/app/header/components/header-logo/header-logo.component.spec.ts Normal file
View File

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

15
src/app/header/components/header-logo/header-logo.component.ts Normal file
View File

@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-header-logo',
templateUrl: './header-logo.component.html',
styleUrls: ['./header-logo.component.scss']
})
export class HeaderLogoComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}

19
src/app/header/components/search-bar/search-bar.component.html
View File

@ -1,14 +1,5 @@
<nav class="navbar navbar-light p-0">
<div class="container-fluid d-flex align-items-center pt-3">
<div class="logo ps-4">
<img src="assets/images-header/LOGO2.png" alt="logo">
</div>
<form style="width: 30%;" class="d-flex align-items-center pe-2 pt-2">
<input class="form-control me-5 position-relative" type="search" #newItem placeholder="Trouver votre SIMPL'EAT..." aria-label="Search">
<button (click) = "onChangeInput(newItem.value)">Recherche</button>
</form>
<div class="trait">
<p>LE BON PLAN POUR MANGER</p>
</div>
</div>
</nav>
<form class="d-flex align-items-center pe-2 pt-2">
<input class="form-control me-5 position-relative" type="search" #newItem placeholder="Trouver votre SIMPL'EAT..."
aria-label="Search">
<button (click)="onChangeInput(newItem.value)">Recherche</button>
</form>

32
src/app/header/components/search-bar/search-bar.component.scss
View File

@ -1,35 +1,3 @@
.container-fluid
{
padding-top: 2%;
width : 100%;
margin: auto;
padding-bottom: 0,5%;
padding-left: 0;
padding-right: 0;
max-height: 20%;
}
.trait{
width: 100%;
height: 30px;
border-bottom: 2px solid #CE0000;
position: relative;
}
p{
background-color: white;
position: absolute;
top: 15px;
left: 68px;
padding : 0 10px 0 10px;
color: grey;
}
input[type="search"], textarea{
background-color: #edf5f1;
}

22
src/app/header/components/search-bar/search-bar.component.ts
View File

@ -1,5 +1,6 @@
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { Router } from '@angular/router';
import { ActivatedRoute, Router } from '@angular/router';
import { Restaurant } from 'src/app/pages/models/restaurant';
import { RestoPageComponent } from 'src/app/pages/resto-page/resto-page.component';
import { ApiBackService } from 'src/app/services/api-back.service';
@ -10,11 +11,13 @@ import { ApiBackService } from 'src/app/services/api-back.service';
})
export class SearchBarComponent implements OnInit {
searchText = new EventEmitter();
listRestau: any[];
restauByName: any[];
@Output() resultSearch = new EventEmitter<Restaurant[]>();
constructor(private apiBackService: ApiBackService, private route: Router) {
constructor(private apiBackService: ApiBackService,
private route: Router,
private activatedRoute : ActivatedRoute) {
this.listRestau = [];
this.restauByName = [];
@ -33,11 +36,18 @@ export class SearchBarComponent implements OnInit {
this.restauByName = this.restauByName.filter((restau: any) =>
restau.nom.toLowerCase().includes(search.toLowerCase()));
console.log(this.restauByName);
// Composant search-bar utilisé dans la page admin
if(this.activatedRoute.snapshot.routeConfig?.path === "admin"){
this.resultSearch.emit(this.restauByName);
}else{ // la search bar utilisée dans la nav-bar pour trouver un restau
this.apiBackService.setListRestau(this.restauByName, "filtres");
this.route.routeReuseStrategy.shouldReuseRoute= () => false;
this.route.onSameUrlNavigation = 'reload';
//this.route.routeReuseStrategy.shouldReuseRoute= () => false;
// this.route.onSameUrlNavigation = 'reload';
this.route.navigate(['restaurants']);
}
}
}

10
src/app/pages/admin-page/admin-page.component.html
View File

@ -1 +1,9 @@
<app-add-restau></app-add-restau>
<div class="container">
<div class="d-flex flex-row justify-content-around"><div>
<app-add-restau></app-add-restau>
</div>
<div class="search-bar">
<app-update-del-restau></app-update-del-restau>
</div>
</div>
</div>

3
src/app/pages/admin-page/admin-page.component.scss
View File

@ -0,0 +1,3 @@
.search-bar{
width : 30%;
}

1
src/app/pages/models/restaurant.ts
View File

@ -10,4 +10,5 @@ export interface Restaurant {
aEmporter?: boolean;
accesPMR?: boolean;
surPlace?: boolean;
typerestaus ?: any[];
}

5
src/app/services/api-back.service.ts
View File

@ -64,4 +64,9 @@ export class ApiBackService {
}
deleteRestau( idRestau : number | undefined) : Observable<any>{
return this.httpClient.delete<Restaurant>(`${environment.apiUrl}/delete-restaurant/${idRestau}`);
}
}