Vypolni frontend

01-07-2014 03:01

Пришлось практически с нуля повозиться в джаваскрипте, чтобы сделать фронтенд Vypolni. Полезные штуки:

  • jquery - само собой, чтобы не писать кучу самопала
  • jquery-ui - основная штука, чтобы сдеать перетаскиваемые задачи. Используется .sortable, в "start:" прописывается клёвый эффект с неровностью задачи (tilt), как в trello, в "stop:" соответственно, эффект убирается. А в "receive:" собственно сам ajax, который отправляет запрос на изменение данных в базе.
  • jqueryui-touch-punch - а без этого перетаскивался не работает на тач-устройствах. С ней (видимо зависит от браузера) на планшете слегка подтормаживает. Есть минус: обязательно должно быть добавлено ".disableSelection()", который не дает выделить текст.
  • Не самый очевидный способ взять ид объекта: $(this).attr('id')
  • Получить html-контент внутри: $("#current").html(), устновить контент: $("#current").html("<p>content</p>")

Что интересного есть в итоге в Vypolni:

  • Можно создавать задачи через веб или перенаправлять письма на mail@vypolni.appspotmail.com
  • При отправке письма ему выдается тег "inbox", можно указывать теги через заголовок письма: "Заголовок [tag1] [tag2]"
  • Менять статусы задач можно перетаскиванием. При этом в "current" может быть только одна задача. Если добавить еще одну, то старая перейдет в "background".
  • На странице задачи есть история изменения статусов. Позже сделаю подсчет статистики по времени выполнения задач в разрезе тегов и времени суток.

Можно установить свою версию Vypolni на GAE, код тут: github.com/qs/vypolni.

tags: js self
comments powered by Disqus