<?php
// Description: EXTRACT EXPERIENCE ID, AND IF VALID, DISPLAY ITS INFO
require_once 'processes/config.php';
require_once 'processes/dbh.inc.php';
require_once 'processes/checkLogin.php';
// IF VIEW VARIABLE NOT GIVEN, EXIT
if(!isset($_GET['view'])) {
exit();
}
// FETCH EXPERIENCE
$experienceID = mysqli_real_escape_string($connection, trim($_GET['view']));
$query1 = "SELECT * FROM `experience` WHERE `id` = '$experienceID';";
$result1 = mysqli_query($connection, $query1) or die("Error: ".mysqli_error($connection));
$row1 = mysqli_fetch_array($result1);
// IF EXPERIENCE NOT IN DATABASE, EXIT
if($result1->num_rows !== 1) {
echo "Requested experience does not exist.";
exit();
}
// IF EXPERIENCE DOESN'T BELONG TO USER (WHO IS NOT AN ADMIN), EXIT
if($_SESSION['dbUserData']['admin'] !== '1') {
$queryCheckUser = "SELECT id FROM experience WHERE id = '$experienceID' AND id IN (SELECT id_experience FROM researcher_experience WHERE id_researcher = '" . $_SESSION['dbUserData']['id_researcher'] . "');";
if(mysqli_query($connection, $queryCheckUser)->num_rows === 0) {
echo "You are not authorized to view this experience.";
exit();
}
}
include_once 'header.php';
?>
<!--START OF viewExperience.php -->
<body>
<header id="main-header">
<a id="logo" href=".">
TANIA
<img src="./img/pen_800x800.png" alt="tania logo pen" width="25" height="25">
</a>
<div id="account">
<a class="sign-out" href="./processes/logout.php">Sign Out</a>
</div>
</header>
<div class="container-fluid" id="view-experience-showcase">
<div class="row">
<div class="col-sm-12">
<h2><?php echo $row1['title']; ?></h2>
<div class="row">
<div class="col-sm-7 col-md-8 col-lg-9">
<blockquote style="color:rgb(216,216,216); margin: 0;">
<h4><b style="color:#fff;">Description:</b> <span style="color:rgb(216,216,216);"><?php echo $row1['description']; ?></span></h4>
<h4><b style="color:#fff;">Type:</b> <span style="color:rgb(216,216,216);"><?php echo $row1['type']; ?></span></h4>
<h4><b style="color:#fff;">Duration:</b> <span style="color:rgb(216,216,216);"><?php echo $row1['duration_weeks']; ?> week<?php if((int)$row1['duration_weeks'] > 1) echo "s"; ?></span></h4>
</blockquote>
</div><!--col-->
<div class="col-sm-5 col-md-4 col-lg-3">
<div id="view-experience-buttons">
<div data-toggle="tooltip" data-placement="top" title="View Results" id="experience-pen" onclick="window.location='respuestas.php?exp=<?php echo $experienceID; ?>'">
<span class="fas fa-poll-h"></span>
</div>
<div data-toggle="tooltip" data-placement="top" title="Edit Experience" id="experience-pen" onclick="nextModal('#Edit')">
<span class="fas fa-pen"></span>
</div>
<div data-toggle="tooltip" data-placement="top" title="Share Experience" id="experience-pen" onclick="prompt('Press Ctrl + C to copy to clipboard!','https://tania.uprrp.edu/enrollInExp.php?id=<?php echo $row1['hash_id']; ?>')">
<span class="fas fa-link"></span>
</div>
</div>
</div><!--col-->
</div><!--row-->
<br>
<div class="row hidden-xs" id="view-experience-tabs">
<a class="active" href="#calendar">Calendar</a>
<a href="#questionnaires">Questionnaires</a>
<a href="#moments">Moments</a>
<a href="#milestones">Milestones</a>
</div><!--row-->
</div><!--col-->
</div><!--row-->
</div><!--container-->
<br>
<!-- CALENDAR-->
<div id="calendar" class="main-content-box show hidden-xs">
<div class="container">
<div class="row">
<h3 class="col-sm-12">Schedule Your Experience</h3>
</div><!--row-->
<br>
<div class="row">
<div class="col-sm-12">
<div id="actualCalendar"></div>
</div>
</div>
<br><br><br><br>
</div><!--container-->
</div>
<!--QUESTIONNAIRES-->
<div id="questionnaires" class="main-content-box">
<div class="container">
<div class="row">
<h3 class="col-xs-7 col-sm-9 col-md-9">Active Questionnaires</h3>
<div class="col-xs-5 col-sm-3 col-md-3">
<!--
<span data-toggle="modal" data-target="#Import" style="margin-right: 1em;">
<button type="button" class="btn btn-lg btn-default" data-toggle="tooltip" data-placement="top" title="Import Questionnaire">
<span class="glyphicon glyphicon-open-file"></span>
</button>
</span>
<span data-toggle="modal" data-target="#Duplicate">
<button type="button" class="btn btn-lg btn-default" data-toggle="tooltip" data-placement="top" title="Duplicate Questionnaire">
<span class="glyphicon glyphicon-paste"></span>
</button>
</span>
-->
<div id="view-experience-buttons">
<div data-toggle="tooltip" data-placement="top" title="Import Questionnaire" id="experience-pen" onclick="nextModal('#Import')" style="padding: 0.5em; margin: 0 auto; width: 60px;">
<span class="fas fa-file-import"></span>
</div>
<div data-toggle="tooltip" data-placement="top" title="Duplicate Questionnaire" id="experience-pen" onclick="nextModal('#Duplicate')" style="padding: 0.5em; margin: 0 auto; width: 60px;">
<span class="fas fa-copy"></span>
</div>
</div>
</div>
</div><!--row-->
<br>
<div class="row">
<div class="col-sm-12">
<?php
$query2 = "SELECT * FROM questionnair WHERE `id` IN (SELECT `id_questionnair` FROM experience_questionnair WHERE `id_experience` = '$experienceID');";
$result2 = mysqli_query($connection, $query2);
// IF THE EXPERIENCE HAS AT LEAST ONE QUESTIONNAIRE ASSOCIATED TO IT, SHOW IT
// ELSE, DISPLAY A MESSAGE TO THE USER LETTING THEM KNOW THEY DON'T HAVE ONE
if(mysqli_num_rows($result2) > 0):
?>
<table class="table table-hover table-striped table-responsive">
<thead>
<tr>
<th style="text-align: center;"><h4>Questionnaire</h4></th>
<th style="text-align: center;"><h4>Questions</h4></th>
</tr>
</thead>
<tbody>
<?php while($row2 = mysqli_fetch_assoc($result2)): ?>
<tr style="cursor: pointer;" onclick="location='viewQuestionnaire.php?view=<?php echo $row2['id']?>'">
<td style="text-align: center;"><h5><?php echo $row2['q_title']; ?></h5></td>
<?php
$query3 = "SELECT * FROM questionnair_question WHERE id_questionnair = ".$row2['id'];
$result3 = mysqli_query($connection, $query3);
?>
<td style="text-align: center;"><h5><?php echo mysqli_num_rows($result3); ?></h5></td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
<?php else: ?>
<h3 class="text-center"><small>It seems you still haven't added a questionnaire to this experience...</small></h3>
<?php endif; ?>
<br>
<div class="row">
<div class="col-sm-2 col-sm-offset-5">
<div data-toggle="tooltip" data-placement="top" title="Create Questionnaire" onclick="nextModal('#NewQuestionnaire')" id="experience-pen" style="padding: 0.5em; margin: 0 auto; width: 60px;">
<span class="fas fa-plus"></span>
</div>
</div>
</div>
</div><!--col-sm-12-->
</div><!--row-->
<br><br>
<div class="row">
<div class="col-sm-offset-2 col-sm-8">
<div class="alert alert-warning alert-dismisible mb-1 hidden-xs" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4>Tips on Questionnaires</h4>
<hr>
<ul>
<li>These are the questionnaires that are associated to this experience.</li>
<br>
<li>Once you have your questionnaire, you can create your moments.</li>
<br>
<li>You can create new questionnaires with the plus button...
<ul>
<li>or import questionnaires from an Excel file!</li>
<li>or copy a questionnaire from one experience to another!</li>
</ul>
</li>
<br>
</ul>
</div><!--alert-->
</div><!--col-sm-8-->
</div><!--row-->
<br>
</div><!--container-->
</div>
<!--MOMENTS-->
<div id="moments" class="main-content-box">
<div class="container">
<div class="row">
<h3 class="col-sm-12">Active Moments</h3>
</div>
<div class="row">
<div class="col-sm-12">
<?php
$query4 = "SELECT * FROM subquestionnair WHERE `id_questionnair` IN (SELECT `id_questionnair` FROM experience_questionnair WHERE `id_experience` = '$experienceID') ORDER BY date_to_administer ASC;";
$result4 = mysqli_query($connection, $query4);
// IF THE EXPERIENCE HAS AT LEAST ONE MOMENT ASSOCIATED TO IT, SHOW IT
// ELSE, DISPLAY A MESSAGE TO THE USER LETTING THEM KNOW THEY DON'T HAVE ONE
if(mysqli_num_rows($result4) > 0):
?>
<table class="table table-hover table-striped table-responsive">
<thead>
<tr>
<th style="text-align: center;"><h4>Moment</h4></th>
<th style="text-align: center;"><h4>Questions</h4></th>
<th style="text-align: center;"><h4>Date</h4></th>
</tr>
</thead>
<tbody>
<?php while($row4 = mysqli_fetch_assoc($result4)): ?>
<tr style="cursor: pointer;" onclick="location='viewMoment.php?view=<?php echo $row4['id']?>'">
<td style="text-align: center;"><h5><?php echo $row4['title']; ?></h5></td>
<?php
$query5 = "SELECT * FROM subquestionnair_question WHERE `id_subquestionnair` = ".$row4['id'];
$result5 = mysqli_query($connection, $query5);
?>
<td style="text-align: center;"><h5><?php echo mysqli_num_rows($result5); ?></h5></td>
<td style="text-align: center;"><h5><?php echo date("M j, Y (g:i A)", strtotime($row4['date_to_administer'])); ?></h5></td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
<?php else: ?>
<h3 class="text-center"><small>It seems you still haven't added any moments to this experience...</small></h3>
<?php endif; ?>
<br>
<div class="row">
<div class="col-sm-2 col-sm-offset-5">
<div data-toggle="tooltip" data-placement="top" title="Create Moment" onclick="nextModal('#NewMoment')" id="experience-pen" style="padding: 0.5em; margin: 0 auto; width: 60px;">
<span class="fas fa-plus"></span>
</div>
</div>
</div>
</div><!--col-sm-12-->
</div><!--row-->
<br><br>
<div class="row">
<div class="col-sm-offset-2 col-sm-8">
<div class="alert alert-warning alert-dismisible mb-1 hidden-xs" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4>Tips on Moments</h4>
<hr>
<ul>
<li>These are the moments that are associated to this experience.</li>
<br>
<li>Once they're answered, you can track the results with the results button above.</li>
<br>
<li>You can create new moments with the plus button.</li>
<br>
</ul>
</div><!--alert-->
</div><!--col-sm-8-->
</div><!--row-->
<br>
</div><!--container-->
</div>
<!--MILESTONES-->
<div id="milestones" class="main-content-box">
<div class="container">
<div class="row">
<h3 class="col-sm-12">Active Milestones</h3>
</div>
<div class="row">
<div class="col-sm-12">
<?php
$query6 = "SELECT * FROM `milestone` WHERE `id_experience` = '$experienceID' ORDER BY date ASC;";
$result6 = mysqli_query($connection, $query6);
// IF THE EXPERIENCE HAS AT LEAST ONE MILESTONE ASSOCIATED TO IT, SHOW IT
// ELSE, DISPLAY A MESSAGE TO THE USER LETTING THEM KNOW THEY DON'T HAVE ONE
if(mysqli_num_rows($result6) > 0):
?>
<table class="table table-hover table-striped table-responsive">
<thead>
<tr>
<th style="text-align: center;"><h4>Milestone</h4></th>
<th style="text-align: center;"><h4>Date</h4></th>
</tr>
</thead>
<tbody>
<?php while($row6 = mysqli_fetch_assoc($result6)): ?>
<tr style="cursor: pointer;">
<td style="text-align: center;"><h5><?php echo $row6['title']; ?></h5></td>
<td style="text-align: center;"><h5><?php echo date("M j, Y", strtotime($row6['date'])); ?></h5></td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
<?php else: ?>
<h3 class="text-center"><small>It seems you still haven't added any milestones to this experience...</small></h3>
<?php endif; ?>
<br>
<div class="row">
<div class="col-sm-2 col-sm-offset-5">
<div data-toggle="tooltip" data-placement="top" title="Create Milestone" onclick="nextModal('#NewMilestone')" id="experience-pen" style="padding: 0.5em; margin: 0 auto; width: 60px;">
<span class="fas fa-plus"></span>
</div>
</div>
</div>
</div><!--col-sm-12-->
</div><!--row-->
<br><br>
<div class="row">
<div class="col-sm-offset-2 col-sm-8">
<div class="alert alert-warning alert-dismisible mb-1 hidden-xs" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4>Tips on Milestones</h4>
<hr>
<ul>
<li>These are the milestones of the students involved in this experience.</li>
<br>
<li>Once your moments are answered you can track the impact the milestones had on the answers, if any.</li>
<br>
<li>You can create new milestones with the plus button.</li>
<br>
</ul>
</div><!--alert-->
</div><!--col-sm-8-->
</div><!--row-->
<br>
</div><!--container-->
</div>
<br><br><br><br><br>
<!-- POPUP FOR EDIT EXPERIENCE -->
<form id="editForm"><!--method='POST' action='processes/updateExperience.php'-->
<div class="modal fade" id="Edit" tabindex="-1" role="dialog" aria-labelledby="EditLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<!-- CLOSE BUTTON -->
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="row">
<div class="col-sm-10">
<h2>Edit Experience <small>(Basic Info)</small></h2>
</div>
</div><!--row-->
<hr><br>
<div class="form-horizontal">
<!-- ID -->
<input type="hidden" name="id" value="<?php echo $row1['id']; ?>">
<!-- NEW TITLE -->
<div class="form-group">
<label class="control-label col-sm-2 col-sm-offset-1">Title:</label>
<div class="col-sm-7">
<input type="text" class="form-control text-center" name="newTitle" maxlength="60" value="<?php echo $row1['title']; ?>" required>
</div>
</div>
<!-- NEW DESCRIPTION -->
<div class="form-group">
<label class="control-label col-sm-2 col-sm-offset-1">Description:</label>
<div class="col-sm-7">
<textarea class="form-control text-center" name="newDescription" rows="4" style="resize: vertical;" maxlength="100" required><?php echo $row1['description']; ?></textarea>
</div>
</div>
<!--
<!~~ NEW TYPE ~~>
<div class='form-group'>
<label class='control-label col-sm-2 col-sm-offset-1'>Type:</label>
<div class='col-sm-7'>
<input type='text' class='form-control text-center' name='newType' required value="<?php echo $row1['type']; ?>">
</div>
</div>
<!~~ NEW DURATION ~~>
<div class='form-group'>
<label class='control-label col-sm-2 col-sm-offset-1'>Duration:</label>
<div class='col-sm-7'>
<input type='number' class='form-control text-center' name='newDuration' required value="<?php echo $row1['duration_weeks']; ?>" readonly>
</div>
</div>
<!~~ NEW START DATE ~~>
<div class='form-group'>
<label class='control-label col-sm-2 col-sm-offset-1'>Start Date:</label>
<div class='col-sm-7'>
<input type='date' class='form-control text-center' name='newStart' required value="<?php echo $row1['start_date']; ?>">
</div>
</div>
<!~~ NEW END DATE ~~>
<div class='form-group'>
<label class='control-label col-sm-2 col-sm-offset-1'>End Date:</label>
<div class='col-sm-7'>
<input type='date' class='form-control text-center' name='newEnd' required value="<?php echo $row1['end_date']; ?>">
</div>
</div>
-->
</div><!--form-horizontal-->
<!-- ERROR ALERT FOR USER -->
<div id="error-editForm" class="row" style="display: none;">
<div class="col-sm-12">
<div class="alert alert-danger mb-1" role="alert">
<h4 class="error-lead">Error!</h4>
<p class="error-description"></p>
</div>
</div>
</div>
</div><!--modal-body-->
<!-- SUBMIT OR CANCEL -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary" name="updateExperience" disabled>Save Changes</button>
</div>
</div><!--modal-content-->
</div><!--modal-dialog-->
</div><!--modal-->
</form><!--form-->
<!--FORM VALIDATION FOR EDIT EXPERIENCE-->
<script>
let newTitle = document.querySelector('[name=newTitle]');
let newDescription = document.querySelector('[name=newDescription]');
// let newType = document.querySelector('[name=newType]');
newTitle.addEventListener('keyup', validateEditExperience);
newTitle.addEventListener('change', validateEditExperience);
newDescription.addEventListener('keyup', validateEditExperience);
newDescription.addEventListener('change', validateEditExperience);
// newType.addEventListener('keyup', validateEditExperience);
// newType.addEventListener('change', validateEditExperience);
// Only enable submit button when:
// 1) changes are detected,
// 2) and both strings (title and description) are not empty
function validateEditExperience() {
let updateExperience = document.querySelector('[name=updateExperience]');
updateExperience.disabled = !newTitle.checkValidity() || !newDescription.checkValidity();
}
</script>
<!-- POPUP FOR NEW QUESTIONNAIRE 1 -->
<div class="modal fade" id="NewQuestionnaire" tabindex="-1" role="dialog" aria-labelledby="NewQuestionnaireLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-body">
<!-- CLOSE BUTTON -->
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden='true'>×</span>
</button>
<div class="row">
<div class="col-sm-10">
<h2>New Questionnaire <small>(Basic Info – <em>Part 1</em>)</small></h2>
</div>
</div><!--row-->
<hr><br>
<div class="form-horizontal">
<!-- TITLE -->
<div class="form-group">
<label class="control-label col-sm-2">Title:</label>
<div class="col-sm-9">
<input type="text" class="form-control text-center" name="q_title_tentative" placeholder="Title" maxlength="100" required>
</div>
</div>
<!-- DESCRIPTION -->
<div class="form-group">
<label class="control-label col-sm-2">Description:</label>
<div class="col-sm-9">
<textarea class="form-control text-center" name="description_tentative" rows="1" placeholder="Description" maxlength="200" required></textarea>
</div>
</div>
<!-- REFERENCE -->
<div class="form-group">
<label class="control-label col-sm-2">Reference:</label>
<div class="col-sm-9">
<input type="text" class="form-control text-center" name="referencia_tentative" placeholder="Reference" maxlength="60" required>
</div>
</div>
<br>
<!-- CATEGORIES -->
<div class="form-group">
<label class="control-label col-sm-2">Categories:</label>
<div class="col-sm-9">
<textarea id="q_categories_tentative" class="form-control text-center" name="q_categories_tentative" rows="1" placeholder="Categories (comma separated)" required></textarea>
</div>
</div>
<!-- SUBCATEGORIES -->
<div class="form-group">
<label class="control-label col-sm-2">Subcategories:</label>
<div class="col-sm-9">
<textarea id="q_subcategories_tentative" class="form-control text-center" name="q_subcategories_tentative" rows="1" placeholder="Subcategories (comma separated)" required></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col col-sm-offset-2 col-sm-9">
<p class="alert alert-warning text-justify">
<strong>Note:</strong> You should at least have the same number of subcategories as categories.
</p>
</div>
</div>
</div><!--modal-body-->
<!-- NEXT OR CANCEL -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button id="nextQuestionnaire" type="button" class='btn btn-primary' data-dismiss="modal" onclick="nextModal('#NewQuestionnaire_2')" disabled>Next</button>
</div>
</div><!--modal-content-->
</div><!--modal-dialog-->
</div><!--modal-->
<!-- FORM VALIDATION FOR NEW QUESTIONNAIRE (BASIC INFO) -->
<script>
// Fetch the inputs in the first modal
let questionnaireTitle = document.querySelector('[name=q_title_tentative]');
let questionnaireDescription = document.querySelector('[name=description_tentative]');
let questionnaireReference = document.querySelector('[name=referencia_tentative]');
let categories = document.querySelector('[name=q_categories_tentative]');
let subcategories = document.querySelector('[name=q_subcategories_tentative]');
// Add onchange and onkeyup event listeners to each input in the first modal
questionnaireTitle.addEventListener('keyup', validateNewQuestionnaire);
questionnaireTitle.addEventListener('change', validateNewQuestionnaire);
questionnaireDescription.addEventListener('keyup', validateNewQuestionnaire);
questionnaireDescription.addEventListener('change', validateNewQuestionnaire);
questionnaireReference.addEventListener('keyup', validateNewQuestionnaire);
questionnaireReference.addEventListener('change', validateNewQuestionnaire);
categories.addEventListener('keyup', validateNewQuestionnaire);
categories.addEventListener('change', validateNewQuestionnaire);
subcategories.addEventListener('keyup', validateNewQuestionnaire);
subcategories.addEventListener('change', validateNewQuestionnaire);
// Pass the values from the first modal to the second, where the actual (hidden) inputs reside
questionnaireTitle.addEventListener('keyup', function() {
document.querySelector('[name=q_title]').value = questionnaireTitle.value;
});
questionnaireDescription.addEventListener('keyup', function() {
document.querySelector('[name=description]').value = questionnaireDescription.value;
});
questionnaireReference.addEventListener('keyup', function() {
document.querySelector('[name=referencia]').value = questionnaireReference.value;
});
categories.addEventListener('keyup', function() {
document.querySelector('[name=q_categories]').value = categories.value;
});
subcategories.addEventListener('keyup', function() {
document.querySelector('[name=q_subcategories]').value = subcategories.value;
});
// First modal's validation function
// This basically enables the "Next" button if certain conditions are met
function validateNewQuestionnaire() {
// Fetch "Next" button in modal
let nextButton = document.querySelector('#nextQuestionnaire');
// Check validity of each input (valid if not empty strings)
let validity = questionnaireTitle.checkValidity();
validity &= questionnaireDescription.checkValidity();
validity &= questionnaireReference.checkValidity();
validity &= categories.checkValidity();
validity &= subcategories.checkValidity();
// Questionnaire should have at least the same number of subcategories as categories
let rawCategories = categories.value.split(',');
let rawSubcategories = subcategories.value.split(',');
let categoriesArray = new Array();
let subcategoriesArray = new Array();
// IF clause is necessary to avoid array WARNINGS and ERRORS
if(categories.value != '' && subcategories.value != '') {
// Store the "trimmed" categories in categoriesArray
for(let i = 0; i < rawCategories.length; i++) {
rawCategories[i] = rawCategories[i].trim();
// if string not empty and not whitespace, insert as category option
if(/\S/.test(rawCategories[i])) {
categoriesArray.push(rawCategories[i]);
}
}
// Store the "trimmed" subcategories in subcategoriesArray
for(let i = 0; i < rawSubcategories.length; i++) {
rawSubcategories[i] = rawSubcategories[i].trim();
// if string not empty and not whitespace, insert as subcategory option
if(/\S/.test(rawSubcategories[i])) {
subcategoriesArray.push(rawSubcategories[i]);
}
}
// Only valid if there are less or equal number of categories to subcategories
validity &= categoriesArray.length <= subcategoriesArray.length;
}
// Disabled if not valid, enabled otherwise
nextButton.disabled = !validity;
}
</script>
<form id="newQuestionnaire"><!--method="POST" action="processes/insertQuestionnaire.php"-->
<!-- POPUP FOR NEW QUESTIONNAIRE 2 -->
<div class="modal fade" id="NewQuestionnaire_2" tabindex="-1" role="dialog" aria-labelledby="NewQuestionnaireLabel_2" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-body">
<!-- CLOSE BUTTON -->
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="row">
<div class="col-sm-10">
<h2>New Questionnaire <small>(Questions – <em>Part 2</em>)</small></h2>
</div>
</div><!--row-->
<hr>
<!-- EXPERIENCE ID -->
<input type="hidden" name="id_experience" value="<?php echo $experienceID; ?>">
<!-- QUESTIONNAIRE TITLE -->
<input type="hidden" name="q_title" maxlength="100" required>
<!-- QUESTIONNAIRE DESCRIPTION --->
<input type="hidden" name="description" maxlength="200" required>
<!-- QUESTIONNAIRE REFERENCE -->
<input type="hidden" name="referencia" maxlength="60" required>
<!-- QUESTIONNAIRE CATEGORIES -->
<input id="q_categories" type="hidden" name="q_categories" required>
<!-- QUESTIONNAIRE SUBCATEGORIES -->
<input id="q_subcategories" type="hidden" name="q_subcategories" required>
<!-- QUESTION -->
<div id="q1">
<div class="row">
<div class="col col-sm-offset-1">
<h4>Question 1</h4>
</div>
</div>
<div class="form-horizontal">
<!-- PREMISE -->
<div class="form-group">
<label class="col-sm-offset-1 control-label col-sm-2">Premise:</label>
<div class="col-sm-8">
<input id="q_premise1" type="text" class="form-control text-center" name="q_premise1" placeholder="Premise" maxlength="600" required>
</div>
</div>
<!-- TYPE -->
<div class="form-group">
<label class="col-sm-offset-1 control-label col-sm-2">Question Type:</label>
<div class="col-sm-8">
<select class="form-control text-center" id="q_type1" name="q_type1" style="width:100%; text-align-last:center;" onchange="newThing(event)" required>
<!-- <option disabled selected value="">Type</option> -->
<option value="1">Scaled</option>
<option value="2">Open Answer</option>
</select>
</div>
</div>
</div>
<!-- MIN/MAX VALUES/TEXT (OPTIONAL) -->
<div id="range1">
<div class="form-inline col col-sm-offset-2">
<div class="form-group">
<label class="control-label col-sm-2">Min. Value:</label>
<div class="col-sm-8">
<input type="number" class="form-control text-center" id="min_val1" name="min_val1" value="1" readonly>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Min. Text:</label>
<div class="col-sm-8">
<input type="text" class="form-control text-center" id="min_text1" name="min_text1" maxlength="40" placeholder="Very Dissatisfied">
</div>
</div>
</div>
<div class="form-inline col col-sm-offset-2">
<div class="form-group">
<label class="control-label col-sm-2">Max. Value:</label>
<div class="col-sm-1">
<input type="number" class="form-control text-center" id="max_val1" name="max_val1" value="5" min="2">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Max. Text:</label>
<div class="col-sm-1">
<input type="text" class="form-control text-center" id="max_text1" name="max_text1" maxlength="40" placeholder="Very Satisfied">
</div>
</div>
</div>
<br>
</div>
<div class="form-horizontal">
<!-- CORRESPONDING CATEGORY -->
<div class="form-group">
<label class="col-sm-offset-1 control-label col-sm-2">Category:</label>
<div class="col-sm-8">
<select class="form-control text-center" id="q_category1" name="q_category1" style="width: 100%; text-align-last:center;" required>
<!-- <option disabled selected value="">Category</option> -->
</select>
</div>
</div>
<!-- CORRESPONDING SUBCATEGORY -->
<div class="form-group">
<label class="col-sm-offset-1 control-label col-sm-2">Subcategory:</label>
<div class="col-sm-8">
<select class="form-control text-center" id="q_subcategory1" name="q_subcategory1" style="width: 100%; text-align-last:center;" required>
<!-- <option disabled selected value="">Subcategory</option> -->
</select>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-offset-9 col-sm-2">
<button type="button" class="btn btn-xs btn-default" onclick="addQuestion()">Add Question</button>
</div>
</div>
<!-- ERROR ALERT FOR USER -->
<div id="error-newQuestionnaire" class="row" style="display: none;">
<div class="col-sm-12">
<div class="alert alert-danger mb-1" role="alert">
<h4 class="error-lead">Error!</h4>
<p class="error-description"></p>
</div>
</div>
</div>
</div><!--modal-body-->
<!-- SUBMIT OR PREVIOUS -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" onclick="nextModal('#NewQuestionnaire')">Previous</button>
<button type="submit" class="btn btn-primary" name="createQuestionnaire">Create</button>
</div>
</div><!--modal-content-->
</div><!--modal-dialog-->
</div><!--modal-->
</form>
<!-- POPUP FOR IMPORT QUESTIONNAIRE -->
<form class='form-horizontal' action='processes/importQuestionnaire.php' method='POST' enctype="multipart/form-data">
<div class='modal fade' id='Import' tabindex='-1' role='dialog' aria-labelledby='ImportLabel' aria-hidden='true'>
<div class='modal-dialog modal-dialog-centered modal-md' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<h3 class='modal-title' id='ImportLabel'>Import Questionnaire<button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>×</span></button></h3>
</div>
<div class='modal-body'>
<div class="form-horizontal">
<input type="hidden" name="id_experience" value="<?php echo $experienceID; ?>">
<div class="row">
<div class="col-sm-12">
<h4>Download Template</h4>
<p>Use this template to fill out your questionnaire and we'll do the heavy lifting for you! Once you're done, <strong>submit</strong> it using the "<em>import</em>" button below.</p>
<a class="btn btn-primary btn-sm btn-block" href="nameOfTheQuestionnair.xlsx">Download Template</a>
</div>
</div><!--row-->
<br>
<br>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<label for="exampleInputFile">Questionnaire in xlsx format</label>
<input type="file" name='import'>
<p class="help-block">Choose your .xlsx file (remember it has to have the correct format).</p>
</div>
</div><!--form-group-->
</div>
</div><!--modal-body-->
<div class='modal-footer'>
<button type='button' class='btn btn-default' data-dismiss='modal'>Cancel</button>
<button type='submit' class='btn btn-primary' name='insertQuestionnaire'>Import</button>
</div>
</div><!--modal-content-->
</div><!--modal-dialog-->
</div><!--modal-->
<!-- POPUP FOR DUPLICATE QUESTIONNAIRE -->
<form class='form-horizontal' action='processes/duplicateQuestionnaire.php' method='POST'>
<div class='modal fade' id='Duplicate' tabindex='-1' role='dialog' aria-labelledby='DuplicateLabel' aria-hidden='true'>
<div class='modal-dialog modal-dialog-centered' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<h3 class='modal-title' id='DuplicateLabel'>Duplicate Questionnaire<button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>×</span></button></h3>
</div>
<div class='modal-body'>
<span class='text-center'>
<h4>Copy a questionnaire from one experience to another</h4>
</span>
<br>
<!-- FROM QUESTIONNAIRE -->
<label for="fromQuestionnaireID">Which Questionnaire:</label>
<?php
// FIRST ASSUME FALSE
$errorDuplicate = false;
$queryQuestionnaires = "SELECT * FROM `questionnair` WHERE id IN (SELECT id_questionnair FROM experience_questionnair WHERE id_experience = '$experienceID');";
$resultQuestionnaires = mysqli_query($connection, $queryQuestionnaires);
if($resultQuestionnaires->num_rows > 0):
?>
<select class="form-control text-center" id="fromQuestionnaireID" name="fromQuestionnaireID" style="text-align-last:center;" required>
<?php while($rowQuestionnaires = mysqli_fetch_assoc($resultQuestionnaires)): ?>
<option value="<?php echo $rowQuestionnaires['id']; ?>"><?php echo $rowQuestionnaires['q_title']; ?></option>
<?php endwhile; ?>
</select>
<?php
else:
$errorDuplicate = true;
?>
<h3 class="text-center"><small>It seems you still haven't added any questionnaires to this experience...</small></h3>
<?php endif; ?>
<br>
<!-- TO EXPERIENCE -->
<label for="toExperienceID">To What Experience:</label>
<?php
// CHANGE QUERY DEPENDING ON IF USER IS ADMIN OR NOT
if($_SESSION['dbUserData']['admin'] === '1') {
$queryExperience2 = "SELECT * FROM `experience` WHERE id != '$experienceID';";
} else {
$queryExperience2 = "SELECT * FROM `experience` WHERE id != '$experienceID' AND id IN (SELECT id_experience FROM researcher_experience WHERE id_researcher = '" . $_SESSION['dbUserData']['id_researcher'] . "');";
}
$resultExperience2 = mysqli_query($connection, $queryExperience2);
if($resultExperience2->num_rows > 0):
?>
<select class="form-control text-center" id="toExperienceID" name="toExperienceID" style="text-align-last:center;" required>
<?php while($rowExperience2 = mysqli_fetch_assoc($resultExperience2)): ?>
<option value="<?php echo $rowExperience2['id']; ?>"><?php echo $rowExperience2['title']; ?></option>
<?php endwhile; ?>
</select>
<?php
else:
$errorDuplicate = true;
?>
<h3 class="text-center"><small>You don't have another experience to duplicate to...</small></h3>
<?php endif; ?>
</div><!--modal-body-->
<!-- SUBMIT OR CANCEL -->
<div class='modal-footer'>
<button type='button' class='btn btn-default' data-dismiss='modal'>Cancel</button>
<button type='submit' class='btn btn-primary' name='duplicateQuestionnaire' <?php if($errorDuplicate === true) echo "disabled"; ?>>Confirm</button>
</div>
</div><!--modal-content-->
</div><!--modal-dialog-->
</div><!--modal-->
</form>
<!-- POPUP FOR NEW MOMENT 1 -->
<form id="newMoment"><!--method='POST' action='processes/insertMoment.php'-->
<div class="modal fade" id="NewMoment" tabindex="-1" role="dialog" aria-labelledby="NewMomentLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-body">
<!-- CLOSE BUTTON -->
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden='true'>×</span>
</button>
<div class="row">
<div class="col-sm-10">
<h2>New Moment <small>(Basic Info – <em>Part 1</em>)</small></h2>
</div>
</div><!--row-->
<hr><br>
<div class="form-horizontal">
<!--EXPERIENCE ID-->
<input type="hidden" name="id_experience" value="<?php echo $experienceID; ?>">
<!-- TITLE -->
<div class="form-group">
<label class="control-label col-sm-2">Title:</label>
<div class="col-sm-9">
<input type="text" class="form-control text-center" name="m_title" maxlength="60" placeholder="Title" required>
</div>
</div>
<!-- DESCRIPTION -->
<div class="form-group">
<label class="control-label col-sm-2">Description:</label>
<div class="col-sm-9">
<textarea class="form-control text-center" name="m_description" rows="1" style="resize:vertical;" maxlength="100" placeholder="Description" required></textarea>
</div>
</div>
<!-- DATE TO ADMINISTER -->
<div class="form-group">
<label class="control-label col-sm-2">Date to Administer:</label>
<div class="col-sm-9">
<input type="datetime-local" class="form-control text-center" name="m_date" maxlength="16" placeholder="YYYY-MM-DDThh:mm" required>
</div>
</div>
<!-- CORRESPONDING QUESTIONNAIRE -->
<?php
$query7 = "SELECT * FROM `questionnair` WHERE `id` IN (SELECT `id_questionnair` FROM `experience_questionnair` WHERE `id_experience` = '$experienceID');";
$result7 = mysqli_query($connection, $query7);
// IF THE EXPERIENCE HAS AT LEAST ONE QUESTIONNAIRE ASSOCIATED TO IT, SHOW IT
// ELSE, DISPLAY A MESSAGE TO THE USER LETTING THEM KNOW THEY DON'T HAVE ONE
if(mysqli_num_rows($result7) > 0):
?>
<div class="form-group">
<label class="control-label col-sm-2">Questionnaire:</label>
<div class="col-sm-9">
<select class="form-control" id="m_questionnaire" name="m_questionnaire" style="width:100%; text-align-last:center;" required>
<option disabled selected value>Corresponding Questionnaire</option>
<?php while($row7 = mysqli_fetch_assoc($result7)): ?>
<option value="<?php echo $row7['id']; ?>"><?php echo $row7['q_title']; ?></option>
<?php endwhile; ?>
</select>
</div>
</div>
<?php else: ?>
<div class="text-center">
<h3><small>First add a questionnaire!</small></h3>
</div>
<?php endif; ?>
</div><!--form-horizontal-->
</div><!--modal-body-->
<!-- NEXT OR CANCEL -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button id="nextMoment" type="button" class="btn btn-primary" data-dismiss="modal" onclick="nextModal('#NewMoment_2')" disabled>Next</button>
</div>
</div><!--modal-content-->
</div><!--modal-dialog-->
</div><!--modal-->
<!-- FORM VALIDATION FOR NEW MOMENT (BASIC INFO) -->
<script>
// Fetch the inputs in the first modal
let momentTitle = document.querySelector('[name=m_title]');
let momentDescription = document.querySelector('[name=m_description]');
let momentDate = document.querySelector('[name=m_date]');
let momentQuestionnaire = document.querySelector('[name=m_questionnaire]');
// Add onchange and onkeyup event listeners to each input in the first modal
momentTitle.addEventListener('keyup', validateNewMoment);
momentTitle.addEventListener('change', validateNewMoment);
momentDescription.addEventListener('keyup', validateNewMoment);
momentDescription.addEventListener('change', validateNewMoment);
momentDate.addEventListener('keyup', validateNewMoment);
momentDate.addEventListener('change', validateNewMoment);
momentQuestionnaire.addEventListener('keyup', validateNewMoment);
momentQuestionnaire.addEventListener('change', validateNewMoment);
// First modal's validation function
// This basically enables the "Next" button if certain conditions are met
function validateNewMoment() {
// Fetch "Next" button in modal
let nextButton = document.querySelector('#nextMoment');
// Check validity of each input (valid if not empty strings & "maxlength" is set)
let validity = momentTitle.checkValidity();
validity &= momentDescription.checkValidity();
validity &= momentDate.checkValidity();
validity &= momentQuestionnaire.checkValidity();
// Disabled if not valid, enabled otherwise
nextButton.disabled = !validity;
}
</script>
<!-- POPUP FOR NEW MOMENT 2 -->
<div class="modal fade" id="NewMoment_2" tabindex="-1" role="dialog" aria-labelledby="NewMomentLabel_2" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-body">
<!-- CLOSE BUTTON -->
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden='true'>×</span>
</button>
<div class="row">
<div class="col-sm-10">
<h2>New Moment <small>(Questions – <em>Part 2</em>)</small></h2>
</div>
</div><!--row-->
<hr><br>
<!-- QUESTION -->
<div id="qq1" >
<div class="row">
<div class="col col-sm-offset-1">
<h4>Question 1</h4>
</div>
</div>
<!-- CHOOSE QUESTION FROM CORRESPONDING QUESTIONNAIRE -->
<div class="form-horizontal">
<div class="form-group">
<div class='col-sm-offset-2 col-sm-9'>
<select class="form-control" id="m_question_1" name="m_question_1" style="width:100%; text-align-last:center;" required>
<option disabled selected value>Select Question</option>
</select>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-offset-9 col-sm-2">
<button type='button' class='btn btn-xs btn-default' onclick='addSelectableQuestion()'>Add Question</button>
</div>
</div>
<!-- ERROR ALERT FOR USER -->
<div id="error-newMoment" class="row" style="display: none;">
<div class="col-sm-12">
<div class="alert alert-danger mb-1" role="alert">
<h4 class="error-lead">Error!</h4>
<p class="error-description"></p>
</div>
</div>
</div>
</div><!--modal-body-->
<!-- NEXT OR CANCEL -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" onclick="nextModal('#NewMoment')">Previous</button>
<button type="submit" class="btn btn-primary" name="newMoment" <?php if(mysqli_num_rows($result7) == 0) { echo 'disabled'; } ?>>Create</button>
</div>
</div><!--modal-content-->
</div><!--modal-dialog-->
</div><!--modal-->
</form>
<!-- POPUP FOR NEW MILESTONE -->
<form id="newMilestone">
<div class="modal fade" id="NewMilestone" tabindex="-1" role="dialog" aria-labelledby="NewMilestoneLabel" aria-hidden="true">
<div class="modal-dialog" role="document"">
<div class="modal-content">
<div class="modal-body">
<!-- CLOSE BUTTON -->
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="row">
<div class="col-sm-10">
<h2>New Milestone</h2>
</div>
</div><!--row-->
<hr><br>
<div class="form-horizontal">
<!-- EXPERIENCE ID -->
<input type="hidden" name="id_experience" value="<?php echo $experienceID; ?>">
<!-- TITLE -->
<div class="form-group">
<label class="control-label col-sm-2">Title:</label>
<div class="col-sm-9">
<input type="text" class="form-control text-center" name="mil_title" maxlength="256" placeholder="Title" required>
</div>
</div>
<!-- DATE -->
<div class="form-group">
<label class="control-label col-sm-2">Date:</label>
<div class="col-sm-9">
<input type="date" class="form-control text-center" name="mil_date" placeholder="YYYY-MM-DD" required>
</div>
</div>
</div>
<!-- ERROR ALERT FOR USER -->
<div id="error-newMilestone" class="row" style="display: none;">
<div class="col-sm-12">
<div class="alert alert-danger mb-1" role="alert">
<h4 class="error-lead">Error!</h4>
<p class="error-description"></p>
</div>
</div>
</div>
</div><!--modal-body-->
<!-- NEXT OR CANCEL -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary" name="newMilestone">Create</button>
</div>
</div><!--modal-content-->
</div><!--modal-dialog-->
</div><!--modal-->
</form>
<!-- STORE START DATE FOR CALENDAR RERENDERING LATER -->
<input id="experience_start_date" type="hidden" value="<?php echo $row1['start_date']; ?>">
<!-- FULL CALENDAR IMPORTS -->
<script src="processes/fullcalendar/packages/core/main.min.js"></script>
<script src="processes/fullcalendar/packages/daygrid/main.min.js"></script>
<script src="processes/fullcalendar/packages/timegrid/main.min.js"></script>
<script src="processes/fullcalendar/packages/interaction/main.min.js"></script>
<!-- <script src="https://unpkg.com/@fullcalendar/core/main.min.js"></script> -->
<!-- <script src="https://unpkg.com/@fullcalendar/daygrid/main.min.js"></script> -->
<!-- <script src="https://unpkg.com/@fullcalendar/timegrid@4.3.0/main.min.js"></script> -->
<!-- <script src="https://unpkg.com/@fullcalendar/interaction@4.3.0/main.min.js"></script> -->
<script src="js/viewExperience.js"></script>
<script src="js/handleSubmit.js"></script>
<script>
["editForm", "newQuestionnaire", "newMoment", "newMilestone"].forEach(function(formName) {
var form = document.getElementById(formName);
if(form) {
form.addEventListener('submit', function(e) {
handleSubmit(e, formName);
});
}
});
//window.onload = function() {
// First load an empty calendar
var calendarElement = document.getElementById('actualCalendar');
var calendar = new FullCalendar.Calendar(calendarElement, {
plugins: [ 'dayGrid', 'timeGrid', 'interaction' ],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
defaultDate: document.getElementById('experience_start_date').value,
businessHours: true,
editable: true,
dragScroll: true,
eventDrop: function(eventDropInfo) {
$.post(document.location.protocol + "//tania.uprrp.edu/admin_nuevo/special4.php", {
id: eventDropInfo.event.id,
experienceID: document.querySelector('input[name=id_experience]').value,
newStartDate: Date.parse(eventDropInfo.event.start), // convert to UNIX timestamp
newEndDate: Date.parse(eventDropInfo.event.end) // convert to UNIX timestamp
}).fail(function() {
alert('An error occurred! Resetting calendar...');
eventDropInfo.revert();
});
}
});
calendar.render();
// After the rest of the page has loaded, fetch events from DB & re-render calendar
var calendarConfig;
$.post(document.location.protocol + "//tania.uprrp.edu/admin_nuevo/special2.php",
{
experienceID: document.querySelector('input[name=id_experience]').value
},
function(data, status) {
if(!isJSON(data)) {
return;
}
calendarConfig = JSON.parse(data);
}
).done(function() {
// console.log(calendarConfig);
if(calendarConfig === undefined) {
alert("Couldn't fetch your events! Please refresh this page. If this keeps ocurring, contact the page administrator.");
return;
}
calendarConfig.events.forEach(calendarEvent => {
calendar.addEvent(calendarEvent);
});
calendar.render();
}).fail(function() {
alert("Couldn't fetch your events! Please refresh this page. If this keeps ocurring, contact the page administrator.");
});
//}//domcontentloaded//onload
</script>
<?php include_once 'footer.php'; ?>