frontend : add actions work correctly

ETS-TAF · Oct 22, 2023 · 493cce1 · 493cce1
1 parent 189e762
commit 493cce1
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 19 deletions.
diff --git a/frontend/src/app/selenium/test-selenium.component.html b/frontend/src/app/selenium/test-selenium.component.html
@@ -3,7 +3,7 @@
     <div class="modal-dialog modal-dialog-centered modal-xl">
         <div class="modal-content">
         <div class="modal-header">
-            <h5 class="modal-title">Add Test Action</h5>
+            <h5 class="modal-title">New Action</h5>
             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         </div>
         <div class="modal-body">
@@ -24,8 +24,8 @@ <h5 class="modal-title">Add Test Action</h5>
             </div>
         </div>
         <div class="modal-footer">
-            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-            <button type="button" class="btn btn-primary">Add Action</button>
+            <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+            <button type="submit" class="btn btn-primary" (click)="submitAction()">Add Action</button>
         </div>
         </div>
     </div>
@@ -50,28 +50,18 @@ <h4>Case #1</h4>
             </tr>
         </thead>
         <tbody class="table-group-divider">
-            <tr>
-                <td>Mark</td>
-                <td>Otto</td>
-                <td>@mdo</td>
-                <td>@mdo</td>
-                <td>
-                    <button type="button" class="btn btn-danger" style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">
-                    Delete
-                    </button>
-                </td>
-            </tr>
-            <tr>
-                <td>Jacob</td>
-                <td>Thornton</td>
-                <td>@fat</td>
-                <td>@fat</td>
+            <tr *ngFor="let action of actions">
+                <td>{{action.action}}</td>
+                <td>{{action.object}}</td>
+                <td>{{action.input}}</td>
+                <td>{{action.target}}</td>
                 <td>
                     <button type="button" class="btn btn-danger" style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">
                     Delete
                     </button>
                 </td>
             </tr>
+
         </tbody>
     </table><br><br>
 </div>
diff --git a/frontend/src/app/selenium/test-selenium.component.ts b/frontend/src/app/selenium/test-selenium.component.ts
@@ -6,6 +6,16 @@ import { Component } from '@angular/core';
   styleUrls: ['./test-selenium.component.css']
 })
 export class TestSeleniumComponent {
+    counter: number=1;
+    actions: {
+        id: number;
+        action: string;
+        object: string;
+        input: string;
+        target: string;
+    }[] = [];
+
+
     actionChose(): void {
         const action = (document.getElementById('action') as HTMLSelectElement).value;
         const object = document.getElementById('object') as HTMLInputElement;
@@ -28,5 +38,21 @@ export class TestSeleniumComponent {
             object.disabled = false;
         }
     }
+    submitAction(){
+        let action = (document.getElementById('action') as HTMLSelectElement).value;
+        let object = (document.getElementById('object') as HTMLInputElement).value;
+        let input = (document.getElementById('input') as HTMLInputElement).value;
+        let target = (document.getElementById('target') as HTMLInputElement).value;
+        this.addJsonObject({ id: this.counter, action: action, object: object, input: input, target: target, });
+        console.log(this.getJsonObjectById(this.counter));
+        this.counter++;
+    }
+    public addJsonObject(obj: { id: number,action: string,object: string,input: string,target: string }) {
+        this.actions.push(obj);
+    }
+
+    public getJsonObjectById(id: number) {
+        return this.actions.find(obj => obj.id === id);
+    }
 
 }