diff --git a/competency_iena_competencies_2.php b/competency_iena_competencies_2.php index 9c5d6609baaa25e9f6c94698ac2b44eeb1d56f1b..ef3ff423d41d621b4bc913dd163af4f7f1b13111 100644 --- a/competency_iena_competencies_2.php +++ b/competency_iena_competencies_2.php @@ -45,8 +45,7 @@ if ($count_course_cpts === 0) { $student->get_student_by_id($studentid); $PAGE->set_heading($OUTPUT->heading($student->firstname . " " . $student->lastname, 2, 'headingblock header outline')); - $PAGE->requires->js("/blocks/competency_iena/js/datalist-polyfill.min.js"); - $PAGE->requires->js("/blocks/competency_iena/js/stud-x-cpts.js"); + $PAGE->requires->js("/blocks/competency_iena/js/dropdown.js"); echo $OUTPUT->header(); /* Les demandes de validation de compétence (review) prises dans le cptuser car n'existent pas dans le contexte restreint à un cours. */ @@ -81,19 +80,20 @@ if ($count_course_cpts === 0) { echo "<h2 class='h3'>{$student->firstname} {$student->lastname}</h2>"; if ( !$is_student ) { - echo "<form action='{$CFG->wwwroot}/blocks/competency_iena/competency_iena_competencies_2.php' id='change_stud_form' class='form-inline'>"; + echo "<form action='{$CFG->wwwroot}/blocks/competency_iena/competency_iena_competencies_2.php' id='change_stud_form' class='form-inline' autocomplete='off' style='display: block;height: 1.5rem;'>"; echo "<input type='text' hidden name='courseid' value='{$courseid}'>"; echo "<span hidden id='studentid'>{$studentid}</span>"; - /* https://github.com/mfranzke/datalist-polyfill */ - echo "<label class='m-y-1 m-r-1' for='studentid_sel' style='color: black;'>Etudiant</label>"; - echo "<input type='text' name='studentid' id='studentid_sel' value='' list='student_list' class='form-control m-r-1'>"; - echo "<datalist id='student_list' title='Select student'>"; + + echo "<div id='student_dropdown' class='iena-dropdown' style='z-index: 10;'>"; + echo "<input type='text' hidden name='studentid' id='studentid_sel' class='iena-drop-input-value' value=''>"; + echo "<input type='text' value='' class='form-control iena-drop-input' style='font-size: .7rem; line-height: 1; width: 300px;' placeholder='{$student->firstname} {$student->lastname}'><button class='btn btn-secondary' id='prevStud' style='font-size: .8rem;line-height: 1.09; margin-left: 0.5rem;'>Précédent</button><button class='btn btn-secondary' id='nextStud' style='font-size: .8rem;line-height: 1.09; margin-left: 0.5rem;'>Suivant</button>"; + echo "<div class='iena-droplist' id='student_list'>"; foreach ($students as $stud) { - echo "<option value='{$stud->firstname} {$stud->lastname} ({$stud->id})' data-value='{$stud->id}'>{$stud->firstname} {$stud->lastname} ({$stud->id})</option>"; + echo "<a href='#' data-value='{$stud->id}' class='iena-drop-item' style='display: none;'>{$stud->firstname} {$stud->lastname}</a>"; } - echo "</datalist>"; - echo "<div><button class='btn btn-secondary' id='prevStud'>Précédent</button>"; - echo "<button class='btn btn-secondary m-l-1' id='nextStud'>Suivant</button></div>"; + echo "</div>"; + echo "</div>"; + echo "</form>"; } @@ -135,7 +135,7 @@ if ($count_course_cpts === 0) { echo " <a href='{$CFG->wwwroot}/blocks/competency_iena/course_competency.php?courseid={$courseid}&studentid={$studentid}&competencyid={$cpt->get('id')}' class='list-group-item list-group-item-action{$proficient_class}'> <div class='d-flex w-100 justify-content-between'> - <h3 class='mb-1 iena-cpt-action-title'>{$cpt->get('shortname')}</h3>"; + <h3 class='mb-1 iena-cpt-action-title h4'>{$cpt->get('shortname')}</h3>"; foreach ($reviews_data as $review) { if ( $review->competencyid == $cpt->get('id') ) { echo "<div><small class='review-badge'>Évaluation demandée</small></div>"; @@ -143,8 +143,8 @@ if ($count_course_cpts === 0) { } } echo "</div> - <p class='' style='margin-bottom: 0;'>Évaluation : <em>{$eval}</em></p> - <small class=''>Acquis : {$proficient_str}</small> + <p class='small' style='margin-bottom: 0;'>Évaluation : <em>{$eval}</em> / Acquis : {$proficient_str}</p> + <!--<small class=''>Acquis : {$proficient_str}</small>--> </a>"; } echo "</div>"; diff --git a/competency_iena_competency_students_2.php b/competency_iena_competency_students_2.php index d9776a18c73d844f5ded4984e6637baa6e06083f..0614115fa536f65ecccfb5145346aeb7e9a29084 100644 --- a/competency_iena_competency_students_2.php +++ b/competency_iena_competency_students_2.php @@ -52,8 +52,7 @@ if (count($course_cpts) === 0) { } $PAGE->set_heading($OUTPUT->heading($current_cpt->shortname, 2, 'headingblock header outline')); - $PAGE->requires->js("/blocks/competency_iena/js/datalist-polyfill.min.js"); - $PAGE->requires->js("/blocks/competency_iena/js/cpt-x-studs.js"); + $PAGE->requires->js("/blocks/competency_iena/js/dropdown.js"); echo $OUTPUT->header(); /* Les étudiants. */ @@ -72,7 +71,7 @@ if (count($course_cpts) === 0) { echo "<div class='alert row' style='padding: 0; background-color: inherit; color: inherit;'>"; /* Début change competency. */ echo "<div class='col-12' style='padding-left: 0;'>"; - echo "<form action='{$CFG->wwwroot}/blocks/competency_iena/competency_iena_competency_students_2.php' id='change_cpt_form' class='form-inline'>"; + echo "<form action='{$CFG->wwwroot}/blocks/competency_iena/competency_iena_competency_students_2.php' id='change_cpt_form' class='form-inline' autocomplete='off' style='display: block;height: 1.5rem;'>"; echo "<input type='text' hidden name='courseid' value='{$COURSE->id}'>"; if ( isset($_GET['grade']) ) { echo "<input type='text' hidden name='grade' value='{$_GET['grade']}'>"; @@ -84,15 +83,26 @@ if (count($course_cpts) === 0) { echo "<input type='text' hidden name='review' value='{$_GET['review']}'>"; } echo "<span hidden id='competencyid'>{$current_cpt->id}</span>"; - echo "<label class='m-r-1' for='competencyid_sel' style=''>Changer de compétence</label>"; - echo "<input type='text' name='competencyid' id='competencyid_sel' value='' list='competency_list' class='form-control'>"; - echo "<datalist id='competency_list' title='Select competency'>"; + + // echo "<input type='text' name='competencyid' id='competencyid_sel' value='' list='competency_list' class='form-control'>"; + // echo "<datalist id='competency_list' title='Select competency'>"; + // foreach ($course_cpts as $course_cpt) { + // echo "<option value='{$course_cpt->get('shortname')} ({$course_cpt->get('id')})' data-value='{$course_cpt->get('id')}'>{$course_cpt->get('shortname')} ({$course_cpt->get('id')})</option>"; + // } + // echo "</datalist>"; + // echo "<button class='btn btn-secondary m-l-1' id='prevCpt'>Précédent</button>"; + // echo "<button class='btn btn-secondary m-l-1' id='nextCpt'>Suivant</button>"; + + echo "<div id='student_dropdown' class='iena-dropdown' style='z-index: 1;'>"; + echo "<input type='text' hidden name='competencyid' id='competencyid_sel' class='iena-drop-input-value' value=''>"; + echo "<input type='text' value='' class='form-control iena-drop-input' style='font-size: .7rem; line-height: 1; width: 300px;' placeholder='{$current_cpt->shortname}' autocomplete='nope'><button class='btn btn-secondary' id='prevCpt' style='font-size: .8rem;line-height: 1.09; margin-left: 0.5rem;'>Précédent</button><button class='btn btn-secondary' id='nextCpt' style='font-size: .8rem;line-height: 1.09; margin-left: 0.5rem;'>Suivant</button>"; + echo "<div class='iena-droplist' id='competency_list'>"; foreach ($course_cpts as $course_cpt) { - echo "<option value='{$course_cpt->get('shortname')} ({$course_cpt->get('id')})' data-value='{$course_cpt->get('id')}'>{$course_cpt->get('shortname')} ({$course_cpt->get('id')})</option>"; + echo "<a href='#' data-value='{$course_cpt->get('id')}' class='iena-drop-item' style='display: none;'>{$course_cpt->get('shortname')}</a>"; } - echo "</datalist>"; - echo "<button class='btn btn-secondary m-l-1' id='prevCpt'>Précédent</button>"; - echo "<button class='btn btn-secondary m-l-1' id='nextCpt'>Suivant</button>"; + echo "</div>"; + echo "</div>"; + echo "</form>"; echo "</div>"; echo "</div>"; /* Fin change competency. */ diff --git a/js/dropdown.js b/js/dropdown.js index 0dfa1b1b368bba77d74838a0e527245100674f95..5a39ad62363cef6546994e6099b23b0a8cab0710 100644 --- a/js/dropdown.js +++ b/js/dropdown.js @@ -60,55 +60,55 @@ /* Activation of previous and next buttons for dropdowns */ - var opts = document.getElementById('student_list').childNodes; - var studentid = document.getElementById('studentid').innerHTML; - for (var i = 0; i < opts.length; i++) { - if (opts[i].dataset.value === studentid) { - var prev = opts[i - 1] === undefined ? false : opts[i - 1].dataset.value; - var next = opts[i + 1] === undefined ? false : opts[i + 1].dataset.value; - if (prev === false) { - document.getElementById('prevStud').setAttribute('disabled', 'disabled'); - } else { - // document.getElementById('prevStud').href += prev; - document.getElementById('prevStud').dataset.prev = prev; - document.getElementById('prevStud').onclick = function () { - document.getElementById('studentid_sel').value = document.getElementById('prevStud').dataset.prev; + if (document.getElementById('student_list') !== null) { + var opts = document.getElementById('student_list').childNodes; + var studentid = document.getElementById('studentid').innerHTML; + for (var i = 0; i < opts.length; i++) { + if (opts[i].dataset.value === studentid) { + var prev = opts[i - 1] === undefined ? false : opts[i - 1].dataset.value; + var next = opts[i + 1] === undefined ? false : opts[i + 1].dataset.value; + if (prev === false) { + document.getElementById('prevStud').setAttribute('disabled', 'disabled'); + } else { + document.getElementById('prevStud').dataset.prev = prev; + document.getElementById('prevStud').onclick = function () { + document.getElementById('studentid_sel').value = document.getElementById('prevStud').dataset.prev; + } } - } - if (next === false) { - document.getElementById('nextStud').setAttribute('disabled', 'disabled'); - } else { - // document.getElementById('nextStud').href += next; - document.getElementById('nextStud').dataset.next = next; - document.getElementById('nextStud').onclick = function () { - document.getElementById('studentid_sel').value = document.getElementById('nextStud').dataset.next; + if (next === false) { + document.getElementById('nextStud').setAttribute('disabled', 'disabled'); + } else { + document.getElementById('nextStud').dataset.next = next; + document.getElementById('nextStud').onclick = function () { + document.getElementById('studentid_sel').value = document.getElementById('nextStud').dataset.next; + } } } } } - var opts = document.getElementById('competency_list').childNodes; - var competencyid = document.getElementById('competencyid').innerHTML; - for (var i = 0; i < opts.length; i++) { - if (opts[i].dataset.value === competencyid) { - var prev = opts[i - 1] === undefined ? false : opts[i - 1].dataset.value; - var next = opts[i + 1] === undefined ? false : opts[i + 1].dataset.value; - if (prev === false) { - document.getElementById('prevCpt').setAttribute('disabled', 'disabled'); - } else { - // document.getElementById('prevCpt').href += prev; - document.getElementById('prevCpt').dataset.prev = prev; - document.getElementById('prevCpt').onclick = function () { - document.getElementById('competencyid_sel').value = document.getElementById('prevCpt').dataset.prev; + if (document.getElementById('competency_list') !== null) { + var opts = document.getElementById('competency_list').childNodes; + var competencyid = document.getElementById('competencyid').innerHTML; + for (var i = 0; i < opts.length; i++) { + if (opts[i].dataset.value === competencyid) { + var prev = opts[i - 1] === undefined ? false : opts[i - 1].dataset.value; + var next = opts[i + 1] === undefined ? false : opts[i + 1].dataset.value; + if (prev === false) { + document.getElementById('prevCpt').setAttribute('disabled', 'disabled'); + } else { + document.getElementById('prevCpt').dataset.prev = prev; + document.getElementById('prevCpt').onclick = function () { + document.getElementById('competencyid_sel').value = document.getElementById('prevCpt').dataset.prev; + } } - } - if (next === false) { - document.getElementById('nextCpt').setAttribute('disabled', 'disabled'); - } else { - // document.getElementById('nextCpt').href += next; - document.getElementById('nextCpt').dataset.next = next; - document.getElementById('nextCpt').onclick = function () { - document.getElementById('competencyid_sel').value = document.getElementById('nextCpt').dataset.next; + if (next === false) { + document.getElementById('nextCpt').setAttribute('disabled', 'disabled'); + } else { + document.getElementById('nextCpt').dataset.next = next; + document.getElementById('nextCpt').onclick = function () { + document.getElementById('competencyid_sel').value = document.getElementById('nextCpt').dataset.next; + } } } }