<?php
require_once 'processes/config.php';
require_once 'processes/dbh.inc.php';
require_once 'processes/checkLogin.php';
include_once 'header.php';
// RETRIEVE USER'S NAME AND PICTURE
// $query1 = "SELECT * FROM `researcher` WHERE `email` = '" . $_SESSION['dbUserData']['email'] . "';";
// $result1 = mysqli_query($connection, $query1);
// $dbUserData = mysqli_fetch_assoc($result1);
$dbUserData = $_SESSION['dbUserData'];
// var_dump($_SESSION);
// exit();
// IF USER NOT IN DATABASE, EXIT
if(!$dbUserData) {
exit();
}
?>
<style>
.popover-content {
color: #333;
}
</style>
<!-- START OF home.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">
<?php if($_SESSION['dbUserData']['admin'] === '1'): ?>
<a class="nav-link" href="./users.php">Manage Researchers</a>
<?php endif; ?>
<a class="sign-out" href="./processes/logout.php">Sign Out</a>
</div>
</header>
<section id="welcome">
<div id="welcome-text">
<img id="welcome-image" src="<?php echo $dbUserData["picture"]; ?>" alt="User">
<h2 id="welcome-user">Welcome <?php echo explode(" ", $dbUserData['name'])[0]; ?></h2>
</div>
</section>
<main id="experience-main">
<div class="experience-lead">
<h2>Manage Your Experiences</h2>
</div>
<div id="experience-content">
<!--change to #New when using experience as templates has been implemented-->
<div class="grid-box" id="new-experience" onclick="nextModal('#New_2')">
<span class="fas fa-plus"></span>
<h4>New</h4>
</div>
<?php
// DISPLAY ALL EXPERIENCES THAT ARE NOT PART OF A PROJECT FIRST
// THEN CREATE A NEW ROW FOR EACH PROJECT WHICH IS 'POPULATED' BY ITS EXPERIENCES
// CHANGE QUERY DEPENDING ON IF USER IS ADMIN OR NOT
if($_SESSION['dbUserData']['admin'] === '1') {
$queryProjectlessExperiences = "SELECT E.id AS eid, E.start_date AS start_date, E.end_date AS end_date, E.title AS ename FROM `experience` AS E WHERE E.id NOT IN (SELECT P.id_experience FROM project_experience AS P);";
// $queryProjectsWithExperiences = "SELECT E.id AS eid, E.start_date AS start_date, E.end_date AS end_date, E.title AS ename, P.id AS pid, P.name AS pname
// FROM experience AS E
// JOIN project_experience AS PE
// JOIN project AS P
// WHERE E.id = PE.id_experience
// AND P.id = PE.id_project
// ORDER BY P.id, E.start_date";
$queryProjects = "SELECT * FROM project ORDER BY project.id DESC;";
$queryCountExperiences = "SELECT COUNT(*) FROM experience;";
} else {
$queryProjectlessExperiences = "SELECT E.id AS eid, E.start_date AS start_date, E.end_date AS end_date, E.title AS ename FROM `experience` AS E WHERE E.id NOT IN (SELECT P.id_experience FROM project_experience AS P) AND E.id IN (SELECT id_experience FROM researcher_experience WHERE id_researcher = '" . $_SESSION['dbUserData']['id_researcher'] . "');";
// $queryProjectsWithExperiences = "SELECT E.id AS eid, E.start_date AS start_date, E.end_date AS end_date, E.title AS ename, P.id AS pid, P.name AS pname
// FROM experience AS E
// JOIN project_experience AS PE
// JOIN project AS P
// WHERE E.id = PE.id_experience
// AND P.id = PE.id_project
// AND E.id IN (SELECT id_experience FROM researcher_experience WHERE id_researcher = '" . $_SESSION['dbUserData']['id_researcher'] . "')
// ORDER BY P.id, E.start_date";
$queryCountExperiences = "SELECT COUNT(*) FROM experience AS E WHERE E.id IN (SELECT id_experience FROM researcher_experience WHERE id_researcher = '" . $_SESSION['dbUserData']['id_researcher'] . "');";
$queryProjects = "SELECT * FROM project WHERE id IN (SELECT id_project FROM project_experience WHERE id_experience IN (SELECT id_experience FROM researcher_experience WHERE id_researcher = '" . $_SESSION['dbUserData']['id_researcher'] . "')) ORDER BY project.id DESC;";
}
$resultProjectlessExperiences = mysqli_query($connection, $queryProjectlessExperiences);
while($row = mysqli_fetch_array($resultProjectlessExperiences)):
?>
<div class="grid-box" onclick="location='viewExperience.php?view=<?php echo $row['eid']; ?>'">
<?php if(mb_strlen($row['ename']) == 0): ?>
<span class="box-title" onclick="location='viewExperience.php?view=<?php echo $row['eid']; ?>'"><small>N/A</small></span>
<?php elseif(mb_strlen($row['ename']) < 21): ?>
<span class="box-title" onclick="location='viewExperience.php?view=<?php echo $row['eid']; ?>'"><?php echo $row['ename']; ?></span>
<?php else: ?>
<!--style="white-space: nowrap;"--><span class="box-title" onclick="location='viewExperience.php?view=<?php echo $row['eid']; ?>'"><?php echo substr($row['ename'], 0, 30)."<small>...</small>"; ?></span>
<?php endif; ?>
<div class="box-dates" onclick="location='viewExperience.php?view=<?php echo $row['eid']; ?>'">
<p style="margin-bottom: 0;">• Starts: <?php echo date("M j, Y", strtotime($row['start_date'])); ?></p>
<p>• Ends: <?php echo date("M j, Y", strtotime($row['end_date'])); ?></p>
</div>
<?php
$x = (strtotime($row['end_date']) - strtotime('now')) / 604800;
if($x <= 0):
?>
<span class="box-weeks warning">Finished</span>
<?php elseif(0 < $x && $x < 1):?>
<span class="box-weeks" style="font-size: 1.2rem">Less than a week remaining</span>
<?php else: ?>
<span class="box-weeks"><?php echo round($x); ?> week<?php if($x > 0) echo 's'; ?> remaining</span>
<?php endif; ?>
<span class="box-edit" style="background: none;">
<a><i class="fas fa-pen"></i></a>
</span>
</div><!--grid-box-->
<?php endwhile; ?>
</div><!--experience-content-->
<?php
$resultProjects = mysqli_query($connection, $queryProjects);
while($rowP = mysqli_fetch_array($resultProjects)):
?>
<div class="row">
<!-- <div > -->
<h3 class="col-sm-12" style="color: white;">
<?php echo $rowP['name']; ?>
<button type="button" class="btn btn-link btn-lg" data-toggle="popover" title="Project Description" data-content="<?php echo $rowP['description']; ?>" data-placement="right">
<span style="color: #eee;" class="glyphicon glyphicon-question-sign" aria-hidden="true"></span><!--glyphicon-align-left-->
</button>
</h3>
<!-- </div> -->
</div>
<div id="experience-content">
<?php
$queryExperiencesInProject = "SELECT E.id AS eid, E.title AS ename, E.start_date, E.end_date
FROM experience AS E
JOIN project_experience AS PE
WHERE E.id = PE.id_experience
AND PE.id_project = '" . $rowP['id'] . "' ORDER BY E.start_date DESC, E.id";
//WHERE E.id IN (SELECT id_experience FROM project_experience WHERE id_project = '" . $rowP['id'] . "')
$resultExperiencesInProject = mysqli_query($connection, $queryExperiencesInProject);
while($row = mysqli_fetch_array($resultExperiencesInProject)):
?>
<div class="grid-box" onclick="location='viewExperience.php?view=<?php echo $row['eid']; ?>'">
<?php if(mb_strlen($row['ename']) == 0): ?>
<span class="box-title" onclick="location='viewExperience.php?view=<?php echo $row['eid']; ?>'"><small>N/A</small></span>
<?php elseif(mb_strlen($row['ename']) < 21): ?>
<span class="box-title" onclick="location='viewExperience.php?view=<?php echo $row['eid']; ?>'"><?php echo $row['ename']; ?></span>
<?php else: ?>
<!--style="white-space: nowrap;"--><span class="box-title" onclick="location='viewExperience.php?view=<?php echo $row['eid']; ?>'"><?php echo substr($row['ename'], 0, 30)."<small>...</small>"; ?></span>
<?php endif; ?>
<div class="box-dates" onclick="location='viewExperience.php?view=<?php echo $row['eid']; ?>'">
<p style="margin-bottom: 0;">• Starts: <?php echo date("M j, Y", strtotime($row['start_date'])); ?></p>
<p>• Ends: <?php echo date("M j, Y", strtotime($row['end_date'])); ?></p>
</div>
<?php
$x = (strtotime($row['end_date']) - strtotime('now')) / 604800;
if($x <= 0):
?>
<span class="box-weeks warning">Finished</span>
<?php elseif(0 < $x && $x < 1):?>
<span class="box-weeks" style="font-size: 1.2rem">Less than a week remaining</span>
<?php else: ?>
<span class="box-weeks"><?php echo round($x); ?> week<?php if($x > 0) echo 's'; ?> remaining</span>
<?php endif; ?>
<span class="box-edit" style="background: none;">
<a><i class="fas fa-pen"></i></a>
</span>
</div>
<?php endwhile; ?>
</div><!--experience-content-->
<?php endwhile; ?>
<br><br>
</main>
<?php if(mysqli_query($connection, $queryCountExperiences)->num_rows === 0): // USER DOESN'T HAVE EXPERIENCES YET (PROMPT MODAL) ?>
<script> setTimeout(() => $('#FirstTime').modal('show'), 1000); </script>
<?php endif; ?>
<!-- POPUP FOR FIRST TIME -->
<div class='modal fade' id='FirstTime' tabindex='-1' role='dialog' aria-labelledby='FirstTimeLabel' aria-hidden='true'>
<div class='modal-dialog modal-sm' 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 text-center">
<h3>You don't have any experiences yet!</h3>
<h5>Press below to create a new one!</h5>
<button type="button" class='btn btn-default' data-dismiss='modal' onclick="nextModal('#New_2')">New</button>
</div>
</div><!--modal-body-->
</div><!--modal-content-->
</div><!--modal-dialog-->
</div><!--modal-->
<!--
<!~~ POPUP FOR NEW EXPERIENCE 1 ~~>
<div class='modal fade' id='New' tabindex='-1' role='dialog' aria-labelledby='NewLabel' aria-hidden='true'>
<div class='modal-dialog modal-sm' 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>
<h4 class='text-center'>Want to add another experience?</h4>
<!~~ CHOOSE: BRAND NEW EXPERIENCE OR USE A TEMPLATE~~>
<div class='row text-center'>
<div class='btn-group'>
<button type="button" class='btn btn-default' data-dismiss="modal" onclick="nextModal('#New_2')">Brand New</button>
<a href='#' class='btn btn-default'>Use Template</a>
</div>
</div>
<br>
</div><!~~modal-body~~>
</div><!~~modal-content~~>
</div><!~~modal-dialog~~>
</div><!~~modal~~>
-->
<form id="newExperience"><!--method='POST' action='processes/insertExperience.php'-->
<!-- POPUP FOR NEW EXPERIENCE 2 -->
<div class='modal fade' id='New_2' tabindex='-1' role='dialog' aria-labelledby='NewLabel_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>Brand New Experience <small>(Basic Info)</small></h2>
<!-- <h3><small>Start creating a new experience by first adding its basic info.</small></h3> -->
</div>
</div><!--row-->
<hr><br>
<div class="form-horizontal">
<!-- TITLE -->
<div class='form-group'>
<label class='control-label col-sm-2' for='e_title'>Title:</label>
<div class='col-sm-9'>
<input type='text' class='form-control text-center' id='e_title' name='title' placeholder='Title' maxlength="60" required>
</div>
</div>
<!-- DESCRIPTION -->
<div class='form-group'>
<label class='control-label col-sm-2' for='e_description'>Description:</label>
<div class='col-sm-9'>
<textarea class='form-control text-center' id='e_description' name='description' rows='1' style='resize:vertical;' placeholder='Description' maxlength="100" required></textarea>
</div>
</div>
<!-- TYPE -->
<div class='form-group'>
<label class='control-label col-sm-2' for='e_description'>Type:</label>
<div class='col-sm-9'>
<select class="form-control text-center" style="text-align-last: center;" id='e_type' name='type' required>
<option selected value="Course-Based Research Experience">Course-Based Research Experience</option>
<option value="Undergraduate Research Experience">Undergraduate Research Experience</option>
<?php if($_SESSION['dbUserData']['admin'] === '1'): ?>
<option value="Test">Test</option>
<?php endif; ?>
</select>
</div>
</div>
<!-- DURATION -->
<!-- <div class='form-group'> -->
<!-- <label class='control-label col-sm-2' for='e_description'>Duration:</label> -->
<!-- <div class='col-sm-9'> -->
<!-- <input type='number' class='form-control text-center' id='e_duration' name='duration' placeholder='Duration' min="0" required readonly> -->
<!-- </div> -->
<!-- </div> -->
<!-- START DATE -->
<div class='form-group'>
<label class='control-label col-sm-2' for='e_start'>Start Date:</label>
<div class='col-sm-9'>
<input type='date' class='form-control text-center' id='e_start' name='start' placeholder="YYYY-MM-DD" required>
</div>
</div>
<!-- END DATE -->
<div class='form-group'>
<label class='control-label col-sm-2' for='e_end'>End Date:</label>
<div class='col-sm-9'>
<input type='date' class='form-control text-center' id='e_end' name='end' placeholder="YYYY-MM-DD" required>
</div>
</div>
<!-- INSTITUTION -->
<div class='form-group'>
<label class='control-label col-sm-2' for='e_institution'>Institution:</label>
<div class='col-sm-9'>
<select class="form-control" id='e_institution' name='institution' style='width:100%; text-align-last: center;' required>
<option disabled selected value>Institution</option>
<?php
$query = "SELECT * FROM `institution`;";
$result = mysqli_query($connection, $query);
while($row = mysqli_fetch_assoc($result)):
?>
<option value='<?php echo $row['id']; ?>'><?php echo $row['name']; ?></option>
<?php endwhile; ?>
</select>
</div>
</div>
<br><hr style="width: 80%"><br><br>
<!-- EXPIRY TIME -->
<div class='form-group'>
<label class='control-label col-sm-3' for='e_description'>Expiry Time:</label>
<div class='col-sm-7 input-groupd'>
<select class="form-control" style="text-align-last: center;" id="expiry_time" name="expiry_time" required>
<option selected value="30">30 min</option>
<option value="60">1 hour</option>
<option value="120">2 hours</option>
<option value="180">3 hours</option>
<!-- <option value="240">4 hours</option> -->
<!-- <option value="300">5 hours</option> -->
<option value="360">6 hours</option>
<option value="720">12 hours</option>
<option value="1080">18 hours</option>
<option value="1440">1 day</option>
</select>
</div>
</div>
</div>
<br>
<!--. Each Moment will need to have a <strong>predetermined expiry time</strong>; -->
<p class='alert alert-warning text-justify' style="width: 80%; margin: 0 auto;">We require that you specify a <strong>Moment Expiry Time</strong>. That is, the amount of time you, the researcher, will allot your subjects to answer a given Moment. The <strong>minimum</strong> we allow is 30 min, while the <strong>maximum</strong> is a whole day. Please keep in mind you should provide your subjects </strong>enough time</strong> so that they are allowed to answer properly, but do not allocate <strong>excessive time</strong>, as your subjects' answers may vary greatly with time.</p>
<br>
<!-- ERROR ALERT FOR USER -->
<!-- <div id="error-newExperience" 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 id="toProjectModal" type='button' class='btn btn-primary' data-dismiss='modal' onclick="nextModal('#New_3')" disabled>Next</button>
</div>
</div><!--modal-content-->
</div><!--modal-dialog-->
</div><!--modal-->
<!-- POPUP FOR NEW EXPERIENCE 3 -->
<div class='modal fade' id='New_3' tabindex='-1' role='dialog' aria-labelledby='NewLabel_3' 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>Brand New Experience <small>(Additional Info)</small></h2>
</div>
</div><!--row-->
<hr>
<div class="row">
<div class="col-sm-12 col-sm-offset-1">
<h4>Is this experience part of a project or standalone?</h4>
</div>
</div>
<!-- TYPE OF EXPERIENCE (STANDALONE - PROJECT) -->
<div class="form-horizontal">
<div class='form-group'>
<div class='col-sm-6 col-sm-offset-3'>
<select class="form-control text-center" style="text-align-last: center;" id='typeOfExperience' name='typeOfExperience' required onchange="standaloneOrNot(event)">
<option selected value="Standalone">Standalone Experience</option>
<option value="Part of a Project">Part of a Project</option>
</select>
</div>
</div>
</div>
<div id="standalone" style="display: none;">
<div class="row">
<div class="col-sm-12 col-sm-offset-1">
<h4>Does the project already exist, or would you like a new one?</h4>
</div>
</div>
<div class="form-horizontal">
<!-- IS THE PROJECT EXISTING OR NEW? -->
<div class='form-group'>
<div class='col-sm-9 col-sm-offset-2'>
<select class="form-control text-center" style="text-align-last: center;" id='typeOfProject' name='typeOfProject' onchange="existingOrNot(event)">
<option selected value="New">New Project</option>
<option value="Existing">Existing Project</option>
</select>
</div>
</div>
<div id="newProject">
<!-- PROJECT NAME -->
<div class='form-group'>
<label class='control-label col-sm-2 col-sm-offset-2' for='projectName'>Name:</label>
<div class='col-sm-7'>
<input type='text' class='form-control text-center' id='projectName' name='projectName' placeholder="Project Name">
</div>
</div>
<!-- PROJECT DESCRIPTION -->
<div class='form-group'>
<label class='control-label col-sm-2 col-sm-offset-2' for='projectDescription'>Description:</label>
<div class='col-sm-7'>
<textarea class='form-control text-center' id='projectDescription' rows="2" name='projectDescription' placeholder="Project Description"></textarea>
</div>
</div>
</div>
<div id="existingProject" style="display: none;">
<?php
// CHANGE QUERY DEPENDING ON IF USER IS ADMIN OR NOT
if($_SESSION['dbUserData']['admin'] === '1') {
$queryProjects = "SELECT * FROM project;";
} else {
$queryProjects = "SELECT * FROM project WHERE id IN (SELECT id_project FROM project_experience WHERE id_experience IN (SELECT id_experience FROM researcher_experience WHERE id_researcher = '" . $_SESSION['dbUserData']['id_researcher'] . "'));";
}
$resultProjects = mysqli_query($connection, $queryProjects);
if($resultProjects->num_rows > 0):
?>
<!-- CHOOSE EXISTING PROJECT -->
<div class='form-group'>
<label class='control-label col-sm-2 col-sm-offset-2' for='projectID'>Project:</label>
<div class='col-sm-7'>
<select class="form-control text-center" style="text-align-last: center;" id='projectID' name='projectID'>
<?php while($rowProjects = mysqli_fetch_assoc($resultProjects)): ?>
<option selected value="<?php echo $rowProjects['id']; ?>"><?php echo $rowProjects['name']; ?></option>
<?php endwhile; ?>
</select>
</div>
</div>
<?php else: ?>
<div class="row">
<div class="col-sm-9 col-sm-offset-3">
<h4><small>Uh oh! It seems you don't have a project to choose from...</small></h4>
</div>
</div>
<?php endif; ?>
</div>
</div><!--form-horizontal-->
</div>
<br>
<!-- TIPS FOR USER -->
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<div class="alert alert-info alert-dismissable mb-1" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="error-lead">Tips</h4>
<p>If you're not sure what to choose, select "<strong>Standalone</strong>".</p>
</div>
</div>
</div>
<br>
<!-- ERROR ALERT FOR USER -->
<div id="error-newExperience" 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' onclick="nextModal('#New_2')">Previous</button>
<button type='submit' class='btn btn-primary' name='newExperience'>Create</button>
</div>
</div><!--modal-content-->
</div><!--modal-dialog-->
</div><!--modal-->
</form><!--form-->
<script>
let button = document.getElementById('toProjectModal');
let title = document.getElementById('e_title');
let description = document.getElementById('e_description');
// let type = document.getElementById('e_type');
let start = document.getElementById('e_start');
let end = document.getElementById('e_end');
let institution = document.getElementById('e_institution');
// let expiryTime = document.getElementById('expiry_time');
title.addEventListener('change', experienceFirstModal);
description.addEventListener('change', experienceFirstModal);
// type.addEventListener('change', experienceFirstModal);
start.addEventListener('change', experienceFirstModal);
end.addEventListener('change', experienceFirstModal);
institution.addEventListener('change', experienceFirstModal);
// expiryTime.addEventListener('change', experienceFirstModal);
function experienceFirstModal() {
let validity = true;
validity &= title.checkValidity();
validity &= description.checkValidity();
// validity &= type.checkValidity();
validity &= start.checkValidity();
validity &= end.checkValidity();
validity &= institution.checkValidity();
// validity &= expiryTime.checkValidity();
button.disabled = !validity;
}
function standaloneOrNot(e) {
let standalonePart = document.getElementById('standalone');
let selection = e.currentTarget.value;
standalonePart.style.display = (selection !== 'Standalone' ? 'block' : 'none');
}
function existingOrNot(e) {
let existingPart = document.getElementById('existingProject');
let newPart = document.getElementById('newProject');
let selection = e.currentTarget.value;
if(selection === 'New') {
existingPart.style.display = 'none';
newPart.style.display = 'block';
} else {
existingPart.style.display = 'block';
newPart.style.display = 'none';
}
}
</script>
<script src="js/home.js"></script>
<script src="js/handleSubmit.js"></script>
<script>
// Enable popovers
$(function () {
$('[data-toggle="popover"]').popover();
});
["newExperience"].forEach(function(formName) {
var form = document.getElementById(formName);
if(form) {
form.addEventListener('submit', function(e) {
handleSubmit(e, formName);
});
}
});
window.onload = function() {
// Start Date
setStartDateRange();
// End Date
startDate.addEventListener('change', setEndDateRange);
// Duration
// startDate.addEventListener('change', setDuration);
// endDate.addEventListener('change', setDuration);
}
</script>
<!-- END OF home.php -->
<?php include_once 'footer.php'; ?>