JS динамичные свойства класса

Question

немного не понимаю вопроса, или реально ли делать как-то динамичные свойства в js

“Добавить новое свойство” - для добавления нового свойства в объекте (например адрес школы) и новой информации. Создает модальное окно со следующими элементами: Поле Название нового свойства - text input; Поле Данные нового свойства - text input; Кнопка “Добавить” - добавляет информацию в базу данных

Для организации бизнес логики приложения используется только возможности языка JavaScript Для организации хранения и обработки информации использовать пользовательский объект (класс) со всеми перечисленными в задании полями, коллекциями (типа set, map) и методами, конструктором, а также методами отвечающими за вывод значений.

Проект представляем собой html страницу для организации приема информации (о учеников) из формы с полями: ФИО ученика - text input Адреса ученика - text input № класса ученика - text input Признак участия в олимпиадах ученика - checkbox (true/false).

Мой класс выглядит так

const db = openDatabase('fl', 1.0, 'FL DB', 2 * 1024 * 1024);
db.transaction(function(tx) {
  tx.executeSql('CREATE TABLE IF NOT EXISTS Students (fio, address, class_num, olymp)');
});

const MainTable = document.getElementById("MainTable");
const FormCreateBtn = document.getElementById("FormCreateBtn");
const Table = document.getElementById("Table");
const FormNewPropBtn = document.getElementById("FormNewPropBtn");
const FormViewBtn = document.getElementById("FormViewBtn");
const FormNoOlympBtn = document.getElementById("FormNoOlympBtn");
const FormRemoveBtn = document.getElementById("FormRemoveBtn");
const FormClearBtn = document.getElementById("FormClearBtn");
const studentFIO = document.getElementById("studentFIO");
const studentAddress = document.getElementById("studentAddress");
const studentClass = document.getElementById("studentClass");
const studentOlymp = document.getElementById("studentOlymp");
const StudentsIdsList = document.getElementById("StudentsIdsList");

class Student {
  constructor(fio, address, class_num, olymp) {
    this.fio = fio;
    this.address = address;
    this.class_num = class_num;
    this.olymp = olymp;
  }

  set setId(id) {
    this.id = id;
  }

  get getId() {
    return this.id;
  }
}

class Students {
  constructor() {
    this.students = [];
  }

  addStudent(student) {
    this.students.push(student);
    addStudentToStudentList(student);
  }

  getStudent(id) {
    let stud = null
    this.students.map(function(student) {
      student.getId === id ? stud = student : null
    })
    return stud
  }

  getStudents() {
    return this.students;
  }

  getStudentsWithOutOlymp() {
    return this.students.filter(function(student) {
      return student.olymp === 'false';
    })
  }

  saveStudent(student) {
    let id = null
    db.transaction(function(tx) {
      tx.executeSql('INSERT INTO Students (fio, address, class_num, olymp) VALUES (?, ?, ?, ?)', [student.fio, student.address, student.class_num, student.olymp], function(tx, results) {
        console.log(results.insertId)
        student.setId = results.insertId
        students.addStudent(student)
        alert('Success');
      });
    });
    console.log('student saved', student.getId);

  }

  removeStudent(id) {
    const curStudent = this.getStudent(+id);
    const index = this.students.indexOf(curStudent);
    this.students.splice(index, 1);
    db.transaction(function(tx) {
      tx.executeSql('DELETE FROM Students WHERE rowid = ?', [id], function(tx, results) {
        alert('Success');
        deleteStudentToStudentList();
      });
    });

  }

  updateStudent(id, student) {
    this.students[id] = student;
  }
}

let students = new Students();

function loadStudents() {
  db.transaction(function(tx) {
    tx.executeSql(`SELECT rowid as id,* FROM Students`, [], function(tx, results) {
      for (let i = 0; i < results.rows.length; i++) {
        let student = new Student(results.rows.item(i).fio, results.rows.item(i).address, results.rows.item(i).class_num, results.rows.item(i).olymp);
        student.setId = results.rows.item(i).id;
        students.addStudent(student);
      }
    });
  });
}

loadStudents()

function addStudentToStudentList(student) {
  StudentsIdsList.innerHTML += `<option value="${student.getId}">${student.fio}</option>`;
}

function deleteStudentToStudentList() {
  let index = StudentsIdsList.selectedIndex;
  StudentsIdsList.removeChild(StudentsIdsList[index]);
}

FormClearBtn.onclick = function(e) {
  e.preventDefault()
  clearForm();
  alert("Success")
}
FormCreateBtn.onclick = function(e) {
  e.preventDefault()
  let student = new Student(studentFIO.value, studentAddress.value, studentClass.value, studentOlymp.checked);
  students.saveStudent(student)
  clearForm();
}
FormViewBtn.onclick = function(e) {
  e.preventDefault()
  if (!students.getStudents().length) {
    alert("Нет учеников")
  }
  Table.tBodies[0].innerHTML = '';
  students.getStudents().forEach(function(student) {
    Table.tBodies[0].innerHTML += `<tr><td scope="row">${student.getId}</td><td>${student.fio}</td><td>${student.address}</td><td>${student.class_num}</td><td>${student.olymp === 'true' ? "Да" : "Нет"}</td>`
  });
}
FormNoOlympBtn.onclick = function(e) {
  e.preventDefault()
  if (!students.getStudentsWithOutOlymp().length) {
    alert("Нет подходящих учеников")
  }
  Table.tBodies[0].innerHTML = ``
  students.getStudentsWithOutOlymp().forEach(function(student) {
    Table.tBodies[0].innerHTML += `<tr><td scope="row">${student.getId}</td><td>${student.fio}</td><td>${student.address}</td><td>${student.class_num}</td><td>Нет</td>`
  });
}
FormRemoveBtn.onclick = function(e) {
  e.preventDefault()
  if (!+StudentsIdsList.value) {
    alert("Выберите студента");
    return false
  }
  students.removeStudent(StudentsIdsList.value);
}


function clearForm() {
  studentFIO.value = "";
  studentAddress.value = "";
  studentClass.value = "";
  studentOlymp.checked = false;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <meta name="generator" content="">
  <title>Students</title>

   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  

  <!-- Favicons -->
  <link rel="icon" href="/favicon.ico">
  <meta name="theme-color" content="#712cf9">

  <!-- Custom styles for this template -->
  <link href="/css/main.css" rel="stylesheet">
</head>

<body>

  <div class="col-lg-10 mx-auto p-4 py-md-5">
    <header class="d-flex align-items-center pb-4 mb-5 border-bottom">
      <h1 class="mx-auto h4 text-center"> Student data</h1>
    </header>

    <main>
      <div class="main-form" id="MainForm">
        <form class=" col-lg-8 mx-auto ">
          <div class="mb-3">
            <label for="studentFIO" class="form-label">ФИО:</label>
            <input type="text" class="form-control" id="studentFIO" aria-describedby="studentFIOHelp">
            <div id="studentFIOHelp" class="form-text">ФИО ученика</div>
          </div>
          <div class="mb-3">
            <label for="studentAddress" class="form-label">Адреса:</label>
            <input type="text" class="form-control" id="studentAddress" aria-describedby="studentAddressHelp">
            <div id="studentAddressHelp" class="form-text">Адреса ученика</div>
          </div>
          <div class="mb-3">
            <label for="studentClass" class="form-label">№ класса:</label>
            <input type="text" class="form-control" id="studentClass" aria-describedby="studentClassHelp">
            <div id="studentClassHelp" class="form-text">№ класса ученика</div>
          </div>
          <div class="mb-3 form-check">
            <input type="checkbox" class="form-check-input" id="studentOlymp">
            <label class="form-check-label" for="studentOlymp">Олимпиадник?</label>
          </div>
        </form>
        <div class="col-lg-8 mx-auto">
          <ul class="nav ">
            <li class="nav-item m-1">
              <a class="btn btn-primary" id="FormCreateBtn" role="button">Добавить ученика</a>
            </li>
            <li class="nav-item m-1">
              <a class="btn btn-info" id="FormClearBtn" role="button">Очистить форму</a>
            </li>
            <li class="nav-item m-1">
              <a class="btn btn-primary" id="FormNewPropBtn" data-bs-toggle="modal" data-bs-target="#createModal" role="button">Добавить новое свойство</a>
            </li>
          </ul>
          <ul class="nav">
            <li class="nav-item m-1">
              <a class="btn btn-primary" id="FormViewBtn" role="button">Просмотр учеников</a>
            </li>
            <li class="nav-item m-1">
              <a class="btn btn-primary" id="FormNoOlympBtn" role="button">Не олимпиадники</a>
            </li>
            <li class="nav-item m-1">
              <div class="row g-1">
                <select class="col g-1 form-select form-select-sm" id="StudentsIdsList" aria-label=".form-select-sm example">
                  <option>Выберите ученика</option>
                </select>
                <a class="col g-1 btn btn-danger" id="FormRemoveBtn" role="button" href="#">Удалить запись</a>
              </div>
            </li>
          </ul>
        </div>
      </div>

      <div class="main-table mt-5" id="MainTable">
        <table id="Table" class="table">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">ФИО</th>
              <th scope="col">Адреса</th>
              <th scope="col">№ класса</th>
              <th scope="col">Участие в олимпиалде</th>
            </tr>
          </thead>
          <tbody>
          </tbody>
        </table>
      </div>
      <!-- Modal -->
      <div class="modal fade" id="createModal" tabindex="-1" aria-labelledby="createModal" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h1 class="modal-title fs-5" id="createModalLabel">Modal title</h1>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
              <button type="button" class="btn btn-primary">Добавить</button>
            </div>
          </div>
        </div>
      </div>
    </main>
    <footer class="pt-5 my-5 text-muted border-top">

    </footer>
  </div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>

</body>

</html>

БЛОГ НА HUSL

JS динамичные свойства класса

Ответы (0 шт):