init

src/App.tsx

@@ -0,0 +1,93 @@
+import { useState } from 'react'
+import './App.css'
+import 'bootstrap/dist/css/bootstrap.css'
+import { Env } from './models/Env'
+import Environment from "./componets/env"
+import Content from './componets/content'
+import { FileChooser } from './componets/FileChooser'
+import { Config } from "./models/Config"
+import logo from './assets/cgg.png'
+
+class AppState {
+  private constructor(
+    public config: Config = new Config(),
+    public envs: Env[] = [
+    ],
+  ) { }
+
+  static readonly Instance = new AppState();
+
+  public loadConfig(cfg: Config) {
+    this.envs = [...cfg.envs];
+    this.config = cfg;
+  }
+
+  public async saveEnv(env: Env): Promise<number> {
+
+    // Create a promise that resolves after 1 second
+    return await new Promise<number>((resolve) => {
+      setTimeout(() => {
+        let idx = this.envs.findIndex(x => x.id === env.id);
+        if (idx > -1) {
+          this.envs[idx] = env;
+          console.log("UPDATED envs", this.envs);
+        }
+        resolve(idx); // Resolve the promise after updating
+      }, 1000);
+    });
+  }
+}
+
+function App() {
+  const [envs, setEnvs] = useState(AppState.Instance.envs);
+  const [selectedEnv, setSelectedEnv] = useState(0);
+  const [config, setConfig] = useState(AppState.Instance.config);
+
+  async function handleEnvChanged(env: Env) {
+    let idx = await AppState.Instance.saveEnv(env);
+    if (idx > -1) {
+      setEnvs([...AppState.Instance.envs]);
+      setSelectedEnv(idx);
+    }
+  }
+
+  return (
+    <>
+      <main className="container-fluid m-2">
+        <div className="row mb-2">
+          <FileChooser onSelected={x => {
+            AppState.Instance.loadConfig(x);
+            setEnvs(AppState.Instance.envs);
+            setConfig(AppState.Instance.config);
+          }} />
+        </div>
+        {envs.length > 0 ?
+          (<div className="row">
+            <section id="env" className='col-4 me-1'>
+              <Environment
+                envs={envs}
+                onChanged={async (e) => await handleEnvChanged(e)}
+                onSelected={x => setSelectedEnv(x)} />
+            </section>
+            <section id="content" className="col-8 col-xl-7 border-start ms-1">
+              <Content env={envs[selectedEnv]} config={config} />
+            </section>
+          </div>)
+          :
+          (
+            <div className="row justify-content-center pt-5" >
+              <div className="col-1 pt-5">
+                <img src={logo} alt="" style={{ opacity: 0.2, transform: 'scale(1.8)' }} />
+              </div>
+            </div>
+
+          )}
+      </main>
+    </>
+  )
+}
+
+export default App
+
+
+