This repository has been archived by the owner on Oct 17, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
dtu_backend.erl
26 lines (19 loc) · 11.4 KB
/
dtu_backend.erl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
-module(dtu_backend).
-export([handle/2, handle_event/3]).
-include_lib("elli/include/elli.hrl").
-behaviour(elli_handler).
handle(Req, _Args) ->
handle(Req#req.method, elli_request:path(Req), Req).
handle('GET', [<<"hello">>, <<"world">>], _Req) ->
{ok, [], <<"Hello World!">>};
handle('POST', [<<"task">>], Req) ->
Name = elli_request:post_arg(<<"name">>, Req,
<<"undefined">>),
io:format("Name: ~s~n", [Name]), {201, [], <<"Created">>};
handle('GET', [], _Req) ->
{ok, [],
<<"<html lang=\"en\" data-framework=\"dtu\">\n <head>\n <meta charset=\"utf-8\"/>\n <title>\n DTU - TodoMVC\n </title>\n <style>\n * {\n box-sizing: border-box;\n }\n body {\n text-align: center;\n font: 14px\n \"Helvetica Neue\"\n /* UNK rule val: {lqname,32,[{uname,32,'Helvetica'}]} */\n /* UNK rule val: {lqname,32,[{uname,32,'Arial'}]} */\n sans-serif;\n font-weight: normal;\n line-height: normal;\n line-height: 1.4em;\n background: #f5f5f5;\n color: #4d4d4d;\n min-width: 230px;\n max-width: 550px;\n margin: 0 auto;\n font-weight: 300;\n }\n h1 {\n color: rgba(175, 47, 47, 0.5);\n font-size: 5rem;\n font-weight: 100;\n margin: 1em 0;\n }\n .new-todo {\n padding: 1em;\n margin: 1em 0;\n border: none;\n background-color: rgba(0, 0, 0, 0.03);\n box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);\n width: 50%;\n }\n #clear-completed {\n width: 50%;\n padding: 0.5em;\n }\n #clear-completed, #toggle-all, .view {\n margin: 2em 0;\n }\n .view {\n display: flex;\n justify-content: space-between;\n }\n #show-all, #show-completed, #show-active {\n min-width: 8ch;\n display: inline-block;\n }\n .destroy {\n padding: 0.15em 0.5em;\n font-weight: bold;\n border: none;\n background-color: transparent;\n cursor: pointer;\n }\n .info {\n color: #bfbfbf;\n font-size: 10px;\n text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);\n text-align: center;\n }\n .filters > li {\n list-style-type: none;\n display: inline;\n margin: 1em;\n }\n .filters > li > a {\n text-decoration: none;\n padding: 0.5em;\n border: 1px solid transparent;\n color: #555;\n }\n .filters > li > .selected {\n border: 1px solid #cccccc;\n }\n </style>\n </head>\n <body>\n <section class=\"todoapp\">\n <header class=\"header\">\n <h1>\n todos\n </h1>\n <input id=\"new-todo\"\n class=\"new-todo\"\n placeholder=\"What needs to be done?\"\n autofocus/>\n </header>\n <section class=\"main\">\n <input id=\"toggle-all\"\n class=\"toggle-all\"\n type=\"checkbox\"/>\n <label for=\"toggle-all\">\n Mark all as complete\n </label>\n <ul id=\"todo-list\" class=\"todo-list\">\n </ul>\n </section>\n <footer class=\"footer\">\n <span class=\"todo-count\">\n </span>\n <ul class=\"filters\">\n <li>\n <a id=\"show-all\" href=\"#/\" class=\"selected\">\n All\n </a>\n </li>\n <li>\n <a id=\"show-active\" href=\"#/active\">\n Active\n </a>\n </li>\n <li>\n <a id=\"show-completed\" href=\"#/completed\">\n Completed\n </a>\n </li>\n </ul>\n <button id=\"clear-completed\" class=\"clear-completed\">\n Clear completed\n </button>\n </footer>\n </section>\n <footer class=\"info\">\n <p>\n Created by \n <a href=\"http://twitter.com/warianoguerra\">\n Mariano Guerra\n </a>\n </p>\n <p>\n Part of \n <a href=\"http://todomvc.com\">\n TodoMVC\n </a>\n </p>\n </footer>\n <script>\n function main(_e) {\n let byId = (id) => {\n return document.getElementById(id);\n },\n ct = (v) => {\n return document.createTextNode(v);\n },\n input = byId(\"new-todo\"), todos = byId(\"todo-list\"),\n clearCompleted = byId(\"clear-completed\"),\n toggleAll = byId(\"toggle-all\"),\n showAll = byId(\"show-all\"),\n showActive = byId(\"show-active\"),\n showCompleted = byId(\"show-completed\");\n input.addEventListener(\"keyup\",\n (e) => {\n console.log(\"keyup\", e);\n if (e.keyCode === 13) {\n console.log(\"enter\", e);\n let node = ce(\"div\",\n {\"class\": \"view active\"},\n ce(\"input\",\n {\"class\": \"toggle\",\n \"type\": \"checkbox\"}),\n ce(\"label\", {},\n ct(input.value)),\n ce(\"button\",\n {\"class\": \"destroy\"},\n ct(\"X\")));\n todos.appendChild(node);\n node.addEventListener(\"click\",\n (e) => {\n if (e.target.tagName\n ===\n \"BUTTON\") {\n console.log(\"remove\",\n e.target.parentNode);\n e.target.parentNode.parentNode.removeChild(e.target.parentNode);\n };\n });\n input.value = \"\";\n };\n });\n clearCompleted.addEventListener(\"click\",\n (e) => {\n let checked = document.querySelectorAll(\".toggle:checked\");\n checked.forEach((node) => {\n node.parentNode.parentNode.removeChild(node.parentNode);\n });\n });\n toggleAll.addEventListener(\"change\",\n (e) => {\n let checked = document.querySelectorAll(\".toggle\");\n checked.forEach((input) => {\n input.checked\n =\n e.target.checked;\n });\n });\n showAll.addEventListener(\"click\",\n (e) => {\n removeClassToNodes(\"selected\", \".filters a\");\n setDisplayToNodes(\"flex\",\n \".todo-list > div\");\n e.target.classList.add(\"selected\");\n });\n showActive.addEventListener(\"click\",\n (e) => {\n removeClassToNodes(\"selected\",\n \".filters a\");\n setDisplayToNodes(\"none\",\n \".todo-list > div\");\n setDisplayToNodes(\"flex\",\n \".todo-list > .active\");\n e.target.classList.add(\"selected\");\n });\n showCompleted.addEventListener(\"click\",\n (e) => {\n removeClassToNodes(\"selected\",\n \".filters a\");\n setDisplayToNodes(\"none\",\n \".todo-list > div\");\n setDisplayToNodes(\"flex\",\n \".todo-list > .completed\");\n e.target.classList.add(\"selected\");\n });\n todos.addEventListener(\"change\",\n (e) => {\n let checkbox = e.target;\n if (checkbox.tagName === \"INPUT\") {\n let task = checkbox.parentNode;\n if (checkbox.checked) {\n task.classList.remove(\"active\");\n task.classList.add(\"completed\");\n };\n if (!checkbox.checked) {\n task.classList.remove(\"completed\");\n task.classList.add(\"active\");\n };\n };\n });\n console.log(\"loaded\");\n }\n function removeClassToNodes(className, selector) {\n let nodes = document.querySelectorAll(selector);\n nodes.forEach((node) => {\n node.classList.remove(className);\n });\n }\n function setDisplayToNodes(display, selector) {\n let nodes = document.querySelectorAll(selector);\n nodes.forEach((node) => {\n node.style.display = display;\n });\n }\n function ce(tagName, attrs, ...childs) {\n let node = document.createElement(tagName),\n entries = Object.entries(attrs);\n entries.forEach(([key, val]) => {\n node.setAttribute(key, val);\n });\n childs.forEach((child) => {\n node.appendChild(child);\n });\n return node;\n }\n window.addEventListener(\"load\", main)\n </script>\n </body>\n</html>">>};
handle(_, _, _Req) ->
{404, [], <<"Not Found">>}.
handle_event(_Event, _Data, _Args) ->
ok.