690 lines
43 KiB
JavaScript
690 lines
43 KiB
JavaScript
var kanban1 = new jKanban({
|
|
element: '#demo1',
|
|
boards: [{
|
|
'id': '_todo',
|
|
'title': 'Todo (2)',
|
|
'item': [{
|
|
'title': `
|
|
<a class="kanban-box" href="#"><span class="date">23/7/20</span><span class="badge badge-primary f-right">medium</span>
|
|
<h6>Design Dashboard</h6>
|
|
<div class="media"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title="">
|
|
<div class="media-body">
|
|
<p>Themeforest, australia</p>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex mt-3">
|
|
<ul class="list">
|
|
<li><i class="fa fa-comments-o"></i>2</li>
|
|
<li><i class="fa fa-paperclip"></i>2</li>
|
|
<li><i class="fa fa-eye"></i></i></li>
|
|
</ul>
|
|
<div class="customers">
|
|
<ul>
|
|
<li class="d-inline-block me-3">
|
|
<p class="f-12">+10</p>
|
|
</li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
|
|
</ul>
|
|
</div>
|
|
</div></a>
|
|
`,
|
|
},
|
|
{
|
|
'title': `
|
|
<a class="kanban-box" href="#"><span class="date">24/7/20</span><span class="badge badge-danger f-right">Argent</span>
|
|
<h6>Test Sidebar</h6>
|
|
<div class="media"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title="">
|
|
<div class="media-body">
|
|
<p>Themeforest, australia</p>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex mt-3">
|
|
<ul class="list">
|
|
<li><i class="fa fa-comments-o"></i>2</li>
|
|
<li><i class="fa fa-paperclip"></i>2</li>
|
|
<li><i class="fa fa-eye"></i></i></li>
|
|
</ul>
|
|
<div class="customers">
|
|
<ul>
|
|
<li class="d-inline-block me-3">
|
|
<p class="f-12">+5</p>
|
|
</li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
|
|
</ul>
|
|
</div>
|
|
</div></a>
|
|
`,
|
|
}
|
|
]
|
|
},
|
|
{
|
|
'id': '_doing',
|
|
'title': 'Doing (2)',
|
|
'item': [{
|
|
'title': `
|
|
<a class="kanban-box" href="#"><span class="date">24/7/20</span><span class="badge badge-danger f-right">Argent</span>
|
|
<h6>Test Sidebar</h6>
|
|
<div class="media"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title="">
|
|
<div class="media-body">
|
|
<p>Themeforest, australia</p>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex mt-3">
|
|
<ul class="list">
|
|
<li><i class="fa fa-comments-o"></i>2</li>
|
|
<li><i class="fa fa-paperclip"></i>2</li>
|
|
<li><i class="fa fa-eye"></i></i></li>
|
|
</ul>
|
|
<div class="customers">
|
|
<ul>
|
|
<li class="d-inline-block me-3">
|
|
<p class="f-12">+5</p>
|
|
</li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
|
|
</ul>
|
|
</div>
|
|
</div></a>
|
|
`,
|
|
},
|
|
{
|
|
'title': `
|
|
<a class="kanban-box" href="#"><span class="date">24/7/20</span><span class="badge badge-success f-right">Low</span>
|
|
<h6>Dashboard issue</h6>
|
|
<div class="media"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title="">
|
|
<div class="media-body">
|
|
<p>Pixelstrap, New york</p>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex mt-3">
|
|
<ul class="list">
|
|
<li><i class="fa fa-comments-o"></i>2</li>
|
|
<li><i class="fa fa-paperclip"></i>2</li>
|
|
<li><i class="fa fa-eye"></i></i></li>
|
|
</ul>
|
|
<div class="customers">
|
|
<ul>
|
|
<li class="d-inline-block me-3">
|
|
<p class="f-12">+5</p>
|
|
</li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
|
|
</ul>
|
|
</div>
|
|
</div></a>
|
|
`,
|
|
}
|
|
]
|
|
},
|
|
{
|
|
'id': '_done',
|
|
'title': 'Done (2)',
|
|
'item': [{
|
|
'title': `
|
|
<a class="kanban-box" href="#"><span class="date">24/7/20</span><span class="badge badge-danger f-right">Argent</span>
|
|
<h6>Test Sidebar</h6>
|
|
<div class="media"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title="">
|
|
<div class="media-body">
|
|
<p>Themeforest, australia</p>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex mt-3">
|
|
<ul class="list">
|
|
<li><i class="fa fa-comments-o"></i>2</li>
|
|
<li><i class="fa fa-paperclip"></i>2</li>
|
|
<li><i class="fa fa-eye"></i></i></li>
|
|
</ul>
|
|
<div class="customers">
|
|
<ul>
|
|
<li class="d-inline-block me-3">
|
|
<p class="f-12">+5</p>
|
|
</li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
|
|
</ul>
|
|
</div>
|
|
</div></a>
|
|
`,
|
|
},
|
|
{
|
|
'title': `
|
|
<a class="kanban-box" href="#"><span class="date">23/7/20</span><span class="badge badge-primary f-right">medium</span>
|
|
<h6>Design Dashboard</h6>
|
|
<div class="media"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title="">
|
|
<div class="media-body">
|
|
<p>Themeforest, australia</p>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex mt-3">
|
|
<ul class="list">
|
|
<li><i class="fa fa-comments-o"></i>2</li>
|
|
<li><i class="fa fa-paperclip"></i>2</li>
|
|
<li><i class="fa fa-eye"></i></i></li>
|
|
</ul>
|
|
<div class="customers">
|
|
<ul>
|
|
<li class="d-inline-block me-3">
|
|
<p class="f-12">+10</p>
|
|
</li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
|
|
</ul>
|
|
</div>
|
|
</div></a>
|
|
`,
|
|
}
|
|
]
|
|
}
|
|
]
|
|
});
|
|
|
|
var kanban2 = new jKanban({
|
|
element: '#demo2',
|
|
gutter: '15px',
|
|
click: function (el) {
|
|
alert(el.innerHTML);
|
|
},
|
|
boards: [{
|
|
'id': '_todo',
|
|
'title': 'To Do (Item only in Working)',
|
|
'class': 'bg-primary',
|
|
'dragTo': ['_working'],
|
|
'item': [{
|
|
'title': `
|
|
<a class="kanban-box" href="#"><span class="date">24/7/20</span><span class="badge badge-info f-right">medium</span>
|
|
<h6>Test Sidebar</h6>
|
|
<div class="media"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title="">
|
|
<div class="media-body">
|
|
<p>Themeforest, australia</p>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex mt-3">
|
|
<ul class="list">
|
|
<li><i class="fa fa-comments-o"></i>2</li>
|
|
<li><i class="fa fa-paperclip"></i>2</li>
|
|
<li><i class="fa fa-eye"></i></i></li>
|
|
</ul>
|
|
<div class="customers">
|
|
<ul>
|
|
<li class="d-inline-block me-3">
|
|
<p class="f-12">+5</p>
|
|
</li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
|
|
</ul>
|
|
</div>
|
|
</div></a>
|
|
`,
|
|
},
|
|
{
|
|
'title': `
|
|
<a class="kanban-box" href="#"><span class="date">24/7/20</span><span class="badge badge-success f-right">Low</span>
|
|
<h6>Dashboard issue</h6>
|
|
<div class="media"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title="">
|
|
<div class="media-body">
|
|
<p>Pixelstrap, New york</p>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex mt-3">
|
|
<ul class="list">
|
|
<li><i class="fa fa-comments-o"></i>2</li>
|
|
<li><i class="fa fa-paperclip"></i>2</li>
|
|
<li><i class="fa fa-eye"></i></i></li>
|
|
</ul>
|
|
<div class="customers">
|
|
<ul>
|
|
<li class="d-inline-block me-3">
|
|
<p class="f-12">+5</p>
|
|
</li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
|
|
</ul>
|
|
</div>
|
|
</div></a>
|
|
`,
|
|
}
|
|
]
|
|
},
|
|
{
|
|
'id': '_working',
|
|
'title': 'Working',
|
|
'class': 'bg-warning',
|
|
'item': [{
|
|
'title': `
|
|
<a class="kanban-box" href="#"><span class="date">24/7/20</span><span class="badge badge-danger f-right">Argent</span>
|
|
<h6>Test Sidebar</h6>
|
|
<div class="media"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title="">
|
|
<div class="media-body">
|
|
<p>Themeforest, australia</p>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex mt-3">
|
|
<ul class="list">
|
|
<li><i class="fa fa-comments-o"></i>2</li>
|
|
<li><i class="fa fa-paperclip"></i>2</li>
|
|
<li><i class="fa fa-eye"></i></i></li>
|
|
</ul>
|
|
<div class="customers">
|
|
<ul>
|
|
<li class="d-inline-block me-3">
|
|
<p class="f-12">+5</p>
|
|
</li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
|
|
</ul>
|
|
</div>
|
|
</div></a>
|
|
`,
|
|
},
|
|
{
|
|
'title': `
|
|
<a class="kanban-box" href="#"><span class="date">24/7/20</span><span class="badge badge-success f-right">Low</span>
|
|
<h6>Dashboard issue</h6>
|
|
<div class="media"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title="">
|
|
<div class="media-body">
|
|
<p>Pixelstrap, New york</p>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex mt-3">
|
|
<ul class="list">
|
|
<li><i class="fa fa-comments-o"></i>2</li>
|
|
<li><i class="fa fa-paperclip"></i>2</li>
|
|
<li><i class="fa fa-eye"></i></i></li>
|
|
</ul>
|
|
<div class="customers">
|
|
<ul>
|
|
<li class="d-inline-block me-3">
|
|
<p class="f-12">+5</p>
|
|
</li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
|
|
</ul>
|
|
</div>
|
|
</div></a>
|
|
`,
|
|
}
|
|
]
|
|
},
|
|
{
|
|
'id': '_done',
|
|
'title': 'Done (Item only in Working)',
|
|
'class': 'bg-secondary',
|
|
'dragTo': ['_working'],
|
|
'item': [{
|
|
'title': `
|
|
<a class="kanban-box" href="#"><span class="date">24/7/20</span><span class="badge badge-danger f-right">Argent</span>
|
|
<h6>Test Sidebar</h6>
|
|
<div class="media"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title="">
|
|
<div class="media-body">
|
|
<p>Themeforest, australia</p>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex mt-3">
|
|
<ul class="list">
|
|
<li><i class="fa fa-comments-o"></i>2</li>
|
|
<li><i class="fa fa-paperclip"></i>2</li>
|
|
<li><i class="fa fa-eye"></i></i></li>
|
|
</ul>
|
|
<div class="customers">
|
|
<ul>
|
|
<li class="d-inline-block me-3">
|
|
<p class="f-12">+5</p>
|
|
</li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
|
|
</ul>
|
|
</div>
|
|
</div></a>
|
|
`,
|
|
},
|
|
{
|
|
'title': `
|
|
<a class="kanban-box" href="#"><span class="date">24/7/20</span><span class="badge badge-success f-right">Low</span>
|
|
<h6>Dashboard issue</h6>
|
|
<div class="media"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title="">
|
|
<div class="media-body">
|
|
<p>Pixelstrap, New york</p>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex mt-3">
|
|
<ul class="list">
|
|
<li><i class="fa fa-comments-o"></i>2</li>
|
|
<li><i class="fa fa-paperclip"></i>2</li>
|
|
<li><i class="fa fa-eye"></i></i></li>
|
|
</ul>
|
|
<div class="customers">
|
|
<ul>
|
|
<li class="d-inline-block me-3">
|
|
<p class="f-12">+5</p>
|
|
</li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
|
|
</ul>
|
|
</div>
|
|
</div></a>
|
|
`,
|
|
}
|
|
]
|
|
}
|
|
]
|
|
});
|
|
|
|
var kanban3 = new jKanban({
|
|
element: '#demo3',
|
|
gutter: '15px',
|
|
click: function (el) {
|
|
alert(el.innerHTML);
|
|
},
|
|
boards: [{
|
|
'id': '_todo',
|
|
'title': 'To Do',
|
|
'class': 'info',
|
|
'item': [{
|
|
'title': `
|
|
<a class="kanban-box" href="#"><span class="date">24/7/20</span><span class="badge badge-danger f-right">Argent</span>
|
|
<h6>Test Sidebar</h6>
|
|
<div class="media"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title="">
|
|
<div class="media-body">
|
|
<p>Themeforest, australia</p>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex mt-3">
|
|
<ul class="list">
|
|
<li><i class="fa fa-comments-o"></i>2</li>
|
|
<li><i class="fa fa-paperclip"></i>2</li>
|
|
<li><i class="fa fa-eye"></i></i></li>
|
|
</ul>
|
|
<div class="customers">
|
|
<ul>
|
|
<li class="d-inline-block me-3">
|
|
<p class="f-12">+5</p>
|
|
</li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
|
|
</ul>
|
|
</div>
|
|
</div></a>
|
|
`,
|
|
},
|
|
{
|
|
'title': `
|
|
<a class="kanban-box" href="#"><span class="date">24/7/20</span><span class="badge badge-danger f-right">Argent</span>
|
|
<h6>Test Sidebar</h6>
|
|
<div class="media"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title="">
|
|
<div class="media-body">
|
|
<p>Themeforest, australia</p>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex mt-3">
|
|
<ul class="list">
|
|
<li><i class="fa fa-comments-o"></i>2</li>
|
|
<li><i class="fa fa-paperclip"></i>2</li>
|
|
<li><i class="fa fa-eye"></i></i></li>
|
|
</ul>
|
|
<div class="customers">
|
|
<ul>
|
|
<li class="d-inline-block me-3">
|
|
<p class="f-12">+5</p>
|
|
</li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
|
|
</ul>
|
|
</div>
|
|
</div></a>
|
|
`,
|
|
},
|
|
]
|
|
},
|
|
{
|
|
'id': '_working',
|
|
'title': 'Working',
|
|
'class': 'warning',
|
|
'item': [{
|
|
'title': `
|
|
<a class="kanban-box" href="#"><span class="date">24/7/20</span><span class="badge badge-danger f-right">Argent</span>
|
|
<img class="mt-2 img-fluid" src="../assets/images/other-images/maintenance-bg.jpg" alt="" data-original-title="" title="">
|
|
<h6>Test Sidebar</h6>
|
|
<div class="media"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title="">
|
|
<div class="media-body">
|
|
<p>Themeforest, australia</p>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex mt-3">
|
|
<ul class="list">
|
|
<li><i class="fa fa-comments-o"></i>2</li>
|
|
<li><i class="fa fa-paperclip"></i>2</li>
|
|
<li><i class="fa fa-eye"></i></i></li>
|
|
</ul>
|
|
<div class="customers">
|
|
<ul>
|
|
<li class="d-inline-block me-3">
|
|
<p class="f-12">+5</p>
|
|
</li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
|
|
</ul>
|
|
</div>
|
|
</div></a>
|
|
`,
|
|
},
|
|
{
|
|
'title': `
|
|
<a class="kanban-box" href="#"><span class="date">24/7/20</span><span class="badge badge-danger f-right">Argent</span>
|
|
<h6>Test Sidebar</h6>
|
|
<div class="media"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title="">
|
|
<div class="media-body">
|
|
<p>Themeforest, australia</p>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex mt-3">
|
|
<ul class="list">
|
|
<li><i class="fa fa-comments-o"></i>2</li>
|
|
<li><i class="fa fa-paperclip"></i>2</li>
|
|
<li><i class="fa fa-eye"></i></i></li>
|
|
</ul>
|
|
<div class="customers">
|
|
<ul>
|
|
<li class="d-inline-block me-3">
|
|
<p class="f-12">+5</p>
|
|
</li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
|
|
</ul>
|
|
</div>
|
|
</div></a>
|
|
`,
|
|
},
|
|
]
|
|
},
|
|
{
|
|
'id': '_done',
|
|
'title': 'Done',
|
|
'class': 'success',
|
|
'item': [{
|
|
'title': `
|
|
<a class="kanban-box" href="#"><span class="date">24/7/20</span><span class="badge badge-danger f-right">Argent</span>
|
|
<h6>Test Sidebar</h6>
|
|
<div class="media"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title="">
|
|
<div class="media-body">
|
|
<p>Themeforest, australia</p>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex mt-3">
|
|
<ul class="list">
|
|
<li><i class="fa fa-comments-o"></i>2</li>
|
|
<li><i class="fa fa-paperclip"></i>2</li>
|
|
<li><i class="fa fa-eye"></i></i></li>
|
|
</ul>
|
|
<div class="customers">
|
|
<ul>
|
|
<li class="d-inline-block me-3">
|
|
<p class="f-12">+5</p>
|
|
</li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
|
|
</ul>
|
|
</div>
|
|
</div></a>
|
|
`,
|
|
},
|
|
{
|
|
'title': `
|
|
<a class="kanban-box" href="#"><span class="date">24/7/20</span><span class="badge badge-danger f-right">Argent</span>
|
|
<img class="mt-2 img-fluid" src="../assets/images/other-images/sidebar-bg.jpg" alt="" data-original-title="" title="">
|
|
<h6>Test Sidebar</h6>
|
|
<div class="media"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title="">
|
|
<div class="media-body">
|
|
<p>Themeforest, australia</p>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex mt-3">
|
|
<ul class="list">
|
|
<li><i class="fa fa-comments-o"></i>2</li>
|
|
<li><i class="fa fa-paperclip"></i>2</li>
|
|
<li><i class="fa fa-eye"></i></i></li>
|
|
</ul>
|
|
<div class="customers">
|
|
<ul>
|
|
<li class="d-inline-block me-3">
|
|
<p class="f-12">+5</p>
|
|
</li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
|
|
</ul>
|
|
</div>
|
|
</div></a>
|
|
`,
|
|
},
|
|
]
|
|
}
|
|
]
|
|
});
|
|
|
|
var toDoButton = document.getElementById('addToDo');
|
|
toDoButton.addEventListener('click', function () {
|
|
kanban3.addElement(
|
|
'_todo', {
|
|
'title': `
|
|
<a class="kanban-box" href="#"><span class="date">24/7/20</span><span class="badge badge-danger f-right">Argent</span>
|
|
<img class="mt-2 img-fluid" src="../assets/images/other-images/sidebar-bg.jpg" alt="" data-original-title="" title="">
|
|
<h6>Test Sidebar</h6>
|
|
<div class="media"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title="">
|
|
<div class="media-body">
|
|
<p>Themeforest, australia</p>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex mt-3">
|
|
<ul class="list">
|
|
<li><i class="fa fa-comments-o"></i>2</li>
|
|
<li><i class="fa fa-paperclip"></i>2</li>
|
|
<li><i class="fa fa-eye"></i></i></li>
|
|
</ul>
|
|
<div class="customers">
|
|
<ul>
|
|
<li class="d-inline-block me-3">
|
|
<p class="f-12">+5</p>
|
|
</li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
|
|
</ul>
|
|
</div>
|
|
</div></a>
|
|
`,
|
|
}
|
|
);
|
|
});
|
|
|
|
var addBoardDefault = document.getElementById('addDefault');
|
|
addBoardDefault.addEventListener('click', function () {
|
|
kanban3.addBoards(
|
|
[{
|
|
'id': '_default',
|
|
'title': 'Kanban Default',
|
|
'item': [{
|
|
'title': `
|
|
<a class="kanban-box" href="#"><span class="date">24/7/20</span><span class="badge badge-danger f-right">Argent</span>
|
|
<h6>Test Sidebar</h6>
|
|
<div class="media"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title="">
|
|
<div class="media-body">
|
|
<p>Themeforest, australia</p>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex mt-3">
|
|
<ul class="list">
|
|
<li><i class="fa fa-comments-o"></i>2</li>
|
|
<li><i class="fa fa-paperclip"></i>2</li>
|
|
<li><i class="fa fa-eye"></i></i></li>
|
|
</ul>
|
|
<div class="customers">
|
|
<ul>
|
|
<li class="d-inline-block me-3">
|
|
<p class="f-12">+5</p>
|
|
</li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
|
|
</ul>
|
|
</div>
|
|
</div></a>
|
|
`,
|
|
},
|
|
|
|
{
|
|
'title': `
|
|
<a class="kanban-box" href="#"><span class="date">24/7/20</span><span class="badge badge-danger f-right">Argent</span>
|
|
<img class="mt-2 img-fluid" src="../assets/images/other-images/maintenance-bg.jpg" alt="" data-original-title="" title="">
|
|
<h6>Test Sidebar</h6>
|
|
<div class="media"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title="">
|
|
<div class="media-body">
|
|
<p>Themeforest, australia</p>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex mt-3">
|
|
<ul class="list">
|
|
<li><i class="fa fa-comments-o"></i>2</li>
|
|
<li><i class="fa fa-paperclip"></i>2</li>
|
|
<li><i class="fa fa-eye"></i></i></li>
|
|
</ul>
|
|
<div class="customers">
|
|
<ul>
|
|
<li class="d-inline-block me-3">
|
|
<p class="f-12">+5</p>
|
|
</li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
|
|
<li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
|
|
</ul>
|
|
</div>
|
|
</div></a>
|
|
`,
|
|
}
|
|
]
|
|
}]
|
|
)
|
|
});
|
|
|
|
var removeBoard = document.getElementById('removeBoard');
|
|
removeBoard.addEventListener('click', function () {
|
|
kanban3.removeBoard('_done');
|
|
}); |