Делаем свой планировщик задач

Bootstrap + TodoList = Trello

Трел­ло — удоб­ная шту­ка для веде­ния про­ек­тов. Там все зада­чи пред­став­ле­ны в виде коло­нок, а каж­дая колон­ка отве­ча­ет за что-то своё. Давай­те сде­ла­ем нечто подоб­ное, тем более что всё для это­го у нас уже есть:

• Bootstrap, с кото­рым мы позна­ко­ми­лись, пока созда­ва­ли стра­ни­цы с коти­ка­ми;
• спи­сок задач, где мож­но добав­лять новые и уда­лять ненуж­ные пунк­ты.

Если это объ­еди­нить, полу­чит­ся что-то похо­жее на Trello. Логи­ка такая:

• у нас будет несколь­ко коло­нок на стра­ни­це (за это отве­ча­ет Bootstrap);
• каж­дая колон­ка будет отве­чать за свои зада­чи и назы­вать­ся по-своему;
• в каж­дой колон­ке мож­но добав­лять и уда­лять зада­чи неза­ви­си­мо от осталь­ных (а за это отве­ча­ет скрипт из про­шло­го спис­ка задач).

Мы сде­ла­ем 4 колон­ки, но вы для себя може­те сде­лать их столь­ко, сколь­ко нуж­но. Един­ствен­ное огра­ни­че­ние — Bootstrap не поз­во­ля­ет делать боль­ше 12 коло­нок. Наде­ем­ся, вам это­го хва­тит.

Готовим колонки и настраиваем стили

За осно­ву возь­мём стра­ни­цу из ста­тьи про коти­ков и сде­ла­ем с ней сле­ду­ю­щее:

• пере­не­сём в неё сти­ли из стра­ни­цы со спис­ком задач;
• доба­вим недо­ста­ю­щие сти­ли для заго­лов­ков коло­нок и всей стра­ни­цы;
• под­го­то­вим пустые 4 колон­ки и настро­им их раз­мер под раз­ную шири­ну экра­на.

Если мы всё сде­ла­ем пра­виль­но, то полу­чит­ся сле­ду­ю­щее:

Наполняем колонки

У каж­дой колон­ки долж­но быть своё назва­ние, поэто­му назо­вём их «Сде­лать», «Позво­нить», «Напи­сать» и «Идеи».

Мы пом­ним, что в каж­дой колон­ке дол­жен быть отдель­ный спи­сок задач, поэто­му возь­мём кусок кода из про­шло­го мате­ри­а­ла. Глав­ное, что нам нуж­но учесть, — что у каж­до­го спис­ка долж­но быть своё уни­каль­ное имя, что­бы мы их не пере­пу­та­ли в про­цес­се. Для это­го мы про­сто доба­вим циф­ры от одно­го до четы­рёх к назва­нию каж­до­го спис­ка. Напри­мер, было «tldDiv», а ста­ло «tld1Div, «tld2Div» и так далее.

В ито­ге колон­ки будут выгля­деть так:

Выгля­дит инте­рес­но, но пока ниче­го не рабо­та­ет.

Переносим и расширяем скрипт

Теперь наша зада­ча — взять про­шлый скрипт и адап­ти­ро­вать его под наши цели. Нам нуж­но, что­бы каж­дая колон­ка с зада­ча­ми рабо­та­ла авто­ном­но и не зави­се­ла от дру­гих, поэто­му сей­час скрипт уве­ли­чит­ся в 4 раза — для каж­до­го спис­ка будет свой код.

Сра­зу ска­жем: это пло­хое реше­ние. Копи­паст кода для рас­ши­ре­ния функ­ци­о­наль­но­сти — это путь к дол­гой мучи­тель­ной смер­ти под зава­ла­ми спагетти-кода. По-хорошему нуж­но заво­ра­чи­вать это при­ло­же­ние в клас­сы, делать объ­ек­ты и рабо­тать с ними.

Мы всё это пони­ма­ем.

Но копи­па­с­та быст­рее.

Если собрать все изме­не­ния, кото­рые нам пона­до­бят­ся, то полу­чит­ся такой спи­сок:

• В самом нача­ле, когда мы заво­дим пере­мен­ные под наши зада­чи, у нас теперь не про­сто List и Mask, а List1, Mask1, List2, Mask2 и так далее. Это нуж­но для того, что­бы не сме­ши­вать спис­ки задач.
• Поме­ня­лось и содер­жи­мое этих пере­мен­ных — теперь там есть циф­ры, кото­рые пока­зы­ва­ют, к како­му спис­ку они отно­сят­ся. Важ­ный момент — у нас дли­на пре­фик­са «tdl_» уве­ли­чи­лась на один сим­вол и ста­ла, напри­мер, «tdl1_». Это нам нуж­но будет учесть в сере­дине скрип­та.
• Так как спис­ки долж­ны быть авто­ном­ны, то и индек­сы, кото­рые мы добав­ля­ем к каж­до­му эле­мен­ту, тоже долж­ны не зави­сеть друг от дру­га. Отсю­да и пере­мен­ные вида element_Id_1 и number_Id_1.

Един­ствен­ное, что оста­лось преж­ним, — обра­бот­ка уда­ле­ния зада­чи. В обра­бот­чи­ке всё уже изна­чаль­но орга­ни­зо­ва­но так, что скрипт сра­зу полу­ча­ет все дан­ные, кото­рые ему нуж­ны, неза­ви­си­мо от колон­ки и поряд­ко­во­го номе­ра зада­чи.

Сам скрипт полу­ча­ет­ся таким:

Собираем готовую страницу

Нам оста­лось собрать всё вме­сте и про­ве­рить, как это рабо­та­ет. Если буде­те добав­лять колон­ки — не забудь­те про новые назва­ния для пере­мен­ных и про име­на эле­мен­тов в самих колон­ках. На теку­щем эта­пе мы добав­ля­ем всё вруч­ную, но в буду­щей вер­сии сде­ла­ем гене­ра­тор нуж­но­го чис­ла коло­нок.

Что дальше

Что­бы этот про­дукт стал бли­же к иде­а­лу, мож­но сде­лать так:

• с помо­щью клас­сов и объ­ек­тов упо­ря­до­чить созда­ние новых коло­нок — не копи­па­стить код, а делать всё через объ­ек­ты;
• доба­вить воз­мож­ность пере­тас­ки­вать зада­чи меж­ду колон­ка­ми;
• сде­лать ком­мен­та­рии к каж­дой зада­че;
• раз­ре­шить изме­не­ние заго­лов­ков у коло­нок пря­мо на стра­ни­це (contentEditable нам в помощь);
• настро­ить фон.

Ско­ро добе­рём­ся и до это­го! Подписывайтесь на наш канал!