Géolocalisation et tri par distance des centres disponibles #38
Conversation
|
Globalement, si tu as moyen de target |
…d make animations more flexible
… on radio buttons and removed preventDefaults on click as it was preventing their default behaviour
…result was 'indisponible', then we try again as it may have been due to a timeout
…vigateur() are async, manually triggering a re-rendering once location is resolved as lit-element cannot auto-guess this
…e times during render. solution is to pre-calculate it everytime we fetch locations, or update user's location
…distance sorting tab)
…enough I had ~50% of timeouts on my laptop with 2s timeout delay. With 4s, it was almost 90%=95%.
There was a problem hiding this comment.
J'ai push sur la branche geoloc un certain nombre de fixes (qui résolvent les points remontés en commentaire + d'autres plus ergonomiques)
Il y avait bel et bien plusieurs appels au lieuxDisponiblesTriés durant chaque render() => j'ai donc introduit 2 listes de lieux entre lesquelles je bascule à chaque changement de tri, afin d'éviter de re-trier.
Ces listes sont mises à jour uniquement lorsqu'on change de département.
Il y avait un problème assez pernicieux qui était dû au await sur le State.current.localisationNavigateur() : les appels en aval de cet appel étant fait de manière asynchrone, il fallait trigger manuellement un rendering (via un requestUpdate()) : lit-element ne fait pas de dirty checking lors des callbacks asynchrones, c'est pourquoi il faut l'aider à se re-render.
Malgré une augmentation du timeout du navigator.geolocation.getCurrentPosition() à 4s, je continue à avoir (rarement) des timeouts sur la récupération de la latng via desktop.
Pas sûr qu'on puisse faire beaucoup mieux.
| return html` | ||
| <div class="card rounded-3 mb-5 p-4 ${classMap({clickable: this.estCliquable})}" | ||
| <div class="card rounded-3 mb-5 ${classMap({clickable: this.estCliquable})}" | ||
| style="--list-index: ${this.index}" |
There was a problem hiding this comment.
Pour moi, ce n'est pas au composant de définir cette propriété (on pourrait très bien vouloir réutiliser le composant <vmd-appointment-card> en-dehors d'un contexte de liste où on aimerait positionner une animation dessus)
Il serait plus flexible de rajouter ce style="--list-index: ${index}" au niveau du <vmd-appointment-card> :
<vmd-appointment-card style="--list-index: ${index}" .lieu="${lieu}" .rdvPossible="${true}" .distance="${distance}" />
Et en remontant les css pour les animations au niveau du _rdv.scss :
vmd-appointment-card {
display: block; /* <-- Nécessaire car le composant est en display: inline par défaut */
opacity: 1;
animation: fade-in ease-in 200ms;
animation-fill-mode: backwards;
animation-delay: calc((var(--list-index) * 60ms) + 50ms);
@keyframes fade-in {
from {
opacity: 0;
filter: saturate(0%);
}
to {
opacity: 1;
filter: saturate(100%);
}
}
}
En bonus : une @property de moins (index) dans le composant vmd-appointment-card
There was a problem hiding this comment.
Whatever works. C'est toi l'boss
There was a problem hiding this comment.
Enfin je veux dire, j'ai essayé et ça marche pas. Mais si tu veux retenir cette PR plus longtemps, tu fais ce que tu veux :3
There was a problem hiding this comment.
Tu peux être un peu plus explicite que juste "ça marche pas" ?
Je veux dire, au minimum : contexte (navigateur, données), ce qui marche pas (attendu/obtenu) etc.
J'ai refait un tour sur chrome / firefox / edge / safari sous OS X et chez moi pas de soucis.
| @@ -36,6 +40,48 @@ export class VmdRdvView extends LitElement { | |||
| @property({type: Array, attribute: false}) lieuxParDepartement: LieuxParDepartement | undefined = undefined; | |||
| @property({type: Boolean, attribute: false}) searchInProgress: boolean = false; | |||
|
|
|||
| @property({type: String, attribute: false}) critèreDeTri: 'date' | 'distance' = 'date' | |||
| @property({type: Boolean, attribute: false}) geolocalisationBloquée = false | |||
| @property({type: Boolean, attribute: false}) geolocalisationIndisponible = false | |||
There was a problem hiding this comment.
Ce flag n'est utilisé nulle part pour un affichage à l'utilisateur
|
Hello @fcamblor, du coup est-ce que la dernière version peut être merge ? |
|
@rozierguillaume euh ... @Floby disait avoir des problèmes #38 (comment) Je suis pas sûr que ce soit une bonne idée d'avoir mergée sans avoir eu son retour (vous en avez discuté en off ?) |
No description provided.