- {{'manual_override' | translate | titlecase}} + {{ 'manual_override' | translate | titlecase }}
-
+
+
{{'no_permission_to_edit_person_msg' | translate}}
+ {{ 'no_permission_to_edit_person_msg' | translate }}
+
-
+
+ {{ 'photo' | translate | titlecase }}
+
+
+
+
+
+
+
+
-
-
@@ -47,7 +67,7 @@ {{item.name}}
+ {{ item.name }}
{{item.name}}
+ {{ item.name }}
-
+
@@ -56,32 +76,34 @@
-
+
- {{'saving' | translate}}...
+ {{ 'saving' | translate }}...
{{'changes_saved_automatically'| translate}}
+ *ngIf="!savingPersonAcr">{{ 'changes_saved_automatically'| translate }}
- {{'existing_information' | translate | titlecase}}
+ {{ 'existing_information' | translate | titlecase }}
@@ -140,44 +162,44 @@ {{'existing_information' | translate | titlecase}}
-
- {{personAcr.person.first_name}} {{personAcr.person.last_name}}
+
+ {{ personAcr.person.first_name }} {{ personAcr.person.last_name }}
-
- {{personAcr.person_position.position.name.text}}
- {{personAcr.person_position.open_field}}
- {{personAcr.person_position.organization?.name.text}}
+
+ {{ personAcr.person_position.position.name.text }}
+ {{ personAcr.person_position.open_field }}
+ {{ personAcr.person_position.organization?.name.text }}
-
- {{personAcr.position_delegate_type.delegate_type.name}}
+
+ {{ personAcr.position_delegate_type.delegate_type.name }}
{{zone.code}}
+ [ngbTooltip]="zone.name"
+ [style.color]="zone.text_color">{{ zone.code }}
-
+
- {{poz.package_option.name.text}}:
+ {{ poz.package_option.name.text }}:
{{poz.zone.code}}
+ [style.color]="poz.zone.text_color">{{ poz.zone.code }}
{{'view_in_people' | translate}}
+ class="fa fa-external-link"> {{ 'view_in_people' | translate }}
@@ -195,20 +217,29 @@ {{'existing_information' | translate | titlecase}}
- {{'badge_has_been_printed' | translate}}
- {{'badge_has_been_distributed' | translate}}
+ {{ 'badge_has_been_printed' | translate }}
+ {{ 'badge_has_been_distributed' | translate }}
+
- {{'preview_badge' | translate | titlecase}}
+ {{ 'preview_badge' | translate | titlecase }}
-
@@ -227,31 +258,52 @@ {{'preview_badge' | translate | titlecase}}
- {{'all_zones' | translate | titlecase}}
+ {{ 'all_zones' | translate | titlecase }}
-
-
+
+
{{zone.code}}
-
-
- {{zone.name}}
-
-
-
- {{'no_zones' | translate}}
-
+ [style.color]="zone.text_color">{{ zone.code }}
+
+
+ {{ zone.name }}
+
+
+
+ {{ 'no_zones' | translate }}
+
+
-
+
+
+ {{ (openModalMode === 'CAMERA' ? 'take_photo' : 'upload_photo') | translate }}
+
+
+
+
+
+
+
+
+
diff --git a/src/app/person/person.component.ts b/src/app/person/person.component.ts
index 4af868d..377e7e8 100644
--- a/src/app/person/person.component.ts
+++ b/src/app/person/person.component.ts
@@ -1,5 +1,5 @@
import {Component, OnInit} from '@angular/core';
-import {NgAuthService, UserRoleUtil, WsComponent} from "@worldskills/worldskills-angular-lib";
+import {NgAuthService, UploadService, UserRoleUtil, WsComponent} from "@worldskills/worldskills-angular-lib";
import {ActivatedRoute, Router} from "@angular/router";
import {PersonAccreditationService} from "../../services/person-accreditation/person-accreditation.service";
import {Event} from "../../types/event";
@@ -13,6 +13,9 @@ import {ZoneService} from "../../services/zone/zone.service";
import {Zone} from "../../types/zone";
import {Location} from "@angular/common";
import {ToastService} from "angular-toastify";
+import {ImageService} from "../../services/image/image.service";
+import {Image} from "../../types/image";
+import {HttpEventType} from "@angular/common/http";
@Component({
selector: 'app-person',
@@ -23,15 +26,23 @@ export class PersonComponent extends WsComponent implements OnInit {
readonly peopleURL = environment.worldskillsPeople;
selectedEvent: Event;
- personAcr: PersonAccreditation;
delegateTypes: DelegateType[];
zones: Zone[] = [];
+ // upload ACR photo variables
+ overrideACRPhoto: File;
+ openModalMode: 'CLOSED' | 'CAMERA' | 'UPLOAD' = 'CLOSED';
+
+ // override person acr
+ personAcr: PersonAccreditation;
savingPersonAcr = false;
badgeLinesChange: Subject = new Subject();
+
+ // permissions
hasEditPermission = false;
hasPrintPermission = false;
hasAdminPermission = false;
+ hasUploadPhotoPermission = true;
constructor(private appService: AppService,
private router: Router,
@@ -41,7 +52,9 @@ export class PersonComponent extends WsComponent implements OnInit {
private zoneService: ZoneService,
private location: Location,
private authService: NgAuthService,
- private toastService: ToastService
+ private toastService: ToastService,
+ private imageService: ImageService,
+ private uploadService: UploadService,
) {
super();
}
@@ -55,6 +68,7 @@ export class PersonComponent extends WsComponent implements OnInit {
this.hasEditPermission = UserRoleUtil.userHasRoles(currentUser, environment.worldskillsAppId, environment.appRoles.ADMIN, environment.appRoles.EDIT);
this.hasPrintPermission = UserRoleUtil.userHasRoles(currentUser, environment.worldskillsAppId, environment.appRoles.ADMIN, environment.appRoles.PRINT);
this.hasAdminPermission = UserRoleUtil.userHasRoles(currentUser, environment.worldskillsAppId, environment.appRoles.ADMIN);
+ this.hasUploadPhotoPermission = UserRoleUtil.userHasRoles(currentUser, environment.worldskillsAppId, environment.appRoles.ADMIN, environment.appRoles.UPLOAD_PHOTO);
})
)
@@ -173,4 +187,45 @@ export class PersonComponent extends WsComponent implements OnInit {
this.subscribe(this.loadPersonAccreditation(this.personAcr.id));
});
}
+
+ setFileFromInput(event: any) {
+ const input = event.target as HTMLInputElement;
+ if (input.files.length > 0) {
+ this.overrideACRPhoto = input.files.item(0);
+ } else {
+ this.overrideACRPhoto = null;
+ }
+ }
+
+
+ uploadACRPhoto(): void {
+ const request = this.imageService.httpRequest(this.overrideACRPhoto);
+ this.uploadService.listen(
+ request,
+ ({loaded, total, type}) => {
+ if (type === HttpEventType.UploadProgress) {
+ // this.resourceProgress = loaded / total;
+ }
+ },
+ image => {
+ this.personAccreditationService.uploadAccreditationPhoto(this.selectedEvent.id, this.personAcr.id, {
+ id: image.body.id,
+ thumbnail_hash: image.body.thumbnail_hash
+ }).subscribe(() => {
+ this.toastService.success('Photo uploaded!');
+ this.overrideACRPhoto = null;
+ this.openModalMode = 'CLOSED';
+
+ // use timeout to wait for RabbitMQ message arrives back
+ setTimeout(() => {
+ // reload person accreditation
+ this.subscribe(this.loadPersonAccreditation(this.personAcr.id));
+ }, 100);
+ });
+ });
+ }
+
+ captureImage(imageDataURL: File) {
+ this.overrideACRPhoto = imageDataURL;
+ }
}
diff --git a/src/app/webcam-capture/webcam-capture.component.css b/src/app/webcam-capture/webcam-capture.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/webcam-capture/webcam-capture.component.html b/src/app/webcam-capture/webcam-capture.component.html
new file mode 100644
index 0000000..622dea5
--- /dev/null
+++ b/src/app/webcam-capture/webcam-capture.component.html
@@ -0,0 +1,18 @@
+
+
+ {{ cameraInitErrorMsg }}
+
+
+
+
+ ![]()
+
+
diff --git a/src/app/webcam-capture/webcam-capture.component.spec.ts b/src/app/webcam-capture/webcam-capture.component.spec.ts
new file mode 100644
index 0000000..f465feb
--- /dev/null
+++ b/src/app/webcam-capture/webcam-capture.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WebcamCaptureComponent } from './webcam-capture.component';
+
+describe('WebcamCaptureComponent', () => {
+ let component: WebcamCaptureComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ WebcamCaptureComponent ]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(WebcamCaptureComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/webcam-capture/webcam-capture.component.ts b/src/app/webcam-capture/webcam-capture.component.ts
new file mode 100644
index 0000000..71cf69d
--- /dev/null
+++ b/src/app/webcam-capture/webcam-capture.component.ts
@@ -0,0 +1,80 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {WsComponent} from "@worldskills/worldskills-angular-lib";
+import {WebcamImage, WebcamInitError, WebcamUtil} from "ngx-webcam";
+import {Observable, Subject} from "rxjs";
+import * as moment from "moment/moment";
+
+@Component({
+ selector: 'app-webcam-capture',
+ templateUrl: './webcam-capture.component.html',
+ styleUrls: ['./webcam-capture.component.css']
+})
+export class WebcamCaptureComponent extends WsComponent implements OnInit {
+
+ @Output() captureImage: EventEmitter = new EventEmitter();
+ readonly PHOTO_WIDTH = 600;
+ readonly PHOTO_HEIGHT = 800;
+
+ cameraInitErrorMsg: string = null;
+ multipleWebcamsAvailable = false;
+ nextWebcam: Subject = new Subject();
+ trigger: Subject = new Subject();
+ videoOptions: MediaTrackConstraints = {
+ width: {ideal: this.PHOTO_WIDTH},
+ height: {ideal: this.PHOTO_HEIGHT}
+ };
+ webcamImage: WebcamImage = null;
+
+ constructor() {
+ super();
+ }
+
+ ngOnInit(): void {
+ WebcamUtil.getAvailableVideoInputs()
+ .then((mediaDevices: MediaDeviceInfo[]) => {
+ this.multipleWebcamsAvailable = mediaDevices && mediaDevices.length > 1;
+ });
+ }
+
+
+ triggerSnapshot(): void {
+ this.trigger.next();
+ }
+
+ handleImage(webcamImage: WebcamImage): void {
+ this.webcamImage = webcamImage;
+ this.captureImage.emit(this.convertToImageFile(this.webcamImage));
+ }
+
+ get webcamTriggerObservable(): Observable {
+ return this.trigger.asObservable();
+ }
+
+ get nextWebcamObservable(): Observable {
+ return this.nextWebcam.asObservable();
+ }
+
+ showNextWebcam(directionOrDeviceId: boolean | string): void {
+ this.nextWebcam.next(directionOrDeviceId);
+ }
+
+ handleCameraInitError(error: WebcamInitError): void {
+ if (error.mediaStreamError && error.mediaStreamError.name === "NotAllowedError") {
+ this.cameraInitErrorMsg = "Camera access was not allowed by user. Refresh page and try again.";
+ } else {
+ this.cameraInitErrorMsg = null;
+ }
+ }
+
+ convertToImageFile(wi: WebcamImage): File {
+ const arr = wi.imageAsDataUrl.split(",");
+ const mime = arr[0].match(/:(.*?);/)[1];
+ const bstr = atob(arr[1]);
+ let n = bstr.length;
+ const u8arr = new Uint8Array(n);
+ while (n--) {
+ u8arr[n] = bstr.charCodeAt(n);
+ }
+ return new File([u8arr], "webcam_" + moment().format("yyyyMMDDHHmmss"), {type: mime});
+ }
+}
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 3d1eb09..0e3b73d 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -20,6 +20,8 @@
"badge_per_page": "Badges per page",
"badge_templates": "Badge templates",
"name": "Name",
+ "camera": "Camera",
+ "capture": "Capture",
"changes_saved_automatically": "Changes are saved automatically",
"change_event": "Change event",
"code": "Code",
@@ -65,12 +67,17 @@
"skill": "Skill",
"sort": "Sort",
"start_date": "Start Date",
+ "take_photo": "Take photo",
"timestamp": "Timestamp",
"to": "To",
+ "toggle_webcam": "Toggle Webcam",
"tools": "Tools",
"total_results": "Total results",
"two_badges_per_page": "Two badges per page",
"type": "Type",
+ "upload": "Upload",
+ "upload_file": "Upload file",
+ "upload_photo": "Upload photo",
"view_in_people": "View in People",
"zone": "Zone",
"zones": "Zones"
diff --git a/src/environments/environment.local-staging.ts b/src/environments/environment.local-staging.ts
index eb25a9e..6415cd2 100644
--- a/src/environments/environment.local-staging.ts
+++ b/src/environments/environment.local-staging.ts
@@ -4,6 +4,7 @@ export const environment = {
worldskillsAppId: 2100,
worldskillsApi: 'https://api.worldskills.show',
worldskillsApiAccreditation: 'https://api.worldskills.show/accreditation',
+ worldskillsApiImages: 'https://api.worldskills.show/images',
worldskillsApiOrg: 'https://api.worldskills.show/org',
worldskillsApiPeople: 'https://api.worldskills.show/people',
worldskillsPeople: 'https://people.worldskills.org',
@@ -17,6 +18,7 @@ export const environment = {
appRoles: {
ADMIN: 'Admin',
EDIT: 'Edit',
+ UPLOAD_PHOTO: 'UploadPhoto',
EDIT_DELEGATE_TYPES: 'EditDelegateTypes',
EDIT_POSITIONS: 'EditPositions',
EDIT_ZONES: 'EditZones',
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
index 02f9ed8..0cecec8 100644
--- a/src/environments/environment.prod.ts
+++ b/src/environments/environment.prod.ts
@@ -4,6 +4,7 @@ export const environment = {
worldskillsAppId: 2100,
worldskillsApi: 'https://api.worldskills.org',
worldskillsApiAccreditation: 'https://api.worldskills.org/accreditation',
+ worldskillsApiImages: 'https://api.worldskills.org/images',
worldskillsApiOrg: 'https://api.worldskills.org/org',
worldskillsApiPeople: 'https://api.worldskills.org/people',
worldskillsPeople: 'https://people.worldskills.org',
@@ -17,6 +18,7 @@ export const environment = {
appRoles: {
ADMIN: 'Admin',
EDIT: 'Edit',
+ UPLOAD_PHOTO: 'UploadPhoto',
EDIT_DELEGATE_TYPES: 'EditDelegateTypes',
EDIT_POSITIONS: 'EditPositions',
EDIT_ZONES: 'EditZones',
diff --git a/src/environments/environment.staging.ts b/src/environments/environment.staging.ts
index 21605cf..df78cc6 100644
--- a/src/environments/environment.staging.ts
+++ b/src/environments/environment.staging.ts
@@ -4,6 +4,7 @@ export const environment = {
worldskillsAppId: 2100,
worldskillsApi: 'https://api.worldskills.show',
worldskillsApiAccreditation: 'https://api.worldskills.show/accreditation',
+ worldskillsApiImages: 'https://api.worldskills.show/images',
worldskillsApiOrg: 'https://api.worldskills.show/org',
worldskillsApiPeople: 'https://api.worldskills.show/people',
worldskillsPeople: 'https://people.worldskills.show',
@@ -17,6 +18,7 @@ export const environment = {
appRoles: {
ADMIN: 'Admin',
EDIT: 'Edit',
+ UPLOAD_PHOTO: 'UploadPhoto',
EDIT_DELEGATE_TYPES: 'EditDelegateTypes',
EDIT_POSITIONS: 'EditPositions',
EDIT_ZONES: 'EditZones',
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 334e625..63ccf59 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -4,6 +4,7 @@ export const environment = {
worldskillsAppId: 2100,
worldskillsApi: 'http://localhost:8080',
worldskillsApiAccreditation: 'http://localhost:8080/accreditation',
+ worldskillsApiImages: 'http://localhost:8080/images',
worldskillsApiOrg: 'http://localhost:8080/org',
worldskillsApiPeople: 'http://localhost:8080/people',
worldskillsPeople: 'https://people.worldskills.org',
@@ -17,6 +18,7 @@ export const environment = {
appRoles: {
ADMIN: 'Admin',
EDIT: 'Edit',
+ UPLOAD_PHOTO: 'UploadPhoto',
EDIT_DELEGATE_TYPES: 'EditDelegateTypes',
EDIT_POSITIONS: 'EditPositions',
EDIT_ZONES: 'EditZones',
diff --git a/src/services/image/image.service.spec.ts b/src/services/image/image.service.spec.ts
new file mode 100644
index 0000000..3253a41
--- /dev/null
+++ b/src/services/image/image.service.spec.ts
@@ -0,0 +1,17 @@
+import {TestBed} from '@angular/core/testing';
+
+import {ImageService} from './image.service';
+import {HttpClientTestingModule} from '@angular/common/http/testing';
+
+describe('ImageService', () => {
+ let service: ImageService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({imports: [HttpClientTestingModule]});
+ service = TestBed.inject(ImageService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/src/services/image/image.service.ts b/src/services/image/image.service.ts
new file mode 100644
index 0000000..c2326ce
--- /dev/null
+++ b/src/services/image/image.service.ts
@@ -0,0 +1,25 @@
+import {Injectable} from '@angular/core';
+import {WsService,} from '@worldskills/worldskills-angular-lib';
+import {Image} from '../../types/image';
+import {HttpRequest} from '@angular/common/http';
+
+import {environment} from '../../environments/environment';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class ImageService extends WsService {
+
+ constructor() {
+ super();
+ }
+
+ httpRequest(file: File, url: string = null): HttpRequest {
+ const formData = new FormData();
+ formData.append('file', file);
+ return new HttpRequest('POST', url ?? environment.worldskillsApiImages, formData, {
+ responseType: 'json',
+ reportProgress: true
+ });
+ }
+}
diff --git a/src/services/person-accreditation/person-accreditation.service.ts b/src/services/person-accreditation/person-accreditation.service.ts
index c2f433b..b515983 100644
--- a/src/services/person-accreditation/person-accreditation.service.ts
+++ b/src/services/person-accreditation/person-accreditation.service.ts
@@ -10,6 +10,7 @@ import {
import {PersonAccreditation} from "../../types/person-accreditation";
import {Params} from "@angular/router";
import {isEmpty} from "../../utils/StringUtil";
+import {Image} from "../../types/image";
@Injectable({
providedIn: 'root'
@@ -50,6 +51,10 @@ export class PersonAccreditationService extends WsService {
return this.http.put(`${this.url(eventId)}/${personAccreditationId}/printed`, null).pipe(share());
}
+ uploadAccreditationPhoto(eventId: number, personAccreditationId: number, image: Image): Observable {
+ return this.http.post(`${this.url(eventId)}/${personAccreditationId}/photo`, image).pipe(share());
+ }
+
initialiseFetchParams(): PersonAccreditationSummaryReqParams {
return {
name: null,
diff --git a/src/types/image.ts b/src/types/image.ts
index 6907e2e..a253b6f 100644
--- a/src/types/image.ts
+++ b/src/types/image.ts
@@ -1,6 +1,6 @@
export interface Image {
id: number;
thumbnail_hash: string;
- thumbnail: string;
- type: string;
+ thumbnail?: string;
+ type?: string;
}
-
+
@@ -56,32 +76,34 @@
-
+
- {{'saving' | translate}}...
+ {{ 'saving' | translate }}...
{{'changes_saved_automatically'| translate}}
+ *ngIf="!savingPersonAcr">{{ 'changes_saved_automatically'| translate }}
- {{'existing_information' | translate | titlecase}}
+ {{ 'existing_information' | translate | titlecase }}
@@ -140,44 +162,44 @@ {{'existing_information' | translate | titlecase}}
-
- {{personAcr.person.first_name}} {{personAcr.person.last_name}}
+
+ {{ personAcr.person.first_name }} {{ personAcr.person.last_name }}
-
- {{personAcr.person_position.position.name.text}}
- {{personAcr.person_position.open_field}}
- {{personAcr.person_position.organization?.name.text}}
+
+ {{ personAcr.person_position.position.name.text }}
+ {{ personAcr.person_position.open_field }}
+ {{ personAcr.person_position.organization?.name.text }}
-
- {{personAcr.position_delegate_type.delegate_type.name}}
+
+ {{ personAcr.position_delegate_type.delegate_type.name }}
{{zone.code}}
+ [ngbTooltip]="zone.name"
+ [style.color]="zone.text_color">{{ zone.code }}
-
+
- {{poz.package_option.name.text}}:
+ {{ poz.package_option.name.text }}:
{{poz.zone.code}}
+ [style.color]="poz.zone.text_color">{{ poz.zone.code }}
{{'view_in_people' | translate}}
+ class="fa fa-external-link"> {{ 'view_in_people' | translate }}
@@ -195,20 +217,29 @@ {{'existing_information' | translate | titlecase}}
- {{'badge_has_been_printed' | translate}}
- {{'badge_has_been_distributed' | translate}}
+ {{ 'badge_has_been_printed' | translate }}
+ {{ 'badge_has_been_distributed' | translate }}
+
- {{'preview_badge' | translate | titlecase}}
+ {{ 'preview_badge' | translate | titlecase }}
-
@@ -227,31 +258,52 @@ {{'preview_badge' | translate | titlecase}}
- {{'all_zones' | translate | titlecase}}
+ {{ 'all_zones' | translate | titlecase }}
-
-
+
+
{{zone.code}}
-
-
- {{zone.name}}
-
-
-
- {{'no_zones' | translate}}
-
+ [style.color]="zone.text_color">{{ zone.code }}
+
+
+ {{ zone.name }}
+
+
+
+ {{ 'no_zones' | translate }}
+
+
-
+
+
+ {{ (openModalMode === 'CAMERA' ? 'take_photo' : 'upload_photo') | translate }}
+
+
+
+
+
+
+
+
+
diff --git a/src/app/person/person.component.ts b/src/app/person/person.component.ts
index 4af868d..377e7e8 100644
--- a/src/app/person/person.component.ts
+++ b/src/app/person/person.component.ts
@@ -1,5 +1,5 @@
import {Component, OnInit} from '@angular/core';
-import {NgAuthService, UserRoleUtil, WsComponent} from "@worldskills/worldskills-angular-lib";
+import {NgAuthService, UploadService, UserRoleUtil, WsComponent} from "@worldskills/worldskills-angular-lib";
import {ActivatedRoute, Router} from "@angular/router";
import {PersonAccreditationService} from "../../services/person-accreditation/person-accreditation.service";
import {Event} from "../../types/event";
@@ -13,6 +13,9 @@ import {ZoneService} from "../../services/zone/zone.service";
import {Zone} from "../../types/zone";
import {Location} from "@angular/common";
import {ToastService} from "angular-toastify";
+import {ImageService} from "../../services/image/image.service";
+import {Image} from "../../types/image";
+import {HttpEventType} from "@angular/common/http";
@Component({
selector: 'app-person',
@@ -23,15 +26,23 @@ export class PersonComponent extends WsComponent implements OnInit {
readonly peopleURL = environment.worldskillsPeople;
selectedEvent: Event;
- personAcr: PersonAccreditation;
delegateTypes: DelegateType[];
zones: Zone[] = [];
+ // upload ACR photo variables
+ overrideACRPhoto: File;
+ openModalMode: 'CLOSED' | 'CAMERA' | 'UPLOAD' = 'CLOSED';
+
+ // override person acr
+ personAcr: PersonAccreditation;
savingPersonAcr = false;
badgeLinesChange: Subject = new Subject();
+
+ // permissions
hasEditPermission = false;
hasPrintPermission = false;
hasAdminPermission = false;
+ hasUploadPhotoPermission = true;
constructor(private appService: AppService,
private router: Router,
@@ -41,7 +52,9 @@ export class PersonComponent extends WsComponent implements OnInit {
private zoneService: ZoneService,
private location: Location,
private authService: NgAuthService,
- private toastService: ToastService
+ private toastService: ToastService,
+ private imageService: ImageService,
+ private uploadService: UploadService,
) {
super();
}
@@ -55,6 +68,7 @@ export class PersonComponent extends WsComponent implements OnInit {
this.hasEditPermission = UserRoleUtil.userHasRoles(currentUser, environment.worldskillsAppId, environment.appRoles.ADMIN, environment.appRoles.EDIT);
this.hasPrintPermission = UserRoleUtil.userHasRoles(currentUser, environment.worldskillsAppId, environment.appRoles.ADMIN, environment.appRoles.PRINT);
this.hasAdminPermission = UserRoleUtil.userHasRoles(currentUser, environment.worldskillsAppId, environment.appRoles.ADMIN);
+ this.hasUploadPhotoPermission = UserRoleUtil.userHasRoles(currentUser, environment.worldskillsAppId, environment.appRoles.ADMIN, environment.appRoles.UPLOAD_PHOTO);
})
)
@@ -173,4 +187,45 @@ export class PersonComponent extends WsComponent implements OnInit {
this.subscribe(this.loadPersonAccreditation(this.personAcr.id));
});
}
+
+ setFileFromInput(event: any) {
+ const input = event.target as HTMLInputElement;
+ if (input.files.length > 0) {
+ this.overrideACRPhoto = input.files.item(0);
+ } else {
+ this.overrideACRPhoto = null;
+ }
+ }
+
+
+ uploadACRPhoto(): void {
+ const request = this.imageService.httpRequest(this.overrideACRPhoto);
+ this.uploadService.listen(
+ request,
+ ({loaded, total, type}) => {
+ if (type === HttpEventType.UploadProgress) {
+ // this.resourceProgress = loaded / total;
+ }
+ },
+ image => {
+ this.personAccreditationService.uploadAccreditationPhoto(this.selectedEvent.id, this.personAcr.id, {
+ id: image.body.id,
+ thumbnail_hash: image.body.thumbnail_hash
+ }).subscribe(() => {
+ this.toastService.success('Photo uploaded!');
+ this.overrideACRPhoto = null;
+ this.openModalMode = 'CLOSED';
+
+ // use timeout to wait for RabbitMQ message arrives back
+ setTimeout(() => {
+ // reload person accreditation
+ this.subscribe(this.loadPersonAccreditation(this.personAcr.id));
+ }, 100);
+ });
+ });
+ }
+
+ captureImage(imageDataURL: File) {
+ this.overrideACRPhoto = imageDataURL;
+ }
}
diff --git a/src/app/webcam-capture/webcam-capture.component.css b/src/app/webcam-capture/webcam-capture.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/webcam-capture/webcam-capture.component.html b/src/app/webcam-capture/webcam-capture.component.html
new file mode 100644
index 0000000..622dea5
--- /dev/null
+++ b/src/app/webcam-capture/webcam-capture.component.html
@@ -0,0 +1,18 @@
+
+
+ {{ cameraInitErrorMsg }}
+
+
+
+
+ ![]()
+
+
diff --git a/src/app/webcam-capture/webcam-capture.component.spec.ts b/src/app/webcam-capture/webcam-capture.component.spec.ts
new file mode 100644
index 0000000..f465feb
--- /dev/null
+++ b/src/app/webcam-capture/webcam-capture.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WebcamCaptureComponent } from './webcam-capture.component';
+
+describe('WebcamCaptureComponent', () => {
+ let component: WebcamCaptureComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ WebcamCaptureComponent ]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(WebcamCaptureComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/webcam-capture/webcam-capture.component.ts b/src/app/webcam-capture/webcam-capture.component.ts
new file mode 100644
index 0000000..71cf69d
--- /dev/null
+++ b/src/app/webcam-capture/webcam-capture.component.ts
@@ -0,0 +1,80 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {WsComponent} from "@worldskills/worldskills-angular-lib";
+import {WebcamImage, WebcamInitError, WebcamUtil} from "ngx-webcam";
+import {Observable, Subject} from "rxjs";
+import * as moment from "moment/moment";
+
+@Component({
+ selector: 'app-webcam-capture',
+ templateUrl: './webcam-capture.component.html',
+ styleUrls: ['./webcam-capture.component.css']
+})
+export class WebcamCaptureComponent extends WsComponent implements OnInit {
+
+ @Output() captureImage: EventEmitter = new EventEmitter();
+ readonly PHOTO_WIDTH = 600;
+ readonly PHOTO_HEIGHT = 800;
+
+ cameraInitErrorMsg: string = null;
+ multipleWebcamsAvailable = false;
+ nextWebcam: Subject = new Subject();
+ trigger: Subject = new Subject();
+ videoOptions: MediaTrackConstraints = {
+ width: {ideal: this.PHOTO_WIDTH},
+ height: {ideal: this.PHOTO_HEIGHT}
+ };
+ webcamImage: WebcamImage = null;
+
+ constructor() {
+ super();
+ }
+
+ ngOnInit(): void {
+ WebcamUtil.getAvailableVideoInputs()
+ .then((mediaDevices: MediaDeviceInfo[]) => {
+ this.multipleWebcamsAvailable = mediaDevices && mediaDevices.length > 1;
+ });
+ }
+
+
+ triggerSnapshot(): void {
+ this.trigger.next();
+ }
+
+ handleImage(webcamImage: WebcamImage): void {
+ this.webcamImage = webcamImage;
+ this.captureImage.emit(this.convertToImageFile(this.webcamImage));
+ }
+
+ get webcamTriggerObservable(): Observable {
+ return this.trigger.asObservable();
+ }
+
+ get nextWebcamObservable(): Observable {
+ return this.nextWebcam.asObservable();
+ }
+
+ showNextWebcam(directionOrDeviceId: boolean | string): void {
+ this.nextWebcam.next(directionOrDeviceId);
+ }
+
+ handleCameraInitError(error: WebcamInitError): void {
+ if (error.mediaStreamError && error.mediaStreamError.name === "NotAllowedError") {
+ this.cameraInitErrorMsg = "Camera access was not allowed by user. Refresh page and try again.";
+ } else {
+ this.cameraInitErrorMsg = null;
+ }
+ }
+
+ convertToImageFile(wi: WebcamImage): File {
+ const arr = wi.imageAsDataUrl.split(",");
+ const mime = arr[0].match(/:(.*?);/)[1];
+ const bstr = atob(arr[1]);
+ let n = bstr.length;
+ const u8arr = new Uint8Array(n);
+ while (n--) {
+ u8arr[n] = bstr.charCodeAt(n);
+ }
+ return new File([u8arr], "webcam_" + moment().format("yyyyMMDDHHmmss"), {type: mime});
+ }
+}
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 3d1eb09..0e3b73d 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -20,6 +20,8 @@
"badge_per_page": "Badges per page",
"badge_templates": "Badge templates",
"name": "Name",
+ "camera": "Camera",
+ "capture": "Capture",
"changes_saved_automatically": "Changes are saved automatically",
"change_event": "Change event",
"code": "Code",
@@ -65,12 +67,17 @@
"skill": "Skill",
"sort": "Sort",
"start_date": "Start Date",
+ "take_photo": "Take photo",
"timestamp": "Timestamp",
"to": "To",
+ "toggle_webcam": "Toggle Webcam",
"tools": "Tools",
"total_results": "Total results",
"two_badges_per_page": "Two badges per page",
"type": "Type",
+ "upload": "Upload",
+ "upload_file": "Upload file",
+ "upload_photo": "Upload photo",
"view_in_people": "View in People",
"zone": "Zone",
"zones": "Zones"
diff --git a/src/environments/environment.local-staging.ts b/src/environments/environment.local-staging.ts
index eb25a9e..6415cd2 100644
--- a/src/environments/environment.local-staging.ts
+++ b/src/environments/environment.local-staging.ts
@@ -4,6 +4,7 @@ export const environment = {
worldskillsAppId: 2100,
worldskillsApi: 'https://api.worldskills.show',
worldskillsApiAccreditation: 'https://api.worldskills.show/accreditation',
+ worldskillsApiImages: 'https://api.worldskills.show/images',
worldskillsApiOrg: 'https://api.worldskills.show/org',
worldskillsApiPeople: 'https://api.worldskills.show/people',
worldskillsPeople: 'https://people.worldskills.org',
@@ -17,6 +18,7 @@ export const environment = {
appRoles: {
ADMIN: 'Admin',
EDIT: 'Edit',
+ UPLOAD_PHOTO: 'UploadPhoto',
EDIT_DELEGATE_TYPES: 'EditDelegateTypes',
EDIT_POSITIONS: 'EditPositions',
EDIT_ZONES: 'EditZones',
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
index 02f9ed8..0cecec8 100644
--- a/src/environments/environment.prod.ts
+++ b/src/environments/environment.prod.ts
@@ -4,6 +4,7 @@ export const environment = {
worldskillsAppId: 2100,
worldskillsApi: 'https://api.worldskills.org',
worldskillsApiAccreditation: 'https://api.worldskills.org/accreditation',
+ worldskillsApiImages: 'https://api.worldskills.org/images',
worldskillsApiOrg: 'https://api.worldskills.org/org',
worldskillsApiPeople: 'https://api.worldskills.org/people',
worldskillsPeople: 'https://people.worldskills.org',
@@ -17,6 +18,7 @@ export const environment = {
appRoles: {
ADMIN: 'Admin',
EDIT: 'Edit',
+ UPLOAD_PHOTO: 'UploadPhoto',
EDIT_DELEGATE_TYPES: 'EditDelegateTypes',
EDIT_POSITIONS: 'EditPositions',
EDIT_ZONES: 'EditZones',
diff --git a/src/environments/environment.staging.ts b/src/environments/environment.staging.ts
index 21605cf..df78cc6 100644
--- a/src/environments/environment.staging.ts
+++ b/src/environments/environment.staging.ts
@@ -4,6 +4,7 @@ export const environment = {
worldskillsAppId: 2100,
worldskillsApi: 'https://api.worldskills.show',
worldskillsApiAccreditation: 'https://api.worldskills.show/accreditation',
+ worldskillsApiImages: 'https://api.worldskills.show/images',
worldskillsApiOrg: 'https://api.worldskills.show/org',
worldskillsApiPeople: 'https://api.worldskills.show/people',
worldskillsPeople: 'https://people.worldskills.show',
@@ -17,6 +18,7 @@ export const environment = {
appRoles: {
ADMIN: 'Admin',
EDIT: 'Edit',
+ UPLOAD_PHOTO: 'UploadPhoto',
EDIT_DELEGATE_TYPES: 'EditDelegateTypes',
EDIT_POSITIONS: 'EditPositions',
EDIT_ZONES: 'EditZones',
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 334e625..63ccf59 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -4,6 +4,7 @@ export const environment = {
worldskillsAppId: 2100,
worldskillsApi: 'http://localhost:8080',
worldskillsApiAccreditation: 'http://localhost:8080/accreditation',
+ worldskillsApiImages: 'http://localhost:8080/images',
worldskillsApiOrg: 'http://localhost:8080/org',
worldskillsApiPeople: 'http://localhost:8080/people',
worldskillsPeople: 'https://people.worldskills.org',
@@ -17,6 +18,7 @@ export const environment = {
appRoles: {
ADMIN: 'Admin',
EDIT: 'Edit',
+ UPLOAD_PHOTO: 'UploadPhoto',
EDIT_DELEGATE_TYPES: 'EditDelegateTypes',
EDIT_POSITIONS: 'EditPositions',
EDIT_ZONES: 'EditZones',
diff --git a/src/services/image/image.service.spec.ts b/src/services/image/image.service.spec.ts
new file mode 100644
index 0000000..3253a41
--- /dev/null
+++ b/src/services/image/image.service.spec.ts
@@ -0,0 +1,17 @@
+import {TestBed} from '@angular/core/testing';
+
+import {ImageService} from './image.service';
+import {HttpClientTestingModule} from '@angular/common/http/testing';
+
+describe('ImageService', () => {
+ let service: ImageService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({imports: [HttpClientTestingModule]});
+ service = TestBed.inject(ImageService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/src/services/image/image.service.ts b/src/services/image/image.service.ts
new file mode 100644
index 0000000..c2326ce
--- /dev/null
+++ b/src/services/image/image.service.ts
@@ -0,0 +1,25 @@
+import {Injectable} from '@angular/core';
+import {WsService,} from '@worldskills/worldskills-angular-lib';
+import {Image} from '../../types/image';
+import {HttpRequest} from '@angular/common/http';
+
+import {environment} from '../../environments/environment';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class ImageService extends WsService {
+
+ constructor() {
+ super();
+ }
+
+ httpRequest(file: File, url: string = null): HttpRequest {
+ const formData = new FormData();
+ formData.append('file', file);
+ return new HttpRequest('POST', url ?? environment.worldskillsApiImages, formData, {
+ responseType: 'json',
+ reportProgress: true
+ });
+ }
+}
diff --git a/src/services/person-accreditation/person-accreditation.service.ts b/src/services/person-accreditation/person-accreditation.service.ts
index c2f433b..b515983 100644
--- a/src/services/person-accreditation/person-accreditation.service.ts
+++ b/src/services/person-accreditation/person-accreditation.service.ts
@@ -10,6 +10,7 @@ import {
import {PersonAccreditation} from "../../types/person-accreditation";
import {Params} from "@angular/router";
import {isEmpty} from "../../utils/StringUtil";
+import {Image} from "../../types/image";
@Injectable({
providedIn: 'root'
@@ -50,6 +51,10 @@ export class PersonAccreditationService extends WsService {
return this.http.put(`${this.url(eventId)}/${personAccreditationId}/printed`, null).pipe(share());
}
+ uploadAccreditationPhoto(eventId: number, personAccreditationId: number, image: Image): Observable {
+ return this.http.post(`${this.url(eventId)}/${personAccreditationId}/photo`, image).pipe(share());
+ }
+
initialiseFetchParams(): PersonAccreditationSummaryReqParams {
return {
name: null,
diff --git a/src/types/image.ts b/src/types/image.ts
index 6907e2e..a253b6f 100644
--- a/src/types/image.ts
+++ b/src/types/image.ts
@@ -1,6 +1,6 @@
export interface Image {
id: number;
thumbnail_hash: string;
- thumbnail: string;
- type: string;
+ thumbnail?: string;
+ type?: string;
}
-
+
- {{'saving' | translate}}...
+{{ 'saving' | translate }}...
{{'changes_saved_automatically'| translate}}
+ *ngIf="!savingPersonAcr">{{ 'changes_saved_automatically'| translate }}
-
{{'existing_information' | translate | titlecase}}
+{{ 'existing_information' | translate | titlecase }}
@@ -140,44 +162,44 @@
{{'existing_information' | translate | titlecase}}
-
-
{{personAcr.person.first_name}} {{personAcr.person.last_name}}
+ +{{ personAcr.person.first_name }} {{ personAcr.person.last_name }}
-
-
{{personAcr.person_position.position.name.text}}
- {{personAcr.person_position.open_field}}
- {{personAcr.person_position.organization?.name.text}}
+
+ {{ personAcr.person_position.position.name.text }}
+ {{ personAcr.person_position.open_field }}
+ {{ personAcr.person_position.organization?.name.text }}
-
-
{{zone.code}}
+ [ngbTooltip]="zone.name"
+ [style.color]="zone.text_color">{{ zone.code }}
{{personAcr.position_delegate_type.delegate_type.name}}
+
+ {{ personAcr.position_delegate_type.delegate_type.name }}
-
+
- {{poz.package_option.name.text}}:
+ {{ poz.package_option.name.text }}:
{{poz.zone.code}}
+ [style.color]="poz.zone.text_color">{{ poz.zone.code }}
{{'view_in_people' | translate}}
+ class="fa fa-external-link"> {{ 'view_in_people' | translate }}
{{'existing_information' | translate | titlecase}}
-
-
+
-{{'badge_has_been_printed' | translate}}
- {{'badge_has_been_distributed' | translate}}
+ {{ 'badge_has_been_printed' | translate }}
+ {{ 'badge_has_been_distributed' | translate }}
+
- {{'preview_badge' | translate | titlecase}}
+
{{'preview_badge' | translate | titlecase}}
+ {{ 'preview_badge' | translate | titlecase }}
-
@@ -227,31 +258,52 @@ {{'preview_badge' | translate | titlecase}}
-
-
{{'all_zones' | translate | titlecase}}
+{{ 'all_zones' | translate | titlecase }}
| + | |
| {{zone.code}} - | -- {{zone.name}} - | -
| {{'no_zones' | translate}} | -+ {{ zone.name }} + | + +
| {{ 'no_zones' | translate }} | +|
{{ (openModalMode === 'CAMERA' ? 'take_photo' : 'upload_photo') | translate }}
+
+
+
+
diff --git a/src/app/webcam-capture/webcam-capture.component.spec.ts b/src/app/webcam-capture/webcam-capture.component.spec.ts
new file mode 100644
index 0000000..f465feb
--- /dev/null
+++ b/src/app/webcam-capture/webcam-capture.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WebcamCaptureComponent } from './webcam-capture.component';
+
+describe('WebcamCaptureComponent', () => {
+ let component: WebcamCaptureComponent;
+ let fixture: ComponentFixture
+
+ +
+ {{ cameraInitErrorMsg }}
++ +
+ ![]()
+
+