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

Jump to bottom

front: implement macro editor OP import #7940

Merged
merged 9 commits into from
Aug 6, 2024
+660 −13
Merged

front: implement macro editor OP import #7940

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
a053714
front: add NGE DTO types
emersion Jul 31, 2024
77ba3a4
front: add dto property to NGE component
emersion Jul 31, 2024
8ce66a8
front: listen to NGE reloads
emersion Aug 1, 2024
ab2c5da
front: add basic NGE node import
emersion Jul 31, 2024
f597d9c
front: add default trainrun categories/freqs to NGE
emersion Jul 15, 2024
abcdbb5
front: import train runs into NGE
emersion Jul 15, 2024
c5acf04
front: create node transitions in NGE
emersion Jul 16, 2024
e4af5ce
front: create empty NGE nodes when OSRD OP is missing
emersion Aug 1, 2024
14182e5
front: import train schedule times into NGE
emersion Aug 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
29 changes: 17 additions & 12 deletions front/src/applications/operationalStudies/components/MacroEditor/NGE.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useEffect, useRef } from 'react';
import React, { useEffect, useRef, useState } from 'react';

/* eslint-disable import/extensions, import/no-unresolved */
import ngeMain from '@osrd-project/netzgrafik-frontend/dist/netzgrafik-frontend/en/main.js?url';
Expand All @@ -8,6 +8,12 @@ import ngeStyles from '@osrd-project/netzgrafik-frontend/dist/netzgrafik-fronten
import ngeVendor from '@osrd-project/netzgrafik-frontend/dist/netzgrafik-frontend/en/vendor.js?url';
/* eslint-enable import/extensions, import/no-unresolved */

import type { NetzgrafikDto } from './types';

interface NGEElement extends HTMLElement {
netzgrafikDto: NetzgrafikDto;
}

const frameSrc = `
<!DOCTYPE html>
<html class="sbb-lean sbb-light">
Expand All @@ -22,29 +28,22 @@ const frameSrc = `
</html>
`;

const NGE = () => {
const NGE = ({ dto }: { dto?: NetzgrafikDto }) => {
const frameRef = useRef<HTMLIFrameElement>(null);

const [ngeRootElement, setNgeRootElement] = useState<NGEElement | null>(null);
useEffect(() => {
const frame = frameRef.current!;

const handleFrameLoad = () => {
frame.removeEventListener('load', handleFrameLoad);

const ngeRoot = frame.contentDocument!.createElement('sbb-root');
const ngeRoot = frame.contentDocument!.createElement('sbb-root') as NGEElement;
frame.contentDocument!.body.appendChild(ngeRoot);
setNgeRootElement(ngeRoot);

// listens to create, update and delete operations
// ngeRoot.addEventListener('operation', (event: Event) => {
// console.log('Operation received', (event as CustomEvent).detail);
// });

// get netzgrafik model from NGE
// let netzgrafikDto = ngeRoot.netzgrafikDto;

// // set new netzgrafik model with new nodes
// netzgrafikDto.nodes = testNodesDto;
// ngeRoot.netzgrafikDto = netzgrafikDto;
};

frame.addEventListener('load', handleFrameLoad);
Expand All @@ -54,6 +53,12 @@ const NGE = () => {
};
}, []);

useEffect(() => {
if (ngeRootElement && dto) {
ngeRootElement.netzgrafikDto = dto;
}
}, [dto, ngeRootElement]);

return <iframe ref={frameRef} srcDoc={frameSrc} title="NGE" className="nge-iframe-container" />;
};

Expand Down