Skip to content

Latest commit

 

History

History
57 lines (56 loc) · 4.91 KB

ROADMAP9.md

File metadata and controls

57 lines (56 loc) · 4.91 KB
Raw

План 9

  1. Создать index.html в webapp (0 мин.)
  2. В <head> указать скрипты: (0 мин.)
    • <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    • <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  3. Создать класс Table используя React (гайд) (60 мин.)
    • Элемент должен принимать данные из json, список ключей и название таблицы
  4. Добавить элемент <div id="table_container"> в index.html (0 мин.)
  5. Создать функцию updateData(table, query) (10 мин.)
    1. Создать массив keys и заполнить его ключами необходимыми для запрошенной таблицы
    2. Используя fetch запросить json с адреса ajax/$table?$query
    3. В then методе отрендерить Table внутри элемента с id="table_container" с параметрами data, table, keys и query
  6. В конце скрипта добавить вызов updateData("user") (0 мин.)
  7. Создать функцию handler(table, id) (2 мин.)
    1. Если table == "user" вызывает updateData("authority", "userId=" + id)
    2. Если table == "authority" вызывает updateData("activity", "authorityId=" + id)
  8. В классе Table при создании рядов указать onClick функцию (2 мин.)
    • Вызывает handler с названием текущей таблицы и id из выбранного ряда
  9. Создать класс Form используя React (30 мин.)
    • Рендерит форму и кнопку для отправки
    • В this.state.fields хранит все поля из командной строки проинициализированные пустыми строками
  10. Добавить элемент <div id="form_container"> в index.html (0 мин.)
  11. В конце скрипта отрендерить Form используя ReactDOM.render(React.createElement(Form), document.getElementById("form_container")) (0 мин.)
  12. Создать метод Form.changeHandler(event) (1 мин.)
    1. Записывает значения изменившегося input поля в соответствующее поле класса: this.state.fields[event.target.name] = event.target.value
  13. В рендере класса Form элементам <input> добавить параметр onChange=this.changeHandler (2 мин.)
  14. Создать метод Form.send() (30 мин.)
    1. Отправить POST запрос с json с полями формы на ajax/activity
    2. Получить ответ со статусом
    3. Если статус != 0 вывести его через alert
    4. Иначе отрендерить таблицу заново используя метод updateData() и параметры из предыдущего запроса таблицы
  15. Создать метод ActivityServlet.doPost() (40 мин.)
    1. Получить json из запроса и десериализовать его
    2. Собрать массив в формате массива с аргументами командной строки (["-login", "xxx", "-pass", "xxx"])
    3. Вызвать App.run() с массивом аргументов
    4. Получить код возврата и записать его в response
  16. В рендере класса Form кнопке для отправки добавить параметр onClick=this.send (1 мин.)

Оценка времени

Пункт плана Оценка времени Фактическое время
1. 0 мин.
2. 0 мин.
3. 60 мин.
4. 0 мин.
5. 10 мин.
6. 0 мин.
7. 2 мин.
8. 2 мин.
9. 30 мин.
10. 0 мин.
11. 0 мин.
12. 1 мин.
13. 2 мин.
14. 30 мин.
15. 40 мин.
16. 1 мин.