1 files changed, 114 insertions, 0 deletions
diff --git a/public/src/app/rule-engine/action/action.component.html b/public/src/app/rule-engine/action/action.component.html
new file mode 100644
index 0000000..b41ab82
--- /dev/null
+++ b/public/src/app/rule-engine/action/action.component.html
@@ -0,0 +1,114 @@
+<form #actionFrm="ngForm" class="conatiner" id="{{action.id}}" (mouseover)="changeStyle($event)" (mouseout)="changeStyle($event)">
+  <div>
+    <div class="center-content">
+      <!-- type info -->
+      <div class="action-info" [ngClass]="highlight">
+        {{action.actionType | uppercase}}
+      </div>
+      <!-- from component -->
+      <app-from #from style="width: 100%" [actionType]="action.actionType" (onFromChange)="updateFrom($event)"></app-from>
+      <!-- target component -->
+      <app-target #target style="width: 100%" (onTargetChange)="updateTarget($event)" [nodes]="action.nodes">
+      </app-target>
+    </div>
+
+    <!-- dateFormatter -->
+    <div *ngIf="action.actionType === 'date formatter'" style="display: flex; flex-direction: column; margin: 1em; align-items: flex-end;">
+      <div style="display: flex; margin: 0.5em 0;">
+        <div class="from">
+          <div class="from-conatiner">
+            <div style="display: flex; align-items: center;" class="label">
+              <span class="label" style="padding: 0 5px; width: 100px;">From Format</span>
+              <input class="input-text" ngModel required name="fromFormat" [(ngModel)]="action.dateFormatter.fromFormat" type="text">
+            </div>
+          </div>
+        </div>
+        <div class="from">
+          <div class="from-conatiner">
+            <div style="display: flex; align-items: center;" class="label">
+              <span class="label" style="padding: 0 5px; width: 100px;">To Format</span>
+              <input class="input-text" ngModel required name="toFormat" [(ngModel)]="action.dateFormatter.toFormat" type="text">
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div style="display: flex; margin: 0.5em 0;">
+        <div class="from">
+          <div class="from-conatiner">
+            <div style="display: flex; align-items: center;" class="label">
+              <span class="label" style="padding: 0 5px; width: 100px;">From Time-zone</span>
+              <input class="input-text" ngModel required name="fromTimezone" [(ngModel)]="action.dateFormatter.fromTimezone" type="text">
+            </div>
+          </div>
+        </div>
+        <div class="from">
+          <div class="from-conatiner">
+            <div style="display: flex; align-items: center;" class="label">
+              <span class="label" style="padding: 0 5px; width: 100px;">To Time-zone</span>
+              <input class="input-text" ngModel required name="toTimezone" [(ngModel)]="action.dateFormatter.toTimezone" type="text">
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Map -->
+    <div *ngIf="action.actionType === 'map'" class="map-container">
+      <!-- Default checkbox and input -->
+      <div class="default" style="display: flex; align-items: center">
+        <div class="pretty p-svg">
+          <input type="checkbox" name="defaultCheckbox" data-tests-id="defaultCheckbox" [checked]="action.map.haveDefault" (change)="changeCheckbox()"
+          />
+          <div class="state">
+            <!-- svg path -->
+            <svg class="svg svg-icon" viewBox="0 0 20 20">
+              <path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"
+                style="stroke: #009fdb; fill:#009fdb;"></path>
+            </svg>
+            <label>Default</label>
+          </div>
+        </div>
+        <div *ngIf="action.map.haveDefault" class="input-wrapper">
+          <input type="text" ngModel required name="defaultInput" data-tests-id="defaultInput" [(ngModel)]="action.map.default" class="input">
+        </div>
+      </div>
+
+      <table style="width: 100%; margin-bottom: 1rem;">
+        <thead style="background: #D2D2D2;">
+          <tr style="height: 30px;">
+            <th style="padding-left: 10px;">Key</th>
+            <th style="padding-left: 10px;">value</th>
+          </tr>
+        </thead>
+        <tbody ngModelGroup="mapKeyValue" #mapKeyValue="ngModelGroup">
+          <tr *ngFor="let item of action.map.values; let index = index;" (mouseleave)="hoveredIndex=-1" (mouseover)="hoveredIndex=index">
+            <th style="height: 30px; border: 1px solid #F3F3F3;">
+              <input [(ngModel)]="item.key" ngModel required name="mapValue[{{index}}]" data-tests-id="key" type="text" style="width:97%; height: 100%;border: none; padding:0 5px;">
+            </th>
+            <th style="height: 30px; border: 1px solid #F3F3F3;">
+              <input [(ngModel)]="item.value" ngModel required name="mapValue[{{index}}]" data-tests-id="value" type="text" style="width:97%; height: 100%;border: none; padding:0 5px;">
+            </th>
+            <th style="height: 30px; display: flex; align-items: baseline;">
+              <button mat-icon-button [ngStyle]="hoveredIndex === index ? {'opacity':'1'} : {'opacity':'0'}" class="button-remove" (click)="removeMapRow(index)"
+                *ngIf="action.map.values.length > 1" style="height: 24px; width: 24px; display:flex; box-shadow: none;">
+                <mat-icon class="md-24">delete</mat-icon>
+              </button>
+            </th>
+          </tr>
+        </tbody>
+      </table>
+
+
+      <div style="display:flex; justify-content: space-between;">
+        <div style="display: flex; align-items: center;">
+          <button mat-mini-fab color="primary" (click)="addMapRow()" style="height: 24px; width: 24px; display:flex; box-shadow: none;">
+            <mat-icon>add</mat-icon>
+          </button>
+          <span style="color: #009FDB; display: flex; justify-content: center; padding-left: 6px">Add Row</span>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</form>