schedule-front's Issues
Связать компоненты форм и списка команд
Связать компонент листа и формы для команд при помощи Input
и Output
через родительский компонент таким образом, чтобы при согласии на редактировании форма заполнялась редактируемой командой, а после нажатия создать команду, данная команда обновлялась в списке.
Создать форму для создания команды
Использовать реактивные формы.
Форма состоит из 2 полей ввода и кнопки создать
:
- Название
- Количество участников
Результат для отправки формы выводить в консоль, никуда не отправлять.
Форма находится на странице команд слевой стороны.
Создать компонент модалки для подтверждения
Создать компонент модалки для подтверждения
Модалка имеет API
public open(text)
public close()
Output result(): boolean
Для создания модалки можно использовать пакет ngx-modal
Добавить классы предметной области
Добавить классы соответствующие представлению на бэкенде
Положить в папку src/app/models
Исправить ошибки в построениях урла при запросе
Добавить header с навигацией
Навигация на 2 страницы: "команды" и "расписание". Роуты к ним domain/teams
и domain/schedule
соответственно. Также создать прототипы данных компонент. Для разработки использовать ветку issue7-add-header
, ПР создавать в ветку dev
Добавить таблицу на страницу Schedule
Таблица:
- 1-ая строка: дни в формате
число.месяц.год
- 1-ый столбец: № команды (имеется в виду
id
)
Все остальные ячейки оставить пустыми.
Добавление новой команды в список.
Сделать так, что бы новая команда добавлялась в список всех.
Реализовать это с помощью сервиса для команд, т.е. создать метод который результат формы пушит в массив teams хранимый в сервисе.
Создать компонент для документов
Создать роутерный компонент для страницы документов.
У компоненты будет следующий вид:
Приложение 1 (кнопка сгенерировать)
Приложение 2 (кнопка сгенерировать)
Приложение 3 (кнопка сгенерировать)
Добавить начальную структуру проекта
Создать сервис для работы с факультетами
Создать сервис для работы с сущностью Faculty
. Унаследовать от BaseService
, продемонстрировать работоспособность.
Доработать компонент формы
Доработать компонент формы таким образом, чтобы она работала с моделью Team
. Добавить input в компонент формы, чтобы иметь возможность заполнения формы данными, существующим объектом типа Team
.
Для заполнения инструкторов:
Создать сервис для инструкторов, сделать метод getTestData
, который будет отдавать тестовые данные.
В форме реализовать следующий подход:
создать список <ul>
, в который будут добавляться инструктора, сделать select
для выбора, данные для селекта получить как написано выше. возле select
сделать кнопку add
по нажатию на которую выбранный инструктор добавляется в список.
В форме в control
хранить только id
выбранных инструкторов.
Данные формы по submit
также логировать в консоль.
Доработка формы
Добавить в левой части формы для добавления инструкторов в команду select со списком факультетов, в зависимости от выбранного факультета фильтровать данные для автокомплита. Для фильтрации использовать функцию из lodash filter
Добавить перенос в ответственного
Добавить иконку стрелки или любую другую интуитивно понятную рядом со всем огранизаторами в команде (желательно слева).
По клику выбранный инструктор добавляется в колонку ответственных.
Таким образом можно перенести только 1 из команды.
После переноса прятать иконки.
Добавить bootstrap 3, стилизовать навигацию
Создать общий сервис для запросов за данными
Реализовать сервис обобщающий подход для запросов за данными
Изменить верстку
Уменьшить размер select для выбора факультета и переместить его так, чтобы он располагался на одном уровне с инпутом для выбора инструктора. Также перенести кнопку добавить и установить ей серый цвет.
Фак. (выбор) (выбор инструктора) (кнопка добавить)
Изменение таблицы расписания
Добавить в таблицу колонки Ответственные организаторы
, в колонке с названием команды вывести информацию (ФИО) об инструкторах, т. е.
Ячейка
Команда 1
- Иванов И.И.
- Петров П.П.
- Сидоров И.И.
Создать компонент отображающий список команд
Создать компонент, отвечающий за отображений списка команд. Расположить на странице teams в правой части.
Тестовые данные хранить в компоненте, вид тестовых данных
{
id: number;
name: string;
amount: number;
}
Компонент должен содержать внутренний скролл, если количество команд больше размера помещающегося на странице.
Доработать лист команд
Доработать компонент отображающий лист команд. Компонент должен работать с моделью Team
и выводить данные в следующем формате:
Название команды (иконка редактировать) (иконка удалить)
- инструктор 1
- инструктор 2
- инструктор 3
и т.д.
Стилизовать каждую команду как отдельный блок.
Редактирование и удаление:
При нажатии на данные кнопки должна показываться модалка для подтверждения
"Вы действительно хотите (действие) команду (имя команды)?"
По подтверждению выполнить логирование в консоль о проведенной команде.
Данные для компонента использовать тестовые, т.е. создать сервис для работы с командами, создать у сервиса метод getTestData
, получить данные от сервиса, вывести на компоненте.
Данные сделать достаточно большим, чтобы была возможность проверить скролл в компоненте.
Добавить уведомления
Добавить уведомления всплывающие.
Использовать пакет angular2-notifications
Добавить оптимальную конфигурацию, добавить пример на странице документов (при нажатии "сгенерировать" показывать 3 вида нотификации success
, error
, alert
с текстом проверка на примере (нажатый номер)
Добавить выбор года для расписания
Добавить в правом верхнем углу select с выбором года для расписания. В зависимости от выбранного года, даты в таблице должны меняться.
Данные храним в виде моков.
Update readme
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.