[ng] Loads events

eic · May 29, 2024 · e28dab2 · e28dab2
1 parent 8498c57
commit e28dab2
Show file tree

Hide file tree

Showing 11 changed files with 1,538 additions and 11 deletions.
diff --git a/firebird-ng/src/app/eic-edm4hep-json-loader.ts b/firebird-ng/src/app/eic-edm4hep-json-loader.ts
diff --git a/...ird-ng/src/app/main-display/io-options/io-options-dialog/io-options-dialog.component.html b/...ird-ng/src/app/main-display/io-options/io-options-dialog/io-options-dialog.component.html
@@ -0,0 +1,208 @@
+<div class="dialog">
+  <h1 mat-dialog-title>Import and export</h1>
+  <div mat-dialog-content class="dialog-content">
+
+      <p class="text-center"><b>Event data</b></p>
+
+      <div class="row centered">
+
+          <input
+            #jsonEventFileInput
+            type="file"
+            tabindex="-1"
+            class="file-input"
+            accept="application/json"
+            (change)="handleJSONEventDataInput($event)"
+          />
+          <button class="file-input-button" (click)="jsonEventFileInput.click()" >
+            <img src="assets/icons/eventData.svg" alt="Event data icon" />
+            Load .json
+          </button>
+
+<!--       -->
+
+        <input
+          #jsonEdm4hepFileInput
+          type="file"
+          tabindex="-1"
+          class="file-input"
+          accept="application/json"
+          (change)="handleEdm4HepJsonEventDataInput($event)"
+        />
+        <button
+          class="file-input-button"
+          (click)="jsonEdm4hepFileInput.click()"
+        >
+          <img src="assets/icons/eventData.svg" alt="Event data icon" />
+          Load .edm4hep.json
+        </button>
+
+
+<!--        <input-->
+<!--          #eventDataFileInput-->
+<!--          type="file"-->
+<!--          tabindex="-1"-->
+<!--          class="file-input"-->
+<!--          [accept]="eventDataImportOption.accept"-->
+<!--          (change)=" eventDataImportOption.handler($event.target.files)"-->
+<!--        />-->
+<!--        <button-->
+<!--          class="file-input-button"-->
+<!--          (click)="eventDataFileInput.click()"-->
+<!--        >-->
+<!--          <img src="assets/icons/eventData.svg" alt="Event data icon" />-->
+<!--          Load {{ eventDataImportOption.fileType }}-->
+<!--        </button>-->
+<!--        new ImportOption(-->
+<!--        EventDataFormat.JIVEXML,-->
+<!--        '.xml',-->
+<!--        this.handleJiveXMLDataInput.bind(this),-->
+<!--        'text/xml',-->
+<!--        ),-->
+
+<!--        <input-->
+<!--          #eventDataFileInput-->
+<!--          type="file"-->
+<!--          tabindex="-1"-->
+<!--          class="file-input"-->
+<!--          [accept]="eventDataImportOption.accept"-->
+<!--          (change)=" eventDataImportOption.handler($event.target.files)"-->
+<!--        />-->
+<!--        <button-->
+<!--          class="file-input-button"-->
+<!--          (click)="eventDataFileInput.click()"-->
+<!--        >-->
+<!--          <img src="assets/icons/eventData.svg" alt="Event data icon" />-->
+<!--          Load {{ eventDataImportOption.fileType }}-->
+<!--        </button>-->
+<!--        new ImportOption(-->
+<!--        EventDataFormat.ZIP,-->
+<!--        '.zip',-->
+<!--        this.handleZipEventDataInput.bind(this),-->
+<!--        '.zip',-->
+<!--        ),-->
+
+<!--        <input-->
+
+<!--          type="file"-->
+<!--          tabindex="-1"-->
+<!--          class="file-input"-->
+<!--          [accept]="eventDataImportOption.accept"-->
+<!--          (change)=" eventDataImportOption.handler($event.target.files)"-->
+<!--        />-->
+<!--        <button-->
+<!--          class="file-input-button"-->
+<!--          (click)="eventDataFileInput.click()"-->
+<!--        >-->
+<!--          <img src="assets/icons/eventData.svg" alt="Event data icon" />-->
+<!--          Load {{ eventDataImportOption.fileType }}-->
+<!--        </button>-->
+
+<!--        new ImportOption(-->
+<!--        EventDataFormat.IG,-->
+<!--        '.ig',-->
+<!--        this.handleIgEventDataInput.bind(this),-->
+<!--        '.ig',-->
+<!--        ),-->
+
+      </div>
+
+
+    <p class="text-center"><b>Geometries</b></p>
+
+    <div class="row centered">
+<!--      <input-->
+<!--        #objFileInput-->
+<!--        type="file"-->
+<!--        tabindex="-1"-->
+<!--        class="file-input"-->
+<!--        accept=".obj"-->
+<!--        name="image"-->
+<!--        (change)="handleOBJInput($event.target as HTMLInputElement)"-->
+<!--      />-->
+<!--      <button class="file-input-button" (click)="objFileInput.click()">-->
+<!--        <img src="assets/icons/obj.svg" alt="" /> Load .obj-->
+<!--      </button>-->
+
+<!--      <input-->
+<!--        #gltfFileInput-->
+<!--        type="file"-->
+<!--        tabindex="-1"-->
+<!--        class="file-input"-->
+<!--        accept=".gltf"-->
+<!--        name="image"-->
+<!--        (change)="handleGLTFInput($event.target.files)"-->
+<!--      />-->
+<!--      <button class="file-input-button" (click)="gltfFileInput.click()">-->
+<!--        <img src="assets/icons/gltf.svg" alt="" /> Load .gltf-->
+<!--      </button>-->
+
+<!--      <input-->
+<!--        #rootFileInput-->
+<!--        type="file"-->
+<!--        tabindex="-1"-->
+<!--        class="file-input"-->
+<!--        accept=".root"-->
+<!--        (change)="handleROOTInput($event.target.files)"-->
+<!--      />-->
+<!--      <button class="file-input-button" (click)="rootFileInput.click()">-->
+<!--        <img src="assets/icons/file-import.svg" alt="" /> Load .root-->
+<!--      </button>-->
+
+<!--      <input-->
+<!--        #rootJSONFileInput-->
+<!--        type="file"-->
+<!--        tabindex="-1"-->
+<!--        class="file-input"-->
+<!--        accept=".json.gz"-->
+<!--        (change)="handleRootJSONInput($event.target.files)"-->
+<!--      />-->
+<!--      <button class="file-input-button" (click)="rootJSONFileInput.click()">-->
+<!--        <img src="assets/icons/file-import.svg" alt="" /> Load .json.gz-->
+<!--      </button>-->
+    </div>
+
+    <p class="text-center"><b>Scene</b></p>
+
+    <div class="row centered">
+      <button
+        class="file-input-button load-export"
+        id="exportScene"
+        (click)="saveScene()"
+      >
+        <img src="assets/icons/save.svg" alt="" /> Save scene
+      </button>
+
+<!--      <input-->
+<!--        #loadSceneInput-->
+<!--        type="file"-->
+<!--        tabindex="-1"-->
+<!--        class="file-input"-->
+<!--        accept=".phnx"-->
+<!--        name="image"-->
+<!--        (change)="handlePhoenixInput($event.target.files)"-->
+<!--      />-->
+<!--      <button-->
+<!--        class="file-input-button load-export"-->
+<!--        id="importScene"-->
+<!--        (click)="loadSceneInput.click()"-->
+<!--      >-->
+<!--        <img src="assets/icons/upload.svg" alt="" /> Load scene-->
+<!--      </button>-->
+
+      <button
+        class="file-input-button export-button"
+        id="exportOBJ"
+        (click)="exportOBJ()"
+      >
+        <img src="assets/icons/obj.svg" alt="" /> Save OBJ
+      </button>
+    </div>
+  </div>
+
+  <div mat-dialog-actions align="end">
+    <button mat-flat-button color="primary" (click)="onClose()" cdkFocusInitial>
+      Close
+    </button>
+  </div>
+</div>
diff --git a/...ird-ng/src/app/main-display/io-options/io-options-dialog/io-options-dialog.component.scss b/...ird-ng/src/app/main-display/io-options/io-options-dialog/io-options-dialog.component.scss
@@ -0,0 +1,68 @@
+.row {
+  justify-content: center;
+  margin: 1rem 0;
+}
+
+.file-input {
+  width: 0.1px;
+  height: 0.1px;
+  opacity: 0;
+  overflow: hidden;
+  position: absolute;
+  z-index: -1;
+}
+
+.file-input-button {
+  font-size: 1em;
+  font-weight: 700;
+  color: white;
+  background-color: #6eaece;
+  padding: 1em 0.5em;
+  border: none;
+  border-radius: 10px;
+  width: 8rem;
+  margin: 0 0.4rem;
+
+  &.load-export {
+    padding: 0.8em 0.2em;
+    width: 7rem;
+
+    img {
+      max-height: 1.2em;
+    }
+  }
+
+  &.export-button {
+    background-color: #cb7133;
+
+    &:hover {
+      background-color: #ad5b2d;
+    }
+  }
+
+  img {
+    max-height: 2em;
+    display: block;
+    width: 100%;
+  }
+
+  &:hover {
+    background-color: #118ab2;
+  }
+}
+
+#exportScene {
+  background-color: #5bd99e;
+
+  &:hover {
+    background-color: #05c292;
+  }
+}
+
+#importScene {
+  background-color: #ecc25e;
+
+  &:hover {
+    background-color: #d6b44d;
+  }
+}