시나리오 탭 처리

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 = `
-            <div>
-                <div><i class="fas fa-play"></i> Start </div>
-            </div>
-        `;
+
         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 = `
+            <div>
+                <div><i class="fas fa-play"></i> Start </div>
+            </div>
+        `;
+        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) {

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.');

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');