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

ajout composant add-restau

Browse Source
This commit is contained in:
Thomas Cardon 2022-02-18 16:47:23 +01:00
parent 0478d8886a
commit 5524d3c6d9
8 changed files with 343 additions and 291 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

195
src/app/admin-component/add-restau/add-restau.component.html Normal file
View File

@ -0,0 +1,195 @@
<div class="signup-form text-center">
<main class="form-signup">
<form (ngSubmit)="onSubmit()" [formGroup]="signupForm">
<h1>Enregistrer un restaurant</h1>
<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,
'is-invalid': signupForm.controls['nomFc'].touched && !signupForm.controls['nomFc'].valid}">
<label for="floatingInputNom">Nom **</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,
'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">
<option value=1>€ 1€ à 10€</option>
<option value=2>€€ 11€ à 20€</option>
<option value=3>€€€ 21€ à 30€</option>
<option value=4>€€€€ 31€ à 40€</option>
</select>
<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,
'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,
'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">
<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,
'is-invalid': signupForm.controls['websiteFc'].touched && !signupForm.controls['websiteFc'].valid}">
<label for="floatingInputWebsite">Site Web</label>
</div>
<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">
<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">
<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">
<label class="form-check-label" for="checkboxSurPlaceNull">Pas d'infos</label>
</div>
</div>
<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">
<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">
<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">
<label class="form-check-label" for="checkboxAEmporterNull">Pas d'infos</label>
</div>
</div>
<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">
<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">
<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">
<label class="form-check-label" for="checkboxAccesPMRNull">Pas d'infos</label>
</div>
</div>
<div *ngIf="errorMessage" class="alert alert-danger">
<p class="alert-link">{{errorMessage}}</p>
</div>
<button class="w-100 btn btn-lg btn-success"
type="submit">Enregistrer</button>
</form>
</main>
</div>

36
src/app/admin-component/add-restau/add-restau.component.scss Normal file
View File

@ -0,0 +1,36 @@
.login-form {
height: 100vh;
padding-top: 40px;
background-color: #f5f5f5;
}
.form-signup {
width: 100%;
max-width: 350px;
padding: 15px;
margin: auto;
}
.form-signup .checkbox {
font-weight: 400;
}
.form-signup .form-floating:focus-within {
z-index: 2;
}
.form-signup input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signup input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.text-left{
text-align: left;
}

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

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

81
src/app/admin-component/add-restau/add-restau.component.ts Normal file
View File

@ -0,0 +1,81 @@
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { Restaurant } from 'src/app/pages/models/restaurant';
import { ApiBackService } from 'src/app/services/api-back.service';
@Component({
selector: 'app-add-restau',
templateUrl: './add-restau.component.html',
styleUrls: ['./add-restau.component.scss']
})
export class AddRestauComponent implements OnInit {
public signupForm: FormGroup;
public errorMessage ?: string;
constructor( private router: Router, private apiBackService : ApiBackService) {
this.signupForm = new FormGroup({});
}
ngOnInit(): void {
this.signupForm = new FormGroup({
nomFc : new FormControl('', [Validators.required]),
prixFc : new FormControl(''),
longitudeFc : new FormControl('', [Validators.required,]), // chercher une meilleure regex
latitudeFc : new FormControl('', [Validators.required]),
adresseFc : new FormControl('', [Validators.required]),
telephoneFc : new FormControl(''),
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('')
})
}
public onSubmit(): void {
console.log("value : ", this.signupForm.value);
console.log("form : ", this.signupForm);
const nomFc = this.signupForm.value['nomFc'];
const prixFc = this.signupForm.value['prixFc'];
const longitudeFc = this.signupForm.value['longitudeFc'];
const latitudeFc = this.signupForm.value['latitudeFc'];
const adresseFc = this.signupForm.value['adresseFc'];
const telephoneFc = this.signupForm.value['telephoneFc'];
const websiteFc = this.signupForm.value['websiteFc'];
const surPlaceFc = this.signupForm.value['surPlaceFc'];
const aEmporterFc = this.signupForm.value['aEmporterFc'];
const accesPMRFc = this.signupForm.value['accesPMRFc'];
const restaurant: Restaurant = {
latitude: latitudeFc,
longitude: longitudeFc,
nom : nomFc,
prix: prixFc,
adresse : adresseFc,
telephone : telephoneFc,
website : websiteFc,
surPlace : surPlaceFc,
aEmporter : aEmporterFc,
accesPMR : accesPMRFc
}
if( restaurant.latitude !== '' &&
restaurant.longitude !== '' &&
restaurant.nom !== '' &&
restaurant.adresse !== '' ) {
this.apiBackService.addRestaurant(restaurant).subscribe(
resp=>
this.router.navigate(['restaurants'])
);
}else{
this.errorMessage = "Renseigner les champs obligatoires **";
}
}
}

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

@ -19,6 +19,7 @@ import { AvisBarComponent } from './filters/avis-bar/avis-bar.component';
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';
@NgModule({
declarations: [
@ -37,7 +38,8 @@ import { AdminPageComponent } from './pages/admin-page/admin-page.component';
IconComponent,
SigninComponent,
TemplatePageComponent,
AdminPageComponent
AdminPageComponent,
AddRestauComponent
],
imports: [
BrowserModule,

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

@ -1,195 +1 @@
<div class="signup-form text-center">
<main class="form-signup">
<form (ngSubmit)="onSubmit()" [formGroup]="signupForm">
<h1>Enregistrer un restaurant</h1>
<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,
'is-invalid': signupForm.controls['nomFc'].touched && !signupForm.controls['nomFc'].valid}">
<label for="floatingInputNom">Nom **</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,
'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">
<option value=1>€ 1€ à 10€</option>
<option value=2>€€ 11€ à 20€</option>
<option value=3>€€€ 21€ à 30€</option>
<option value=4>€€€€ 31€ à 40€</option>
</select>
<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,
'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,
'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">
<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,
'is-invalid': signupForm.controls['websiteFc'].touched && !signupForm.controls['websiteFc'].valid}">
<label for="floatingInputWebsite">Site Web</label>
</div>
<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">
<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">
<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">
<label class="form-check-label" for="checkboxSurPlaceNull">Pas d'infos</label>
</div>
</div>
<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">
<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">
<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">
<label class="form-check-label" for="checkboxAEmporterNull">Pas d'infos</label>
</div>
</div>
<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">
<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">
<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">
<label class="form-check-label" for="checkboxAccesPMRNull">Pas d'infos</label>
</div>
</div>
<div *ngIf="errorMessage" class="alert alert-danger">
<p class="alert-link">{{errorMessage}}</p>
</div>
<button class="w-100 btn btn-lg btn-success"
type="submit">Enregistrer</button>
</form>
</main>
</div>
<app-add-restau></app-add-restau>

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

@ -1,36 +0,0 @@
.login-form {
height: 100vh;
padding-top: 40px;
background-color: #f5f5f5;
}
.form-signup {
width: 100%;
max-width: 350px;
padding: 15px;
margin: auto;
}
.form-signup .checkbox {
font-weight: 400;
}
.form-signup .form-floating:focus-within {
z-index: 2;
}
.form-signup input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signup input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.text-left{
text-align: left;
}

59
src/app/pages/admin-page/admin-page.component.ts
View File

@ -12,69 +12,12 @@ import { Restaurant } from '../models/restaurant';
export class AdminPageComponent implements OnInit {
public signupForm: FormGroup;
public errorMessage ?: string;
constructor( ) {
constructor( private router: Router, private apiBackService : ApiBackService) {
this.signupForm = new FormGroup({});
}
ngOnInit(): void {
this.signupForm = new FormGroup({
nomFc : new FormControl('', [Validators.required]),
prixFc : new FormControl(''),
longitudeFc : new FormControl('', [Validators.required,]), // chercher une meilleure regex
latitudeFc : new FormControl('', [Validators.required]),
adresseFc : new FormControl('', [Validators.required]),
telephoneFc : new FormControl(''),
websiteFc : new FormControl(''),
surPlaceFc : new FormControl(''),
aEmporterFc : new FormControl(''),
accesPMRFc : new FormControl('')
})
}
public onSubmit(): void {
console.log("value : ", this.signupForm.value);
console.log("form : ", this.signupForm);
const nomFc = this.signupForm.value['nomFc'];
const prixFc = this.signupForm.value['prixFc'];
const longitudeFc = this.signupForm.value['longitudeFc'];
const latitudeFc = this.signupForm.value['latitudeFc'];
const adresseFc = this.signupForm.value['adresseFc'];
const telephoneFc = this.signupForm.value['telephoneFc'];
const websiteFc = this.signupForm.value['websiteFc'];
const surPlaceFc = this.signupForm.value['surPlaceFc'];
const aEmporterFc = this.signupForm.value['aEmporterFc'];
const accesPMRFc = this.signupForm.value['accesPMRFc'];
const restaurant: Restaurant = {
latitude: latitudeFc,
longitude: longitudeFc,
nom : nomFc,
prix: prixFc,
adresse : adresseFc,
telephone : telephoneFc,
website : websiteFc,
surPlace : surPlaceFc,
aEmporter : aEmporterFc,
accesPMR : accesPMRFc
}
if( restaurant.latitude !== '' &&
restaurant.longitude !== '' &&
restaurant.nom !== '' &&
restaurant.adresse !== '' ) {
this.apiBackService.addRestaurant(restaurant).subscribe(
resp=>
this.router.navigate(['restaurants'])
);
}else{
console.log("hello");
this.errorMessage = "Renseigner les champs obligatoires **";
}
}
}