Merge pull request #9 from leonidus96/master

modifiche grafiche

src/app/dashboard/dashboard.component.css

@@ -14,9 +14,31 @@
   align-items: center;
   background-color: transparent;
   width: 100%;
-  height: 100%;
+  height: calc(100% - 30px);
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
   box-sizing: border-box;
 
 }
 
+.gridster-item-container{
+  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
+  box-sizing: content-box;
+  border-radius: 10px;
+}
+
+.widget-title{
+  width:100%;
+  height:30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  container-type: inline-size;
+  background-color: rgb(119,161,215);
+}
+
+.widget-title-text{
+  color:white;
+  font-weight: bold;
+  padding:5px;
+}
+

src/app/dashboard/dashboard.component.html

@@ -1,6 +1,9 @@
 <div  class="plugins-grid-container">
   <gridster [options]="options" style="background-color: rgb(242,242,242)">
-    <gridster-item style="box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);box-sizing: content-box;" *ngFor="let plugin of application.enabledPlugins$ | async" [item]="{x:plugin.x,y:plugin.y,cols:plugin.cols,rows:plugin.rows,id:plugin.id}">
+    <gridster-item class="gridster-item-container" *ngFor="let plugin of application.enabledPlugins$ | async" [item]="{x:plugin.x,y:plugin.y,cols:plugin.cols,rows:plugin.rows,id:plugin.id}">
+      <div class="widget-title">
+        <p class="widget-title-text">{{plugin.name}}</p>
+      </div>
       <mat-card class="gridster-item-content drag-handler" >
         <ng-container *ngComponentOutlet="plugin.component; inputs:{application:application,plugin:plugin,width:itemsSize[plugin.id]?.width,height:itemsSize[plugin.id]?.height}"></ng-container>
       </mat-card>

src/app/plugins/actions-manager/actions-manager.component.html

@@ -1,14 +1,17 @@
 <ng-container *ngIf="!isLoading;else elseBlock">
-  <div style="width:100%;height:100%;display:flex;flex-direction: column">
+  <div style="width:100%;height:100%;display:flex;flex-direction: column;padding:5px;box-sizing: border-box">
     <mat-form-field subscriptSizing="dynamic" appearance="outline" style="width:100%;background-color: white">
-      <input matInput [(ngModel)]="search" placeholder="Search action..." >
+      <input matInput [(ngModel)]="search" placeholder="Search action...">
       <span matSuffix><mat-icon style="margin-right:10px">search</mat-icon></span>
     </mat-form-field>
     <div class="widget-container">
-      <div *ngIf="actions.length !== 0; else emptyActionsBlock" style="display:flex;flex-direction: column;align-items: flex-start;justify-content: center;">
+      <div *ngIf="actions.length !== 0; else emptyActionsBlock"
+           style="display:flex;flex-direction: column;align-items: flex-start;justify-content: center;">
         <ng-container *ngFor="let action of filteredActions">
           <button mat-button class="action-button" (click)="onActionClick(action)"
-                  [style.background-color]="nodeColors[action.actionState]">
+                  [style.background-color]="nodeColors[action.actionState]"
+                  [style.opacity]="action.actionState == ActionState.INACTIVE ? 0.5 : 1"
+                  [disabled]="action.actionState !== ActionState.ACTIVE">
             <p class="action-text">{{action.actionID}}</p>
           </button>
         </ng-container>
@@ -24,9 +27,10 @@
 </ng-template>
 
 <ng-template #emptyActionsBlock>
-  <div  style="display:flex;height:100%;width:100%;align-items: center;justify-content: center;">
+  <div style="display:flex;height:100%;width:100%;align-items: center;justify-content: center;">
     There are no action for this application.
   </div>
 </ng-template>
 
-<app-widget-error-dialog [style.display]="showErrorDialog ? 'block' : 'none'" [messageError]="errorMessage" (buttonClick)="closeErrorDialog()" />
+<app-widget-error-dialog [style.display]="showErrorDialog ? 'block' : 'none'" [messageError]="errorMessage"
+                         (buttonClick)="closeErrorDialog()"/>

src/app/plugins/actions-manager/actions-manager.component.ts

@@ -16,11 +16,12 @@ export class ActionsManagerComponent extends WidgetBaseComponent implements OnIn
   errorMessage: string;
 
   nodeColors = {
-    INACTIVE: 'gray',
+    INACTIVE: 'white',
     ACTIVE: 'white',
-    RUNNING: 'yellow',
+    RUNNING: 'greenyellow',
     FAILED: 'red',
-    DONE: 'green'
+    DONE: 'green',
+    TIMEOUT: 'yellow'
   }
 
   get filteredActions(): Action[] {
@@ -40,7 +41,20 @@ export class ActionsManagerComponent extends WidgetBaseComponent implements OnIn
           const newActions: Action[] = filteredActions.map(action => {
             return {actionID: action, actionState: ActionState.ACTIVE}
           })
-          this.actions = newActions;
+          this.actions = newActions.sort((a, b) => {
+              const nameA = a.actionID.toUpperCase();
+              const nameB = b.actionID.toUpperCase();
+              if (nameA < nameB) {
+                return -1;
+              }
+              if (nameA > nameB) {
+                return 1;
+              }
+
+              // sono uguali
+              return 0;
+          });
+
           this.isLoading = false;
           //console.log(this.actions)
         },
@@ -93,7 +107,17 @@ export class ActionsManagerComponent extends WidgetBaseComponent implements OnIn
           }, 2000)
         }
 
-        this.checkAsyncRequestStatus(reqID, undefined, onRunning, onDone, onFailed)
+        const onTimeout = () => {
+
+          this.updateActionState(selectedAction, ActionState.TIMEOUT)
+          setTimeout(() => {
+            this.actions.forEach(action => {
+              this.updateActionState(action, ActionState.ACTIVE)
+            })
+          }, 2000)
+        }
+
+        this.checkAsyncRequestStatus(reqID, undefined, onRunning, onDone, onFailed,onTimeout)
 
       })
     }
@@ -118,6 +142,7 @@ export class ActionsManagerComponent extends WidgetBaseComponent implements OnIn
     this.showErrorDialog = false;
   }
 
+  protected readonly ActionState = ActionState;
 }
 
 interface Action {
@@ -130,5 +155,6 @@ enum ActionState {
   INACTIVE = "INACTIVE",
   RUNNING = "RUNNING",
   DONE = "DONE",
-  FAILED = "FAILED"
+  FAILED = "FAILED",
+  TIMEOUT = "TIMEOUT"
 }

src/app/plugins/fsm/fsm.component.css

@@ -29,7 +29,7 @@
 
 .edge {
   stroke: black;
-  stroke-width: 2;
+  stroke-width: 1;
 }
 
 .arrow {

src/app/plugins/fsm/fsm.component.html

@@ -3,23 +3,23 @@
 
   <ng-container *defsTemplate>
     <svg>
-      <marker id="arrow" viewBox="0 -5 10 10" refX="9" refY="0" markerWidth="6" markerHeight="6" orient="auto">
+      <marker id="arrow" viewBox="0 -5 10 10" refX="8" refY="0" markerWidth="6" markerHeight="6" orient="auto">
         <path d="M0,-5L10,0L0,5 z"></path>
       </marker>
     </svg>
   </ng-container>
 
   <ng-container *nodeTemplate="let node; nodes: nodes">
     <svg (click)="onNodeClick(node)" overflow="visible" [matTooltip]="node.data.description" [matTooltipShowDelay]="1000">
-      <rect rx="10" ry="10" [attr.width]="node._width" [attr.height]="node._height" [style.fill]="nodeColors[node.data.state]" stroke="black" stroke-width="2"></rect>
+      <rect rx="10" ry="10" [attr.width]="node._width" [attr.height]="node._height" [style.fill]="nodeColors[node.data.state]" [attr.opacity]="node.data.state == NodeStatus.INACTIVE ? 0.3 : 1" stroke="black" stroke-width="2"></rect>
       <!-- Centra il testo sia orizzontalmente che verticalmente -->
-      <text text-anchor="middle" dominant-baseline="central" [attr.x]="node._width / 2" [attr.y]="node._height / 2">{{ node.data.name }}</text>
+      <text text-anchor="middle" dominant-baseline="central" [attr.x]="node._width / 2" [attr.y]="node._height / 2" [attr.opacity]="node.data.state == NodeStatus.INACTIVE ? 0.3 : 1" >{{ node.data.name }}</text>
     </svg>
   </ng-container>
 
   <ng-container *edgeTemplate="let edge; edges: edges">
     <svg overflow="visible">
-      <g class="edge">
+      <g class="edge" [style.opacity]="isEdgeActive(edge) ? 1 : 0.3">
         <path
           class="edge__line"
           [attr.d]="edge.pathDefinition"

src/app/plugins/fsm/fsm.component.ts

@@ -37,12 +37,13 @@ export class FsmComponent extends WidgetBaseComponent implements OnInit {
   }
 
   nodeColors = {
-    INACTIVE: 'gray',
+    INACTIVE: 'white',
     ACTIVE: 'white',
-    RUNNING: 'yellow',
+    RUNNING: 'greenyellow',
     FAILED: 'red',
     CURRENT: 'white',
-    DONE: 'green'
+    DONE: 'green',
+    TIMEOUT: 'yellow'
   }
 
   isLoading = true
@@ -154,6 +155,12 @@ export class FsmComponent extends WidgetBaseComponent implements OnInit {
 
   }
 
+  isEdgeActive(edge:InputEdge){
+    const targetNode = this.getNodeByID(edge.targetId)
+    const sourceNode = this.getNodeByID(edge.sourceId)
+    return sourceNode.data.state !== NodeStatus.INACTIVE && targetNode.data.state === NodeStatus.ACTIVE
+  }
+
   onNodeClick(selectedNode: InputNode<nodeData>) {
     if(selectedNode.data.state === NodeStatus.ACTIVE){
       this.runStep(selectedNode)
@@ -211,10 +218,7 @@ export class FsmComponent extends WidgetBaseComponent implements OnInit {
 
           this.updateNodeState(selectedNode,NodeStatus.DONE)
           const reachableNodes = this.findReachableNodes(selectedNode.id)
-          //console.log(`Reachable nodes from ${selectedNode.id}:`)
-          //console.log(reachableNodes)
           for(let reachableNode of reachableNodes){
-            //console.log(reachableNode.id, " ATTIVATO")
             this.updateNodeState(reachableNode,NodeStatus.ACTIVE)
           }
           this.graphy.setFocusToNode(selectedNode.id)
@@ -223,10 +227,64 @@ export class FsmComponent extends WidgetBaseComponent implements OnInit {
       }
 
       const onFailed = () => {
-        this.updateNodeState(selectedNode,NodeStatus.FAILED)
+
+        //se è un nodo collegato ad "init" invia il trigger di restart
+        const terminalNode = this.terminalNodes.find(node => node.nodeID === selectedNode.id)
+        if(terminalNode){
+          this.fsmRunStep(terminalNode.restartTrigger).subscribe(reqID => {
+
+            const onRestartDone = () => {
+              this.updateNodeState(selectedNode,NodeStatus.FAILED)
+              const reachableNodes = this.findReachableNodes(selectedNode.id)
+              for(let reachableNode of reachableNodes){
+                this.updateNodeState(reachableNode,NodeStatus.ACTIVE)
+              }
+            }
+            this.checkAsyncRequestStatus(reqID,undefined,undefined,onRestartDone)
+          })
+
+        } else {
+
+          this.updateNodeState(selectedNode,NodeStatus.FAILED)
+          const reachableNodes = this.findReachableNodes(selectedNode.id)
+          for(let reachableNode of reachableNodes){
+            this.updateNodeState(reachableNode,NodeStatus.ACTIVE)
+          }
+          this.graphy.setFocusToNode(selectedNode.id)
+        }
+
+      }
+
+      const onTimeout = () => {
+
+        //se è un nodo collegato ad "init" invia il trigger di restart
+        const terminalNode = this.terminalNodes.find(node => node.nodeID === selectedNode.id)
+        if(terminalNode){
+          this.fsmRunStep(terminalNode.restartTrigger).subscribe(reqID => {
+
+            const onRestartDone = () => {
+              this.updateNodeState(selectedNode,NodeStatus.TIMEOUT)
+              const reachableNodes = this.findReachableNodes(selectedNode.id)
+              for(let reachableNode of reachableNodes){
+                this.updateNodeState(reachableNode,NodeStatus.ACTIVE)
+              }
+            }
+            this.checkAsyncRequestStatus(reqID,undefined,undefined,onRestartDone)
+          })
+
+        } else {
+
+          this.updateNodeState(selectedNode,NodeStatus.TIMEOUT)
+          const reachableNodes = this.findReachableNodes(selectedNode.id)
+          for(let reachableNode of reachableNodes){
+            this.updateNodeState(reachableNode,NodeStatus.ACTIVE)
+          }
+          this.graphy.setFocusToNode(selectedNode.id)
+        }
+
       }
 
-      this.checkAsyncRequestStatus(reqID,undefined,onRunning,onDone,onFailed)
+      this.checkAsyncRequestStatus(reqID,undefined,onRunning,onDone,onFailed,onTimeout)
 
     })
 

src/app/plugins/robot-speech/robot-speech.component.css

@@ -24,7 +24,8 @@
 
 .input-section{
   display: flex;
-  width:100%;
+  width:calc(100% - 10px);
+  margin-bottom: 5px;
 }
 
 .widget-container{

src/app/plugins/robot-speech/robot-speech.component.html

@@ -6,7 +6,7 @@
   </div>
   <div class="input-section">
     <mat-form-field subscriptSizing="dynamic" appearance="outline" style="flex:1;background-color: white">
-      <input matInput #messageInput [(ngModel)]="newMessage" (keydown.enter)="onEnterPress()" placeholder="Premi invio" [disabled]="inputDisabled" >
+      <input matInput #messageInput [(ngModel)]="newMessage" (keydown.enter)="onEnterPress()" placeholder="Type something..." [disabled]="inputDisabled" >
     </mat-form-field>
     <button mat-button style="height:100%;background-color: rgb(119,161,215)" (click)="sendMessage()">
       <mat-icon>send</mat-icon>

src/app/plugins/services-manager/services-manager.component.css

@@ -23,6 +23,13 @@
   overflow:hidden
 }
 
+.action-button-form{
+  padding:30px;
+  border:black solid 2px;
+  margin-bottom: 10px;
+  border-radius: 3px;
+}
+
 
 .action-button{
   padding:30px;
@@ -40,6 +47,13 @@
     padding:5cqw
   }
 
+  .action-button-form{
+    padding-bottom:4cqw;
+    padding-top:4cqw;
+    padding-left: 4cqw;
+    padding-right: 4cqw;
+  }
+
 }
 
 @container (max-width: 199px) {
@@ -51,4 +65,11 @@
     padding:5cqw
   }
 
+  .action-button-form{
+    padding-bottom:4cqw;
+    padding-top:4cqw;
+    padding-left: 3.5cqw;
+    padding-right: 3.5cqw;
+  }
+
 }

src/app/plugins/services-manager/services-manager.component.html

@@ -1,6 +1,6 @@
 <ng-container *ngIf="!isLoading;else elseBlock">
   <div style="width:100%;height:100%;display:flex;flex-direction: column">
-    <mat-form-field subscriptSizing="dynamic" appearance="outline" style="width:100%;background-color: white">
+    <mat-form-field subscriptSizing="dynamic" appearance="outline" style="width:100%;background-color: white;padding:5px;box-sizing: border-box">
       <input matInput [(ngModel)]="search" placeholder="Search service..." >
       <span matSuffix><mat-icon style="margin-right:10px">search</mat-icon></span>
     </mat-form-field>
@@ -10,14 +10,16 @@
 
           <div [ngSwitch]="hasArguments(service)">
             <button *ngSwitchCase=false mat-button class="action-button" (click)="onServiceClick(service)"
-                    [style.background-color]="nodeColors[service.state]">
+                    [style.background-color]="nodeColors[service.state]"
+                    [style.opacity]="service.state == ServiceState.INACTIVE ? 0.5 : 1"
+                    [disabled]="service.state !== ServiceState.ACTIVE">
               <p class="action-text">{{service.name}}</p>
             </button>
 
 
-              <mat-expansion-panel *ngSwitchCase=true class="action-button" [style.background-color]="nodeColors[service.state]" style="box-shadow: 0px 0px 0px 0px;padding: 0px">
+              <mat-expansion-panel [disabled]="service.state === ServiceState.INACTIVE" *ngSwitchCase=true class="action-button-form" [style.opacity]="service.state == ServiceState.INACTIVE ? 0.5 : 1" [style.background-color]="nodeColors[service.state]" style="box-shadow: 0px 0px 0px 0px;">
                 <!-- #enddocregion hide-toggle -->
-                <mat-expansion-panel-header class="action-text"> {{service.name}}   </mat-expansion-panel-header>
+                <mat-expansion-panel-header class="action-text"> {{service.name}}</mat-expansion-panel-header>
 
                 <form style="padding-top:5px;padding-bottom:5px">
                   <div *ngFor="let arg of Object.keys(service.argsTemplate)">