Skip to content

Commit

Permalink
feat: forms update
Browse files Browse the repository at this point in the history
  • Loading branch information
@VilemRaska
VilemRaska committed Feb 27, 2025
1 parent 78e34c5 commit c97359a
Show file tree
Hide file tree
Showing 4 changed files with 55 additions and 74 deletions.
9 changes: 4 additions & 5 deletions apps/gapp-dashboard/src/components/navbar/navbar.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
<nav class="flex flex-row justify-center gap-1 p-2">
<a class="btn btn-ghost btn-primary btn-active" routerLinkActive="btn-outline" routerLink="/home"><ng-icon name="tablerHome"></ng-icon></a>
<a class="btn btn-ghost btn-primary btn-active" routerLinkActive="btn-outline" routerLink="/cars"><ng-icon name="tablerCar"></ng-icon></a>
<a class="btn btn-ghost btn-primary btn-active" routerLinkActive="btn-outline" routerLink="/vessels"><ng-icon name="tablerDrone"></ng-icon></a>
<a class="btn btn-ghost btn-primary btn-active" routerLinkActive="btn-outline" routerLink="/dashboard"><ng-icon name="tablerLayoutDashboard"></ng-icon></a>
<!-- <a class="btn btn-ghost btn-primary btn-active" routerLinkActive="btn-outline" routerLink="/map"><ng-icon name="tablerMapPin"></ng-icon></a> -->
<a class="btn btn-lg btn-soft" routerLinkActive="btn-primary btn-active" routerLink="/home"><ng-icon name="tablerHome"></ng-icon></a>
<a class="btn btn-lg btn-soft" routerLinkActive="btn-primary btn-active" routerLink="/cars"><ng-icon name="tablerCar"></ng-icon></a>
<a class="btn btn-lg btn-soft" routerLinkActive="btn-primary btn-active" routerLink="/vessels"><ng-icon name="tablerDrone"></ng-icon></a>
<a class="btn btn-lg btn-soft" routerLinkActive="btn-primary btn-active" routerLink="/dashboard"><ng-icon name="tablerLayoutDashboard"></ng-icon></a>
</nav>
31 changes: 12 additions & 19 deletions apps/gapp-dashboard/src/pages/cars/cars.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,24 +40,17 @@
<span>{{ errorMessage() }}</span>
</div>
}
<label class="form-control w-full mb-2">
<div class="label">
<span class="label-text">Callsign</span>
</div>
<input class="input input-bordered w-full" name="callsign" type="text" formControlName="callsign" />
<div class="label">
<span class="label-text-alt">Unique identification of car</span>
<span [hidden]="!hasError('callsign')" class="label-text-alt text-error">Callsign is required</span>
</div>
</label>

<label class="form-control w-full">
<div class="label">
<span class="label-text">Notes</span>
</div>
<textarea class="textarea textarea-bordered h-24" rows="2" formControlName="description"></textarea>
<div class="label">
<span class="label-text-alt">Car type, crew...</span>
</div>
</label>
<fieldset class="fieldset">
<legend class="fieldset-legend">Callsign</legend>
<input required type="text" class="input validator w-11/12" formControlName="callsign"/>
<p class="fieldset-label">Unique identification of car.</p>
<p class="validator-hint">Callsign is required.</p>
</fieldset>

<fieldset class="fieldset">
<legend class="fieldset-legend">Notes</legend>
<textarea class="textarea h-24 w-11/12" formControlName="description"></textarea>
<div class="fieldset-label">Car type, crew...</div>
</fieldset>
</gapp-modal>
5 changes: 0 additions & 5 deletions apps/gapp-dashboard/src/pages/cars/cars.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,9 +84,4 @@ export class CarsComponent implements OnInit {
this.loadCars();
});
}

public hasError(fieldName: string) {
const field = this.carForm.get(fieldName);
return !field?.valid && (field?.dirty || field?.touched);
}
}
84 changes: 39 additions & 45 deletions apps/gapp-dashboard/src/pages/vessels/vessels.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
</ul>

<p>{{ vessel?.description }}</p>

<div class="flex justify-end">
<button class="btn btn-error btn-sm" (click)="deleteVessel(vessel._id)">Remove</button>
</div>
Expand Down Expand Up @@ -54,55 +55,48 @@
<span>{{ errorMessage() }}</span>
</div>
}
<label class="form-control w-full mb-2">
<div class="label">
<span class="label-text">Callsign</span>
</div>
<input class="input input-bordered w-full" name="callsign" type="text" formControlName="callsign" />
<div class="label">
<span class="label-text-alt">Unique identification of vessel</span>
<span [hidden]="!hasError('callsign')" class="label-text-alt text-error">Callsign is required</span>
</div>
</label>

<div formArrayName="transmitters" class="flex flex-col w-3/4 mb-2">
<div class="label">
<span class="label-text">Transmitter callsigns</span>
</div>
@for(control of transmitters.controls; track control.value.id; let index = $index) {
<div class="join mb-2" [formGroupName]="index">
<input class="input input-bordered w-full input-sm join-item" name="transmitter" type="text" formControlName="transmitter" />
<button class="btn btn-error join-item btn-sm btn-outline" (click)="removeTransmitter(index)" [disabled]="transmitters.length === 1">
<ng-icon name="tablerTrash"></ng-icon>
</button>
</div>
}
<fieldset class="fieldset">
<legend class="fieldset-legend">Callsign</legend>
<input required type="text" class="input validator w-11/12" formControlName="callsign"/>
<p class="fieldset-label">Unique identification of vessel.</p>
<p class="validator-hint">Callsign is required.</p>
</fieldset>

<div formArrayName="transmitters" class="flex flex-col mb-2 w-11/12">
<fieldset class="fieldset bg-base-200 border border-base-300 p-4 rounded-box">
<legend class="fieldset-legend">Transmitter callsigns</legend>

@for(control of transmitters.controls; track control.value.id; let index = $index) {
<div class="join mb-2" [formGroupName]="index">
<input class="input input-bordered input-sm join-item w-3/4" name="transmitter" type="text" formControlName="transmitter" />
<button class="btn btn-error join-item btn-sm btn-outline" (click)="removeTransmitter(index)" [disabled]="transmitters.length === 1">
<ng-icon name="tablerTrash"></ng-icon>
</button>
</div>
}

<div class="label">
<span [hidden]="!hasError('transmitters')" class="label-text-alt validator-hint">At least one transmitter is required</span>
</div>

<button class="btn btn-primary btn-sm btn-outline w-min" (click)="addTransmitter()">Add</button>
<button class="btn btn-primary btn-sm btn-outline w-min mt-2" (click)="addTransmitter()">Add</button>
</fieldset>

<div class="label">
<span [hidden]="!hasError('transmitters')" class="label-text-alt text-error">At least one transmitter is required</span>
</div>
</div>

<label class="form-control w-full max-w-xs mb-2">
<div class="label">
<span class="label-text">Vessel type</span>
</div>
<select class="select select-bordered" formControlName="type">
@for(type of vesselTypes; track $index) {
<option>{{ type }}</option>
}
</select>
</label>
<fieldset class="fieldset">
<legend class="fieldset-legend">Vessel type</legend>
<select class="select w-11/12" formControlName="type">
@for(type of vesselTypes; track $index) {
<option>{{ type }}</option>
}
</select>
</fieldset>

<label class="form-control w-full">
<div class="label">
<span class="label-text">Notes</span>
</div>
<textarea class="textarea textarea-bordered h-24" rows="2" formControlName="description"></textarea>
<div class="label">
<span class="label-text-alt">Vessel type, mission goal...</span>
</div>
</label>
<fieldset class="fieldset">
<legend class="fieldset-legend">Notes</legend>
<textarea class="textarea h-24 w-11/12" formControlName="description"></textarea>
<div class="fieldset-label">Vessel type, mission goal...</div>
</fieldset>
</gapp-modal>

0 comments on commit c97359a

Please sign in to comment.