Açıklama Yok

home.php 26KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724
  1. <?php
  2. require_once 'processes/config.php';
  3. require_once 'processes/dbh.inc.php';
  4. require_once 'processes/checkLogin.php';
  5. include_once 'header.php';
  6. // RETRIEVE USER'S NAME AND PICTURE
  7. // $query1 = "SELECT * FROM `researcher` WHERE `email` = '" . $_SESSION['dbUserData']['email'] . "';";
  8. // $result1 = mysqli_query($connection, $query1);
  9. // $dbUserData = mysqli_fetch_assoc($result1);
  10. $dbUserData = $_SESSION['dbUserData'];
  11. // var_dump($_SESSION);
  12. // exit();
  13. // IF USER NOT IN DATABASE, EXIT
  14. if(!$dbUserData) {
  15. exit();
  16. }
  17. ?>
  18. <style>
  19. .popover-content {
  20. color: #333;
  21. }
  22. </style>
  23. <!-- START OF home.php -->
  24. <body>
  25. <header id="main-header">
  26. <a id="logo" href=".">
  27. TANIA
  28. <img src="./img/pen_800x800.png" alt="tania logo pen" width="25" height="25">
  29. </a>
  30. <div id="account">
  31. <?php if($_SESSION['dbUserData']['admin'] === '1'): ?>
  32. <a class="nav-link" href="./users.php">Manage Researchers</a>
  33. <?php endif; ?>
  34. <a class="sign-out" href="./processes/logout.php">Sign Out</a>
  35. </div>
  36. </header>
  37. <section id="welcome">
  38. <div id="welcome-text">
  39. <img id="welcome-image" src="<?php echo $dbUserData["picture"]; ?>" alt="User">
  40. <h2 id="welcome-user">Welcome <?php echo explode(" ", $dbUserData['name'])[0]; ?></h2>
  41. </div>
  42. </section>
  43. <main id="experience-main">
  44. <div class="experience-lead">
  45. <h2>Manage Your Experiences</h2>
  46. </div>
  47. <div id="experience-content">
  48. <!--change to #New when using experience as templates has been implemented-->
  49. <div class="grid-box" id="new-experience" onclick="nextModal('#New_2')">
  50. <span class="fas fa-plus"></span>
  51. <h4>New</h4>
  52. </div>
  53. <?php
  54. // DISPLAY ALL EXPERIENCES THAT ARE NOT PART OF A PROJECT FIRST
  55. // THEN CREATE A NEW ROW FOR EACH PROJECT WHICH IS 'POPULATED' BY ITS EXPERIENCES
  56. // CHANGE QUERY DEPENDING ON IF USER IS ADMIN OR NOT
  57. if($_SESSION['dbUserData']['admin'] === '1') {
  58. $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);";
  59. // $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
  60. // FROM experience AS E
  61. // JOIN project_experience AS PE
  62. // JOIN project AS P
  63. // WHERE E.id = PE.id_experience
  64. // AND P.id = PE.id_project
  65. // ORDER BY P.id, E.start_date";
  66. $queryProjects = "SELECT * FROM project ORDER BY project.id DESC;";
  67. $queryCountExperiences = "SELECT COUNT(*) FROM experience;";
  68. } else {
  69. $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'] . "');";
  70. // $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
  71. // FROM experience AS E
  72. // JOIN project_experience AS PE
  73. // JOIN project AS P
  74. // WHERE E.id = PE.id_experience
  75. // AND P.id = PE.id_project
  76. // AND E.id IN (SELECT id_experience FROM researcher_experience WHERE id_researcher = '" . $_SESSION['dbUserData']['id_researcher'] . "')
  77. // ORDER BY P.id, E.start_date";
  78. $queryCountExperiences = "SELECT COUNT(*) FROM experience AS E WHERE E.id IN (SELECT id_experience FROM researcher_experience WHERE id_researcher = '" . $_SESSION['dbUserData']['id_researcher'] . "');";
  79. $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;";
  80. }
  81. $resultProjectlessExperiences = mysqli_query($connection, $queryProjectlessExperiences);
  82. while($row = mysqli_fetch_array($resultProjectlessExperiences)):
  83. ?>
  84. <div class="grid-box" onclick="location='viewExperience.php?view=<?php echo $row['eid']; ?>'">
  85. <?php if(mb_strlen($row['ename']) == 0): ?>
  86. <span class="box-title" onclick="location='viewExperience.php?view=<?php echo $row['eid']; ?>'"><small>N/A</small></span>
  87. <?php elseif(mb_strlen($row['ename']) < 21): ?>
  88. <span class="box-title" onclick="location='viewExperience.php?view=<?php echo $row['eid']; ?>'"><?php echo $row['ename']; ?></span>
  89. <?php else: ?>
  90. <!--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>
  91. <?php endif; ?>
  92. <div class="box-dates" onclick="location='viewExperience.php?view=<?php echo $row['eid']; ?>'">
  93. <p style="margin-bottom: 0;">• Starts: <?php echo date("M j, Y", strtotime($row['start_date'])); ?></p>
  94. <p>• Ends: <?php echo date("M j, Y", strtotime($row['end_date'])); ?></p>
  95. </div>
  96. <?php
  97. $x = (strtotime($row['end_date']) - strtotime('now')) / 604800;
  98. if($x <= 0):
  99. ?>
  100. <span class="box-weeks warning">Finished</span>
  101. <?php elseif(0 < $x && $x < 1):?>
  102. <span class="box-weeks" style="font-size: 1.2rem">Less than a week remaining</span>
  103. <?php else: ?>
  104. <span class="box-weeks"><?php echo round($x); ?> week<?php if($x > 0) echo 's'; ?> remaining</span>
  105. <?php endif; ?>
  106. <span class="box-edit" style="background: none;">
  107. <a><i class="fas fa-pen"></i></a>
  108. </span>
  109. </div><!--grid-box-->
  110. <?php endwhile; ?>
  111. </div><!--experience-content-->
  112. <?php
  113. $resultProjects = mysqli_query($connection, $queryProjects);
  114. while($rowP = mysqli_fetch_array($resultProjects)):
  115. ?>
  116. <div class="row">
  117. <!-- <div > -->
  118. <h3 class="col-sm-12" style="color: white;">
  119. <?php echo $rowP['name']; ?>
  120. <button type="button" class="btn btn-link btn-lg" data-toggle="popover" title="Project Description" data-content="<?php echo $rowP['description']; ?>" data-placement="right">
  121. <span style="color: #eee;" class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
  122. </button>
  123. </h3>
  124. <!-- </div> -->
  125. </div>
  126. <div id="experience-content">
  127. <?php
  128. $queryExperiencesInProject = "SELECT E.id AS eid, E.title AS ename, E.start_date, E.end_date
  129. FROM experience AS E
  130. WHERE E.id IN (SELECT id_experience FROM project_experience WHERE id_project = '" . $rowP['id'] . "')
  131. ORDER BY E.start_date DESC";
  132. $resultExperiencesInProject = mysqli_query($connection, $queryExperiencesInProject);
  133. while($row = mysqli_fetch_array($resultExperiencesInProject)):
  134. ?>
  135. <div class="grid-box" onclick="location='viewExperience.php?view=<?php echo $row['eid']; ?>'">
  136. <?php if(mb_strlen($row['ename']) == 0): ?>
  137. <span class="box-title" onclick="location='viewExperience.php?view=<?php echo $row['eid']; ?>'"><small>N/A</small></span>
  138. <?php elseif(mb_strlen($row['ename']) < 21): ?>
  139. <span class="box-title" onclick="location='viewExperience.php?view=<?php echo $row['eid']; ?>'"><?php echo $row['ename']; ?></span>
  140. <?php else: ?>
  141. <!--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>
  142. <?php endif; ?>
  143. <div class="box-dates" onclick="location='viewExperience.php?view=<?php echo $row['eid']; ?>'">
  144. <p style="margin-bottom: 0;">• Starts: <?php echo date("M j, Y", strtotime($row['start_date'])); ?></p>
  145. <p>• Ends: <?php echo date("M j, Y", strtotime($row['end_date'])); ?></p>
  146. </div>
  147. <?php
  148. $x = (strtotime($row['end_date']) - strtotime('now')) / 604800;
  149. if($x <= 0):
  150. ?>
  151. <span class="box-weeks warning">Finished</span>
  152. <?php elseif(0 < $x && $x < 1):?>
  153. <span class="box-weeks" style="font-size: 1.2rem">Less than a week remaining</span>
  154. <?php else: ?>
  155. <span class="box-weeks"><?php echo round($x); ?> week<?php if($x > 0) echo 's'; ?> remaining</span>
  156. <?php endif; ?>
  157. <span class="box-edit" style="background: none;">
  158. <a><i class="fas fa-pen"></i></a>
  159. </span>
  160. </div>
  161. <?php endwhile; ?>
  162. </div><!--experience-content-->
  163. <?php endwhile; ?>
  164. <br><br>
  165. </main>
  166. <?php if(mysqli_query($connection, $queryCountExperiences)->num_rows === 0): // USER DOESN'T HAVE EXPERIENCES YET (PROMPT MODAL) ?>
  167. <script> setTimeout(() => $('#FirstTime').modal('show'), 1000); </script>
  168. <?php endif; ?>
  169. <!-- POPUP FOR FIRST TIME -->
  170. <div class='modal fade' id='FirstTime' tabindex='-1' role='dialog' aria-labelledby='FirstTimeLabel' aria-hidden='true'>
  171. <div class='modal-dialog modal-sm' role='document'>
  172. <div class='modal-content'>
  173. <div class='modal-body'>
  174. <!-- CLOSE BUTTON -->
  175. <button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>
  176. <div class="row text-center">
  177. <h3>You don't have any experiences yet!</h3>
  178. <h5>Press below to create a new one!</h5>
  179. <button type="button" class='btn btn-default' data-dismiss='modal' onclick="nextModal('#New_2')">New</button>
  180. </div>
  181. </div><!--modal-body-->
  182. </div><!--modal-content-->
  183. </div><!--modal-dialog-->
  184. </div><!--modal-->
  185. <!--
  186. <!~~ POPUP FOR NEW EXPERIENCE 1 ~~>
  187. <div class='modal fade' id='New' tabindex='-1' role='dialog' aria-labelledby='NewLabel' aria-hidden='true'>
  188. <div class='modal-dialog modal-sm' role='document'>
  189. <div class='modal-content'>
  190. <div class='modal-body'>
  191. <!~~ CLOSE BUTTON ~~>
  192. <button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>
  193. <h4 class='text-center'>Want to add another experience?</h4>
  194. <!~~ CHOOSE: BRAND NEW EXPERIENCE OR USE A TEMPLATE~~>
  195. <div class='row text-center'>
  196. <div class='btn-group'>
  197. <button type="button" class='btn btn-default' data-dismiss="modal" onclick="nextModal('#New_2')">Brand New</button>
  198. <a href='#' class='btn btn-default'>Use Template</a>
  199. </div>
  200. </div>
  201. <br>
  202. </div><!~~modal-body~~>
  203. </div><!~~modal-content~~>
  204. </div><!~~modal-dialog~~>
  205. </div><!~~modal~~>
  206. -->
  207. <form id="newExperience"><!--method='POST' action='processes/insertExperience.php'-->
  208. <!-- POPUP FOR NEW EXPERIENCE 2 -->
  209. <div class='modal fade' id='New_2' tabindex='-1' role='dialog' aria-labelledby='NewLabel_2' aria-hidden='true'>
  210. <div class='modal-dialog modal-lg' role='document'>
  211. <div class='modal-content'>
  212. <div class='modal-body'>
  213. <!-- CLOSE BUTTON -->
  214. <button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>
  215. <div class='row'>
  216. <div class='col-sm-10'>
  217. <h2>Brand New Experience <small>(Basic Info)</small></h2>
  218. <!-- <h3><small>Start creating a new experience by first adding its basic info.</small></h3> -->
  219. </div>
  220. </div><!--row-->
  221. <hr><br>
  222. <div class="form-horizontal">
  223. <!-- TITLE -->
  224. <div class='form-group'>
  225. <label class='control-label col-sm-2' for='e_title'>Title:</label>
  226. <div class='col-sm-9'>
  227. <input type='text' class='form-control text-center' id='e_title' name='title' placeholder='Title' maxlength="60" required>
  228. </div>
  229. </div>
  230. <!-- DESCRIPTION -->
  231. <div class='form-group'>
  232. <label class='control-label col-sm-2' for='e_description'>Description:</label>
  233. <div class='col-sm-9'>
  234. <textarea class='form-control text-center' id='e_description' name='description' rows='1' style='resize:vertical;' placeholder='Description' maxlength="100" required></textarea>
  235. </div>
  236. </div>
  237. <!-- TYPE -->
  238. <div class='form-group'>
  239. <label class='control-label col-sm-2' for='e_description'>Type:</label>
  240. <div class='col-sm-9'>
  241. <select class="form-control text-center" style="text-align-last: center;" id='e_type' name='type' required>
  242. <option selected value="Course-Based Research Experience">Course-Based Research Experience</option>
  243. <option value="Undergraduate Research Experience">Undergraduate Research Experience</option>
  244. </select>
  245. </div>
  246. </div>
  247. <!-- DURATION -->
  248. <!-- <div class='form-group'> -->
  249. <!-- <label class='control-label col-sm-2' for='e_description'>Duration:</label> -->
  250. <!-- <div class='col-sm-9'> -->
  251. <!-- <input type='number' class='form-control text-center' id='e_duration' name='duration' placeholder='Duration' min="0" required readonly> -->
  252. <!-- </div> -->
  253. <!-- </div> -->
  254. <!-- START DATE -->
  255. <div class='form-group'>
  256. <label class='control-label col-sm-2' for='e_start'>Start Date:</label>
  257. <div class='col-sm-9'>
  258. <input type='date' class='form-control text-center' id='e_start' name='start' placeholder="YYYY-MM-DD" required>
  259. </div>
  260. </div>
  261. <!-- END DATE -->
  262. <div class='form-group'>
  263. <label class='control-label col-sm-2' for='e_end'>End Date:</label>
  264. <div class='col-sm-9'>
  265. <input type='date' class='form-control text-center' id='e_end' name='end' placeholder="YYYY-MM-DD" required>
  266. </div>
  267. </div>
  268. <!-- INSTITUTION -->
  269. <div class='form-group'>
  270. <label class='control-label col-sm-2' for='e_institution'>Institution:</label>
  271. <div class='col-sm-9'>
  272. <select class="form-control" id='e_institution' name='institution' style='width:100%; text-align-last: center;' required>
  273. <option disabled selected value>Institution</option>
  274. <?php
  275. $query = "SELECT * FROM `institution`;";
  276. $result = mysqli_query($connection, $query);
  277. while($row = mysqli_fetch_assoc($result)):
  278. ?>
  279. <option value='<?php echo $row['id']; ?>'><?php echo $row['name']; ?></option>
  280. <?php endwhile; ?>
  281. </select>
  282. </div>
  283. </div>
  284. <br><hr style="width: 80%"><br><br>
  285. <!-- EXPIRY TIME -->
  286. <div class='form-group'>
  287. <label class='control-label col-sm-3' for='e_description'>Expiry Time:</label>
  288. <div class='col-sm-7 input-groupd'>
  289. <select class="form-control" style="text-align-last: center;" id="expiry_time" name="expiry_time" required>
  290. <option selected value="30">30 min</option>
  291. <option value="60">1 hour</option>
  292. <option value="120">2 hours</option>
  293. <option value="180">3 hours</option>
  294. <!-- <option value="240">4 hours</option> -->
  295. <!-- <option value="300">5 hours</option> -->
  296. <option value="360">6 hours</option>
  297. <option value="720">12 hours</option>
  298. <option value="1080">18 hours</option>
  299. <option value="1440">1 day</option>
  300. </select>
  301. </div>
  302. </div>
  303. </div>
  304. <br>
  305. <!--. Each Moment will need to have a <strong>predetermined expiry time</strong>; -->
  306. <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>
  307. <br>
  308. <!-- ERROR ALERT FOR USER -->
  309. <!-- <div id="error-newExperience" class="row" style="display: none;"> -->
  310. <!-- <div class="col-sm-12"> -->
  311. <!-- <div class="alert alert-danger mb-1" role="alert"> -->
  312. <!-- <h4 class="error-lead">Error!</h4> -->
  313. <!-- <p class="error-description"></p> -->
  314. <!-- </div> -->
  315. <!-- </div> -->
  316. <!-- </div> -->
  317. </div><!--modal-body-->
  318. <!-- SUBMIT OR CANCEL -->
  319. <div class='modal-footer'>
  320. <button type='button' class='btn btn-default' data-dismiss='modal'>Cancel</button>
  321. <button id="toProjectModal" type='button' class='btn btn-primary' data-dismiss='modal' onclick="nextModal('#New_3')" disabled>Next</button>
  322. </div>
  323. </div><!--modal-content-->
  324. </div><!--modal-dialog-->
  325. </div><!--modal-->
  326. <!-- POPUP FOR NEW EXPERIENCE 3 -->
  327. <div class='modal fade' id='New_3' tabindex='-1' role='dialog' aria-labelledby='NewLabel_3' aria-hidden='true'>
  328. <div class='modal-dialog modal-lg' role='document'>
  329. <div class='modal-content'>
  330. <div class='modal-body'>
  331. <!-- CLOSE BUTTON -->
  332. <button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>
  333. <div class='row'>
  334. <div class='col-sm-10'>
  335. <h2>Brand New Experience <small>(Additional Info)</small></h2>
  336. </div>
  337. </div><!--row-->
  338. <hr>
  339. <div class="row">
  340. <div class="col-sm-12 col-sm-offset-1">
  341. <h4>Is this experience part of a project or standalone?</h4>
  342. </div>
  343. </div>
  344. <!-- TYPE OF EXPERIENCE (STANDALONE - PROJECT) -->
  345. <div class="form-horizontal">
  346. <div class='form-group'>
  347. <div class='col-sm-6 col-sm-offset-3'>
  348. <select class="form-control text-center" style="text-align-last: center;" id='typeOfExperience' name='typeOfExperience' required onchange="standaloneOrNot(event)">
  349. <option selected value="Standalone">Standalone Experience</option>
  350. <option value="Part of a Project">Part of a Project</option>
  351. </select>
  352. </div>
  353. </div>
  354. </div>
  355. <div id="standalone" style="display: none;">
  356. <div class="row">
  357. <div class="col-sm-12 col-sm-offset-1">
  358. <h4>Does the project already exist, or would you like a new one?</h4>
  359. </div>
  360. </div>
  361. <div class="form-horizontal">
  362. <!-- IS THE PROJECT EXISTING OR NEW? -->
  363. <div class='form-group'>
  364. <div class='col-sm-9 col-sm-offset-2'>
  365. <select class="form-control text-center" style="text-align-last: center;" id='typeOfProject' name='typeOfProject' onchange="existingOrNot(event)">
  366. <option selected value="New">New Project</option>
  367. <option value="Existing">Existing Project</option>
  368. </select>
  369. </div>
  370. </div>
  371. <div id="newProject">
  372. <!-- PROJECT NAME -->
  373. <div class='form-group'>
  374. <label class='control-label col-sm-2 col-sm-offset-2' for='projectName'>Name:</label>
  375. <div class='col-sm-7'>
  376. <input type='text' class='form-control text-center' id='projectName' name='projectName' placeholder="Project Name">
  377. </div>
  378. </div>
  379. <!-- PROJECT DESCRIPTION -->
  380. <div class='form-group'>
  381. <label class='control-label col-sm-2 col-sm-offset-2' for='projectDescription'>Description:</label>
  382. <div class='col-sm-7'>
  383. <textarea class='form-control text-center' id='projectDescription' rows="2" name='projectDescription' placeholder="Project Description"></textarea>
  384. </div>
  385. </div>
  386. </div>
  387. <div id="existingProject" style="display: none;">
  388. <?php
  389. // CHANGE QUERY DEPENDING ON IF USER IS ADMIN OR NOT
  390. if($_SESSION['dbUserData']['admin'] === '1') {
  391. $queryProjects = "SELECT * FROM project;";
  392. } else {
  393. $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'] . "'));";
  394. }
  395. $resultProjects = mysqli_query($connection, $queryProjects);
  396. if($resultProjects->num_rows > 0):
  397. ?>
  398. <!-- CHOOSE EXISTING PROJECT -->
  399. <div class='form-group'>
  400. <label class='control-label col-sm-2 col-sm-offset-2' for='projectID'>Project:</label>
  401. <div class='col-sm-7'>
  402. <select class="form-control text-center" style="text-align-last: center;" id='projectID' name='projectID'>
  403. <?php while($rowProjects = mysqli_fetch_assoc($resultProjects)): ?>
  404. <option selected value="<?php echo $rowProjects['id']; ?>"><?php echo $rowProjects['name']; ?></option>
  405. <?php endwhile; ?>
  406. </select>
  407. </div>
  408. </div>
  409. <?php else: ?>
  410. <div class="row">
  411. <div class="col-sm-9 col-sm-offset-3">
  412. <h4><small>Uh oh! It seems you don't have a project to choose from...</small></h4>
  413. </div>
  414. </div>
  415. <?php endif; ?>
  416. </div>
  417. </div><!--form-horizontal-->
  418. </div>
  419. <br>
  420. <!-- TIPS FOR USER -->
  421. <div class="row">
  422. <div class="col-sm-10 col-sm-offset-1">
  423. <div class="alert alert-info alert-dismissable mb-1" role="alert">
  424. <button type="button" class="close" data-dismiss="alert" aria-label="Close">
  425. <span aria-hidden="true">&times;</span>
  426. </button>
  427. <h4 class="error-lead">Tips</h4>
  428. <p>If you're not sure what to choose, select "<strong>Standalone</strong>".</p>
  429. </div>
  430. </div>
  431. </div>
  432. <br>
  433. <!-- ERROR ALERT FOR USER -->
  434. <div id="error-newExperience" class="row" style="display: none;">
  435. <div class="col-sm-12">
  436. <div class="alert alert-danger mb-1" role="alert">
  437. <h4 class="error-lead">Error!</h4>
  438. <p class="error-description"></p>
  439. </div>
  440. </div>
  441. </div>
  442. </div><!--modal-body-->
  443. <!-- SUBMIT OR CANCEL -->
  444. <div class='modal-footer'>
  445. <button type='button' class='btn btn-default' data-dismiss='modal' onclick="nextModal('#New_2')">Previous</button>
  446. <button type='submit' class='btn btn-primary' name='newExperience'>Create</button>
  447. </div>
  448. </div><!--modal-content-->
  449. </div><!--modal-dialog-->
  450. </div><!--modal-->
  451. </form><!--form-->
  452. <script>
  453. let button = document.getElementById('toProjectModal');
  454. let title = document.getElementById('e_title');
  455. let description = document.getElementById('e_description');
  456. // let type = document.getElementById('e_type');
  457. let start = document.getElementById('e_start');
  458. let end = document.getElementById('e_end');
  459. let institution = document.getElementById('e_institution');
  460. // let expiryTime = document.getElementById('expiry_time');
  461. title.addEventListener('change', experienceFirstModal);
  462. description.addEventListener('change', experienceFirstModal);
  463. // type.addEventListener('change', experienceFirstModal);
  464. start.addEventListener('change', experienceFirstModal);
  465. end.addEventListener('change', experienceFirstModal);
  466. institution.addEventListener('change', experienceFirstModal);
  467. // expiryTime.addEventListener('change', experienceFirstModal);
  468. function experienceFirstModal() {
  469. let validity = true;
  470. validity &= title.checkValidity();
  471. validity &= description.checkValidity();
  472. // validity &= type.checkValidity();
  473. validity &= start.checkValidity();
  474. validity &= end.checkValidity();
  475. validity &= institution.checkValidity();
  476. // validity &= expiryTime.checkValidity();
  477. button.disabled = !validity;
  478. }
  479. function standaloneOrNot(e) {
  480. let standalonePart = document.getElementById('standalone');
  481. let selection = e.currentTarget.value;
  482. standalonePart.style.display = (selection !== 'Standalone' ? 'block' : 'none');
  483. }
  484. function existingOrNot(e) {
  485. let existingPart = document.getElementById('existingProject');
  486. let newPart = document.getElementById('newProject');
  487. let selection = e.currentTarget.value;
  488. if(selection === 'New') {
  489. existingPart.style.display = 'none';
  490. newPart.style.display = 'block';
  491. } else {
  492. existingPart.style.display = 'block';
  493. newPart.style.display = 'none';
  494. }
  495. }
  496. </script>
  497. <script src="js/home.js"></script>
  498. <script src="js/handleSubmit.js"></script>
  499. <script>
  500. // Enable popovers
  501. $(function () {
  502. $('[data-toggle="popover"]').popover();
  503. });
  504. ["newExperience"].forEach(function(formName) {
  505. var form = document.getElementById(formName);
  506. if(form) {
  507. form.addEventListener('submit', function(e) {
  508. handleSubmit(e, formName);
  509. });
  510. }
  511. });
  512. window.onload = function() {
  513. // Start Date
  514. setStartDateRange();
  515. // End Date
  516. startDate.addEventListener('change', setEndDateRange);
  517. // Duration
  518. // startDate.addEventListener('change', setDuration);
  519. // endDate.addEventListener('change', setDuration);
  520. }
  521. </script>
  522. <!-- END OF home.php -->
  523. <?php include_once 'footer.php'; ?>