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', function() {
		if (workflowDone) {
			$('html, body').scrollTop($(document).height());
		}
	});
}

$(document).ready(function() {
	// load the fragments to be able to update via ajax in later steps
	loadFragments();
	
	// if the workflow is not done yet and there is a uuid available,
	// connect the websocket and submit to the topic of workflow updates
	if (!workflowDone && uuid) {
		connect();
	} 
	
	// enable all tooltips in the document
	$('[data-toggle="tooltip"]').tooltip();
	
	$('#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() {
	// before we connect new, we need to ensure that a previous connection is disconnected
	disconnect();
	
	var socket = new SockJS('/websocket');
	stompClient = Stomp.over(socket);
	stompClient.connect({}, function (frame) {
		console.log('Connected: ' + frame);
		
		stompClient.subscribe(
			'/topic/process-updates/' + uuid,
	  		function (processLog) {
	  			var processLogObj = JSON.parse(processLog.body);
		     	var action = processLogObj.action;
		     	var message = processLogObj.message;
		     	var processUuid = processLogObj.uuid;
		     	if (action == 'UPDATE') {
		        	$('#messagesBlock').load('/messages');
					$('#errorsBlock').load('/errors');
					
					$('html, body').scrollTop($(document).height());
					
		     	} else if (action == 'DONE') {
		     		disconnect();
		     		window.location.href = window.location.href.split("?")[0] + '?uuid=' + processUuid;
		 	    } else if (action == 'PROCESSING') {
		 	    	showFlash(message);
					
		 	    	$('html, body').scrollTop($(document).height());
		 	    }
			}
		);
		
		stompClient.send('/app/register', {}, uuid);
	});
}

function disconnect() {
	if (stompClient !== null) {
		stompClient.send('/app/unregister', {}, uuid);
		stompClient.disconnect();
		stompClient = null;
		console.log("Disconnected");
	}
}

function showFlash(msg) {
	$('#flashMessage').text(msg);
	$('#flashMessage').slideDown(function() {
	    setTimeout(function() {
	        $('#flashMessage').slideUp();
	    }, 2000);
	});
}