HW16

check-students

<div class="task5">
    <form class="task5-form">
        <label for="groups">Group:</label>
        <select name="groups" id="groups">
            <option value="0">Group 1</option>
            <option value="1">Group 2</option>
        </select>

        <label for="lessons">Lesson:</label>
        <select name="lessons" id="lessons">
            <option value="0">1</option>
            <option value="1">2</option>
            <option value="2">3</option>
        </select>

        <button type="button" id="group-take">Select</button>
    </form>
    <hr>

    <div class="students-info">
        <div class="topic-wrap">
            Topic:
            <div class="topic-info-out" id="topic-info-out">
                <input id="topic-info-in" type="text">
            </div>
        </div>

        <table>
            <thead>
            <tr>
                <td>Name</td>
                <td>Is present</td>
            </tr>
            </thead>

            <tbody>
            <tr>
                <td>Student1</td>
                <td class="out-cell" id="out-one">
                    <input type="checkbox" ></td>
            </tr>
            <tr>
                <td>Student2</td>
                <td class="out-cell" id="out-two">
                    <input type="checkbox" ></td>
            </tr>
            <tr>
                <td>Student3</td>
                <td class="out-cell" id="out-three">
                    <input type="checkbox" ></td>
            </tr>
            </tbody>
        </table>
        <button type="button" id="saveData" name="saveData">SAVE!</button>
    </div>
</div>



//SCSS

.task5{
  background-color: #FBF2E9;
  padding: 15px;
  form{
    margin: 0 auto;
    width: 380px;
    padding:0 0 10px;
    label{
      font-weight: bold;
      &:first-of-type{
        margin-left: 20px;
      }
    }

    select{
      margin-right: 15px;
    }
    button{
      width: 80px;
      border: black 1px solid;
      border-radius: 5px;
    }
  }
  .students-info{
    margin: 20px auto;
    width: 390px;
    font-size: 1.15rem;
    .topic-wrap{
      .topic-info-out{
        display: inline-block;

        width: 86%;
        input{
          width: 100%;
          border: dimgrey 1px solid;
          border-radius: 5px;
        }
      }
    }
    table{
      width: 380px;
      margin: 10px auto;

      tr{
        border-bottom: black 1px dotted;
        td{
          padding: 5px 10px;

        }
      }
    }
    button{
      width: 90%;
      margin: 15px auto;
      display: block;
      border: black 1px solid;
      border-radius: 5px;

    }
  }
}

//JS

//5

let presentStudents = [[[], [], []], [[], [], []]],
    groupTakeButton = document.getElementById('group-take'),
    saveDataButton = document.getElementById('saveData'),
    refreshSelect = document.querySelectorAll(".task5-form > select, #group-take"),
    selectGroup,
    selectLesson,
    topicName,
    studentStatus,
    outStudentData = document.querySelectorAll(".out-cell"),
    outTopicInfo = document.getElementById('topic-info-out');

function addValues() {
    selectGroup = +document.getElementById("groups").value;
    selectLesson = +document.getElementById("lessons").value;
    topicName = document.getElementById('topic-info-in').value;
    studentStatus = document.querySelectorAll(".students-info input[type='checkbox']");
    console.log(selectGroup, selectLesson, topicName, studentStatus);
}

function f5_select() {
    selectGroup = +document.getElementById("groups").value;
    selectLesson = +document.getElementById("lessons").value;
}


refreshSelect.forEach.call(refreshSelect, function (el) {
    el.addEventListener('mouseenter', f5_select);
});
function insertData(){
    saveDataButton.style.display = 'none';
    outTopicInfo.innerText = presentStudents[selectGroup][selectLesson][0];
    let k = 0;
    for (let i = 1; presentStudents[selectGroup][selectLesson].length > i; i++) {
        outStudentData[k].innerHTML = ` ${presentStudents[selectGroup][selectLesson][i]}`;
        k++;
    }
}
groupTakeButton.onclick = () => {
    if (presentStudents[selectGroup][selectLesson].length > 0) {
       insertData();
    } else {
        let returnTopic = document.createElement('input');
        returnTopic.id = 'topic-info-in';
        returnTopic.type = 'text';
        outTopicInfo.innerHTML = ' ';
        outTopicInfo.append(returnTopic);
        saveDataButton.style.display = 'block';
        outStudentData.forEach(function (el) {
            el.innerHTML = '<input type="checkbox">';
        })
    }
}

saveDataButton.onclick = () => {
    addValues();
    if (presentStudents[selectGroup][selectLesson].length === 0) {
        presentStudents[selectGroup][selectLesson][0] = topicName;
        studentStatus.forEach(function (p) {

            if (p.checked === false) {
                presentStudents[selectGroup][selectLesson].push(' - ');
            } else {
                presentStudents[selectGroup][selectLesson].push('Present!');
            }
        });
    }
    if (presentStudents[selectGroup][selectLesson].length > 0) {
        insertData();
    }
};