| Server IP : 150.95.80.236 / Your IP : 3.147.13.85 Web Server : Apache System : Linux host-150-95-80-236 3.10.0-1160.105.1.el7.x86_64 #1 SMP Thu Dec 7 15:39:45 UTC 2023 x86_64 User : social-telecare ( 10000) PHP Version : 7.4.33 Disable Function : opcache_get_status MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /var/www/vhosts/pcu.in.th/sc.pcu.in.th/demo15/src/js/custom/documentation/general/jkanban/ |
Upload File : |
"use strict";
// Class definition
var KTJKanbanDemoRich = function() {
// Private functions
var exampleRich = function() {
var kanban = new jKanban({
element: '#kt_docs_jkanban_rich',
gutter: '0',
click: function(el) {
alert(el.innerHTML);
},
boards: [{
'id': '_backlog',
'title': 'Backlog',
'class': 'light-dark',
'item': [{
'title': `
<div class="d-flex align-items-center">
<div class="symbol symbol-success me-3">
<img alt="Pic" src="${hostUrl}media/avatars/150-1.jpg" />
</div>
<div class="d-flex flex-column align-items-start">
<span class="text-dark-50 fw-bold mb-1">SEO Optimization</span>
<span class="badge badge-light-success">In progress</span>
</div>
</div>
`,
},
{
'title': `
<div class="d-flex align-items-center">
<div class="symbol symbol-success me-3">
<span class="symbol-label fs-4">A.D</span>
</div>
<div class="d-flex flex-column align-items-start">
<span class="text-dark-50 fw-bold mb-1">Finance</span>
<span class="badge badge-light-danger">Pending</span>
</div>
</div>
`,
}
]
},
{
'id': '_todo',
'title': 'To Do',
'class': 'light-danger',
'item': [{
'title': `
<div class="d-flex align-items-center">
<div class="symbol symbol-success me-3">
<img alt="Pic" src="${hostUrl}media/avatars/150-2.jpg" />
</div>
<div class="d-flex flex-column align-items-start">
<span class="text-dark-50 fw-bold mb-1">Server Setup</span>
<span class="badge badge-light-info">Completed</span>
</div>
</div>
`,
},
{
'title': `
<div class="d-flex align-items-center">
<div class="symbol symbol-success me-3">
<img alt="Pic" src="${hostUrl}media/avatars/150-3.jpg" />
</div>
<div class="d-flex flex-column align-items-start">
<span class="text-dark-50 fw-bold mb-1">Report Generation</span>
<span class="badge badge-light-warning">Due</span>
</div>
</div>
`,
}
]
},
{
'id': '_working',
'title': 'Working',
'class': 'light-primary',
'item': [{
'title': `
<div class="d-flex align-items-center">
<div class="symbol symbol-success me-3">
<img alt="Pic" src="${hostUrl}media/avatars/150-1.jpg" />
</div>
<div class="d-flex flex-column align-items-start">
<span class="text-dark-50 fw-bold mb-1">Marketing</span>
<span class="badge badge-light-danger">Planning</span>
</div>
</div>
`,
},
{
'title': `
<div class="d-flex align-items-center">
<div class="symbol symbol-light-info me-3">
<span class="symbol-label fs-4">A.P</span>
</div>
<div class="d-flex flex-column align-items-start">
<span class="text-dark-50 fw-bold mb-1">Finance</span>
<span class="badge badge-light-primary">Done</span>
</div>
</div>
`,
}
]
},
{
'id': '_done',
'title': 'Done',
'class': 'light-success',
'item': [{
'title': `
<div class="d-flex align-items-center">
<div class="symbol symbol-success me-3">
<img alt="Pic" src="${hostUrl}media/avatars/150-4.jpg" />
</div>
<div class="d-flex flex-column align-items-start">
<span class="text-dark-50 fw-bold mb-1">SEO Optimization</span>
<span class="badge badge-light-success">In progress</span>
</div>
</div>
`,
},
{
'title': `
<div class="d-flex align-items-center">
<div class="symbol symbol-success me-3">
<img alt="Pic" src="${hostUrl}media/avatars/150-5.jpg" />
</div>
<div class="d-flex flex-column align-items-start">
<span class="text-dark-50 fw-bold mb-1">Product Team</span>
<span class="badge badge-light-danger">In progress</span>
</div>
</div>
`,
}
]
},
{
'id': '_deploy',
'title': 'Deploy',
'class': 'light-primary',
'item': [{
'title': `
<div class="d-flex align-items-center">
<div class="symbol symbol-light-warning me-3">
<span class="symbol-label fs-4">D.L</span>
</div>
<div class="d-flex flex-column align-items-start">
<span class="text-dark-50 fw-bold mb-1">SEO Optimization</span>
<span class="badge badge-light-success">In progress</span>
</div>
</div>
`,
},
{
'title': `
<div class="d-flex align-items-center">
<div class="symbol symbol-light-danger me-3">
<span class="symbol-label fs-4">E.K</span>
</div>
<div class="d-flex flex-column align-items-start">
<span class="text-dark-50 fw-bold mb-1">Requirement Study</span>
<span class="badge badge-light-warning">Scheduled</span>
</div>
</div>
`,
}
]
}
]
});
var toDoButton = document.getElementById('addToDo');
toDoButton.addEventListener('click', function() {
kanban.addElement(
'_todo', {
'title': `
<div class="d-flex align-items-center">
<div class="symbol symbol-light-primary me-3">
<img alt="Pic" src="${hostUrl}media/avatars/150-6.jpg" />
</div>
<div class="d-flex flex-column align-items-start">
<span class="text-dark-50 fw-bold mb-1">Requirement Study</span>
<span class="badge badge-light-success">Scheduled</span>
</div>
</div>
`
}
);
});
var addBoardDefault = document.getElementById('addDefault');
addBoardDefault.addEventListener('click', function() {
kanban.addBoards(
[{
'id': '_default',
'title': 'New Board',
'class': 'light-primary',
'item': [{
'title': `
<div class="d-flex align-items-center">
<div class="symbol symbol-success me-3">
<img alt="Pic" src="${hostUrl}media/avatars/150-7.jpg" />
</div>
<div class="d-flex flex-column align-items-start">
<span class="text-dark-50 fw-bold mb-1">Payment Modules</span>
<span class="badge badge-light-primary">In development</span>
</div>
</div>
`},{
'title': `
<div class="d-flex align-items-center">
<div class="symbol symbol-success me-3">
<img alt="Pic" src="${hostUrl}media/avatars/150-8.jpg" />
</div>
<div class="d-flex flex-column align-items-start">
<span class="text-dark-50 fw-bold mb-1">New Project</span>
<span class="badge badge-light-danger">Pending</span>
</div>
</div>
`}
]
}]
)
});
var removeBoard = document.getElementById('removeBoard');
removeBoard.addEventListener('click', function() {
kanban.removeBoard('_done');
});
}
return {
// Public Functions
init: function() {
exampleRich();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTJKanbanDemoRich.init();
});