webAdministracion/js/viewExperience.js

///// !!! viewExperience.php !!! /////



// Get tab links and tab panes
let tabLinks = document.querySelectorAll('#view-experience-tabs a');
let tabPanes = document.querySelectorAll('.main-content-box');



// Add event listener to all tab links
// tabLinks.forEach(tabLink => {
// 	tabLink.addEventListener('click', tabChange);
// });
window.onload = tabChange;
window.onhashchange = tabChange;



// Add selected link style and remove those who were not selected
function tabChange() {

	let hash = document.location.hash;
	
	validHashes = ['#calendar', '#questionnaires', '#moments', '#milestones'];
	
	if(!validHashes.includes(hash)) {
		hash = '#calendar';
	}

    // Change the style of the links
    tabLinks.forEach(tabLink => {
    	if(tabLink.hash === hash) {//tabLink === e.target
    		tabLink.classList.add('active');
    	} else {
    		tabLink.classList.remove('active');
    	}
    });

    // Change the opacity of each of the panes
    tabPanes.forEach(tabPane => {
    	if(tabPane.id === hash.substring(1)) {// tabPane.id === e.target.hash.substring(1)
			tabPane.classList.add('show');
    	} else {
    		tabPane.classList.remove('show');
    	}
    });
    
    // Re-render calendar
    if(calendar && hash === '#calendar') {
    	calendar.render();
    }

}

		
		








function newThing(e) {
	let type = e.currentTarget.value;
	let range = e.currentTarget.parentNode.parentNode.parentNode.nextElementSibling; // get the 4 (optional) inputs for scaled-type questions
	range.style.display = (type === "1") ? 'block' : 'none'; // "1" corresponds to scaled questions
}
	
	
	
// Add Question to Questionnaire							
var Questions = 1;
function addQuestion() {
	// We add a linebreak so that there is space between each dropdown list
	var br = document.createElement("br");
	document.querySelector('#q'+Questions).parentElement.lastElementChild.previousElementSibling.previousElementSibling.insertAdjacentElement('afterend', br);

	// We create a copy of the dropdown list we already have, so multiple questions can be added at the same time.
	var newQuestion = document.getElementById("q"+Questions);
	var clone = newQuestion.cloneNode(true);

	//The clones will have the same name as the original but with a number that will distinguish them
	var newName = 'q' + Number(Questions + 1);
	clone.id = newName;
								
	document.querySelector('#q'+Questions).parentElement.lastElementChild.previousElementSibling.previousElementSibling.insertAdjacentElement('afterend', clone);
    							
	document.querySelector('#'+newName+' h4').innerHTML = 'Question '+Number(Questions+1);
    							
	document.querySelector('#'+newName+' #q_premise'+Questions).name = 'q_premise'+Number(Questions+1);
	document.querySelector('#'+newName+' #q_premise'+Questions).id = 'q_premise'+Number(Questions+1);
			
	// Get the question type before changing it's name/id (for some reason it doesn't pass it on)
	let type = $(newQuestion).find("#q_type"+Questions).val();
	document.querySelector('#'+newName+' #q_type'+Questions).value = type;
	document.querySelector('#'+newName+' #q_type'+Questions).name = 'q_type'+Number(Questions+1);
	document.querySelector('#'+newName+' #q_type'+Questions).id = 'q_type'+Number(Questions+1);
	
	// Depending on the question type, display or hide min/max values/labels
	if(type == "1") {
		document.querySelector('#'+newName+' #range'+Questions).style.display = "block";
	} else if(type == "2") {
		document.querySelector('#'+newName+' #range'+Questions).style.display = "none";
	}
	
	document.querySelector('#'+newName+' #range'+Questions).id = 'range'+Number(Questions+1);
								
	document.querySelector('#'+newName+' #min_val'+Questions).name = 'min_val'+Number(Questions+1);
	document.querySelector('#'+newName+' #min_val'+Questions).id = 'min_val'+Number(Questions+1);
								
	document.querySelector('#'+newName+' #min_text'+Questions).name = 'min_text'+Number(Questions+1);
	document.querySelector('#'+newName+' #min_text'+Questions).id = 'min_text'+Number(Questions+1);
    							
	document.querySelector('#'+newName+' #max_val'+Questions).name = 'max_val'+Number(Questions+1);
	document.querySelector('#'+newName+' #max_val'+Questions).id = 'max_val'+Number(Questions+1);

	document.querySelector('#'+newName+' #max_text'+Questions).name = 'max_text'+Number(Questions+1);
	document.querySelector('#'+newName+' #max_text'+Questions).id = 'max_text'+Number(Questions+1);

	// Get the question type before changing it's name/id (for some reason it doesn't pass it on)
	let category = $(newQuestion).find("#q_category"+Questions).val();
	document.querySelector('#'+newName+' #q_category'+Questions).value = category;
	document.querySelector('#'+newName+' #q_category'+Questions).name = 'q_category'+Number(Questions+1);
	document.querySelector('#'+newName+' #q_category'+Questions).id = 'q_category'+Number(Questions+1);

	// Get the question type before changing it's name/id (for some reason it doesn't pass it on)
	let subcategory = $(newQuestion).find("#q_subcategory"+Questions).val();
	document.querySelector('#'+newName+' #q_subcategory'+Questions).value = subcategory;
	document.querySelector('#'+newName+' #q_subcategory'+Questions).name = 'q_subcategory'+Number(Questions+1);
	document.querySelector('#'+newName+' #q_subcategory'+Questions).id = 'q_subcategory'+Number(Questions+1);
								
	Questions++;
	
// 	$('[form]:not(button[form])').keypress(function(event){if (event.which == '13') { event.preventDefault(); } } );
	
}



// For new questionnaires, create the dropdown for category selection
let categoriesString = document.querySelector('#q_categories_tentative');
categoriesString.addEventListener('change', function() {

	// split input by commas
	let x = document.getElementById('q_categories_tentative').value.split(',');
	let y;// = '<option disabled selected>Category</option>';
		
	// clear any whitespace from each word in the split input
	for(let i = 0; i < x.length; i++) {
		x[i] = x[i].trim();
		
		// if string not empty and not whitespace, insert as category option
		if(/\S/.test(x[i])) {
			y += '<option value="'+x[i]+'">'+x[i]+'</option>';
		}
	}
	
	// change the selectable categories
	$("[id^=q_category]").html(y);

});



// For new questionnaires, create the dropdowns for subcategory selection
let subcategoriesString = document.querySelector('#q_subcategories_tentative');
subcategoriesString.addEventListener('change', function() {

	// split input by commas
	let x = document.getElementById('q_subcategories_tentative').value.split(',');
	let y;// = '<option disabled selected>Subcategory</option>';
		
	// clear any whitespace from each word in the split input
	for(let i = 0; i < x.length; i++) {
		x[i] = x[i].trim();
		
		// if string not empty and not whitespace, insert as category option
		if(/\S/.test(x[i])) {
			y += '<option value="'+x[i]+'">'+x[i]+'</option>';
		}
	}
	
	// change the selectable categories
	$("[id^=q_subcategory]").html(y);

});



// For new moments, create the dropdowns for question selection
let correspondingQuestionnaire = document.querySelector('select#m_questionnaire');
correspondingQuestionnaire.addEventListener('change', function() {
	$.post(document.location.protocol + "//tania.uprrp.edu/admin_nuevo/special.php",
		{
			id_questionnaire: correspondingQuestionnaire.value
		},
		function(data, status) {
			$("select[id^=m_question_]").html(data);
		}
	);
});



// Target the input fields to be updated
let newStartDate = document.querySelector('input[name=newStart]');
let newEndDate = document.querySelector('input[name=newEnd]');
let newDuration = document.querySelector('input[name=newDuration]');



var selectableQuestions = 1;
function addSelectableQuestion() {

	var br = document.createElement("br");
	document.querySelector('#qq'+selectableQuestions).parentElement.lastElementChild.previousElementSibling.previousElementSibling.insertAdjacentElement('afterend', br);
	
	// We create a copy of the dropdown list we already have, so multiple questions can be added at the same time.
	var newQuestion = document.getElementById("qq"+selectableQuestions);
	var clone = newQuestion.cloneNode(true);

	//The clones will have the same name as the original but with a number that will distinguish them
	var newName = 'qq' + Number(selectableQuestions + 1);
	clone.id = newName;
	
	document.querySelector('#qq'+selectableQuestions).parentElement.lastElementChild.previousElementSibling.previousElementSibling.insertAdjacentElement('afterend', clone);
    							
	document.querySelector('#'+newName+' h4').innerHTML = 'Question '+Number(selectableQuestions+1);
    							
	document.querySelector('#'+newName+' #m_question_'+selectableQuestions).name = 'm_question_'+Number(selectableQuestions+1);
	document.querySelector('#'+newName+' #m_question_'+selectableQuestions).id = 'm_question_'+Number(selectableQuestions+1);
								
	selectableQuestions++;
	
// 	$('[form]:not(button[form])').keypress(function(event){if (event.which == '13') { event.preventDefault(); } } );

}