Угловые примеры
Создать собственный диспетчер задач с Angular просто
Простой диспетчер задач
Создание диспетчера задач — большая задача. Нам нужно разделить эту большую задачу на пару маленьких задач.
Сделаем пару моделей, сервис и компонент.
В каждом диспетчере задач есть календарь. В календаре есть недели, в неделях — дни, а в днях — задачи. Это будут наши модели.
Теперь у нас есть все модели для нашего проекта. Следующий шаг — создать сервис, который будет создавать месяц с неделями и днями.
Класс «Дата» дает нам всю необходимую информацию для начала, например индекс текущего месяца и текущий год. Основную логику мы поместим в метод «getMonth(monthNumber: number, year: number)».
В начале этого метода нам нужно создать новый месяц и инициализировать его, установить номер месяца, год, дни в месяце.
Далее нам нужно создать цикл по неделям (61 строка). В цикл по неделям нужно поставить еще цикл по дням (76 строчка).
В основном месяц не начинается с субботы. Нам нужно указать дни первой недели месяца из предыдущего месяца, это происходит в строке 67. В строке 68 мы определяем первый день месяца, затем мы используем функцию «getDay()», эта функция дает нам индекс дня недели. после этого мы делаем цикл, в котором мы создаем пустые дни предыдущего месяца.
Наши модели настроены, сервис, который даст нам месяц, тоже готов. Пришло время сделать компонент и показать пользователю календарь.
Компонент будет не очень большим. В нем мы просто делаем новую Задачу в выбранный день и переключаем месяц. Текущая реализация не сохраняет задачи в течение дня, для этого мы могли бы сделать сервис «TaskSaver» и сохранять задачи в файл json, а затем загружать.
Я думаю, что лучший способ показать календарь — это использовать таблицу. Каждая ячейка будет представлять день с задачами.
В итоге у нас получился неплохой таск-менеджер с календарем. Этот проект очень легко расширять и изменять, потому что он разделен на отдельные части, такие как модели, сервис и компонент.
Если вам нужно внимательно посмотреть на проект вот ссылка.
Первоначально опубликовано на http://tomorrowmeannever.wordpress.com 8 декабря 2019 г.
