client/src/app/device/device-map/device-map.component.html - master - tisit/FUXA_SCADA

client/src/app/device/device-map/device-map.component.html
143 строки11 KB
Umberto Nocelli
Upgrade Angular from v16 to v17 (#2113)
08 янв 2026, 21:56
08 янв 2026, 21:56905235d
<div class="page-container">
    <div *ngIf="mode === devicesViewMap">
        <div class="map-container">
            <div *ngIf="server && server.property">
                <div class="main-line-flow" [style.left.px]="getMainLineLeftPosition()" [style.top.px]="getMainLineTopPosition('flow')" [style.width.px]="lineFlowSize"
                    [style.height.px]="getMainLineHeight('flow')"></div>
                <div *ngFor="let flow of devicesValue('flow'); index as i" class="flow-line" [style.left.px]="getDeviceLineLeftPosition(i, 'flow')"
                    [style.top.px]="getDeviceLineTopPosition('flow')" [style.width.px]="lineFlowSize" [style.height.px]="flowLineHeight"></div>
                <div class="connection-line" [style.left.px]="getDeviceConnectionLeftPosition('flow')" [style.top.px]="getDeviceConnectionTopPosition('flow')"
                    [style.width.px]="getDeviceConnectionWidth('flow')" [style.height.px]="lineFlowSize"></div>

                <div class="main-line" [style.left.px]="getMainLineLeftPosition()" [style.top.px]="getMainLineTopPosition()" [style.width.px]="lineDeviceSize"
                    [style.height.px]="getMainLineHeight()">
                </div>
                <div *ngFor="let device of devicesValue(); index as i" class="device-line" [style.left.px]="getDeviceLineLeftPosition(i)"
                    [style.top.px]="getDeviceLineTopPosition()" [style.width.px]="lineDeviceSize" [style.height.px]="deviceLineHeight"></div>
                <div class="connection-line" [style.left.px]="getDeviceConnectionLeftPosition()" [style.top.px]="getDeviceConnectionTopPosition()"
                    [style.width.px]="getDeviceConnectionWidth()" [style.height.px]="lineDeviceSize"></div>
            </div>
            <div class="map-container">
                <div class="main-device" *ngIf="server?.property" [style.left.px]="getMainLeftPosition()" [style.top.px]="getMainTopPosition()" [style.width.px]="mainWidth"
                    [style.height.px]="mainHeight" [style.borderWidth.px]="mainBorder">
                    <span class="device-header" style="padding-top: 10px;">{{ server.name }}</span>
                    <span class="device-pro">{{ server.property.address }}</span>
                    <!-- <mat-icon (click)="onListDevice(server)" class="device-icon device-list">list_alt</mat-icon> -->
                    <!-- <mat-icon (click)="onEditDevice(server)" class="device-icon device-edit" >edit</mat-icon> -->
                    <button *ngIf="!readonly" mat-icon-button (click)="onListDevice(server)" class="device-icon device-list mat-button-sm" [style.right.px]="(readonly) ? 2 : 30"
                        matTooltip="{{'device.property-tags' | translate}}">
                        <mat-icon>link</mat-icon>
                    </button>
                    <button *ngIf="!readonly" mat-icon-button (click)="onEditDevice(server)" class="device-edit mat-button-sm" matTooltip="{{'device.property-edit' | translate}}">
                        <mat-icon style="font-size: 17px">edit</mat-icon>
                    </button>
                </div>

                <div *ngFor="let flow of devicesValue('flow'); index as i" class="node-flow" [style.color]="(flow.enabled) ? '#000000' : '#828282'"
                    [style.left.px]="getDeviceLeftPosition(i, 'flow')" [style.top.px]="getDeviceTopPosition('flow')" [style.width.px]="flowWidth" [style.height.px]="flowHeight"
                    [style.borderWidth.px]="flowBorder">
                    <span class="device-header" style="color: black;">{{ flow.name }}</span>
                    <span class="device-pro" *ngIf="flow.property">{{ flow.property.address }}</span>
                    <span class="device-pro" style="padding-bottom: 10px;">{{ getDevicePropertyToShow(flow) }}</span>
                    <div class="device-status" *ngIf="flow.enabled" [style.background-color]="getDeviceStatusColor(flow)"></div>
                    <button *ngIf="!readonly && withListConfig(flow)" mat-icon-button (click)="onListDevice(flow)" class="device-list mat-button-sm"
                        [style.right.px]="(readonly) ? 0 : 30" matTooltip="{{'device.property-tags' | translate}}">
                        <mat-icon>link</mat-icon>
                    </button>
                    <button *ngIf="!readonly" mat-icon-button (click)="onEditDevice(flow)" class="device-edit mat-button-sm" matTooltip="{{'device.property-edit' | translate}}">
                        <mat-icon style="font-size: 17px">edit</mat-icon>
                    </button>
                    <button *ngIf="!readonly" mat-icon-button (click)="onRemoveDevice(flow)" class="device-delete mat-button-sm"
                        matTooltip="{{'device.property-remove' | translate}}">
                        <mat-icon style="font-size: 17px">clear</mat-icon>
                    </button>
                </div>

                <div *ngFor="let device of devicesValue(); index as i" [ngClass]="getNodeClass(device)" [style.color]="(device.enabled) ? '#FFFFFF' : '#C5C5C5'"
                    [style.left.px]="getDeviceLeftPosition(i)" [style.top.px]="getDeviceTopPosition()" [style.width.px]="deviceWidth" [style.height.px]="deviceHeight"
                    [style.borderWidth.px]="deviceBorder">
                    <span class="device-header">{{ device.name }}</span>
                    <span class="device-pro" *ngIf="device.property">{{ device.property.address }}</span>
                    <span class="device-pro" style="padding-bottom: 10px;">{{ getDevicePropertyToShow(device) }}</span>
                    <div class="device-status" *ngIf="device.enabled" [style.background-color]="getDeviceStatusColor(device)"></div>
                    <button *ngIf="!readonly && withListConfig(device)" mat-icon-button (click)="onListDevice(device)" class="device-list mat-button-sm"
                        [style.right.px]="(readonly) ? 0 : 30" matTooltip="{{'device.property-tags' | translate}}">
                        <mat-icon>link</mat-icon>
                    </button>
                    <button *ngIf="!readonly" mat-icon-button (click)="onEditDevice(device)" class="device-edit mat-button-sm" matTooltip="{{'device.property-edit' | translate}}">
                        <mat-icon style="font-size: 17px">edit</mat-icon>
                    </button>
                    <button *ngIf="!readonly" mat-icon-button (click)="onRemoveDevice(device)" class="device-delete mat-button-sm"
                        matTooltip="{{'device.property-remove' | translate}}">
                        <mat-icon style="font-size: 17px">clear</mat-icon>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div *ngIf="mode === devicesViewList" class="table-wrapper">
        <mat-table #table [dataSource]="dataSource" matSort>
            <!-- Edit Column -->
            <ng-container matColumnDef="select">
                <mat-header-cell *matHeaderCellDef [ngClass]="!readonly ? 'selectWidthClass' : 'selectHideClass'">
                    <button *ngIf="!readonly" mat-icon-button (click)="addDevice()" class="remove" matTooltip="{{'device.property-add' | translate}}">
                        <mat-icon>add</mat-icon>
                    </button>
                </mat-header-cell>
                <mat-cell *matCellDef="let element" [ngClass]="!readonly ? 'selectWidthClass' : 'selectHideClass'">
                    <button *ngIf="!readonly && withListConfig(element)" mat-icon-button (click)="onListDevice(element)" class="remove"
                        matTooltip="{{'device.property-tags' | translate}}">
                        <mat-icon>link</mat-icon>
                    </button>
                    <button *ngIf="!readonly" mat-icon-button (click)="onEditDevice(element)" class="remove" matTooltip="{{'device.property-edit' | translate}}">
                        <mat-icon>edit</mat-icon>
                    </button>
                </mat-cell>
            </ng-container>
            <!-- Name Column -->
            <ng-container matColumnDef="name">
                <mat-header-cell *matHeaderCellDef mat-sort-header> {{'devices.list-name' | translate}} </mat-header-cell>
                <mat-cell *matCellDef="let element">{{element.name}} </mat-cell>
            </ng-container>
            <!-- Type Column -->
            <ng-container matColumnDef="type">
                <mat-header-cell *matHeaderCellDef mat-sort-header> {{'devices.list-type' | translate}} </mat-header-cell>
                <mat-cell *matCellDef="let element">{{element.type}} </mat-cell>
            </ng-container>
            <!-- Polling Column -->
            <ng-container matColumnDef="polling">
                <mat-header-cell *matHeaderCellDef mat-sort-header> {{'devices.list-polling' | translate}} </mat-header-cell>
                <mat-cell *matCellDef="let element">{{element.polling}} </mat-cell>
            </ng-container>
            <!-- Address Column -->
            <ng-container matColumnDef="address">
                <mat-header-cell *matHeaderCellDef mat-sort-header> {{'devices.list-address' | translate}} </mat-header-cell>
                <mat-cell *matCellDef="let element">{{getDeviceAddress(element)}} </mat-cell>
            </ng-container>
            <!-- Status Column -->
            <ng-container matColumnDef="status">
                <mat-header-cell *matHeaderCellDef mat-sort-header> {{'devices.list-status' | translate}} </mat-header-cell>
                <mat-cell *matCellDef="let element" [style.color]="getDeviceStatusColor(element)">{{getDeviceStatusText(element)}} </mat-cell>
            </ng-container>
            <!-- Enabled Column -->
            <ng-container matColumnDef="enabled">
                <mat-header-cell *matHeaderCellDef mat-sort-header> {{'devices.list-enabled' | translate}} </mat-header-cell>
                <mat-cell *matCellDef="let element">{{element.enabled}} </mat-cell>
            </ng-container>
            <!-- Button remove Column -->
            <ng-container matColumnDef="remove">
                <mat-header-cell *matHeaderCellDef></mat-header-cell>
                <mat-cell *matCellDef="let element">
                    <button *ngIf="!readonly && !isServer(element)" mat-icon-button (click)="$event.stopPropagation();onRemoveDevice(element)" class="remove"
                        matTooltip="{{'device.property-remove' | translate}}">
                        <mat-icon>clear</mat-icon>
                    </button>
                </mat-cell>
            </ng-container>

            <mat-header-row *matHeaderRowDef="displayedColumns" [ngStyle]="{'min-width.px': tableWidth}" sticky></mat-header-row>
            <mat-row *matRowDef="let row; columns: displayedColumns;" class="my-mat-row" [ngStyle]="{'min-width.px': tableWidth}"></mat-row>
        </mat-table>
        <mat-paginator [pageSizeOptions]="[10, 25, 100]" [pageSize]="25" style="position: relative; right: 100px;"></mat-paginator>
    </div>
</div>