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.

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: display timetable in macro mode, add styles for macro container #9792

Merged
merged 1 commit into from
Dec 5, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { useState, useEffect, useCallback } from 'react';
import { ChevronRight } from '@osrd-project/ui-icons';
import cx from 'classnames';
import { useTranslation } from 'react-i18next';
import { GiElectric } from 'react-icons/gi';

import handleOperation from 'applications/operationalStudies/components/MacroEditor/ngeToOsrd';
import importTimetableToNGE from 'applications/operationalStudies/components/MacroEditor/osrdToNge';
Expand All @@ -15,7 +14,6 @@ import useScenarioData from 'applications/operationalStudies/hooks/useScenarioDa
import ImportTrainSchedule from 'applications/operationalStudies/views/ImportTrainSchedule';
import ManageTrainSchedule from 'applications/operationalStudies/views/ManageTrainSchedule';
import SimulationResults from 'applications/operationalStudies/views/SimulationResults';
import infraLogo from 'assets/pictures/components/tracks.svg';
import type {
InfraWithState,
ScenarioResponse,
Expand Down Expand Up @@ -52,7 +50,6 @@ const ScenarioContent = ({
const [collapsedTimetable, setCollapsedTimetable] = useState(false);
const [trainIdToEdit, setTrainIdToEdit] = useState<number>();
const [isMacro, setIsMacro] = useState(false);

const {
selectedTrainId,
trainScheduleSummaries,
Expand All @@ -67,9 +64,11 @@ const ScenarioContent = ({
const toggleMicroMacroButton = useCallback(
(isMacroMode: boolean) => {
setIsMacro(isMacroMode);
setCollapsedTimetable(isMacroMode);
if (!isMacroMode && collapsedTimetable) {
setCollapsedTimetable(false);
}
},
[setIsMacro, setCollapsedTimetable]
[setIsMacro, setCollapsedTimetable, collapsedTimetable]
);

const [ngeDto, setNgeDto] = useState<NetzgrafikDto>();
Expand Down Expand Up @@ -134,8 +133,10 @@ const ScenarioContent = ({
infraReloadCount={reloadCount}
collapseTimetable={() => setCollapsedTimetable(true)}
/>

<MicroMacroSwitch isMacro={isMacro} setIsMacro={toggleMicroMacroButton} />
{!isMacro && infra && (

{infra && (
<>
{displayTrainScheduleManagement !== MANAGE_TRAIN_SCHEDULE_TYPES.none && (
<TimetableManageTrainSchedule
Expand Down Expand Up @@ -165,6 +166,17 @@ const ScenarioContent = ({
</div>

<div className={collapsedTimetable ? 'col-12' : 'col-hdp-9 col-xl-8 col-lg-7 col-md-6'}>
{collapsedTimetable && (
<button
data-testid="timetable-collapse-button"
className="timetable-collapse-button"
type="button"
aria-label={t('toggleTimetable')}
onClick={() => setCollapsedTimetable(false)}
>
<ChevronRight />
</button>
)}
{!isInfraLoaded &&
!isMacro &&
displayTrainScheduleManagement !== MANAGE_TRAIN_SCHEDULE_TYPES.add &&
Expand All @@ -186,37 +198,8 @@ const ScenarioContent = ({
</div>
)}
<div className="scenario-results">
{collapsedTimetable && (
<>
<div className="scenario-timetable-collapsed">
<button
data-testid="timetable-collapse-button"
className="timetable-collapse-button"
type="button"
aria-label={t('toggleTimetable')}
onClick={() => setCollapsedTimetable(false)}
>
<ChevronRight />
</button>
<div className="lead ml-2">{scenario.name}</div>
<div className="d-flex align-items-center ml-auto">
<img src={infraLogo} alt="Infra logo" className="infra-logo mr-2" />
{scenario.infra_name}
</div>
<div className="d-flex align-items-center ml-4">
<span className="mr-1">
<GiElectric />
</span>
{scenario.electrical_profile_set_id
? scenario.electrical_profile_set_id
: t('noElectricalProfileSet')}
</div>
</div>
<MicroMacroSwitch isMacro={isMacro} setIsMacro={toggleMicroMacroButton} />
</>
)}
{isMacro ? (
<div className={cx(collapsedTimetable ? 'macro-container' : 'h-100')}>
<div className={cx(collapsedTimetable ? 'macro-container' : 'h-100 p-1')}>
<NGE dto={ngeDto} onOperation={handleNGEOperation} />
</div>
) : (
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
.nge-iframe-container {
width: 100%;
height: 100%;
border: 1px solid pink;
emersion marked this conversation as resolved.
Show resolved Hide resolved
border-radius: 10px;
box-shadow:
-4px 0 8px var(--coolgray1),
4px 0 8px var(--coolgray1),
0 2px 8px var(--coolgray13);
}
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
font-family: 'IBM Plex Sans';
.scenario-container {
margin: 0;
position: relative;
}

@keyframes fadein {
Expand All @@ -18,6 +19,21 @@
}
}

.timetable-collapse-button {
position: absolute;
left: 0;
top: 38px;
padding-bottom: 3px;
padding-inline: 4px 12px;
height: 34px;
width: 24px;
color: var(--grey40);
background-color: var(--white100);
border-radius: 0px 5px 5px 0px;
box-shadow: 0 0 0 1px var(--black10);
clip-path: inset(-1px -1px -1px 1px);
z-index: 2;
}
.micro-macro-buttons {
button {
color: var(--grey60);
Expand Down Expand Up @@ -68,19 +84,6 @@
padding-bottom: 8px;
z-index: 1;
background-color: var(--coolgray1);
.timetable-collapse-button {
display: flex;
align-items: center;
position: relative;
top: 0;
left: 0;
background-color: var(--secondary);
color: var(--white100);
border: unset;
border-radius: 4px;
padding: 8px;
z-index: 2;
}
}

.scenario-timetable-managetrainschedule {
Expand Down Expand Up @@ -823,14 +826,15 @@

.scenario-results {
padding-top: 8px;
padding-left: 24px;
position: relative;
overflow: auto;
width: 100%;
height: var(--content-height);
}

.macro-container {
// the value subtracted is egal to the height of scenario-timetable-collapsed + micro-macro-buttons + scenario-results padding
height: calc(var(--content-height) - 156px);
height: calc(var(--content-height) - 20px);
padding-right: 10px;
}
}
Loading