Bez popisu

viewExperience.php 55KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564
  1. <?php
  2. // Description: EXTRACT EXPERIENCE ID, AND IF VALID, DISPLAY ITS INFO
  3. require_once 'processes/config.php';
  4. require_once 'processes/dbh.inc.php';
  5. require_once 'processes/checkLogin.php';
  6. // IF VIEW VARIABLE NOT GIVEN, EXIT
  7. if(!isset($_GET['view'])) {
  8. exit();
  9. }
  10. // FETCH EXPERIENCE
  11. $experienceID = mysqli_real_escape_string($connection, trim($_GET['view']));
  12. $query1 = "SELECT * FROM `experience` WHERE `id` = '$experienceID';";
  13. $result1 = mysqli_query($connection, $query1) or die("Error: ".mysqli_error($connection));
  14. $row1 = mysqli_fetch_array($result1);
  15. // IF EXPERIENCE NOT IN DATABASE, EXIT
  16. if($result1->num_rows !== 1) {
  17. echo "Requested experience does not exist.";
  18. exit();
  19. }
  20. // IF EXPERIENCE DOESN'T BELONG TO USER (WHO IS NOT AN ADMIN), EXIT
  21. if($_SESSION['dbUserData']['admin'] !== '1') {
  22. $queryCheckUser = "SELECT id FROM experience WHERE id = '$experienceID' AND id IN (SELECT id_experience FROM researcher_experience WHERE id_researcher = '" . $_SESSION['dbUserData']['id_researcher'] . "');";
  23. if(mysqli_query($connection, $queryCheckUser)->num_rows === 0) {
  24. echo "You are not authorized to view this experience.";
  25. exit();
  26. }
  27. }
  28. include_once 'header.php';
  29. ?>
  30. <!--START OF viewExperience.php -->
  31. <body>
  32. <header id="main-header">
  33. <a id="logo" href=".">
  34. TANIA
  35. <img src="./img/pen_800x800.png" alt="tania logo pen" width="25" height="25">
  36. </a>
  37. <div id="account">
  38. <a class="nav-link" style="margin-right: 1rem;" href="./home.php"><i class="fas fa-arrow-left"></i> Back</a>
  39. <a class="sign-out" href="./processes/logout.php">Sign Out</a>
  40. </div>
  41. </header>
  42. <div class="container-fluid" id="view-experience-showcase">
  43. <div class="row">
  44. <div class="col-sm-12">
  45. <h2><?php echo $row1['title']; ?></h2>
  46. <div class="row">
  47. <div class="col-sm-7 col-md-8 col-lg-9">
  48. <blockquote style="color:rgb(216,216,216); margin: 0;">
  49. <h4><b style="color:#fff;">Description:</b> <span style="color:rgb(216,216,216);"><?php echo $row1['description']; ?></span></h4>
  50. <h4><b style="color:#fff;">Type:</b> <span style="color:rgb(216,216,216);"><?php echo $row1['type']; ?></span></h4>
  51. <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>
  52. </blockquote>
  53. </div><!--col-->
  54. <div class="col-sm-5 col-md-4 col-lg-3">
  55. <div id="view-experience-buttons">
  56. <div data-toggle="tooltip" data-placement="top" title="View Results" id="experience-pen" onclick="window.location='respuestas.php?exp=<?php echo $experienceID; ?>'">
  57. <span class="fas fa-poll-h"></span>
  58. </div>
  59. <div data-toggle="tooltip" data-placement="top" title="Edit Experience" id="experience-pen" onclick="nextModal('#Edit')">
  60. <span class="fas fa-pen"></span>
  61. </div>
  62. <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']; ?>')">
  63. <span class="fas fa-link"></span>
  64. </div>
  65. </div>
  66. </div><!--col-->
  67. </div><!--row-->
  68. <br>
  69. <div class="row hidden-xs" id="view-experience-tabs">
  70. <a class="active" href="#calendar">Calendar</a>
  71. <a href="#questionnaires">Questionnaires</a>
  72. <a href="#moments">Moments</a>
  73. <a href="#milestones">Milestones</a>
  74. </div><!--row-->
  75. </div><!--col-->
  76. </div><!--row-->
  77. </div><!--container-->
  78. <br>
  79. <!-- CALENDAR-->
  80. <div id="calendar" class="main-content-box show hidden-xs">
  81. <div class="container">
  82. <div class="row">
  83. <h3 class="col-sm-12">
  84. Schedule Your Experience
  85. <button type="button" class="btn btn-link btn-lg" data-toggle="popover" title="Calendar Tips" data-content="Drag and drop existing events to change their dates. Toggle month & week views for finer control." data-placement="bottom">
  86. <span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
  87. </button>
  88. </h3>
  89. </div><!--row-->
  90. <br>
  91. <div class="row">
  92. <div class="col-sm-12">
  93. <div id="actualCalendar"></div>
  94. </div>
  95. </div>
  96. <br><br><br><br>
  97. </div><!--container-->
  98. </div>
  99. <!--QUESTIONNAIRES-->
  100. <div id="questionnaires" class="main-content-box">
  101. <div class="container">
  102. <div class="row">
  103. <h3 class="col-xs-7 col-sm-9 col-md-9">Active Questionnaires</h3>
  104. <div class="col-xs-5 col-sm-3 col-md-3">
  105. <!--
  106. <span data-toggle="modal" data-target="#Import" style="margin-right: 1em;">
  107. <button type="button" class="btn btn-lg btn-default" data-toggle="tooltip" data-placement="top" title="Import Questionnaire">
  108. <span class="glyphicon glyphicon-open-file"></span>
  109. </button>
  110. </span>
  111. <span data-toggle="modal" data-target="#Duplicate">
  112. <button type="button" class="btn btn-lg btn-default" data-toggle="tooltip" data-placement="top" title="Duplicate Questionnaire">
  113. <span class="glyphicon glyphicon-paste"></span>
  114. </button>
  115. </span>
  116. -->
  117. <div id="view-experience-buttons">
  118. <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;">
  119. <span class="fas fa-file-import"></span>
  120. </div>
  121. <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;">
  122. <span class="fas fa-copy"></span>
  123. </div>
  124. </div>
  125. </div>
  126. </div><!--row-->
  127. <br>
  128. <div class="row">
  129. <div class="col-sm-12">
  130. <?php
  131. $query2 = "SELECT * FROM questionnair WHERE `id` IN (SELECT `id_questionnair` FROM experience_questionnair WHERE `id_experience` = '$experienceID');";
  132. $result2 = mysqli_query($connection, $query2);
  133. // IF THE EXPERIENCE HAS AT LEAST ONE QUESTIONNAIRE ASSOCIATED TO IT, SHOW IT
  134. // ELSE, DISPLAY A MESSAGE TO THE USER LETTING THEM KNOW THEY DON'T HAVE ONE
  135. if(mysqli_num_rows($result2) > 0):
  136. ?>
  137. <table class="table table-hover table-striped table-responsive">
  138. <thead>
  139. <tr>
  140. <th style="text-align: center;"><h4>Questionnaire</h4></th>
  141. <th style="text-align: center;"><h4>Questions</h4></th>
  142. </tr>
  143. </thead>
  144. <tbody>
  145. <?php while($row2 = mysqli_fetch_assoc($result2)): ?>
  146. <tr style="cursor: pointer;" onclick="location='viewQuestionnaire.php?view=<?php echo $row2['id']?>'">
  147. <td style="text-align: center;"><h5><?php echo $row2['q_title']; ?></h5></td>
  148. <?php
  149. $query3 = "SELECT * FROM questionnair_question WHERE id_questionnair = ".$row2['id'];
  150. $result3 = mysqli_query($connection, $query3);
  151. ?>
  152. <td style="text-align: center;"><h5><?php echo mysqli_num_rows($result3); ?></h5></td>
  153. </tr>
  154. <?php endwhile; ?>
  155. </tbody>
  156. </table>
  157. <?php else: ?>
  158. <h3 class="text-center"><small>It seems you still haven't added a questionnaire to this experience...</small></h3>
  159. <?php endif; ?>
  160. <br>
  161. <div class="row">
  162. <div class="col-sm-2 col-sm-offset-5">
  163. <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;">
  164. <span class="fas fa-plus"></span>
  165. </div>
  166. </div>
  167. </div>
  168. </div><!--col-sm-12-->
  169. </div><!--row-->
  170. <br><br>
  171. <div class="row">
  172. <div class="col-sm-offset-2 col-sm-8">
  173. <div class="alert alert-warning alert-dismisible mb-1 hidden-xs" role="alert">
  174. <button type="button" class="close" data-dismiss="alert" aria-label="Close">
  175. <span aria-hidden="true">&times;</span>
  176. </button>
  177. <h4>Tips on Questionnaires</h4>
  178. <hr>
  179. <ul>
  180. <li>These are the questionnaires that are associated to this experience.</li>
  181. <br>
  182. <li>Once you have your questionnaire, you can create your moments.</li>
  183. <br>
  184. <li>You can create new questionnaires with the plus button...
  185. <ul>
  186. <li>or import questionnaires from an Excel file!</li>
  187. <li>or copy a questionnaire from one experience to another!</li>
  188. </ul>
  189. </li>
  190. <br>
  191. </ul>
  192. </div><!--alert-->
  193. </div><!--col-sm-8-->
  194. </div><!--row-->
  195. <br>
  196. </div><!--container-->
  197. </div>
  198. <!--MOMENTS-->
  199. <div id="moments" class="main-content-box">
  200. <div class="container">
  201. <div class="row">
  202. <h3 class="col-sm-12">Active Moments</h3>
  203. </div>
  204. <div class="row">
  205. <div class="col-sm-12">
  206. <?php
  207. $query4 = "SELECT * FROM subquestionnair WHERE `id_questionnair` IN (SELECT `id_questionnair` FROM experience_questionnair WHERE `id_experience` = '$experienceID') ORDER BY date_to_administer ASC;";
  208. $result4 = mysqli_query($connection, $query4);
  209. // IF THE EXPERIENCE HAS AT LEAST ONE MOMENT ASSOCIATED TO IT, SHOW IT
  210. // ELSE, DISPLAY A MESSAGE TO THE USER LETTING THEM KNOW THEY DON'T HAVE ONE
  211. if(mysqli_num_rows($result4) > 0):
  212. $queryTotalStudents = "SELECT * FROM student_participate_experience WHERE id_experience = '$experienceID'";
  213. $resultTotalStudents = mysqli_query($connection, $queryTotalStudents);
  214. $studentCount = $resultTotalStudents->num_rows;
  215. ?>
  216. <table class="table table-hover table-striped table-responsive">
  217. <thead>
  218. <tr>
  219. <th style="text-align: center;"><h4>Moment</h4></th>
  220. <th style="text-align: center;"><h4>Questions</h4></th>
  221. <th style="text-align: center;"><h4>Date</h4></th>
  222. <th style="text-align: center;"><h4>Answer Rate</h4></th>
  223. </tr>
  224. </thead>
  225. <tbody>
  226. <?php while($row4 = mysqli_fetch_assoc($result4)): ?>
  227. <tr style="cursor: pointer;" onclick="location='viewMoment.php?view=<?php echo $row4['id']; ?>'">
  228. <td style="text-align: center;"><h5><?php echo $row4['title']; ?></h5></td>
  229. <?php
  230. $query5 = "SELECT * FROM subquestionnair_question WHERE `id_subquestionnair` = ".$row4['id'];
  231. $result5 = mysqli_query($connection, $query5);
  232. ?>
  233. <td style="text-align: center;"><h5><?php echo mysqli_num_rows($result5); ?></h5></td>
  234. <td style="text-align: center;"><h5><?php echo date("M j, Y (g:i A)", strtotime($row4['date_to_administer'])); ?></h5></td>
  235. <?php if($studentCount === 0): ?>
  236. <td style="text-align: center;"><h5 class="text-danger">Register students!</h5></td>
  237. <?php elseif(strtotime($row4['date_to_administer']) > strtotime('now')): ?>
  238. <td style="text-align: center;"><h5 class="text-warning">Still not sent</h5></td>
  239. <?php
  240. else:
  241. $queryAnswers = "SELECT * FROM student_subquestionnair WHERE id_subquestionnair = '" . $row4['id'] . "';";
  242. $resultAnswers = mysqli_query($connection, $queryAnswers);
  243. $answerCount = $resultAnswers->num_rows;
  244. ?>
  245. <td style="text-align: center;"><h5 class="text-muted"><?php echo "$answerCount out of $studentCount"; ?></h5></td>
  246. <?php endif; ?>
  247. </tr>
  248. <?php endwhile; ?>
  249. </tbody>
  250. </table>
  251. <?php else: ?>
  252. <h3 class="text-center"><small>It seems you still haven't added any moments to this experience...</small></h3>
  253. <?php endif; ?>
  254. <br>
  255. <div class="row">
  256. <div class="col-sm-2 col-sm-offset-5">
  257. <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;">
  258. <span class="fas fa-plus"></span>
  259. </div>
  260. </div>
  261. </div>
  262. </div><!--col-sm-12-->
  263. </div><!--row-->
  264. <br><br>
  265. <div class="row">
  266. <div class="col-sm-offset-2 col-sm-8">
  267. <div class="alert alert-warning alert-dismisible mb-1 hidden-xs" role="alert">
  268. <button type="button" class="close" data-dismiss="alert" aria-label="Close">
  269. <span aria-hidden="true">&times;</span>
  270. </button>
  271. <h4>Tips on Moments</h4>
  272. <hr>
  273. <ul>
  274. <li>These are the moments that are associated to this experience.</li>
  275. <br>
  276. <li>Once they're answered, you can track the results with the results button above.</li>
  277. <br>
  278. <li>You can create new moments with the plus button.</li>
  279. <br>
  280. </ul>
  281. </div><!--alert-->
  282. </div><!--col-sm-8-->
  283. </div><!--row-->
  284. <br>
  285. </div><!--container-->
  286. </div>
  287. <!--MILESTONES-->
  288. <div id="milestones" class="main-content-box">
  289. <div class="container">
  290. <div class="row">
  291. <h3 class="col-sm-12">Active Milestones</h3>
  292. </div>
  293. <div class="row">
  294. <div class="col-sm-12">
  295. <?php
  296. $query6 = "SELECT * FROM `milestone` WHERE `id_experience` = '$experienceID' ORDER BY date ASC;";
  297. $result6 = mysqli_query($connection, $query6);
  298. // IF THE EXPERIENCE HAS AT LEAST ONE MILESTONE ASSOCIATED TO IT, SHOW IT
  299. // ELSE, DISPLAY A MESSAGE TO THE USER LETTING THEM KNOW THEY DON'T HAVE ONE
  300. if(mysqli_num_rows($result6) > 0):
  301. ?>
  302. <table class="table table-hover table-striped table-responsive">
  303. <thead>
  304. <tr>
  305. <th style="text-align: center;"><h4>Milestone</h4></th>
  306. <th style="text-align: center;"><h4>Date</h4></th>
  307. </tr>
  308. </thead>
  309. <tbody>
  310. <?php while($row6 = mysqli_fetch_assoc($result6)): ?>
  311. <tr style="cursor: pointer;">
  312. <td style="text-align: center;"><h5><?php echo $row6['title']; ?></h5></td>
  313. <td style="text-align: center;"><h5><?php echo date("M j, Y", strtotime($row6['date'])); ?></h5></td>
  314. </tr>
  315. <?php endwhile; ?>
  316. </tbody>
  317. </table>
  318. <?php else: ?>
  319. <h3 class="text-center"><small>It seems you still haven't added any milestones to this experience...</small></h3>
  320. <?php endif; ?>
  321. <br>
  322. <div class="row">
  323. <div class="col-sm-2 col-sm-offset-5">
  324. <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;">
  325. <span class="fas fa-plus"></span>
  326. </div>
  327. </div>
  328. </div>
  329. </div><!--col-sm-12-->
  330. </div><!--row-->
  331. <br><br>
  332. <div class="row">
  333. <div class="col-sm-offset-2 col-sm-8">
  334. <div class="alert alert-warning alert-dismisible mb-1 hidden-xs" role="alert">
  335. <button type="button" class="close" data-dismiss="alert" aria-label="Close">
  336. <span aria-hidden="true">&times;</span>
  337. </button>
  338. <h4>Tips on Milestones</h4>
  339. <hr>
  340. <ul>
  341. <li>These are the milestones of the students involved in this experience.</li>
  342. <br>
  343. <li>Once your moments are answered you can track the impact the milestones had on the answers, if any.</li>
  344. <br>
  345. <li>You can create new milestones with the plus button.</li>
  346. <br>
  347. </ul>
  348. </div><!--alert-->
  349. </div><!--col-sm-8-->
  350. </div><!--row-->
  351. <br>
  352. </div><!--container-->
  353. </div>
  354. <br><br><br><br><br>
  355. <!-- POPUP FOR EDIT EXPERIENCE -->
  356. <form id="editForm"><!--method='POST' action='processes/updateExperience.php'-->
  357. <div class="modal fade" id="Edit" tabindex="-1" role="dialog" aria-labelledby="EditLabel" aria-hidden="true">
  358. <div class="modal-dialog" role="document">
  359. <div class="modal-content">
  360. <div class="modal-body">
  361. <!-- CLOSE BUTTON -->
  362. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  363. <span aria-hidden="true">&times;</span>
  364. </button>
  365. <div class="row">
  366. <div class="col-sm-10">
  367. <h2>Edit Experience <small>(Basic Info)</small></h2>
  368. </div>
  369. </div><!--row-->
  370. <hr><br>
  371. <div class="form-horizontal">
  372. <!-- ID -->
  373. <input type="hidden" name="id" value="<?php echo $row1['id']; ?>">
  374. <!-- NEW TITLE -->
  375. <div class="form-group">
  376. <label class="control-label col-sm-2 col-sm-offset-1">Title:</label>
  377. <div class="col-sm-7">
  378. <input type="text" class="form-control text-center" name="newTitle" maxlength="60" value="<?php echo $row1['title']; ?>" required>
  379. </div>
  380. </div>
  381. <!-- NEW DESCRIPTION -->
  382. <div class="form-group">
  383. <label class="control-label col-sm-2 col-sm-offset-1">Description:</label>
  384. <div class="col-sm-7">
  385. <textarea class="form-control text-center" name="newDescription" rows="4" style="resize: vertical;" maxlength="100" required><?php echo $row1['description']; ?></textarea>
  386. </div>
  387. </div>
  388. <!--
  389. <!~~ NEW TYPE ~~>
  390. <div class='form-group'>
  391. <label class='control-label col-sm-2 col-sm-offset-1'>Type:</label>
  392. <div class='col-sm-7'>
  393. <input type='text' class='form-control text-center' name='newType' required value="<?php echo $row1['type']; ?>">
  394. </div>
  395. </div>
  396. <!~~ NEW DURATION ~~>
  397. <div class='form-group'>
  398. <label class='control-label col-sm-2 col-sm-offset-1'>Duration:</label>
  399. <div class='col-sm-7'>
  400. <input type='number' class='form-control text-center' name='newDuration' required value="<?php echo $row1['duration_weeks']; ?>" readonly>
  401. </div>
  402. </div>
  403. <!~~ NEW START DATE ~~>
  404. <div class='form-group'>
  405. <label class='control-label col-sm-2 col-sm-offset-1'>Start Date:</label>
  406. <div class='col-sm-7'>
  407. <input type='date' class='form-control text-center' name='newStart' required value="<?php echo $row1['start_date']; ?>">
  408. </div>
  409. </div>
  410. <!~~ NEW END DATE ~~>
  411. <div class='form-group'>
  412. <label class='control-label col-sm-2 col-sm-offset-1'>End Date:</label>
  413. <div class='col-sm-7'>
  414. <input type='date' class='form-control text-center' name='newEnd' required value="<?php echo $row1['end_date']; ?>">
  415. </div>
  416. </div>
  417. -->
  418. </div><!--form-horizontal-->
  419. <!-- ERROR ALERT FOR USER -->
  420. <div id="error-editForm" class="row" style="display: none;">
  421. <div class="col-sm-12">
  422. <div class="alert alert-danger mb-1" role="alert">
  423. <h4 class="error-lead">Error!</h4>
  424. <p class="error-description"></p>
  425. </div>
  426. </div>
  427. </div>
  428. </div><!--modal-body-->
  429. <!-- SUBMIT OR CANCEL -->
  430. <div class="modal-footer">
  431. <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
  432. <button type="submit" class="btn btn-primary" name="updateExperience" disabled>Save Changes</button>
  433. </div>
  434. </div><!--modal-content-->
  435. </div><!--modal-dialog-->
  436. </div><!--modal-->
  437. </form><!--form-->
  438. <!--FORM VALIDATION FOR EDIT EXPERIENCE-->
  439. <script>
  440. let newTitle = document.querySelector('[name=newTitle]');
  441. let newDescription = document.querySelector('[name=newDescription]');
  442. // let newType = document.querySelector('[name=newType]');
  443. newTitle.addEventListener('keyup', validateEditExperience);
  444. newTitle.addEventListener('change', validateEditExperience);
  445. newDescription.addEventListener('keyup', validateEditExperience);
  446. newDescription.addEventListener('change', validateEditExperience);
  447. // newType.addEventListener('keyup', validateEditExperience);
  448. // newType.addEventListener('change', validateEditExperience);
  449. // Only enable submit button when:
  450. // 1) changes are detected,
  451. // 2) and both strings (title and description) are not empty
  452. function validateEditExperience() {
  453. let updateExperience = document.querySelector('[name=updateExperience]');
  454. updateExperience.disabled = !newTitle.checkValidity() || !newDescription.checkValidity();
  455. }
  456. </script>
  457. <!-- POPUP FOR NEW QUESTIONNAIRE 1 -->
  458. <div class="modal fade" id="NewQuestionnaire" tabindex="-1" role="dialog" aria-labelledby="NewQuestionnaireLabel" aria-hidden="true">
  459. <div class="modal-dialog modal-lg" role="document">
  460. <div class="modal-content">
  461. <div class="modal-body">
  462. <!-- CLOSE BUTTON -->
  463. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  464. <span aria-hidden='true'>&times;</span>
  465. </button>
  466. <div class="row">
  467. <div class="col-sm-10">
  468. <h2>New Questionnaire <small>(Basic Info – <em>Part 1</em>)</small></h2>
  469. </div>
  470. </div><!--row-->
  471. <hr><br>
  472. <div class="form-horizontal">
  473. <!-- TITLE -->
  474. <div class="form-group">
  475. <label class="control-label col-sm-2">Title:</label>
  476. <div class="col-sm-9">
  477. <input type="text" class="form-control text-center" name="q_title_tentative" placeholder="Title" maxlength="100" required>
  478. </div>
  479. </div>
  480. <!-- DESCRIPTION -->
  481. <div class="form-group">
  482. <label class="control-label col-sm-2">Description:</label>
  483. <div class="col-sm-9">
  484. <textarea class="form-control text-center" name="description_tentative" rows="1" placeholder="Description" maxlength="200" required></textarea>
  485. </div>
  486. </div>
  487. <!-- REFERENCE -->
  488. <div class="form-group">
  489. <label class="control-label col-sm-2">Reference:</label>
  490. <div class="col-sm-9">
  491. <input type="text" class="form-control text-center" name="referencia_tentative" placeholder="Reference" maxlength="60" required>
  492. </div>
  493. </div>
  494. <br>
  495. <!-- CATEGORIES -->
  496. <div class="form-group">
  497. <label class="control-label col-sm-2">Categories:</label>
  498. <div class="col-sm-9">
  499. <textarea id="q_categories_tentative" class="form-control text-center" name="q_categories_tentative" rows="1" placeholder="Categories (comma separated)" required></textarea>
  500. </div>
  501. </div>
  502. <!-- SUBCATEGORIES -->
  503. <div class="form-group">
  504. <label class="control-label col-sm-2">Subcategories:</label>
  505. <div class="col-sm-9">
  506. <textarea id="q_subcategories_tentative" class="form-control text-center" name="q_subcategories_tentative" rows="1" placeholder="Subcategories (comma separated)" required></textarea>
  507. </div>
  508. </div>
  509. </div>
  510. <div class="row">
  511. <div class="col col-sm-offset-2 col-sm-9">
  512. <p class="alert alert-warning text-justify">
  513. <strong>Note:</strong> You should at least have the same number of subcategories as categories.
  514. </p>
  515. </div>
  516. </div>
  517. </div><!--modal-body-->
  518. <!-- NEXT OR CANCEL -->
  519. <div class="modal-footer">
  520. <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
  521. <button id="nextQuestionnaire" type="button" class='btn btn-primary' data-dismiss="modal" onclick="nextModal('#NewQuestionnaire_2')" disabled>Next</button>
  522. </div>
  523. </div><!--modal-content-->
  524. </div><!--modal-dialog-->
  525. </div><!--modal-->
  526. <!-- FORM VALIDATION FOR NEW QUESTIONNAIRE (BASIC INFO) -->
  527. <script>
  528. // Fetch the inputs in the first modal
  529. let questionnaireTitle = document.querySelector('[name=q_title_tentative]');
  530. let questionnaireDescription = document.querySelector('[name=description_tentative]');
  531. let questionnaireReference = document.querySelector('[name=referencia_tentative]');
  532. let categories = document.querySelector('[name=q_categories_tentative]');
  533. let subcategories = document.querySelector('[name=q_subcategories_tentative]');
  534. // Add onchange and onkeyup event listeners to each input in the first modal
  535. questionnaireTitle.addEventListener('keyup', validateNewQuestionnaire);
  536. questionnaireTitle.addEventListener('change', validateNewQuestionnaire);
  537. questionnaireDescription.addEventListener('keyup', validateNewQuestionnaire);
  538. questionnaireDescription.addEventListener('change', validateNewQuestionnaire);
  539. questionnaireReference.addEventListener('keyup', validateNewQuestionnaire);
  540. questionnaireReference.addEventListener('change', validateNewQuestionnaire);
  541. categories.addEventListener('keyup', validateNewQuestionnaire);
  542. categories.addEventListener('change', validateNewQuestionnaire);
  543. subcategories.addEventListener('keyup', validateNewQuestionnaire);
  544. subcategories.addEventListener('change', validateNewQuestionnaire);
  545. // Pass the values from the first modal to the second, where the actual (hidden) inputs reside
  546. questionnaireTitle.addEventListener('keyup', function() {
  547. document.querySelector('[name=q_title]').value = questionnaireTitle.value;
  548. });
  549. questionnaireDescription.addEventListener('keyup', function() {
  550. document.querySelector('[name=description]').value = questionnaireDescription.value;
  551. });
  552. questionnaireReference.addEventListener('keyup', function() {
  553. document.querySelector('[name=referencia]').value = questionnaireReference.value;
  554. });
  555. categories.addEventListener('keyup', function() {
  556. document.querySelector('[name=q_categories]').value = categories.value;
  557. });
  558. subcategories.addEventListener('keyup', function() {
  559. document.querySelector('[name=q_subcategories]').value = subcategories.value;
  560. });
  561. // First modal's validation function
  562. // This basically enables the "Next" button if certain conditions are met
  563. function validateNewQuestionnaire() {
  564. // Fetch "Next" button in modal
  565. let nextButton = document.querySelector('#nextQuestionnaire');
  566. // Check validity of each input (valid if not empty strings)
  567. let validity = questionnaireTitle.checkValidity();
  568. validity &= questionnaireDescription.checkValidity();
  569. validity &= questionnaireReference.checkValidity();
  570. validity &= categories.checkValidity();
  571. validity &= subcategories.checkValidity();
  572. // Questionnaire should have at least the same number of subcategories as categories
  573. let rawCategories = categories.value.split(',');
  574. let rawSubcategories = subcategories.value.split(',');
  575. let categoriesArray = new Array();
  576. let subcategoriesArray = new Array();
  577. // IF clause is necessary to avoid array WARNINGS and ERRORS
  578. if(categories.value != '' && subcategories.value != '') {
  579. // Store the "trimmed" categories in categoriesArray
  580. for(let i = 0; i < rawCategories.length; i++) {
  581. rawCategories[i] = rawCategories[i].trim();
  582. // if string not empty and not whitespace, insert as category option
  583. if(/\S/.test(rawCategories[i])) {
  584. categoriesArray.push(rawCategories[i]);
  585. }
  586. }
  587. // Store the "trimmed" subcategories in subcategoriesArray
  588. for(let i = 0; i < rawSubcategories.length; i++) {
  589. rawSubcategories[i] = rawSubcategories[i].trim();
  590. // if string not empty and not whitespace, insert as subcategory option
  591. if(/\S/.test(rawSubcategories[i])) {
  592. subcategoriesArray.push(rawSubcategories[i]);
  593. }
  594. }
  595. // Only valid if there are less or equal number of categories to subcategories
  596. validity &= categoriesArray.length <= subcategoriesArray.length;
  597. }
  598. // Disabled if not valid, enabled otherwise
  599. nextButton.disabled = !validity;
  600. }
  601. </script>
  602. <form id="newQuestionnaire"><!--method="POST" action="processes/insertQuestionnaire.php"-->
  603. <!-- POPUP FOR NEW QUESTIONNAIRE 2 -->
  604. <div class="modal fade" id="NewQuestionnaire_2" tabindex="-1" role="dialog" aria-labelledby="NewQuestionnaireLabel_2" aria-hidden="true">
  605. <div class="modal-dialog modal-lg" role="document">
  606. <div class="modal-content">
  607. <div class="modal-body">
  608. <!-- CLOSE BUTTON -->
  609. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  610. <span aria-hidden="true">&times;</span>
  611. </button>
  612. <div class="row">
  613. <div class="col-sm-10">
  614. <h2>New Questionnaire <small>(Questions – <em>Part 2</em>)</small></h2>
  615. </div>
  616. </div><!--row-->
  617. <hr>
  618. <!-- EXPERIENCE ID -->
  619. <input type="hidden" name="id_experience" value="<?php echo $experienceID; ?>">
  620. <!-- QUESTIONNAIRE TITLE -->
  621. <input type="hidden" name="q_title" maxlength="100" required>
  622. <!-- QUESTIONNAIRE DESCRIPTION --->
  623. <input type="hidden" name="description" maxlength="200" required>
  624. <!-- QUESTIONNAIRE REFERENCE -->
  625. <input type="hidden" name="referencia" maxlength="60" required>
  626. <!-- QUESTIONNAIRE CATEGORIES -->
  627. <input id="q_categories" type="hidden" name="q_categories" required>
  628. <!-- QUESTIONNAIRE SUBCATEGORIES -->
  629. <input id="q_subcategories" type="hidden" name="q_subcategories" required>
  630. <!-- QUESTION -->
  631. <div id="q1">
  632. <div class="row">
  633. <div class="col col-sm-offset-1">
  634. <h4>Question 1</h4>
  635. </div>
  636. </div>
  637. <div class="form-horizontal">
  638. <!-- PREMISE -->
  639. <div class="form-group">
  640. <label class="col-sm-offset-1 control-label col-sm-2">Premise:</label>
  641. <div class="col-sm-8">
  642. <input id="q_premise1" type="text" class="form-control text-center" name="q_premise1" placeholder="Premise" maxlength="600" required>
  643. </div>
  644. </div>
  645. <!-- TYPE -->
  646. <div class="form-group">
  647. <label class="col-sm-offset-1 control-label col-sm-2">Question Type:</label>
  648. <div class="col-sm-8">
  649. <select class="form-control text-center" id="q_type1" name="q_type1" style="width:100%; text-align-last:center;" onchange="newThing(event)" required>
  650. <!-- <option disabled selected value="">Type</option> -->
  651. <option value="1">Scaled</option>
  652. <option value="2">Open Answer</option>
  653. </select>
  654. </div>
  655. </div>
  656. </div>
  657. <!-- MIN/MAX VALUES/TEXT (OPTIONAL) -->
  658. <div id="range1">
  659. <div class="form-inline col col-sm-offset-2">
  660. <div class="form-group">
  661. <label class="control-label col-sm-2">Min. Value:</label>
  662. <div class="col-sm-8">
  663. <input type="number" class="form-control text-center" id="min_val1" name="min_val1" value="1" readonly>
  664. </div>
  665. </div>
  666. <div class="form-group">
  667. <label class="control-label col-sm-2">Min. Text:</label>
  668. <div class="col-sm-8">
  669. <input type="text" class="form-control text-center" id="min_text1" name="min_text1" maxlength="40" placeholder="Very Dissatisfied">
  670. </div>
  671. </div>
  672. </div>
  673. <div class="form-inline col col-sm-offset-2">
  674. <div class="form-group">
  675. <label class="control-label col-sm-2">Max. Value:</label>
  676. <div class="col-sm-1">
  677. <input type="number" class="form-control text-center" id="max_val1" name="max_val1" value="5" min="2">
  678. </div>
  679. </div>
  680. <div class="form-group">
  681. <label class="control-label col-sm-2">Max. Text:</label>
  682. <div class="col-sm-1">
  683. <input type="text" class="form-control text-center" id="max_text1" name="max_text1" maxlength="40" placeholder="Very Satisfied">
  684. </div>
  685. </div>
  686. </div>
  687. <br>
  688. </div>
  689. <div class="form-horizontal">
  690. <!-- CORRESPONDING CATEGORY -->
  691. <div class="form-group">
  692. <label class="col-sm-offset-1 control-label col-sm-2">Category:</label>
  693. <div class="col-sm-8">
  694. <select class="form-control text-center" id="q_category1" name="q_category1" style="width: 100%; text-align-last:center;" required>
  695. <!-- <option disabled selected value="">Category</option> -->
  696. </select>
  697. </div>
  698. </div>
  699. <!-- CORRESPONDING SUBCATEGORY -->
  700. <div class="form-group">
  701. <label class="col-sm-offset-1 control-label col-sm-2">Subcategory:</label>
  702. <div class="col-sm-8">
  703. <select class="form-control text-center" id="q_subcategory1" name="q_subcategory1" style="width: 100%; text-align-last:center;" required>
  704. <!-- <option disabled selected value="">Subcategory</option> -->
  705. </select>
  706. </div>
  707. </div>
  708. </div>
  709. </div>
  710. <br>
  711. <div class="row">
  712. <div class="col-sm-offset-9 col-sm-2">
  713. <button type="button" class="btn btn-xs btn-default" onclick="addQuestion()">Add Question</button>
  714. </div>
  715. </div>
  716. <!-- ERROR ALERT FOR USER -->
  717. <div id="error-newQuestionnaire" class="row" style="display: none;">
  718. <div class="col-sm-12">
  719. <div class="alert alert-danger mb-1" role="alert">
  720. <h4 class="error-lead">Error!</h4>
  721. <p class="error-description"></p>
  722. </div>
  723. </div>
  724. </div>
  725. </div><!--modal-body-->
  726. <!-- SUBMIT OR PREVIOUS -->
  727. <div class="modal-footer">
  728. <button type="button" class="btn btn-default" data-dismiss="modal" onclick="nextModal('#NewQuestionnaire')">Previous</button>
  729. <button type="submit" class="btn btn-primary" name="createQuestionnaire">Create</button>
  730. </div>
  731. </div><!--modal-content-->
  732. </div><!--modal-dialog-->
  733. </div><!--modal-->
  734. </form>
  735. <!-- POPUP FOR IMPORT QUESTIONNAIRE -->
  736. <form id="importQuestionnaire" method="post" action="processes/importQuestionnaire.php" class='form-horizontal' enctype="multipart/form-data">
  737. <div class='modal fade' id='Import' tabindex='-1' role='dialog' aria-labelledby='ImportLabel' aria-hidden='true'>
  738. <div class='modal-dialog modal-dialog-centered modal-md' role='document'>
  739. <div class='modal-content'>
  740. <div class='modal-header'>
  741. <h3 class='modal-title' id='ImportLabel'>Import Questionnaire<button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button></h3>
  742. </div>
  743. <div class='modal-body'>
  744. <div class="form-horizontal">
  745. <input type="hidden" name="id_experience" value="<?php echo $experienceID; ?>" required>
  746. <div class="row">
  747. <div class="col-sm-12">
  748. <h4>Download Template</h4>
  749. <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>
  750. <a class="btn btn-primary btn-sm btn-block" href="nameOfTheQuestionnair.xlsx">Download Template</a>
  751. </div>
  752. </div><!--row-->
  753. <br>
  754. <br>
  755. <div class="form-group">
  756. <div class="col-sm-10 col-sm-offset-2">
  757. <label for="exampleInputFile">Questionnaire in xlsx format</label>
  758. <input type="file" name='import'>
  759. <p class="help-block">Choose your .xlsx file (remember it has to have the correct format).</p>
  760. </div>
  761. </div><!--form-group-->
  762. </div>
  763. <!-- ERROR ALERT FOR USER -->
  764. <div id="error-importQuestionnaire" class="row" style="display: none;">
  765. <div class="col-sm-12">
  766. <div class="alert alert-danger mb-1" role="alert">
  767. <h4 class="error-lead">Error!</h4>
  768. <p class="error-description"></p>
  769. </div>
  770. </div>
  771. </div>
  772. </div><!--modal-body-->
  773. <div class='modal-footer'>
  774. <button type='button' class='btn btn-default' data-dismiss='modal'>Cancel</button>
  775. <button type='submit' class='btn btn-primary' name='insertQuestionnaire'>Import</button>
  776. </div>
  777. </div><!--modal-content-->
  778. </div><!--modal-dialog-->
  779. </div><!--modal-->
  780. </form>
  781. <!-- POPUP FOR DUPLICATE QUESTIONNAIRE -->
  782. <form id="duplicateQuestionnaire" class='form-horizontal'>
  783. <div class='modal fade' id='Duplicate' tabindex='-1' role='dialog' aria-labelledby='DuplicateLabel' aria-hidden='true'>
  784. <div class='modal-dialog modal-dialog-centered' role='document'>
  785. <div class='modal-content'>
  786. <div class='modal-header'>
  787. <h3 class='modal-title' id='DuplicateLabel'>Duplicate Questionnaire<button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button></h3>
  788. </div>
  789. <div class='modal-body'>
  790. <span class='text-center'>
  791. <h4>Copy a questionnaire from one experience to another</h4>
  792. </span>
  793. <br>
  794. <?php
  795. $queryProject = "SELECT id_project FROM project_experience WHERE id_experience = '$experienceID';";
  796. $resultProject = mysqli_query($connection, $queryProject);
  797. $rowProject = mysqli_fetch_assoc($resultProject);
  798. ?>
  799. <!-- PROJECT ID (EMPTY STRING IF THERE'S NONE) -->
  800. <input type="hidden" name="projectID" value="<?php echo $rowProject['id_project']; ?>">
  801. <!-- FROM QUESTIONNAIRE -->
  802. <label for="fromQuestionnaireID">Which Questionnaire:</label>
  803. <?php
  804. // FIRST ASSUME FALSE
  805. $errorDuplicate = false;
  806. $queryQuestionnaires = "SELECT * FROM `questionnair` WHERE id IN (SELECT id_questionnair FROM experience_questionnair WHERE id_experience = '$experienceID');";
  807. $resultQuestionnaires = mysqli_query($connection, $queryQuestionnaires);
  808. if($resultQuestionnaires->num_rows > 0):
  809. ?>
  810. <select class="form-control text-center" id="fromQuestionnaireID" name="fromQuestionnaireID" style="text-align-last:center;" required>
  811. <?php while($rowQuestionnaires = mysqli_fetch_assoc($resultQuestionnaires)): ?>
  812. <option value="<?php echo $rowQuestionnaires['id']; ?>"><?php echo $rowQuestionnaires['q_title']; ?></option>
  813. <?php endwhile; ?>
  814. </select>
  815. <?php
  816. else:
  817. $errorDuplicate = true;
  818. ?>
  819. <h3 class="text-center"><small>It seems you still haven't added any questionnaires to this experience...</small></h3>
  820. <?php endif; ?>
  821. <br>
  822. <!-- TO EXPERIENCE -->
  823. <label for="toExperienceID">To What Experience:</label>
  824. <?php
  825. // CHANGE QUERY DEPENDING ON IF USER IS ADMIN OR NOT
  826. if($_SESSION['dbUserData']['admin'] === '1') {
  827. $queryExperience2 = "SELECT * FROM `experience` WHERE id != '$experienceID';";
  828. } else {
  829. $queryExperience2 = "SELECT * FROM `experience` WHERE id != '$experienceID' AND id IN (SELECT id_experience FROM researcher_experience WHERE id_researcher = '" . $_SESSION['dbUserData']['id_researcher'] . "');";
  830. }
  831. $resultExperience2 = mysqli_query($connection, $queryExperience2);
  832. if($resultExperience2->num_rows > 0):
  833. ?>
  834. <select class="form-control text-center" id="toExperienceID" name="toExperienceID" style="text-align-last:center;" required>
  835. <?php while($rowExperience2 = mysqli_fetch_assoc($resultExperience2)): ?>
  836. <option value="<?php echo $rowExperience2['id']; ?>"><?php echo $rowExperience2['title']; ?></option>
  837. <?php endwhile; ?>
  838. </select>
  839. <?php
  840. else:
  841. $errorDuplicate = true;
  842. ?>
  843. <h3 class="text-center"><small>You don't have another experience to duplicate to...</small></h3>
  844. <?php endif; ?>
  845. <br>
  846. <!-- ERROR ALERT FOR USER -->
  847. <div id="error-duplicateQuestionnaire" class="row" style="display: none;">
  848. <div class="col-sm-12">
  849. <div class="alert alert-danger mb-1" role="alert">
  850. <h4 class="error-lead">Error!</h4>
  851. <p class="error-description"></p>
  852. </div>
  853. </div>
  854. </div>
  855. </div><!--modal-body-->
  856. <!-- SUBMIT OR CANCEL -->
  857. <div class='modal-footer'>
  858. <button type='button' class='btn btn-default' data-dismiss='modal'>Cancel</button>
  859. <button type='submit' class='btn btn-primary' name='duplicateQuestionnaire' <?php if($errorDuplicate === true) echo "disabled"; ?>>Confirm</button>
  860. </div>
  861. </div><!--modal-content-->
  862. </div><!--modal-dialog-->
  863. </div><!--modal-->
  864. </form>
  865. <!-- POPUP FOR NEW MOMENT 1 -->
  866. <form id="newMoment"><!--method='POST' action='processes/insertMoment.php'-->
  867. <div class="modal fade" id="NewMoment" tabindex="-1" role="dialog" aria-labelledby="NewMomentLabel" aria-hidden="true">
  868. <div class="modal-dialog modal-lg" role="document">
  869. <div class="modal-content">
  870. <div class="modal-body">
  871. <!-- CLOSE BUTTON -->
  872. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  873. <span aria-hidden='true'>&times;</span>
  874. </button>
  875. <div class="row">
  876. <div class="col-sm-10">
  877. <h2>New Moment <small>(Basic Info – <em>Part 1</em>)</small></h2>
  878. </div>
  879. </div><!--row-->
  880. <hr><br>
  881. <div class="form-horizontal">
  882. <!--EXPERIENCE ID-->
  883. <input type="hidden" name="id_experience" value="<?php echo $experienceID; ?>">
  884. <!-- TITLE -->
  885. <div class="form-group">
  886. <label class="control-label col-sm-2">Title:</label>
  887. <div class="col-sm-9">
  888. <input type="text" class="form-control text-center" name="m_title" maxlength="60" placeholder="Title" required>
  889. </div>
  890. </div>
  891. <!-- DESCRIPTION -->
  892. <div class="form-group">
  893. <label class="control-label col-sm-2">Description:</label>
  894. <div class="col-sm-9">
  895. <textarea class="form-control text-center" name="m_description" rows="1" style="resize:vertical;" maxlength="100" placeholder="Description" required></textarea>
  896. </div>
  897. </div>
  898. <!-- DATE TO ADMINISTER -->
  899. <div class="form-group">
  900. <label class="control-label col-sm-2">Date to Administer:</label>
  901. <div class="col-sm-9">
  902. <input type="datetime-local" class="form-control text-center" name="m_date" placeholder="YYYY-MM-DDThh:mm" required>
  903. </div>
  904. </div>
  905. <!-- CORRESPONDING QUESTIONNAIRE -->
  906. <?php
  907. $query7 = "SELECT * FROM `questionnair` WHERE `id` IN (SELECT `id_questionnair` FROM `experience_questionnair` WHERE `id_experience` = '$experienceID');";
  908. $result7 = mysqli_query($connection, $query7);
  909. // IF THE EXPERIENCE HAS AT LEAST ONE QUESTIONNAIRE ASSOCIATED TO IT, SHOW IT
  910. // ELSE, DISPLAY A MESSAGE TO THE USER LETTING THEM KNOW THEY DON'T HAVE ONE
  911. if(mysqli_num_rows($result7) > 0):
  912. ?>
  913. <div class="form-group">
  914. <label class="control-label col-sm-2">Questionnaire:</label>
  915. <div class="col-sm-9">
  916. <select class="form-control" id="m_questionnaire" name="m_questionnaire" style="width:100%; text-align-last:center;" required>
  917. <option disabled selected value>Corresponding Questionnaire</option>
  918. <?php while($row7 = mysqli_fetch_assoc($result7)): ?>
  919. <option value="<?php echo $row7['id']; ?>"><?php echo $row7['q_title']; ?></option>
  920. <?php endwhile; ?>
  921. </select>
  922. </div>
  923. </div>
  924. <?php else: ?>
  925. <div class="text-center">
  926. <h3><small>First add a questionnaire!</small></h3>
  927. </div>
  928. <?php endif; ?>
  929. </div><!--form-horizontal-->
  930. </div><!--modal-body-->
  931. <!-- NEXT OR CANCEL -->
  932. <div class="modal-footer">
  933. <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
  934. <button id="nextMoment" type="button" class="btn btn-primary" data-dismiss="modal" onclick="nextModal('#NewMoment_2')" disabled>Next</button>
  935. </div>
  936. </div><!--modal-content-->
  937. </div><!--modal-dialog-->
  938. </div><!--modal-->
  939. <!-- FORM VALIDATION FOR NEW MOMENT (BASIC INFO) -->
  940. <script>
  941. // Fetch the inputs in the first modal
  942. let momentTitle = document.querySelector('[name=m_title]');
  943. let momentDescription = document.querySelector('[name=m_description]');
  944. let momentDate = document.querySelector('[name=m_date]');
  945. let momentQuestionnaire = document.querySelector('[name=m_questionnaire]');
  946. // Add onchange and onkeyup event listeners to each input in the first modal
  947. momentTitle.addEventListener('keyup', validateNewMoment);
  948. momentTitle.addEventListener('change', validateNewMoment);
  949. momentDescription.addEventListener('keyup', validateNewMoment);
  950. momentDescription.addEventListener('change', validateNewMoment);
  951. momentDate.addEventListener('keyup', validateNewMoment);
  952. momentDate.addEventListener('change', validateNewMoment);
  953. // User may not have a questionnaire yet, thus momentQuestionnaire might be null
  954. if(momentQuestionnaire) {
  955. momentQuestionnaire.addEventListener('keyup', validateNewMoment);
  956. momentQuestionnaire.addEventListener('change', validateNewMoment);
  957. }
  958. // First modal's validation function
  959. // This basically enables the "Next" button if certain conditions are met
  960. function validateNewMoment() {
  961. // Fetch "Next" button in modal
  962. let nextButton = document.querySelector('#nextMoment');
  963. // Check validity of each input (valid if not empty strings & "maxlength" is set)
  964. let validity = momentTitle.checkValidity();
  965. validity &= momentDescription.checkValidity();
  966. validity &= momentDate.checkValidity();
  967. // If user doesn't have a questionnaire yet, he can't create a moment
  968. if(momentQuestionnaire) {
  969. validity &= momentQuestionnaire.checkValidity();
  970. } else {
  971. validity = false;
  972. }
  973. // Disabled if not valid, enabled otherwise
  974. nextButton.disabled = !validity;
  975. }
  976. </script>
  977. <!-- POPUP FOR NEW MOMENT 2 -->
  978. <div class="modal fade" id="NewMoment_2" tabindex="-1" role="dialog" aria-labelledby="NewMomentLabel_2" aria-hidden="true">
  979. <div class="modal-dialog modal-lg" role="document">
  980. <div class="modal-content">
  981. <div class="modal-body">
  982. <!-- CLOSE BUTTON -->
  983. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  984. <span aria-hidden='true'>&times;</span>
  985. </button>
  986. <div class="row">
  987. <div class="col-sm-10">
  988. <h2>New Moment <small>(Questions – <em>Part 2</em>)</small></h2>
  989. </div>
  990. </div><!--row-->
  991. <hr><br>
  992. <!-- QUESTION -->
  993. <div id="qq1">
  994. <div class="row">
  995. <div class="col-sm-11 col-sm-offset-1">
  996. <h4>Question 1</h4>
  997. </div>
  998. </div>
  999. <!-- CHOOSE QUESTION FROM CORRESPONDING QUESTIONNAIRE -->
  1000. <div class="form-horizontal">
  1001. <div class="form-group">
  1002. <div class='col-sm-offset-2 col-sm-9'>
  1003. <select class="form-control" id="m_question_1" name="m_question_1" style="width:100%; text-align-last:center;" required>
  1004. <option disabled selected value>Select Question</option>
  1005. </select>
  1006. </div>
  1007. </div>
  1008. </div>
  1009. <br>
  1010. </div><!--#qq-->
  1011. <div class="row">
  1012. <div class="col-sm-offset-9 col-sm-2">
  1013. <button type='button' class='btn btn-xs btn-default' onclick='addSelectableQuestion()'>Add Question</button>
  1014. </div>
  1015. </div>
  1016. <!-- ERROR ALERT FOR USER -->
  1017. <div id="error-newMoment" class="row" style="display: none;">
  1018. <div class="col-sm-12">
  1019. <div class="alert alert-danger mb-1" role="alert">
  1020. <h4 class="error-lead">Error!</h4>
  1021. <p class="error-description"></p>
  1022. </div>
  1023. </div>
  1024. </div>
  1025. </div><!--modal-body-->
  1026. <!-- NEXT OR CANCEL -->
  1027. <div class="modal-footer">
  1028. <button type="button" class="btn btn-default" data-dismiss="modal" onclick="nextModal('#NewMoment')">Previous</button>
  1029. <button type="submit" class="btn btn-primary" name="newMoment" <?php if(mysqli_num_rows($result7) == 0) { echo 'disabled'; } ?>>Create</button>
  1030. </div>
  1031. </div><!--modal-content-->
  1032. </div><!--modal-dialog-->
  1033. </div><!--modal-->
  1034. </form>
  1035. <!-- POPUP FOR NEW MILESTONE -->
  1036. <form id="newMilestone">
  1037. <div class="modal fade" id="NewMilestone" tabindex="-1" role="dialog" aria-labelledby="NewMilestoneLabel" aria-hidden="true">
  1038. <div class="modal-dialog" role="document"">
  1039. <div class="modal-content">
  1040. <div class="modal-body">
  1041. <!-- CLOSE BUTTON -->
  1042. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  1043. <span aria-hidden="true">&times;</span>
  1044. </button>
  1045. <div class="row">
  1046. <div class="col-sm-10">
  1047. <h2>New Milestone</h2>
  1048. </div>
  1049. </div><!--row-->
  1050. <hr><br>
  1051. <div class="form-horizontal">
  1052. <!-- EXPERIENCE ID -->
  1053. <input type="hidden" name="id_experience" value="<?php echo $experienceID; ?>">
  1054. <!-- TITLE -->
  1055. <div class="form-group">
  1056. <label class="control-label col-sm-2">Title:</label>
  1057. <div class="col-sm-9">
  1058. <input type="text" class="form-control text-center" name="mil_title" maxlength="256" placeholder="Title" required>
  1059. </div>
  1060. </div>
  1061. <!-- DATE -->
  1062. <div class="form-group">
  1063. <label class="control-label col-sm-2">Date:</label>
  1064. <div class="col-sm-9">
  1065. <input type="date" class="form-control text-center" name="mil_date" placeholder="YYYY-MM-DD" required>
  1066. </div>
  1067. </div>
  1068. </div>
  1069. <!-- ERROR ALERT FOR USER -->
  1070. <div id="error-newMilestone" class="row" style="display: none;">
  1071. <div class="col-sm-12">
  1072. <div class="alert alert-danger mb-1" role="alert">
  1073. <h4 class="error-lead">Error!</h4>
  1074. <p class="error-description"></p>
  1075. </div>
  1076. </div>
  1077. </div>
  1078. </div><!--modal-body-->
  1079. <!-- NEXT OR CANCEL -->
  1080. <div class="modal-footer">
  1081. <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
  1082. <button type="submit" class="btn btn-primary" name="newMilestone">Create</button>
  1083. </div>
  1084. </div><!--modal-content-->
  1085. </div><!--modal-dialog-->
  1086. </div><!--modal-->
  1087. </form>
  1088. <!-- STORE START DATE FOR CALENDAR RERENDERING LATER -->
  1089. <input id="experience_start_date" type="hidden" value="<?php echo $row1['start_date']; ?>">
  1090. <!-- FULL CALENDAR IMPORTS -->
  1091. <script src="processes/fullcalendar/packages/core/main.min.js"></script>
  1092. <script src="processes/fullcalendar/packages/daygrid/main.min.js"></script>
  1093. <script src="processes/fullcalendar/packages/timegrid/main.min.js"></script>
  1094. <script src="processes/fullcalendar/packages/interaction/main.min.js"></script>
  1095. <!-- <script src="https://unpkg.com/@fullcalendar/core/main.min.js"></script> -->
  1096. <!-- <script src="https://unpkg.com/@fullcalendar/daygrid/main.min.js"></script> -->
  1097. <!-- <script src="https://unpkg.com/@fullcalendar/timegrid@4.3.0/main.min.js"></script> -->
  1098. <!-- <script src="https://unpkg.com/@fullcalendar/interaction@4.3.0/main.min.js"></script> -->
  1099. <script src="js/viewExperience.js"></script>
  1100. <script src="js/handleSubmit.js"></script>
  1101. <script>
  1102. // Enable popovers
  1103. $(function () {
  1104. $('[data-toggle="popover"]').popover();
  1105. });
  1106. // Removed "importQuestionnaire" because of weird non-fetching behaviour of importQuestionnaire.php
  1107. ["editForm", "newQuestionnaire", "newMoment", "newMilestone", "duplicateQuestionnaire"].forEach(function(formName) {
  1108. var form = document.getElementById(formName);
  1109. if(form) {
  1110. form.addEventListener('submit', function(e) {
  1111. handleSubmit(e, formName);
  1112. });
  1113. }
  1114. });
  1115. //window.onload = function() {
  1116. // First load an empty calendar
  1117. var calendarElement = document.getElementById('actualCalendar');
  1118. var calendar = new FullCalendar.Calendar(calendarElement, {
  1119. plugins: [ 'dayGrid', 'timeGrid', 'interaction' ],
  1120. header: {
  1121. left: 'prev,next today',
  1122. center: 'title',
  1123. right: 'dayGridMonth,timeGridWeek'//,timeGridDay
  1124. },
  1125. defaultDate: document.getElementById('experience_start_date').value,
  1126. businessHours: true,
  1127. editable: true,
  1128. dragScroll: true,
  1129. eventDrop: function(eventDropInfo) {
  1130. $.post(document.location.protocol + "//tania.uprrp.edu/admin_nuevo/special4.php", {
  1131. id: eventDropInfo.event.id,
  1132. experienceID: document.querySelector('input[name=id_experience]').value,
  1133. newStartDate: Date.parse(eventDropInfo.event.start), // convert to UNIX timestamp
  1134. newEndDate: Date.parse(eventDropInfo.event.end) // convert to UNIX timestamp
  1135. }).fail(function() {
  1136. alert('An error occurred! Resetting calendar...');
  1137. eventDropInfo.revert();
  1138. });
  1139. }
  1140. });
  1141. calendar.render();
  1142. // After the rest of the page has loaded, fetch events from DB & re-render calendar
  1143. var calendarConfig;
  1144. $.post(document.location.protocol + "//tania.uprrp.edu/admin_nuevo/special2.php",
  1145. {
  1146. experienceID: document.querySelector('input[name=id_experience]').value
  1147. },
  1148. function(data, status) {
  1149. if(!isJSON(data)) {
  1150. return;
  1151. }
  1152. calendarConfig = JSON.parse(data);
  1153. }
  1154. ).done(function() {
  1155. // console.log(calendarConfig);
  1156. if(calendarConfig === undefined) {
  1157. alert("Couldn't fetch your events! Please refresh this page. If this keeps ocurring, contact the page administrator.");
  1158. return;
  1159. }
  1160. calendarConfig.events.forEach(calendarEvent => {
  1161. calendar.addEvent(calendarEvent);
  1162. });
  1163. calendar.render();
  1164. }).fail(function() {
  1165. alert("Couldn't fetch your events! Please refresh this page. If this keeps ocurring, contact the page administrator.");
  1166. });
  1167. //}//domcontentloaded//onload
  1168. </script>
  1169. <?php include_once 'footer.php'; ?>