schedule-front's People
Forkers
vadimkagukinschedule-front's Issues
Создать компонент отображающий список команд
Создать компонент, отвечающий за отображений списка команд. Расположить на странице teams в правой части.
Тестовые данные хранить в компоненте, вид тестовых данных
{
id: number;
name: string;
amount: number;
}
Компонент должен содержать внутренний скролл, если количество команд больше размера помещающегося на странице.
Создать форму для создания команды
Использовать реактивные формы.
Форма состоит из 2 полей ввода и кнопки создать
:
- Название
- Количество участников
Результат для отправки формы выводить в консоль, никуда не отправлять.
Форма находится на странице команд слевой стороны.
Добавить выбор года для расписания
Добавить в правом верхнем углу select с выбором года для расписания. В зависимости от выбранного года, даты в таблице должны меняться.
Данные храним в виде моков.
Update readme
Исправить ошибки в построениях урла при запросе
Создать компонент модалки для подтверждения
Создать компонент модалки для подтверждения
Модалка имеет API
public open(text)
public close()
Output result(): boolean
Для создания модалки можно использовать пакет ngx-modal
Доработать лист команд
Доработать компонент отображающий лист команд. Компонент должен работать с моделью Team
и выводить данные в следующем формате:
Название команды (иконка редактировать) (иконка удалить)
- инструктор 1
- инструктор 2
- инструктор 3
и т.д.
Стилизовать каждую команду как отдельный блок.
Редактирование и удаление:
При нажатии на данные кнопки должна показываться модалка для подтверждения
"Вы действительно хотите (действие) команду (имя команды)?"
По подтверждению выполнить логирование в консоль о проведенной команде.
Данные для компонента использовать тестовые, т.е. создать сервис для работы с командами, создать у сервиса метод getTestData
, получить данные от сервиса, вывести на компоненте.
Данные сделать достаточно большим, чтобы была возможность проверить скролл в компоненте.
Добавить header с навигацией
Навигация на 2 страницы: "команды" и "расписание". Роуты к ним domain/teams
и domain/schedule
соответственно. Также создать прототипы данных компонент. Для разработки использовать ветку issue7-add-header
, ПР создавать в ветку dev
Создать общий сервис для запросов за данными
Реализовать сервис обобщающий подход для запросов за данными
Связать компоненты форм и списка команд
Связать компонент листа и формы для команд при помощи Input
и Output
через родительский компонент таким образом, чтобы при согласии на редактировании форма заполнялась редактируемой командой, а после нажатия создать команду, данная команда обновлялась в списке.
Доработать компонент формы
Доработать компонент формы таким образом, чтобы она работала с моделью Team
. Добавить input в компонент формы, чтобы иметь возможность заполнения формы данными, существующим объектом типа Team
.
Для заполнения инструкторов:
Создать сервис для инструкторов, сделать метод getTestData
, который будет отдавать тестовые данные.
В форме реализовать следующий подход:
создать список <ul>
, в который будут добавляться инструктора, сделать select
для выбора, данные для селекта получить как написано выше. возле select
сделать кнопку add
по нажатию на которую выбранный инструктор добавляется в список.
В форме в control
хранить только id
выбранных инструкторов.
Данные формы по submit
также логировать в консоль.
Добавить начальную структуру проекта
Доработка формы
Добавить в левой части формы для добавления инструкторов в команду select со списком факультетов, в зависимости от выбранного факультета фильтровать данные для автокомплита. Для фильтрации использовать функцию из lodash filter
Добавить классы предметной области
Добавить классы соответствующие представлению на бэкенде
Положить в папку src/app/models
Создать сервис для работы с факультетами
Создать сервис для работы с сущностью Faculty
. Унаследовать от BaseService
, продемонстрировать работоспособность.
Добавить bootstrap 3, стилизовать навигацию
Добавить таблицу на страницу Schedule
Таблица:
- 1-ая строка: дни в формате
число.месяц.год
- 1-ый столбец: № команды (имеется в виду
id
)
Все остальные ячейки оставить пустыми.
Изменить верстку
Уменьшить размер select для выбора факультета и переместить его так, чтобы он располагался на одном уровне с инпутом для выбора инструктора. Также перенести кнопку добавить и установить ей серый цвет.
Фак. (выбор) (выбор инструктора) (кнопка добавить)
Добавить уведомления
Добавить уведомления всплывающие.
Использовать пакет angular2-notifications
Добавить оптимальную конфигурацию, добавить пример на странице документов (при нажатии "сгенерировать" показывать 3 вида нотификации success
, error
, alert
с текстом проверка на примере (нажатый номер)
Добавить перенос в ответственного
Добавить иконку стрелки или любую другую интуитивно понятную рядом со всем огранизаторами в команде (желательно слева).
По клику выбранный инструктор добавляется в колонку ответственных.
Таким образом можно перенести только 1 из команды.
После переноса прятать иконки.
Создать компонент для документов
Создать роутерный компонент для страницы документов.
У компоненты будет следующий вид:
Приложение 1 (кнопка сгенерировать)
Приложение 2 (кнопка сгенерировать)
Приложение 3 (кнопка сгенерировать)
Изменение таблицы расписания
Добавить в таблицу колонки Ответственные организаторы
, в колонке с названием команды вывести информацию (ФИО) об инструкторах, т. е.
Ячейка
Команда 1
- Иванов И.И.
- Петров П.П.
- Сидоров И.И.
Добавление новой команды в список.
Сделать так, что бы новая команда добавлялась в список всех.
Реализовать это с помощью сервиса для команд, т.е. создать метод который результат формы пушит в массив teams хранимый в сервисе.
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.