diff --git a/src/main/resources/static/js/APIScenario.js b/src/main/resources/static/js/APIScenario.js index abf7ddc..0bbb4df 100644 --- a/src/main/resources/static/js/APIScenario.js +++ b/src/main/resources/static/js/APIScenario.js @@ -2,11 +2,13 @@ require.config({paths: {'vs': '/plugins/vs'}}); class APIScenario { - constructor() { + constructor(apiTester) { this.scenarioList = []; this.scenarioTab = []; this.currentIndex = -1; this.currentScenario = null; + this.apiTester = apiTester; + this.dataflow = {drawflow: {Home: {data: {} }}}; } init() { @@ -28,18 +30,14 @@ class APIScenario { this.editor.reroute_fix_curvature = true; this.editor.force_first_input = true; this.editor.start(); - let start = ` -
-
Start
-
- `; + this.editor.on('connectionCreated', (connection) => { console.log('Connection created'); console.log(connection); }); this.showOutput = true; - this.editor.addNode('Start', 0, 1, 100, 100, 'start', {}, start); + } @@ -51,6 +49,11 @@ class APIScenario { contentType: 'application/json', success: function (data) { me.scenarioList = data; + data.forEach((scenario) => { + me.dataflow.drawflow[scenario.id] = {data : JSON.parse(scenario.scenario)}; + }); + console.log(JSON.stringify(me.dataflow)); + me.editor.import(me.dataflow); }, error: function (response, textStatus, errorThrown) { me.hideLoadingOverlay(); @@ -71,22 +74,26 @@ class APIScenario { openScenario(event) { event.preventDefault(); let scenarioId = $(event.target).closest('li').data('id'); - let scenario = this.getScenario(scenarioId); - this.openTab(scenario); + var all = document.querySelectorAll(".api-scenario-list ul li"); + for (var i = 0; i < all.length; i++) { + all[i].classList.remove('selected'); + } + event.target.classList.add('selected'); + this.editor.changeModule(scenarioId); } openTab(scenario) { console.log('openTab'); console.log(scenario); - this.currentScenario = scenario; - let openTab = this.scenarioTab.find((tab) => tab.id === scenario.id); - if (openTab) { - this.currentIndex = this.scenarioTab.indexOf(openTab); - //$(`#api_scenario_tab_${id}`).tab('show'); // API request 탭 활성화 - } else { - this.scenarioTab.push(scenario); - this.renderScenarioTab(scenario); - } + // this.currentScenario = scenario; + // let openTab = this.scenarioTab.find((tab) => tab.id === scenario.id); + // if (openTab) { + // this.currentIndex = this.scenarioTab.indexOf(openTab); + // //$(`#api_scenario_tab_${id}`).tab('show'); // API request 탭 활성화 + // } else { + // this.scenarioTab.push(scenario); + // this.renderScenarioTab(scenario); + // } } renderScenarioTab(scenario) { @@ -196,8 +203,9 @@ class APIScenario { } runScript() { + console.log(this.editor.export().drawflow); let graph = APIScenarioExecutor.extractGraphFromStart(this.editor.export().drawflow.Home.data); - this.executor = new APIScenarioExecutor(graph); + this.executor = new APIScenarioExecutor(graph, this.apiTester); this.outputEditor.setValue(JSON.stringify(graph, null, 4)); } @@ -228,6 +236,14 @@ class APIScenario { stopScenario() { } + addStart(){ + let start = ` +
+
Start
+
+ `; + this.editor.addNode('Start', 0, 1, 100, 100, 'start', {}, start); + } bindEvents() { const events = [ @@ -241,6 +257,7 @@ class APIScenario { {type: 'click', selector: '.stop_scenario', action: this.stopScenario.bind(this)}, {type: 'click', selector: '#new_scenario', action: this.showNewScenarioModal.bind(this)}, {type: 'click', selector: '.save_scenario', action: this.saveScenario.bind(this)}, + {type: 'click', selector: '.add_start', action: this.addStart.bind(this)}, ]; for (let event of events) { diff --git a/src/main/resources/static/js/APIScenarioExecutor.js b/src/main/resources/static/js/APIScenarioExecutor.js index b0902b9..37f2087 100644 --- a/src/main/resources/static/js/APIScenarioExecutor.js +++ b/src/main/resources/static/js/APIScenarioExecutor.js @@ -1,8 +1,9 @@ class APIScenarioExecutor { - constructor(graph) { + constructor(graph, apiTester) { this.graph = graph; // The graph data this.currentNodeId = this.findStartNodeId(); // Initialize at the 'start' node this.apiClient = new APIClient(); + this.apiTester = apiTester; this.visitedNodes = new Set(); // Keep track of visited nodes } @@ -19,7 +20,7 @@ class APIScenarioExecutor { // Method to execute the current node's API request if it's an 'api' node executeCurrentNode() { console.log(this.currentNodeId) - if(!this.currentNodeId) { + if (!this.currentNodeId) { console.log('No current node to execute.'); return; } @@ -27,7 +28,19 @@ class APIScenarioExecutor { const currentNode = this.graph[this.currentNodeId]; if (currentNode && currentNode.class === 'api') { // get API model with currentNode.id - //this.apiClient.sendAPIRequest(currentNode); + let model = this.apiTester.getApiRequestModel(currentNode.id); + this.apiClient.sendAPIRequest(model) + .then(response => { + console.log(response); + }) + .catch(error => { + console.log(error.name) + if (error.name === 'AbortError') { + console.log('Fetch aborted'); + } else { + console.log('error3') + } + }); console.log(`Executing API request for node: ${currentNode.id} - ${currentNode.name}`); } else { console.log('Current node is not an API node or does not exist.'); diff --git a/src/main/resources/static/js/APITester.js b/src/main/resources/static/js/APITester.js index 993d3df..b5a5db8 100644 --- a/src/main/resources/static/js/APITester.js +++ b/src/main/resources/static/js/APITester.js @@ -438,6 +438,19 @@ class APITester { $('#confirm_delete_modal').modal('show'); } + getApiRequestModel(apiId){ + let foundApi = null; + this.collections.forEach(function (collection) { + collection.apis.forEach(function (api) { + if (api.id === apiId) { + foundApi = api; + } + }); + }); + + return foundApi; + } + showCollectionEditModal(event) { const me = this; const collectionId = $(event.currentTarget).closest('button').data('collection'); diff --git a/src/main/resources/templates/layout/api_tester_layout.html b/src/main/resources/templates/layout/api_tester_layout.html index 3a7789a..65e8603 100644 --- a/src/main/resources/templates/layout/api_tester_layout.html +++ b/src/main/resources/templates/layout/api_tester_layout.html @@ -18,15 +18,48 @@ -
- - +
+
+ + + + + +
+
+
+
+ +
+
+
+ +
+
+ -
-
- + + +
diff --git a/src/main/resources/templates/page/tester/apiCollection.html b/src/main/resources/templates/page/tester/apiCollection.html index b80c8ea..073ac7c 100644 --- a/src/main/resources/templates/page/tester/apiCollection.html +++ b/src/main/resources/templates/page/tester/apiCollection.html @@ -6,15 +6,31 @@ -