feat: Refactor profile edit form to use custom element bindings and improve event handling
This commit is contained in:
parent
47a27669f9
commit
d132cdc8ff
2 changed files with 78 additions and 11 deletions
|
|
@ -4,22 +4,51 @@
|
|||
<div class="profile-item">
|
||||
@if(editingProfile && editingProfile.id === profile.id) {
|
||||
<div class="profile-form">
|
||||
<wa-input [(ngModel)]="editingProfile.name" label="Profile Name"></wa-input>
|
||||
<wa-select [(ngModel)]="editingProfile.minerType" label="Miner Type">
|
||||
<wa-input
|
||||
label="Profile Name"
|
||||
[value]="editingProfile.name"
|
||||
(input)="onNameInput($event)">
|
||||
</wa-input>
|
||||
<wa-select
|
||||
label="Miner Type"
|
||||
[value]="editingProfile.minerType"
|
||||
(change)="onMinerTypeChange($event)">
|
||||
@for(miner of state().manageableMiners; track miner.name) {
|
||||
<wa-option [value]="miner.name">{{ miner.name }}</wa-option>
|
||||
<wa-option [value]="miner.name" [selected]="miner.name === editingProfile.minerType">
|
||||
{{ miner.name }}
|
||||
</wa-option>
|
||||
}
|
||||
</wa-select>
|
||||
<wa-input [(ngModel)]="editingProfile.config.pool" label="Pool Address"></wa-input>
|
||||
<wa-input [(ngModel)]="editingProfile.config.wallet" label="Wallet Address"></wa-input>
|
||||
<wa-checkbox [(ngModel)]="editingProfile.config.tls">TLS</wa-checkbox>
|
||||
<wa-checkbox [(ngModel)]="editingProfile.config.hugePages">Huge Pages</wa-checkbox>
|
||||
<wa-button (click)="updateProfile()">Save</wa-button>
|
||||
<wa-button variant="neutral" (click)="cancelEdit()">Cancel</wa-button>
|
||||
<wa-input
|
||||
label="Pool Address"
|
||||
[value]="editingProfile.config.pool"
|
||||
(input)="onPoolInput($event)">
|
||||
</wa-input>
|
||||
<wa-input
|
||||
label="Wallet Address"
|
||||
[value]="editingProfile.config.wallet"
|
||||
(input)="onWalletInput($event)">
|
||||
</wa-input>
|
||||
<div class="checkbox-group">
|
||||
<wa-checkbox
|
||||
[checked]="editingProfile.config.tls"
|
||||
(change)="onTlsChange($event)">
|
||||
TLS
|
||||
</wa-checkbox>
|
||||
<wa-checkbox
|
||||
[checked]="editingProfile.config.hugePages"
|
||||
(change)="onHugePagesChange($event)">
|
||||
Huge Pages
|
||||
</wa-checkbox>
|
||||
</div>
|
||||
<div class="button-group">
|
||||
<wa-button (click)="updateProfile()">Save</wa-button>
|
||||
<wa-button variant="neutral" (click)="cancelEdit()">Cancel</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
} @else {
|
||||
<span>{{ profile.name }} ({{ profile.minerType }})</span>
|
||||
<div>
|
||||
<div class="button-group">
|
||||
<wa-button size="small" (click)="editProfile(profile)">Edit</wa-button>
|
||||
<wa-button size="small" variant="danger" (click)="deleteProfile(profile.id)">Delete</wa-button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -17,12 +17,50 @@ export class ProfileListComponent {
|
|||
|
||||
editingProfile: (MiningProfile & { config: any }) | null = null;
|
||||
|
||||
// --- Event Handlers for Custom Elements in Edit Form ---
|
||||
onNameInput(event: Event) {
|
||||
if (this.editingProfile) {
|
||||
this.editingProfile.name = (event.target as HTMLInputElement).value;
|
||||
}
|
||||
}
|
||||
|
||||
onMinerTypeChange(event: Event) {
|
||||
if (this.editingProfile) {
|
||||
this.editingProfile.minerType = (event.target as HTMLSelectElement).value;
|
||||
}
|
||||
}
|
||||
|
||||
onPoolInput(event: Event) {
|
||||
if (this.editingProfile) {
|
||||
this.editingProfile.config.pool = (event.target as HTMLInputElement).value;
|
||||
}
|
||||
}
|
||||
|
||||
onWalletInput(event: Event) {
|
||||
if (this.editingProfile) {
|
||||
this.editingProfile.config.wallet = (event.target as HTMLInputElement).value;
|
||||
}
|
||||
}
|
||||
|
||||
onTlsChange(event: Event) {
|
||||
if (this.editingProfile) {
|
||||
this.editingProfile.config.tls = (event.target as HTMLInputElement).checked;
|
||||
}
|
||||
}
|
||||
|
||||
onHugePagesChange(event: Event) {
|
||||
if (this.editingProfile) {
|
||||
this.editingProfile.config.hugePages = (event.target as HTMLInputElement).checked;
|
||||
}
|
||||
}
|
||||
|
||||
deleteProfile(profileId: string) {
|
||||
this.minerService.deleteProfile(profileId).subscribe();
|
||||
}
|
||||
|
||||
editProfile(profile: MiningProfile) {
|
||||
this.editingProfile = { ...profile, config: { ...profile.config } };
|
||||
// Create a deep copy to avoid mutating the original profile object during editing
|
||||
this.editingProfile = JSON.parse(JSON.stringify(profile));
|
||||
}
|
||||
|
||||
updateProfile() {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue