making it work but it's sort of a mess
This commit is contained in:
Arjun Patel
@@ -0,0 +1,57 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTJKanbanDemoBasic = function() {
|
||||
// Private functions
|
||||
var exampleBasic = function() {
|
||||
var kanban = new jKanban({
|
||||
element: '#kt_docs_jkanban_basic',
|
||||
gutter: '0',
|
||||
widthBoard: '250px',
|
||||
boards: [{
|
||||
'id': '_inprocess',
|
||||
'title': 'In Process',
|
||||
'item': [{
|
||||
'title': '<span class="fw-bold">You can drag me too</span>'
|
||||
},
|
||||
{
|
||||
'title': '<span class="fw-bold">Buy Milk</span>'
|
||||
}
|
||||
]
|
||||
}, {
|
||||
'id': '_working',
|
||||
'title': 'Working',
|
||||
'item': [{
|
||||
'title': '<span class="fw-bold">Do Something!</span>'
|
||||
},
|
||||
{
|
||||
'title': '<span class="fw-bold">Run?</span>'
|
||||
}
|
||||
]
|
||||
}, {
|
||||
'id': '_done',
|
||||
'title': 'Done',
|
||||
'item': [{
|
||||
'title': '<span class="fw-bold">All right</span>'
|
||||
},
|
||||
{
|
||||
'title': '<span class="fw-bold">Ok!</span>'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
// Public Functions
|
||||
init: function() {
|
||||
exampleBasic();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function() {
|
||||
KTJKanbanDemoBasic.init();
|
||||
});
|
||||
@@ -0,0 +1,66 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTJKanbanDemoColor = function() {
|
||||
// Private functions
|
||||
var exampleColor = function() {
|
||||
var kanban = new jKanban({
|
||||
element: '#kt_docs_jkanban_color',
|
||||
gutter: '0',
|
||||
widthBoard: '250px',
|
||||
boards: [{
|
||||
'id': '_inprocess',
|
||||
'title': 'In Process',
|
||||
'class': 'primary',
|
||||
'item': [{
|
||||
'title': '<span class="fw-bold">You can drag me too</span>',
|
||||
'class': 'light-primary',
|
||||
},
|
||||
{
|
||||
'title': '<span class="fw-bold">Buy Milk</span>',
|
||||
'class': 'light-primary',
|
||||
}
|
||||
]
|
||||
}, {
|
||||
'id': '_working',
|
||||
'title': 'Working',
|
||||
'class': 'success',
|
||||
'item': [{
|
||||
'title': '<span class="fw-bold">Do Something!</span>',
|
||||
'class': 'light-success',
|
||||
},
|
||||
{
|
||||
'title': '<span class="fw-bold">Run?</span>',
|
||||
'class': 'light-success',
|
||||
}
|
||||
]
|
||||
}, {
|
||||
'id': '_done',
|
||||
'title': 'Done',
|
||||
'class': 'danger',
|
||||
'item': [{
|
||||
'title': '<span class="fw-bold">All right</span>',
|
||||
'class': 'light-danger',
|
||||
},
|
||||
{
|
||||
'title': '<span class="fw-bold">Ok!</span>',
|
||||
'class': 'light-danger',
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
// Public Functions
|
||||
init: function() {
|
||||
exampleColor();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function() {
|
||||
KTJKanbanDemoColor.init();
|
||||
});
|
||||
@@ -0,0 +1,87 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTJKanbanDemoRestricted = function() {
|
||||
// Private functions
|
||||
var exampleRestricted = function() {
|
||||
var kanban = new jKanban({
|
||||
element: '#kt_docs_jkanban_restricted',
|
||||
gutter: '0',
|
||||
widthBoard: '250px',
|
||||
click: function(el) {
|
||||
alert(el.innerHTML);
|
||||
},
|
||||
boards: [{
|
||||
'id': '_todo',
|
||||
'title': 'To Do',
|
||||
'class': 'light-primary',
|
||||
'dragTo': ['_working'],
|
||||
'item': [{
|
||||
'title': 'My Task Test',
|
||||
'class': 'primary'
|
||||
},
|
||||
{
|
||||
'title': 'Buy Milk',
|
||||
'class': 'primary'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
'id': '_working',
|
||||
'title': 'Working',
|
||||
'class': 'light-warning',
|
||||
'item': [{
|
||||
'title': 'Do Something!',
|
||||
'class': 'warning'
|
||||
},
|
||||
{
|
||||
'title': 'Run?',
|
||||
'class': 'warning'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
'id': '_done',
|
||||
'title': 'Done',
|
||||
'class': 'light-success',
|
||||
'dragTo': ['_working'],
|
||||
'item': [{
|
||||
'title': 'All right',
|
||||
'class': 'success'
|
||||
},
|
||||
{
|
||||
'title': 'Ok!',
|
||||
'class': 'success'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
'id': '_notes',
|
||||
'title': 'Notes',
|
||||
'class': 'light-danger',
|
||||
'item': [{
|
||||
'title': 'Warning Task',
|
||||
'class': 'danger'
|
||||
},
|
||||
{
|
||||
'title': 'Do not enter',
|
||||
'class': 'danger'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
// Public Functions
|
||||
init: function() {
|
||||
exampleRestricted();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function() {
|
||||
KTJKanbanDemoRestricted.init();
|
||||
});
|
||||
@@ -0,0 +1,247 @@
|
||||
"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();
|
||||
});
|
||||
Reference in New Issue
Block a user