Merge branch 'main' of github.com:chairemobilite/transition

# Conflicts:
#	packages/transition-frontend/src/components/dashboard/TransitionToolbar.tsx

locales/en/main.json

@@ -54,6 +54,8 @@
   "secondAbbr": "sec",
   "Max": "Max",
   "Min": "Min",
+  "Left": "Left",
+  "Right": "Right",
   "rangeTo": "-",
   "Total": "Total",
   "Calendar": "Calendar",
@@ -256,6 +258,7 @@
     "ResetToDefault": "Reset preference to default value",
     "General": "General preferences",
     "DefaultSection": "Default section at opening",
+    "InfoPanelPosition": "Info panel position",
     "DefaultColor": "Default color",
     "DefaultWalkingSpeedKph": "Default walking speed (km/h)",
     "DefaultWalkingSpeedKphHelp": "Walking speed varies according to age and gender between 3 km/h (elderly people and young children) and 7 km/h (young and/or very active people). Men are on average a little faster than women and in general, walking speed decreases with age. The speed of a person in a manual wheelchair varies between 2 and 3 km/h depending on physical strength.",

locales/fr/main.json

@@ -54,6 +54,8 @@
   "secondAbbr": "sec",
   "Max": "Max",
   "Min": "Min",
+  "Left": "Gauche",
+  "Right": "Droite",
   "rangeTo": " à ",
   "Total": "Total",
   "Calendar": "Calendrier",
@@ -256,6 +258,7 @@
     "ResetToDefault": "Réinitialiser cette préférence à sa valeur par défaut",
     "General": "Préférences générales",
     "DefaultSection": "Section par défaut lors de l'ouverture",
+    "InfoPanelPosition": "Position du panneau d'information",
     "DefaultColor": "Couleur par défaut",
     "DefaultWalkingSpeedKph": "Vitesse de marche par défaut (km/h)",
     "DefaultWalkingSpeedKphHelp": "La vitesse de marche varie selon l'âge et le genre entre 3 km/h (personnes âges et jeunes enfants) et 7 km/h (personnes jeunes et/ou très actives). Les hommes sont en moyenne un peu plus rapides que les femmes et de manière générale, la vitesse de marche diminue avec l'âge. La vitesse d'une personne en chaise roulante manuelle varie entre 2 et 3 km/h selon la force physique.",

packages/chaire-lib-common/src/config/Preferences.ts

@@ -222,6 +222,7 @@ export class PreferencesClass extends ObjectWithHistory<PreferencesModelWithIdAn
         try {
             socket ? await this.updateFromSocket(socket, this.attributes) : await this.updateFromFetch(this.attributes);
             eventManager?.emit('preferences.updated');
+            this._eventEmitter.emit(prefChangeEvent, this._attributes);
         } catch (error) {
             console.error('Error loading preferences from server');
         }

packages/chaire-lib-common/src/config/defaultPreferences.config.ts

@@ -18,6 +18,7 @@ interface SectionDescription {
 }
 export interface PreferencesModel {
     defaultSection: string;
+    infoPanelPosition: string;
     sections: {
         [key: string]: {
             [key: string]: SectionDescription;
@@ -33,6 +34,7 @@ export interface PreferencesModel {
 // TODO: Type more fields
 const defaultPreferences: PreferencesModel = {
     defaultSection: 'agencies',
+    infoPanelPosition: 'right',
     sections: {
         transition: {
             agencies: {

packages/chaire-lib-frontend/src/components/dashboard/SplitView.tsx

@@ -8,23 +8,41 @@ import React, { createRef, useEffect, useState } from 'react';
 
 // This components provides a resizable split panel.
 // Code largely comes from https://blog.theodo.com/2020/11/react-resizeable-split-panels/
-// No need for a props and state about the width of the rightmost component
+// No need for props and state about the width of the rightmost component
 // because we use flexbox to adjust its width.
 
 interface SplitViewProps {
     left?: React.ReactElement;
     right?: React.ReactElement;
-    initialLeftWith: string;
+    leftViewID?: string;
+    initialLeftWidth: string;
     minLeftWidth?: number;
+    hideLeftViewWhenResizing?: boolean;
+    hideRightViewWhenResizing?: boolean;
 }
 
-export const SplitView: React.FunctionComponent<SplitViewProps> = ({ left, right, initialLeftWith, minLeftWidth }) => {
+/**
+ * Allows displaying two components side-by-side with a movable divider in the middle to adjust the widths.
+ * @param leftViewID This is used when switching component positions. If we don't have a unique ID, we can't know when to change the width of the left-view to the width of the previously right-view.
+ * @returns
+ */
+export const SplitView: React.FunctionComponent<SplitViewProps> = ({
+    left,
+    right,
+    leftViewID,
+    initialLeftWidth,
+    hideLeftViewWhenResizing,
+    hideRightViewWhenResizing,
+    minLeftWidth
+}) => {
     const [leftWidth, setLeftWidth] = useState<number | undefined>();
+    const [_leftViewID, _setLeftViewID] = useState<string | undefined>(leftViewID);
     const [separatorXPosition, setSeparatorXPosition] = useState<number | undefined>();
     const [dragging, setDragging] = useState(false);
 
     const splitPaneRef = createRef<HTMLDivElement>();
     const leftRef = createRef<HTMLDivElement>();
+    const rightRef = createRef<HTMLDivElement>();
 
     const onMouseDown = (e: React.MouseEvent) => {
         setSeparatorXPosition(e.clientX);
@@ -92,13 +110,26 @@ export const SplitView: React.FunctionComponent<SplitViewProps> = ({ left, right
         }
     }, [leftRef, leftWidth, setLeftWidth]);
 
+    useEffect(() => {
+        console.log(leftViewID, _leftViewID);
+        if (_leftViewID !== leftViewID && leftRef.current && rightRef.current) {
+            // We now know that the views have been switched (L went to R)
+            // and thus we can exchange the widths of their DIVs.
+            setLeftWidth(rightRef.current.offsetWidth);
+            _setLeftViewID(leftViewID);
+        }
+    }, [leftViewID]);
+
     return (
         <div className={'tr__resizable-split-view'} ref={splitPaneRef}>
             {/* Hide contents when dragging. This reduces flickering since react does not have to redraw at every width change. */}
             <div
                 className="tr__resizable-split-view-left-panel"
                 ref={leftRef}
-                style={{ visibility: !dragging ? 'visible' : 'hidden', width: initialLeftWith }}
+                style={{
+                    visibility: hideLeftViewWhenResizing && dragging ? 'hidden' : 'visible',
+                    width: initialLeftWidth
+                }}
             >
                 {left}
             </div>
@@ -110,7 +141,13 @@ export const SplitView: React.FunctionComponent<SplitViewProps> = ({ left, right
             >
                 <div className="tr__resizable-split-view-divider" />
             </div>
-            <div className="tr__resizable-split-view-right-panel">{right}</div>
+            <div
+                className="tr__resizable-split-view-right-panel"
+                ref={rightRef}
+                style={{ visibility: hideRightViewWhenResizing && dragging ? 'hidden' : 'visible' }}
+            >
+                {right}
+            </div>
         </div>
     );
 };

packages/chaire-lib-frontend/src/styles/_dashboard.scss

@@ -6,7 +6,6 @@
 }
 
 #tr__left-menu {
-  position: absolute;
   z-index: 20;
   left: 0;
   flex: 0 4rem;
@@ -123,9 +122,7 @@
   #tr__main-map {
     flex: 1;
     height: 100%;
-    margin-left: 4rem;
     position: relative;
-    border-left: 1px solid $border-white;
     min-height: 0;
   }
 
@@ -207,6 +204,7 @@
   display: flex;
   flex-direction: row;
   align-items: flex-start;
+  border-left: 1px solid $border-white;
 }
 
 .tr__resizable-split-view-left-panel {

packages/chaire-lib-frontend/src/styles/_form.scss

@@ -64,11 +64,24 @@ textarea, ._input-textarea {
 }
 
 select {
-  font-size: $sm-size;
-  background: $input-background;
+  font-size: $font-size-small;
+  background-color: $input-background;
   color: $input;
   font-weight: 700;
   text-overflow: ellipsis;
+  border: 1px solid $border-white;
+  padding-top: $xxxxs-size;
+  padding-bottom: $xxxxs-size; 
+  padding-left: $xs-size;
+  border-radius: 1.2rem;
+
+  // Unfortunately we can't change the color of the chevron on the select input.
+  // We must add our own.
+  appearance: none;
+  background-image: url("/dist/images/icons/interface/select_chevron_white.svg");
+  padding-right: 1.8rem; // Give a little more space for the chevron image
+  background-repeat: no-repeat;
+  background-position: 98% 50%;
 }
 
 ._input-multiselect {

packages/transition-backend/package.json

@@ -64,7 +64,7 @@
         "uuid": "^8.3.2",
         "workerpool": "^6.2.1",
         "yargs": "^17.5.1",
-        "zod": "^3.9.8"
+        "zod": "^3.22.3"
     },
     "devDependencies": {
         "@types/express-socket.io-session": "^1.3.6",