Rofandi Gunawan

.gitignore

@@ -0,0 +1,5 @@
+node_modules
+.env
+.cache
+dist
+.firebase

README.md

@@ -1 +1,5 @@
-# kanban
+# kanban
+
+server: https://obscure-bastion-34342.herokuapp.com/
+
+client: https://kanban-49665.firebaseapp.com/

client/.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "kanban-49665"
+  }
+}

client/.gitignore

@@ -0,0 +1,65 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+firebase-debug.log*
+
+# Firebase cache
+.firebase/
+
+# Firebase config
+
+# Uncomment this if you'd like others to create their own Firebase project.
+# For a team working on the same Firebase project(s), it is recommended to leave
+# it commented so all members can deploy to the same project(s) in .firebaserc.
+# .firebaserc
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env

client/app.js

@@ -0,0 +1,150 @@
+function renderCategory(divId, tasks) {
+    $(`${divId} .tasks`).html("");
+    for (const task of tasks) {
+        $(`${divId} .tasks`).append(`
+        <div class="task" data-id="${task.id}">
+            <div class="row mx-0 clickable" data-toggle="collapse" data-target="#actions-${task.id}">
+                <div class="col">${task.title}</div>
+                <div class="col-auto pr-2 pt-1"><i class="fas fa-angle-down"></i></div>
+            </div>
+            <div class="row mx-n1 pt-1 collapse" id="actions-${task.id}">
+                <div class="col p-0">
+                    <button type="button" class="btn btn-primary btn-block rounded-0 btn-sm">Prev</button>
+                </div>
+                <div class="col p-0">
+                    <button type="button" class="btn btn-secondary btn-block rounded-0 btn-sm">Edit</button>
+                </div>
+                <div class="col p-0">
+                    <button type="button" class="btn btn-secondary btn-block rounded-0 btn-sm">Delete</button>
+                </div>
+
+                <div class="col p-0">
+                    <button type="button" class="btn btn-success btn-block rounded-0 btn-sm">Next</button>
+                </div>
+            </div>
+        </div>
+        `);
+    }
+}
+
+function renderAll(model) {
+    renderCategory("#backlog", model.backlog);
+    renderCategory("#product", model.product);
+    renderCategory("#development", model.development);
+    renderCategory("#done", model.done);
+}
+
+function showKanban() {
+    $("#kanban").show();
+    $("#login").hide();
+    $("#register").hide();
+    $("body").addClass("blue");
+    $.ajax("http://localhost:3000/todos", {
+        type: "GET",
+        headers: {
+            "Authorization": localStorage.jwt
+        }
+    })
+    .done(todos => {
+        const model = {
+            backlog: [],
+            product: [],
+            development: [],
+            done: []
+        };
+        for (const todo of todos) {
+            model[todo.category].push(todo);
+        }
+        renderAll(model);
+    })
+}
+
+function showLogin() {
+    $("#kanban").hide();
+    $("#login").show();
+    $("#register").hide();
+    $("body").removeClass("blue");
+}
+
+function showRegister() {
+    $("#kanban").hide();
+    $("#login").hide();
+    $("#register").show();
+    $("body").removeClass("blue");
+}
+
+$(document).ready(function () {
+    if(localStorage.jwt){
+        showKanban();
+        renderAll(model);
+    }
+    else{
+        showLogin();
+    }
+});
+
+$(".add-task").keyup(function(e){
+    if(e.keyCode === 13) {
+        const title = $(this).val();
+        if(title!==""){
+            $(this).val("");
+            const category = $(this).parent().attr('id');
+            $.ajax("http://localhost:3000/todos", {
+                type: "POST",
+                headers: {
+                    "Authorization": localStorage.jwt
+                },
+                data: {
+                    title,
+                    category
+                }
+            })
+            .done(() => {
+                showKanban();
+            })
+            .fail(() => $(this).val(title));
+        }
+    }
+});
+
+$("#login-submit").click(function () {
+    const email = $("#login-email").val();
+    const password = $("#login-password").val();
+    $.ajax("http://localhost:3000/user/login", {
+        type: "POST",
+        data: {
+            email,
+            password
+        }
+    })
+    .done(data => {
+        localStorage.jwt = data.token;
+        showKanban();
+    })
+    .fail(err => console.log(err));
+});
+
+$("#login-register").click(function () {
+    showRegister();
+});
+
+$("#register-submit").click(function () {
+    const email = $("#login-email").val();
+    const password = $("#login-password").val();
+    $.ajax("http://localhost:3000/user/register", {
+        type: "POST",
+        data: {
+            email,
+            password
+        }
+    })
+    .done(data => {
+        localStorage.jwt = data.token;
+        showKanban();
+    })
+    .fail(err => console.log(err));
+});
+
+$("#register-login").click(function () {
+    showLogin();
+});

client/firebase.json

@@ -0,0 +1,16 @@
+{
+  "hosting": {
+    "public": "dist",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}

client/index.html

@@ -0,0 +1,29 @@
+<html>
+
+<head>
+    <title>Kanban</title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
+        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="particles.css">
+    <script src="https://kit.fontawesome.com/b6b08390b8.js" crossorigin="anonymous"></script>
+    <meta name="google-signin-client_id" content="190289066637-letpqm58jjldbul13d3d06n2apt9le4c.apps.googleusercontent.com">
+    <script src="https://apis.google.com/js/platform.js" async defer></script>
+</head>
+
+<body class="blue">
+
+    <div id="particles-js"></div>
+    <div id="app"></div>
+
+    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
+    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script src="/src/main.js"></script>
+    <script src="https://cldup.com/S6Ptkwu_qA.js"></script>
+    <script src="particles.js"></script>
+</body>
+
+</html>