59 lines
2.4 KiB
HTML
59 lines
2.4 KiB
HTML
<div class="card-div">
|
|
<mat-card>
|
|
<mat-card-header class="frame-header-fullwidth">
|
|
<div class="frame-header-row" mat-card-title>
|
|
<span class="frame-title-text">Frames</span>
|
|
<div>
|
|
<ng-content></ng-content>
|
|
<button mat-icon-button color="warn" (click)="removeFrame(currentFrame)"
|
|
matTooltip="Delete {{currentFrame}}"
|
|
[disabled]="frames.length <= 1">
|
|
<mat-icon [class.can-delete]="frames.length > 1" [class.can-not-delete]="frames.length <= 1">
|
|
delete
|
|
</mat-icon>
|
|
</button>
|
|
<button mat-icon-button (click)="addFrame()" matTooltip="Add Frame">
|
|
<mat-icon class="add-button">add</mat-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</mat-card-header>
|
|
<mat-card-content>
|
|
<div class="frames-container">
|
|
<mat-tab-group [selectedIndex]="frames.indexOf(currentFrame)"
|
|
(selectedIndexChange)="switchFrame(frames[$event])">
|
|
@for (frameId of frames; track frameId) {
|
|
<mat-tab [label]="frameId">
|
|
<div class="frame-content">
|
|
<h3>Particles in {{ frameId }}</h3>
|
|
<div class="particles-list">
|
|
@for (particle of particleData.frames[frameId]; track particle; let i = $index) {
|
|
<div 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>
|
|
}
|
|
@if (!particleData.frames[frameId] || particleData.frames[frameId].length === 0) {
|
|
<div
|
|
class="no-particles">
|
|
No particles in this frame. Click on the plane to add particles.
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</mat-tab>
|
|
}
|
|
</mat-tab-group>
|
|
</div>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
</div>
|