manager/src/main/resources/static/js/workflow.js

function clearWorkflow() {
	$.ajax({
		type: 'POST',
		url: '/clear',
		success: function(result) {
			loadFragments();
		}
	});
}

function cancelWorkflow() {
	$.ajax({
		type: 'POST',
		url: '/cancel',
		success: function(result) {
			loadFragments();
		}
	});
}

function updateSelectedServices(service) {
	$.ajax({
		type: 'POST',
		url: '/select/' + service,
		success: function(result) {
			$('#selectedServicesBlock').load('/selectedServices');
			$('[data-toggle="tooltip"]').tooltip();
		}
	});
}

function selectServiceProfile(profile) {
	$.ajax({
		type: 'POST',
		url: '/profile/' + profile,
		success: function(result) {
			$('#selectedServicesBlock').load('/selectedServices');
		}
	});
}

function removeSelectedServices(service) {
	$.ajax({
		type: 'POST',
		url: '/remove/' + service,
		success: function(result) {
			$('#selectedServicesBlock').load('/selectedServices');
		}
	});
}

function loadFragments() {
	$('#selectedServicesBlock').load('/selectedServices');
	$('#messagesBlock').load('/messages');
	$('#errorsBlock').load('/errors');
	$('#resultsBlock').load('/results');
}

$(document).ready(function() {
	// load the fragments to be able to update via ajax in later steps
	loadFragments();
	
	// enable all tooltips in the document
	$('[data-toggle="tooltip"]').tooltip();
	
	// initialize and bind the form for ajax submission
	var options = {
		beforeSubmit: function() {
				$('#profiles').hide();
				$('#workflowSubmit').hide();
				$('#workflowCancel').show();
				$('#customFile').prop('disabled', true);
				connect();
			},
		success: function() {
				$('#selectedServicesBlock').load('/selectedServices');
			}
	};

	// attach handler to form's submit event
	$('#workflowForm').submit(function() {
	    // submit the form
	    $(this).ajaxSubmit(options);
	    // return false to prevent normal browser submit and page navigation
	    return false;
	});
	
	$('#workflowCancel').on('click', function() {
		$(this).prop('disabled', true);
		cancelWorkflow();
	});
	
	$('#customFile').on('change', function() {
		//get the file name
		var fileName = $(this).val().split('\\').pop();
		//replace the "Choose a file" label
		$(this).next('.custom-file-label').html(fileName);
        $('#profiles').show();
        $('#buttons').show();
        $('#workflowSubmit').show();
		$('#example').val('');
		clearWorkflow();
	});
	
	$('#example').on('change', function() {
        $('#profiles').show();
        $('#buttons').show();
        $('#workflowSubmit').show();
		$('#customFile').val('');
		$('#customFile').next('.custom-file-label').html('');
		clearWorkflow();
	});
	
});

function copy(link) {
	var copyLink = link.href;
	var handler = function(event) {
		event.clipboardData.setData('text/plain', copyLink);
		event.preventDefault();
		document.removeEventListener('copy', handler, true);
	}
	document.addEventListener('copy', handler, true);
	document.execCommand('copy');
	$('.toast').toast('show');
}

//websocket

var stompClient = null;

function connect() {
	var socket = new SockJS('/websocket');
	stompClient = Stomp.over(socket);
	stompClient.connect({}, function (frame) {
		console.log('Connected: ' + frame);
		stompClient.subscribe(
			'/topic/process-updates',
			//'/user/queue/process-updates',
	  		function (processLog) {
		     	var action = JSON.parse(processLog.body).action;
		     	var uuid = JSON.parse(processLog.body).uuid;
		     	if (action == 'UPDATE') {
		        	$('#messagesBlock').load('/messages');
					$('#errorsBlock').load('/errors');
		     	} else if (action == 'DONE') {
		     		disconnect();
		     		window.location.href = window.location.href.split("?")[0] + '?uuid=' + uuid;
		 	    }
			}
		);
	});
}

function disconnect() {
	if (stompClient !== null) {
		stompClient.disconnect();
	}
	console.log("Disconnected");
}