Без опису

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