Support multiple printers gui

frontend/angular.json

@@ -30,9 +30,7 @@
                             "src/assets"
                         ],
                         "styles": [
-                            "node_modules/primeng/resources/themes/lara-dark-purple/theme.css",
-                            "node_modules/primeng/resources/primeng.min.css",
-                            "src/styles.scss"
+                            "src/styles.scss",
                         ],
                         "scripts": [
                             "node_modules/fabric/dist/fabric.js"

frontend/package.json

@@ -1,41 +1,43 @@
 {
-    "name": "phomemer",
-    "version": "0.0.0",
-    "scripts": {
-        "ng": "ng",
-        "start": "ng serve",
-        "build": "ng build",
-        "watch": "ng build --watch --configuration development",
-        "test": "ng test"
-    },
-    "private": true,
-    "dependencies": {
-        "@angular/animations": "^17.0.0",
-        "@angular/common": "^17.0.0",
-        "@angular/compiler": "^17.0.0",
-        "@angular/core": "^17.0.0",
-        "@angular/forms": "^17.0.0",
-        "@angular/platform-browser": "^17.0.0",
-        "@angular/platform-browser-dynamic": "^17.0.0",
-        "@angular/router": "^17.0.0",
-        "fabric": "npm:fabric-pure-browser@^5.1.0",
-        "primeng": "^17.12.0",
-        "rxjs": "~7.8.0",
-        "tslib": "^2.3.0",
-        "zone.js": "~0.14.2"
-    },
-    "devDependencies": {
-        "@angular-devkit/build-angular": "^17.0.7",
-        "@angular/cli": "^17.0.7",
-        "@angular/compiler-cli": "^17.0.0",
-        "@types/fabric": "^5.3.7",
-        "@types/jasmine": "~5.1.0",
-        "jasmine-core": "~5.1.0",
-        "karma": "~6.4.0",
-        "karma-chrome-launcher": "~3.2.0",
-        "karma-coverage": "~2.2.0",
-        "karma-jasmine": "~5.1.0",
-        "karma-jasmine-html-reporter": "~2.1.0",
-        "typescript": "~5.2.2"
-    }
+  "name": "phomemer",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^19.0.5",
+    "@angular/common": "^19.0.5",
+    "@angular/compiler": "^19.0.5",
+    "@angular/core": "^19.0.5",
+    "@angular/forms": "^19.0.5",
+    "@angular/platform-browser": "^19.0.5",
+    "@angular/platform-browser-dynamic": "^19.0.5",
+    "@angular/router": "^19.0.5",
+    "@primeng/themes": "^19.0.0",
+    "fabric": "npm:fabric-pure-browser@^5.1.0",
+    "primeng": "^19.0.2",
+    "resources": "^0.4.3",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.15.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^19.0.6",
+    "@angular/cli": "^19.0.6",
+    "@angular/compiler-cli": "^19.0.5",
+    "@types/fabric": "^5.3.7",
+    "@types/jasmine": "~5.1.0",
+    "jasmine-core": "~5.1.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "typescript": "~5.5.4"
+  }
 }

frontend/src/app/api-service/api.service.ts

@@ -0,0 +1,16 @@
+import { HttpClient } from '@angular/common/http';
+import { DestroyRef, inject, Injectable } from '@angular/core';
+import { Printers } from '../data/printers.model';
+
+@Injectable({ providedIn: 'root' })
+export class ApiService {
+    destroyRef = inject(DestroyRef);
+    private readonly httpClient = inject(HttpClient);
+
+    getPrinters() {
+        return this.httpClient.get<Printers[]>('printers');
+    }
+    print(formData: FormData) {
+        return this.httpClient.post('print', formData);
+    }
+}

frontend/src/app/app.component.ts

@@ -1,11 +1,10 @@
 import {Component} from '@angular/core';
-import {CommonModule} from '@angular/common';
+
 import {RouterOutlet} from '@angular/router';
 
 @Component({
     selector: 'app-root',
-    standalone: true,
-    imports: [CommonModule, RouterOutlet],
+    imports: [RouterOutlet],
     templateUrl: './app.component.html',
     styleUrl: './app.component.scss'
 })

frontend/src/app/app.config.ts

@@ -1,15 +1,22 @@
-import {ApplicationConfig} from '@angular/core';
-import {provideRouter} from '@angular/router';
-import {routes} from './app.routes';
-import {provideAnimations} from '@angular/platform-browser/animations';
-import {provideHttpClient} from '@angular/common/http';
-import {MessageService} from 'primeng/api';
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { routes } from './app.routes';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { provideHttpClient } from '@angular/common/http';
+import { providePrimeNG } from 'primeng/config';
+import Material from '@primeng/themes/material';
+import { MessageService } from 'primeng/api';
 
 export const appConfig: ApplicationConfig = {
     providers: [
         provideRouter(routes),
         provideAnimations(),
         provideHttpClient(),
-        MessageService
-    ]
+        MessageService,
+        providePrimeNG({
+            theme: {
+                preset: Material,
+           },
+        }),
+    ],
 };

frontend/src/app/canvas-page/canvas-page.component.html

@@ -1,73 +1,106 @@
 <p-toast></p-toast>
-
-<div class="paper">
-    <p-overlayPanel #sizesPanel>
-        <form class="paper-size-form" [formGroup]="paperSizeForm">
-            <label>
-                <div>width</div>
-                <input pInputText formControlName="width">
-            </label>
-            <label>
-                <div>height</div>
-                <input pInputText formControlName="height">
-            </label>
-            <label>
-                <div>dpi</div>
-                <input pInputText formControlName="dpi">
-            </label>
-        </form>
-
-        <p-button *ngFor="let size of SIZES" [text]="true"
-                  (click)="paperSize = size; sizesPanel.toggle($event)">
-            {{ size.width }} × {{ size.height }} mm [{{ size.shape }}]
-        </p-button>
-    </p-overlayPanel>
-
-    <p-button (click)="sizesPanel.toggle($event)" [disabled]="paperSizeConfigured">
-        {{ paperSize.width }} × {{ paperSize.height }} mm [{{ paperSize.shape }}]
-    </p-button>
-</div>
-
 <div class="canvas-wrapper">
-    <div class="canvas-frame" [attr.data-shape]="paperSize.shape">
+    <div
+        class="canvas-frame"
+        [attr.data-shape]="currentPrinter()?.paper?.shape"
+    >
         <canvas id="canvas" #canvasElement></canvas>
         <div class="canvas-mask">
             <div class="label"></div>
-            <div *ngIf="paperSize.shape === PaperShape.Split" class="label"></div>
+            @if ((currentPrinter()?.paper?.shape ?? "") === "split") {
+                <div class="label"></div>
+            }
         </div>
     </div>
 </div>
 
-<form class="controls" *ngIf="form" [formGroup]="form">
-    <div class="group group-drawing">
-        <label class="item">
-            <p-checkbox formControlName="drawingMode" [binary]="true" inputId="drawingMode"></p-checkbox>
-            enable drawing
-        </label>
-        <p-slider class="item grow" [min]="1" [max]="30" formControlName="brushSize"></p-slider>
-        <div class="brush-preview">
-            <div class="brush"
-                 [style.width]="form.get('brushSize')?.value + 'px'"
-                 [style.height]="form.get('brushSize')?.value + 'px'"
-            ></div>
-            <span class="size">{{ form.get('brushSize')?.value }}</span>
+@if (form) {
+    <form class="controls" [formGroup]="form">
+        <div class="flex flex-column gap-4">
+            @if (!printerList().length) {
+                <p-message
+                    severity="warn"
+                    text="Please connect any Printer, because no Printer is reachable"
+                ></p-message>
+            }
+            @for (printer of printerList(); track printer; let idx = $index) {
+                <div class="field-checkbox">
+                    <p-radioButton
+                        [inputId]="printer.address"
+                        [value]="printer"
+                        formControlName="selectedPrinter"
+                    />
+                    <label [for]="printer.address" class="ml-2">
+                        {{ printer.name }}
+                    </label>
+                </div>
+            }
+            @if (
+                form.get("selectedPrinter")?.invalid &&
+                form.get("selectedPrinter")?.touched
+            ) {
+                <p-message
+                    severity="error"
+                    text="Printer is not selected"
+                ></p-message>
+            }
         </div>
-    </div>
-    <div class="group group-text">
-        <p-button size="small" (click)="createText()">+ text</p-button>
-        <p-slider class="item grow" [min]="5" [max]="72" formControlName="fontSize"></p-slider>
-        <p-chip label="{{ form.get('fontSize')?.value }}"></p-chip>
-    </div>
-    <div class="group group-text">
-        <p-dropdown formControlName="fontFamily" [editable]="true" [options]="fonts"></p-dropdown>
-    </div>
-    <div class="group group-text">
-        <p-button size="small" (click)="createImg()">+ img</p-button>
-    </div>
-</form>
+        <div class="group group-drawing">
+            <label class="item">
+                <p-checkbox
+                    formControlName="drawingMode"
+                    [binary]="true"
+                    inputId="drawingMode"
+                ></p-checkbox>
+                enable drawing
+            </label>
+            <p-slider
+                class="item grow"
+                [min]="1"
+                [max]="30"
+                formControlName="brushSize"
+            ></p-slider>
+            <div class="brush-preview">
+                <div
+                    class="brush"
+                    [style.width]="form.get('brushSize')?.value + 'px'"
+                    [style.height]="form.get('brushSize')?.value + 'px'"
+                ></div>
+                <span class="size">{{ form.get("brushSize")?.value }}</span>
+            </div>
+        </div>
+        <div class="group group-text">
+            <p-button size="small" (click)="createText()">+ text</p-button>
+            <p-slider
+                class="item grow"
+                [min]="5"
+                [max]="72"
+                formControlName="fontSize"
+            ></p-slider>
+            <p-chip label="{{ form.get('fontSize')?.value }}"></p-chip>
+        </div>
+        <div class="group group-text">
+            <p-dropdown
+                formControlName="fontFamily"
+                [editable]="true"
+                [options]="fonts"
+            ></p-dropdown>
+        </div>
+        <div class="group group-text">
+            <p-button size="small" (click)="createImg()">+ img</p-button>
+        </div>
+    </form>
+}
 
 <div class="actions">
-    <p-button [disabled]="busy" severity="danger" size="large" (click)="clear()">clear</p-button>
-    <p-button [disabled]="busy" severity="success" size="large" (click)="print()">print</p-button>
+    <p-button [disabled]="busy" severity="danger" size="large" (click)="clear()"
+        >clear</p-button
+    >
+    <p-button
+        [disabled]="busy"
+        severity="success"
+        size="large"
+        (click)="print()"
+        >print</p-button
+    >
 </div>
-