Marle
/
webAdministracion


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374
							<?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['email'] . "';";
	$result1 = mysqli_query($connection, $query1);
	$dbUserData = mysqli_fetch_assoc($result1);
	
	// IF USER NOT IN DATABASE, EXIT
	if($result1->num_rows !== 1) {
		exit();
	}
	
?>
	<!-- 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">
        	    <a class="nav-link" href="./questionnaires.php">Questionnaire Collection</a>
        	    <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
	// WARNING: CHANGE QUERY TO INCLUDE "`id_researcher`='".$dbUserData['id_researcher']."';"
	$query2 = "SELECT * FROM `experience`;";
	$result2 = mysqli_query($connection, $query2);
	
	// IF USER HAS EXPERIENCES, SHOW ALL OF THEM
	// ELSE PROMPT USER TO CREATE A NEW EXPERIENCE
	if($result2->num_rows > 0): // USER HAS EXPERIENCE (STANDARD PAGE)
?>

				<?php while($row = mysqli_fetch_array($result2)): ?>

            	<div class="grid-box" onclick="location='viewExperience.php?view=<?php echo $row['id']; ?>'">
            	
            		<?php if(mb_strlen($row['title']) == 0): ?>
                	<span class="box-title" onclick="location='viewExperience.php?view=<?php echo $row['id']; ?>'"><small>N/A</small></span>
            		<?php elseif(mb_strlen($row['title']) < 21): ?>
                	<span class="box-title" onclick="location='viewExperience.php?view=<?php echo $row['id']; ?>'"><?php echo $row['title']; ?></span>
                	<?php else: ?>
<!--style="white-space: nowrap;"--><span class="box-title" onclick="location='viewExperience.php?view=<?php echo $row['id']; ?>'"><?php echo substr($row['title'], 0, 30)."<small>...</small>"; ?></span>
                	<?php endif; ?>
                	
                	<div class="box-dates" onclick="location='viewExperience.php?view=<?php echo $row['id']; ?>'">
                	    <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 else: ?>
                	<span class="box-weeks"><?php echo round($x); ?> week<?php if(round($x) > 1) 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; ?>

<?php else: // USER DOESN'T HAVE EXPERIENCES YET (ALTERNATE PAGE) ?>

				<script> setTimeout(() => $('#FirstTime').modal('show'), 1000); </script>
		
<?php endif; ?>

			</div>
			
			<br><br>
			
		</main>


		<!-- 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'>&times;</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'>&times;</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'>&times;</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">Course-Based Research</option>
										<option value="Independent Research">Independent Research</option>
									</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 type='submit' class='btn btn-primary' name='newExperience'>Create</button>
<!--         				<button type='button' class='btn btn-primary' data-dismiss='modal' onclick="nextModal('#New_3')">Next</button> -->
      				</div>
      				
    			</div><!--modal-content-->
  			</div><!--modal-dialog-->
		</div><!--modal-->
</form><!--form-->


		<script src="js/home.js"></script>
		<script src="js/handleSubmit.js"></script>


<script>

		
		["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'; ?>