Skip to content

Commit

Permalink
fix(route-draw&my-account) bad interactions
Browse files Browse the repository at this point in the history
  • Loading branch information
@azarz
azarz committed Jan 9, 2024
1 parent 850b82e commit 9a89c09
Show file tree
Hide file tree
Showing 6 changed files with 112 additions and 28 deletions.
15 changes: 13 additions & 2 deletions src/js/elevation-line-control.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ class ElevationLineControl {
this.elevationData = data.elevationData;

this.dplus = data.dplus;
this.dminus = data.dplus;
this.dminus = data.dminus;

this.unit = data.unit;
this.render();
Expand All @@ -76,7 +76,7 @@ class ElevationLineControl {
coordinates: this.coordinates,
elevationData: this.elevationData,
dplus: this.dplus,
dminus: this.dplus,
dminus: this.dminus,
unit: this.unit,
};
}
Expand Down Expand Up @@ -150,6 +150,17 @@ class ElevationLineControl {
* @public
*/
async compute() {
// Gestion du cas où pas assez de coordonnées sont présentes
if (this.coordinates.length < 2) {
this.setData({
coordinates: this.coordinates,
elevationData: [{x: 0, y: 0}],
dplus: 0,
dminus: 0,
unit: "m",
});
return;
}
this.elevationData = [];
this.dplus = 0;
this.dminus = 0;
Expand Down
2 changes: 1 addition & 1 deletion src/js/my-account/my-account-dom.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ let MyAccountDOM = {
* @private
*/
__addRouteContainer(route) {
var title = route.name || `Itinéraire de ${utils.convertDistance(route.data.distance)}`;
var title = route.name;
var routeId = route.id;
var checked = route.visible ? "checked" : "";

Expand Down
25 changes: 20 additions & 5 deletions src/js/my-account/my-account.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,9 @@ class MyAccount {

this.#addSourcesAndLayers();

// Identifiant unique pour les itinéraires
this.lastRouteId = 0;

// récupération des itinéraires enregistrés en local
if (!localStorage.getItem("savedRoutes")) {
localStorage.setItem("savedRoutes", "[]");
Expand All @@ -57,10 +60,9 @@ class MyAccount {
// récupération des infos et rendu graphique
this.compute().then(() => {
// Ajout d'identifiant unique aux routes
let routeId = 0;
this.routes.forEach((route) => {
route.id = routeId;
routeId++;
route.id = this.lastRouteId;
this.lastRouteId++;
});
this.render();
this.#updateSources();
Expand Down Expand Up @@ -104,7 +106,18 @@ class MyAccount {
* @param {*} drawRouteSaveOptions
*/
addRoute(drawRouteSaveOptions) {
this.routes.unshift(drawRouteSaveOptions);
if (typeof drawRouteSaveOptions.id !== 'undefined' && drawRouteSaveOptions.id >= 0) {
for (let i = 0; i < this.routes.length; i++) {
if (this.routes[i].id === drawRouteSaveOptions.id){
this.routes[i] = drawRouteSaveOptions;
break;
}
}
} else {
drawRouteSaveOptions.id = this.lastRouteId;
this.lastRouteId++;
this.routes.unshift(drawRouteSaveOptions);
}
this.__updateAccountRoutesContainerDOMElement(this.routes);
localStorage.setItem("savedRoutes", JSON.stringify(this.routes));
this.#updateSources();
Expand Down Expand Up @@ -163,7 +176,9 @@ class MyAccount {
});
this.hide();
Globals.routeDraw.show();
Globals.routeDraw.setData(route.data);
Globals.routeDraw.setData(JSON.parse(JSON.stringify(route.data)));
Globals.routeDraw.setName(route.name);
Globals.routeDraw.setId(route.id);
});
}

Expand Down
9 changes: 6 additions & 3 deletions src/js/route-draw/route-draw-save-dom.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,13 @@ let RouteDrawSaveDOM = {
* @returns {DOMElement}
* @public
*/
getContainer (data, transport) {
getContainer (data, transport, name) {
// nettoyage
if (this.dom.container) {
this.dom.container.remove();
}
// ajout du container principal
var container = this.__addRouteSaveContainerDOMElement(data);
var container = this.__addRouteSaveContainerDOMElement(name);
// ajout du résumé
container.appendChild(this.__addResultsSummaryContainerDOMElement(data, transport));

Expand All @@ -38,7 +38,7 @@ let RouteDrawSaveDOM = {
* @returns {DOMElement}
* @private
*/
__addRouteSaveContainerDOMElement () {
__addRouteSaveContainerDOMElement (name) {
var div = this.dom.container = document.createElement("div");
div.id = "routeDrawSave";
div.className = "";
Expand All @@ -54,6 +54,9 @@ let RouteDrawSaveDOM = {
nameInput.id = "routeDrawSaveNameInput";
nameInput.type = "text";
nameInput.placeholder = "Entrez le nom de l'itinéraire";
if (name) {
nameInput.value = name;
}
var nameInputSubmit = document.createElement("div");
nameInputSubmit.innerText = "Confirmer";
nameInputSubmit.id = "routeDrawSaveNameInputSubmit";
Expand Down
14 changes: 10 additions & 4 deletions src/js/route-draw/route-draw-save.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,14 @@ class RouteDrawSave {
data: {},
transport: null,
name: null,
id: null,
};

// target
this.target = target;

this.id = this.options.id || -1;

// rendu graphique
this.render();

Expand All @@ -36,9 +39,13 @@ class RouteDrawSave {
*/
#listeners() {
document.getElementById("routeDrawSaveNameInputSubmit").addEventListener("click", () => {
this.options.name = document.getElementById("routeDrawSaveNameInput").value;
let name = document.getElementById("routeDrawSaveNameInput").value;
if (name === "") {
name = `De ${this.options.data.points[0].properties.name} à ${this.options.data.points.slice(-1)[0].properties.name}`;
}
this.options.name = name;
this.options.visible = true;
Globals.myaccount.addRoute(this.options);
Globals.myaccount.addRoute(JSON.parse(JSON.stringify(this.options)));
this.hide();
Globals.routeDraw.hide();
Toast.show({
Expand All @@ -59,8 +66,7 @@ class RouteDrawSave {
console.warn();
return;
}

var container = this.getContainer(this.options.data, this.options.transport);
var container = this.getContainer(this.options.data, this.options.transport, this.options.name);
if (!container) {
console.warn();
return;
Expand Down
75 changes: 62 additions & 13 deletions src/js/route-draw/route-draw.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,13 @@ class RouteDraw {
steps: [],
// data for the elevation control
elevationData: {
dplus: 0,
dminus: 0,
dplus: 0,
dminus: 0,
elevationData: [{x: 0, y: 0}],
coordinates: [],
dplus: 0,
dminus: 0,
unit: "m",
},
}

Expand Down Expand Up @@ -112,6 +117,10 @@ class RouteDraw {
// interface de sauvegarde
this.routeDrawSave = null;

// Nom et ID de l'itinéraire s'il s'agit d'une modification d'un itinéraire existant
this.name = null;
this.routeId = null;

// annulation de la reqête fetch
this.controller = new AbortController();

Expand Down Expand Up @@ -158,10 +167,31 @@ class RouteDraw {
* @public
*/
setData(data) {
this.data = data;
this.elevation.setData(data.elevationData);
this.__updateRouteInfo(this.data);
this.#updateSources();
this.dataHistory = [];
this.data = data;
this.elevation.setData(data.elevationData);
this.#saveState();
DOM.$routeDrawCancel.classList.add("inactive");
this.__updateRouteInfo(this.data);
this.#updateSources();
}

/**
* Paramétrage du nom
* @param {string} name
* @public
*/
setName(name) {
this.name = name;
}

/**
* Paramétrage de l'id
* @param {number} id
* @public
*/
setId(id) {
this.routeId = id;
}

/**
Expand Down Expand Up @@ -232,10 +262,19 @@ class RouteDraw {
})
return;
}
let name = "";
if (this.name) {
name = this.name;
}
let id = -1;
if (this.routeId !== null && this.routeId >= 0) {
id = this.routeId;
}
this.routeDrawSave = new RouteDrawSave(null, {
data: this.data,
data: JSON.parse(JSON.stringify(this.data)),
transport: this.transport,
name: `Itinéraire de ${this.data.distance} m`,
name: name,
id: id,
});
this.routeDrawSave.show();
}
Expand Down Expand Up @@ -395,7 +434,6 @@ class RouteDraw {
if (Globals.backButtonState === "routeDraw") {
this.#listeners();
}
DOM.$routeDrawCancel.classList.remove("inactive");
// Enregistrement de l'état dans l'historique
this.#saveState();
return;
Expand All @@ -406,7 +444,6 @@ class RouteDraw {
this.#saveState();
// Affichage et réactivation de l'intéractivité si on est toujours dans le tracé d'itinéraire
if (Globals.backButtonState === "routeDraw") {
DOM.$routeDrawCancel.classList.remove("inactive");
this.#listeners();
}
}
Expand All @@ -417,7 +454,6 @@ class RouteDraw {
* @returns
*/
async #onDeleteWayPoint(e) {
// TODO gestion d'erreur
// TODO patience
// On empêche l'intéraction tant que les opérations ne sont pas terminées
this.map.off("click", RouteDrawLayers["point"].id, this.handleDeletePoint);
Expand All @@ -428,16 +464,21 @@ class RouteDraw {
const deleteIndex = this.data.points.findIndex((point) => {
return point.properties?.id === feature?.properties?.id;
});
if (this.data.points.length === 1) {
this.#saveState();
}
this.data.points.splice(deleteIndex, 1);
if (this.data.steps.length < 1) {
this.#updateSources();
this.map.on("click", RouteDrawLayers["point"].id, this.handleDeletePoint);
DOM.$routeDrawCancel.addEventListener("click", this.handleCancelChange);
DOM.$routeDrawRestore.addEventListener("click", this.handleRestoreChange);
this.#editionButtonsListeners();
return;
};
if (deleteIndex == 0 || this.data.steps.length == 1) {
this.data.steps.splice(0, 1);
await this.#updateElevation();
this.data.duration = 0;
this.data.distance = 0;
if (Globals.backButtonState === "routeDraw") {
this.__updateRouteInfo(this.data);
}
Expand Down Expand Up @@ -640,6 +681,9 @@ class RouteDraw {
* enregistre l'état précédent dans l'historique et réinitialise les annulations
*/
#saveState() {
if (Globals.backButtonState === "routeDraw") {
DOM.$routeDrawCancel.classList.remove("inactive");
}
DOM.$routeDrawRestore.classList.add("inactive");
this.dataHistory = this.dataHistory.splice(this.currentHistoryPosition, this.dataHistory.length);
this.dataHistory.unshift(JSON.parse(JSON.stringify(this.data)));
Expand All @@ -656,6 +700,7 @@ class RouteDraw {
this.currentHistoryPosition++;
DOM.$routeDrawRestore.classList.remove("inactive");
this.data = JSON.parse(JSON.stringify(this.dataHistory[this.currentHistoryPosition]));
this.elevation.setData(this.data.elevationData);
this.#updateSources();
this.__updateRouteInfo(this.data);
if (this.currentHistoryPosition == this.dataHistory.length - 1) {
Expand All @@ -673,6 +718,7 @@ class RouteDraw {
this.currentHistoryPosition--;
DOM.$routeDrawCancel.classList.remove("inactive");
this.data = JSON.parse(JSON.stringify(this.dataHistory[this.currentHistoryPosition]));
this.elevation.setData(this.data.elevationData);
this.#updateSources();
this.__updateRouteInfo(this.data);
if (this.currentHistoryPosition == 0) {
Expand All @@ -691,11 +737,13 @@ class RouteDraw {
DOM.$routeDrawDelete.classList.add("inactive");
this.map.off("click", RouteDrawLayers["point"].id, this.handleDeletePoint);
this.map.on("touchstart", RouteDrawLayers["point"].id, this.handleTouchStartPoint);
this.map.on("touchstart", RouteDrawLayers["line"].id, this.handleTouchStartLine);
this.map.on("click", this.handleAddWayPoint);
return;
}
this.delete = true;
this.map.off("touchstart", RouteDrawLayers["point"].id, this.handleTouchStartPoint);
this.map.off("touchstart", RouteDrawLayers["line"].id, this.handleTouchStartLine);
this.map.off("click", this.handleAddWayPoint);
this.map.on("click", RouteDrawLayers["point"].id, this.handleDeletePoint);
DOM.$routeDrawDelete.classList.remove("inactive");
Expand Down Expand Up @@ -757,6 +805,7 @@ class RouteDraw {
}
this.dataHistory = [];
this.__updateRouteInfo(this.data);
DOM.$routeDrawCancel.classList.add("inactive");
this.#clearSources();
}

Expand Down

0 comments on commit 9a89c09

Please sign in to comment.