load tester beta
This commit is contained in:
현성필
+321
-321
@@ -1,368 +1,367 @@
|
||||
// require.config({paths: {'vs': '/plugins/vs'}});
|
||||
import * as monaco from 'monaco-editor';
|
||||
import APIScenarioExecutor from "./APIScenarioExecutor";
|
||||
import Drawflow from "drawflow";
|
||||
import APIScenarioExecutor from './APIScenarioExecutor';
|
||||
import Drawflow from 'drawflow';
|
||||
|
||||
class APIScenario {
|
||||
|
||||
constructor(apiTester, contextPath) {
|
||||
this.scenarioList = [];
|
||||
this.currentScenario = null;
|
||||
this.apiTester = apiTester;
|
||||
this.contextPath = contextPath || '/';
|
||||
}
|
||||
constructor(apiTester, contextPath) {
|
||||
this.scenarioList = [];
|
||||
this.currentScenario = null;
|
||||
this.apiTester = apiTester;
|
||||
this.contextPath = contextPath || '/';
|
||||
}
|
||||
|
||||
getAPIScenarioListURL() {
|
||||
return this.contextPath + 'mgmt/api_scenario/list.do';
|
||||
}
|
||||
getAPIScenarioListURL() {
|
||||
return this.contextPath + 'mgmt/api_scenario/list.do';
|
||||
}
|
||||
|
||||
getAPIScenarioCreateURL() {
|
||||
return this.contextPath + 'mgmt/api_scenario/create.do';
|
||||
}
|
||||
getAPIScenarioCreateURL() {
|
||||
return this.contextPath + 'mgmt/api_scenario/create.do';
|
||||
}
|
||||
|
||||
getAPIScenarioUpdateURL() {
|
||||
return this.contextPath + 'mgmt/api_scenario/update.do';
|
||||
}
|
||||
getAPIScenarioUpdateURL() {
|
||||
return this.contextPath + 'mgmt/api_scenario/update.do';
|
||||
}
|
||||
|
||||
getAPIScenarioDeleteURL() {
|
||||
return this.contextPath + 'mgmt/api_scenario/delete.do';
|
||||
}
|
||||
getAPIScenarioDeleteURL() {
|
||||
return this.contextPath + 'mgmt/api_scenario/delete.do';
|
||||
}
|
||||
|
||||
init() {
|
||||
this.loadScenarioList();
|
||||
this.outputEditor = monaco.editor.create(document.getElementById('output'), {
|
||||
value: '',
|
||||
automaticLayout: true
|
||||
});
|
||||
this.bindEvents();
|
||||
init() {
|
||||
this.loadScenarioList();
|
||||
this.outputEditor = monaco.editor.create(document.getElementById('output'), {
|
||||
value: '',
|
||||
automaticLayout: true
|
||||
});
|
||||
this.bindEvents();
|
||||
|
||||
let id = document.getElementById('drawflow');
|
||||
this.editor = new Drawflow(id);
|
||||
this.editor.reroute = true;
|
||||
this.editor.reroute_fix_curvature = true;
|
||||
this.editor.force_first_input = true;
|
||||
this.editor.start();
|
||||
// this.editor.on('contextmenu', (event) => {
|
||||
// let node = this.editor.getNodeFromId(event.target.id);
|
||||
// })
|
||||
let id = document.getElementById('drawflow');
|
||||
this.editor = new Drawflow(id);
|
||||
this.editor.reroute = true;
|
||||
this.editor.reroute_fix_curvature = true;
|
||||
this.editor.force_first_input = true;
|
||||
this.editor.start();
|
||||
// this.editor.on('contextmenu', (event) => {
|
||||
// let node = this.editor.getNodeFromId(event.target.id);
|
||||
// })
|
||||
|
||||
this.showOutput = true;
|
||||
}
|
||||
this.showOutput = true;
|
||||
}
|
||||
|
||||
loadScenarioList(callback) {
|
||||
const me = this;
|
||||
this.currentAjaxRequest = $.ajax({
|
||||
url: this.getAPIScenarioListURL(),
|
||||
type: 'GET',
|
||||
contentType: 'application/json',
|
||||
success: function (data) {
|
||||
me.scenarioList = data;
|
||||
let drawflowData = {drawflow: {Home: {data: {}}}};
|
||||
data.forEach((scenario) => {
|
||||
let scenarioData = null;
|
||||
try {
|
||||
scenarioData = JSON.parse(scenario.scenario)
|
||||
} catch (e) {
|
||||
scenarioData = {};
|
||||
}
|
||||
drawflowData.drawflow[scenario.id] = {data: scenarioData};
|
||||
});
|
||||
|
||||
me.editor.import(drawflowData);
|
||||
me.editor.changeModule('Home');
|
||||
},
|
||||
error: function (response, textStatus, errorThrown) {
|
||||
me.hideLoadingOverlay();
|
||||
$('.toast-body').text(response.responseJSON.error);
|
||||
$('.toast').toast('show');
|
||||
},
|
||||
complete: function () {
|
||||
me.renderScenarioList();
|
||||
if (callback) {
|
||||
callback();
|
||||
}
|
||||
me.hideLoadingOverlay();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
getScenarioList() {
|
||||
return this.scenarioList;
|
||||
}
|
||||
|
||||
openScenario(event) {
|
||||
event.preventDefault();
|
||||
let scenarioId = $(event.target).closest('li').data('id');
|
||||
this.openScenarioById(scenarioId);
|
||||
}
|
||||
|
||||
openScenarioById(scenarioId) {
|
||||
document.querySelectorAll(".api-scenario-list li").forEach((node) => {
|
||||
node.classList.remove('selected');
|
||||
loadScenarioList(callback) {
|
||||
const me = this;
|
||||
this.currentAjaxRequest = $.ajax({
|
||||
url: this.getAPIScenarioListURL(),
|
||||
type: 'GET',
|
||||
contentType: 'application/json',
|
||||
success: function(data) {
|
||||
me.scenarioList = data;
|
||||
let drawflowData = {drawflow: {Home: {data: {}}}};
|
||||
data.forEach((scenario) => {
|
||||
let scenarioData = null;
|
||||
try {
|
||||
scenarioData = JSON.parse(scenario.scenario);
|
||||
} catch (e) {
|
||||
scenarioData = {};
|
||||
}
|
||||
drawflowData.drawflow[scenario.id] = {data: scenarioData};
|
||||
});
|
||||
|
||||
//find li by data-id and add class selected
|
||||
document.querySelector(`.api-scenario-list li[data-id="${scenarioId}"]`).classList.add('selected');
|
||||
me.editor.import(drawflowData);
|
||||
me.editor.changeModule('Home');
|
||||
},
|
||||
error: function(response, textStatus, errorThrown) {
|
||||
me.hideLoadingOverlay();
|
||||
$('.toast-body').text(response.responseJSON.error);
|
||||
$('.toast').toast('show');
|
||||
},
|
||||
complete: function() {
|
||||
me.renderScenarioList();
|
||||
if (callback) {
|
||||
callback();
|
||||
}
|
||||
me.hideLoadingOverlay();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
this.editor.changeModule(scenarioId);
|
||||
this.currentScenario = scenarioId;
|
||||
}
|
||||
getScenarioList() {
|
||||
return this.scenarioList;
|
||||
}
|
||||
|
||||
getScenario(scenarioId) {
|
||||
return this.getScenarioList().find((scenario) => scenario.id === scenarioId);
|
||||
}
|
||||
openScenario(event) {
|
||||
event.preventDefault();
|
||||
let scenarioId = $(event.target).closest('li').data('id');
|
||||
this.openScenarioById(scenarioId);
|
||||
}
|
||||
|
||||
showLoadingOverlay() {
|
||||
$("#loading-overlay").show();
|
||||
}
|
||||
openScenarioById(scenarioId) {
|
||||
document.querySelectorAll('.api-scenario-list li').forEach((node) => {
|
||||
node.classList.remove('selected');
|
||||
});
|
||||
|
||||
hideLoadingOverlay() {
|
||||
$("#loading-overlay").hide();
|
||||
}
|
||||
//find li by data-id and add class selected
|
||||
document.querySelector(`.api-scenario-list li[data-id="${scenarioId}"]`).classList.add('selected');
|
||||
|
||||
showNewScenarioModal() {
|
||||
$('#new_scenario_modal').find('input').val('');
|
||||
$('#new_scenario_modal').modal('show');
|
||||
}
|
||||
this.editor.changeModule(scenarioId);
|
||||
this.currentScenario = scenarioId;
|
||||
}
|
||||
|
||||
createScenario() {
|
||||
const name = $('#new_scenario_name').val();
|
||||
const me = this;
|
||||
me.showLoadingOverlay();
|
||||
this.currentAjaxRequest = $.ajax({
|
||||
url: this.getAPIScenarioCreateURL(),
|
||||
type: 'POST',
|
||||
contentType: 'application/json',
|
||||
data: JSON.stringify({name: name, scenario: "{}", description: ""}),
|
||||
success: function (data) {
|
||||
me.loadScenarioList(() => {
|
||||
me.openScenarioById(data.id);
|
||||
let start = `
|
||||
getScenario(scenarioId) {
|
||||
return this.getScenarioList().find((scenario) => scenario.id === scenarioId);
|
||||
}
|
||||
|
||||
showLoadingOverlay() {
|
||||
$('#loading-overlay').show();
|
||||
}
|
||||
|
||||
hideLoadingOverlay() {
|
||||
$('#loading-overlay').hide();
|
||||
}
|
||||
|
||||
showNewScenarioModal() {
|
||||
$('#new_scenario_modal').find('input').val('');
|
||||
$('#new_scenario_modal').modal('show');
|
||||
}
|
||||
|
||||
createScenario() {
|
||||
const name = $('#new_scenario_name').val();
|
||||
const me = this;
|
||||
me.showLoadingOverlay();
|
||||
this.currentAjaxRequest = $.ajax({
|
||||
url: this.getAPIScenarioCreateURL(),
|
||||
type: 'POST',
|
||||
contentType: 'application/json',
|
||||
data: JSON.stringify({name: name, scenario: '{}', description: ''}),
|
||||
success: function(data) {
|
||||
me.loadScenarioList(() => {
|
||||
me.openScenarioById(data.id);
|
||||
let start = `
|
||||
<div>
|
||||
<div><i class="fas fa-play"></i> Start </div>
|
||||
</div>
|
||||
`;
|
||||
me.editor.addNode('Start', 0, 1, 100, 100, 'start', {}, start);
|
||||
me.saveScenario();
|
||||
});
|
||||
},
|
||||
error: function (response, textStatus, errorThrown) {
|
||||
me.hideLoadingOverlay();
|
||||
$('.toast-body').text(response.responseJSON.error);
|
||||
$('.toast').toast('show');
|
||||
},
|
||||
complete: function () {
|
||||
me.hideLoadingOverlay();
|
||||
$('#new_scenario_modal').modal('hide');
|
||||
}
|
||||
me.editor.addNode('Start', 0, 1, 100, 100, 'start', {}, start);
|
||||
me.saveScenario();
|
||||
});
|
||||
}
|
||||
},
|
||||
error: function(response, textStatus, errorThrown) {
|
||||
me.hideLoadingOverlay();
|
||||
$('.toast-body').text(response.responseJSON.error);
|
||||
$('.toast').toast('show');
|
||||
},
|
||||
complete: function() {
|
||||
me.hideLoadingOverlay();
|
||||
$('#new_scenario_modal').modal('hide');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
saveScenario() {
|
||||
if (this.currentScenario !== null) {
|
||||
let data = this.editor.export();
|
||||
console.log(data.drawflow[this.currentScenario].data);
|
||||
let updatedScenario = this.getScenario(this.currentScenario);
|
||||
updatedScenario.scenario = JSON.stringify(data.drawflow[this.currentScenario].data);
|
||||
saveScenario() {
|
||||
if (this.currentScenario !== null) {
|
||||
let data = this.editor.export();
|
||||
console.log(data.drawflow[this.currentScenario].data);
|
||||
let updatedScenario = this.getScenario(this.currentScenario);
|
||||
updatedScenario.scenario = JSON.stringify(data.drawflow[this.currentScenario].data);
|
||||
|
||||
const me = this;
|
||||
me.showLoadingOverlay();
|
||||
this.currentAjaxRequest = $.ajax({
|
||||
url: this.getAPIScenarioUpdateURL(),
|
||||
type: 'POST',
|
||||
contentType: 'application/json',
|
||||
data: JSON.stringify(updatedScenario),
|
||||
error: function (response, textStatus, errorThrown) {
|
||||
me.hideLoadingOverlay();
|
||||
$('.toast-body').text(response.responseJSON.error);
|
||||
$('.toast').toast('show');
|
||||
},
|
||||
complete: function () {
|
||||
me.hideLoadingOverlay();
|
||||
$('.toast-body').text('저장되었습니다.');
|
||||
$('.toast').toast('show');
|
||||
}
|
||||
});
|
||||
const me = this;
|
||||
me.showLoadingOverlay();
|
||||
this.currentAjaxRequest = $.ajax({
|
||||
url: this.getAPIScenarioUpdateURL(),
|
||||
type: 'POST',
|
||||
contentType: 'application/json',
|
||||
data: JSON.stringify(updatedScenario),
|
||||
error: function(response, textStatus, errorThrown) {
|
||||
me.hideLoadingOverlay();
|
||||
$('.toast-body').text(response.responseJSON.error);
|
||||
$('.toast').toast('show');
|
||||
},
|
||||
complete: function() {
|
||||
me.hideLoadingOverlay();
|
||||
$('.toast-body').text('저장되었습니다.');
|
||||
$('.toast').toast('show');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
showDeleteModal(event) {
|
||||
const id = $(event.currentTarget).closest('li').data('id');
|
||||
$('#confirm_delete_scenario_modal').find('.confirm_delete_scenario').data('id', id);
|
||||
$('#confirm_delete_scenario_modal').modal('show');
|
||||
}
|
||||
showDeleteModal(event) {
|
||||
const id = $(event.currentTarget).closest('li').data('id');
|
||||
$('#confirm_delete_scenario_modal').find('.confirm_delete_scenario').data('id', id);
|
||||
$('#confirm_delete_scenario_modal').modal('show');
|
||||
}
|
||||
|
||||
removeScenario(event) {
|
||||
const id = $(event.currentTarget).data('id');
|
||||
const me = this;
|
||||
me.showLoadingOverlay();
|
||||
this.currentAjaxRequest = $.ajax({
|
||||
url: this.getAPIScenarioDeleteURL(),
|
||||
type: 'POST',
|
||||
contentType: 'application/json',
|
||||
data: JSON.stringify({id: id}),
|
||||
error: function (response, textStatus, errorThrown) {
|
||||
me.hideLoadingOverlay();
|
||||
$('.toast-body').text(response.responseJSON.error);
|
||||
$('.toast').toast('show');
|
||||
},
|
||||
complete: function () {
|
||||
me.hideLoadingOverlay();
|
||||
$('#confirm_delete_scenario_modal').modal('hide');
|
||||
$('.toast-body').text('삭제되었습니다.');
|
||||
$('.toast').toast('show');
|
||||
me.editor.changeModule('Home');
|
||||
me.loadScenarioList(() => {
|
||||
if (me.getScenarioList().length > 0)
|
||||
me.openScenarioById(me.getScenarioList()[0].id);
|
||||
removeScenario(event) {
|
||||
const id = $(event.currentTarget).data('id');
|
||||
const me = this;
|
||||
me.showLoadingOverlay();
|
||||
this.currentAjaxRequest = $.ajax({
|
||||
url: this.getAPIScenarioDeleteURL(),
|
||||
type: 'POST',
|
||||
contentType: 'application/json',
|
||||
data: JSON.stringify({id: id}),
|
||||
error: function(response, textStatus, errorThrown) {
|
||||
me.hideLoadingOverlay();
|
||||
$('.toast-body').text(response.responseJSON.error);
|
||||
$('.toast').toast('show');
|
||||
},
|
||||
complete: function() {
|
||||
me.hideLoadingOverlay();
|
||||
$('#confirm_delete_scenario_modal').modal('hide');
|
||||
$('.toast-body').text('삭제되었습니다.');
|
||||
$('.toast').toast('show');
|
||||
me.editor.changeModule('Home');
|
||||
me.loadScenarioList(() => {
|
||||
if (me.getScenarioList().length > 0) {
|
||||
me.openScenarioById(me.getScenarioList()[0].id);
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
toggleOutput() {
|
||||
// Define your selectors as constants for easy changes and better readability
|
||||
const scenarioContentSelector = '.api-scenario-content';
|
||||
const scenarioOutputSelector = '.api-scenario-output';
|
||||
const scenarioOutputBodySelector = '.api-scenario-output-body';
|
||||
const drawflowSelector = '#drawflow';
|
||||
const scenarioEditorSelector = '.scenario_editor';
|
||||
|
||||
// Ensure parentHeight is a number
|
||||
let parentHeight = parseInt($(scenarioContentSelector).css('height'), 10);
|
||||
|
||||
// Toggle the showOutput state
|
||||
this.showOutput = !this.showOutput;
|
||||
|
||||
if (!this.showOutput) {
|
||||
$(scenarioOutputSelector).css('flex', '0');
|
||||
$(scenarioOutputBodySelector).hide();
|
||||
|
||||
let editorHeight = $(scenarioEditorSelector).css('height');
|
||||
$(drawflowSelector).css('height', editorHeight);
|
||||
$(scenarioOutputSelector).removeClass('halfHeight');
|
||||
$(drawflowSelector).removeClass('halfHeight');
|
||||
} else {
|
||||
$(scenarioOutputSelector).css('flex', '1');
|
||||
$(scenarioOutputSelector).addClass('halfHeight');
|
||||
$(scenarioOutputBodySelector).show();
|
||||
$(drawflowSelector).addClass('halfHeight');
|
||||
$(drawflowSelector).css('height', parentHeight / 2);
|
||||
}
|
||||
|
||||
toggleOutput() {
|
||||
// Define your selectors as constants for easy changes and better readability
|
||||
const scenarioContentSelector = '.api-scenario-content';
|
||||
const scenarioOutputSelector = '.api-scenario-output';
|
||||
const scenarioOutputBodySelector = '.api-scenario-output-body';
|
||||
const drawflowSelector = '#drawflow';
|
||||
const scenarioEditorSelector = '.scenario_editor';
|
||||
// Adjustments for when parentHeight isn't a valid number
|
||||
if (isNaN(parentHeight)) {
|
||||
console.error('parentHeight is not a number. Check the height of the api-scenario-content element.');
|
||||
// Fallback or additional error handling can be placed here
|
||||
}
|
||||
}
|
||||
|
||||
// Ensure parentHeight is a number
|
||||
let parentHeight = parseInt($(scenarioContentSelector).css('height'), 10);
|
||||
resizeEditor() {
|
||||
//FIXME: 창 크기 변경시 자동으로 editor 크기가 조정되지 않아서, 0으로 강제 변경후 다시 layout() 호출
|
||||
this.outputEditor.layout({
|
||||
width: 0
|
||||
});
|
||||
this.outputEditor.layout({});
|
||||
|
||||
// Toggle the showOutput state
|
||||
this.showOutput = !this.showOutput;
|
||||
}
|
||||
|
||||
if (!this.showOutput) {
|
||||
$(scenarioOutputSelector).css('flex', '0');
|
||||
$(scenarioOutputBodySelector).hide();
|
||||
runScript() {
|
||||
console.log(this.editor.export().drawflow);
|
||||
let graph = APIScenarioExecutor.extractGraphFromStart(this.editor.export().drawflow[this.currentScenario].data);
|
||||
this.executor = new APIScenarioExecutor(graph, this.apiTester, this.outputEditor);
|
||||
}
|
||||
|
||||
let editorHeight = $(scenarioEditorSelector).css('height');
|
||||
$(drawflowSelector).css('height', editorHeight);
|
||||
$(scenarioOutputSelector).removeClass('halfHeight');
|
||||
$(drawflowSelector).removeClass('halfHeight');
|
||||
} else {
|
||||
$(scenarioOutputSelector).css('flex', '1');
|
||||
$(scenarioOutputSelector).addClass('halfHeight');
|
||||
$(scenarioOutputBodySelector).show();
|
||||
$(drawflowSelector).addClass('halfHeight');
|
||||
$(drawflowSelector).css('height', parentHeight / 2);
|
||||
}
|
||||
runScenarioAll() {
|
||||
if (!this.executor) {
|
||||
this.runScript();
|
||||
}
|
||||
if (!this.executor.isDone) {
|
||||
this.executor.executeAll();
|
||||
} else {
|
||||
this.executor.reset();
|
||||
}
|
||||
}
|
||||
|
||||
// Adjustments for when parentHeight isn't a valid number
|
||||
if (isNaN(parentHeight)) {
|
||||
console.error('parentHeight is not a number. Check the height of the api-scenario-content element.');
|
||||
// Fallback or additional error handling can be placed here
|
||||
}
|
||||
runScenarioStep() {
|
||||
if (!this.executor) {
|
||||
this.runScript();
|
||||
}
|
||||
if (!this.executor.isDone) {
|
||||
this.executor.executeCurrentNode();
|
||||
this.executor.moveToNextNode();
|
||||
} else {
|
||||
this.executor.reset();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
resizeEditor() {
|
||||
//FIXME: 창 크기 변경시 자동으로 editor 크기가 조정되지 않아서, 0으로 강제 변경후 다시 layout() 호출
|
||||
this.outputEditor.layout({
|
||||
width: 0
|
||||
});
|
||||
this.outputEditor.layout({});
|
||||
resetScenario() {
|
||||
|
||||
}
|
||||
|
||||
pauseScenario() {
|
||||
|
||||
}
|
||||
|
||||
stopScenario() {
|
||||
if (this.executor) {
|
||||
this.executor.reset();
|
||||
}
|
||||
this.outputEditor.setValue('');
|
||||
}
|
||||
|
||||
runScript() {
|
||||
console.log(this.editor.export().drawflow);
|
||||
let graph = APIScenarioExecutor.extractGraphFromStart(this.editor.export().drawflow[this.currentScenario].data);
|
||||
this.executor = new APIScenarioExecutor(graph, this.apiTester, this.outputEditor);
|
||||
}
|
||||
|
||||
runScenarioAll() {
|
||||
if (!this.executor) {
|
||||
this.runScript();
|
||||
}
|
||||
if (!this.executor.isDone) {
|
||||
this.executor.executeAll();
|
||||
} else {
|
||||
this.executor.reset();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
runScenarioStep() {
|
||||
if (!this.executor) {
|
||||
this.runScript();
|
||||
}
|
||||
if (!this.executor.isDone) {
|
||||
this.executor.executeCurrentNode();
|
||||
this.executor.moveToNextNode();
|
||||
} else {
|
||||
this.executor.reset();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
resetScenario() {
|
||||
|
||||
}
|
||||
|
||||
pauseScenario() {
|
||||
|
||||
}
|
||||
|
||||
stopScenario() {
|
||||
if (this.executor)
|
||||
this.executor.reset();
|
||||
this.outputEditor.setValue('');
|
||||
}
|
||||
|
||||
addStart() {
|
||||
let start = `
|
||||
addStart() {
|
||||
let start = `
|
||||
<div>
|
||||
<div><i class="fas fa-play"></i> Start </div>
|
||||
</div>
|
||||
`;
|
||||
this.editor.addNode('Start', 0, 1, 100, 100, 'start', {}, start);
|
||||
this.editor.addNode('Start', 0, 1, 100, 100, 'start', {}, start);
|
||||
}
|
||||
|
||||
bindEvents() {
|
||||
const events = [
|
||||
{type: 'click', selector: '.open_scenario', action: this.openScenario.bind(this)},
|
||||
{type: 'click', selector: '.export', action: this.runScript.bind(this)},
|
||||
{type: 'click', selector: '.toggle_output', action: this.toggleOutput.bind(this)},
|
||||
{type: 'click', selector: '.run_scenario_step', action: this.runScenarioStep.bind(this)},
|
||||
{type: 'click', selector: '.run_scenario_all', action: this.runScenarioAll.bind(this)},
|
||||
{type: 'click', selector: '.reset_scenario', action: this.resetScenario.bind(this)},
|
||||
{type: 'click', selector: '.pause_scenario', action: this.pauseScenario.bind(this)},
|
||||
{type: 'click', selector: '.stop_scenario', action: this.stopScenario.bind(this)},
|
||||
{type: 'click', selector: '#new_scenario', action: this.showNewScenarioModal.bind(this)},
|
||||
{type: 'click', selector: '.create_scenario', action: this.createScenario.bind(this)},
|
||||
{type: 'click', selector: '.save_scenario', action: this.saveScenario.bind(this)},
|
||||
// {type: 'click', selector: '.add_start', action: this.addStart.bind(this)},
|
||||
{type: 'click', selector: '.delete_scenario', action: this.showDeleteModal.bind(this)},
|
||||
{type: 'click', selector: '.confirm_delete_scenario', action: this.removeScenario.bind(this)},
|
||||
{type: 'click', selector: '.stop_scenario', action: this.stopScenario.bind(this)}
|
||||
];
|
||||
|
||||
for (let event of events) {
|
||||
$(document).on(event.type, event.selector, event.action);
|
||||
}
|
||||
|
||||
bindEvents() {
|
||||
const events = [
|
||||
{type: 'click', selector: '.open_scenario', action: this.openScenario.bind(this)},
|
||||
{type: 'click', selector: '.export', action: this.runScript.bind(this)},
|
||||
{type: 'click', selector: '.toggle_output', action: this.toggleOutput.bind(this)},
|
||||
{type: 'click', selector: '.run_scenario_step', action: this.runScenarioStep.bind(this)},
|
||||
{type: 'click', selector: '.run_scenario_all', action: this.runScenarioAll.bind(this)},
|
||||
{type: 'click', selector: '.reset_scenario', action: this.resetScenario.bind(this)},
|
||||
{type: 'click', selector: '.pause_scenario', action: this.pauseScenario.bind(this)},
|
||||
{type: 'click', selector: '.stop_scenario', action: this.stopScenario.bind(this)},
|
||||
{type: 'click', selector: '#new_scenario', action: this.showNewScenarioModal.bind(this)},
|
||||
{type: 'click', selector: '.create_scenario', action: this.createScenario.bind(this)},
|
||||
{type: 'click', selector: '.save_scenario', action: this.saveScenario.bind(this)},
|
||||
// {type: 'click', selector: '.add_start', action: this.addStart.bind(this)},
|
||||
{type: 'click', selector: '.delete_scenario', action: this.showDeleteModal.bind(this)},
|
||||
{type: 'click', selector: '.confirm_delete_scenario', action: this.removeScenario.bind(this)},
|
||||
{type: 'click', selector: '.stop_scenario', action: this.stopScenario.bind(this)}
|
||||
];
|
||||
window.addEventListener('resize', this.resizeEditor.bind(this));
|
||||
var me = this;
|
||||
|
||||
for (let event of events) {
|
||||
$(document).on(event.type, event.selector, event.action);
|
||||
}
|
||||
$('#drawflow').droppable({
|
||||
drop: function(event, ui) {
|
||||
const x = ui.offset.left - $(this).offset().left;
|
||||
const y = ui.offset.top - $(this).offset().top;
|
||||
|
||||
window.addEventListener('resize', this.resizeEditor.bind(this));
|
||||
var me = this;
|
||||
const dataset = ui.draggable[0].dataset;
|
||||
var node = `<div><div class="title-box">API</div><div class="box">${dataset.name}</div></div>`;
|
||||
|
||||
$('#drawflow').droppable({
|
||||
drop: function (event, ui) {
|
||||
const x = ui.offset.left - $(this).offset().left;
|
||||
const y = ui.offset.top - $(this).offset().top;
|
||||
me.editor.addNode(dataset.name, 1, 1, x, y, dataset.nodeType, dataset, node);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const dataset = ui.draggable[0].dataset;
|
||||
var node = `<div><div class="title-box">API</div><div class="box">${dataset.name}</div></div>`;
|
||||
|
||||
me.editor.addNode(dataset.name, 1, 1, x, y, dataset.nodeType, dataset, node);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
scenarioListTemplate(scenario) {
|
||||
return `
|
||||
scenarioListTemplate(scenario) {
|
||||
return `
|
||||
<li class="d-flex justify-content-between " data-id="${scenario.id}">
|
||||
<a href="#" class="d-inline-flex align-items-center rounded open_scenario">${scenario.name}</a>
|
||||
<div class="d-flex justify-content-between">
|
||||
@@ -371,19 +370,20 @@ class APIScenario {
|
||||
</div>
|
||||
</li>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
renderScenarioList() {
|
||||
let scenarioList = this.getScenarioList();
|
||||
let scenarioListHtml = scenarioList.map((scenario) => this.scenarioListTemplate(scenario)).join('');
|
||||
$('.api-scenario-list').html(scenarioListHtml);
|
||||
let nodes = document.querySelectorAll(".api-scenario-list li");
|
||||
nodes.forEach((node) => {
|
||||
if ($(node).data('id') === this.currentScenario) {
|
||||
node.classList.add('selected');
|
||||
}
|
||||
});
|
||||
}
|
||||
renderScenarioList() {
|
||||
let scenarioList = this.getScenarioList();
|
||||
let scenarioListHtml = scenarioList.map((scenario) => this.scenarioListTemplate(scenario)).join('');
|
||||
$('.api-scenario-list').html(scenarioListHtml);
|
||||
|
||||
let nodes = document.querySelectorAll('.api-scenario-list li');
|
||||
nodes.forEach((node) => {
|
||||
if ($(node).data('id') === this.currentScenario) {
|
||||
node.classList.add('selected');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default APIScenario;
|
||||
|
||||
Reference in New Issue
Block a user