87 lines
2.5 KiB
TypeScript
87 lines
2.5 KiB
TypeScript
import React from 'react';
|
|
import './App.scss';
|
|
import Sidebar from './Components/Sidebar/Sidebar';
|
|
import { SVGSidebar } from './Components/SVGSidebar/SVGSidebar';
|
|
import { AvailableContainer } from './Interfaces/AvailableContainer';
|
|
import { Configuration } from './Interfaces/Configuration';
|
|
import { SVG } from './SVG/SVG';
|
|
|
|
interface IAppProps {
|
|
}
|
|
|
|
interface IAppState {
|
|
isSidebarOpen: boolean,
|
|
isSVGSidebarOpen: boolean,
|
|
configuration: Configuration
|
|
}
|
|
|
|
class App extends React.Component<IAppProps> {
|
|
public state: IAppState;
|
|
|
|
constructor(props: IAppProps) {
|
|
super(props);
|
|
this.state = {
|
|
isSidebarOpen: true,
|
|
isSVGSidebarOpen: true,
|
|
configuration: {
|
|
AvailableContainers: [],
|
|
AvailableSymbols: [],
|
|
MainContainer: {} as AvailableContainer
|
|
}
|
|
};
|
|
}
|
|
|
|
componentDidMount() {
|
|
fetchConfiguration().then((configuration: Configuration) => {
|
|
this.setState(prevState => ({
|
|
...prevState,
|
|
configuration
|
|
}));
|
|
});
|
|
}
|
|
|
|
public ToggleSidebar() {
|
|
this.setState(prevState => ({
|
|
...prevState,
|
|
isSidebarOpen: !this.state.isSidebarOpen
|
|
} as IAppState));
|
|
}
|
|
|
|
public ToggleSVGSidebar() {
|
|
this.setState(prevState => ({
|
|
...prevState,
|
|
isSVGSidebarOpen: !this.state.isSVGSidebarOpen
|
|
} as IAppState));
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div className="App font-sans h-full">
|
|
<Sidebar componentOptions={this.state.configuration.AvailableContainers} isOpen={this.state.isSidebarOpen} onClick={() => this.ToggleSidebar()} />
|
|
<button className='fixed z-0 top-4 left-4 text-lg bg-blue-200 hover:bg-blue-300 transition-all drop-shadow-md hover:drop-shadow-lg py-2 px-3 rounded-lg' onClick={() => this.ToggleSidebar()}>☰ Menu</button>
|
|
<SVGSidebar isOpen={this.state.isSVGSidebarOpen} onClick={() => this.ToggleSVGSidebar()}/>
|
|
<button className='fixed z-0 top-4 right-4 text-lg bg-slate-200 hover:bg-slate-300 transition-all drop-shadow-md hover:drop-shadow-lg py-2 px-3 rounded-lg' onClick={() => this.ToggleSVGSidebar()}>☰ Menu</button>
|
|
<SVG MainContainer={this.state.configuration.MainContainer} />
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
async function fetchConfiguration(): Promise<Configuration> {
|
|
const url = `${import.meta.env.VITE_API_URL}`;
|
|
const myHeaders = new Headers({
|
|
'Content-Type': 'application/json'
|
|
});
|
|
|
|
const myInit = {
|
|
method: 'POST',
|
|
headers: myHeaders
|
|
};
|
|
|
|
return await fetch(url, myInit)
|
|
.then((response) =>
|
|
response.json()
|
|
) as Configuration;
|
|
}
|
|
|
|
export default App;
|