Advertisement
Guest User

Untitled

a guest
Jun 17th, 2018
115
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 21.25 KB | None | 0 0
  1. $(document).ready(function () {
  2. buildNavigation(false);
  3. showHome();
  4. });
  5.  
  6. /**
  7. * Builds a form to edit the selected task.
  8. * This method will first create a new empty task form and then populate
  9. * the inputs with the task's information.
  10. */
  11. function buildEditTaskForm() {
  12. buildNewTaskForm();
  13.  
  14. document.getElementById("new_task_form").action = "javascript: editTask()";
  15. document.getElementById("task_name").value = "TEST"; /* <--------------------------------------------------------------*/
  16. document.getElementById("task_date").value = "TEST"; /* <--------------------------------------------------------------*/
  17. document.getElementById("new_task_button").value = "EDIT";
  18. }
  19.  
  20. /**
  21. * Builds a form to add a new task.
  22. */
  23. function buildNewTaskForm() {
  24. $("#page_overlay").empty();
  25. var container = document.body;
  26.  
  27. var overlay = document.createElement("div");
  28. overlay.id = "page_overlay";
  29.  
  30. var pform = document.createElement("div");
  31. pform.id = "task_form";
  32.  
  33. var form = document.createElement("form");
  34. form.id = "new_task_form"
  35. form.action = "javascript: addTask()";
  36.  
  37. var close = document.createElement("a");
  38. close.textContent = "x"
  39. close.href = "javascript: closePopup();";
  40.  
  41. var nameInput = document.createElement("input");
  42. nameInput.type = "text";
  43. nameInput.id = "task_name";
  44. nameInput.placeholder = "Task name";
  45.  
  46. var p = document.createElement("p");
  47. p.textContent = "Due date:";
  48.  
  49. var dateInput = document.createElement("input");
  50. dateInput.type = "date";
  51. dateInput.id = "task_date";
  52.  
  53. var submitBtn = document.createElement("input");
  54. submitBtn.id = "new_project_button";
  55. submitBtn.type = "submit";
  56. submitBtn.value = "CREATE";
  57.  
  58. form.append(close);
  59. form.append(nameInput);
  60. form.append(p);
  61. form.append(dateInput);
  62. form.append(submitBtn);
  63.  
  64. pform.append(form);
  65.  
  66. overlay.append(pform);
  67. container.append(overlay);
  68. }
  69.  
  70. /**
  71. * Builds a form to add a new project.
  72. */
  73. function buildNewProjectForm() {
  74. $("#page_overlay").empty();
  75. var container = document.body;
  76.  
  77. var overlay = document.createElement("div");
  78. overlay.id = "page_overlay";
  79.  
  80. var pform = document.createElement("div");
  81. pform.id = "project_form";
  82.  
  83. var form = document.createElement("form");
  84. form.id = "new_project_form"
  85. form.action = "javascript: addProject()";
  86.  
  87. var close = document.createElement("a");
  88. close.textContent = "x"
  89. close.href = "javascript: closePopup();";
  90.  
  91. var nameInput = document.createElement("input");
  92. nameInput.type = "text";
  93. nameInput.id = "project_name";
  94. nameInput.placeholder = "Project name";
  95.  
  96. var submitBtn = document.createElement("input");
  97. submitBtn.id = "new_project_button";
  98. submitBtn.type = "submit";
  99. submitBtn.value = "CREATE";
  100.  
  101. form.append(close);
  102. form.append(nameInput);
  103. form.append(submitBtn);
  104.  
  105. pform.append(form);
  106.  
  107. overlay.append(pform);
  108. container.append(overlay);
  109. }
  110.  
  111. /**
  112. * Builds a form to edit the selected project.
  113. * This method will first create a new empty project form and then populate
  114. * the inputs with the project's information.
  115. */
  116. function buildEditProjectForm() {
  117. buildNewProjectForm();
  118.  
  119. document.getElementById("new_project_form").action = "javascript: editProject()";
  120. document.getElementById("project_name").value = "TEST"; /* <--------------------------------------------------------------*/
  121. document.getElementById("new_project_button").value = "EDIT";
  122. }
  123.  
  124. /**
  125. * Builds the login page
  126. */
  127. function buildLogin() {
  128. var container = document.getElementById("container");
  129.  
  130. var formContainer = document.createElement("div");
  131. formContainer.id = "login_form";
  132.  
  133. var title = document.createElement("div");
  134. title.className = "form_title";
  135. title.textContent = "LOGIN TO YOUR ACCOUNT";
  136.  
  137. var form = document.createElement("form");
  138. form.action = "javascript: login()";
  139.  
  140. var usernameInput = document.createElement("input");
  141. usernameInput.type = "text";
  142. usernameInput.id = "login_username";
  143. usernameInput.placeholder = "Username";
  144.  
  145. var passwordInput = document.createElement("input");
  146. passwordInput.type = "password";
  147. passwordInput.id = "login_password";
  148. passwordInput.placeholder = "Password";
  149.  
  150. var submitBtn = document.createElement("input");
  151. submitBtn.type = "submit";
  152. submitBtn.value = "LOGIN";
  153.  
  154. form.append(usernameInput);
  155. form.append(passwordInput);
  156. form.append(submitBtn);
  157.  
  158. formContainer.append(title);
  159. formContainer.append(form);
  160.  
  161. container.append(formContainer);
  162. }
  163.  
  164. /**
  165. * Builds the register page
  166. */
  167. function buildRegister() {
  168. var container = document.getElementById("container");
  169.  
  170. var formContainer = document.createElement("div");
  171. formContainer.id = "register_form";
  172.  
  173. var title = document.createElement("div");
  174. title.className = "form_title";
  175. title.textContent = "REGISTER A NEW ACCOUNT";
  176.  
  177. var form = document.createElement("form");
  178. form.action = "javascript: register()";
  179.  
  180. var usernameInput = document.createElement("input");
  181. usernameInput.type = "text";
  182. usernameInput.id = "login_username";
  183. usernameInput.placeholder = "Username";
  184.  
  185. var nameInput = document.createElement("input");
  186. nameInput.type = "text";
  187. nameInput.id = "login_name";
  188. nameInput.placeholder = "Name";
  189.  
  190. var emailInput = document.createElement("input");
  191. emailInput.type = "text";
  192. emailInput.id = "login_email";
  193. emailInput.placeholder = "Email";
  194.  
  195. var passwordInput = document.createElement("input");
  196. passwordInput.type = "password";
  197. passwordInput.id = "login_password";
  198. passwordInput.placeholder = "Password";
  199.  
  200. var passwordConfirmInput = document.createElement("input");
  201. passwordConfirmInput.type = "password";
  202. passwordConfirmInput.id = "login_confirm_password";
  203. passwordConfirmInput.placeholder = "Password (Confirm)";
  204.  
  205. var submitBtn = document.createElement("input");
  206. submitBtn.type = "submit";
  207. submitBtn.value = "REGISTER";
  208.  
  209. form.append(usernameInput);
  210. form.append(nameInput);
  211. form.append(emailInput);
  212. form.append(passwordInput);
  213. form.append(passwordConfirmInput);
  214. form.append(submitBtn);
  215.  
  216. formContainer.append(title);
  217. formContainer.append(form);
  218.  
  219. container.append(formContainer);
  220. }
  221.  
  222. /**
  223. * Builds the home page
  224. */
  225. function buildHome() {
  226. buildPageStructure();
  227.  
  228. buildProjectsActions(false);
  229. buildTaskActions(false);
  230.  
  231. buildProjectList();
  232. buildTaskList();
  233. }
  234.  
  235. /**
  236. * Builds the home page's structure, in which the other build methods will build on top of.
  237. */
  238. function buildPageStructure() {
  239. var container = document.getElementById("container");
  240.  
  241. var projects = document.createElement("div");
  242. projects.id = "projects";
  243.  
  244. var projectsTitle = document.createElement("span");
  245. projectsTitle.className = "section_title";
  246. projectsTitle.innerText = "PROJECTS";
  247.  
  248. var projectsActions = document.createElement("div");
  249. projectsActions.className = "section_actions";
  250. projectsActions.id = "project_actions";
  251.  
  252. var projectList = document.createElement("ul");
  253. projectList.id = "project_list";
  254.  
  255. projects.append(projectsTitle);
  256. projects.append(projectsActions);
  257. projects.append(projectList);
  258.  
  259. var tasks = document.createElement("div");
  260. tasks.id = "tasks";
  261.  
  262. var tasksTitle = document.createElement("span");
  263. tasksTitle.className = "section_title";
  264. tasksTitle.innerText = "TASKS";
  265.  
  266. var taskActions = document.createElement("div");
  267. taskActions.className = "section_actions";
  268. taskActions.id = "task_actions";
  269.  
  270. var todoTaskList = document.createElement("ul");
  271. todoTaskList.id = "todo_tasks";
  272.  
  273. var completedTitle = document.createElement("span");
  274. completedTitle.className = "section_title";
  275. completedTitle.innerText = "COMPLETED";
  276.  
  277. var completedTaskList = document.createElement("ul");
  278. completedTaskList.id = "completed_tasks";
  279.  
  280. tasks.append(tasksTitle);
  281. tasks.append(taskActions);
  282. tasks.append(todoTaskList);
  283. tasks.append(document.createElement("br"));
  284. tasks.append(completedTitle);
  285. tasks.append(completedTaskList);
  286.  
  287. container.append(projects);
  288. container.append(tasks);
  289. }
  290.  
  291. /**
  292. * Builds the navigation bar, either for logged users or visitors.
  293. */
  294. function buildNavigation(logged) {
  295. var nav = document.getElementById("nav_list");
  296. $("#nav_list").empty();
  297.  
  298. if (logged) {
  299. nav.append(buildNavButton("HOME", "javascript: showHome()"));
  300. nav.append(buildNavButton("ACCOUNT", "javascript: showAccount()"));
  301. nav.append(buildNavButton("LOGOUT", "javascript: logout()"));
  302. } else {
  303. nav.append(buildNavButton("LOGIN", "javascript: showLogin()"));
  304. nav.append(buildNavButton("REGISTER", "javascript: showRegister()"));
  305. }
  306.  
  307. }
  308.  
  309. /**
  310. * Builds a navigation button with a given name and url action.
  311. */
  312. function buildNavButton(name, url) {
  313.  
  314. var li = document.createElement("li");
  315. var a = document.createElement("a");
  316. a.href = url;
  317. a.innerText = name;
  318.  
  319. li.append(a);
  320. return li;
  321. }
  322.  
  323. /**
  324. * Creates an icon with an URL action (anchor),
  325. * receives action url and image url.
  326. */
  327. function buildAction(url, image) {
  328.  
  329. var a = document.createElement("a");
  330.  
  331. var img = document.createElement("img");
  332. img.src = image
  333.  
  334. if (url !== "") {
  335. a.href = url;
  336. }
  337.  
  338. a.append(img);
  339. return a;
  340. }
  341.  
  342. /**
  343. * Builds the title actions on the projects list.
  344. * This included loading the icons and respective action URLs,
  345. * depending on the "selected" parameter, this determines if a project
  346. * is selected.
  347. */
  348. function buildProjectsActions(selected) {
  349.  
  350. var actionsContainer = $("#project_actions");
  351. actionsContainer.empty();
  352.  
  353. actionsContainer.append(buildAction("javascript: buildNewProjectForm()", "images/icon_add.png"));
  354.  
  355. if (selected) {
  356. actionsContainer.append(buildAction("javascript: buildEditProjectForm()", "images/icon_edit.png"));
  357. actionsContainer.append(buildAction("javascript: deleteSelectedProject()", "images/icon_delete.png"));
  358. } else {
  359. actionsContainer.append(buildAction("", "images/icon_edit_faded.png"));
  360. actionsContainer.append(buildAction("", "images/icon_delete_faded.png"));
  361. }
  362. }
  363.  
  364. /**
  365. * Builds the title actions on the to-do tasks list.
  366. * This included loading the icons and respective action URLs,
  367. * depending on the "selected" parameter, this determines if a task
  368. * is selected.
  369. */
  370. function buildTaskActions(selected) {
  371. var actionsContainer = $("#task_actions");
  372. actionsContainer.empty();
  373.  
  374. if (selected) {
  375. var completion = buildAction("javascript: changeCompletion()", "images/icon_complete.png");
  376. completion.id = "completion_action";
  377.  
  378. actionsContainer.append(completion);
  379. actionsContainer.append(buildAction("javascript: moveTask(1)", "images/icon_up.png"));
  380. actionsContainer.append(buildAction("javascript: moveTask(-1)", "images/icon_down.png"));
  381. } else {
  382. actionsContainer.append(buildAction("", "images/icon_complete_faded.png"));
  383. actionsContainer.append(buildAction("", "images/icon_up_faded.png"));
  384. actionsContainer.append(buildAction("", "images/icon_down_faded.png"));
  385. }
  386.  
  387. var sep = document.createElement("div");
  388. sep.className = "actions_seperator";
  389. actionsContainer.append(sep);
  390.  
  391. actionsContainer.append(buildAction("javascript: buildNewTaskForm()", "images/icon_add.png"));
  392.  
  393. if (selected) {
  394. actionsContainer.append(buildAction("javascript: buildEditTaskForm()", "images/icon_edit.png"));
  395. actionsContainer.append(buildAction("javascript: deleteSelectedTask()", "images/icon_delete.png"));
  396. } else {
  397. actionsContainer.append(buildAction("", "images/icon_edit_faded.png"));
  398. actionsContainer.append(buildAction("", "images/icon_delete_Faded.png"));
  399. }
  400. }
  401.  
  402. /**
  403. * Builds the list of projects displayed on the left side.
  404. */
  405. function buildProjectList() {
  406. var tempArray = [{ 'id' : 0, 'title': 'Projeto PI', 'date': '13/06/2018 18:32' }, { 'id' : 1, 'title': 'Neural Net Test', 'date': '13/06/2018 18:32' }]; /*<-------------------------------------------- replace later */
  407.  
  408. var list = $("#project_list");
  409. list.empty();
  410.  
  411. for (var i = 0; i < tempArray.length; i++) {
  412. var a = document.createElement("a");
  413. a.href = "javascript: selectProject(" + tempArray[i]['id'] + ", " + i + ")";
  414.  
  415. var li = document.createElement("li");
  416.  
  417. var title = document.createElement("div");
  418. title.className = "project_title";
  419. title.textContent = tempArray[i]['title'];
  420.  
  421. var date = document.createElement("div");
  422. date.className = "project_last_updated";
  423. date.textContent = tempArray[i]['date'];
  424.  
  425. li.append(title);
  426. li.append(date);
  427.  
  428. a.append(li);
  429. list.append(a);
  430. }
  431. }
  432.  
  433. /**
  434. * Builds the list of tasks displayed on the right side.
  435. */
  436. function buildTaskList() {
  437. var tempArray = [
  438. { 'title': 'Terminar HTML da tabela de sessões', 'date': 'Due: 20/06/2018 00:00', 'completed': true },
  439. { 'title': 'Implementar POST de utilizadores', 'date': 'Due: 20/06/2018 00:00', 'completed': false }]; /*<-------------------------------------------- replace later */
  440.  
  441. var todoList = $("#todo_tasks");
  442. todoList.empty();
  443.  
  444. var completedList = $("#completed_tasks");
  445. completedList.empty();
  446.  
  447. var todoCount = 0;
  448. var completedCount = 0;
  449.  
  450. for (var i = 0; i < tempArray.length; i++) {
  451. var a = document.createElement("a");
  452. a.href = "javascript: selectTask(" + (tempArray[i]['completed'] ? completedCount : todoCount) + ", " + tempArray[i]['completed'] + ")";
  453.  
  454. var li = document.createElement("li");
  455.  
  456. var title = document.createElement("div");
  457. title.className = "task_title";
  458. title.textContent = tempArray[i]['title'];
  459.  
  460. var date = document.createElement("div");
  461. date.className = "task_due_date";
  462. date.textContent = tempArray[i]['date'];
  463.  
  464. li.append(title);
  465. li.append(date);
  466.  
  467. a.append(li);
  468.  
  469. if (tempArray[i]['completed']) {
  470. completedList.append(a);
  471. completedCount++;
  472. } else {
  473. todoList.append(a);
  474. todoCount++;
  475. }
  476. }
  477. }
  478.  
  479. /**
  480. * Selects a specific project on the list by it's id and index.
  481. */
  482. function selectProject(id, index) {
  483.  
  484. unselectAllProjects();
  485.  
  486. var list = $("#project_list");
  487. var elem = list.children().eq(index);
  488. var li = elem.children().first();
  489. li.addClass("selected_project");
  490.  
  491. buildProjectsActions(true);
  492.  
  493. /* <------------------ SET SELECTED PROJECT HERE */
  494. buildTaskList();
  495. }
  496.  
  497. /**
  498. * Unselects all the projects on the project list.
  499. */
  500. function unselectAllProjects() {
  501. $('#project_list').children().each(function () {
  502. var li = this.children[0];
  503. li.className = "";
  504. });
  505. }
  506.  
  507. /**
  508. * Creates a confirm dialogue, if confirmed, it will send a delete project request to the server.
  509. */
  510. function deleteSelectedProject() {
  511. var r = confirm("This will permanently delete this project, are you sure?");
  512. if (r == true) {
  513. //enviar request/* <-------------------------------------------- replace later */
  514. //quando retornar:
  515. buildProjectList();
  516. }
  517. }
  518.  
  519. /**
  520. * Creates a confirm dialogue, if confirmed, it will send a delete task request to the server.
  521. */
  522. function deleteSelectedTask() {
  523. var r = confirm("This will permanently delete this task, are you sure?");
  524. if (r == true) {
  525. //enviar request
  526. //quando retornar: /*<-------------------------------------------- replace later */
  527. buildTaskList();
  528. }
  529. }
  530.  
  531. /**
  532. * Changes the "completed" value of a task.
  533. */
  534. function changeCompletion(complete) {
  535. /* <--------------------------------------------- SET TASK COMPLETION TO complete */
  536. buildTaskList();
  537. }
  538.  
  539. /**
  540. * Moves a task up or down in the list (1 == up, -1 == down).
  541. */
  542. function moveTask(offset) {
  543. /* <--------------------------------------------- MOVE TASK (1 == up, -1 == down) */
  544. buildTaskList();
  545. }
  546.  
  547. /**
  548. * Changes the complete/undo icon depending on the task's status.
  549. */
  550. function displayCompletion(complete) {
  551. var completeAction = document.getElementById("completion_action");
  552. var img = completeAction.children[0];
  553. img.src = complete ? "images/icon_complete.png" : "images/icon_undo.png";
  554. }
  555.  
  556. /**
  557. * Selects a specific task on the list, displaying it's tasks.
  558. */
  559. function selectTask(index, completed) {
  560. unselectAllTasks();
  561.  
  562. var list = $(completed ? "#completed_tasks" : "#todo_tasks");
  563. var elem = list.children().eq(index);
  564. var li = elem.children().first();
  565. li.addClass("selected_task");
  566.  
  567. buildTaskActions(true);
  568. displayCompletion(!completed);
  569. }
  570.  
  571.  
  572. /**
  573. * Unselects all the tasks on the list.
  574. */
  575. function unselectAllTasks() {
  576. $('#todo_tasks').children().each(function () {
  577. var li = this.children[0];
  578. li.className = "";
  579. });
  580.  
  581. $('#completed_tasks').children().each(function () {
  582. var li = this.children[0];
  583. li.className = "";
  584. });
  585. }
  586.  
  587. function login() {
  588.  
  589. var username = $("#login_username").val()
  590. var password = $("#login_password").val();
  591.  
  592. if (username.length == 0) {
  593. alert("Invalid username");
  594. return;
  595. }
  596.  
  597. if (password.length == 0) {
  598. alert("Invalid password");
  599. return;
  600. }
  601.  
  602. var req = new XMLHttpRequest();
  603. req.open("POST", "/api/user/login/");
  604. req.addEventListener("load", function () {
  605. buildNavigation(true);
  606. showHome();
  607. });
  608. req.setRequestHeader("Content-type", "application/json");
  609. req.send(JSON.stringify({ 'username': username, 'password': password }));
  610. }
  611.  
  612. function register() {
  613.  
  614. var username = $("#login_username").val()
  615. var name = $("#login_name").val()
  616. var password = $("#login_password").val();
  617. var passwordConfirm = $("#login_confirm_password").val();
  618.  
  619. if (username.length == 0) {
  620. alert("Invalid username");
  621. return;
  622. }
  623.  
  624. if (name.length == 0) {
  625. alert("Invalid name");
  626. return;
  627. }
  628.  
  629. if (password.length == 0) {
  630. alert("Invalid password");
  631. return;
  632. }
  633.  
  634. if (passwordConfirm !== password) {
  635. alert("Passwords don't match");
  636. return;
  637. }
  638.  
  639. var req = new XMLHttpRequest();
  640. req.open("POST", "/api/user/register/");
  641. req.addEventListener("load", function () {
  642. json = this.responseText;
  643. if (!json.hasOwnProperty('status')) {
  644. buildNavigation(true);
  645. showHome();
  646. }
  647. });
  648. req.setRequestHeader("Content-type", "application/json");
  649. req.send(JSON.stringify({ 'email': email, 'username': username, 'password': password }));
  650. }
  651.  
  652. function logout() {
  653. //logout action /*<-------------------------------------------- replace later */
  654. buildNavigation(false);
  655. showLogin();
  656. }
  657.  
  658. function addProject() {
  659.  
  660. var name = $("#project_name").val();
  661.  
  662. if (name.length === 0) {
  663. alert("Invalid name");
  664. return;
  665. }
  666.  
  667. //add action /*<-------------------------------------------- replace later */
  668. if (true) { // se for bem sucedido (troca depois)
  669. closePopup();
  670. buildProjectList();
  671. }
  672. }
  673.  
  674. function editProject() {
  675. var name = $("#project_name").val();
  676.  
  677. if (name.length === 0) {
  678. alert("Invalid name");
  679. return;
  680. }
  681.  
  682. //edit action /*<-------------------------------------------- replace later */
  683. if (true) { // se for bem sucedido (troca depois)
  684. closePopup();
  685. buildProjectList();
  686. }
  687. }
  688.  
  689. function addTask() {
  690.  
  691. var name = $("#task_name").val();
  692. var dueDate = $("#task_date").val();
  693.  
  694. if (name.length === 0) {
  695. alert("Invalid name");
  696. return;
  697. }
  698.  
  699. if (dueDate.length === 0) {
  700. alert("Invalid date");
  701. return;
  702. }
  703.  
  704. //add action /*<-------------------------------------------- replace later */
  705. if (true) { // se for bem sucedido (troca depois)
  706. closePopup();
  707. buildTaskList();
  708. }
  709.  
  710. }
  711.  
  712. function editTask() {
  713.  
  714. var name = $("#task_name").val();
  715. var dueDate = $("#task_date").val();
  716.  
  717. if (name.length === 0) {
  718. alert("Invalid name");
  719. return;
  720. }
  721.  
  722. if (dueDate.length === 0) {
  723. alert("Invalid date");
  724. return;
  725. }
  726.  
  727. //edit action /*<-------------------------------------------- replace later */
  728. if (true) { // se for bem sucedido (troca depois)
  729. closePopup();
  730. buildTaskList();
  731. }
  732.  
  733. }
  734.  
  735. function showHome() {
  736. $("#container").empty();
  737. buildHome();
  738. }
  739.  
  740. function showLogin() {
  741. $("#container").empty();
  742. buildLogin();
  743. }
  744.  
  745. function showRegister() {
  746. $("#container").empty();
  747. buildRegister();
  748. }
  749.  
  750. function closePopup() {
  751. document.body.removeChild(document.getElementById("page_overlay"));
  752. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement