mis en place admin-page
This commit is contained in:
Thomas Cardon
parent
9e03cf2750
commit
dc03c1b25f
8 changed files with 258 additions and 5 deletions
98
src/app/pages/admin-page/admin-page.component.html
Normal file
98
src/app/pages/admin-page/admin-page.component.html
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
<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" >
|
||||
<label for="floatingInputWebsite">Site Web</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input type="checkbox"
|
||||
class="form-control"
|
||||
id="floatingInputAEmporter"
|
||||
placeholder=""
|
||||
name="website" >
|
||||
<label for="floatingInputAEmporter">A Emporter</label>
|
||||
</div>
|
||||
|
||||
<div *ngIf="errorMessage" class="alert alert-warning">
|
||||
{{errorMessage}}
|
||||
</div>
|
||||
|
||||
<button class="w-100 btn btn-lg btn-success"
|
||||
type="submit">Enregistrer</button>
|
||||
|
||||
</form>
|
||||
</main>
|
||||
</div>
|
||||
32
src/app/pages/admin-page/admin-page.component.scss
Normal file
32
src/app/pages/admin-page/admin-page.component.scss
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
.login-form {
|
||||
height: 100vh;
|
||||
padding-top: 40px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.form-signup {
|
||||
width: 100%;
|
||||
max-width: 330px;
|
||||
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;
|
||||
}
|
||||
25
src/app/pages/admin-page/admin-page.component.spec.ts
Normal file
25
src/app/pages/admin-page/admin-page.component.spec.ts
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { AdminPageComponent } from './admin-page.component';
|
||||
|
||||
describe('AdminPageComponent', () => {
|
||||
let component: AdminPageComponent;
|
||||
let fixture: ComponentFixture<AdminPageComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ AdminPageComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(AdminPageComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
76
src/app/pages/admin-page/admin-page.component.ts
Normal file
76
src/app/pages/admin-page/admin-page.component.ts
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { FormControl, FormGroup, Validators } from '@angular/forms';
|
||||
import { Router } from '@angular/router';
|
||||
import { ApiBackService } from 'src/app/services/api-back.service';
|
||||
import { Restaurant } from '../models/restaurant';
|
||||
|
||||
@Component({
|
||||
selector: 'app-admin-page',
|
||||
templateUrl: './admin-page.component.html',
|
||||
styleUrls: ['./admin-page.component.scss']
|
||||
})
|
||||
export class AdminPageComponent 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(''),
|
||||
aEmporterFc : 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 aEmporterFc = this.signupForm.value['aEmporterFc'];
|
||||
// const accesPMRFc = this.signupForm.value['accesPMRFc'];
|
||||
// const surPlaceFc = this.signupForm.value['surPlaceFc'];
|
||||
|
||||
const restaurant: Restaurant = {
|
||||
latitude: latitudeFc,
|
||||
longitude: longitudeFc,
|
||||
nom : nomFc,
|
||||
prix: prixFc,
|
||||
adresse : adresseFc,
|
||||
telephone : telephoneFc,
|
||||
website : websiteFc,
|
||||
aEmporter : aEmporterFc,
|
||||
// accesPMR : accesPMRFc,
|
||||
// surPlace : surPlaceFc
|
||||
}
|
||||
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 **";
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
13
src/app/pages/models/restaurant.ts
Normal file
13
src/app/pages/models/restaurant.ts
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
export interface Restaurant {
|
||||
id?:number;
|
||||
nom: string;
|
||||
adresse: string;
|
||||
prix?: number;
|
||||
latitude: string;
|
||||
longitude: string;
|
||||
telephone ?: string;
|
||||
website ?: string;
|
||||
aEmporter?: boolean;
|
||||
accesPMR?: boolean;
|
||||
surPlace?: boolean;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue