stijn
ebe66c87c0
Pages are now grouped per group they appear in on in the header (where possible) Utilities used by multiple pages in the project are grouped in folders such as services/pipes/etc
49 lines
2.0 KiB
HTML
49 lines
2.0 KiB
HTML
<div class="card-div">
|
|
<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>
|
|
</div>
|