47 lines
1.9 KiB
HTML
47 lines
1.9 KiB
HTML
<mat-card>
|
|
<mat-card-header>
|
|
<mat-card-title>Frames</mat-card-title>
|
|
</mat-card-header>
|
|
<mat-card-content>
|
|
<div class="frames-container">
|
|
<mat-tab-group [selectedIndex]="frames.indexOf(currentFrame)"
|
|
(selectedIndexChange)="switchFrame(frames[$event])">
|
|
<mat-tab *ngFor="let frameId of frames" [label]="frameId">
|
|
<div class="frame-content">
|
|
<h3>Particles in {{ frameId }}</h3>
|
|
<div class="particles-list">
|
|
<div *ngFor="let particle of particleData.frames[frameId]; let i = index" class="particle-item">
|
|
<span class="particle-item-text">
|
|
Particle {{ i + 1 }}: ({{ particle.x.toFixed(2) }}, {{ particle.y.toFixed(2) }}
|
|
, {{ particle.z.toFixed(2) }})
|
|
</span>
|
|
<button mat-icon-button (click)="removeParticle(frameId, i)">
|
|
<mat-icon>delete</mat-icon>
|
|
</button>
|
|
<button mat-icon-button (click)="highlightParticle(frameId, i)">
|
|
<mat-icon>lightbulb</mat-icon>
|
|
</button>
|
|
</div>
|
|
<div *ngIf="!particleData.frames[frameId] || particleData.frames[frameId].length === 0"
|
|
class="no-particles">
|
|
No particles in this frame. Click on the plane to add particles.
|
|
</div>
|
|
</div>
|
|
<div class="frame-actions">
|
|
<button mat-raised-button color="warn" (click)="removeFrame(frameId)"
|
|
[disabled]="frames.length <= 1">
|
|
Remove Frame
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</mat-tab>
|
|
</mat-tab-group>
|
|
<div class="add-frame">
|
|
<button mat-raised-button color="primary" (click)="addFrame()">
|
|
Add New Frame
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</mat-card-content>
|
|
</mat-card>
|