Skip to content

Commit

Permalink
frontend : version final with JSON
Browse files Browse the repository at this point in the history
  • Loading branch information
@gueddimo29
gueddimo29 committed Oct 22, 2023
1 parent 493cce1 commit ff45232
Show file tree
Hide file tree
Showing 2 changed files with 112 additions and 43 deletions.
86 changes: 56 additions & 30 deletions frontend/src/app/selenium/test-selenium.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
<br><br>
<div class="modal fade" tabindex="-1" id="addCase" aria-labelledby="Add new Case" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
<div class="modal fade" tabindex="-1" id="addAction" aria-labelledby="Add new Action" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
<div class="modal-dialog modal-dialog-centered modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">New Action</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form>
<div class="modal-body">
<div class="input-group mb-3">
<select class="form-select" id="action" (change)="actionChose();" required>
Expand All @@ -24,44 +25,69 @@ <h5 class="modal-title">New Action</h5>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" (click)="submitAction()">Add Action</button>
<button class="btn btn-secondary" data-bs-dismiss="modal" id="close">Close</button>
<input type="submit" class="btn btn-primary" (click)="submitAction()" value="Add Action"/>
</div>
</form>
</div>
</div>
</div>
<div class="modal fade" tabindex="-1" id="addCase" aria-labelledby="Add new Case" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">New Case</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form>
<div class="modal-body">
<input type="text" class="form-control" placeholder="Case Name" id="caseName"/>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-bs-dismiss="modal" id="close2">Close</button>
<input type="submit" class="btn btn-primary" (click)="submitCase()" value="Add Case"/>
</div>
</form>
</div>
</div>
</div>
<div class="container">
<div class="btn-group" role="group" aria-label="Basic outlined example">
<button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#addCase">
Add New Case
</button>
<button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#addAction" id="addActionButton" disabled>
Add New Action
</button>
<button type="button" class="btn btn-outline-primary">Add New Case</button>
<button type="button" class="btn btn-success">Run</button>
</div><br><br>
<h4>Case #1</h4>
<table class="table table-hover">
<thead>
<tr>
<th scope="col">Action</th>
<th scope="col">Object</th>
<th scope="col">Input</th>
<th scope="col">Target</th>
<th scope="col" style="width: 70px !important;"></th>
</tr>
</thead>
<tbody class="table-group-divider">
<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 class="container" *ngFor="let case of cases">

<h4>Case #{{case.id}} : {{case.caseName}}</h4>
<table class="table table-hover">
<thead>
<tr>
<th scope="col">Action</th>
<th scope="col">Object</th>
<th scope="col">Input</th>
<th scope="col">Target</th>
<th scope="col" style="width: 70px !important;"></th>
</tr>
</thead>
<tbody class="table-group-divider">
<tr *ngFor="let action of case.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;" (click)="deleteAction(case.id,action.id)">
Delete
</button>
</td>
</tr>

</tbody>
</table><br><br>
</div>
</div>
69 changes: 56 additions & 13 deletions frontend/src/app/selenium/test-selenium.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,21 @@ import { Component } from '@angular/core';
styleUrls: ['./test-selenium.component.css']
})
export class TestSeleniumComponent {
counter: number=1;
actions: {
counterAction: number=1;
counterCase: number=0;
cases : {
id: number;
action: string;
object: string;
input: string;
target: string;
caseName: string;
actions: {
id: number;
action: string;
object: string;
input: string;
target: string;
}[] ;
}[] = [];



actionChose(): void {
const action = (document.getElementById('action') as HTMLSelectElement).value;
Expand All @@ -38,21 +44,58 @@ export class TestSeleniumComponent {
object.disabled = false;
}
}
submitCase(){
this.counterCase++;
let caseName = (document.getElementById('caseName') as HTMLSelectElement).value;
this.addCase({ id: this.counterCase, caseName: caseName, actions: [] });
(document.getElementById('caseName') as HTMLInputElement).value = '';
(document.getElementById('close2') as HTMLButtonElement).click();
this.counterAction=1;
const addActionButton = document.getElementById('addActionButton') as HTMLInputElement;
addActionButton.disabled = false;
}


public getCase(id: number) {
return this.cases.find(obj => obj.id === id);
}
deleteCase(id: number) {
this.cases = this.cases.filter(item => item.id !== id);
}

public addCase(obj: { id: number, caseName: string, actions: { id: number, action: string, object: string, input: string, target: string }[] }) {
this.cases.push(obj);
}

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++;
this.addAction({ id: this.counterAction, action: action, object: object, input: input, target: target, });
console.log(this.getAction(this.counterAction));
this.counterAction++;

// Clear the input fields
(document.getElementById('object') as HTMLInputElement).value = '';
(document.getElementById('input') as HTMLInputElement).value = '';
(document.getElementById('target') as HTMLInputElement).value = '';
(document.getElementById('close') as HTMLButtonElement).click();
}
public addJsonObject(obj: { id: number,action: string,object: string,input: string,target: string }) {
this.actions.push(obj);
public addAction(obj: { id: number,action: string,object: string,input: string,target: string }) {
this.getCase(this.counterCase)?.actions.push(obj);
}

public getJsonObjectById(id: number) {
return this.actions.find(obj => obj.id === id);
public getAction(id: number) {
return this.getCase(this.counterCase)?.actions.find(obj => obj.id === id);
}
deleteAction(caseId: number,actionId:number) {
const currentCase = this.getCase(caseId);

if (currentCase && currentCase.actions) {
currentCase.actions = currentCase.actions.filter(item => item.id !== actionId);
}
}


}

0 comments on commit ff45232

Please sign in to comment.