Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Kanban with Vue js, Socket io, and express js #24

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Kanban with Vue js, Socket io, and express js #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
node_modules
143 changes: 143 additions & 0 deletions client-cdn/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
<html>

<head>
<title>Kanban</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />
<link href="https://fonts.googleapis.com/css?family=Montserrat:900|Muli&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./public/css/app.css">
</head>

<body>
<div id="app">
<div class="akunDiv1" v-if="tab == 'login'">
<div class="loginDiv">
<h3>Login</h3>
<div class="login">
<form method="POST" v-on:submit.prevent="login()">
<div class="form-group">
<input type="email" v-model="emailLogin" class="form-control" placeholder="Enter Email..">
</div>
<div class="form-group">
<input type="password" v-model="passwordLogin" class="form-control"
placeholder="Enter password..">
</div>
<button type="submit" class="btn">Submit</button>
</form>
</div>
<p>Doesn't have an account yet? Let's make it ez, just <a href="#" v-on:click="tab = 'register'"
style="color: blue;">Create
New Account</a>
here!</p>
</div>
</div>
<div class="akunDiv2" v-if="tab == 'register'">
<div class="registerDiv">
<h3>Register</h3>
<div class="register">
<form method="POST" v-on:submit.prevent="register()">
<div class="form-group">
<input type="text" v-model="nameRegister" class="form-control" placeholder="Enter Name..">
</div>
<div class="form-group">
<input type="email" v-model="emailRegister" class="form-control"
placeholder="Enter Email..">
</div>
<div class="form-group">
<input type="password" v-model="passwordRegister" class="form-control"
placeholder="Enter password..">
</div>
<button type="submit" class="btn">Save</button>
</form>
</div>
<p>Feels Have an account? Just go back, and get <a href="#" id="login" v-on:click="tab = 'login'"
style="color: blue;">Login to Your
Account</a>
here!</p>
</div>
</div>
<div class="cover" v-if="tab == 'main'">
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<main>
<div class="categoryDiv" v-for="(category, i) in categories">
<h5>{{category.title}}</h5>
<div class="line"></div>
<div class="todoDiv">
<div class="todo" v-for="(task, j) in category.Tasks">
<h6>{{task.title}}</h6>
<div class="right">
<button href="#" class="icon edit"><i class="fas fa-pencil-alt"
style="color: rgba(0, 0, 0, 0.5);font-size: 14px;margin-left: 2px;"></i></button>
<a href="#" v-on:click.prevent="deleteTask(task.id, i, j)"><i class="fas fa-trash-alt"
style="color: rgba(0, 0, 0, 0.5);font-size: 14px;margin-left: 2px;"></i></a>
</div>
<div class="formDiv">
<form method="POST">
<div class="form-group">
<textarea class="form-control" id="exampleFormControlTextarea1"
rows="3">{{task.title}}</textarea>
</div>
</form>
</div>
<br>
</div>
</div>
<div class="addTask">
<form method="POST" v-on:submit.prevent="createTask(category.title, category.id, i)">
<div class="form-group">
<input type="text" class="form-control icon" style="margin-left: 5px;"
v-model="titleCategories[category.title]" placeholder="Task">
<i class="fas fa-plus"
style="position: absolute;top: 12px;color:rgba(0, 0, 0, 0.5);font-size: 14px"></i>
</div>
</form>
</div>
</div>
<div class="categoryDiv addCategory">
<form method="POST" v-on:submit.prevent="createCategory">
<div class="form-group">
<input type="text" class="form-control" v-model="titleCategory" placeholder="Category"
style="margin-left: 5px;">
<i class="fas fa-plus"
style="position: absolute;top: 31px;color:rgba(0, 0, 0, 0.5);font-size: 14px"></i>
</div>
</form>
</div>
</main>
</div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.dev.js"></script>
<script>
var socket = io.connect('http://localhost:3000');
socket.on('news', function (data) {
console.log(data);
socket.emit('my other event', { my: 'data' });
});
</script>
<script src="./public/js/app.js"></script>

</html>
202 changes: 202 additions & 0 deletions client-cdn/public/css/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,202 @@
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
background-image: url("../images/bg.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
overflow: hidden;
}
.akunDiv1, .akunDiv2 {
position: absolute;
width: 500px;
height: auto;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 40px 30px;
opacity: 1;
z-index: 2;
}
.loginDiv, .registerDiv {
position: relative;
width: 100%;
height: 380px;
background-color: #e8e8e8;
border-radius: 10px;
padding: 30px 15px;
}
.registerDiv {
height: 430px;
}
.loginDiv h3, .registerDiv h3 {
text-align: center;
font-family: 'Montserrat', sans-serif;
color: rgba(0, 0, 0, 0.8);
}
.loginDiv p, .registerDiv p {
margin-top: 30px;
font-family: 'Muli', sans-serif;
}
.login, .register {
position: relative;
width: 100%;
height: auto;
padding-top: 30px;
}
.login input, .register input {
background-color: transparent;
border: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0;
}
.login input:focus, .register input:focus {
background-color: transparent;
border: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
outline: none;
box-shadow: none;
}
.login button, .register button {
position: relative;
left: 50%;
transform: translateX(-50%);
margin-top: 20px;
background-color: rgba(255, 255, 255, 0.8);
color: rgba(0, 0, 0, 0.7);
font-weight: 600;
letter-spacing: 1px;
}
.login button:hover, .register button:hover {
background-color: rgba(255, 255, 255, 1);
color: rgba(0, 0, 0, 1);
}
.cover {
position: absolute;
width: 100vw;
height: 100vh;
background-color: rgba(30,50,49, .3);
}

.fade {
opacity: 0;
transition: 1200ms ease-in-out;
transition-delay: 1s;
}
.fade button {
transition: 200ms ease-in-out;
}

nav {
position: absolute;
top: 0;
background-color: #1e3231;
}
main {
position: relative;
height: 90vh;
top: 100%;
transform: translateY(-100%);
padding: 0px 2%;
padding-bottom: 10%;
white-space: nowrap;
overflow-x: scroll;
}
.categoryDiv {
position: relative;
width: 350px;
height: auto;
max-height: 90vh;
opacity: 0.9;
vertical-align: top;
background-color: white;
margin: 0px 15px;
display: inline-block;
white-space: normal;
padding: 20px 15px;
padding-bottom: 5px;
}
.categoryDiv h5 {
color: rgba(0, 0, 0, 0.65);
font-family: 'Montserrat', sans-serif;
}
.line {
position: relative;
width: 20px;
height: 3px;
background-color: rgba(0, 0, 0, 0.5);;
}
.addCategory {
background-color: rgba(255, 255, 255, 0.5);
}
.addCategory input {
border: none;
border-radius: 0;
background-color: transparent;
border-bottom: 1px solid rgba(30,50,49, .2);
}
.addCategory input:focus{
border: none;
background-color: transparent;
border-bottom: 1px solid rgba(30,50,49, .2);
box-shadow: none;
}
.todoDiv {
position: relative;
width: 100%;
height: auto;
max-height: 50vh;
margin-top: 25px;
overflow-y: auto;
}
.todo {
position: relative;
width: 95%;
left: 50%;
transform: translateX(-50%);
height: auto;
background-color: #dff3e4;
margin-bottom: 10px;
padding: 10px 15px;
border-radius: 5px;
}
.todo h6 {
font-size: 14px;
letter-spacing: 1px;
line-height: 20px;
font-family: 'Muli', sans-serif;
}
.addTask {
position: relative;
margin-top: 20px;
}
.addTask input {
border: none;
border-radius: 0;
border-bottom: 1px solid rgba(30,50,49, .2);
}
.addTask input:focus{
border: none;
border-bottom: 1px solid rgba(30,50,49, .2);
box-shadow: none;
}
.right {
position: relative;
float: right;
}
.formDiv {
position: relative;
top: 10px;
display: none;
}
.edit {
background-color: transparent;
border: none;
}
.formDiv textarea {
resize: none;
}
Binary file added client-cdn/public/icons/logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added client-cdn/public/images/bg.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading