Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

front: editor - Adding help on catenary tool #5834

Merged
merged 1 commit into from
Nov 24, 2023
Merged

front: editor - Adding help on catenary tool #5834

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions front/public/locales/en/translation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -220,6 +220,11 @@
"reset-catenary": "Cancel the current modifications",
"delete-catenary": "Delete the catenary"
},
"help": {
"init": "Click on a track section to link it to the catenary",
"add-track": "Link the track section '{{track.id}}' to the catenary {{voltage}}",
"remove-range": "Remove the track section from the catenary {{voltage}}"
},
"add-new-catenary": "Add new catenary",
"catenaries": "Electrification",
"catenary-default": "Default catenary",
Expand Down Expand Up @@ -253,6 +258,7 @@
"edit-track-range-start": "Edit departure point",
"edit-track-range-end": "Edit arrival point",
"linked-track-sections": "Associated track sections",
"empty-linked-track-section": "Click on a track section to link it to the catenary",
"only-show-n": "Only show the first {{count}} track sections",
"show-more-ranges_one": "See an additional track section",
"show-more-ranges_other": "See {{count}} additional track sections"
Expand Down
6 changes: 6 additions & 0 deletions front/public/locales/fr/translation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -220,6 +220,11 @@
"reset-catenary": "Annuler les modifications en cours",
"delete-catenary": "Supprimer l'électrification"
},
"help": {
"init":"Cliquez sur un tronçon d'itinéraire pour l'associer à l'électrification",
"add-track": "Ajouter le tronçon '{{track.id}}' à l'électrification {{voltage}}",
"remove-range": "Supprimer le tronçon de l'électrification {{voltage}}"
},
"add-new-catenary": "Ajouter une nouvelle électrification",
"catenaries": "Électrification",
"catenary-default": "Électrification par défaut",
Expand Down Expand Up @@ -253,6 +258,7 @@
"edit-track-range-start": "Modifier le point de départ",
"edit-track-range-end": "Modifier le point d'arrivée",
"linked-track-sections": "Tronçons d'itinéraire de voie associés",
"empty-linked-track-section": "Cliquez sur un tronçon d'itinéraire pour l'associer",
"only-show-n": "Ne montrer que les {{count}} premières sections de lignes",
"show-more-ranges_one": "Voir une section de ligne de plus",
"show-more-ranges_other": "Voir {{count}} sections de lignes de plus"
Expand Down
36 changes: 22 additions & 14 deletions front/src/applications/editor/tools/rangeEdition/catenary/CatenaryEditionLayers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export const CatenaryEditionLayers: FC = () => {
return [(entity.properties.track_ranges || [])[interactionState.rangeIndex].track];

// Custom hovered element:
if (hoveredItem?.speedSectionItemType) return [hoveredItem.track.properties.id];
if (hoveredItem?.itemType) return [hoveredItem.track.properties.id];

// EditorEntity hovered element:
if (
Expand Down Expand Up @@ -137,7 +137,7 @@ export const CatenaryEditionLayers: FC = () => {

const popUps = !isOnModeMove(interactionState.type) ? (
<>
{hoveredItem?.speedSectionItemType === 'TrackRangeExtremity' && (
{hoveredItem?.itemType === 'TrackRangeExtremity' && (
<Popup
className="popup"
anchor="bottom"
Expand All @@ -149,7 +149,7 @@ export const CatenaryEditionLayers: FC = () => {
<EntitySumUp entity={hoveredItem.track} />
</Popup>
)}
{hoveredItem?.speedSectionItemType === 'TrackRange' && (
{hoveredItem?.itemType === 'TrackRange' && (
<Popup
className="popup"
anchor="bottom"
Expand Down Expand Up @@ -210,14 +210,22 @@ export const CatenaryEditionLayers: FC = () => {
);
};

export const CatenaryMessages: FC = () => null;

// export const CatenaryMessages: FC = () => {
// const { t } = useTranslation();
// const {
// state: {
// /* TODO */
// },
// } = useContext(EditorContext) as ExtendedEditorContextType<SpeedSectionEditionState>;
// return null;
// };
export const CatenaryMessages: FC = () => {
const { t } = useTranslation();
const { state } = useContext(EditorContext) as ExtendedEditorContextType<
RangeEditionState<CatenaryEntity>
>;
if (state.hoveredItem && state.hoveredItem.type === 'TrackSection')
return t('Editor.tools.catenary-edition.help.add-track', {
track: state.hoveredItem,
voltage: state.initialEntity.properties.voltage,
});

if (state.hoveredItem && state.hoveredItem.itemType === 'TrackRange')
return t('Editor.tools.catenary-edition.help.remove-range', {
range: state.hoveredItem,
voltage: state.initialEntity.properties.voltage,
});

return t('Editor.tools.catenary-edition.help.init');
};
259 changes: 133 additions & 126 deletions front/src/applications/editor/tools/rangeEdition/components.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,138 +54,145 @@ export const TrackRangesList: FC = () => {
<h4 className="pb-0">
<MdShowChart className="me-1" /> {t('Editor.tools.range-edition.linked-track-sections')}
</h4>
<ul className="list-unstyled">
{(showAll ? ranges : ranges.slice(0, DEFAULT_DISPLAYED_RANGES_COUNT)).map((range, i) => {
const trackState = trackSectionsCache[range.track];
{ranges.length === 0 ? (
<p className="text-muted mt-3 text-center">
{t('Editor.tools.range-edition.empty-linked-track-section')}
</p>
) : (
<ul className="list-unstyled">
{(showAll ? ranges : ranges.slice(0, DEFAULT_DISPLAYED_RANGES_COUNT)).map((range, i) => {
const trackState = trackSectionsCache[range.track];

return (
<li key={i} className="mb-4 d-flex flex-row align-items-center">
{(!trackState || trackState.type === 'loading') && (
<div className="position-relative w-100" style={{ height: 50 }}>
<LoaderFill className="bg-transparent" />
</div>
)}
{trackState?.type === 'success' && (
<>
<div className="flex-shrink-0 mr-3 d-flex flex-column">
<small>
<button
type="button"
className="btn btn-primary btn-sm px-2 mb-1"
title={t('Editor.tools.range-edition.edit-track-range-start')}
onClick={() => {
setState({
hoveredItem: null,
interactionState: {
type: 'moveRangeExtremity',
rangeIndex: i,
extremity: 'BEGIN',
},
});
}}
onMouseLeave={() => setState({ hoveredItem: null })}
onMouseEnter={() =>
setState({
hoveredItem: {
speedSectionItemType: 'TrackRangeExtremity',
track: trackState.track,
position: getPointAt(trackState.track, range.begin),
extremity: 'BEGIN',
},
})
}
>
<BsArrowBarRight />
</button>
</small>
<small>
<button
type="button"
className="btn btn-primary btn-sm px-2 mb-1"
title={t('Editor.tools.range-edition.edit-track-range-end')}
onClick={() => {
setState({
hoveredItem: null,
interactionState: {
type: 'moveRangeExtremity',
rangeIndex: i,
extremity: 'END',
},
});
}}
onMouseLeave={() => setState({ hoveredItem: null })}
onMouseEnter={() =>
setState({
hoveredItem: {
speedSectionItemType: 'TrackRangeExtremity',
track: trackState.track,
position: getPointAt(trackState.track, range.end),
extremity: 'END',
},
})
}
>
<FaFlagCheckered />
</button>
</small>
<small>
<button
type="button"
className="btn btn-primary btn-sm px-2"
title={t('common.delete')}
onClick={() => {
const newEntity = cloneDeep(entity);
newEntity.properties.track_ranges?.splice(i, 1);
setState({ entity: newEntity, hoveredItem: null });
}}
onMouseLeave={() => setState({ hoveredItem: null })}
onMouseEnter={() =>
setState({
hoveredItem: {
speedSectionItemType: 'TrackRange',
track: trackState.track,
position: getPointAt(
trackState.track,
trackState.track.properties.length / 2
),
},
})
}
>
<FaTimes />
</button>
</small>
return (
<li key={i} className="mb-4 d-flex flex-row align-items-center">
{(!trackState || trackState.type === 'loading') && (
<div className="position-relative w-100" style={{ height: 50 }}>
<LoaderFill className="bg-transparent" />
</div>
<div className="flex-grow-1 flex-shrink-1">
<EntitySumUp entity={trackState.track} />
{entity.objType !== 'Catenary' && (
<div>
<select
id="filterLevel"
className="form-control"
value={range.applicable_directions}
onChange={(e) => {
)}
{trackState?.type === 'success' && (
<>
<div className="flex-shrink-0 mr-3 d-flex flex-column">
<small>
<button
type="button"
className="btn btn-primary btn-sm px-2 mb-1"
title={t('Editor.tools.range-edition.edit-track-range-start')}
onClick={() => {
setState({
hoveredItem: null,
interactionState: {
type: 'moveRangeExtremity',
rangeIndex: i,
extremity: 'BEGIN',
},
});
}}
onMouseLeave={() => setState({ hoveredItem: null })}
onMouseEnter={() =>
setState({
hoveredItem: {
itemType: 'TrackRangeExtremity',
track: trackState.track,
position: getPointAt(trackState.track, range.begin),
extremity: 'BEGIN',
},
})
}
>
<BsArrowBarRight />
</button>
</small>
<small>
<button
type="button"
className="btn btn-primary btn-sm px-2 mb-1"
title={t('Editor.tools.range-edition.edit-track-range-end')}
onClick={() => {
setState({
hoveredItem: null,
interactionState: {
type: 'moveRangeExtremity',
rangeIndex: i,
extremity: 'END',
},
});
}}
onMouseLeave={() => setState({ hoveredItem: null })}
onMouseEnter={() =>
setState({
hoveredItem: {
itemType: 'TrackRangeExtremity',
track: trackState.track,
position: getPointAt(trackState.track, range.end),
extremity: 'END',
},
})
}
>
<FaFlagCheckered />
</button>
</small>
<small>
<button
type="button"
className="btn btn-primary btn-sm px-2"
title={t('common.delete')}
onClick={() => {
const newEntity = cloneDeep(entity);
const newRange = (newEntity.properties.track_ranges || [])[i];
newRange.applicable_directions = e.target.value as ApplicableDirection;
newEntity.properties.track_ranges?.splice(i, 1);
setState({ entity: newEntity, hoveredItem: null });
}}
onMouseLeave={() => setState({ hoveredItem: null })}
onMouseEnter={() =>
setState({
hoveredItem: {
itemType: 'TrackRange',
track: trackState.track,
position: getPointAt(
trackState.track,
trackState.track.properties.length / 2
),
},
})
}
>
{APPLICABLE_DIRECTIONS.map((direction) => (
<option key={direction} value={direction}>
{t(`Editor.directions.${direction}`)}
</option>
))}
</select>
</div>
)}
</div>
</>
)}
</li>
);
})}
</ul>
<FaTimes />
</button>
</small>
</div>
<div className="flex-grow-1 flex-shrink-1">
<EntitySumUp entity={trackState.track} />
{entity.objType !== 'Catenary' && (
<div>
<select
id="filterLevel"
className="form-control"
value={range.applicable_directions}
onChange={(e) => {
const newEntity = cloneDeep(entity);
const newRange = (newEntity.properties.track_ranges || [])[i];
newRange.applicable_directions = e.target
.value as ApplicableDirection;
setState({ entity: newEntity, hoveredItem: null });
}}
>
{APPLICABLE_DIRECTIONS.map((direction) => (
<option key={direction} value={direction}>
{t(`Editor.directions.${direction}`)}
</option>
))}
</select>
</div>
)}
</div>
</>
)}
</li>
);
})}
</ul>
)}
{ranges.length > DEFAULT_DISPLAYED_RANGES_COUNT && (
<div className="mt-4">
<button
Expand Down
Loading
Loading