Add badge WorldSkills Europe CPM 2025

src/app/app.module.ts

@@ -76,6 +76,7 @@ import { VehicleBadgeComponent } from './vehicle-badge/vehicle-badge.component';
 import { VehiclePrintComponent } from './vehicle-print/vehicle-print.component';
 import { EventIndexComponent } from './event-index/event-index.component';
 import { DragDropModule } from '@angular/cdk/drag-drop';
+import { Wse2025CpmComponent } from './badges/wse2025-cpm/wse2025-cpm.component';
 
 export function HttpLoaderFactory(http: HttpClient) {
   return new TranslateHttpLoader(http, '/assets/i18n/', '.json?v=20240905174532');
@@ -113,6 +114,7 @@ export function HttpLoaderFactory(http: HttpClient) {
     Wsi2023GaComponent,
     Wsi2024CpwComponent,
     Wsi2024WscComponent,
+    Wse2025CpmComponent,
     SetupScanAppComponent,
     VehicleComponent,
     VehicleAddComponent,

src/app/badges-determiner/badges-determiner.component.html

@@ -2,6 +2,7 @@
 
   <badge-default *ngSwitchDefault [pa]="pa" [currentEvent]="currentEvent"></badge-default>
 
+  <badge-wse2025-cpm *ngSwitchCase="616" [pa]="pa" [currentEvent]="currentEvent"></badge-wse2025-cpm>
   <badge-fi2024 *ngSwitchCase="607" [pa]="pa" [currentEvent]="currentEvent"></badge-fi2024>
   <badge-wsi2024-wsc *ngSwitchCase="579" [pa]="pa" [currentEvent]="currentEvent"></badge-wsi2024-wsc>
   <badge-wsi2024-cpw *ngSwitchCase="609" [pa]="pa" [currentEvent]="currentEvent"></badge-wsi2024-cpw>

src/app/badges/wse2025-cpm/wse2025-cpm.component.css

@@ -0,0 +1,117 @@
+@page {
+  padding: 0;
+  margin: 0;
+  size: 105mm 148mm !important;
+}
+
+.wse-badge {
+  width: 105mm;
+  height: 148mm;
+  background-color: #E7D9CF;
+  font-weight: 500;
+  font-size: 4mm;
+  overflow: hidden;
+  page-break-after: always;
+}
+
+@media screen {
+  .wse-badge {
+    margin: 10mm auto;
+  }
+}
+
+.wse-secondary {
+  color: #731C18;
+}
+
+.wse-header {
+  width: 105mm;
+  height: 35mm;
+}
+
+.wse-grid {
+  padding: 3mm 5mm;
+  display: grid; 
+  grid-template-columns: 3fr 7fr;
+  grid-template-rows: repeat(4, auto); 
+  gap: 3mm 4mm;
+  grid-template-areas: 
+    "photo info"
+    "aaa ."
+    "zones zones"
+    "delegate-type delegate-type"; 
+}
+
+.wse-grid-photo {
+  grid-area: photo;
+  height: 37mm;
+}
+
+.wse-grid-photo img {
+  width: 100%;
+}
+
+.wse-grid-info {
+  grid-area: info;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.wse-name {
+  font-weight: 800;
+  line-height: 1.1;
+  text-transform: uppercase;
+  height: 14mm;
+}
+
+.wse-lines {
+  line-height: 1.3;
+  height: 18mm;
+}
+
+.wse-grid-aaa {
+  grid-area: aaa;
+}
+
+.wse-aaa {
+  height: 10mm;
+}
+
+.wse-grid-zones {
+  grid-area: zones;
+  border: 0.3mm solid #000;
+  padding: 3mm;
+  display: flex;
+  justify-content: space-between;
+}
+
+.wse-zones-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  grid-column-gap: 2mm;
+  grid-row-gap: 2mm;
+}
+
+.wse-zone {
+  width: 11mm;
+  height: 14mm;
+}
+
+.wse-qrcode {
+  display: block;
+  width: 30mm;
+  height: 30mm;
+}
+
+.wse-grid-delegate-type {
+  grid-area: delegate-type;
+  font-weight: 800;
+  font-size: 6mm;
+  line-height: 14mm;
+  text-transform: uppercase;
+  text-align: center;
+  -webkit-print-color-adjust: exact;
+}
+

src/app/badges/wse2025-cpm/wse2025-cpm.component.html

@@ -0,0 +1,43 @@
+<div class="wse-badge">
+
+    <img src="assets/badges/wse2025-cpm/header_accreditation.png" style="width: 105mm; height: 35mm;">
+
+    <div class="wse-grid">
+        <div class="wse-grid-photo">
+            <img *ngIf="pa.image" src="{{pa.image.thumbnail}}_accreditation" alt="" style="width: 100%;">
+        </div>
+
+        <div class="wse-grid-info">
+            <div class="wse-name ws-text-fit">
+                <div>{{pa.first_name}}</div>
+                <div>{{pa.last_name}}</div>
+            </div>
+
+            <div class="wse-lines ws-text-fit">
+                <div class="wse-secondary">{{pa.lines[0]}}</div>
+                <div>{{pa.lines[1] || "&nbsp;"}}</div>
+                <div class="wse-secondary">{{pa.lines[2] || "&nbsp;"}}</div>
+            </div>
+        </div>
+
+        <div class="wse-grid-aaa">
+            <img src="assets/badges/wse2025-cpm/AAA.png" class="wse-aaa">
+        </div>
+
+        <div class="wse-grid-zones">
+            <div class="wse-zones-grid">
+                <div><img *ngIf="hasZone('C')" src="assets/badges/wse2025-cpm/Catering_text.png" class="wse-zone"></div>
+                <div><img *ngIf="hasZone('SKT')" src="assets/badges/wse2025-cpm/Skills_Village_Tour_text.png" class="wse-zone"></div>
+                <div><img *ngIf="hasZone('T')" src="assets/badges/wse2025-cpm/Transport_text.png" class="wse-zone"></div>
+                <div><img *ngIf="hasZone('VT')" src="assets/badges/wse2025-cpm/Venue_Tour_text.png" class="wse-zone"></div>
+                <div><img *ngIf="hasZone('W')" src="assets/badges/wse2025-cpm/Workshops_text.png" class="wse-zone"></div>
+            </div>
+            <img src="{{pa.qr_code}}" class="wse-qrcode">
+        </div>
+
+        <div class="wse-grid-delegate-type" style="background-color: {{pa.delegate_type.color}} !important; color: {{pa.delegate_type.text_color}} !important;">
+            {{pa.delegate_type.code}}
+        </div>
+    </div>
+
+</div>

src/app/badges/wse2025-cpm/wse2025-cpm.component.ts

@@ -0,0 +1,50 @@
+import { Component, Input, OnInit, SimpleChanges } from '@angular/core';
+import {PersonAccreditationSummary} from "../../../types/person-accreditation-summary";
+import {Event} from "../../../types/event";
+import {Zone} from "../../../types/zone";
+import {ZoneService} from '../../../services/zone/zone.service';
+
+declare var textFit: any;
+
+@Component({
+  selector: 'badge-wse2025-cpm',
+  templateUrl: './wse2025-cpm.component.html',
+  styleUrls: ['./wse2025-cpm.component.css']
+})
+export class Wse2025CpmComponent implements OnInit {
+
+  @Input() pa: PersonAccreditationSummary;
+  @Input() currentEvent: Event
+  showComponent = true;
+  zones: Zone[] = [];
+
+  constructor(private zoneService: ZoneService) {
+  }
+
+  ngOnInit() {
+    this.refreshComponent();
+    this.zoneService.getList(this.currentEvent.id, {available_person_accreditation: true}).subscribe(res => {
+      this.zones = res.zones;
+    })
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['pa']) {
+      this.refreshComponent();
+    } 
+  }
+
+  refreshComponent() {
+    this.showComponent = false;
+    setTimeout(() => { 
+      this.showComponent = true;
+      setTimeout(() => { 
+        textFit(document.getElementsByClassName('ws-text-fit'), {multiLine: true});
+      }, 100);
+    }, 100);
+  }
+
+  hasZone(zone: string) {
+    return this.pa.zones.map(z => z.code).includes(zone);
+  }
+}