LiDa_Search/js/script_Luk_Q.js

/**
 * 
 */

/* necessari per il bundle:	
import "./jquery-global.js";
require("../node_modules/jquery-ui-dist/jquery-ui.js");
require("../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js");
*/

$(document).ready(function() {
	
	$("#copiaTesto").prop("disabled", true);
	
	// Evento: click sul bottone di copia dei risultati testuali
	$("#copiaTesto").on("click", function(){
        $("#risultatitesto").copy2clipboard();
    });
	
	$("#copiaQuery").prop("disabled", true);
	
	$( "#sortable0" ).sortable({
		items: "> li",
		handle: ".handle"
	});

	// Evento: click sul bottone di copia della query
	$("#copiaQuery").on("click", function(){
        $('#sparqlquery').copy2clipboard();
    });
		
	// Evento: click sull'area di navigazione delle tab	delle clausole
    $('#tab-list').on('click', function() {
		refreshClaList();
		refreshSortables();
	});

	$("form #lemma_forma").on('change', function() {
		refreshClaList();
	});

	$("form #queryText").on('change', function() {
		refreshClaList();
	});

	// Evento: click sull'icona check dentro il tab della clausola
    $('#cla-TabContent').on('click', '.return2Query', function() {
		var tabFirst = $('#tab-list a:first');
        refreshClaList();
        tabFirst.tab('show');
	});

	// Evento: click sull'icona rimuovi clausola dentro il tab della clausola
    $('#cla-TabContent').on('click', '.removeClaInTab', function() {
		var tabPanelId =  "#" + $(this).parent('div').parent().attr('id');
		var claListItemID = "H-" + $(this).parent('div').parent().attr('id');
        var tabLiId = tabPanelId + "-tab";
        claListLen--;
        $(tabLiId).parent().remove();
        $(tabPanelId).remove();
        if ($("#" + claListItemID)[0]){
	        $("#" + claListItemID)[0].remove();		
		};
        var tabFirst = $('#tab-list a:first');
        refreshTabList();
        refreshClaList();
        refreshSortables();
        tabFirst.tab('show');
	});

	// Evento: click sull'icona rimuovi clausola dentro la lista delle clausole
    $('#cla-TabContent').on('click', '.removeClaInList', function() {
		var claListItemID = $(this).closest('li').attr('id');
		var tabPanelId = "#" + claListItemID.substring(2);
		var tabLiId = tabPanelId + "-tab";
		claListLen--;
        $(tabLiId).parent().remove();
        $(tabPanelId).remove();
        $("#" + claListItemID)[0].remove();
        var tabFirst = $('#tab-list a:first');
        refreshTabList();
        refreshClaList();
        refreshSortables();
        tabFirst.tab('show');
	});

	// Evento: click sull'icona rimuovi condizione dentro la lista delle clausole
	$('#sortable0').on('click', '.removeCond', function() {
		$(this).closest('ul').parent().remove();
		condListLen--;
		refreshSortables();
		refreshConnectWith();
		if (claListLen == 0 && condListLen == 0) {
			$('#sortable0').html(emptyClaList);
		}
	});
	
	// Evento: click sull'icona modifica dentro la lista delle clausole
    $('#cla-TabContent').on('click', '.editCla', function() {
		var claListItemID = $(this).closest('li').attr('id');
		var tabLiId = "#" + claListItemID.substring(2) + "-tab";
		var tabTarget = $('#tab-list ' + tabLiId);
		tabTarget.tab('show');
	});

	// Evento: click sulla lista di clausole nel dropbox "Aggiungi clausola di tipo:" o "aggiungi condizione logica:"
	$('.btn-group a').on('click', function() {
		var addClaN =  $(this).attr('id');
		switch (addClaN) {
        	case "Grammaticale":
        		addGramCla(1);
		        $('#cla' + tabID + '-tab').tab('show');
         	    break;
        	case "Sintattico":
        		addSyntCla(1);
		        $('#cla' + tabID + '-tab').tab('show');
        	    break;
        	case "Metafore":
        		addMetaCla(0);
		        $('#cla' + tabID + '-tab').tab('show');
        	    break;
        	case "Dialoghi":
        		addDialCla(0);
		        $('#cla' + tabID + '-tab').tab('show');
        	    break;
        	case "Struttura":
        		addStruCla(0);
		        $('#cla' + tabID + '-tab').tab('show');
        	    break;
        	case "andCond":
        		addLogicCond("AND")
				refreshConnectWith();
				break;
        	case "orCond":
        		addLogicCond("OR")
				refreshConnectWith();
        		break;
        	default:
        	};
	});
	
	// Evento: clausola spostata nella lista principale
	$('#sortable0').sortable({ 
    	opacity: 0.6, 
    	cursor: 'move',
    	update: function() {
			refreshSortables();
    	}
	});
		
	// Evento: click sul checkbox di attivazione delle clausole
	$('#cla-TabContent').on('click', '.claAct', function() {
		var claListItemID = $(this).closest('li').attr('id');
		var tabPanelId = "#" + claListItemID.substring(2);
        if ($(this).prop('checked')) {
        	$(tabPanelId).attr("data-claActive", 1);
			$(this).closest('li').find('.clatext').fadeTo( "slow", 1 );
        } else {
			$(tabPanelId).attr("data-claActive", 0);
			$(this).closest('li').find('.clatext').fadeTo( "slow", 0.6 );
		}
		refreshSortables();
    });
	
	// Evento: click sull'icona di refresh dei radio button
	$('#cla-TabContent').on('click', '.radioReset', function() {
		fSet = $(this).siblings('fieldset');
		if (fSet.find(":checked").length) {
			radioChecked = fSet.find(":checked")[0];
			radioChecked.checked = false;
		};
    });
	
	// Evento: click sull'icona di save local
	$('#cla-TabContent').on('click', 'ion-icon[name="save-outline"]', function() {
		var fileA = document.createElement("a");
		fileA.href = window.URL.createObjectURL(new Blob([JSON.stringify(queryJson)], {type: "text/plain;charset=utf-8"}));
		fileA.download = "LiDaQuery.txt";
		fileA.click();
		fileA.remove();
    });
	
	// Evento: click sull'icona di load local
	$('#cla-TabContent').on('click', 'ion-icon[name="folder-open-outline"]', function() {
		$('#apriFile').click();
    });
	
	$("#apriFile").on('change', function() {
		var file = $(this).prop('files')[0];
		var reader = new FileReader();
        reader.onload = function(data){
			queryJson = JSON.parse(data.target.result)
        	$("#sparqlquery").val(data.target.result);
        	makeUpGui(queryJson);
        };
  		if (file) {reader.readAsText(file);}
	});
	
	// Evento: SCELTA CATEGORIA GRAMMATICALE 
	$('#cla-TabContent').on('change', 'select.catgram', function(e) {
		e.preventDefault();
		var tabPaneId = ($(this).closest('.tab-pane').attr("id"));		
		var selectedValue = $(this).val();
		addCatgramSubcla(tabPaneId,selectedValue);
	});

	// Evento: Submit form
	$("form").submit(function(e){
		e.preventDefault();
		var qText = $("form #queryText")[0].value;
		if (qText == "" && logicExprString == "") {
			alert("Inserire un termine di ricerca od una clausola attiva!");
			return false;
		}
  		const sparqlGenerator = sparqljs.Generator;
		jsonQuery = buildSQ(queryJson);
		queryFields = [];
  		for (var i in jsonQuery.variables) {
				queryFields.push(jsonQuery.variables[i].variable.value);
		}
  		execQuery = new sparqlGenerator().stringify(jsonQuery);
  		executeQuery();
  		return false; 		
	});

	
	// Variabili JSON per i filtri

	var verboJson = {
		"filtriverbo": {
			"Diatesi": ["Attivo", "Passivo"],
			"Transitivita": ["Transitivo", "Intransitivo"],
			"Genere": ["Femminile", "Maschile"],
			"Numero": ["Singolare", "Plurale"],
			"Pers": ["Impersonale"],
			"Rifl": ["Riflessivo"],
			"Coniugazione": ["Qualsiasi coniugazione", "Prima coniugazione", "Seconda coniugazione", "Terza coniugazione", "Essere coniugazione", "Avere coniugazione"],
			"Tempi": ["Qualsiasi tempo verbale", "Indicativo presente", "Indicativo passato prossimo", "Indicativo imperfetto", "Indicativo passato remoto", 
				"Indicativo trapassato prossimo", "Indicativo trapassato remoto", "Indicativo futuro semplice", "Indicativo futuro anteriore", "Congiuntivo presente", 
				"Congiuntivo imperfetto", "Congiuntivo passato", "Congiuntivo trapassato", "Condizionale presente", "Condizionale passato", "Imperativo presente", 
				"Infinito presente", "Infinito passato", "Participio presente", "Participio passato", "Gerundio presente", "Gerundio passato"],
			"Persona" : ["Qualsiasi persona", "1ª persona singolare", "2ª persona singolare", "3ª persona singolare", "1ª persona plurale", "2ª persona plurale", "3ª persona plurale"],
			"Funzione": ["Tutte le funzioni", "Aggettivo", "Sostantivo maschile", "Sostantivo femminile"],
			"Declinazione": ["Tutte le declinazioni", "Prima declinazione", "Seconda declinazione", "Terza declinazione"],
		}
	}
	
	var sostantivoJson = {
		"filtrisostantivo": {
			"Numero": ["Singolare", "Plurale"],
			"Genere lemma": ["Lemma femminile", "Lemma maschile"],
			"Genere forma": ["Forma femminile", "Forma maschile"],
			"riflpers": ["In locuzione"],
			"Declinazione sostantivo": ["Tutte le declinazioni", "Prima declinazione", "Seconda declinazione", "Terza declinazione"],
		}
	}

	var aggettivoJson = {
		"filtriaggettivo": {
			"Classe": ["1ª", "2ª"],
			"Genere": ["Femminile", "Maschile"],
			"Numero": ["Singolare", "Plurale"],
			"Con oggetto indiretto": ["Con oggetto indiretto"],
			"Tipo aggettivo": ["Qualsiasi tipo aggettivo", "Qualificativo", "Indefinito", "Interrogativo", "Esclamativo", "Numerale", "Dimostrativo", "Relativo", "Possessivo", "In locuzione"],
			"Grado": ["Qualsiasi grado", "Comparativo di maggioranza", "Comparativo di minoranza", "Comparativo di uguaglianza", "Superlativo relativo", "Superlativo assoluto"],
			"Tipo di Complemento": ["Qualsiasi tipo di Complemento", "Introdotto da A", "Introdotto da CON", "Introdotto da CONTRO", "Introdotto da DA", "Introdotto da DI", "Introdotto da IN",
				"Introdotto da PER", "Introdotto da SU", "Introdotto da TRA", "Introdotto da VERSO", "Introdotto da SOPRA",
				"Introdotto da SOTTO", "Introdotto da DINANZI", "Introdotto da prep.", "Oggetto ind.", "Ogg. indi. + compl. con DI", "Ogg. ind. pronom."],
			"Tipo di frase": ["Qualsiasi tipo di frase", "Con infinito retto da A", "Con infinito retto da DA", "Con infinito retto da DI", "Con infinito retto da PER",
				"Con infinito retto da SE", "Con subordinata all'indic.", "Con subordinata al cong.", "In locuzione imp.+infinito",
				"In locuzione imp.+che+indic.", "In locuzione imp.+che+cong.", "In locuzione imp.+se+indic.", "In locuzione imp.+se+cong.",
				"In locuzione imp.+come+indic.", "In locuzione imp.+quando+indic.", "In locuzione imp.+perché+cong.", "In locuzione imp.+a+infinito"]
		}
	}

	var pronomeJson = {
		"filtripronome": {
			"Genere": ["Femminile", "Maschile"],
			"Numero": ["Singolare", "Plurale"],
			"Classe/Persona": ["1ª", "2ª", "3ª"],
			"Tipo": ["Qualsiasi tipo", "Personale", "Riflessivo", "Interrogativo", "Esclamativo", "Dimostrativo", "Relativo", "Possessivo"],
			"Forma (Personali/Riflessivi)": ["Qualsiasi forma (Personali/Riflessivi)", "Libero", "Libero in Composizione", "Proclitico", "Enclitico"],
			"Funzione (Personali)": ["Qualsiasi funzione (Personali)", "Libero - soggetto", "Libero - soggetto impersonale", "Libero - complemento", "Libero - rafforzativo",
				"Clitico - accusativo", "Clitico - dativo", "Clitico - partitivo"],
			"Tipo (Riflessivi)": ["Qualsiasi tipo (Riflessivi)", "Proprio", "Lessicalizzato", "Impersonale", "Passivo", "Reciproco"]
		}
	}
	
	var articoloJson = {
		"filtriarticolo": {
			"Genere": ["Femminile", "Maschile"],
			"Numero": ["Singolare", "Plurale"],
			"Tipo": ["Determinativo", "Indeterminativo"]
		}
	}

	var avverbioJson = {
		"filtriavverbio": {
			"Tipo": ["Qualsiasi tipo", "Al comparativo di maggioranza", "Al comparativo di minoranza",
				"Al superlativo assoluto", "Al superlativo relativo",
				"In Locuzione", "In Locuzione separato", "Proclitico", "Enclitico"]
		}
	}

	var preposizioneJson = {
		"filtripreposizione": {
			"Tipo I": ["Propria", "Impropria"],
			"Tipo preposizione": ["Qualsiasi tipo preposizione", "Semplice", "Articolata", "In locuzione", "In locuzione separata"],
			"Sintassi": ["Qualsiasi sintassi", "Soggettiva", "Oggettiva", "Dichiarativa", "Completiva obliqua", "Finale",
				"Causale", "Concessiva", "Consecutiva", "Temporale", "Modale", "Eccettuativa", "Esclusiva",
				"Limitativa", "Comparativa", "Avversativa"],
			"Complemento (I)": ["Qualsiasi complemento (I)", "Di stato in luogo", "Di moto a luogo", "Di moto da luogo", "Di moto per luogo",
				"Di luogo", "Predicativo del soggetto", "Predicativo dell'oggetto", "Di distanza",
				"Di tempo determinato", "Di tempo continuato", "Di tempo", "Di termine", "Di vantaggio",
				"Di svantaggio", "Di specificazione", "Di modo", "Di mezzo", "Di compagnia",
				"Di unione", "Di allontanamento/separazione", "Di materia"],
			"Complemento (II)": ["Qualsiasi complemento (II)", "Di limitazione", "Di qualità", "Di causa", "Di agente", "Di causa efficiente", "Di fine o scopo",
				"Di paragone", "Di argomento", "Distributivo", "Di sostituzione", "Di estensione", "Di rapporto",
				"Di esclusione", "Di peso", "Di quantità", "Di colpa", "Di denominazione", "partitivo",
				"Di abbondanza-privazione", "Di origine-provenienza", "Concessivo", "Di effetto", "Di pena",
				"Simmetrico", "Indiretto esperiente", "Indiretto dativo", "Indiretto oggetto", "Indiretto possessore",
				"Indiretto benefattivo"]
		}
	}

	var congiunzioneJson = {
		"filtricongiunzione": {
			"Coo./sub": ["Coordinativa", "Subordinativa"],
			"Tipo": ["Qualsiasi tipo", "Semplice", "Composta", "Locuzione", "Locuzione separata"],
			"Coord. tipo": ["Qualsiasi coord. tipo", "Copulativa", "Disgiuntiva", "Avversativa", "Esplicativa", "Conclusiva", "Correlativa"],
			"Subord. tipo": ["Qualsiasi subord. tipo", "Soggettiva", "Oggettiva", "Dichiarativa", "Completiva obliqua", "Interrogativa",
				"Finali", "Causali", "Concessiva", "Consecutiva", "Temporale", "Modale",
				"Eccettuativa", "Comparativa", "Condizionale", "Esclusiva", "Limitativa"]
		}
	}

	var onomasticacitazioneJson = {
		"filtrionomastica": {
			"Tipo": ["Qualsiasi tipo", "Nome proprio", "Nome proprio separato", "Titolo"]
		},

		"filtricitazione": {
			"Tipo": ["Qualsiasi tipo", "Latina", "Provenzale", "Francese", "Spagnola", "Ebraica", "Greca"]
		}
	}

	var categorie = {
		"verbovolgare": "filtriverbo",
		"sostantivovolgare": "filtrisostantivo",
		"pronomevolgare": "filtripronome",
		"aggettivovolgare": "filtriaggettivo",
		"articolovolgare": "filtriarticolo",
		"avverbiovolgare": "filtriavverbio",
		"preposizionevolgare": "filtripreposizione",
		"congiunzionevolgare": "filtricongiunzione",
		"onomasticavolgare": "filtrionomastica",
		"citazionevolgare": "filtricitazione"
	}

	var catGrammsenzaspec = ['all', 'interiezionevolgare']

	var subordinazioneJson = {
		"subordinazione": {
			"livello": ["Qualsiasi livello di subordinazione", "principale", "coordinata a una principale", "subordinata di I grado",
				"subordinata di II grado", "subordinata di III grado", "subordinata di IV grado", "subordinata di V grado",
				"subordinata di VI grado", "subordinata di VII grado", "coordinata a una subordinata di I grado",
				"coordinata a una subordinata di II grado", "coordinata a una subordinata di III grado",
				"coordinata a una subordinata di IV grado", "coordinata a una subordinata di V grado", "pseudo-coordinata",
				"parentetica", "coordinata a una parentetica"]
		}
	}

	var categorieJson = $.extend({}, verboJson, sostantivoJson, pronomeJson, aggettivoJson, articoloJson, avverbioJson, preposizioneJson, congiunzioneJson, onomasticacitazioneJson);


    // Variabili testuali per compattezza
    var iconEdit = '<ion-icon name="pencil"></ion-icon>';
    var iconClose = '<ion-icon name="close-circle"></ion-icon>';
    var iconCheck = '<ion-icon name="checkmark-circle"></ion-icon>';
    var iconFilter = '<ion-icon name="filter-circle"></ion-icon>';
    var iconReset = '<div class="text-right text-primary radioReset"><ion-icon name="refresh-circle"></ion-icon></div>';
    var iconCloseCond = '<div class="p-0 mr-1 text-right text-primary"><span class="iconClClass removeCond">' + iconClose + '</span></div>';
	var iconCheckAndClose = '<div class="p-0 m-1 text-right text-primary"><span class="return2Query">' + iconCheck + '</span>&nbsp;&nbsp;<span class="removeClaInTab">' + iconClose + '</span></div>';
	var emptyClaList = '<li id="H-cla0" class="list-group-item align-items-center ui-state-default ui-state-disabled border text-muted bg-white ui-state-disabled-opacity-06">Nessuna clausola aggiunta.</li>';

	var claLIpart1 = '<li id="'
	var claLIpart2 = '" class="claLI mx-4 my-1 p-1 list-group-item align-items-center border text-muted bg-white"><div class="handle container-fluid"><div class="row"><div class="col-md-11 px-0 pr-2"> \
<div class="bd-highlight text-primary"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span></div><div class="p-1 bd-highlight flex-grow-1 border-right clatext">';
	var claLIpart3 = '</div></div><div class="col-md-1 px-0 pl-4"><div class="row"><div class="col-md-12 px-0 float-right"><div class="d-flex px-3 flex-nowrap float-right"> \
<div class="p-1 align-top bd-highlight text-primary editCla">' + iconEdit + '</div><div class="p-1 align-top bd-highlight text-primary removeClaInList">' + iconClose + '</div> \
</div></div></div><div class="row"><div class="col-md-12 px-2 float-right"><div class="custom-control custom-switch p-1 text-right bd-highlight"> \
<input type="checkbox" class="custom-control-input claAct" name="cla-attiva" aria-label="attiva" id="actiClaSW';
	var claLIpart4 = '><label class="custom-control-label" for="actiClaSW';
	var claLIpart5 = '"></label></div></div></div></div></div></div></li>';

	var condLIplaceholderText1 = 'Trascina qui almeno 1 clausola o condizione';
	var condLIplaceholderText2 = 'Trascina qui almeno 2 clausole o condizioni';
	var condLIplaceholderText1d = 'Trascina qui almeno 1 clausola o condizione, oppure attiva le clausole inattive';
	var condLIplaceholderText2d = 'Trascina qui almeno 2 clausole o condizioni, oppure attiva le clausole inattive';
	var condLIplaceholderPart1 = '<li id="placeholderSort';
	var condLIplaceholderPart2 = '" class="p-1 mx-4 mb-2 mt-1 list-group-item align-items-center border text-muted small bg-light ui-state-disabled ui-state-disabled-opacity-06">';
	var condLIpart1 = '<li id="cond';
	var condLIpart2and = '" class="condLIand p-1 m-1 list-group-item align-items-center border text-muted bg-lida10"><ul id="sortable';
	var condLIpart3and = '" class="handle list-group ui-sortable"><div class="row ml-1 pr-2 justify-content-between"><div class=" pb-1 small font-weight-bold text-muted">AND</div>' + iconCloseCond + '</div>' + condLIplaceholderPart1;
	var condLIpart2or = '" class="condLIor p-1 m-1 list-group-item align-items-center border text-muted bg-lida11"><ul id="sortable';
	var condLIpart3or = '" class="handle list-group ui-sortable"><div class="row ml-1 pr-2 justify-content-between"><div class=" pb-1 small font-weight-bold text-muted">OR</div>' + iconCloseCond + '</div>' + condLIplaceholderPart1;
	var condLIpart4 = condLIplaceholderPart2 + condLIplaceholderText2 + '</li></ul></li>';


	// Variabili funzionali	
	var tabID = 0;
	var claListLen = 0;
	var condListLen = 0;
	var logicExprString = ``;
	var execQuery = ``;
	var queryFields = [];	// Contiene le intestazioni di colonna della tabella dei risultati
	var c0 = JSON.parse('{"queryText": "", "lemma_forma": "lemma", "TipoClausola": "0", "Attiva": "0"}');
	var queryJson = JSON.parse('{"EsprLogica":""}');
	queryJson.LiDaVersion = "1.0";
	queryJson.Clausola0 = c0;
	
	const myEngine = new Comunica.QueryEngine();
	const sparqlEndpoint = "https://hdnlab1.isti.cnr.it/fuseki/commediaontosintgra/query";

	// Fine variabili


	async function executeQuery(){
		$("#loader").show();
		bindingsStream = await myEngine.queryBindings(execQuery, { sources: [ { type: 'sparql', value: sparqlEndpoint }, ], });
		$("#sparqlquery").val(execQuery);
		$("#copiaQuery").prop("disabled", false);
		var resultTablePart1 = '<table id="resultTable" class="table table-striped table-bordered"><thead><tr>';
		var resultTablePart2 = '<th scope="col">#</th>';
		var resultTablePart3 = '</tr></thead><tbody>';
		var resultTablePart4 = '';
		var resultTablePart5 = '</tbody></table>';
		var resultTable = '';
		var latestVerso = '';
		var latestResult = '';
		var rowNum = 1;
		for (var i = 0; i < queryFields.length; i++) {
			resultTablePart2 = resultTablePart2 + '<th scope="col">' + queryFields[i] + '</th>';
		};
		var resultTable = resultTablePart1 + resultTablePart2 + resultTablePart3;
		$('#resultsId1').empty();
		$('#resultsId1').addClass("small pb-2")
		$("#risultatitesto").empty();
		bindingsStream.on('data', (binding) => {
			//console.log(binding.toString()); // Quick way to print bindings for testing
			//console.log(binding.has('sub')); // Will be true
			latestVerso = binding.get('Verso').value
			latestResult = rowNum + '. "' + latestVerso.replace(binding.get('Forma').value, '*' + binding.get('Forma').value + '*') + '" (' + binding.get('Cantica').value + ', ' + binding.get('Canto').value + ', Verso ' + binding.get('NumeroVerso').value +  ')\n';
			$("#risultatitesto").append(latestResult);
    		resultTablePart4 = '<tr><th scope="row" class="text-muted">' + rowNum++ + '</th>';
			for (var i = 0; i < queryFields.length; i++) {
				resultTablePart4 = resultTablePart4 + '<td class="text-muted">' + binding.get(queryFields[i]).value + "</td>";
			};
			resultTable = resultTable + resultTablePart4 + '</tr>';
			$("#loader").hide();
		});
		bindingsStream.on('end', () => {
			$("#loader").hide();
			resultTable = resultTable + resultTablePart5;
			$("#resultsId1").append(resultTable);
			$("#copiaTesto").prop("disabled", false);
			$('#resultTable').DataTable( {
				colReorder: true,
		        language: {
        	    	url: 'dataTables.it-IT.json'
        		},
        		//dom: 'Blfrtip',
        		dom: "<'row'<'col-sm-12 col-md-6'l><'col-sm-6 col-md-3'f><'col-sm-6 col-md-3 text-right'B>>" + "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
        		buttons: [ 'copy', 'excel', 'print' ]
    		});
	  		setTimeout(function(){
				buttonDiv = $("#resultsId1").find(".buttons-copy");
    			$('<label class="input-group-text"><ion-icon name="copy"></ion-icon></label>').insertBefore(buttonDiv);
			},300);
		});
	};

	// Funzione di creazione del tab delle clausole grammaticali
	function addGramCla(active){
		tabID++;
		var clone = document.getElementById("tipogrammaticaleN").cloneNode(true);
		clone.setAttribute("id","cla" + tabID);
		clone.setAttribute("data-claActive",active);
		clone.setAttribute("aria-labelledby","cla" + tabID + "-tab");
		clone.removeAttribute("style");
		$('#cla-TabContent').append(clone);
		// se non cambio l'id della select react non rileva l'evento onchange:
		$('#cla' + tabID + " #grammtypes").attr("id","grammtypes" + tabID);
		claListLen++;
		$('#tab-list').append($('<li class="nav-item" role="presentation"><a class="nav-link" id="cla' + tabID + '-tab" data-toggle="tab" href="#cla' + tabID + '" role="tab" aria-controls="cla' + tabID + '" aria-selected="false" data-claType="Grammaticale"><span class="small font-weight-bold text-lida8">' + iconFilter + '&nbsp;&nbsp;' + claListLen + '. Grammaticale</span></a></li>'));
	}
	
	// Funzione di creazione delle subclausole grammaticali basate sul valore scelto
	function addCatgramSubcla(tabPaneId,selectedValue){
		var dettagliBox = $("#" + tabPaneId + " .dettaglifiltri");
		//var dettagliBox = $(this).parent().parent().siblings(".dettaglifiltri");
		dettagliBox.html("");
		if (Object.keys(categorie).includes(selectedValue)) {
			var filtro = categorie[selectedValue]
			var keys = Object.keys(categorieJson[filtro])
			for (var key in keys) {
				var vals = categorieJson[filtro][keys[key]]
				switch (vals.length) {
        			case 2:
					var element = $('<div />');
					element.attr('class', ' d-flex flex-nowrap pr-2 mb-1 col-8 form-group form-control justify-content-between');
					var rbfieldset = $('<fieldset />');
					var flexdiv1 = $('<div />');
					var flexdiv2 = $('<div />');
					var input1 = $('<input />');
					var input2 = $('<input />');
					var label1 = $('<label />');
					var label2 = $('<label />');

					rbfieldset.attr('id', tabPaneId + keys[key]);
					rbfieldset.attr('class', 'bn');
					flexdiv1.attr('class', 'custom-control custom-radio custom-control-inline');
					flexdiv2.attr('class', 'custom-control custom-radio custom-control-inline');
					input1.attr('class', 'custom-control-input');
					input2.attr('class', 'custom-control-input');
					input1.attr('type', 'radio');
					input2.attr('type', 'radio');
					input1.attr('id', tabPaneId + vals[0]);
					input2.attr('id', tabPaneId + vals[1]);
					input1.attr('value', vals[0]);
					input2.attr('value', vals[1]);
					input1.attr('name', tabPaneId + keys[key]);
					input2.attr('name', tabPaneId + keys[key]);
					label1.attr('class', 'custom-control-label');
					label2.attr('class', 'custom-control-label');
					label1.attr('for', tabPaneId + vals[0]);
					label2.attr('for', tabPaneId + vals[1]);
					label1.append(vals[0]);
					label2.append(vals[1]);

					input1.appendTo(flexdiv1);
					input2.appendTo(flexdiv2);
					label1.appendTo(flexdiv1);
					label2.appendTo(flexdiv2);
					flexdiv1.appendTo(rbfieldset);
					flexdiv2.appendTo(rbfieldset);
					rbfieldset.appendTo(element);
					var iconR = $(iconReset);
					iconR.appendTo(element);
					element.attr('style', 'display:block');
					element.appendTo(dettagliBox);
					break;
       			case 1:
					var element = $('<div />');
					element.attr('class', ' d-flex flex-nowrap mb-1 col-4 form-group form-control');
					var rbfieldset = $('<fieldset />');
					flexdiv1 = $('<div />');
					input1 = $('<input />');
					label1 = $('<label />');
					rbfieldset.attr('id', tabPaneId + keys[key]);
					rbfieldset.attr('class', 'bn');
					flexdiv1.attr('class', 'custom-control custom-checkbox custom-control-inline');
					input1.attr('class', 'custom-control-input');
					input1.attr('type', 'checkbox');
					input1.attr('id', tabPaneId + vals[0].replace(/\s/g, ''));
					input1.attr('value', vals[0]);
					input1.attr('name', keys[key]);
					label1.attr('class', 'custom-control-label');
					label1.attr('for', tabPaneId + vals[0].replace(/\s/g, ''));
					label1.append(vals[0]);

					input1.appendTo(flexdiv1);
					label1.appendTo(flexdiv1);
					flexdiv1.appendTo(rbfieldset);
					rbfieldset.appendTo(element);
					element.attr('style', 'display:block');
					element.appendTo(dettagliBox);
					break;
       			default:
					var element = $('<div />');
					element.attr('class', ' col-8 form-group px-0 pb-1 m-0');
					var select = $('<select class="form-control custom-select"/>');
					select.attr('id', tabPaneId + keys[key]);
					select.attr('title', keys[key]);
					select.attr('name', keys[key]);
					for (var val in vals) {
						var seloption = $('<option />');
						seloption.attr('value', vals[val]);
						seloption.append(vals[val]);
						seloption.appendTo(select);
					}
					select.appendTo(element);
					element.attr('style', 'display:block');
					element.appendTo(dettagliBox);
				}
			}
		}
		if (element) {
			element.attr('style', "display: block;");
			element.appendTo(dettagliBox);	
		};
	}

	// Funzione di creazione del tab delle clausole sintattiche
	function addSyntCla(active){
		tabID++;
		var clone = document.getElementById("tiposintatticoN").cloneNode(true);
		clone.setAttribute("id","cla" + tabID);
		clone.setAttribute("data-claActive",active);
		clone.setAttribute("aria-labelledby","cla" + tabID + "-tab");
		clone.removeAttribute("style");
		$('#cla-TabContent').append(clone);
		claListLen++;
		$('#tab-list').append($('<li class="nav-item" role="presentation"><a class="nav-link" id="cla' + tabID + '-tab" data-toggle="tab" href="#cla' + tabID + '" role="tab" aria-controls="cla' + tabID + '" aria-selected="false" data-claType="Sintattico"><span class="small font-weight-bold text-lida9">' + iconFilter + '&nbsp;&nbsp;' + claListLen + '. Sintattico</span></a></li>'));
	}

	// Funzione di creazione del tab delle clausole metafore
	function addMetaCla(active){
		tabID++;
		$('#cla-TabContent').append($('<div class="tab-pane fade p-2 bg-white" data-claActive="' + active + '" id="cla' + tabID + '" role="tabpanel" aria-labelledby="cla' + tabID + '-tab" data-claType="Metafore">' + iconCheckAndClose + '<div class="text-muted form-group px-1 pb-1">Clausola <span class="text-lida3">Metafore</span> - non ancora implementata</div></div>'));
		claListLen++;
		$('#tab-list').append($('<li class="nav-item" role="presentation"><a class="nav-link" id="cla' + tabID + '-tab" data-toggle="tab" href="#cla' + tabID + '" role="tab" aria-controls="cla' + tabID + '" aria-selected="false" data-claType="Metafore"><span class="small font-weight-bold text-lida3">' + iconFilter + '&nbsp;&nbsp;' + claListLen + '. Metafore</span></a></li>'));
	}

	// Funzione di creazione del tab delle clausole dialoghi
	function addDialCla(active){
		tabID++;
		$('#cla-TabContent').append($('<div class="tab-pane fade p-2 bg-white" data-claActive="' + active + '" id="cla' + tabID + '" role="tabpanel" aria-labelledby="cla' + tabID + '-tab" data-claType="Dialoghi">' + iconCheckAndClose + '<div class="text-muted form-group px-1 pb-1">Clausola <span class="text-lida4">Dialoghi</span> - non ancora implementata</div></div>'));
		claListLen++;
		$('#tab-list').append($('<li class="nav-item" role="presentation"><a class="nav-link" id="cla' + tabID + '-tab" data-toggle="tab" href="#cla' + tabID + '" role="tab" aria-controls="cla' + tabID + '" aria-selected="false" data-claType="Dialoghi"><span class="small font-weight-bold text-lida4">' + iconFilter + '&nbsp;&nbsp;' + claListLen + '. Dialoghi</span></a></li>'));
	}

	// Funzione di creazione del tab delle clausole struttura
	function addStruCla(active){
		tabID++;
		$('#cla-TabContent').append($('<div class="tab-pane fade p-2 bg-white" data-claActive="' + active + '" id="cla' + tabID + '" role="tabpanel" aria-labelledby="cla' + tabID + '-tab" data-claType="Struttura">' + iconCheckAndClose + '<div class="text-muted form-group px-1 pb-1">Clausola <span class="text-lida5">Struttura testo</span> - non ancora implementata</div></div>'));
		claListLen++;
		$('#tab-list').append($('<li class="nav-item" role="presentation"><a class="nav-link" id="cla' + tabID + '-tab" data-toggle="tab" href="#cla' + tabID + '" role="tab" aria-controls="cla' + tabID + '" aria-selected="false" data-claType="Struttura"><span class="small font-weight-bold text-lida5">' + iconFilter + '&nbsp;&nbsp;' + claListLen + '. Struttura</span></a></li>'));
	}

	// Funzione di creazione del LI delle condizioni logiche
	function addLogicCond(condtype){
		condListLen++;
		if (condtype == "AND") {
			var LItext =  condLIpart1 + condListLen + condLIpart2and + condListLen + condLIpart3and + condListLen + condLIpart4;
		} else {
			var LItext =  condLIpart1 + condListLen + condLIpart2or + condListLen + condLIpart3or + condListLen + condLIpart4;
		}
		if ($("#H-cla0")[0]) {
			$("#H-cla0")[0].remove();	
		};
		$("#sortable0").append(LItext);
		$("#sortable" + condListLen).sortable();
		$("#sortable" + condListLen).sortable( "option", "appendTo", document.body );
		$("#sortable" + condListLen).sortable({
			items: "> li",
			handle: ".handle",
			opacity: 0.6, 
			cursor: 'move',
			update: function() {refreshSortables();}
		});
	}

	// Funzione di refresh della lista delle tab delle clausole
	function refreshTabList(){
   		var tabs=$("#tab-list li:not(:first)");
    	var len=0;
    	var textClassType = "";
    	$(tabs).each(function(){
        	len++;
        	var claType = $(this).find('a').attr("data-claType");
        	switch (claType) {
          	  case "Grammaticale":
            	textClassType = "text-lida8";
        	    break;
        	  case "Sintattico":
        	    textClassType = "text-lida9";
        	    break;
          	  case "Metafore":
            	textClassType = "text-lida3";
        	    break;
          	  case "Dialoghi":
            	textClassType = "text-lida4";
        	    break;
          	  case "Struttura":
            	textClassType = "text-lida5";
        	    break;
        	  default:
        	    textClassType = "text-lida8";
        	};
         	$(this).find('a').html('<span class="small font-weight-bold ' + textClassType + '" >' + iconFilter + '&nbsp;&nbsp;' + len + ': ' + claType + '&nbsp;&nbsp;</span>');
        	$(this).find('a').attr("data-claType", claType)
    	});
	}
	
	// Funzione di refresh della lista clausole nella tab principale e del json della query
	function refreshClaList(){
		var qText = $("form #queryText")[0].value;
		if (qText == "") {			//disattivo clausola 0 se il testo e' vuoto 
			var claActive = 0
		} else {
			var claActive = 1
		};
		var l_f = $("form #lemma_forma")[0].options[$("form #lemma_forma")[0].selectedIndex].value;
    	var tabsContent=$("#cla-TabContent").find(".tab-pane:not(:first)"); 
    	var len=0;
    	queryJson.Clausola0 = JSON.parse('{"queryText": "' + qText + '", "lemma_forma": "' + l_f + '", "TipoClausola": "0", "Attiva": "' + claActive + '"}');
    	if ($(tabsContent).length) {
    		$(tabsContent).each(function(){
				if ($("#H-cla0")[0]) {
					$("#H-cla0")[0].remove();	
				};
				len++;
				var claText = '';
				var checkInsert = '"';
				var claId = $(this).attr('id');
				var claListItemID = "H-" + claId;
				var claType = $(this).attr('data-claType');
				var claActive = $(this).attr('data-claActive');
				if (claActive > 0) {
					checkInsert = '" checked="checked"';
				};
				var jsonTextToParse = '{"queryText": "' + qText + '", "lemma_forma": "' + l_f + '", "TipoClausola": "' + claType + '", "Attiva": "' + claActive + '"';
				switch (claType) {
          	  		case "Grammaticale":
            			var gramSelect = $(this).find(".catgram");
						claText = len + ". Categoria grammaticale: " + gramSelect[0].options[gramSelect[0].selectedIndex].text + '<br><span class="small ml-3">';
						jsonTextToParse = jsonTextToParse + ', "' + gramSelect.attr('name') + '": "' + gramSelect[0].options[gramSelect[0].selectedIndex].value + '"';
						var claSubParList = $(this).children(".dettaglifiltri").find("select, fieldset");
						claSubParList.each(function(){
							var claSubParType = $(this)[0].type;
							if (claSubParType == "fieldset" && $(this).find(":checked").length) {
								var claSubParName = $(this).find(":checked")[0].name
								if (claSubParName.startsWith(claId)) {
									claSubParName = claSubParName.replace(claId,'');
								}
								claText = claText + $(this).find("[for='" + $(this).find(":checked")[0].id + "']")[0].innerText + "; ";
								jsonTextToParse = jsonTextToParse + ', "' + claSubParName + '": "' + $(this).find(":checked")[0].value + '"';
							};
							if (claSubParType == "select-one" && $(this)[0].selectedIndex != 0) {
								claText = claText + $(this)[0].options[$(this)[0].selectedIndex].text + "; ";
		        	  			jsonTextToParse = jsonTextToParse + ', "' + $(this)[0].name + '": "' + $(this)[0].options[$(this)[0].selectedIndex].value + '"';
							};
						});
         	    		break;
        	  		case "Sintattico":
        	  			var syntSelect = $(this).find("#synttypes");
;        	  			var funcSelect = $(this).find("#syntfunc");
        	  			claText = len + ". Tipo sintattico: " + syntSelect[0].options[syntSelect[0].selectedIndex].text + '; <br><span class="ml-3"">Livello di subordinazione: ' + funcSelect[0].options[funcSelect[0].selectedIndex].text;
        	  			jsonTextToParse = jsonTextToParse + ', "' + syntSelect.attr('name') + '": "' + syntSelect[0].options[syntSelect[0].selectedIndex].value + '", "' + funcSelect.attr('name') + '": "' + funcSelect[0].options[funcSelect[0].selectedIndex].value + '"';
        	    		break;
					default:
        	    		claText = len + ". " + $(this).text();
         	  			checkInsert = '" disabled';
         		};
         		var LItext =  claLIpart1 + claListItemID + claLIpart2 + claText + claLIpart3 + len + checkInsert + claLIpart4 + len + claLIpart5;
         		if ($("#" + claListItemID)[0]) {
					$("#" + claListItemID).replaceWith(LItext);
         		} else {
					$("#sortable0").append(LItext);
				};
				queryJson["Clausola" + len] = JSON.parse(jsonTextToParse + '}');
			});
			if (queryJson["Clausola" + (len + 1)])			//se vengo dalla rimozione di una clausola 
				delete queryJson["Clausola" + (len + 1)];
		} else {
			if (claListLen == 0 && condListLen == 0) {
				$('#sortable0').html(emptyClaList);
				queryJson.EsprLogica = "";
			}
			tabID = 0;
		};
	}
	
	// Funzione di refresh dei placeholders e attivazione/disattivazione bottoni nelle liste sortable
	function refreshSortables(){
		$("#sortable0").children(".claLI").each(function() {
			if ($(this).find("input")[0].checked){
				$(this).find('.clatext').css({ opacity: 1 });
			};
			if ($(this).find("input")[0].checked == false){
				$(this).find('.clatext').css({ opacity: 0.6 });
			};
		});
		$(".ui-sortable:not(:first)").each(function() {
			var sortableID = $(this)[0].id;
			var placeholderID = "#placeholderSort" + sortableID.slice(-1);
			var iconSpan = $(this).find(".iconClClass")[0];
			var iconDiv = $(iconSpan).parent()[0];
			var activeUL = $(this).children("li").children("ul").length;
			var activeLI = 0;
			var inactiveLI = 0;
			var condLIplaceholder = "";
			$(this).children("li .claLI").each(function() {
				if ($(this).find("input")[0].checked){
					activeLI++;
					$(this).find('.clatext').css({ opacity: 1 });
				};
				if ($(this).find("input")[0].checked == false){
					inactiveLI++;
					$(this).find('.clatext').css({ opacity: 0.6 });
				};
			});
			switch (activeLI + activeUL) {
        		case 0:
        			if ($(placeholderID).length) {
						if (inactiveLI > 0){
							$(placeholderID).text(condLIplaceholderText2d);
						} else {
							$(placeholderID).text(condLIplaceholderText2);
						};					
					} else {
						if (inactiveLI > 0){
							condLIplaceholder = condLIplaceholderPart1 + sortableID.slice(-1) + condLIplaceholderPart2 + condLIplaceholderText2d + '</li>';
						} else {
							condLIplaceholder = condLIplaceholderPart1 + sortableID.slice(-1) + condLIplaceholderPart2 + condLIplaceholderText2 + '</li>';
						}						
        				$("#" + sortableID).append(condLIplaceholder);
					};
					if (inactiveLI == 0){
						$(iconSpan).attr("class","iconClClass removeCond");
						$(iconDiv).attr("class","p-0 mr-1 text-right text-primary");
					};
					break;
        		case 1:
        			if ($(placeholderID).length) {
						if (inactiveLI > 0){
							$(placeholderID).text(condLIplaceholderText1d);
						} else {
							$(placeholderID).text(condLIplaceholderText1);
						};					
					} else {
						if (inactiveLI > 0){
							condLIplaceholder = condLIplaceholderPart1 + sortableID.slice(-1) + condLIplaceholderPart2 + condLIplaceholderText1d + '</li>';
						} else {
							condLIplaceholder = condLIplaceholderPart1 + sortableID.slice(-1) + condLIplaceholderPart2 + condLIplaceholderText1 + '</li>';
						}						
        				$("#" + sortableID).append(condLIplaceholder);
					};
					$(iconSpan).attr("class","iconClClass NOremoveCond");
					$(iconDiv).attr("class","p-0 mr-1 text-right text-muted");
					break;
        		case 2:
         			if ($(placeholderID).length) {
						$(placeholderID).remove();
					};
					break;
				default:
        			if ($(placeholderID).length) {
						$(placeholderID).remove();
					};
			};
		});
		logicExprString = parseCond("#sortable0", "AND");
		$("#sparqlquery").val(logicExprString);
		queryJson.EsprLogica = logicExprString.split(' ');
	};
	
	// Funzione di refresh dei collegamenti tra elementi sortable
	function refreshConnectWith(){
		for (var i=0; i <= condListLen; i++) {
			var cw = "";
			for (var j=0; j <= condListLen; j++) {
				if (i != j) {
					cw = cw + "#sortable" + j + ", ";
				};
				$( "#sortable" + i ).sortable( "option", "connectWith", cw.slice(0, -2) );
			};
		};
	};

	// Funzione di parsing delle clausole e delle condizioni logiche	
	function parseCond(sortableList, condType){
		var condText = "";
		var items = $(sortableList).children("li");
		var itemsText = [];
		$(items).each(function() {
			if ($(this).hasClass("condLIand")) {
				var andID = "#" + $(this).children("ul").attr("id");
				var andText = parseCond(andID, "AND");
				if (andText.length){
					itemsText.push(andText);
				};	
			};
			if ($(this).hasClass("condLIor")) {
				var orID =  "#" + $(this).children("ul").attr("id");
				var orText = parseCond(orID, "OR");
				if (orText.length){
					itemsText.push(orText);
				};	
			};
			if ($(this).hasClass("claLI")) {
				if ($(this).find("input")[0].checked == true){
					var claText = $(this).find(".clatext").text();
					var claNum = "Clausola" + claText.substr(0,claText.indexOf('.'));
					itemsText.push(claNum);
				};
			};
		});
		var len = itemsText.length;
		switch (len) {
        	case 0:
        		break;
        	case 1:
        		condText +=  itemsText[0];
        		break;
        	default:
        		condText = "( " + condType + " ";
				for (let i = 0; i < len; i++) {
					condText += itemsText[i] + " ";
				}
				condText +=  ")";
			};
		return condText;
	};

	$.fn.copy2clipboard = function() {
		$('div[id^="msgCopiati"]').remove();
		this.select();
		$(this).focus();
        document.execCommand("copy");
        document.getSelection().removeAllRanges();
        $(this).after('<div class="mt-2 text-lida3" id="msgCopiati">Copiati nella clipboard</div>');
	};
	
	function makeUpGui(queryJson) {
		// 1. verifica json legit --> TO DO
		// 2. pulire interfaccia --> OK
		// 3. contare clausole, ricrearle in ordine e popolarle
		// 4. ricreare condizioni logiche --> OK
		// 5. ricreare albero logico 
		// 6. ???
		// -------------------
		// 2:
		var tabsContent=$("#cla-TabContent").find(".tab-pane:not(:first)");
		var tabs=$("#tab-list li:not(:first)");
		if ($(tabsContent).length) {
    		$(tabsContent).each(function(){
				$(this).remove();
			});
    		$(tabs).each(function(){
				$(this).remove();
			});
		};
		claListLen = 0;
		condListLen = 0;
		$('#sortable0').html(emptyClaList);
		// 3:
		var logicExpr = queryJson.EsprLogica;
		var clauCount = 0;
		var clau2Make = "";
		console.log(logicExpr);
		for (var i=0; i < logicExpr.length; i++) {
			//console.log("- " + logicExpr[i]);
			switch (logicExpr[i]) {
				case "(":
					//console.log("(");
					break;
				case ")":
					//console.log(")");
					break;
				case "OR":
					//console.log("OR");
    	    		addLogicCond("OR");
					refreshConnectWith();
					break;
				case "AND":
					//console.log("AND");
    	    		addLogicCond("AND");
					refreshConnectWith();
					break;
				default:
					clauCount++
			};
		};
		for (var i=1; i <= clauCount; i++) {
			clau2Make = queryJson["Clausola" + i].TipoClausola;
			active = queryJson["Clausola" + i].Attiva
			switch (clau2Make) {
 		       	case "Grammaticale":
 		       		selectedValue = queryJson["Clausola" + i].typeGramm0;
        			addGramCla(active);
        			if (selectedValue != "all") {
	 		       		console.log(tabID + " " + selectedValue);
	 		       		console.log($("#cla" + tabID + " .catgram"));
	 		       		$("#cla" + tabID + " .catgram").val(selectedValue);
						addCatgramSubcla("cla" + tabID,selectedValue)
						// aggiungere altri valori
					}
          	    	break;
	        	case "Sintattico":
    	    		addSyntCla(active);
        		    break;
	        	case "Metafore":
    	    		addMetaCla(active);
        		    break;
        		case "Dialoghi":
	        		addDialCla(active);
        		    break;
	        	case "Struttura":
    	    		addStruCla(active);
        		    break;
/*	        	case "andCond":
    	    		addLogicCond("AND");
					refreshConnectWith();
					break;
	        	case "orCond":
    	    		addLogicCond("OR");
					refreshConnectWith();
        			break; */
        		default:
        	};
		};
		refreshTabList();
		refreshClaList();
		refreshSortables();
	};
	
});