JavaScript Scrum App to manage tasks with ease.
scrum-board
JavaScript Scrum App to manage tasks with ease.
Warning : It uses localstorage to store your tasks, make sure you don't clean up your Local Storage for this app atleast.
Instructions (How to use Scrum Board)
- Create a new task by clicking on the Plus(Blue) icon on the footer
- Update a task by double clicking on Description text, Link text or Assigned to text, card will show (Edit Mode Enabled) text.
- All updated text will be saved automatically without you doing anything except for typing out your edits on the card. (Can't edit titles as of now, will be released in next version.)
- Drag your task card to the bin(red) on the footer to delete your task (Note that this cannot be reverted)
- Move your task card around to update the status of your task, say from Development to Testing and so on.
- Update a column name by double clicking on Title text.
flows.json
[{"id":"8d4496baf525b65b","type":"tab","label":"Scrum Board - Manage your tasks with ease","disabled":false,"info":"","env":[]},{"id":"7129cc0af3217659","type":"group","z":"8d4496baf525b65b","g":"8b8f5d1b40ce0e12","name":"statics","style":{"fill":"#0070c0","label":true},"nodes":["574ba10e8f5c0ad7","1a870ef46794b6ac"],"x":68,"y":213,"w":1104,"h":714},{"id":"b6cf337a0acf3995","type":"group","z":"8d4496baf525b65b","g":"420299cedb78c474","name":"Scum Board","style":{"fill":"#ffff7f","fill-opacity":"1","label":true},"nodes":["6ecd7a78f59f153e","327e610e5537b880","5b2097bbf46d0a9a","0d6b4987126b8725","2fe04db7532878ac"],"x":94,"y":79,"w":1072,"h":82},{"id":"420299cedb78c474","type":"group","z":"8d4496baf525b65b","g":"8b8f5d1b40ce0e12","name":"Home","style":{"label":true},"nodes":["b6cf337a0acf3995"],"x":68,"y":53,"w":1124,"h":134},{"id":"8b8f5d1b40ce0e12","type":"group","z":"8d4496baf525b65b","name":"APP","style":{"fill":"#0070c0","label":true},"nodes":["7129cc0af3217659","420299cedb78c474"],"x":42,"y":27,"w":1176,"h":926},{"id":"574ba10e8f5c0ad7","type":"group","z":"8d4496baf525b65b","g":"7129cc0af3217659","name":"Image","style":{"label":true},"nodes":["25545394efdfb768","e491cf3e4fafae1c","ad655fe0ac0c577b","60004390397bc2f3","a2787c863221a9c5","6bc809cf9b7de498","1f6eb7989c4e3c0d","5c129d612ea265d6","8a8c9939aff58092","cedfc812c400828b","e902db8e2d92ac98","b8d33823ad6c8ee9","d71cc7317092ce54","7c5570146ad7b660","381707afccfa84dc","2490479ac6adb357","5772cfb3c294ac4f","2830485b5143a37a","13a81f4a12e59c8d","72e3013e320f2a56"],"x":94,"y":439,"w":1052,"h":462},{"id":"1a870ef46794b6ac","type":"group","z":"8d4496baf525b65b","g":"7129cc0af3217659","name":"javascript","style":{"label":true},"nodes":["2c6b88e3aac2d2d3","6872eea233b093ea","c482ae97d1472ed0","48b60e9fa0ee5330","c9f8df22900b55f8","4567b5ee4e287834","c5c80e2238aa96e9"],"x":94,"y":239,"w":1052,"h":162},{"id":"6ecd7a78f59f153e","type":"template","z":"8d4496baf525b65b","g":"b6cf337a0acf3995","name":"HTML","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n <title>Scrum Board - Manage your tasks with ease</title>\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css\">\n <style>{{{payload.style}}}</style>\n</head>\n\n<body>\n <div class=\"wrapper\">\n <header class=\"clear\">\n <ul>\n </ul>\n </header>\n <section id=\"dashboard\" class=\"dashboard clear\">\n </section>\n\n <footer>\n <ul>\n <li class=\"branding\">Scrum <span>Board</span> <sup>Beta</sup></li>\n </ul>\n \n <ul class=\"controls\">\n <li data-tooltip=\"Drag A Task Here To Delete\">\n <a href=\"#\" class=\"remove\" id=\"remove\">\n <img src=\"app/assets/images/bin.svg\" alt=\"\">\n </a>\n </li>\n <li data-tooltip=\"Add Task\">\n <a href=\"#\" id=\"add-task\" class=\"add-task\">\n <img src=\"app/assets/images/plus.svg\" alt=\"\">\n </a>\n </li>\n <li data-tooltip=\"Github\" class=\"github-ref\">\n <a href=\"https://github.com/i-break-codes/scrum-board\" target=\"_blank\">\n <img src=\"app/assets/images/github.svg\" alt=\"\">\n </a>\n </li>\n </ul>\n </footer>\n </div>\n\n <div id=\"removed-task-notification\" class=\"removed-task-notification hide\"></div>\n\n <div class=\"modal hide\" id=\"change-status-modal\">\n <div class=\"modal-wrapper\">\n <form action=\"index.html\" method=\"post\" class=\"change-status-form\" name=\"change_status\">\n <span class=\"close-modal\">X</span>\n\n <h3>Change column name</h3>\n\n <ul>\n <li>\n <input type=\"text\" id=\"new_status\" placeholder=\"Column name\" autofocus>\n </li>\n <li>\n <input type=\"submit\" name=\"change_status\" value=\"Change column name\">\n </li>\n </ul>\n </form>\n </div>\n </div>\n\n <div class=\"modal hide\" id=\"add-task-modal\">\n <div class=\"modal-wrapper\">\n <form action=\"index.html\" method=\"post\" class=\"add-task-form\" name=\"add_task\">\n <span class=\"close-modal\">X</span>\n\n <h3>Add a new Task</h3>\n\n <ul>\n <li>\n <input type=\"text\" name=\"title\" placeholder=\"Title\" autofocus>\n </li>\n <li>\n <textarea name=\"description\" placeholder=\"Description\"></textarea>\n </li>\n <li>\n <input type=\"text\" name=\"remote_url\" placeholder=\"Remote Task URL\">\n </li>\n <li>\n <input type=\"text\" name=\"assigned_to\" placeholder=\"Assigned To\">\n </li>\n <li>\n <input type=\"submit\" name=\"create_task\" value=\"Create Task\">\n </li>\n </ul>\n </form>\n </div>\n\n <div class=\"create-task-branding\">\n Scrum <span>Board</span> <sup>Beta</sup>\n </div>\n </div>\n\n <div class=\"hide\" id=\"tips\">\n Double click on the task text to edit it <br> <span>(Task titles are <b>editable</b> for now)</span>\n </div>\n\n<script id=\"task-card-template\" type=\"text/x-handlebars-template\">\n{{{payload.script}}}\n</script>\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js\"></script>\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js\"></script>\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js\"></script>\n <script src=\"/app/assets/scripts/helper.js\"></script>\n <script src=\"/app/assets/scripts/localstorage.js\"></script>\n <script src=\"/app/assets/scripts/app.js\"></script>\n</body>\n\n</html>","output":"str","x":870,"y":120,"wires":[["5b2097bbf46d0a9a"]]},{"id":"5b2097bbf46d0a9a","type":"http response","z":"8d4496baf525b65b","g":"b6cf337a0acf3995","name":"","statusCode":"200","headers":{},"x":1080,"y":120,"wires":[]},{"id":"2fe04db7532878ac","type":"http in","z":"8d4496baf525b65b","g":"b6cf337a0acf3995","name":"","url":"/index.html","method":"get","upload":false,"swaggerDoc":"","x":200,"y":120,"wires":[["0d6b4987126b8725"]]},{"id":"327e610e5537b880","type":"template","z":"8d4496baf525b65b","g":"b6cf337a0acf3995","name":"CSS","field":"payload.style","fieldType":"msg","format":"css","syntax":"mustache","template":"/**\n * logerr\n *\n * @category scrum-board\n * @author Vaibhav Mehta <vaibhav@decodingweb.com>\n * @copyright Copyright (c) 2016 Vaibhav Mehta <https://github.com/i-break-codes>\n * @license http://www.opensource.org/licenses/mit-license.html MIT License\n * @version 1.0 Beta\n */\n@import 'https://fonts.googleapis.com/css?family=Hind+Vadodara:300,400';\n* {\n margin: 0;\n padding: 0;\n outline: 0;\n box-sizing: border-box; }\n\nhtml, body, .wrapper {\n height: 100%; }\n\nbody {\n font-weight: 300;\n font-family: Hind Vadodara;\n background-image: linear-gradient(to left, #000428, #004e92);\n color: #fff;\n font-size: 14px; }\n\nul {\n list-style-type: none; }\n\na {\n text-decoration: none;\n color: inherit; }\n\n.clear:after {\n content: \"\";\n display: table;\n clear: both; }\n\n.hide {\n display: none !important; }\n\nheader {\n background-color: rgba(0, 0, 0, 0.4); }\n header li {\n padding: 15px;\n float: left;\n width: 20%;\n text-align: center;\n position: relative;\n text-transform: uppercase; }\n header li:after {\n content: \"\";\n position: absolute;\n left: 0;\n bottom: 0;\n width: 100%;\n height: 1px; }\n header li:nth-child(1):after {\n background: linear-gradient(to left, #cb2d3e, #ef473a); }\n header li:nth-child(2):after {\n background: linear-gradient(to left, #ffb347, #ffcc33); }\n header li:nth-child(3):after {\n background: linear-gradient(to left, #56ab2f, #a8e063); }\n header li:nth-child(4):after {\n background: linear-gradient(to left, #00d2ff, #3a7bd5); }\n header li:nth-child(5):after {\n background: linear-gradient(to left, #4CB8C4, #3CD3AD); }\n\n.wrapper {\n overflow: hidden; }\n\n.dashboard {\n height: calc(100% - 101px); }\n .dashboard > div {\n float: left;\n height: 100%;\n border-right: 1px solid rgba(0, 0, 0, 0.4);\n width: 20%; }\n\n.card {\n background-color: rgba(0, 0, 0, 0.4);\n min-height: 50px;\n margin: 10px;\n position: relative;\n overflow: hidden;\n height: 40px;\n box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);\n z-index: 2; }\n .card:before {\n content: \"\";\n position: absolute;\n height: 100%;\n width: 1px; }\n .rejected .card p:before, .rejected\n .card h5:after {\n color: #ef473a; }\n .pending .card p:before, .pending\n .card h5:after {\n color: #ffcc33; }\n .development .card p:before, .development\n .card h5:after {\n color: #a8e063; }\n .testing .card p:before, .testing\n .card h5:after {\n color: #3a7bd5; }\n .production .card p:before, .production\n .card h5:after {\n color: #3CD3AD; }\n .card h5 {\n font-size: 13px;\n line-height: 50px;\n padding-left: 10px;\n font-weight: 300;\n cursor: move; }\n .card.edit-mode h5 {\n position: relative; }\n .card.edit-mode h5:after {\n top: 50%;\n margin-left: 5px;\n margin-top: 1px;\n -ms-transform: translateY(-50%);\n transform: translateY(-50%);\n position: absolute;\n font-size: 9px;\n content: \"(Edit Mode Enabled)\"; }\n .rejected .card:before {\n background: linear-gradient(to left, #cb2d3e, #ef473a); }\n .pending .card:before {\n background: linear-gradient(to left, #ffb347, #ffcc33); }\n .development .card:before {\n background: linear-gradient(to left, #56ab2f, #a8e063); }\n .testing .card:before {\n background: linear-gradient(to left, #00d2ff, #3a7bd5); }\n .production .card:before {\n background: linear-gradient(to left, #4CB8C4, #3CD3AD); }\n .card.expanded {\n overflow: auto !important;\n height: auto !important; }\n\n.card-details {\n padding: 10px;\n font-size: 12px;\n word-wrap: break-word;\n padding-top: 0; }\n .card-details p {\n margin-bottom: 10px;\n position: relative; }\n .card-details p:before {\n position: absolute;\n left: 0; }\n .card-details p:nth-child(1) {\n padding-left: 67px; }\n .card-details p:nth-child(1):before {\n content: \"Description : \"; }\n .card-details p:nth-child(2) {\n padding-left: 72px; }\n .card-details p:nth-child(2):before {\n content: \"Remote URL : \"; }\n .card-details p:nth-child(3) {\n padding-left: 70px; }\n .card-details p:nth-child(3):before {\n content: \"Assigned To : \"; }\n .card-details a {\n border-bottom: 1px dotted #fff; }\n .card-details a:hover {\n border-bottom-style: solid; }\n\n.dragged-over {\n background-color: rgba(0, 0, 0, 0.1); }\n\n@keyframes rotate180 {\n to {\n transform: rotate(180deg); } }\n\n.modal {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-image: linear-gradient(to left, #000428, #004e92);\n z-index: 2; }\n\n.modal-wrapper {\n position: absolute;\n top: 50%;\n left: 50%;\n max-width: 400px;\n margin: auto;\n width: 100%;\n -ms-transform: translateX(-50%) translateY(-50%);\n transform: translateX(-50%) translateY(-50%); }\n .modal-wrapper .close-modal {\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 50%;\n width: 50px;\n height: 50px;\n position: absolute;\n top: -90px;\n font-family: Open Sans;\n line-height: 52px;\n font-size: 20px;\n left: 50%;\n -ms-transform: translateX(-50%);\n transform: translateX(-50%);\n vertical-align: middle;\n cursor: pointer; }\n .modal-wrapper .close-modal:hover {\n border-color: #fff; }\n .modal-wrapper h3 {\n font-weight: 100;\n font-size: 30px;\n position: relative; }\n\n.add-task-form {\n text-align: center; }\n .add-task-form li {\n margin-top: 30px; }\n .add-task-form [type=text],\n .add-task-form [type=submit],\n .add-task-form textarea {\n color: #fff;\n font-size: inherit;\n font-family: inherit;\n font-weight: inherit;\n width: 100%;\n line-height: 24px;\n padding: 15px 10px;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n border: 1px solid rgba(255, 255, 255, 0.07);\n background-color: transparent;\n transition: border-color .25s linear; }\n .add-task-form [type=text]::-webkit-input-placeholder,\n .add-task-form [type=submit]::-webkit-input-placeholder,\n .add-task-form textarea::-webkit-input-placeholder {\n color: rgba(255, 255, 255, 0.3); }\n .add-task-form [type=text]:focus,\n .add-task-form [type=submit]:focus,\n .add-task-form textarea:focus {\n border-color: #fff; }\n .add-task-form [type=submit] {\n cursor: pointer;\n border-color: transparent; }\n .add-task-form textarea {\n resize: none;\n min-height: 100px; }\n\n.expand-card {\n height: 19px;\n width: 19px;\n background-size: auto 100%;\n display: inline-block;\n position: absolute;\n top: 25px;\n cursor: pointer;\n -ms-transform: translateY(-50%);\n transform: translateY(-50%);\n right: 15px;\n padding: 3px; }\n .rejected .expand-card {\n background-image: url(\"/app/assets/images/rejected-expand.svg\"); }\n .pending .expand-card {\n background-image: url(\"/app/assets/images/pending-expand.svg\"); }\n .development .expand-card {\n background-image: url(\"/app/assets/images/development-expand.svg\"); }\n .testing .expand-card {\n background-image: url(\"/app/assets/images/testing-expand.svg\"); }\n .production .expand-card {\n background-image: url(\"/app/assets/images/production-expand.svg\"); }\n .expand-card svg {\n fill: #fff; }\n\n.removed-task-notification {\n position: absolute;\n top: 10%;\n left: 50%;\n -ms-transform: translateX(-50%);\n transform: translateX(-50%);\n padding: 5px 20px;\n color: #515151;\n border-radius: 3px;\n background-color: rgba(255, 255, 255, 0.8);\n box-sizing: 0 0 3px rgba(0, 0, 0, 0.6); }\n\nfooter {\n height: 50px;\n position: relative;\n border-top: 1px solid rgba(0, 0, 0, 0.4); }\n\n.remove {\n display: block;\n background-color: #ef473a;\n border-radius: 50%;\n height: 30px;\n width: 30px;\n text-align: center;\n padding-top: 7px;\n transition: all 300ms ease-out;\n cursor: default; }\n .remove img {\n width: 16px; }\n .remove.dragged-over {\n width: 250px;\n border-radius: 3px; }\n\n.add-task {\n z-index: 1;\n border-radius: 50%; }\n .add-task img {\n width: 30px;\n display: block;\n box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1); }\n .add-task:hover img {\n animation: rotate180 .2s linear; }\n\n[data-tooltip] {\n position: relative; }\n [data-tooltip]:before {\n display: none;\n content: attr(data-tooltip);\n background-color: rgba(0, 0, 0, 0.6);\n padding: 10px 20px;\n position: absolute;\n text-align: center;\n white-space: nowrap;\n left: 50%;\n -ms-transform: translateY(-130%) translateX(-50%);\n transform: translateY(-130%) translateX(-50%); }\n [data-tooltip]:hover:before {\n display: block; }\n\n.controls {\n position: absolute;\n right: 0;\n top: 50%;\n -ms-transform: translateY(-50%);\n transform: translateY(-50%); }\n .controls li {\n float: left;\n margin-right: 20px; }\n .controls iframe {\n margin-top: 5px; }\n .controls .twitter-share-button {\n background-color: #1b95e0;\n padding: 2px 10px;\n font-size: 12px;\n border-radius: 3px;\n vertial-align: middle;\n position: absolute;\n top: 4px;\n left: -70px; }\n\n.branding,\n.create-task-branding {\n text-transform: uppercase;\n font-size: 18px;\n padding: 10px; }\n .branding sup,\n .create-task-branding sup {\n position: absolute;\n font-size: 9px;\n margin-top: -6px;\n margin-left: -3px; }\n .branding span,\n .create-task-branding span {\n color: rgba(255, 255, 255, 0.6); }\n\n.create-task-branding {\n position: absolute;\n bottom: 2px;\n left: 0;\n width: 300px; }\n\n.github-ref {\n height: 30px;\n width: 30px; }\n .github-ref img {\n height: 29px;\n width: 29px; }\n\n.onboard {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 2; }\n\n.onboard-modal {\n height: 300px;\n width: 450px;\n background-color: #fff;\n border-radius: 3px;\n position: absolute;\n top: 50%;\n left: 50%;\n -ms-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%); }\n\n.tips {\n position: absolute;\n bottom: 90px;\n right: -280px;\n font-size: 13px;\n background-color: rgba(0, 0, 0, 0.3);\n padding: 10px;\n border-radius: 3px;\n padding-left: 25px;\n opacity: 0;\n animation: showTips 500ms ease-in forwards;\n cursor: pointer;\n background-image: url(\"/app/assets/images/info.svg\");\n background-position: 4px 12px;\n background-size: 16px;\n background-repeat: no-repeat; }\n .tips span {\n font-size: 10px;\n font-style: italic; }\n\n@keyframes showTips {\n to {\n right: 20px;\n opacity: 1; } }\n","x":670,"y":120,"wires":[["6ecd7a78f59f153e"]]},{"id":"0d6b4987126b8725","type":"template","z":"8d4496baf525b65b","g":"b6cf337a0acf3995","name":"JavaScript","field":"payload.script","fieldType":"msg","format":"handlebars","syntax":"plain","template":"{{#each this}}\n<div class=\"card\" data-task-id=\"{{id}}\">\n <a href=\"#\" class=\"expand-card\"></a>\n <h5>{{title}}</h5>\n <div class=\"card-details\">\n <p data-field=\"description\">{{description}}</p>\n <p data-field=\"remote_url\">\n {{#checkIfEmptyRemoteURL remote_url}}{{/checkIfEmptyRemoteURL}}\n </p>\n <p data-field=\"assigned_to\">\n {{#checkIfEmptyAssigned assigned_to}}{{/checkIfEmptyAssigned}}\n </p>\n </div>\n</div>\n{{/each}}","output":"str","x":450,"y":120,"wires":[["327e610e5537b880"]]},{"id":"8a8c9939aff58092","type":"http in","z":"8d4496baf525b65b","g":"574ba10e8f5c0ad7","name":"","url":"/app/assets/images/bin.svg","method":"get","upload":false,"swaggerDoc":"","x":250,"y":560,"wires":[["6bc809cf9b7de498"]]},{"id":"6bc809cf9b7de498","type":"template","z":"8d4496baf525b65b","g":"574ba10e8f5c0ad7","name":"bin.svg","field":"payload","fieldType":"msg","format":"text","syntax":"plain","template":" <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" id=\"Capa_1\" x=\"0px\" y=\"0px\" viewBox=\"0 0 59 59\" style=\"enable-background:new 0 0 59 59;\" xml:space=\"preserve\" width=\"512px\" height=\"512px\">\n <g>\n <path d=\"M29.5,51c0.552,0,1-0.447,1-1V17c0-0.553-0.448-1-1-1s-1,0.447-1,1v33C28.5,50.553,28.948,51,29.5,51z\" fill=\"#FFFFFF\" />\n <path d=\"M19.5,51c0.552,0,1-0.447,1-1V17c0-0.553-0.448-1-1-1s-1,0.447-1,1v33C18.5,50.553,18.948,51,19.5,51z\" fill=\"#FFFFFF\" />\n <path d=\"M39.5,51c0.552,0,1-0.447,1-1V17c0-0.553-0.448-1-1-1s-1,0.447-1,1v33C38.5,50.553,38.948,51,39.5,51z\" fill=\"#FFFFFF\" />\n <path d=\"M52.5,6H38.456c-0.11-1.25-0.495-3.358-1.813-4.711C35.809,0.434,34.751,0,33.499,0H23.5c-1.252,0-2.31,0.434-3.144,1.289 C19.038,2.642,18.653,4.75,18.543,6H6.5c-0.552,0-1,0.447-1,1s0.448,1,1,1h2.041l1.915,46.021C10.493,55.743,11.565,59,15.364,59 h28.272c3.799,0,4.871-3.257,4.907-4.958L50.459,8H52.5c0.552,0,1-0.447,1-1S53.052,6,52.5,6z M21.792,2.681 C22.24,2.223,22.799,2,23.5,2h9.999c0.701,0,1.26,0.223,1.708,0.681c0.805,0.823,1.128,2.271,1.24,3.319H20.553 C20.665,4.952,20.988,3.504,21.792,2.681z M46.544,53.979C46.538,54.288,46.4,57,43.636,57H15.364 c-2.734,0-2.898-2.717-2.909-3.042L10.542,8h37.915L46.544,53.979z\" fill=\"#FFFFFF\" />\n </g>\n <g>\n </g>\n <g>\n </g>\n <g>\n </g>\n <g>\n </g>\n <g>\n </g>\n <g>\n </g>\n <g>\n </g>\n <g>\n </g>\n <g>\n </g>\n <g>\n </g>\n <g>\n </g>\n <g>\n </g>\n <g>\n </g>\n <g>\n </g>\n <g>\n </g>\n </svg>\n","output":"str","x":660,"y":560,"wires":[["ad655fe0ac0c577b"]]},{"id":"7c5570146ad7b660","type":"template","z":"8d4496baf525b65b","g":"574ba10e8f5c0ad7","name":"development-expand.svg","field":"payload","fieldType":"msg","format":"text","syntax":"plain","template":"<svg version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n viewBox=\"0 0 60 60\" style=\"enable-background:new 0 0 60 60;\" xml:space=\"preserve\" fill=\"#a8e063\">\n <path d=\"M59,22c-0.553,0-1-0.448-1-1V1c0-0.552,0.447-1,1-1s1,0.448,1,1v20C60,21.552,59.553,22,59,22z\" />\n <path d=\"M59,2H39c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S59.553,2,59,2z\" />\n <path d=\"M35,26c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24\n c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C35.512,25.902,35.256,26,35,26z\"/>\n <path d=\"M1,60c-0.553,0-1-0.448-1-1V39c0-0.552,0.447-1,1-1s1,0.448,1,1v20C2,59.552,1.553,60,1,60z\" />\n <path d=\"M21,60H1c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S21.553,60,21,60z\" />\n <path d=\"M1,60c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24\n c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C1.512,59.902,1.256,60,1,60z\"/>\n</svg>","output":"str","x":710,"y":780,"wires":[["b8d33823ad6c8ee9"]]},{"id":"2830485b5143a37a","type":"http in","z":"8d4496baf525b65b","g":"574ba10e8f5c0ad7","name":"","url":"/app/assets/images/development-expand.svg","method":"get","upload":false,"swaggerDoc":"","x":310,"y":780,"wires":[["7c5570146ad7b660"]]},{"id":"60004390397bc2f3","type":"template","z":"8d4496baf525b65b","g":"574ba10e8f5c0ad7","name":"info.svg","field":"payload","fieldType":"msg","format":"text","syntax":"mustache","template":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" id=\"Capa_1\" x=\"0px\" y=\"0px\" viewBox=\"0 0 111.577 111.577\" style=\"enable-background:new 0 0 111.577 111.577;\" xml:space=\"preserve\" width=\"512px\" height=\"512px\">\n<g>\n\t<path d=\"M78.962,99.536l-1.559,6.373c-4.677,1.846-8.413,3.251-11.195,4.217c-2.785,0.969-6.021,1.451-9.708,1.451 c-5.662,0-10.066-1.387-13.207-4.142c-3.141-2.766-4.712-6.271-4.712-10.523c0-1.646,0.114-3.339,0.351-5.064 c0.239-1.727,0.619-3.672,1.139-5.846l5.845-20.688c0.52-1.981,0.962-3.858,1.316-5.633c0.359-1.764,0.532-3.387,0.532-4.848 c0-2.642-0.547-4.49-1.636-5.529c-1.089-1.036-3.167-1.562-6.252-1.562c-1.511,0-3.064,0.242-4.647,0.71 c-1.59,0.47-2.949,0.924-4.09,1.346l1.563-6.378c3.829-1.559,7.489-2.894,10.99-4.002c3.501-1.111,6.809-1.667,9.938-1.667 c5.623,0,9.962,1.359,13.009,4.077c3.047,2.72,4.57,6.246,4.57,10.591c0,0.899-0.1,2.483-0.315,4.747 c-0.21,2.269-0.601,4.348-1.171,6.239l-5.82,20.605c-0.477,1.655-0.906,3.547-1.279,5.676c-0.385,2.115-0.569,3.731-0.569,4.815 c0,2.736,0.61,4.604,1.833,5.597c1.232,0.993,3.354,1.487,6.368,1.487c1.415,0,3.025-0.251,4.814-0.744 C76.854,100.348,78.155,99.915,78.962,99.536z M80.438,13.03c0,3.59-1.353,6.656-4.072,9.177c-2.712,2.53-5.98,3.796-9.803,3.796 c-3.835,0-7.111-1.266-9.854-3.796c-2.738-2.522-4.11-5.587-4.11-9.177c0-3.583,1.372-6.654,4.11-9.207 C59.447,1.274,62.729,0,66.563,0c3.822,0,7.091,1.277,9.803,3.823C79.087,6.376,80.438,9.448,80.438,13.03z\" fill=\"#FFDA44\"/>\n</g>\n<g>\n</g>\n<g>\n</g>\n<g>\n</g>\n<g>\n</g>\n<g>\n</g>\n<g>\n</g>\n<g>\n</g>\n<g>\n</g>\n<g>\n</g>\n<g>\n</g>\n<g>\n</g>\n<g>\n</g>\n<g>\n</g>\n<g>\n</g>\n<g>\n</g>\n</svg>\n","x":660,"y":480,"wires":[["ad655fe0ac0c577b"]]},{"id":"1f6eb7989c4e3c0d","type":"http in","z":"8d4496baf525b65b","g":"574ba10e8f5c0ad7","name":"","url":"/app/assets/images/info.svg","method":"get","upload":false,"swaggerDoc":"","x":250,"y":480,"wires":[["60004390397bc2f3"]]},{"id":"d71cc7317092ce54","type":"template","z":"8d4496baf525b65b","g":"574ba10e8f5c0ad7","name":"pending-expand.svg","field":"payload","fieldType":"msg","format":"text","syntax":"mustache","template":"<svg version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n\t viewBox=\"0 0 60 60\" style=\"enable-background:new 0 0 60 60;\" xml:space=\"preserve\" fill=\"#ffcc33\">\n <path d=\"M59,22c-0.553,0-1-0.448-1-1V1c0-0.552,0.447-1,1-1s1,0.448,1,1v20C60,21.552,59.553,22,59,22z\"/>\n <path d=\"M59,2H39c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S59.553,2,59,2z\"/>\n <path d=\"M35,26c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24\n c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C35.512,25.902,35.256,26,35,26z\"/>\n <path d=\"M1,60c-0.553,0-1-0.448-1-1V39c0-0.552,0.447-1,1-1s1,0.448,1,1v20C2,59.552,1.553,60,1,60z\"/>\n <path d=\"M21,60H1c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S21.553,60,21,60z\"/>\n <path d=\"M1,60c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24\n c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C1.512,59.902,1.256,60,1,60z\"/>\n</svg>","x":700,"y":740,"wires":[["b8d33823ad6c8ee9"]]},{"id":"5772cfb3c294ac4f","type":"http in","z":"8d4496baf525b65b","g":"574ba10e8f5c0ad7","name":"","url":"/app/assets/images/pending-expand.svg","method":"get","upload":false,"swaggerDoc":"","x":290,"y":740,"wires":[["d71cc7317092ce54"]]},{"id":"a2787c863221a9c5","type":"template","z":"8d4496baf525b65b","g":"574ba10e8f5c0ad7","name":"plus.svg","field":"payload","fieldType":"msg","format":"text","syntax":"mustache","template":"<svg version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n\t viewBox=\"0 0 50 50\" style=\"enable-background:new 0 0 50 50;\" xml:space=\"preserve\">\n <circle style=\"fill:#004e92;\" cx=\"25\" cy=\"25\" r=\"25\"/>\n <line style=\"fill:none;stroke:#000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;\" x1=\"25\" y1=\"13\" x2=\"25\" y2=\"38\"/>\n <line style=\"fill:none;stroke:#000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;\" x1=\"37.5\" y1=\"25\" x2=\"12.5\" y2=\"25\"/>\n</svg>","x":660,"y":520,"wires":[["ad655fe0ac0c577b"]]},{"id":"5c129d612ea265d6","type":"http in","z":"8d4496baf525b65b","g":"574ba10e8f5c0ad7","name":"","url":"/app/assets/images/plus.svg","method":"get","upload":false,"swaggerDoc":"","x":250,"y":520,"wires":[["a2787c863221a9c5"]]},{"id":"2490479ac6adb357","type":"template","z":"8d4496baf525b65b","g":"574ba10e8f5c0ad7","name":"production-expand.svg","field":"payload","fieldType":"msg","format":"text","syntax":"mustache","template":"<svg version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n\t viewBox=\"0 0 60 60\" style=\"enable-background:new 0 0 60 60;\" xml:space=\"preserve\" fill=\"#3CD3AD\">\n <path d=\"M59,22c-0.553,0-1-0.448-1-1V1c0-0.552,0.447-1,1-1s1,0.448,1,1v20C60,21.552,59.553,22,59,22z\"/>\n <path d=\"M59,2H39c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S59.553,2,59,2z\"/>\n <path d=\"M35,26c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24\n c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C35.512,25.902,35.256,26,35,26z\"/>\n <path d=\"M1,60c-0.553,0-1-0.448-1-1V39c0-0.552,0.447-1,1-1s1,0.448,1,1v20C2,59.552,1.553,60,1,60z\"/>\n <path d=\"M21,60H1c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S21.553,60,21,60z\"/>\n <path d=\"M1,60c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24\n c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C1.512,59.902,1.256,60,1,60z\"/>\n</svg>","x":700,"y":860,"wires":[["b8d33823ad6c8ee9"]]},{"id":"72e3013e320f2a56","type":"http in","z":"8d4496baf525b65b","g":"574ba10e8f5c0ad7","name":"","url":"/app/assets/images/production-expand.svg","method":"get","upload":false,"swaggerDoc":"","x":300,"y":860,"wires":[["2490479ac6adb357"]]},{"id":"cedfc812c400828b","type":"template","z":"8d4496baf525b65b","g":"574ba10e8f5c0ad7","name":"rejected-expand.svg","field":"payload","fieldType":"msg","format":"text","syntax":"mustache","template":"<svg version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n\t viewBox=\"0 0 60 60\" style=\"enable-background:new 0 0 60 60;\" xml:space=\"preserve\" fill=\"#ef473a\">\n <path d=\"M59,22c-0.553,0-1-0.448-1-1V1c0-0.552,0.447-1,1-1s1,0.448,1,1v20C60,21.552,59.553,22,59,22z\"/>\n <path d=\"M59,2H39c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S59.553,2,59,2z\"/>\n <path d=\"M35,26c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24\n c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C35.512,25.902,35.256,26,35,26z\"/>\n <path d=\"M1,60c-0.553,0-1-0.448-1-1V39c0-0.552,0.447-1,1-1s1,0.448,1,1v20C2,59.552,1.553,60,1,60z\"/>\n <path d=\"M21,60H1c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S21.553,60,21,60z\"/>\n <path d=\"M1,60c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24\n c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C1.512,59.902,1.256,60,1,60z\"/>\n</svg>","x":700,"y":700,"wires":[["b8d33823ad6c8ee9"]]},{"id":"e902db8e2d92ac98","type":"http in","z":"8d4496baf525b65b","g":"574ba10e8f5c0ad7","name":"","url":"/app/assets/images/rejected-expand.svg","method":"get","upload":false,"swaggerDoc":"","x":290,"y":700,"wires":[["cedfc812c400828b"]]},{"id":"381707afccfa84dc","type":"template","z":"8d4496baf525b65b","g":"574ba10e8f5c0ad7","name":"testing-expand.svg","field":"payload","fieldType":"msg","format":"text","syntax":"mustache","template":"<svg version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n\t viewBox=\"0 0 60 60\" style=\"enable-background:new 0 0 60 60;\" xml:space=\"preserve\" fill=\"#3a7bd5\">\n <path d=\"M59,22c-0.553,0-1-0.448-1-1V1c0-0.552,0.447-1,1-1s1,0.448,1,1v20C60,21.552,59.553,22,59,22z\"/>\n <path d=\"M59,2H39c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S59.553,2,59,2z\"/>\n <path d=\"M35,26c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24\n c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C35.512,25.902,35.256,26,35,26z\"/>\n <path d=\"M1,60c-0.553,0-1-0.448-1-1V39c0-0.552,0.447-1,1-1s1,0.448,1,1v20C2,59.552,1.553,60,1,60z\"/>\n <path d=\"M21,60H1c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S21.553,60,21,60z\"/>\n <path d=\"M1,60c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24\n c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C1.512,59.902,1.256,60,1,60z\"/>\n</svg>","x":690,"y":820,"wires":[["b8d33823ad6c8ee9"]]},{"id":"13a81f4a12e59c8d","type":"http in","z":"8d4496baf525b65b","g":"574ba10e8f5c0ad7","name":"","url":"/app/assets/images/testing-expand.svg","method":"get","upload":false,"swaggerDoc":"","x":290,"y":820,"wires":[["381707afccfa84dc"]]},{"id":"ad655fe0ac0c577b","type":"http response","z":"8d4496baf525b65b","g":"574ba10e8f5c0ad7","name":"HTTP 200 image/svg+xml","statusCode":"200","headers":{"content-type":"image/svg+xml"},"x":1010,"y":480,"wires":[]},{"id":"e491cf3e4fafae1c","type":"http in","z":"8d4496baf525b65b","g":"574ba10e8f5c0ad7","name":"","url":"/app/assets/images/github.svg","method":"get","upload":false,"swaggerDoc":"","x":260,"y":600,"wires":[["25545394efdfb768"]]},{"id":"25545394efdfb768","type":"template","z":"8d4496baf525b65b","g":"574ba10e8f5c0ad7","name":"github.svg","field":"payload","fieldType":"msg","format":"text","syntax":"mustache","template":"<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 1000 1000\" enable-background=\"new 0 0 1000 1000\" xml:space=\"preserve\" fill=\"#fff\">\n <g>\n <path d=\"M500,10C229.4,10,10,235.1,10,512.5c0,222,140.4,410.2,335.1,476.7c3.1,0.7,5.7,0.9,8.3,0.9c18.2,0,25.2-13.3,25.2-24.9c0-12-0.4-43.5-0.7-85.5c-18.4,4.2-34.8,5.9-49.4,5.9c-94.3,0-115.7-73.3-115.7-73.3c-22.3-58-54.5-73.5-54.5-73.5c-42.7-30-0.2-30.8,3.1-30.8c0.2,0,0.2,0,0.2,0c49.2,4.4,75,52.1,75,52.1c24.5,42.9,57.3,54.9,86.6,54.9c23,0,43.8-7.4,56-13.1c4.4-32.4,17.1-54.5,31.1-67.2c-108.7-12.7-223.1-55.8-223.1-248.3c0-54.9,19-99.8,50.3-134.8c-5-12.7-21.9-63.9,4.8-133c0,0,3.5-1.1,10.9-1.1c17.7,0,57.8,6.8,123.8,52.7c39.2-11.2,80.9-16.6,122.7-16.8c41.6,0.2,83.6,5.7,122.7,16.8c66.1-45.9,106.1-52.7,123.8-52.7c7.4,0,10.9,1.1,10.9,1.1c26.7,69.1,9.8,120.3,4.8,133c31.3,35.2,50.3,80.1,50.3,134.8c0,192.9-114.6,235.4-223.8,247.8c17.5,15.5,33.3,46.2,33.3,93c0,67.2-0.7,121.4-0.7,137.8c0,11.8,6.8,25.2,24.9,25.2c2.6,0,5.7-0.2,8.8-0.9C849.8,922.6,990,734.3,990,512.5C990,235.1,770.6,10,500,10z M328.5,920.2c4.8,0,9.6-0.2,14.7-0.4c0,6.1,0,12,0.2,17.3c0,5.3,0,10.1,0.2,14.2c-34.1-12.7-66.3-29.5-96.5-50.3C268.6,912.6,295.5,920.2,328.5,920.2z M353.4,760.8c-1.7,4.8-3.3,9.8-4.6,15.1c-7.4,2.2-16.4,3.9-25.6,3.9c-23.8,0-41.6-11.8-56-37c-5.3-10.1-14.9-23.4-28.2-35.7C275.8,738,318.4,752.9,353.4,760.8z M769.1,889.6c-34.6,26-72.2,46.6-111.6,61.7c0-4.2,0-9,0-14.2c0-26,0-65.2,0-110.3c0-27.1-4.6-49.2-10.9-66.7c81.4-18.2,201.3-73.7,201.3-274.3c0-53.8-15.5-101.7-46.4-142.4c6.8-28.2,12-77.9-11.2-137.8l-5.9-15.5l-15.8-5.3c-3.3-1.1-10.5-2.8-21.9-2.8c-25.2,0-67.6,9-130.2,49.9c-37.2-9.2-76.1-14-116.2-14H500h-0.2c-40,0-79.2,4.8-116.2,14c-62.6-40.9-105-49.9-130.2-49.9c-11.4,0-18.6,2-21.9,3.1l-15.8,5.3l-5.9,15.5c-23.2,60.2-17.9,109.8-11.2,137.8c-30.8,40.9-46.4,88.8-46.4,142.4c0,108.5,35,174.8,80.1,215.5C214.8,687,191.8,675,164.2,673h-1.1H162h-0.7c-28.7,0-48.8,11.8-55.1,32.2c-10.3,32.4,21.4,54.7,31.9,62.1l1.1,1.3l3.3,1.3c3.5,2.2,22.1,15.3,37,53.6c4.4,13.6,13.8,31.7,29.8,48.6c-28.7-24.5-54.3-52.5-76.3-83.3C75.4,708.3,45,612.7,45,512.5c0-63.2,12-124.5,35.9-182.2c23-55.8,55.8-105.7,97.8-148.5c41.8-42.9,90.6-76.6,144.6-100C379.2,57.5,438.8,45,500,45s120.8,12.3,176.8,36.5c54.3,23.4,102.8,57.1,144.6,100s74.8,93,97.8,148.5C943,387.8,955,449,955,512.3c0,100.2-30.2,195.8-87.7,276.3C839.7,827.3,806.7,861.2,769.1,889.6z\" />\n </g>\n</svg>","x":670,"y":600,"wires":[["ad655fe0ac0c577b"]]},{"id":"b8d33823ad6c8ee9","type":"http response","z":"8d4496baf525b65b","g":"574ba10e8f5c0ad7","name":"HTTP 200 image/svg+xml","statusCode":"200","headers":{"content-type":"image/svg+xml"},"x":1010,"y":780,"wires":[]},{"id":"48b60e9fa0ee5330","type":"template","z":"8d4496baf525b65b","g":"1a870ef46794b6ac","name":"helper.js","field":"payload","fieldType":"msg","format":"javascript","syntax":"plain","template":"/**\n * scrum-board\n *\n * @category scrum-board\n * @author Vaibhav Mehta <vaibhav@decodingweb.com>\n * @copyright Copyright (c) 2016 Vaibhav Mehta <https://github.com/i-break-codes>\n * @license http://www.opensource.org/licenses/mit-license.html MIT License\n * @version 1.0 Beta\n */\n\n\n// TODO: Clearup this mess later and find a better way to handle blank fields\n\nvar Helper = function() {\n function init() {\n checkIfEmptyRemoteURL();\n checkForEmptyAssign();\n }\n \n function checkIfEmptyRemoteURL() {\n Handlebars.registerHelper('checkIfEmptyRemoteURL', function(val, options) {\n if(val) {\n return '<a href=\"' + val + '\" target=\"_blank\">' + val + '</a>';\n } else {\n return '-';\n }\n });\n }\n \n function checkForEmptyAssign() {\n Handlebars.registerHelper('checkIfEmptyAssigned', function(val, options) {\n if(val) {\n return val;\n } else {\n return '-';\n }\n });\n }\n \n return {\n init: init\n }\n}();\n\nHelper.init();","output":"str","x":660,"y":280,"wires":[["c482ae97d1472ed0"]]},{"id":"4567b5ee4e287834","type":"http in","z":"8d4496baf525b65b","g":"1a870ef46794b6ac","name":"","url":"/app/assets/scripts/helper.js","method":"get","upload":false,"swaggerDoc":"","x":250,"y":280,"wires":[["48b60e9fa0ee5330"]]},{"id":"c482ae97d1472ed0","type":"http response","z":"8d4496baf525b65b","g":"1a870ef46794b6ac","name":"HTTP 200 text/javascript","statusCode":"200","headers":{"content-type":"text/javascript"},"x":1010,"y":320,"wires":[]},{"id":"c9f8df22900b55f8","type":"template","z":"8d4496baf525b65b","g":"1a870ef46794b6ac","name":"localstorage.js","field":"payload","fieldType":"msg","format":"javascript","syntax":"plain","template":"/**\n * scrum-board\n *\n * @category scrum-board\n * @author Vaibhav Mehta <vaibhav@decodingweb.com>\n * @copyright Copyright (c) 2016 Vaibhav Mehta <https://github.com/i-break-codes>\n * @license http://www.opensource.org/licenses/mit-license.html MIT License\n * @version 1.0 Beta\n */\n\n\nvar LocalStorage = function () {\n function set(key, val) {\n localStorage.setItem(key, val);\n }\n\n function get(key) {\n return localStorage.getItem(key);\n }\n\n function remove(key) {\n localStorage.removeItem(key);\n }\n\n return {\n set: set,\n get: get,\n remove: remove\n }\n}();","output":"str","x":680,"y":320,"wires":[["c482ae97d1472ed0"]]},{"id":"6872eea233b093ea","type":"template","z":"8d4496baf525b65b","g":"1a870ef46794b6ac","name":"app.js","field":"payload","fieldType":"msg","format":"javascript","syntax":"plain","template":"/**\n * scrum-board\n *\n * @category scrum-board\n * @author Vaibhav Mehta <vaibhav@decodingweb.com>\n * @copyright Copyright (c) 2016 Vaibhav Mehta <https://github.com/i-break-codes>\n * @license http://www.opensource.org/licenses/mit-license.html MIT License\n * @version 1.0 Beta\n */\n\nvar App = function () {\n function init() {\n tips();\n preset();\n addStatusColumns();\n changeStatus();\n draggable();\n droppable();\n openCard();\n createTask();\n closeModal();\n printNotes();\n editTask();\n exitEditMode();\n }\n\n function preset() {\n $('#remove').on('click', function (e) {\n e.preventDefault();\n });\n\n var defaultTask = {\n id: 1,\n title: 'This is a sample task',\n description: 'Sample tasks are useful to get started',\n remote_url: 'https://asana.com/12345/1234',\n assigned_to: 'Jon Doe',\n status: 'pending'\n }\n\n if (!LocalStorage.get('appInitialized', true)) {\n LocalStorage.set('taskCounter', 1);\n LocalStorage.set('status', JSON.stringify([\n { key: 'rejected', value: 'Rejected' },\n { key: 'pending', value: 'Pending' },\n { key: 'development', value: 'Development' },\n { key: 'testing', value: 'Testing' },\n { key: 'production', value: 'Production' }]));\n LocalStorage.set('task-1', JSON.stringify(defaultTask));\n LocalStorage.set('appInitialized', true);\n }\n }\n\n function addStatusColumns() {\n\n var statusArr = JSON.parse(LocalStorage.get('status'));\n var headerObj = $('header ul');\n var myDashboard = $('#dashboard');\n statusArr.map(function (item) {\n var newLi = $('<li>' + item.value + '</li>');\n newLi.attr('data-id', item.key);\n headerObj.append(newLi);\n\n var newDiv = $('<div id=' + item.key + ' class=' + item.key + '></div>');\n myDashboard.append(newDiv);\n });\n\n }\n\n function changeStatus() {\n $('header li').on('dblclick', function (e) {\n e.preventDefault();\n var statusToChange = $(this).attr('data-id');\n\n $('#change-status-modal').removeClass('hide');\n\n $('#new_status').val($(this).text());\n\n $('#change-status-modal').find('form').on('submit', function (e) {\n e.preventDefault();\n var newStatus = $('#new_status').val();\n var currentStatus = JSON.parse(LocalStorage.get('status'));\n currentStatus.map(function (obj) {\n if (obj.key == statusToChange) {\n obj.value = newStatus;\n }\n });\n\n $('header ul li[data-id=' + statusToChange + ']').html(newStatus);\n\n LocalStorage.set('status', JSON.stringify(currentStatus));\n\n\n $('.close-modal').trigger('click');\n\n });\n });\n }\n\n function createTask() {\n var source = $(\"#task-card-template\").html();\n var template = Handlebars.compile(source);\n\n $('#add-task').on('click', function (e) {\n e.preventDefault();\n $('#add-task-modal').removeClass('hide');\n\n $('#add-task-modal').find('form').on('submit', function (e) {\n e.preventDefault();\n var obj = {};\n var params = $(this).serialize();\n var splitParams = params.split('&');\n\n for (var i = 0, l = splitParams.length; i < l; i++) {\n var keyVal = splitParams[i].split('=');\n obj[keyVal[0]] = unescape(keyVal[1]);\n }\n\n // TODO: Add validations\n if (obj.description === '' || obj.title === '') {\n return;\n }\n\n var iid = LocalStorage.get('taskCounter');\n obj.id = ++iid;\n obj.status = 'pending';\n LocalStorage.set('task-' + obj.id, JSON.stringify(obj));\n LocalStorage.set('taskCounter', iid);\n\n var newCard = template([obj]);\n $('#dashboard #' + obj.status).append(newCard);\n draggable();\n\n $('.close-modal').trigger('click');\n\n //Clear form fields after submit\n $(this).find('input[type=text], textarea').val('');\n });\n\n });\n }\n\n function editTask() {\n $(document).on('dblclick', '.card-details', function (e) {\n e.stopPropagation();\n $(this).find('p').attr('contenteditable', 'true').parents('.card').addClass('edit-mode');\n });\n\n $(document).on('input', '.card p', function () {\n var taskId = $(this).parents('.card').data('task-id');\n var fieldToEdit = $(this).data('field');\n var getTaskData = JSON.parse(LocalStorage.get('task-' + taskId));\n\n getTaskData[fieldToEdit] = $(this).text();\n\n LocalStorage.set('task-' + taskId, JSON.stringify(getTaskData));\n });\n }\n\n function exitEditMode() {\n $(document).on('dblclick', function (e) {\n $('.card').removeClass('edit-mode').find('[contenteditable]').removeAttr('contenteditable');\n });\n }\n\n function closeModal() {\n $('.close-modal').on('click', function () {\n $('.modal').addClass('hide');\n })\n }\n\n function draggable() {\n $('.card').draggable({\n handle: 'h5',\n revert: false,\n helper: function (e) {\n //Cloning element, to enable draggable elements move out of scrollable parent element.\n var original = $(e.target).hasClass(\"ui-draggable\") ? $(e.target) : $(e.target).closest(\".ui-draggable\");\n return original.clone().css({\n width: original.width()\n });\n },\n scroll: false,\n cursor: 'move',\n start: function (event, ui) { },\n stop: function (event, ui) { }\n });\n }\n\n function droppable() {\n var droppableConfig = {\n tolerance: 'pointer',\n drop: function (event, ui) {\n var elm = ui.draggable,\n parentId = elm.parent().attr('id'),\n currentId = $(this).attr('id'),\n taskId = elm.data('task-id');\n\n if ($(this).attr('id') == 'remove') {\n //Deletes task\n elm.remove();\n LocalStorage.remove('task-' + taskId);\n $('#removed-task-notification').text('Task removed successfully').removeClass('hide');\n\n\n setTimeout(function () {\n $('#removed-task-notification').text('').addClass('hide');\n }, 3000);\n } else {\n //Moves task\n if (parentId != currentId) {\n $(elm).detach().removeAttr('style').appendTo(this);\n\n var getTaskData = JSON.parse(LocalStorage.get('task-' + taskId));\n getTaskData.status = currentId;\n\n LocalStorage.set('task-' + taskId, JSON.stringify(getTaskData));\n }\n }\n\n $(this).removeClass('dragged-over');\n },\n over: function (event, ui) {\n $(this).addClass('dragged-over');\n },\n out: function (event, ui) {\n $(this).removeClass('dragged-over');\n }\n }\n\n $('#dashboard > div, #remove').droppable(droppableConfig);\n }\n\n function openCard() {\n $(document).on('click', '.expand-card', function (e) {\n $(this).parent().toggleClass('expanded');\n e.preventDefault();\n });\n }\n\n function getAllNotes() {\n var getAllData = localStorage;\n var getTasks = [];\n\n for (var data in getAllData) {\n if (data.split('-')[0] == 'task') {\n getTasks.push(JSON.parse(localStorage[data]));\n }\n }\n\n return getTasks;\n }\n\n function printNotes() {\n var source = $(\"#task-card-template\").html();\n var template = Handlebars.compile(source);\n\n var status = JSON.parse(LocalStorage.get('status'));\n\n for (var i = 0, l = status.length; i < l; i++) {\n var result = App.getAllNotes().filter(function (obj) {\n return obj.status == status[i].key;\n });\n\n if (result) {\n var cards = template(result);\n $('#dashboard #' + status[i].key).append(cards);\n draggable();\n }\n }\n }\n\n function tips() {\n if (!JSON.parse(LocalStorage.get('showedTip'))) {\n $('#tips').removeClass('hide').addClass('tips');\n }\n\n $('#tips').on('click', function () {\n $(this).addClass('hide');\n LocalStorage.set('showedTip', true);\n });\n }\n\n return {\n init: init,\n getAllNotes: getAllNotes\n }\n}();\n\nApp.init();","output":"str","x":650,"y":360,"wires":[["c482ae97d1472ed0"]]},{"id":"c5c80e2238aa96e9","type":"http in","z":"8d4496baf525b65b","g":"1a870ef46794b6ac","name":"","url":"/app/assets/scripts/localstorage.js","method":"get","upload":false,"swaggerDoc":"","x":270,"y":320,"wires":[["c9f8df22900b55f8"]]},{"id":"2c6b88e3aac2d2d3","type":"http in","z":"8d4496baf525b65b","g":"1a870ef46794b6ac","name":"","url":"/app/assets/scripts/app.js","method":"get","upload":false,"swaggerDoc":"","x":240,"y":360,"wires":[["6872eea233b093ea"]]}]
Credit
This flow is an adaption of the great work developed by Vaibhav Mehta
