Avoir une réponse au click d'un button

Version imprimable

Bonjour,

Alors j'ai créer un script avec l'api de google afin de calculer la distance entre deux points et obtenir un tarif en fonction de la distance. Le soucis qui se posent à moi c'est que je dois cliquer deux fois sur le bouton afin d'avoir la réponse. Je ne vois pas d'où vient mon problème. J'expose mon code ci-dessous.

MapService.ts

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
import { Injectable } from '@angular/core';
 
@Injectable({
  providedIn: 'root'
})
export class MapService {
 
  distance: number;
  temps: any;
 
  constructor() { }
 
  public calculerDistance(origin: string, dest: string) {
    return new google.maps.DistanceMatrixService()
    .getDistanceMatrix({'origins': [origin], 'destinations': [dest], travelMode: google.maps.TravelMode.DRIVING},
      (results: any) => {
        // console.log('distance entre les -- ', results.rows[0].elements[0].distance.value/1000);
        this.distance = results.rows[0].elements[0].distance.value/1000;
        this.temps = results.rows[0].elements[0].duration.value/60;
        console.log(this.distance);
        console.log(this.temps);
        // enregistrer le result sur le storage local de votre navigateur
        localStorage.setItem('distance', JSON.stringify(this.distance));
        localStorage.setItem('temps', JSON.stringify(this.temps));
      }
    );
  }
 
  public calculTarif () {
    if(this.distance < 5 ) {
      return '10€'
    }
    else if (this.distance > 5 && this.distance < 10 ) {
      return '20€'
    }
    else if (this.distance > 10 ) {
      return '30€'
    }
    else {
      return 'nous contacter'
    }
  }
}

calcul.component.ts

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
 
import { Component, NgZone, OnInit } from '@angular/core';
import { FormBuilder } from '@angular/forms';
import { MapService } from '../services/map.service';
 
@Component({
  selector: 'app-calcul',
  templateUrl: './calcul.component.html',
  styleUrls: ['./calcul.component.css']
})
export class CalculComponent implements OnInit {
 
  form: any;
  pickupLoc: string;
  destLoc: string;
  distance: number;
  tarif: any;
 
  constructor(private ngZone: NgZone, private fb: FormBuilder, private mapService: MapService) { }
 
  ngOnInit(): void {
    this.form = this.fb.group({
      address1: [''],
      address2: ['']
    });
    this.initAutocomplete();
  }
 
  initAutocomplete() {
    let autocomplete = new google.maps.places.Autocomplete(document.getElementById('search_address') as HTMLInputElement);
    autocomplete.addListener("place_changed", () => {
      this.ngZone.run(() => {
        //retrouver les lieux
        let place: google.maps.places.PlaceResult = autocomplete.getPlace();
        // console.log('place is ', place);
        // this.form.address1 = place.formatted_address;
        this.pickupLoc = place.formatted_address
        //console.log('address 1 ', this.form.address1);
        this.form.patchValue({
          address1 : this.pickupLoc,
          address2: ""
        })
        //verify result
        if (place.geometry === undefined || place.geometry === null) {
          return;
        }
      })
    });
    let autocomplete1 = new google.maps.places.Autocomplete(document.getElementById('dest_address') as HTMLInputElement);
    autocomplete1.addListener("place_changed", () => {
      this.ngZone.run(() => {
        //retrouver les lieux de l'address 2
        let place1: google.maps.places.PlaceResult = autocomplete1.getPlace();
        this.destLoc = place1.formatted_address
        // console.log('pickup ', this.form.pickupLocation);
        this.form.patchValue({
          address1 : this.pickupLoc,
          address2: this.destLoc
        })
        //verify result
        if (place1.geometry === undefined || place1.geometry === null) {
          return;
        }
      })
    });
  }
 
  getDist(){
    this.mapService.calculerDistance(this.pickupLoc, this.destLoc);
    this.distance = this.mapService.distance;
    this.tarif = this.mapService.calculTarif();
    console.log(this.tarif);
 }
}

calcul.component.html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<form [formGroup]="form">
 
  <div class="input-group">
   <input formControlName="address1"  id="search_address" type="text" required>
   <span class="highlight"></span>
   <span class="bar"></span>
   <label>Taper address 1</label>
 </div>
 
 <div class="input-group">
   <input formControlName="address2" id="dest_address" type="text" required>
   <span class="highlight"></span>
   <span class="bar"></span>
   <label>Taper address 2</label>
 </div>
 
 <button type="submit" (click)="getDist()">Calculer</button>
 
</form>
 
<h2>La distance est  <span>
 <strong>{{distance}}</strong>
</span></h2>

Merci pour votre aide

Code:

1
2
3
4
5
6
7
8
9
  getDist(){
console.log('0000000000000000');
    this.mapService.calculerDistance(this.pickupLoc, this.destLoc);
console.log('22222222222222');
    this.distance = this.mapService.distance;
    this.tarif = this.mapService.calculTarif();
    console.log(this.tarif);
 }

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

  public calculerDistance(origin: string, dest: string) {
    return new google.maps.DistanceMatrixService()
    .getDistanceMatrix({'origins': [origin], 'destinations': [dest], travelMode: google.maps.TravelMode.DRIVING},
      (results: any) => {
console.log('11111111111111111');
        // console.log('distance entre les -- ', results.rows[0].elements[0].distance.value/1000);
        this.distance = results.rows[0].elements[0].distance.value/1000;
        this.temps = results.rows[0].elements[0].duration.value/60;
        console.log(this.distance);
        console.log(this.temps);
        // enregistrer le result sur le storage local de votre navigateur
        localStorage.setItem('distance', JSON.stringify(this.distance));
        localStorage.setItem('temps', JSON.stringify(this.temps));
      }
    );
  }

dans la console ça donne quoi ?

logiquement on devrait avoir :
000000000000000
111111111111111
222222222222222

si l'ordre est different tu va comprendre pourquoi

19/05/2021, 19h55
angie13003

effectivement je n'ai pas le bon ordre, j'ai
000000000
222222222
111111111

donc cela veut dire qu'il appel à mon service pas au bon moment ? Ou est ce que mon service est trop long à répondre ?

qu'est ce qu'il faudrait faire ?
19/05/2021, 20h34
krakatoa

il faut faire une promesse avec la fonction : calculerDistance

alors j'ai commencé à construire ma fonction promise mais je ne suis absolument pas sur de moi. Je débute et je n'ai pas compris vraiment comment elle fonctionnait.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
  public calculerDistance(origin: string, dest: string) {
    let promise = new Promise((resolve, reject) => {
      return new google.maps.DistanceMatrixService()
      .getDistanceMatrix({'origins': [origin], 'destinations': [dest], travelMode: google.maps.TravelMode.DRIVING},
        (results: any) => {
          console.log('11111111111111111');
          // console.log('distance entre les -- ', results.rows[0].elements[0].distance.value/1000);
          this.distance = results.rows[0].elements[0].distance.value/1000;
          this.temps = results.rows[0].elements[0].duration.value/60;
          console.log(this.distance);
          console.log(this.temps);
          // enregistrer le result sur le storage local de votre navigateur
          localStorage.setItem('distance', JSON.stringify(this.distance));
          localStorage.setItem('temps', JSON.stringify(this.temps));
        }
      );
    })
  }

est ce que c'est bon ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
  public calculerDistance(origin: string, dest: string) {
    let promise = new Promise((resolve, reject) => {
      return new google.maps.DistanceMatrixService()
      .getDistanceMatrix({'origins': [origin], 'destinations': [dest], travelMode: google.maps.TravelMode.DRIVING},
        (results: any) => {
          console.log('11111111111111111');
          // console.log('distance entre les -- ', results.rows[0].elements[0].distance.value/1000);
          this.distance = results.rows[0].elements[0].distance.value/1000;
          this.temps = results.rows[0].elements[0].duration.value/60;
          console.log(this.distance);
          console.log(this.temps);
          // enregistrer le result sur le storage local de votre navigateur
          localStorage.setItem('distance', JSON.stringify(this.distance));
          localStorage.setItem('temps', JSON.stringify(this.temps));

          resolve();         // déclenche la fin de la promesse
                                                                            // on peut aussi retourner des données    resolve(...données...);
        }
      );
    })
  }

Code:

1
2
3
4
5
6
7
8
9
10
  getDist(){
console.log('0000000000000000');
    this.mapService.calculerDistance(this.pickupLoc, this.destLoc).then ( res => {                          //    res contient les données si le resolve en fournie
        console.log('22222222222222');
        this.distance = this.mapService.distance;
        this.tarif = this.mapService.calculTarif();
        console.log(this.tarif);
    });
 }

Bonjour et merci pour ton aide hier

alors voici le fonction promise que j'ai faite

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
  public calculerDistance(origin: string, dest: string): Promise<any> {
    let promise = new Promise((resolve, reject) => {
      return new google.maps.DistanceMatrixService()
      .getDistanceMatrix({'origins': [origin], 'destinations': [dest], travelMode: google.maps.TravelMode.DRIVING},
        (results: any) => {
          console.log('11111111111111111');
          // console.log('distance entre les -- ', results.rows[0].elements[0].distance.value/1000);
          this.distance = results.rows[0].elements[0].distance.value/1000;
          this.temps = results.rows[0].elements[0].duration.value/60;
          console.log(this.distance);
          console.log(this.temps);
          // enregistrer le result sur le storage local de votre navigateur
          localStorage.setItem('distance', JSON.stringify(this.distance));
          localStorage.setItem('temps', JSON.stringify(this.temps));
          resolve(resultat);     //doit retourner une valeur
        }
      );
    })
    return promise;
  }

Code:

1
2
3
4
5
6
7
8
9
10
 
  getDist(): Promise<any>{
    console.log('0000000000000000');
    return this.mapService.calculerDistance(this.pickupLoc, this.destLoc).then(res => {     //une fonction promise doit retourner une valeur 
      console.log('22222222222222');
      this.distance = this.mapService.distance;
      this.tarif = this.mapService.calculTarif();
      console.log(this.tarif);
    });
  }

lors du test, dans ma console, il lit bien le
0000000000
1111111111
2222222222

Ca marche parfaitement
merci beaucoup

une fonction à besoin de tel ou tel variables pour fonctionner ainsi on peut contrôler les variables c.a.d sa présence, s'il contient ou pas des valeurs...
si on utilise des variables en globale dans la fonction, on ne sait pas si ces variables ils ont été mis à jour, quand il a été modifié, par qui, par quoi, on ne peut pas vérifier sa validité(si c'est un number, un string...) .....

bien sur, c'est une bonne pratique d'avoir des variables dans un service dans le but de sauvegarder son état.

c'est au niveau des fonctions que ça pose problème :

la bonne pratique :
Code:

1 2 3 4 5 6 7 this.calcul(this.a, this.b); ... ... calcul(a: number, b: number): number { return a + b }
mauvaise pratique :
Code:

1 2 3 4 calcul() { return this.a + this.b; }
l'idée est la même pour la promesse, c'est comme une fonction qui retourne un résultat
le résultat tu le passes dans le resolve(....) :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 public calculerDistance(origin: string, dest: string): Promise<any> { let promise = new Promise((resolve, reject) => { return new google.maps.DistanceMatrixService() .getDistanceMatrix({'origins': [origin], 'destinations': [dest], travelMode: google.maps.TravelMode.DRIVING}, (results: any) => { let distance = results.rows[0].elements[0].distance.value/1000; let temps = results.rows[0].elements[0].duration.value/60; // enregistrer le result sur le storage local de votre navigateur localStorage.setItem('distance', JSON.stringify(distance)); localStorage.setItem('temps', JSON.stringify(temps)); resolve({ distance: distance, temps: temps}); } ); }) return promise; }
Code:

1 2 3 4 5 6 7 8 9 getDist(): Promise<any>{ return this.mapService.calculerDistance(this.pickupLoc, this.destLoc).then((data: any) => { this.distance = data.distance; this.tarif = this.mapService.calculTarif(...data.temps???..., data.distance..???); }); }

20/05/2021, 09h10
angie13003

Merci beaucoup pour ces explications.

Je suis novice, j'apprend seul en effectuant ce projet et il y vrai que j'ai pas compris encore toute les logiques des fonctions.

Du coup j'ai corrigé mon code avec tes nouvelles indications et cela marche parfaitement.

Merci

j'ai du rajouter des conditions dans ma fonction calcul tarif et il ne comprend jamais en compte la deuxième condition

map.service.ts

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
  public calculerDistance(origin: string, dest: string): Promise<any> {
    let promise = new Promise((resolve, reject) => {
      return new google.maps.DistanceMatrixService()
      .getDistanceMatrix({'origins': [origin], 'destinations': [dest], travelMode: google.maps.TravelMode.DRIVING},
        (results: any) => {
          this.distance = results.rows[0].elements[0].distance.value/1000;
          this.temps = results.rows[0].elements[0].duration.value/60;
          console.log(this.distance);
          console.log(this.temps);
          // enregistrer le result sur le storage local de votre navigateur
          localStorage.setItem('distance', JSON.stringify(this.distance));
          localStorage.setItem('temps', JSON.stringify(this.temps));
          resolve({ distance: this.distance, temps: this.temps});
        }
      );
    });
    return promise;
  }
 
  public calculTarif (distance, formulaBooking) {
    if (distance < 5 || formulaBooking === 'technicalControl') {
      return '10€';
    }
    else if (distance > 5 && distance < 10 || formulaBooking === 'technicalControl') {
      return '20€';
    }
    else if (distance > 10 || formulaBooking === 'technicalControl') {
      return '30€';
    }
    else if (distance < 5 || formulaBooking === 'forth') {
      return '40';
    }
    else if (distance > 5 && distance < 10 || formulaBooking === 'forth') {
      return '50';
    }
    else if (distance > 10 || formulaBooking === 'forth') {
      return '60';
    }
    else if (distance < 5 || formulaBooking === 'back') {
      return '70';
    }
    else if (distance > 5 && distance < 10 || formulaBooking === 'back') {
      return '80';
    }
    else if (distance > 10 || formulaBooking === 'back') {
      return '90';
    }
    else if (distance < 5 || formulaBooking === 'round') {
      return '100';
    }
    else if (distance > 5 && distance < 10 || formulaBooking === 'round') {
      return '110';
    }
    else if (distance > 10 || formulaBooking === 'round') {
      return '120';
    }
    else {
      return 'nous contacter';
    }
  }

calcul.component.ts

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
  ngOnInit(): void {
    this.form = this.fb.group({
      address1: [''],
      address2: [''],
      formulaBooking: ['']
    });
    this.initAutocomplete();
  }
 
  initAutocomplete() {
    let autocomplete = new google.maps.places.Autocomplete(document.getElementById('search_address') as HTMLInputElement);
    autocomplete.addListener("place_changed", () => {
      this.ngZone.run(() => {
        //retrouver les lieux
        let place: google.maps.places.PlaceResult = autocomplete.getPlace();
        // console.log('place is ', place);
        // this.form.address1 = place.formatted_address;
        this.pickupLoc = place.formatted_address
        //console.log('address 1 ', this.form.address1);
        this.form.patchValue({
          address1 : this.pickupLoc,
          address2: ""
        });
        //verify result
        if (place.geometry === undefined || place.geometry === null) {
          return;
        }
      });
    });
    let autocomplete1 = new google.maps.places.Autocomplete(document.getElementById('dest_address') as HTMLInputElement);
    autocomplete1.addListener("place_changed", () => {
      this.ngZone.run(() => {
        //retrouver les lieux de l'address 2
        let place1: google.maps.places.PlaceResult = autocomplete1.getPlace();
        this.destLoc = place1.formatted_address
        // console.log('pickup ', this.form.pickupLocation);
        this.form.patchValue({
          address1 : this.pickupLoc,
          address2: this.destLoc
        });
        //verify result
        if (place1.geometry === undefined || place1.geometry === null) {
          return;
        }
      });
    });
  }
 
  getDist(): Promise<any>{
    return this.mapService.calculerDistance(this.pickupLoc, this.destLoc)
    .then((data) => {
      this.distance = data.distance;
      this.formulaBooking = this.form.value.formulaBooking;
      this.tarif = this.mapService.calculTarif(data.distance, this.formulaBooking);
      localStorage.setItem('tarif', JSON.stringify(this.tarif));
      console.log(this.formulaBooking);
      console.log(this.tarif);
      this.testTarif = localStorage.getItem('tarif');
    });
 
  }

au niveau des console.log, je récupère bien la valeur de formulaBooking mais je reste toujours dans les 3 premières conditons.

J'ai fait un test avec un distance compris entre 5 et 10 et la valeur de formulaBooking = 'round' donc théoriquement je devrais avoir un tarif de 110 mais dans ma console j'obtiens 20.

Je pense que je dois faire une erreur au niveau de mon test conditionnel ?

20/05/2021, 10h35
krakatoa
faut mettre des parenthèses
Code:

1 2 else if ((distance > 5 && distance < 10) || formulaBooking === 'round') {
corriger avec les parenthèses dans les autres conditions ....

et je pense que c'est un && pas un ||
Code:

1 2 else if (distance > 5 && distance < 10 && formulaBooking === 'round') {
donc du coup comme c'est tous des && donc pas besoin de parenthèse
20/05/2021, 10h40
angie13003

effectivement j'ai vu après mon erreur entre && et ||.

Par contre je vais teste les paranthèses car même en ayant corrigé le || j'avais quand même une erreur

à savoir :

Code:

1
2
3
4
5
 
else if (distance > 5 && distance < 10 && formulaBooking === 'round') {            // 6, 7, 8 ,9
 
 
else if (distance >= 5 && distance =< 10 && formulaBooking === 'round') {       // 5, 6, 7, 8 ,9, 10

Bonjour,

J'ai complexifier ma fonction de calcul de distance et de tarif.
Dans le formulaire le client renseigne son adresse de Prise en charge et/ou son adresse de restitution en fonction de la formule choisit.
L'adresse du partenaire est récupérer en back via l'api.
J'ai donc besoin de calcul la distance entre l'adresse de prise en charge et l'adresse du partenaire ou l'adresse de restitution et l'adresse du partenaire ou l'adresse de prise en charge et l'adresse et l'adresse de restitution et l'adresse du partenaire.

J'ai donc créer une condition dans ma fonction getDist(). mais j'ai deux problèmes :
- pour les deux premières conditions, il me sort l'erreur Cannot read property 'length' of undefined
- pour la troisième condition, je ne sais pas qu'est ce que je dois retourner car il me sort l'erreur error TS2322: Type 'number' is not assignable to type 'Promise<any>'.

voici le code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
  getDist(): Promise<any>{
    console.log(222222);
    if (this.addressForth.length != null && this.addressBack.length === null) {
      console.log(333333);
      return this.mapService.calculerDistance(this.addressForth, this.addressPartner)
      .then((data) => {
        this.distance = data.distance;
        this.formulaBooking = this.bookingForm.value.formulaBooking;
        this.tarif = this.mapService.calculTarif(this.distance, this.formulaBooking);
        localStorage.setItem('tarif', JSON.stringify(this.tarif));
        console.log(this.formulaBooking);
        console.log(this.tarif);
        this.testTarif = localStorage.getItem('tarif');
      });
    } else if (this.addressForth.length === null && this.addressBack.length != null) {
      console.log(44444);
      return this.mapService.calculerDistance(this.addressPartner, this.addressBack)
      .then((data) => {
        this.distance = data.distance;
        this.formulaBooking = this.bookingForm.value.formulaBooking;
        this.tarif = this.mapService.calculTarif(this.distance, this.formulaBooking);
        localStorage.setItem('tarif', JSON.stringify(this.tarif));
        console.log(this.formulaBooking);
        console.log(this.tarif);
        this.testTarif = localStorage.getItem('tarif');
      });
    } else if (this.addressForth.length != null && this.addressBack.length != null) {
      console.log(55555);
      this.mapService.calculerDistance(this.addressForth, this.addressPartner)
      .then((data) => {
        this.distanceForth = data.distance;
        this.formulaBooking = this.bookingForm.value.formulaBooking;
        this.tarif = this.mapService.calculTarif(this.distance, this.formulaBooking);
        localStorage.setItem('tarif', JSON.stringify(this.tarif));
        console.log(this.formulaBooking);
        console.log(this.tarif);
        this.testTarif = localStorage.getItem('tarif');
      });
      this.mapService.calculerDistance(this.addressPartner, this.addressBack)
      .then((data) => {
        this.distanceBack = data.distance;
        this.formulaBooking = this.bookingForm.value.formulaBooking;
        this.tarif = this.mapService.calculTarif(this.distance, this.formulaBooking);
        localStorage.setItem('tarif', JSON.stringify(this.tarif));
        console.log(this.formulaBooking);
        console.log(this.tarif);
        this.testTarif = localStorage.getItem('tarif');
      });
    return this.distanceForth, this.distanceBack;
    }
  }

25/05/2021, 11h25
krakatoa
Citation:

Cannot read property 'length' of undefined

donc il essai d'appliquer la fonction length sur une variable qui est undefined
Code:

1 2 Type 'number' is not assignable to type 'Promise<any>'.
tu retournes un number alors que la fonction attends en retour une promise !

alors j'ai test ce code également j'ai pas mis la dernière condition pour le moment déjà j'essaie de trouver la solution pour ces 2 codes.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
  getDist(): Promise<any>{
    console.log(111111);
    if (this.addressForth != "" && this.addressBack === "") {
      console.log(333333);
      return this.mapService.calculerDistance(this.addressForth, this.addressPartner)
      .then((data) => {
        this.distance = data.distance;
        this.formulaBooking = this.bookingForm.value.formulaBooking;
        this.tarif = this.mapService.calculTarif(this.distance, this.formulaBooking);
        localStorage.setItem('tarif', JSON.stringify(this.tarif));
        console.log(this.formulaBooking);
        console.log(this.tarif);
        this.testTarif = localStorage.getItem('tarif');
      });
    } else if (this.addressForth === "" && this.addressBack != "") {
      console.log(44444);
      return this.mapService.calculerDistance(this.addressPartner, this.addressBack)
      .then((data) => {
        this.distance = data.distance;
        this.formulaBooking = this.bookingForm.value.formulaBooking;
        this.tarif = this.mapService.calculTarif(this.distance, this.formulaBooking);
        localStorage.setItem('tarif', JSON.stringify(this.tarif));
        console.log(this.formulaBooking);
        console.log(this.tarif);
        this.testTarif = localStorage.getItem('tarif');
      });

Dans cette essai je n'ai plus d'erreur. Le problème que j'ai c'est qu'il ne rentre pas dans la condition. j'ai bien le console.log(111111) mais c'est tout.

Le truc c'est que dans mon formulaire:

soit je remplie uniquement l'addressForth et dans ce cas il y a uniquement le calcul AddressForth / AddressPartner à faire
soit je remplie uniquement l'addressBack et dans ce cas il y a uniquement le calcul AddressBack / AddressPartner à faire
soit je remplie adressForth et addressBack et dans ce cas je calcul AddressForth / AddressPartner et AddressPartner / AddressBack

Bonjour,

J'ai trouvé la solution pour les deux premières conditions, la durée, la distance et le tarif marche parfaitement.
En revanche pour la troisième condition, soit quand dans mon formulaire je rentre le informations de addressForth et addressBack, j'ai un problème au niveau du calcul du tarif. Ce dernier ce fait en premier donc forcement je suis toujours dans le dernier cas avec la réponse 'nous contacter'.

Voici le code de mon service

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
 
  public calculerDistance(origin: string, dest: string): Promise<any> {
    let promise = new Promise((resolve, reject) => {
      return new google.maps.DistanceMatrixService()
      .getDistanceMatrix({'origins': [origin], 'destinations': [dest], travelMode: google.maps.TravelMode.DRIVING},
        (results: any) => {
          // console.log('distance entre les -- ', results.rows[0].elements[0].distance.value/1000);
          this.distance = results.rows[0].elements[0].distance.value/1000;
          this.temps = results.rows[0].elements[0].duration.value/60;
          console.log('disatnce',this.distance);
          console.log('duration', this.temps);
          // enregistrer le result sur le storage local de votre navigateur
          localStorage.setItem('distance', JSON.stringify(this.distance));
          localStorage.setItem('temps', JSON.stringify(this.temps));
          resolve({ distance: this.distance, temps: this.temps});
        }
      );
    });
    return promise;
  }
 
  public calculTarifTwoAddress (distance, formulaBooking) {
 
     if (distance <= 5 && formulaBooking === 'forth') {
        return '29,90€';
      }
      else if ((distance > 5 && distance <= 10) && formulaBooking === 'forth') {
        return '39,90€';
      }
      else if ((distance > 10 && distance <= 15) && formulaBooking === 'forth') {
        return '49,90€';
      }
      else if (distance <= 5 && formulaBooking === 'back') {
        return '29,90€';
      }
      else if ((distance > 5 && distance <= 10) && formulaBooking === 'back') {
        return '39,90€';
      }
      else if ((distance > 10 && distance <= 15) && formulaBooking === 'back') {
        return '49,90€';
      }
      else {
        return 'nous contacter';
      }
 
  }
 
  public calculTarifThreeAddress (distanceForth, distanceBack, formulaBooking) {
    let promise = new Promise ((resolve, reject) => {
        if (distanceForth <= 5 && distanceBack<= 5 && formulaBooking === 'round') {
          return this.tarif = '49,90€';
        }
        else if ((distanceForth > 5 && distanceForth <= 10) && (distanceBack > 5 && distanceBack <= 10) && formulaBooking === 'round') {
          return this.tarif = '69,90€';
        }
        else if ((distanceForth <= 5 ) && (distanceBack > 5 && distanceBack <= 10) && formulaBooking === 'round') {
          return this.tarif = '69,90€';
        }
        else if ((distanceBack <= 5 ) && (distanceForth > 5 && distanceForth <= 10)&& formulaBooking === 'round') {
          return this.tarif = '69,90€';
        }
        else if ((distanceForth > 10 && distanceForth <= 15) && (distanceBack > 10 && distanceBack <= 15) && formulaBooking === 'round') {
          return this.tarif = '89,90€';
        }
        else {
          return this.tarif = 'nous contacter';
        }
      });
    return promise;
  }

voici le code de mon component

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
 
  initAutocomplete() {
    let autocomplete = new google.maps.places.Autocomplete(document.getElementById('addressForth') as HTMLInputElement);
    autocomplete.addListener("place_changed", () => {
      this.ngZone.run(() => {
        //retrouver les lieux
        let place: google.maps.places.PlaceResult = autocomplete.getPlace();
        // console.log('place is ', place);
        // this.form.address1 = place.formatted_address;
        this.addressForth = place.formatted_address
        //console.log('address 1 ', this.form.address1);
        console.log(this.bookingForm);
        this.bookingForm.patchValue({
          addressForth : this.addressForth,
          addressBack: ""
        });
        //verify result
        if (place.geometry === undefined || place.geometry === null) {
          return;
        }
      });
    });
    let autocomplete1 = new google.maps.places.Autocomplete(document.getElementById('addressBack') as HTMLInputElement);
    autocomplete1.addListener("place_changed", () => {
      this.ngZone.run(() => {
        //retrouver les lieux de l'address 2
        let place1: google.maps.places.PlaceResult = autocomplete1.getPlace();
        this.addressBack = place1.formatted_address
        // console.log('pickup ', this.form.pickupLocation);
        console.log(this.bookingForm);
        this.bookingForm.patchValue({
          addressForth : this.addressForth || "",
          addressBack: this.addressBack
        });
        //verify result
        if (place1.geometry === undefined || place1.geometry === null) {
          return;
        }
      });
    });
    let autocomplete2 = new google.maps.places.Autocomplete(document.getElementById('addressForth1') as HTMLInputElement);
    autocomplete2.addListener("place_changed", () => {
      this.ngZone.run(() => {
        //retrouver les lieux de l'address 2
        let place2: google.maps.places.PlaceResult = autocomplete2.getPlace();
        this.addressForth = place2.formatted_address
        // console.log('pickup ', this.form.pickupLocation);
        this.bookingForm.patchValue({
          addressForth : this.addressForth || "",
          addressBack: this.addressBack
        });
        //verify result
        if (place2.geometry === undefined || place2.geometry === null) {
          return;
        }
      });
    });
    let autocomplete3 = new google.maps.places.Autocomplete(document.getElementById('addressBack1') as HTMLInputElement);
    autocomplete3.addListener("place_changed", () => {
      this.ngZone.run(() => {
        //retrouver les lieux de l'address 2
        let place3: google.maps.places.PlaceResult = autocomplete3.getPlace();
        this.addressBack = place3.formatted_address
        // console.log('pickup ', this.form.pickupLocation);
        this.bookingForm.patchValue({
          addressForth : this.addressForth || "",
          addressBack: this.addressBack
        });
        //verify result
        if (place3.geometry === undefined || place3.geometry === null) {
          return;
        }
      });
    });
  }
 
  getDist(): Promise<any>{
    if (this.addressForth != undefined && this.addressBack === undefined) {
      return this.mapService.calculerDistance(this.addressForth, this.addressPartner)
      .then((data) => {
        this.distanceForth = data.distance;
        this.durationForth = data.distance;
        this.formulaBooking = this.bookingForm.value.formulaBooking;
        this.tarif = this.mapService.calculTarifTwoAddress(this.distanceForth, this.formulaBooking);
        localStorage.setItem('tarif', JSON.stringify(this.tarif));
        console.log('tarif',this.tarif);
      });
    } else if (this.addressForth === undefined && this.addressBack != undefined) {
      return this.mapService.calculerDistance(this.addressPartner, this.addressBack)
      .then((data) => {
        this.distanceBack = data.distance;
        this.durationBack = data.duration;
        this.formulaBooking = this.bookingForm.value.formulaBooking;
        this.tarif = this.mapService.calculTarifTwoAddress(this.distanceBack, this.formulaBooking);
        localStorage.setItem('tarif', JSON.stringify(this.tarif));
        console.log('tarif',this.tarif);
      });
    } else if (this.addressForth != undefined && this.addressBack != undefined) {
      (
        this.mapService.calculerDistance(this.addressForth, this.addressPartner)
        .then((data) => {
          this.distanceForth = data.distance;
          this.durationForth = data.duration;
          localStorage.setItem('distanceForth', JSON.stringify(this.distanceForth));
          localStorage.setItem('durationForth', JSON.stringify(this.durationForth));
        })
      );
      (
        this.mapService.calculerDistance(this.addressPartner, this.addressBack)
        .then((data) => {
          this.distanceBack = data.distance;
          this.durationBack = data.duration;
          localStorage.setItem('distanceBack', JSON.stringify(this.distanceBack));
          localStorage.setItem('durationBack', JSON.stringify(this.durationBack));
        })
      )
      this.tarif = this.mapService.calculTarifThreeAddress(this.distanceForth, this.distanceBack, this.formulaBooking);
      console.log('tarif condition 3', this.tarif);
    }}