Refactor particle management: remove secret key from file operations, add ParticleManagerComponent, update frame naming conventions, and enhance style and functionality.

2026-01-04 05:22:04 +01:00
parent 63aa7fd550
commit 8a0843128c
12 changed files with 164 additions and 35 deletions
@@ -0,0 +1,39 @@
+<div class="card-div">
+  <mat-card>
+    <mat-card-header>
+      <mat-card-title>
+        <span>Particle Manager</span>
+      </mat-card-title>
+    </mat-card-header>
+    <mat-card-content>
+      <br>
+      <div class="row">
+        <div class="column">
+          <mat-form-field appearance="outline" class="type-field">
+            <mat-label>Particle to download</mat-label>
+            <input type="text"
+                   [(ngModel)]="selectedParticle"
+                   placeholder="Name of particle to download"
+                   matInput>
+          </mat-form-field>
+          <button mat-icon-button (click)="downloadParticle()">
+            <mat-icon>download</mat-icon>
+          </button>
+        </div>
+        <div class="row">
+          <mat-form-field appearance="outline" class="type-field">
+            <mat-label>Particle to upload</mat-label>
+            <input type="text"
+                   disabled
+                   [ngModel]="createdParticleName"
+                   placeholder="Name of particle to upload"
+                   matInput>
+          </mat-form-field>
+          <button mat-icon-button (click)="uploadParticle()">
+            <mat-icon>upload</mat-icon>
+          </button>
+        </div>
+      </div>
+    </mat-card-content>
+  </mat-card>
+</div>
@@ -0,0 +1,6 @@
+.card-div {
+  mat-card {
+    background-color: var(--color-primary);
+    color: var(--font-color);
+  }
+}
@@ -0,0 +1,86 @@
+import {Component, inject} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {MatInput, MatLabel} from '@angular/material/input';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatCard, MatCardContent, MatCardHeader, MatCardTitle} from '@angular/material/card';
+import {MatIconModule} from '@angular/material/icon';
+import {MatButtonModule} from '@angular/material/button';
+import {ParticlesService} from '@api';
+import {ParticleManagerService} from '@pages/particles/services/particle-manager.service';
+import {FrameManagerService} from '@pages/particles/services/frame-manager.service';
+
+@Component({
+  selector: 'app-particle-manager',
+  imports: [
+    FormsModule,
+    MatFormFieldModule,
+    MatInput,
+    MatLabel,
+    MatCard,
+    MatCardContent,
+    MatCardHeader,
+    MatCardTitle,
+    MatIconModule,
+    MatButtonModule,
+  ],
+  templateUrl: './particle-manager.component.html',
+  styleUrl: './particle-manager.component.scss'
+})
+export class ParticleManagerComponent {
+
+  private readonly particlesService = inject(ParticlesService)
+  private readonly particleManagerService = inject(ParticleManagerService)
+  private readonly frameManagerService = inject(FrameManagerService)
+
+  private selectedParticleName: string = '';
+
+  set selectedParticle(particle: string) {
+    this.selectedParticleName = particle;
+  }
+
+  get selectedParticle(): string {
+    return this.selectedParticleName;
+  }
+
+  get createdParticleName(): string {
+    return this.particleManagerService.getParticleData().particle_name;
+  }
+
+  protected downloadParticle() {
+    if (this.selectedParticleName === '') {
+      return;
+    }
+    this.particlesService
+      .downloadFile(this.selectedParticleName)
+      .subscribe({
+          next: data => {
+            data.text().then(text => {
+              if (text.startsWith('<')) {
+                console.error("Failed to download particle: Invalid file format")
+                return;
+              }
+              this.particleManagerService.loadParticleData(text)
+              this.frameManagerService.switchFrame(this.particleManagerService.getCurrentFrame())
+            })
+          },
+          error: () => {
+            console.error("Failed to download particle: Invalid file name")
+          },
+        }
+      )
+  }
+
+  protected uploadParticle() {
+    this.particlesService
+      .saveFile(this.createdParticleName, new Blob([this.particleManagerService.generateJson()], {type: 'application/json'}))
+      .subscribe({
+        next: () => {
+          console.log("Successfully uploaded particle")
+        },
+        error: () => {
+          console.error("Failed to upload particle")
+        }
+      })
+  }
+
+}