Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@Akctarus
Akctarus committed Apr 25, 2024
1 parent b4bb950 commit 5cde537
Show file tree
Hide file tree
Showing 7 changed files with 136 additions and 32 deletions.
30 changes: 20 additions & 10 deletions front/src/applications/stdcm/components/SimulationReportSheet.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { Page, Text, Image, Document, View, Font } from '@react-pdf/renderer';
import { useTranslation } from 'react-i18next';

import IBMPlexMonoBold from 'assets/simulationSheet/fonts/IBM-Plex-Mono/IBMPlexMono-Bold.ttf';
import IBMPlexMonoMedium from 'assets/simulationSheet/fonts/IBM-Plex-Mono/IBMPlexMono-Medium.ttf';
import IBMPlexMonoRegular from 'assets/simulationSheet/fonts/IBM-Plex-Mono/IBMPlexMono-Regular.ttf';
import IBMPlexSansBold from 'assets/simulationSheet/fonts/IBM-Plex-Sans/IBMPlexSans-Bold.ttf';
import IBMPlexSansItalic from 'assets/simulationSheet/fonts/IBM-Plex-Sans/IBMPlexSans-Italic.ttf';
Expand All @@ -16,18 +17,20 @@ import logoSNCF from 'assets/simulationSheet/logo_sncf_reseau.png';
import type { PostStdcmApiResponse, RollingStockWithLiveries } from 'common/api/osrdEditoastApi';

import styles from './SimulationReportStyleSheet';
import { formatDate, getStopTime } from '../utils';
import { formatDate, formatDay, getStopTime } from '../utils';

interface SimulationReportSheetProps {
stdcmData: PostStdcmApiResponse | null;
rollingStockData: RollingStockWithLiveries | undefined;
number: string;
mapCanvas?: string;
}

const SimulationReportSheet: React.FC<SimulationReportSheetProps> = ({
stdcmData,
rollingStockData,
number,
mapCanvas,
}) => {
const { t } = useTranslation('stdcm-simulation-sheet');

Expand All @@ -46,6 +49,7 @@ const SimulationReportSheet: React.FC<SimulationReportSheetProps> = ({
family: 'IBM Plex Mono',
fonts: [
{ src: IBMPlexMonoRegular, fontWeight: 'normal' },
{ src: IBMPlexMonoMedium, fontWeight: 'medium' },
{ src: IBMPlexMonoBold, fontWeight: 'bold' },
],
});
Expand Down Expand Up @@ -77,15 +81,15 @@ const SimulationReportSheet: React.FC<SimulationReportSheetProps> = ({
<View style={styles.rcInfo}>
<View>
<Text style={styles.rcName}>Super Fret</Text>
<Text style={styles.rcPerson}>Stéphanie Martin-Duclotte</Text>
<Text style={styles.rcPersonName}>Stéphanie Martin-Duclotte</Text>
</View>
<View>
<Text style={styles.phoneNumber}>04 12 34 56 78</Text>
<Text style={styles.mail}>stephanie.martin-duclotte@superfret.fr</Text>
<Text style={styles.rcPhoneNumber}>04 12 34 56 78</Text>
<Text style={styles.rcMail}>stephanie.martin-duclotte@superfret.fr</Text>
</View>
<View style={styles.stdcmApplication}>
<Text style={styles.applicationDate}>{t('applicationDate')}</Text>
<Text style={styles.date}>vendredi 15 mars 2024</Text>
<Text style={styles.date}>{formatDay()}</Text>
<Text style={styles.referencePath}>{t('referencePath')}</Text>
<Text style={styles.pathNumber}>n°123456</Text>
</View>
Expand Down Expand Up @@ -121,8 +125,10 @@ const SimulationReportSheet: React.FC<SimulationReportSheetProps> = ({
<View style={styles.route}>
<Text style={styles.routeTitle}> {t('requestedRoute')}</Text>
<View style={styles.fromBanner}>
<Text style={styles.from}>{t('from')}</Text>
<Text>n°123456</Text>
<View style={styles.fromBox}>
<Text style={styles.from}>{t('from')}</Text>
</View>
<Text style={styles.fromNumber}>n°123456</Text>
</View>
<View style={styles.stopTableContainer}>
<Table style={styles.stopTable}>
Expand Down Expand Up @@ -160,8 +166,10 @@ const SimulationReportSheet: React.FC<SimulationReportSheetProps> = ({
</Table>
</View>
<View style={styles.forBanner}>
<Text>n°987654</Text>
<Text style={styles.for}>{t('for')}</Text>
<Text style={styles.forNumber}>n°987654</Text>
<View style={styles.forBox}>
<Text style={styles.for}>{t('for')}</Text>
</View>
</View>
</View>
</View>
Expand Down Expand Up @@ -239,7 +247,9 @@ const SimulationReportSheet: React.FC<SimulationReportSheetProps> = ({
<View style={styles.horizontalBar} />
</View>
</View>
<View style={styles.map} />
<View style={styles.map}>
<Image src={mapCanvas} />
</View>
<View style={styles.warrantyBox}>
<Text style={styles.warrantyMessage}>{t('withoutWarranty')}</Text>
</View>
Expand Down
75 changes: 57 additions & 18 deletions front/src/applications/stdcm/components/SimulationReportStyleSheet.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,15 @@ const styles = StyleSheet.create({
alignItems: 'center',
},
alertIcon: {
width: '25',
height: '23',
marginLeft: '20.53',
width: '24',
height: '24',
marginLeft: '20',
},
simulationTitle: {
fontSize: '28',
fontWeight: 'semibold',
marginLeft: '19.03',
marginBottom: '2',
letterSpacing: '-0.35',
},
message: {
Expand Down Expand Up @@ -49,7 +50,7 @@ const styles = StyleSheet.create({
},
creation: {
fontSize: '13',
marginBottom: '28',
marginBottom: '30',
letterSpacing: '-0.16',
},
numericInfo: {
Expand All @@ -59,17 +60,21 @@ const styles = StyleSheet.create({
borderRadius: '7',
marginTop: '20',
marginBottom: '20',
marginLeft: '400',
marginLeft: '150',
fontFamily: 'IBM Plex Mono',
},
number: {
fontSize: '16',
fontWeight: 'bold',
letterSpacing: '-0.2',
marginLeft: '12',
marginTop: '10',
marginBottom: '3',
},
creationDate: {
fontSize: '14',
letterSpacing: '-0.17',
marginLeft: '12',
},
sncfLogo: {
width: '69.21',
Expand All @@ -81,7 +86,6 @@ const styles = StyleSheet.create({
rcInfo: {
height: '160',
color: '#000000',
display: 'flex',
borderBottom: '1 solid #D3D1CF',
},
rcName: {
Expand All @@ -92,20 +96,21 @@ const styles = StyleSheet.create({
color: '#005BC1',
letterSpacing: '-0.22',
},
rcPerson: {
rcPersonName: {
fontSize: '16',
marginLeft: '40',
color: '#005BC1',
letterSpacing: '-0.2',
},
phoneNumber: {
rcPhoneNumber: {
fontSize: '18',
marginLeft: '400',
marginTop: '22',
marginBottom: '3',
color: '#005BC1',
letterSpacing: '-0.22',
},
mail: {
rcMail: {
fontSize: '16',
marginLeft: '400',
color: '#005BC1',
Expand Down Expand Up @@ -134,12 +139,13 @@ const styles = StyleSheet.create({
},
convoyAndRoute: {
height: 'auto',
borderBottom: '1rem solid #D3D1CF',
display: 'flex',
flexDirection: 'row',
borderBottom: '1rem solid #D3D1CF',
},
convoy: {
marginLeft: '16',
paddingRight: '16',
paddingRight: '32',
borderRight: '1 solid #D3D1CF',
},
convoyTitle: {
Expand Down Expand Up @@ -182,21 +188,38 @@ const styles = StyleSheet.create({
},
fromBanner: {
height: '32',
width: '912',
backgroundColor: '#F6F8F9',
marginBottom: '13',
display: 'flex',
flexDirection: 'row',
},
from: {
fromBox: {
width: '64',
height: '32',
textAlign: 'center',
textTransform: 'uppercase',
backgroundColor: '#70C1E5',
},
from: {
fontSize: '16',
fontWeight: 'semibold',
textTransform: 'uppercase',
color: '#FFFFFF',
marginTop: '5',
},
fromNumber: {
fontFamily: 'IBM Plex Mono',
fontSize: '16',
fontWeight: 'medium',
marginLeft: '16',
marginTop: '5',
letterSpacing: '-0.2',
},
stopTableContainer: {
backgroundColor: '#EFF3F5',
marginBottom: 13,
// minHeight: '360',
height: 'auto',
width: '912',
},
stopTable: {
border: 'none',
Expand Down Expand Up @@ -244,17 +267,33 @@ const styles = StyleSheet.create({
},
forBanner: {
height: '32',
width: '912',
backgroundColor: '#F6F8F9',
marginBottom: '16',
alignContent: 'flex-end',
display: 'flex',
flexDirection: 'row',
justifyContent: 'flex-end',
},
for: {
forBox: {
width: '64',
height: '32',
textAlign: 'center',
textTransform: 'uppercase',
backgroundColor: '#70C1E5',
},
for: {
fontSize: '16',
fontWeight: 'semibold',
textTransform: 'uppercase',
color: '#FFFFFF',
marginTop: '5',
},
forNumber: {
fontFamily: 'IBM Plex Mono',
fontSize: '16',
fontWeight: 'medium',
marginRight: '16',
marginTop: '5',
letterSpacing: '-0.2',
},
simulation: {
paddingBottom: '17',
Expand Down Expand Up @@ -343,7 +382,7 @@ const styles = StyleSheet.create({
},
map: {
width: '1312',
height: '1312',
height: 'auto',
marginTop: '17',
marginLeft: '16',
marginRight: '16',
Expand Down
29 changes: 29 additions & 0 deletions front/src/applications/stdcm/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,35 @@ export function formatDate(isoDate: string | undefined) {
return formattedDate;
}

export function formatDay() {
const date = new Date();

const days = ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'];
const months = [
'janvier',
'février',
'mars',
'avril',
'mai',
'juin',
'juillet',
'août',
'septembre',
'octobre',
'novembre',
'décembre',
];

const day = days[date.getDay()];
const dayNumber = date.getDate();
const ActualMonth = months[date.getMonth()];
const year = date.getFullYear();

const formattedDate = `${day} ${dayNumber} ${ActualMonth} ${year}`;

return formattedDate;
}

export function getStopTime(sec: number) {
const timeplus = new Date(sec * 1000);
const hours = timeplus.getUTCHours().toString().padStart(2, '0');
Expand Down
6 changes: 4 additions & 2 deletions front/src/applications/stdcm/views/OSRDStdcmConfig.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,8 @@ export default function OSRDConfig({
const [showMap, setShowMap] = useState<boolean>(true);
const [isInfraLoaded, setIsInfraLoaded] = useState<boolean>(false);

const [mapCanvas, setMapCanvas] = useState<string>();

const osrdconf: OsrdStdcmConfState = useSelector(getConf) as OsrdStdcmConfState;

const { speedLimitByTag, speedLimitsByTags, dispatchUpdateSpeedLimitByTag } =
Expand Down Expand Up @@ -155,13 +157,13 @@ export default function OSRDConfig({
: 'stdcm-map-noSimulation'
}`}
>
<Map />
<Map setMapCanvas={setMapCanvas} />
</div>
)}
</div>
</div>
{currentStdcmRequestStatus === STDCM_REQUEST_STATUS.success &&
shouldDisplayStdcmResult && <OSRDStdcmResults />}
shouldDisplayStdcmResult && <OSRDStdcmResults mapCanvas={mapCanvas} />}
</div>
)}
</div>
Expand Down
7 changes: 6 additions & 1 deletion front/src/applications/stdcm/views/OSRDStdcmResults.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,11 @@ import SimulationReportSheet from '../components/SimulationReportSheet';
import formatStdcmConf from '../formatStdcmConf';
import { generateCodeNumber } from '../utils';

const OSRDStcdmResults = () => {
type OSRDStcdmResultsProps = {
mapCanvas?: string;
};

const OSRDStcdmResults: React.FC<OSRDStcdmResultsProps> = ({ mapCanvas }) => {
const { t } = useTranslation(['translation', 'stdcm']);

const [showSpeedSpaceChart, setShowSpeedSpaceChart] = useState(false);
Expand Down Expand Up @@ -135,6 +139,7 @@ const OSRDStcdmResults = () => {
stdcmData={stdcmResults}
rollingStockData={rollingStock}
number={codeNumber}
mapCanvas={mapCanvas}
/>
}
fileName={`STDCM-${codeNumber}.pdf`}
Expand Down
Binary file added front/src/assets/simulationSheet/fonts/IBM-Plex-Mono/IBMPlexMono-Medium.ttf
View file
Binary file not shown.
Loading

0 comments on commit 5cde537

Please sign in to comment.