Fixed removal of included entities in activities

src/app/active-entities/active-entities.component.html

@@ -69,7 +69,8 @@
   <div class="flex gap-2 align-content-center justify-content-center media-card-border"
        [style]="'width:'+(600*scale)+'px'" *ngFor="let mediaEntity of mediaEntities" cdkDrag>
     <app-media-entity [mediaEntity]="mediaEntity" [remote]="selectedRemote" [style]="'width:'+(600*scale)+'px'" [scale]="scale"
-                      class="flex flex-wrap gap-2 align-content-start justify-content-center ng-star-inserted"></app-media-entity>
+                      class="flex flex-wrap gap-2 align-content-start justify-content-center ng-star-inserted"
+      [closable]="true"></app-media-entity>
   </div>
 </div>
 <app-activity-player *ngFor="let activity of selectedActivities" [remote]="selectedRemote" [activity]="activity" [visible]="true"

src/app/active-entities/media-entity/media-entity.component.css

@@ -60,6 +60,13 @@
   left: 4px;
 }
 
+.close-button {
+  cursor: pointer;
+  position: absolute;
+  top: 4px;
+  right: 4px;
+}
+
 .uc-button .p-button-icon {
   font-size: 2rem !important;
 }

src/app/active-entities/media-entity/media-entity.component.html

@@ -4,6 +4,10 @@
             size="small" pTooltip="Power toggle" severity="secondary"/>
   <p-button *ngIf="isPowerOn(mediaEntity)" icon="pi pi-power-off" [rounded]="true" (click)="powerToggle(mediaEntity)" size="small" pTooltip="Power toggle"/>
 </div>
+<div class="close-button" *ngIf="closable" [style]="'scale:'+scale">
+  <p-button icon="pi pi-times" [rounded]="true" (click)="closeEntity(mediaEntity)"
+            size="small" pTooltip="Close" severity="secondary"/>
+</div>
 <div class="flex-column" *ngIf="mediaEntity?.new_state?.attributes?.media_image_url" style="width: 100%">
   <div class="flex align-content-center justify-content-center card-title" [style]="'text-align:center;scale:'+scale+';margin-left:'+(38*scale)+'px'">
     <ng-container *ngIf="headerTemplate" [ngTemplateOutlet]="headerTemplate"/>

src/app/active-entities/media-entity/media-entity.component.ts

@@ -44,6 +44,9 @@ export class MediaEntityComponent implements OnInit, AfterViewInit {
   @Input() remote: Remote | undefined;
   @Input() headerTemplate : TemplateRef<HTMLAreaElement> | undefined;
   @Input() scale = 1;
+  @Input() closable: boolean = false;
+  protected readonly Helper = Helper;
+
   textStyle = "font-size: 1.2rem";
 
   constructor(private server:ServerService, protected remoteWebsocketService: RemoteWebsocketService, private cdr:ChangeDetectorRef) { }
@@ -205,5 +208,10 @@ export class MediaEntityComponent implements OnInit, AfterViewInit {
       cmd_id}).subscribe();
   }
 
-  protected readonly Helper = Helper;
+  closeEntity(mediaEntity: MediaEntityState) {
+    if (!this.mediaEntity) return;
+    const index = this.remoteWebsocketService.mediaEntities.indexOf(this.mediaEntity);
+    if (index && index > -1) this.remoteWebsocketService.mediaEntities.splice(index, 1);
+    this.cdr.detectChanges();
+  }
 }

src/app/activity-viewer/activity-grid/activity-grid.component.html

@@ -6,7 +6,8 @@
 
 <div class="ui-pages-container">
   <div #uiCollection class="ui-pages-collection" *ngIf="activity?.options?.user_interface?.pages" [style]="{'width': width+'px', 'height': height+'px'}"
-       (mousedown)="mouseDownUIPages($event)" (mousemove)="mouseMoveUIPages($event)" (mouseup)="mouseUpUIPages($event)">
+       (mousedown)="mouseDownUIPages($event)" (mousemove)="mouseMoveUIPages($event)" (mouseup)="mouseUpUIPages($event)"
+        (touchstart)="mouseDownUIPages($event)" (touchmove)="mouseMoveUIPages($event)" (touchend)="mouseUpUIPages($event)">
     <div class="ui-page-item" *ngFor="let page of activity!.options!.user_interface!.pages!">
       <div class="grid-container"
            [style]="{'grid-template-columns': 'auto '.repeat(page.grid.width), 'width': width+'px', 'height': height+'px'}">

src/app/activity-viewer/activity-grid/activity-grid.component.ts

@@ -330,27 +330,34 @@ export class ActivityGridComponent implements AfterViewInit {
     return  {width: (itemWidth*this.width/width), height: (itemHeight!*this.height/height)};
   }
 
-  mouseDownUIPages($event: MouseEvent) {
-    if (!this.currentPage) return;
+  mouseDownUIPages($event: MouseEvent | TouchEvent) {
+    if (!this.currentPage || !this.runMode) return;
+    let x = 0;
+    if ($event instanceof MouseEvent) x = $event.clientX;
+    else if ($event instanceof TouchEvent) x =$event.touches[0].clientX;
+
     const index = this.activity?.options?.user_interface?.pages?.indexOf(this.currentPage);
     if (index == undefined || index == -1) return;
     this.swipeInfo = {
       initialUiContainerPosition: this.width*index,
-      uiClientX: $event.clientX,
+      uiClientX: x,
       mousePressed: true,
       uiContainerPosition: -this.width*index
     }
     $event.preventDefault();
   }
 
-  mouseUpUIPages($event: MouseEvent) {
+  mouseUpUIPages($event: MouseEvent | TouchEvent) {
 
   }
 
-  mouseMoveUIPages($event: MouseEvent) {
-    if (!this.swipeInfo.mousePressed || !this.uiCollection) return;
+  mouseMoveUIPages($event: MouseEvent | TouchEvent) {
+    if (!this.swipeInfo.mousePressed || !this.uiCollection || !this.runMode) return;
     $event.preventDefault();
-    this.swipeInfo.uiContainerPosition = this.swipeInfo.initialUiContainerPosition+(this.swipeInfo.uiClientX - $event.clientX)*2;
+    let x = 0;
+    if ($event instanceof MouseEvent) x = $event.clientX;
+    else if ($event instanceof TouchEvent) x =$event.touches[0].clientX;
+    this.swipeInfo.uiContainerPosition = this.swipeInfo.initialUiContainerPosition+(this.swipeInfo.uiClientX - x)*2;
     this.uiCollection.nativeElement.setAttribute("style", `transform: translate3d(-${this.swipeInfo.uiContainerPosition}px, 0px, 0px`);
     this.cdr.detectChanges();
   }

src/app/activity-viewer/activity-viewer.component.ts

@@ -487,7 +487,26 @@ export class ActivityViewerComponent implements AfterViewInit {
         const index = this.activity?.options?.included_entities?.indexOf(entity);
         if (index && index >= 0)
             this.activity!.options!.included_entities!.splice(index, 1);
-          this.cdr.detectChanges();
+        this.activity!.options?.user_interface?.pages?.forEach(page => {
+          const items = page.items.filter(item =>
+            (item.command && (item.command as any)?.entity_id === entity.entity_id
+              || item.media_player_id && item.media_player_id === entity.entity_id));
+          items.forEach(item => {
+            page.items.splice(page.items.indexOf(item), 1);
+          })
+        });
+        this.activity.options?.button_mapping?.forEach(button => {
+          if (button?.short_press?.entity_id === entity.entity_id) delete button.short_press;
+          if (button?.long_press?.entity_id === entity.entity_id) delete button.long_press;
+          if (button?.double_press?.entity_id === entity.entity_id) delete button.double_press;
+        });
+        ['on', 'off'].forEach(type => {
+          const items = this.activity?.options?.sequences?.[type]?.filter(item => item.command && item.command.entity_id === entity.entity_id);
+          items?.forEach(item => {
+            this.activity?.options?.sequences?.[type]?.splice(this.activity?.options?.sequences?.[type].indexOf(item), 1);
+          })
+        })
+        this.cdr.detectChanges();
       },
       reject: () => {
         if (!this.activity?.options?.included_entities?.find(item => item.entity_id === entity.entity_id))