diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 881cf51..01922e4 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -17,6 +17,7 @@ import { PageNotFoundComponent } from './pages/page-not-found/page-not-found.com import { FiltersPageComponent } from './pages/filters-page/filters-page.component'; 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'; @NgModule({ declarations: [ diff --git a/src/app/card-resto/card-resto.component.html b/src/app/card-resto/card-resto.component.html index ac95c34..48b327f 100644 --- a/src/app/card-resto/card-resto.component.html +++ b/src/app/card-resto/card-resto.component.html @@ -1,49 +1,56 @@
- Card image cap -
- -
-
-

{{ - restaurant.nom }}

- -
- -

- -

- -
-
+ Card image cap +
+
+

+ {{restaurant.nom }}

+ +
+

+ +

+
+
This is the first item's accordion body.
-
    -
    • -
    • -
    • -
    • -
    • -
+
    +
    • +
    • +
    • +
    • +
    • +
5/5
- Kebab - 550m - 5-10€ +
+ {{ categorie.libelle }} +
+
+ + {{distance}} mètres +
+
+ + 5-10€ +
-

Descriptif : c’est le faux - texte standard de l'imprimerie depuis - les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour - réaliser un livre spécimen de polices de texte.

+ +
+

+ Site Web + +

+
+ + Pas de site Web + +
Sur place : @@ -72,5 +79,5 @@
-
-
\ No newline at end of file + +
\ No newline at end of file diff --git a/src/app/card-resto/card-resto.component.scss b/src/app/card-resto/card-resto.component.scss index 9ec6b1d..3e6c0ea 100644 --- a/src/app/card-resto/card-resto.component.scss +++ b/src/app/card-resto/card-resto.component.scss @@ -30,13 +30,13 @@ .accordion-button.collapsed { background: #CE0000; } - - .accordion-button.collapsed::after { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); - } - - .ps-5 { +.accordion-button.collapsed::after { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); + +} + +.ps-5 { padding-left: 5.4rem !important; } .pe-5 { @@ -81,3 +81,5 @@ opacity: 50%; + + diff --git a/src/app/card-resto/card-resto.component.ts b/src/app/card-resto/card-resto.component.ts index ed75d54..106a240 100644 --- a/src/app/card-resto/card-resto.component.ts +++ b/src/app/card-resto/card-resto.component.ts @@ -8,12 +8,47 @@ import { Component, Input, OnInit } from '@angular/core'; export class CardRestoComponent implements OnInit { @Input() restaurant : any ; + distance : number; - constructor() { } + constructor() { + this.distance = 0 ; + } ngOnInit(): void { + console.log(this.restaurant); + + this.distance = Math.round( + this.getDistanceFromLatLonInKm( + 48.86201110271593 , //latitude Simplon + 2.4361804827725417, //longitude Simplon + this.restaurant.latitude, + this.restaurant.longitude) + ); + + console.log(this.distance); + } + getDistanceFromLatLonInKm(lat1 : number , lon1 : number, lat2 : number, lon2 : number) { + let R = 6371; // Radius of the earth in km + let dLat = this.deg2rad(lat2-lat1); // deg2rad below + let dLon = this.deg2rad(lon2-lon1); + let a = + Math.sin(dLat/2) * Math.sin(dLat/2) + + Math.cos(this.deg2rad(lat1)) * Math.cos(this.deg2rad(lat2)) * + Math.sin(dLon/2) * Math.sin(dLon/2) + ; + let c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); + let d = R * c * 1000; // Distance in meters + return d; + } + + deg2rad(deg : number) { + return deg * (Math.PI/180) + } + + + } diff --git a/src/app/components/template-page/template-page.component.html b/src/app/components/template-page/template-page.component.html new file mode 100644 index 0000000..061e291 --- /dev/null +++ b/src/app/components/template-page/template-page.component.html @@ -0,0 +1,6 @@ + +

{{title}}

+
+
+ +
diff --git a/src/app/components/template-page/template-page.component.scss b/src/app/components/template-page/template-page.component.scss new file mode 100644 index 0000000..9d01224 --- /dev/null +++ b/src/app/components/template-page/template-page.component.scss @@ -0,0 +1,15 @@ +.separation{ + display: flex; + justify-content: flex-start; + border-bottom: 2px solid #CE0000; + max-width: 83%; +} + +.titre{ + + display: flex; + justify-content: flex-start; + margin: 2.5em 0 0.5em 8.2em; + color: #CE0000; + +} diff --git a/src/app/components/template-page/template-page.component.spec.ts b/src/app/components/template-page/template-page.component.spec.ts new file mode 100644 index 0000000..540dd70 --- /dev/null +++ b/src/app/components/template-page/template-page.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TemplatePageComponent } from './template-page.component'; + +describe('TemplatePageComponent', () => { + let component: TemplatePageComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ TemplatePageComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(TemplatePageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/template-page/template-page.component.ts b/src/app/components/template-page/template-page.component.ts new file mode 100644 index 0000000..91ac423 --- /dev/null +++ b/src/app/components/template-page/template-page.component.ts @@ -0,0 +1,16 @@ +import { Component, Input, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-template-page', + templateUrl: './template-page.component.html', + styleUrls: ['./template-page.component.scss'] +}) +export class TemplatePageComponent implements OnInit { + @Input() title!: string; + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/pages/filters-page/filters-page.component.html b/src/app/pages/filters-page/filters-page.component.html index bfd1eda..68dd051 100644 --- a/src/app/pages/filters-page/filters-page.component.html +++ b/src/app/pages/filters-page/filters-page.component.html @@ -9,7 +9,7 @@

@@ -32,7 +32,7 @@

@@ -56,7 +56,7 @@

@@ -79,7 +79,7 @@

@@ -100,7 +100,7 @@

diff --git a/src/app/pages/filters-page/filters-page.component.scss b/src/app/pages/filters-page/filters-page.component.scss index 2527ff7..75a8bba 100644 --- a/src/app/pages/filters-page/filters-page.component.scss +++ b/src/app/pages/filters-page/filters-page.component.scss @@ -46,15 +46,17 @@ filter: drop-shadow(0 0 0.2rem grey); background-color: #CE0000; text-align: center; margin: 100px auto; - border-radius: 20px; + border-radius: 10px; display: block; - height: 75px; - width: 300px; + height: 62px; + width: 272px; font-size: 20px; + border: none; } span{ + font-weight: 500 ; } diff --git a/src/app/pages/home-page/home-page.component.ts b/src/app/pages/home-page/home-page.component.ts index 1202c98..ebb39f4 100644 --- a/src/app/pages/home-page/home-page.component.ts +++ b/src/app/pages/home-page/home-page.component.ts @@ -25,6 +25,9 @@ export class HomePageComponent implements OnInit { this.listCategories = listCategories; }); + console.log(this.apiBackService); + + } diff --git a/src/app/pages/resto-page/resto-page.component.html b/src/app/pages/resto-page/resto-page.component.html index d67ac0d..1d59db1 100644 --- a/src/app/pages/resto-page/resto-page.component.html +++ b/src/app/pages/resto-page/resto-page.component.html @@ -1,11 +1,10 @@ - -

Résultats :

-
-
-
- -
-
+ +
+ +
+ + +