Lecture d'un objet JSON

**angie13003** · 22/06/2021, 15h28

Bonjour,

Alors du développement en local de mon site, je n'avais pas de problème. Je viens de passer mon site sur serveur et j'ai ce problème qui est apparut sur une page.

ERROR Error: Uncaught (in promise): SyntaxError: Unexpected token u in JSON at position 0
SyntaxError: Unexpected token u in JSON at position 0

A cause de ce problème ma page ne s'affiche même pas. Je ne sais pas ce qui plante dans le JSON car en local cela fonctionne sans problème.

html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
<div class="row mt-5 mb-5">
  <div class="col-12 text-center">
      <h2>Prendre un rendez-vous</h2>
  </div>
</div>
 
<div class="row">
  <form class="col-10 offset-1" [formGroup]="bookingForm" (ngSubmit)="onSubmitFormBooking()">
    <div class="row">
      <div class="col-6">
        <h3 class="text-center mb-4">Choix de la formule</h3>
      </div>
    </div>
    <div class="row d-flex">
      <div class="mb-3 col-6">
        <div class="row input-field d-flex flex-row mb-2">
          <div class="input-field d-flex mt-radio flex-colunm col-7">
                  <p class="d-flex flex-row">
                    <input name="formulaBooking" type="radio" value="simple" class="validate m-auto" id="simple" formControlName="formulaBooking" (change)="changeFormulaBooking($event)">
                    <label for="formulaBooking">Trajet simple</label>
                  </p>
          </div>
          <div class="input-field d-flex mt-radio flex-colunm col-5">
                  <p class="d-flex flex-row">
                    <input name="formulaBooking" type="radio" value="round" class="validate m-auto" id="round" formControlName="formulaBooking" (change)="changeFormulaBooking($event)">
                    <label for="formulaBooking">Aller/Retour</label>
                  </p>
          </div>
          <div class="input-field d-flex mt-radio flex-colunm col-5">
            <p class="d-flex flex-row">
              <input name="formulaBooking" type="radio" value="technicalControl" class="validate m-auto" id="round" formControlName="formulaBooking" (change)="changeFormulaBooking($event)">
              <label for="formulaBooking">Contrôle technique</label>
            </p>
    </div>
        </div>
        <div class="row input-field d-flex flex-row mb-2" *ngIf="this.bookingForm.value.formulaBooking === 'simple' || this.bookingForm.value.formulaBooking === 'forth' || this.bookingForm.value.formulaBooking === 'back' ">
          <div class="input-field d-flex mt-radio flex-colunm">
            <label class="col-4 mr-0" for="formulaBooking">Type de trajet</label>
            <select class="validate col-8" id="formulaBooking" formControlName="formulaBooking" required>
              <option value="Selectionnez un type de trajet" disabled selected>Sélectionnez un type de trajet</option>
              <option value="forth" (change)="changeFormulaBooking($event)">Prise en charge</option>
              <option value="back" (change)="changeFormulaBooking($event)">Restitution</option>
            </select>
          </div>
        </div>
      </div>
      <div class="mb-3 col-6" [ngClass]="{'d-none': this.bookingForm.value.formulaBooking != 'forth' && this.bookingForm.value.formulaBooking != 'back'}">
        <div class="input-field d-flex flex-row mb-70">
          <div class="input-field col-12">
            <div class="label" [ngClass]="{'d-none': this.bookingForm.value.formulaBooking != 'forth'}">
              <label for="address" >Adresse de prise en charge</label>
            </div>
            <div class="label" [ngClass]="{'d-none': this.bookingForm.value.formulaBooking != 'back'}">
              <label for="address" >Adresse de restitution</label>
            </div>
            <input type="text" class="validate" id="address" formControlName="address">
            <!-- <div class="messageError">
                <sup>*</sup>Champ obligatoire
            </div> -->
          </div>
        </div>
      </div>
      <div class="mb-3 col-6" [ngClass]="{'d-none': this.bookingForm.value.formulaBooking != 'round'}" && [ngClass]="{'d-none': this.bookingForm.value.formulaBooking != 'technicalControl'}">
        <div class="input-field d-flex flex-row mb-70">
          <div class="input-field col-12">
            <label for="addressForth">Adresse de prise en charge</label>
            <input type="text" class="validate" id="addressForth1" formControlName="addressForth">
            <!-- <div class="messageError">
                <sup>*</sup>Champ obligatoire
            </div> -->
          </div>
        </div>
        <div class="input-field d-flex flex-row mb">
          <div class="input-field col-12">
            <label for="addressBack">Adresse de restitution</label>
            <input type="text" class="validate" id="addressBack1" formControlName="addressBack">
            <!-- <div class="messageError">
                <sup>*</sup>Champ obligatoire
            </div> -->
          </div>
        </div>
      </div>
    </div>
    <div class="row d-flex mb-5">
      <div class="input-field text-center m-auto">
        <a class="m-auto size" id="btn" (click)="getDist()">Tarif</a>
      </div>
      <div class="input-field text-center" *ngIf="this.tarif != undefined && this.tarif != 'nous contacter'">
        <h3>Le tarif de la prestation est de {{ tarif }} €</h3>
      </div>
      <div class="input-field text-center" *ngIf="this.tarif === 'nous contacter'">
        <h3><strong>Distance trop importante trajet indisponible</strong></h3>
      </div>
    </div>
 
    <div class="row d-flex">
      <div class="col-6 colInfoLeft" *ngIf="this.tarif != undefined && this.tarif != 'nous contacter' ">
        <h3 class="text-center mb-4">Information client</h3>
        <div class="input-field d-flex flex-row mb">
          <div class="input-field col-6">
            <label for="firstNameCustomer">Nom du client</label>
            <input required type="text" class="validate" id="firstNameCustomer" formControlName="firstNameCustomer">
            <!-- <div class="messageError">
                <sup>*</sup>Champ obligatoire
            </div> -->
          </div>
          <div class="input-field col-6">
            <label for="lastNameCustomer">Prénom du client</label>
            <input required type="text" class="validate" id="lastNameCustomer" formControlName="lastNameCustomer">
            <!-- <div class="messageError">
                <sup>*</sup>Champ obligatoire
            </div> -->
          </div>
        </div>
        <div class="input-field d-flex flex-row mb">
          <div class="input-field col-6">
            <label for="phoneCustomer">Téléphone du client</label>
            <input required type="text" class="validate" id="phoneCustomer" formControlName="phoneCustomer">
            <!-- <div class="messageError">
              <sup>*</sup>Champ obligatoire
            </div> -->
          </div>
          <div class="input-field col-6">
            <label for="mailCustomer">E-mail</label>
            <input type="text" class="validate" id="mailCustomer" formControlName="mailCustomer">
            <!-- <div class="messageError">
                <sup>*</sup>Champ obligatoire
            </div> -->
          </div>
        </div>
        <div class="input-field d-flex flex-row mb">
          <div class="input-field col-12">
            <label for="dateOfBirthdayCustomer">Date de naissance du client</label>
            <input type="date" class="validate" id="dateOfBirthdayCustomer" formControlName="dateOfBirthdayCustomer">
            <!-- <div class="messageError">
                <sup>*</sup>Champ obligatoire
            </div> -->
          </div>
        </div>
        <h3 class="text-center mb-4 mt-4">Information véhicule</h3>
        <div class="input-field d-flex flex-row mb">
          <div class="input-field col-12">
            <label for="licensePlateCar">Plaque d'immatriculation</label>
            <input required type="text" class="validate" id="licensePlateCar" formControlName="licensePlateCar">
            <!-- <div class="messageError">
              <sup>*</sup>Champ obligatoire
            </div> -->
          </div>
        </div>
        <div class="mt-5 mb-5 text-center">
          <a class="m-auto size" id="btn" (click)="getCar()">Valider la plaque</a>
        </div>
        <div class="input-field d-flex flex-row mb">
          <div class="input-field col-6"*ngIf="this.brandCar != null" >
            <label for="brandCar">Marque</label>
            <input required type="text" class="validate" id="brandCar" formControlName="brandCar">
          </div>
          <div class="input-field col-6" *ngIf="this.modelCar != null">
            <label for="modelCar">Modèle</label>
            <input required type="text" class="validate" id="modelCar" formControlName="modelCar">
          </div>
        </div>
        <div class="input-field d-flex flex-row mb">
          <div class="input-field col-6" *ngIf="this.dateOfCirculationCar != null">
            <label for="dateOfCirculationCar">Date de mise en circulation</label>
            <input required type="text" class="validate" id="dateOfCirculationCar" formControlName="dateOfCirculationCar">
          </div>
          <div class="input-field col-6" *ngIf="this.motorizationCar != null">
            <label for="motorizationCar">Motorisation</label>
            <input required type="text" class="validate" id="motorizationCar" formControlName="motorizationCar">
          </div>
        </div>
        <div class="input-field d-flex flex-row mb">
          <div class="input-field col-6" *ngIf="this.colorCar != null">
            <label for="colorCar">Couleur</label>
            <input required type="text" class="validate" id="colorCar" formControlName="colorCar">
          </div>
          <div class="input-field col-6" *ngIf="this.versionCar != null">
            <label for="versionCar">Version</label>
            <input required type="text" class="validate" id="versionCar" formControlName="versionCar">
          </div>
        </div>
      </div>
      <div class="col-6 text-center" >
        <div class="row" *ngIf="this.formulaBooking === 'forth' ||  this.formulaBooking === 'round' ||  this.formulaBooking === 'technicalControl' ">
          <h3 class="text-center m-auto mb-4">Créneau de prise en charge</h3>
        </div>
        <div class="row" *ngIf="this.formulaBooking === 'forth' ||  this.formulaBooking === 'round' ||  this.formulaBooking === 'technicalControl'">
          <pagination-controls id='pagination1' class="hide-page-numbers m-auto" (pageChange)="p = $event" previousLabel="prec" nextLabel="suiv"></pagination-controls>
        </div>
        <div class="row" *ngIf="this.formulaBooking === 'forth' ||  this.formulaBooking === 'round' ||  this.formulaBooking === 'technicalControl'">
          <div class="col-4 m-auto text-center"*ngFor="let hoursBooking of hoursBookings | paginate: { id: 'pagination1', itemsPerPage: 3, currentPage: p }">
            <p class="hoursBooking">{{ hoursBooking.dateBookingCalendar }}</p>
          </div>
        </div>
        <div class="row" *ngIf="this.formulaBooking === 'forth' ||  this.formulaBooking === 'round' ||  this.formulaBooking === 'technicalControl'">
          <div class="col-4 m-auto text-center" *ngFor="let hoursBooking of hoursBookings | paginate: { id: 'pagination1', itemsPerPage: 3, currentPage: p }">
            <div class="radio-group">
              <input name="hoursForth" type="radio" [value]="hoursBooking.h1bookingCalendar" id="h1Forth-{{hoursBooking.idBookingCalendar}}" class="validate m-auto hoursBookingRadio" formControlName="hoursForth" [ngClass]="{'d-none': hoursBooking.h1bookingCalendar === 'Réservé'}">
              <label class="hoursBookingLabel" for="h1Forth-{{hoursBooking.idBookingCalendar}}" [ngClass]="{'d-none': hoursBooking.h1bookingCalendar === 'Réservé'}">07:30</label>
              <input name="hoursForth" type="radio" [value]="hoursBooking.h2bookingCalendar" id="h2Forth-{{hoursBooking.idBookingCalendar}}" class="validate m-auto hoursBookingRadio" formControlName="hoursForth" [ngClass]="{'d-none': hoursBooking.h2bookingCalendar === 'Réservé'}">
              <label class="hoursBookingLabel" for="h2Forth-{{hoursBooking.idBookingCalendar}}" [ngClass]="{'d-none': hoursBooking.h2bookingCalendar === 'Réservé'}">08:30</label>
              <input name="hoursForth" type="radio" [value]="hoursBooking.h3bookingCalendar" id="h3Forth-{{hoursBooking.idBookingCalendar}}" class="validate m-auto hoursBookingRadio" formControlName="hoursForth" [ngClass]="{'d-none': hoursBooking.h3bookingCalendar === 'Réservé'}">
              <label class="hoursBookingLabel" for="h3Forth-{{hoursBooking.idBookingCalendar}}" [ngClass]="{'d-none': hoursBooking.h3bookingCalendar === 'Réservé'}">09:30</label>
              <input name="hoursForth" type="radio" [value]="hoursBooking.h4bookingCalendar" id="h4Forth-{{hoursBooking.idBookingCalendar}}" class="validate m-auto hoursBookingRadio" formControlName="hoursForth" [ngClass]="{'d-none': hoursBooking.h4bookingCalendar === 'Réservé'}">
              <label class="hoursBookingLabel" for="h4Forth-{{hoursBooking.idBookingCalendar}}" [ngClass]="{'d-none': hoursBooking.h4bookingCalendar === 'Réservé'}">10:30</label>
              <input name="hoursForth" type="radio" [value]="hoursBooking.h5bookingCalendar" id="h5Forth-{{hoursBooking.idBookingCalendar}}" class="validate m-auto hoursBookingRadio" formControlName="hoursForth" [ngClass]="{'d-none': hoursBooking.h5bookingCalendar === 'Réservé'}">
              <label class="hoursBookingLabel" for="h5Forth-{{hoursBooking.idBookingCalendar}}" [ngClass]="{'d-none': hoursBooking.h5bookingCalendar === 'Réservé'}">11:30</label>
              <input name="hoursForth" type="radio" [value]="hoursBooking.h6bookingCalendar" id="h6Forth-{{hoursBooking.idBookingCalendar}}" class="validate m-auto hoursBookingRadio" formControlName="hoursForth" [ngClass]="{'d-none': hoursBooking.h6bookingCalendar === 'Réservé'}">
              <label class="hoursBookingLabel" for="h6Forth-{{hoursBooking.idBookingCalendar}}" [ngClass]="{'d-none': hoursBooking.h6bookingCalendar === 'Réservé'}">13:30</label>
              <input name="hoursForth" type="radio" [value]="hoursBooking.h7bookingCalendar" id="h7Forth-{{hoursBooking.idBookingCalendar}}" class="validate m-auto hoursBookingRadio" formControlName="hoursForth" [ngClass]="{'d-none': hoursBooking.h7bookingCalendar === 'Réservé'}">
              <label class="hoursBookingLabel" for="h7Forth-{{hoursBooking.idBookingCalendar}}" [ngClass]="{'d-none': hoursBooking.h7bookingCalendar === 'Réservé'}">14:30</label>
              <input name="hoursForth" type="radio" [value]="hoursBooking.h8bookingCalendar" id="h8Forth-{{hoursBooking.idBookingCalendar}}" class="validate m-auto hoursBookingRadio" formControlName="hoursForth" [ngClass]="{'d-none': hoursBooking.h8bookingCalendar === 'Réservé'}">
              <label class="hoursBookingLabel" for="h8Forth-{{hoursBooking.idBookingCalendar}}" [ngClass]="{'d-none': hoursBooking.h8bookingCalendar === 'Réservé'}">15:30</label>
              <input name="hoursForth" type="radio" [value]="hoursBooking.h9bookingCalendar" id="h9Forth-{{hoursBooking.idBookingCalendar}}" class="validate m-auto hoursBookingRadio" formControlName="hoursForth" [ngClass]="{'d-none': hoursBooking.h9bookingCalendar === 'Réservé'}">
              <label class="hoursBookingLabel" for="h9Forth-{{hoursBooking.idBookingCalendar}}" [ngClass]="{'d-none': hoursBooking.h9bookingCalendar === 'Réservé'}">16:30</label>
              <input name="hoursForth" type="radio" [value]="hoursBooking.h10bookingCalendar" id="h10Forth-{{hoursBooking.idBookingCalendar}}" class="validate m-auto hoursBookingRadio" formControlName="hoursForth" [ngClass]="{'d-none': hoursBooking.h10bookingCalendar === 'Réservé'}">
              <label class="hoursBookingLabel" for="h10Forth-{{hoursBooking.idBookingCalendar}}" [ngClass]="{'d-none': hoursBooking.h10bookingCalendar === 'Réservé'}">17:30</label>
              <input name="hoursForth" type="radio" [value]="hoursBooking.h11bookingCalendar" id="h11Forth-{{hoursBooking.idBookingCalendar}}" class="validate m-auto hoursBookingRadio" formControlName="hoursForth" [ngClass]="{'d-none': hoursBooking.h11bookingCalendar === 'Réservé'}">
              <label class="hoursBookingLabel" for="h11Forth-{{hoursBooking.idBookingCalendar}}" [ngClass]="{'d-none': hoursBooking.h11bookingCalendar === 'Réservé'}">18:30</label>
            </div>
          </div>
        </div>
 
        <div class="row sepHoursBooking" *ngIf="this.formulaBooking === 'back' ||  this.formulaBooking === 'round' ||  this.formulaBooking === 'technicalControl'">
          <h3 class="text-center m-auto title">Créneau de restitution</h3>
        </div>
        <div class="row" *ngIf="this.formulaBooking === 'back' ||  this.formulaBooking === 'round' ||  this.formulaBooking === 'technicalControl'">
          <pagination-controls id='pagination2' class="hide-page-numbers m-auto" (pageChange)="p2 = $event" previousLabel="prec" nextLabel="suiv"></pagination-controls>
        </div>
        <div class="row" *ngIf="this.formulaBooking === 'back' ||  this.formulaBooking === 'round' ||  this.formulaBooking === 'technicalControl'">
          <div class="col-4 m-auto text-center"*ngFor="let hoursBooking of hoursBookings | paginate: { id: 'pagination2', itemsPerPage: 3, currentPage: p2 }">
            <p class="hoursBooking">{{ hoursBooking.dateBookingCalendar }}</p>
          </div>
        </div>
        <div class="row" *ngIf="this.formulaBooking === 'back' ||  this.formulaBooking === 'round' ||  this.formulaBooking === 'technicalControl'">
          <div class="col-4 m-auto text-center" *ngFor="let hoursBooking of hoursBookings | paginate: { id: 'pagination2', itemsPerPage: 3, currentPage: p2 }">
            <div class="radio-group">
              <input name="hoursBack" type="radio" [value]="hoursBooking.h1bookingCalendar" id="h1Back-{{hoursBooking.idBookingCalendar}}" class="validate m-auto hoursBookingRadio" formControlName="hoursBack" [ngClass]="{'d-none': hoursBooking.h1bookingCalendar === 'Réservé'}">
              <label class="hoursBookingLabel" for="h1Back-{{hoursBooking.idBookingCalendar}}" [ngClass]="{'d-none': hoursBooking.h1bookingCalendar === 'Réservé'}">07:30</label>
              <input name="hoursBack" type="radio" [value]="hoursBooking.h2bookingCalendar" id="h2Back-{{hoursBooking.idBookingCalendar}}" class="validate m-auto hoursBookingRadio" formControlName="hoursBack" [ngClass]="{'d-none': hoursBooking.h2bookingCalendar === 'Réservé'}">
              <label class="hoursBookingLabel" for="h2Back-{{hoursBooking.idBookingCalendar}}" [ngClass]="{'d-none': hoursBooking.h2bookingCalendar === 'Réservé'}">08:30</label>
              <input name="hoursBack" type="radio" [value]="hoursBooking.h3bookingCalendar" id="h3Back-{{hoursBooking.idBookingCalendar}}" class="validate m-auto hoursBookingRadio" formControlName="hoursBack" [ngClass]="{'d-none': hoursBooking.h3bookingCalendar === 'Réservé'}">
              <label class="hoursBookingLabel" for="h3Back-{{hoursBooking.idBookingCalendar}}" [ngClass]="{'d-none': hoursBooking.h3bookingCalendar === 'Réservé'}">09:30</label>
              <input name="hoursBack" type="radio" [value]="hoursBooking.h4bookingCalendar" id="h4Back-{{hoursBooking.idBookingCalendar}}" class="validate m-auto hoursBookingRadio" formControlName="hoursBack" [ngClass]="{'d-none': hoursBooking.h4bookingCalendar === 'Réservé'}">
              <label class="hoursBookingLabel" for="h4Back-{{hoursBooking.idBookingCalendar}}" [ngClass]="{'d-none': hoursBooking.h4bookingCalendar === 'Réservé'}">10:30</label>
              <input name="hoursBack" type="radio" [value]="hoursBooking.h5bookingCalendar" id="h5Back-{{hoursBooking.idBookingCalendar}}" class="validate m-auto hoursBookingRadio" formControlName="hoursBack" [ngClass]="{'d-none': hoursBooking.h5bookingCalendar === 'Réservé'}">
              <label class="hoursBookingLabel" for="h5Back-{{hoursBooking.idBookingCalendar}}" [ngClass]="{'d-none': hoursBooking.h5bookingCalendar === 'Réservé'}">11:30</label>
              <input name="hoursBack" type="radio" [value]="hoursBooking.h6bookingCalendar" id="h6Back-{{hoursBooking.idBookingCalendar}}" class="validate m-auto hoursBookingRadio" formControlName="hoursBack" [ngClass]="{'d-none': hoursBooking.h6bookingCalendar === 'Réservé'}">
              <label class="hoursBookingLabel" for="h6Back-{{hoursBooking.idBookingCalendar}}" [ngClass]="{'d-none': hoursBooking.h6bookingCalendar === 'Réservé'}">13:30</label>
              <input name="hoursBack" type="radio" [value]="hoursBooking.h7bookingCalendar" id="h7Back-{{hoursBooking.idBookingCalendar}}" class="validate m-auto hoursBookingRadio" formControlName="hoursBack" [ngClass]="{'d-none': hoursBooking.h7bookingCalendar === 'Réservé'}">
              <label class="hoursBookingLabel" for="h7Back-{{hoursBooking.idBookingCalendar}}" [ngClass]="{'d-none': hoursBooking.h7bookingCalendar === 'Réservé'}">14:30</label>
              <input name="hoursBack" type="radio" [value]="hoursBooking.h8bookingCalendar" id="h8Back-{{hoursBooking.idBookingCalendar}}" class="validate m-auto hoursBookingRadio" formControlName="hoursBack" [ngClass]="{'d-none': hoursBooking.h8bookingCalendar === 'Réservé'}">
              <label class="hoursBookingLabel" for="h8Back-{{hoursBooking.idBookingCalendar}}" [ngClass]="{'d-none': hoursBooking.h8bookingCalendar === 'Réservé'}">15:30</label>
              <input name="hoursBack" type="radio" [value]="hoursBooking.h9bookingCalendar" id="h9Back-{{hoursBooking.idBookingCalendar}}" class="validate m-auto hoursBookingRadio" formControlName="hoursBack" [ngClass]="{'d-none': hoursBooking.h9bookingCalendar === 'Réservé'}">
              <label class="hoursBookingLabel" for="h9Back-{{hoursBooking.idBookingCalendar}}" [ngClass]="{'d-none': hoursBooking.h9bookingCalendar === 'Réservé'}">16:30</label>
              <input name="hoursBack" type="radio" [value]="hoursBooking.h10bookingCalendar" id="h10Back-{{hoursBooking.idBookingCalendar}}" class="validate m-auto hoursBookingRadio" formControlName="hoursBack" [ngClass]="{'d-none': hoursBooking.h10bookingCalendar === 'Réservé'}">
              <label class="hoursBookingLabel" for="h10Back-{{hoursBooking.idBookingCalendar}}" [ngClass]="{'d-none': hoursBooking.h10bookingCalendar === 'Réservé'}">17:30</label>
              <input name="hoursBack" type="radio" [value]="hoursBooking.h11bookingCalendar" id="h11Back-{{hoursBooking.idBookingCalendar}}" class="validate m-auto hoursBookingRadio" formControlName="hoursBack" [ngClass]="{'d-none': hoursBooking.h11bookingCalendar === 'Réservé'}">
              <label class="hoursBookingLabel" for="h11Back-{{hoursBooking.idBookingCalendar}}" [ngClass]="{'d-none': hoursBooking.h11bookingCalendar === 'Réservé'}">18:30</label>
            </div>
          </div>
        </div>
 
      </div>
      <div class="col-12 mt-5 mb-5 text-center">
        <button class="m-auto" id="btn" type="submit">Ajouter un rendez-vous</button>
      </div>
    </div>
  </form>
</div>

component.ts

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
import { Component, OnInit, NgZone } from '@angular/core';
import { BookingService } from 'src/app/services/booking.service';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Subscription } from 'rxjs';
import { Router } from '@angular/router';
import { PartnerService } from 'src/app/services/partner.service';
import { MapService } from 'src/app/services/map.service';
import { Booking } from 'src/app/models/bookings.model';
import {  } from 'rxjs/add/operator/toPromise';
import { CustomerService } from 'src/app/services/customer.service';
import { Customer } from 'src/app/models/customer.model';
import { SivService } from 'src/app/services/siv.service';
import { first } from 'rxjs/operators';
import { Siv } from 'src/app/models/siv.model';
import { HoursBooking } from 'src/app/models/hoursBooking.model';
import { HoursBookingService } from 'src/app/services/hours-booking.service';
 
@Component({
  selector: 'app-booking-forms',
  templateUrl: './booking-forms.component.html',
  styleUrls: ['./booking-forms.component.css']
})
export class BookingFormsComponent implements OnInit {
 
  hoursBookings: HoursBooking[];
  hoursBookingSubscription: Subscription;
  dateForth: any;
  hoursForth: any;
  hoursBack: any;
  dateBack: any;
  p: number = 1;
  p2: number = 1;
 
  siv: Siv[];
  bookingForm: FormGroup;
  bookings: Booking[];
  bookingSubscription: Subscription;
  address: any;
  addressForth: any;
  addressBack: any;
  distance: number;
  distanceForth: number;
  distanceBack: number;
  durationForth: number;
  durationBack: number;
  tarif: any;
  testTarif: any;
  formulaBooking: any;
  DistanceBooking: any[];
  addressPartner = JSON.parse(localStorage.getItem('addressPartner'));
  customers: Customer[];
  customerSubscription: Subscription;
  modelCar: any;
  brandCar: any;
  dateOfCirculationCar: any;
  motorizationCar: any;
  versionCar: any;
  colorCar: any;
  idAgency = Number(JSON.parse(localStorage.getItem('idAgency')));
 
 
  constructor(private bookingService: BookingService, private router: Router, private formBuilder: FormBuilder, private partnerService: PartnerService, private ngZone: NgZone, private  mapService: MapService, private customerService: CustomerService, private sivService: SivService, private hoursBookingService: HoursBookingService) { }
 
  ngOnInit(): void {
    console.log('adress', this.addressPartner);
    this.bookingForm = this.formBuilder.group({
      addressForth: [''],
      addressBack: [''],
      address: [''],
      formulaBooking: [''],
      firstNameCustomer: [''],
      lastNameCustomer: [''],
      mailCustomer: [''],
      phoneCustomer: [''],
      dateOfBirthdayCustomer: [''],
      addressBilling: [''],
      licensePlateCar: [''],
      modelCar: [''],
      brandCar: [''],
      colorCar: [''],
      versionCar: [''],
      motorizationCar: [''],
      dateOfCirculationCar: [''],
      hoursForth: [''],
      hoursBack: ['']
    });
    this.customerSubscription = this.customerService.customerSubject.subscribe(
      (customers: Customer[]) => {
        this.customers = customers;
      }
    );
    this.customerService.readListCustomer();
    this.hoursBookingSubscription = this.hoursBookingService.hoursBookingSubject.subscribe(
      (hoursBookings: HoursBooking[]) => {
        this.hoursBookings = hoursBookings;
      }
    );
    this.hoursBookingService.readListHoursBooking();
    this.initAutocomplete();
  }
 
  changeFormulaBooking(e) {
  }
 
  initAutocomplete() {
    let autocomplete = new google.maps.places.Autocomplete(document.getElementById('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.address = place.formatted_address
        //console.log('address 1 ', this.form.address1);
        this.bookingForm.patchValue({
          address : this.address
        });
        //verify result
        if (place.geometry === undefined || place.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>{
    console.log(this.addressPartner);
    this.formulaBooking = this.bookingForm.value.formulaBooking;
    if (this.bookingForm.value.address !== '') {
      return this.mapService.calculerDistance(this.address, this.addressPartner)
      .then((data) => {
        if (this.formulaBooking === 'forth') {
          this.distanceForth = data.distance;
          this.durationForth = data.duration;
          this.tarif = this.mapService.calculTarifTwoAddress(this.distanceForth, this.formulaBooking);
          console.log(this.tarif);
          localStorage.setItem('tarif', JSON.stringify(this.tarif));
          // console.log('compenent condition 1 service distance', JSON.parse(localStorage.getItem('distance')));
          // console.log('compenent condition 1 service duration', JSON.parse(localStorage.getItem('duration')));
          this.addressForth = this.bookingForm.value.address;
          localStorage.setItem('address', JSON.stringify(this.addressForth));
          // localStorage.setItem('addressBack', JSON.stringify(this.addressBack));
          // console.log('compenent condition 1 local addressForth', JSON.parse(localStorage.getItem('addressForth')));
          // console.log('compenent condition 1 local addressBack', JSON.parse(localStorage.getItem('addressBack')));
          this.addressForth = JSON.parse(localStorage.getItem('address'));
          // console.log('compenent condition 1 addressForth',this.addressForth);
          // console.log('compenent condition 1 addressBack',this.addressBack);
          // console.log('compenent condition 1 component distanceForth', this.distanceForth);
          // console.log('compenent condition 1 component  durationForth', this.durationForth);
          // console.log('compenent condition 1 component distanceBack', this.distanceBack);
          // console.log('compenent condition 1 component  durationBack', this.durationBack);
          // console.log('component constion 1 formula', this.formulaBooking);
          // console.log('component constion 1 tarif',this.tarif);
          // console.log('compenent condition 1 local distance', localStorage.removeItem('distance'));
          // console.log('compenent condition 1 local duration', localStorage.removeItem('duration'));
          // console.log('compenent condition 1 local address', localStorage.removeItem('address'));
          // this.addressForth = "";
          // this.distanceForth = 0;
          // this.durationForth = 0;
          this.rebuilderForm();
        }
        else if (this.formulaBooking === 'back') {
          this.distanceBack = data.distance;
          this.durationBack = data.duration;
          this.tarif = this.mapService.calculTarifTwoAddress(this.distanceBack, this.formulaBooking);
          localStorage.setItem('tarif', JSON.stringify(this.tarif));
          // console.log('compenent condition 2 service distance', JSON.parse(localStorage.getItem('distance')));
          // console.log('compenent condition 2 service duration', JSON.parse(localStorage.getItem('duration')));
          this.addressBack = this.bookingForm.value.address;
          localStorage.setItem('address', JSON.stringify(this.addressBack));
          // console.log('compenent condition 2 local addressForth', JSON.parse(localStorage.getItem('addressForth')));
          // console.log('compenent condition 2 local addressBack', JSON.parse(localStorage.getItem('addressBack')));
          // console.log('compenent condition 2 addressForth',this.addressForth);
          // console.log('compenent condition 2 addressBack',this.addressBack);
          // console.log('compenent condition 2 component distanceForth', this.distanceForth);
          // console.log('compenent condition 2 component  durationForth', this.durationForth);
          // console.log('compenent condition 2 component distanceBack', this.distanceBack);
          // console.log('compenent condition 2 component  durationBack', this.durationBack);
          // console.log('component constion 2 formula', this.formulaBooking);
          // console.log('component constion 2 tarif',this.tarif);
          // console.log('compenent condition 2 local distance', localStorage.removeItem('distance'));
          // console.log('compenent condition 2 local duration', localStorage.removeItem('duration'));
          // console.log('compenent condition 2 local address', localStorage.removeItem('address'));
          // this.addressBack = "";
          // this.distanceBack = 0;
          // this.durationBack = 0;
          this.rebuilderForm();
        }
      });
    }
    else if (this.bookingForm.value.addressForth !== '' && this.bookingForm.value.addressBack !== '') {
      this.mapService.calculerDistance(this.addressForth, this.addressPartner)
      .then((data) => {
        if (this.formulaBooking === 'round') {
          this.distanceForth = data.distance;
          this.durationForth = data.duration;
          localStorage.setItem('tarif', JSON.stringify(this.tarif));
          // console.log('compenent condition 1 service distance', JSON.parse(localStorage.getItem('distance')));
          // console.log('compenent condition 1 service duration', JSON.parse(localStorage.getItem('duration')));
          this.addressForth = this.bookingForm.value.addressForth;
          localStorage.setItem('address', JSON.stringify(this.addressForth));
          // localStorage.setItem('addressBack', JSON.stringify(this.addressBack));
          // console.log('compenent condition 1 local addressForth', JSON.parse(localStorage.getItem('addressForth')));
          // console.log('compenent condition 1 local addressBack', JSON.parse(localStorage.getItem('addressBack')));
          this.addressForth = JSON.parse(localStorage.getItem('address'));
          // console.log('compenent condition 1 addressForth',this.addressForth);
          // console.log('compenent condition 1 addressBack',this.addressBack);
          // console.log('compenent condition 1 component distanceForth', this.distanceForth);
          // console.log('compenent condition 1 component  durationForth', this.durationForth);
          // console.log('compenent condition 1 component distanceBack', this.distanceBack);
          // console.log('compenent condition 1 component  durationBack', this.durationBack);
          // console.log('component constion 1 formula', this.formulaBooking);
          // console.log('component constion 1 tarif',this.tarif);
          // console.log('compenent condition 1 local distance', localStorage.removeItem('distance'));
          // console.log('compenent condition 1 local duration', localStorage.removeItem('duration'));
          // console.log('compenent condition 1 local address', localStorage.removeItem('address'));
        }
        else if (this.formulaBooking === 'technicalControl') {
          this.distanceForth = data.distance;
          this.durationForth = data.duration;
          this.tarif = this.mapService.calculTarifTwoAddress(this.distanceForth, this.formulaBooking);
          localStorage.setItem('tarif', JSON.stringify(this.tarif));
          // console.log('compenent condition 2 service distance', JSON.parse(localStorage.getItem('distance')));
          // console.log('compenent condition 2 service duration', JSON.parse(localStorage.getItem('duration')));
          this.addressBack = this.bookingForm.value.addressForth;
          localStorage.setItem('address', JSON.stringify(this.addressForth));
          // console.log('compenent condition 2 local addressForth', JSON.parse(localStorage.getItem('addressForth')));
          // console.log('compenent condition 2 local addressBack', JSON.parse(localStorage.getItem('addressForth')));
          // console.log('compenent condition 2 addressForth',this.addressForth);
          // console.log('compenent condition 2 addressBack',this.addressBack);
          // console.log('compenent condition 2 component distanceForth', this.distanceForth);
          // console.log('compenent condition 2 component  durationForth', this.durationForth);
          // console.log('compenent condition 2 component distanceBack', this.distanceForth);
          // console.log('compenent condition 2 component  durationBack', this.durationForth);
          // console.log('component constion 2 formula', this.formulaBooking);
          // console.log('component constion 2 tarif',this.tarif);
          // console.log('compenent condition 2 local distance', localStorage.removeItem('distance'));
          // console.log('compenent condition 2 local duration', localStorage.removeItem('duration'));
          // console.log('compenent condition 2 local address', localStorage.removeItem('address'));
        }
      });
      this.mapService.calculerDistance(this.addressBack, this.addressPartner)
      .then((data) => {
        if (this.formulaBooking === 'round') {
          this.distanceBack = data.distance;
          this.durationBack = data.duration;
          localStorage.setItem('tarif', JSON.stringify(this.tarif));
          // console.log('compenent condition 2 service distance', JSON.parse(localStorage.getItem('distance')));
          // console.log('compenent condition 2 service duration', JSON.parse(localStorage.getItem('duration')));
          this.addressBack = this.bookingForm.value.addressBack;
          this.tarif = this.mapService.calculTarifThreeAddress(this.distanceForth, this.distanceBack, this.formulaBooking);
          localStorage.setItem('address', JSON.stringify(this.addressBack));
          // localStorage.setItem('addressBack', JSON.stringify(this.addressBack));
          // console.log('compenent condition 2 local addressForth', JSON.parse(localStorage.getItem('addressForth')));
          // console.log('compenent condition 1 local addressBack', JSON.parse(localStorage.getItem('addressBack')));
          this.addressBack = JSON.parse(localStorage.getItem('address'));
          // console.log('compenent condition 2 addressForth',this.addressForth);
          // console.log('compenent condition 2 addressBack',this.addressBack);
          // console.log('compenent condition 2 component distanceForth', this.distanceForth);
          // console.log('compenent condition 2 component  durationForth', this.durationForth);
          // console.log('compenent condition 2 component distanceBack', this.distanceBack);
          // console.log('compenent condition 2 component  durationBack', this.durationBack);
          // console.log('component constion 2 formula', this.formulaBooking);
          // console.log('component constion 2 tarif',this.tarif);
          // console.log('compenent condition 2 local distance', localStorage.removeItem('distance'));
          // console.log('compenent condition 2 local duration', localStorage.removeItem('duration'));
          // console.log('compenent condition 2 local address', localStorage.removeItem('address'));
          // this.addressForth = '';
          // this.addressBack = '';
          // this.distanceForth = 0;
          // this.durationForth = 0;
          // this.distanceBack = 0;
          // this.durationBack = 0;
          this.rebuilderForm();
        }
        else if (this.formulaBooking === 'technicalControl') {
          this.distanceBack = data.distance;
          this.durationBack = data.duration;
          this.tarif = this.mapService.calculTarifTwoAddress(this.distanceBack, this.formulaBooking);
          localStorage.setItem('tarif', JSON.stringify(this.tarif));
          // console.log('compenent condition 2 service distance', JSON.parse(localStorage.getItem('distance')));
          // console.log('compenent condition 2 service duration', JSON.parse(localStorage.getItem('duration')));
          this.addressBack = this.bookingForm.value.addressBack;
          localStorage.setItem('address', JSON.stringify(this.addressBack));
          // console.log('compenent condition 2 local addressForth', JSON.parse(localStorage.getItem('addressForth')));
          // console.log('compenent condition 2 local addressBack', JSON.parse(localStorage.getItem('addressBack')));
          // console.log('compenent condition 2 addressForth',this.addressForth);
          // console.log('compenent condition 2 addressBack',this.addressBack);
          // console.log('compenent condition 2 component distanceForth', this.distanceForth);
          // console.log('compenent condition 2 component  durationForth', this.durationForth);
          // console.log('compenent condition 2 component distanceBack', this.distanceBack);
          // console.log('compenent condition 2 component  durationBack', this.durationBack);
          // console.log('component constion 2 formula', this.formulaBooking);
          // console.log('component constion 2 tarif',this.tarif);
          // console.log('compenent condition 2 local distance', localStorage.removeItem('distance'));
          // console.log('compenent condition 2 local duration', localStorage.removeItem('duration'));
          // console.log('compenent condition 2 local address', localStorage.removeItem('address'));
        }
      });
 
    }
  }
 
  getCar() {
    const formValue = this.bookingForm.value;
    const newSiv = new Siv(
      formValue['licensePlateCar']
    );
    return this.sivService.addSIV(newSiv).then((data) => {
      this.modelCar = data.modelCar;
      this.bookingForm.controls['modelCar'].setValue(this.modelCar);
      this.brandCar = data.brandCar;
      this.bookingForm.controls['brandCar'].setValue(this.brandCar);
      this.dateOfCirculationCar = data.dateOfCirculationCar;
      this.bookingForm.controls['dateOfCirculationCar'].setValue(this.dateOfCirculationCar);
      this.colorCar = data.colorCar;
      this.bookingForm.controls['colorCar'].setValue(this.colorCar);
      this.versionCar = data.versionCar;
      this.bookingForm.controls['versionCar'].setValue(this.versionCar);
      this.motorizationCar = data.motorizationCar;
      this.bookingForm.controls['motorizationCar'].setValue(this.motorizationCar);
      console.log(this.colorCar);
      return data;
    });
  }
 
  onSubmitFormBooking(): void {
    const formValue = this.bookingForm.value;
    const newBooking = new Booking ();
    newBooking.addressForth = this.addressForth;
    newBooking.addressPartner = this.addressPartner;
    newBooking.addressBack = this.addressBack;
    newBooking.durationForth = this.durationForth;
    newBooking.distanceForth = this.distanceForth;
    newBooking.distanceBack = this.distanceBack;
    newBooking.durationBack = this.durationBack;
    newBooking.formulaBooking = this.formulaBooking;
    newBooking.firstNameCustomer = this.bookingForm.value.firstNameCustomer;
    newBooking.lastNameCustomer = this.bookingForm.value.lastNameCustomer;
    newBooking.mailCustomer = this.bookingForm.value.mailCustomer;
    newBooking.phoneCustomer = this.bookingForm.value.phoneCustomer;
    newBooking.dateOfBirthdayCustomer = this.bookingForm.value.dateOfBirthdayCustomer;
    newBooking.priceBooking = this.tarif;
    newBooking.licensePlateCar = this.bookingForm.value.licensePlateCar;
    newBooking.modelCar = this.modelCar;
    newBooking.brandCar = this.brandCar;
    newBooking.dateOfCirculationCar = this.dateOfCirculationCar;
    newBooking.colorCar = this.colorCar;
    newBooking.versionCar = this.versionCar;
    newBooking.motorizationCar = this.motorizationCar;
    console.log('hoursforth',this.bookingForm.value.hoursForth);
    console.log('hoursback',this.bookingForm.value.hoursBack);
    if (this.bookingForm.value.hoursForth != null && this.bookingForm.value.hoursBack === null) {
      this.dateForth = this.bookingForm.get('hoursForth').value.substr(6, 16);
      this.hoursForth = this.bookingForm.get('hoursForth').value.substr(0,5);
    } else if(this.bookingForm.value.hoursForth === null && this.bookingForm.value.hoursBack != null) {
      this.dateBack = this.bookingForm.get('hoursBack').value.substr(6, 16);
      this.hoursBack = this.bookingForm.get('hoursBack').value.substr(0,5);
    } else if (this.bookingForm.value.hoursForth != null && this.bookingForm.value.hoursBack != null) {
      this.dateForth = this.bookingForm.get('hoursForth').value.substr(6, 16);
      this.hoursForth = this.bookingForm.get('hoursForth').value.substr(0,5);
      this.dateBack = this.bookingForm.get('hoursBack').value.substr(6, 16);
      this.hoursBack = this.bookingForm.get('hoursBack').value.substr(0,5);
    }
    newBooking.dateForth = this.dateForth;
    newBooking.hoursForth = this.hoursForth;
    newBooking.dateBack = this.dateBack
    newBooking.hoursBack = this.hoursBack;
    newBooking.originBooking = "partner";
    newBooking.idAgency = this.idAgency;
    this.bookingService.addBooking(newBooking);
    this.router.navigate(['/calendarMouttec']);
  }
 
  rebuilderForm(){
    this.bookingForm.reset(
      {
        address: '',
        addressForth: '',
        addressBack: '',
        addressBilling: ''
      }
    );
  }
 
}

map.service

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
  /// <reference  types="@types/googlemaps"  />
import { Injectable } from '@angular/core';
 
@Injectable({
  providedIn: 'root'
})
export class MapService {
 
  distance: number;
  duration: any;
  distanceForth: number;
  durationForth: any;
  distanceBack: number;
  durationBack: any;
  tarif: string;
  t1 = JSON.parse(localStorage.getItem('priceForthOrBackInf5'));
  t2 = JSON.parse(localStorage.getItem('priceForthOrBackBetween5And10'));
  t3 = JSON.parse(localStorage.getItem('priceForthOrBackBetwenn10And15'));
  t4 = JSON.parse(localStorage.getItem('priceRoundInf5'));
  t5 = JSON.parse(localStorage.getItem('priceRoundInf5AndBetween5And10'));
  t6 = JSON.parse(localStorage.getItem('priceRoundInf5AndBetween10And15'));
  t7 = JSON.parse(localStorage.getItem('priceRoundBetween5And10'));
  t8 = JSON.parse(localStorage.getItem('priceRoundBetween5And10AndBetween10And15'));
  t9 = JSON.parse(localStorage.getItem('priceBetween10And15'));
  t10 = JSON.parse(localStorage.getItem('priceTechnicalControl'));
 
  constructor() { }
 
  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.duration = results.rows[0].elements[0].duration.value/60;
          // console.log('disatnce',this.distance);
          // console.log('duration', this.duration);
          // enregistrer le result sur le storage local de votre navigateur
          localStorage.setItem('distance', JSON.stringify(this.distance));
          localStorage.setItem('duration', JSON.stringify(this.duration));
          resolve({ distance: this.distance, duration: this.duration});
        }
      );
    });
    return promise;
  }
 
  public calculTarifTwoAddress (distanceForth, formulaBooking) {
    if (distanceForth <= 5 && formulaBooking === 'forth') {
       return '29,90€';
     }
     else if ((distanceForth > 5 && distanceForth <= 10) && formulaBooking === 'forth') {
       return '39,90€';
     }
     else if ((distanceForth > 10 && distanceForth <= 15) && formulaBooking === 'forth') {
       return '49,90€';
     }
     else if (distanceForth <= 5 && formulaBooking === 'back') {
       return '29,90€';
     }
     else if ((distanceForth > 5 && distanceForth <= 10) && formulaBooking === 'back') {
       return '39,90€';
     }
     else if ((distanceForth > 10 && distanceForth <= 15) && formulaBooking === 'back') {
       return '49,90€';
     }
     else {
       return 'nous contacter';
     }
 
 }
 
 public calculTarifThreeAddress (distanceForth, distanceBack, formulaBooking) {
   if (distanceForth <= 5 && distanceBack <= 5 && formulaBooking === 'round') {
     return this.tarif = '49,90€';
   }
   else if (distanceForth <= 5 && (distanceBack > 5 && distanceBack <=10) && formulaBooking === 'round') {
     return this.tarif = '69,90€';
   }
   else if ((distanceForth <= 5 ) && (distanceBack > 10 && distanceBack <= 15) && formulaBooking === 'round') {
     return this.tarif = '79,90€';
   }
   else if ((distanceBack <= 5 ) && (distanceForth > 5 && distanceForth <= 10) && formulaBooking === 'round') {
     return this.tarif = '69,90€';
   }
   else if ((distanceForth > 5 && distanceForth <= 10) && (distanceBack > 5 && distanceBack <= 10) && formulaBooking === 'round') {
     return this.tarif = '69,90€';
   }
   else if ((distanceForth > 5 && distanceForth <= 10) && (distanceBack > 10 && distanceBack <= 15) && formulaBooking === 'round') {
     return this.tarif = '89,90€';
   }
   else if ((distanceForth > 10 && distanceForth <= 15) && distanceBack <= 5 && formulaBooking === 'round') {
     return this.tarif = '79,90€';
   }
   else if ((distanceForth > 10 && distanceForth <= 15) && (distanceBack > 5 && distanceBack <= 10) && formulaBooking === 'round') {
     return this.tarif = '89,90€';
   }
   else if ((distanceForth > 10 && distanceForth <= 15) && (distanceBack > 10 && distanceBack <= 15) && formulaBooking === 'round') {
     return this.tarif = '89,90€';
   }
   else if (distanceForth <= 5 && distanceBack <= 5 && formulaBooking === 'technicalControl') {
    return this.tarif = '119,90€';
  }
   else {
     return this.tarif = 'nous contacter';
   }
 }
}

booking.service.ts

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Subject } from 'rxjs';
import { Booking } from 'src/app/models/bookings.model';
 
@Injectable({
  providedIn: 'root'
})
export class BookingService {
 
  bookingSubject = new Subject<Booking[]>();
  bookingByIdCustomerSubject = new Subject<Booking[]>();
  baseUrl = '../backend/api/booking';
  private bookings: Booking[];
  private bookingByIdCustomers: Booking[];
  carStatus = 'etape1';
 
  constructor(private httpClient: HttpClient) { }
 
  emitBookingSubject() {
    this.bookingSubject.next (this.bookings);
  }
 
  emitBookingByCustomerSubject(idCustomer) {
    this.bookingByIdCustomerSubject.next(this.bookingByIdCustomers);
  }
 
  readListBooking() {
    this.httpClient.get<Booking[]>(`${this.baseUrl}/listBooking.php`).subscribe(
      (bookings) => {
        this.bookings = bookings;
        this.emitBookingSubject();
      },
      (error) => {
        console.log('erreur de lecture des bookings');
      }
    );
  }
 
  addBooking(booking: Booking) {
    this.httpClient.post(`${this.baseUrl}/editBooking.php`, booking).subscribe(
      () => {
        this.bookings.push(booking);
      },
      (error) => {
        console.log('erreur de sauvegarde du booking', + error);
      }
    );
  }
 
  getBookingById(idBooking) {
  return this.httpClient.get(`${this.baseUrl}/listBooking.php?idBooking=${idBooking}`);
  }
 
  updateBooking(booking: Booking) {
    this.httpClient.post(`${this.baseUrl}/editBooking.php`, booking).subscribe(
      () => {
        console.log('enregistrement ok');
      },
      (error) => {
        console.log('erreur d\'update du booking' + error);
      }
    );
  }
 
  getBookingByIdCustomer(idCustomer) {
    this.httpClient.get<Booking[]>(`${this.baseUrl}/listBooking.php?idCustomer=${idCustomer}`).subscribe(
      (bookings) => {
        this.bookingByIdCustomers = bookings;
        this.emitBookingByCustomerSubject(idCustomer);
      }
    );
  }
 
  getStatusCarProcess() {
    return this.carStatus
  }
}

j'aurais donc besoin de l'aide afin de comprendre d'où vient mon erreur

**krakatoa** · 22/06/2021, 16h29

c'est lorsqu'il y emet une requete http ?

que donne reseaux de l'outil de dev du navigateur ?

**angie13003** · 22/06/2021, 17h03

lors de l'affichage de la page je ne fais pas encore appel au http.

Cette erreur apparait des que je clique sur je clique sur le bouton ajout d'un rendez vous sur la page calendar.

Voici le lien du site sur le serveur

mouttec.fr/admin

**krakatoa** · 22/06/2021, 17h09

planning-> ajouter un rdz vs

dans la console, j'obtiens ça :

core.js:4197 ERROR Error: Uncaught (in promise): InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': '&&' is not a valid attribute name.
Error: Failed to execute 'setAttribute' on 'Element': '&&' is not a valid attribute name.
at EmulatedEncapsulationDomRenderer2.setAttribute (platform-browser.js:706)
at BaseAnimationRenderer.setAttribute (animations.js:276)
at setUpAttributes (core.js:3277)
at Module.ɵɵelementStart (core.js:13883)
at BookingFormsComponent_Template (booking-forms.component.html:63)
at executeTemplate (core.js:7303)
at renderView (core.js:7112)
at renderComponent (core.js:8373)
at renderChildComponents (core.js:6971)
at renderView (core.js:7137)
at resolvePromise (zone-evergreen.js:798)
at resolvePromise (zone-evergreen.js:750)
at zone-evergreen.js:860
at ZoneDelegate.invokeTask (zone-evergreen.js:399)
at Object.onInvokeTask (core.js:27425)
at ZoneDelegate.invokeTask (zone-evergreen.js:398)
at Zone.runTask (zone-evergreen.js:167)
at drainMicroTaskQueue (zone-evergreen.js:569)
at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:484)
at invokeTask (zone-evergreen.js:1621)

il y a un '&&' qu'il n'aime pas dans : booking-forms.component.html:63

**angie13003** · 22/06/2021, 17h14

ah oui c'est très bizarre car moi je n'ai absolument pas la même erreur. je vais déjà regarder pour l'erreur que vous m'avez envoyé.

De mon côté c'est cette erreur qui me ressort

ERROR Error: Uncaught (in promise): SyntaxError: Unexpected token u in JSON at position 0
SyntaxError: Unexpected token u in JSON at position 0
at JSON.parse (<anonymous>)
at new BookingFormsComponent (booking-forms.component.ts:59)
at NodeInjectorFactory.BookingFormsComponent_Factory [as factory] (booking-forms.component.ts:418)
at getNodeInjectable (core.js:4029)
at instantiateRootComponent (core.js:7826)
at createRootComponent (core.js:18375)
at ComponentFactory$1.create (core.js:22191)
at ViewContainerRef.createComponent (core.js:10108)
at RouterOutlet.activateWith (router.js:5083)
at ActivateRoutes.activateRoutes (router.js:2114)
at resolvePromise (zone-evergreen.js:798)
at resolvePromise (zone-evergreen.js:750)
at zone-evergreen.js:860
at ZoneDelegate.invokeTask (zone-evergreen.js:399)
at Object.onInvokeTask (core.js:27425)
at ZoneDelegate.invokeTask (zone-evergreen.js:398)
at Zone.runTask (zone-evergreen.js:167)
at drainMicroTaskQueue (zone-evergreen.js:569)
at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:484)
at invokeTask (zone-evergreen.js:1621)
defaultErrorLogger @ core.js:4197
handleError @ core.js:4245
next @ core.js:27988
schedulerFn @ core.js:24801
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:24791
(anonymous) @ core.js:27460
invoke @ zone-evergreen.js:364
run @ zone-evergreen.js:123
runOutsideAngular @ core.js:27364
onHandleError @ core.js:27460
handleError @ zone-evergreen.js:368
runGuarded @ zone-evergreen.js:136
api.microtaskDrainDone @ zone-evergreen.js:670
drainMicroTaskQueue @ zone-evergreen.js:576
invokeTask @ zone-evergreen.js:484
invokeTask @ zone-evergreen.js:1621
globalZoneAwareCallback @ zone-evergreen.js:1647

**krakatoa** · 22/06/2021, 17h17

c koi le code -> at new BookingFormsComponent (booking-forms.component.ts:59)

**angie13003** · 22/06/2021, 17h22

le code que j'ai à la ligne 59

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

  idAgency = Number(JSON.parse(localStorage.getItem('idAgency')));

J'ai déjà tenter de le mettre en commentaire et j'ai malgré tout l'erreur

**krakatoa** · 22/06/2021, 17h24

essaye avec :

idAgency = 1;

surement que le localstorage te retourne quelque chose et moi non vu que je n'ai jamais enregistré donc l'erreur est différente

**angie13003** · 22/06/2021, 18h56

effectivement j'ai un problème avec le localStorage je vais regarder cela mais déjà mon formulaire s'affiche en mettant cette variable en dur

Lecture d'un objet JSON

Angular

Discussions similaires

Partager

Partager