feat(recipes): add recipe management with download/upload of tag values

client/src/app/_models/project.ts

@@ -3,6 +3,7 @@ import { Hmi } from './hmi';
 import { Chart } from './chart';
 import { Graph } from './graph';
 import { Alarm } from './alarm';
+import { Recipe } from './recipe';
 import { Notification } from './notification';
 import { Languages, LanguageText } from './language';
 import { Utils } from '../_helpers/utils';
@@ -28,6 +29,8 @@ export class ProjectData {
     graphs: Graph[] = [];
     /** Alarms, Tags, logic, level, colors, etc.  */
     alarms: Alarm[] = [];
+    /** Recipe templates, Tags, default values, etc. */
+    recipes: Recipe[] = [];
     /** Notifications  */
     notifications: Notification[] = [];
     /** Scripts */
@@ -62,6 +65,8 @@ export enum ProjectDataCmdType {
     DelText = 'del-text',
     SetAlarm = 'set-alarm',
     DelAlarm = 'del-alarm',
+    SetRecipe = 'set-recipe',
+    DelRecipe = 'del-recipe',
     SetNotification = 'set-notification',
     DelNotification = 'del-notification',
     SetScript = 'set-script',

client/src/app/_models/recipe.ts

@@ -0,0 +1,48 @@
+import { Utils } from '../_helpers/utils';
+
+export interface Recipe {
+    id: string;              // "r_" + 12 hex chars
+    typeId?: string;         // if set, this recipe is an INSTANCE of the recipe type with this id
+    name: string;            // required, max 128
+    description: string;     // optional, max 512
+    entries: RecipeEntry[];  // 1..1000
+    permission?: number;
+    permissionRoles?: {
+        show?: string[];
+        enabled?: string[];
+    };
+    createdAt?: string;
+    updatedAt?: string;
+}
+
+export interface RecipeEntry {
+    id: string;              // "e_" + 8 hex chars
+    tagId: string;
+    tagName: string;
+    tagType: string;         // bool, int, real, etc.
+    value: any;
+}
+
+export interface RecipeProgressEvent {
+    recipeId: string;
+    entryId?: string;
+    tagId?: string;
+    tagName?: string;
+    index: number;
+    total: number;
+    status: 'pending' | 'writing' | 'reading' | 'success' | 'error' | 'skipped';
+    value?: any;
+    error?: string;
+}
+
+export interface RecipeCompleteEvent {
+    recipeId: string;
+    successCount: number;
+    errorCount: number;
+    errors: { entryId: string; tagId: string; error: string }[];
+}
+
+export interface RecipeCancelledEvent {
+    recipeId: string;
+    completedCount: number;
+}

client/src/app/_services/hmi.service.ts

@@ -35,6 +35,13 @@ export class HmiService {
     @Output() onSchedulerEventActive: EventEmitter<any> = new EventEmitter();
     @Output() onSchedulerRemainingTime: EventEmitter<any> = new EventEmitter();
     @Output() onGaugeEvent: EventEmitter<any> = new EventEmitter();
+    @Output() onRecipeDownloadProgress: EventEmitter<any> = new EventEmitter();
+    @Output() onRecipeDownloadComplete: EventEmitter<any> = new EventEmitter();
+    @Output() onRecipeDownloadError: EventEmitter<any> = new EventEmitter();
+    @Output() onRecipeUploadProgress: EventEmitter<any> = new EventEmitter();
+    @Output() onRecipeUploadComplete: EventEmitter<any> = new EventEmitter();
+    @Output() onRecipeUploadError: EventEmitter<any> = new EventEmitter();
+    @Output() onRecipeCanceled: EventEmitter<any> = new EventEmitter();
 
     onServerConnection$ = new BehaviorSubject<boolean>(false);
 
@@ -317,6 +324,28 @@ export class HmiService {
         this.socket.on(IoEventTypes.ALIVE, (message) => {
             this.onServerConnection$.next(true);
         });
+        // recipes
+        this.socket.on(IoEventTypes.RECIPE_DOWNLOAD_PROGRESS, (message) => {
+            this.onRecipeDownloadProgress.emit(message);
+        });
+        this.socket.on(IoEventTypes.RECIPE_DOWNLOAD_COMPLETE, (message) => {
+            this.onRecipeDownloadComplete.emit(message);
+        });
+        this.socket.on(IoEventTypes.RECIPE_DOWNLOAD_ERROR, (message) => {
+            this.onRecipeDownloadError.emit(message);
+        });
+        this.socket.on(IoEventTypes.RECIPE_UPLOAD_PROGRESS, (message) => {
+            this.onRecipeUploadProgress.emit(message);
+        });
+        this.socket.on(IoEventTypes.RECIPE_UPLOAD_COMPLETE, (message) => {
+            this.onRecipeUploadComplete.emit(message);
+        });
+        this.socket.on(IoEventTypes.RECIPE_UPLOAD_ERROR, (message) => {
+            this.onRecipeUploadError.emit(message);
+        });
+        this.socket.on(IoEventTypes.RECIPE_CANCELED, (message) => {
+            this.onRecipeCanceled.emit(message);
+        });
         this.askDeviceValues();
         this.askAlarmsStatus();
     }
@@ -474,6 +503,16 @@ export class HmiService {
             this.socket.emit(IoEventTypes.DEVICE_ENABLE, msg);
         }
     }
+
+    /**
+     * Cancel recipe execution
+     * @param recipeId
+     */
+    public cancelRecipeExecution(recipeId: string) {
+        if (this.socket) {
+            this.socket.emit(IoEventTypes.RECIPE_CANCEL, { recipeId });
+        }
+    }
     //#endregion
 
     //#region Signals Gauges Mapping
@@ -755,7 +794,15 @@ export enum IoEventTypes {
     ALIVE = 'heartbeat',
     SCHEDULER_UPDATED = 'scheduler:updated',
     SCHEDULER_ACTIVE = 'scheduler:event-active',
-    SCHEDULER_REMAINING = 'scheduler:remaining-time'
+    SCHEDULER_REMAINING = 'scheduler:remaining-time',
+    RECIPE_DOWNLOAD_PROGRESS = 'recipe:download-progress',
+    RECIPE_DOWNLOAD_COMPLETE = 'recipe:download-complete',
+    RECIPE_DOWNLOAD_ERROR = 'recipe:download-error',
+    RECIPE_UPLOAD_PROGRESS = 'recipe:upload-progress',
+    RECIPE_UPLOAD_COMPLETE = 'recipe:upload-complete',
+    RECIPE_UPLOAD_ERROR = 'recipe:upload-error',
+    RECIPE_CANCEL = 'recipe:cancel-execution',
+    RECIPE_CANCELED = 'recipe:cancel-confirmed'
 }
 
 export const ScriptCommandEnum = {

client/src/app/_services/recipe.service.ts

@@ -0,0 +1,97 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+import { EndPointApi } from '../_helpers/endpointapi';
+import { environment } from '../../environments/environment';
+import { Recipe, RecipeEntry } from '../_models/recipe';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class RecipeService {
+
+    private endPointConfig: string = EndPointApi.getURL();
+
+    constructor(private http: HttpClient) {
+    }
+
+    /**
+     * Cache-busting param: the server sends ETags, so the browser revalidates
+     * with If-None-Match and Express answers 304 Not Modified. Angular's
+     * HttpClient treats 304 as an error (ok = 200 <= status < 300), so the
+     * widget would show a failure on every load after the first one.
+     * A unique query param forces a fresh 200 every time.
+     */
+    private _ts() {
+        return { _ts: Date.now().toString() };
+    }
+
+    getRecipeTypes(): Observable<{ recipes: { id: string; data: Recipe }[] }> {
+        return this.http.get<{ recipes: { id: string; data: Recipe }[] }>(this.endPointConfig + '/api/recipes/types', {
+            params: this._ts()
+        });
+    }
+
+    getRecipeInstances(typeId: string): Observable<{ recipes: { id: string; data: Recipe }[] }> {
+        return this.http.get<{ recipes: { id: string; data: Recipe }[] }>(this.endPointConfig + '/api/recipes/instances', {
+            params: { typeId, ...this._ts() }
+        });
+    }
+
+    getRecipeType(id: string): Observable<Recipe> {
+        return this.http.get<Recipe>(this.endPointConfig + '/api/recipes/types/' + id, {
+            params: this._ts()
+        });
+    }
+
+    getRecipeInstance(id: string): Observable<Recipe> {
+        return this.http.get<Recipe>(this.endPointConfig + '/api/recipes/instances/' + id, {
+            params: this._ts()
+        });
+    }
+
+    saveRecipeType(recipe: { id?: string; name: string; description?: string; entries: RecipeEntry[] }): Observable<{ id: string }> {
+        let header = new HttpHeaders({ 'Content-Type': 'application/json' });
+        return this.http.post<{ id: string }>(this.endPointConfig + '/api/recipes/types', recipe, { headers: header });
+    }
+
+    saveRecipeInstance(recipe: { id?: string; typeId: string; name: string; description?: string; entries: RecipeEntry[] }): Observable<{ id: string }> {
+        let header = new HttpHeaders({ 'Content-Type': 'application/json' });
+        return this.http.post<{ id: string }>(this.endPointConfig + '/api/recipes/instances', recipe, { headers: header });
+    }
+
+    deleteRecipeType(id: string): Observable<{ result: string; deleted: number }> {
+        return this.http.delete<{ result: string; deleted: number }>(this.endPointConfig + '/api/recipes/types?id=' + id);
+    }
+
+    deleteRecipeInstance(id: string): Observable<{ result: string; deleted: number }> {
+        return this.http.delete<{ result: string; deleted: number }>(this.endPointConfig + '/api/recipes/instances?id=' + id);
+    }
+
+    downloadRecipe(id: string): Observable<{ result: string; recipeId: string; totalEntries: number }> {
+        let header = new HttpHeaders({ 'Content-Type': 'application/json' });
+        return this.http.post<{ result: string; recipeId: string; totalEntries: number }>(
+            this.endPointConfig + '/api/recipes/download', { id }, { headers: header });
+    }
+
+    uploadRecipe(id: string): Observable<{ result: string; recipeId: string; totalEntries: number }> {
+        let header = new HttpHeaders({ 'Content-Type': 'application/json' });
+        return this.http.post<{ result: string; recipeId: string; totalEntries: number }>(
+            this.endPointConfig + '/api/recipes/upload', { id }, { headers: header });
+    }
+
+    exportRecipe(id: string, format: 'json' | 'csv'): Observable<Blob> {
+        let header = new HttpHeaders({ 'Content-Type': 'application/json' });
+        return this.http.post(this.endPointConfig + '/api/recipes/export', { id, format }, {
+            headers: header,
+            responseType: 'blob'
+        });
+    }
+
+    importRecipe(data: { file: string; format?: string; name?: string; description?: string }): Observable<{ id: string; name: string; entriesCount: number }> {
+        let header = new HttpHeaders({ 'Content-Type': 'application/json' });
+        return this.http.post<{ id: string; name: string; entriesCount: number }>(
+            this.endPointConfig + '/api/recipes/types/import', data, { headers: header });
+    }
+}

client/src/app/app.module.ts

@@ -241,6 +241,12 @@ import { SectionMessageDialogComponent } from './editor/section-message-dialog/s
 import { ArMarkerListComponent } from './ar/ar-marker-list/ar-marker-list.component';
 import { ArMarkerPropertyComponent } from './ar/ar-marker-property/ar-marker-property.component';
 import { ArViewComponent } from './ar/ar-view/ar-view.component';
+import { RecipeListComponent } from './recipes/recipe-list/recipe-list.component';
+import { RecipeEditorComponent } from './recipes/recipe-editor/recipe-editor.component';
+import { RecipeProgressComponent } from './recipes/recipe-progress/recipe-progress.component';
+import { HtmlRecipeViewComponent, HtmlRecipeComponent } from './gauges/controls/html-recipe/html-recipe.component';
+import { HtmlRecipeNewDialogComponent } from './gauges/controls/html-recipe/html-recipe-new-dialog/html-recipe-new-dialog.component';
+import { RecipePropertyComponent } from './gauges/controls/html-recipe/recipe-property/recipe-property.component';
 
 export function createTranslateLoader(http: HttpClient) {
     return new TranslateHttpLoader(http, './assets/i18n/', '.json');
@@ -430,7 +436,14 @@ export const myCustomTooltipDefaults: MatTooltipDefaultOptions = {
         SectionMessageDialogComponent,
         ArMarkerListComponent,
         ArMarkerPropertyComponent,
-        ArViewComponent
+        ArViewComponent,
+        RecipeListComponent,
+        RecipeEditorComponent,
+        RecipeProgressComponent,
+        HtmlRecipeViewComponent,
+        HtmlRecipeComponent,
+        HtmlRecipeNewDialogComponent,
+        RecipePropertyComponent
     ],
     bootstrap: [AppComponent], imports: [BrowserModule,
         FormsModule,

client/src/app/app.routing.ts

@@ -23,6 +23,7 @@ import { ApiKeysListComponent } from './apikeys/api-keys-list/api-keys-list.comp
 import { PluginsListComponent } from './plugins/plugins-list/plugins-list.component';
 import { ArMarkerListComponent } from './ar/ar-marker-list/ar-marker-list.component';
 import { ArViewComponent } from './ar/ar-view/ar-view.component';
+import { RecipeListComponent } from './recipes/recipe-list/recipe-list.component';
 
 const appRoutes: Routes = [
     { path: '', component: HomeComponent},//, canActivate: [AuthGuard] },
@@ -38,6 +39,7 @@ const appRoutes: Routes = [
     { path: 'messages', component: AlarmListComponent, canActivate: [AuthGuard] },
     { path: 'notifications', component: NotificationListComponent, canActivate: [AuthGuard] },
     { path: 'scripts', component: ScriptListComponent, canActivate: [AuthGuard] },
+    { path: 'recipes', component: RecipeListComponent, canActivate: [AuthGuard] },
     { path: 'reports', component: ReportListComponent, canActivate: [AuthGuard] },
     { path: 'language', component: LanguageTextListComponent, canActivate: [AuthGuard] },
     { path: 'logs', component: LogsViewComponent, canActivate: [AuthGuard] },

client/src/app/editor/editor.component.html

@@ -40,6 +40,9 @@
         <div *ngSwitchCase="gaugeDialogType.Scheduler">
             <app-scheduler-property [data]="gaugeDialog.data" [reload]="reloadGaugeDialog" (onPropChanged)="onGaugeDialogChanged($event)"></app-scheduler-property>
         </div>
+        <div *ngSwitchCase="gaugeDialogType.Recipe">
+            <app-recipe-property [data]="gaugeDialog.data" [reload]="reloadGaugeDialog" (onPropChanged)="onGaugeDialogChanged($event)"></app-recipe-property>
+        </div>
     </div>
 </mat-drawer>
 <div id="svg_editor_container">
@@ -207,6 +210,10 @@
                                 (click)="setMode('own_ctrl-scheduler')">
                                 <span class="material-icon-tool material-icons" style="font-size: 23px;">schedule</span>
                             </div>
+                            <div class="svg-tool-button" matTooltip="{{'editor.controls-recipe' | translate}}" [ngClass]="{'svg-tool-active': isModeActive('own_ctrl-recipe')}"
+                                (click)="setMode('own_ctrl-recipe')">
+                                <span class="material-icon-tool material-icons" style="font-size: 23px;">receipt</span>
+                            </div>
                         </div>
                     </mat-expansion-panel>
                     <!-- SHAPES -->

client/src/app/editor/editor.component.ts

@@ -1431,6 +1431,20 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
             }
             this.reloadGaugeDialog = !this.reloadGaugeDialog;
             return;
+        } else if (dlgType === GaugeDialogType.Recipe) {
+            this.gaugeDialog.type = dlgType;
+            this.gaugeDialog.data = {
+                settings: tempsettings,
+                withEvents: false,
+                withActions: false,
+                withBitmask: false,
+                languageTextEnabled: false
+            };
+            if (!this.sidePanel.opened) {
+                this.sidePanel.toggle();
+            }
+            this.reloadGaugeDialog = !this.reloadGaugeDialog;
+            return;
         } else {
             //!TODO to be refactored (GaugePropertyComponent)
             elementWithLanguageText = this.isSelectedElementToEnableLanguageTextSettings();

client/src/app/editor/setup/setup.component.html

@@ -190,6 +190,14 @@ <h1 mat-dialog-title style="display:inline-block;cursor:move;" mat-dialog-dragga
                     </div>
                 </button>
             </div>
+            <div class="btn-card">
+                <button mat-button (click)="goTo('/recipes')" class="card-btn">
+                    <div class="card-btn-content">
+                        <mat-icon>receipt</mat-icon>
+                        <span>{{'dlg.setup-recipes' | translate}}</span>
+                    </div>
+                </button>
+            </div>
             <div class="btn-card">
                 <button mat-button (click)="goTo('/language')" class="card-btn" [disabled]="isToDisable('language')">
                     <div class="card-btn-content">

client/src/app/gauges/controls/html-recipe/html-recipe-new-dialog/html-recipe-new-dialog.component.css

@@ -0,0 +1,44 @@
+.newrecipe-dialog {
+    min-width: 380px;
+    padding: 16px 20px;
+}
+
+.dialog-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 16px;
+}
+
+.dialog-header mat-icon {
+    font-size: 24px;
+    width: 24px;
+    height: 24px;
+}
+
+.dialog-header h3 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 500;
+}
+
+.dialog-content {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.dialog-field {
+    width: 100%;
+}
+
+.dialog-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    margin-top: 16px;
+}
+
+.full-width {
+    width: 100%;
+}