Commit 5ac9f19f authored by Milan Mozolák's avatar Milan Mozolák
Browse files

Added missing files

parent 3a53564f
Pipeline #141208 waiting for manual action with stage
<div *ngIf="state === requestState.ERROR">
Error occured: {{ errorMessage }}
</div>
<div *ngIf="mission && state === requestState.SUCCESS" class="px-4">
<div *ngIf="!editing" class="text-gray-600">
<div class="text-xl text-black">{{ mission.name }}</div>
<span class="text-md">Objective</span>
<p class="mb-4 border-b-[1xp] border-gray-200">
{{ mission.objective }}
</p>
<span class="text-md">Start</span>
<p class="mb-4 border-b-[1xp] border-gray-200">
{{ mission.start }}
</p>
<span class="text-md">Duration in days</span>
<p class="mb-4 border-b-[1xp] border-gray-200">
{{ mission.durationInDays }}
</p>
<span class="text-md">Country</span>
<p class="mb-4 border-b-[1xp] border-gray-200">
{{ mission.country.name }}
</p>
<button mat-icon-button *ngIf="!editing" (click)="startEditing()">
<mat-icon>edit</mat-icon>
</button>
</div>
<div *ngIf="editing">
<mat-form-field>
<mat-label>Mission name</mat-label>
<input matInput [(ngModel)]="mission.name" />
</mat-form-field>
</div>
<div *ngIf="editing">
<mat-form-field>
<mat-label>Mission objective</mat-label>
<input matInput [(ngModel)]="mission.objective" />
</mat-form-field>
</div>
<div *ngIf="editing">
<mat-form-field>
<mat-label>New resource</mat-label>
<textarea matInput #newResource></textarea>
</mat-form-field>
<button mat-icon-button (click)="addResource(newResource.value); newResource.value = ''">
<mat-icon>add</mat-icon>
</button>
</div>
<div *ngIf="editing" class="w-full h-14 fixed bottom-0 bg-cyan-600 flex">
<button class="ml-4" mat-raised-button (click)="cancelEditing()">
Cancel
</button>
<button class="mr-4" mat-raised-button (click)="saveMission()">Save</button>
</div>
<div class="pl-6 text-lg text-black">Resources</div>
<table mat-table [dataSource]="mission.resources" class="pb-6 w-full text-gray-700">
<ng-container matColumnDef="resourceName">
<th mat-header-cell *matHeaderCellDef class="text-lg text-black">
Resources
</th>
<td mat-cell *matCellDef="let resource" class="text-gray-700">
{{ resource.name }}
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="resourceColumns"></tr>
<tr mat-row *matRowDef="let row; columns: resourceColumns"></tr>
</table>
<div class="pl-6 text-lg text-black">Assignments</div>
<table
mat-table
[dataSource]="mission.agentAssignments"
class="pb-6 w-full text-gray-700"
>
<ng-container matColumnDef="assignmentId">
<th mat-header-cell *matHeaderCellDef class="text-black">Agent name</th>
<td mat-cell *matCellDef="let assignment">
{{ assignment.agent.name }}
</td>
</ng-container>
<ng-container matColumnDef="assignmentStart">
<th mat-header-cell *matHeaderCellDef class="text-black">Start</th>
<td mat-cell *matCellDef="let assignment">{{ assignment.start }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="assignmentColumns"></tr>
<tr
mat-row
*matRowDef="let row; columns: assignmentColumns"
(click)="goToAssignmentDetail(row.id)"
class="hover:bg-gray-200 hover:cursor-pointer"
></tr>
</table>
</div>
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { firstValueFrom } from 'rxjs';
import { environment } from 'src/environments/environment';
import { RequestState } from '../request-state.enum';
import { Mission } from './mission.interface';
@Component({
selector: 'mission-detail',
templateUrl: 'mission-detail.component.html',
})
export class MissionDetailComponent implements OnInit {
private id: String | undefined;
requestState = RequestState;
state: RequestState = this.requestState.PENDING;
editing = false;
errorMessage = '';
mission: Mission | null = null;
private oldMission: Mission | null = null;
assignmentColumns = ['assignmentId', 'assignmentStart'];
resourceColumns = ['resourceName'];
constructor(
private httpClient: HttpClient,
private route: ActivatedRoute,
private router: Router
) {}
async ngOnInit() {
this.id = this.route.snapshot.params['id'];
if (this.id === undefined) {
this.state = RequestState.ERROR;
this.errorMessage = 'Incorrectly initialized component, missing id!';
throw new Error(this.errorMessage);
}
try {
this.state = RequestState.PENDING;
this.mission = await firstValueFrom(
this.httpClient.get<Mission>(`${environment.apiUrl}/missions/${this.id}`)
);
this.state = RequestState.SUCCESS;
} catch (err) {
this.state = RequestState.ERROR;
this.errorMessage = 'Could not load mission!';
throw err;
}
}
async saveMission() {
this.endEditing();
try {
this.state = RequestState.PENDING;
this.mission = await firstValueFrom(
this.httpClient.put<Mission>(
`${environment.apiUrl}/missions/${this.id}`,
this.mission
)
);
this.state = RequestState.SUCCESS;
} catch (err) {
this.state = RequestState.ERROR;
throw err;
}
}
addResource(newResource: string) {
if (!newResource || newResource.length === 0) {
return;
}
console.log(newResource);
// TODO show in table
this.mission?.resources.push({ name: newResource });
}
goToAssignmentDetail(assignmentId: string) {
this.router.navigate(['assignment', assignmentId]);
}
startEditing() {
this.editing = true;
this.oldMission = JSON.parse(JSON.stringify(this.mission));
}
endEditing() {
this.editing = false;
}
cancelEditing() {
this.mission = this.oldMission;
this.endEditing();
}
}
<div *ngIf="state === requestState.ERROR">
Error occured: {{ errorMessage }}
</div>
<div *ngIf="state === requestState.SUCCESS">
<table mat-table [dataSource]="missions" class="w-full">
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Name</th>
<td mat-cell *matCellDef="let mission">
{{ mission.name }}
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr
mat-row
class="hover:bg-gray-200"
(click)="goToMissionDetail(row.id)"
*matRowDef="let row; columns: displayedColumns"
></tr>
</table>
</div>
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { firstValueFrom } from 'rxjs';
import { environment } from '../../environments/environment';
import { RequestState } from '../request-state.enum';
import { Mission } from './mission.interface';
interface MissionTableItem {
id: string;
name: string;
}
@Component({
selector: 'mission-list',
templateUrl: 'mission-list.component.html',
})
export class MissionListComponent implements OnInit {
requestState = RequestState;
state: RequestState = this.requestState.PENDING;
errorMessage = '';
missions: MissionTableItem[] = [];
displayedColumns: string[] = ['name'];
constructor(private httpClient: HttpClient, private router: Router) {}
async ngOnInit() {
this.state = RequestState.PENDING;
try {
this.missions = (
await firstValueFrom(
this.httpClient.get<Mission[]>(`${environment.apiUrl}/missions`)
)
).sort((a, b) => (a.name === b.name ? 0 : a.name > b.name ? 1 : -1));
this.state = RequestState.SUCCESS;
} catch (err) {
this.state = RequestState.ERROR;
this.errorMessage = 'Could not load missions!';
throw err;
}
}
goToMissionDetail(missionId: string) {
this.router.navigate(['mission', missionId]);
}
}
interface Assignment {
id: string;
start: string;
durationInDays: number;
mission: {
id: string;
name: string;
};
agent: {
id: string;
name: string;
};
}
interface Resource {
id?: string;
name: string;
}
export interface Mission {
id: string;
name: string;
start: string;
durationInDays: number;
objective: string;
country: {
id: string;
name: string;
};
agentAssignments: Assignment[];
resources: Resource[];
}
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment