<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fossil Kanban Skin 2</title>
<link rel="stylesheet" href="./jkanban/jkanban.min.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css">
<style>
body {
font-family: "Lato";
margin: 0;
padding: 0;
}
#myKanban {
overflow-x: auto;
padding: 20px 0;
}
.success {
background: #00B961;
}
.info {
background: #2A92BF;
}
.warning {
background: #F4CE46;
}
.error {
background: #FB7D44;
}
</style>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.3.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.colVis.min.js"></script>
<div class="logo">
<a href="http://localhost:8080">
<img src="http://localhost:8080/logo" border="0" alt="">
</a>
</div>
<div id="myKanban"></div>
<button id="addDefault">Add "Default" board</button><br>
<button id="addToDo">Add element in "To Do" Board</button><br>
<button id="removeBoard">Remove "Done" Board</button><br>
<button id="removeElement">Remove "My Task Test"</button>
<h1> Tickets:</h1>
<table id="tickettable" class="display" width="100%"></table>
<div id="rptview"></div>
<script src="./jkanban/jkanban.min.js"></script>
<script>
//https://github.com/riktar/jkanban
var KanbanTest = new jKanban({
element: '#myKanban',
gutter: '10px',
widthBoard: '300px',
click: function (el) {
console.log("Trigger on all items click! " + el );
},
buttonClick: function (el, boardId) {
console.log(el);
console.log(boardId);
// create a form to enter element
var formItem = document.createElement('form');
formItem.setAttribute("class", "itemform");
formItem.innerHTML = '<div class="form-group"><textarea class="form-control" rows="2" autofocus></textarea></div><div class="form-group"><button type="submit" class="btn btn-primary btn-xs pull-right">Submit</button><button type="button" id="CancelBtn" class="btn btn-default btn-xs pull-right">Cancel</button></div>'
KanbanTest.addForm(boardId, formItem);
formItem.addEventListener("submit", function (e) {
e.preventDefault();
var text = e.target[0].value
KanbanTest.addElement(boardId, {
"title": text,
})
formItem.parentNode.removeChild(formItem);
});
document.getElementById('CancelBtn').onclick = function () {
formItem.parentNode.removeChild(formItem)
}
},
addItemButton: false,
boards: [
{
"id": "_todo",
"title": "To Do (Can drop item only in working)",
"class": "info,good",
"dragTo": ['_working'],
"item": [
{
"id": "_test_delete",
"title": "Try drag this (Look the console)",
"drag": function (el, source) {
console.log("START DRAG: " + el.dataset.eid);
},
"dragend": function (el) {
console.log("END DRAG: " + el.dataset.eid);
},
"drop": function(el){
console.log('DROPPED: ' + el.dataset.eid )
}
},
{
"title": "Try Click This!",
"click": function (el) {
alert("click");
},
}
]
},
{
"id": "_working",
"title": "Working (Try drag me too)",
"class": "warning",
"item": [
{
"title": "Do Something!",
},
{
"title": "Run?",
}
]
},
{
"id": "_done",
"title": "Done (Can drop item only in working)",
"class": "success",
"dragTo": ['_working'],
"item": [
{
"title": "All right",
},
{
"title": "Ok!",
}
]
}
]
});
var toDoButton = document.getElementById('addToDo');
toDoButton.addEventListener('click', function () {
KanbanTest.addElement(
"_todo",
{
"title": "Test Add",
}
);
});
var addBoardDefault = document.getElementById('addDefault');
addBoardDefault.addEventListener('click', function () {
KanbanTest.addBoards(
[{
"id": "_default",
"title": "Kanban Default",
"item": [
{
"title": "Default Item",
},
{
"title": "Default Item 2",
},
{
"title": "Default Item 3",
}
]
}]
)
});
var removeBoard = document.getElementById('removeBoard');
removeBoard.addEventListener('click', function () {
KanbanTest.removeBoard('_done');
});
var removeElement = document.getElementById('removeElement');
removeElement.addEventListener('click', function () {
KanbanTest.removeElement('_test_delete');
});
var allEle = KanbanTest.getBoardElements('_todo');
allEle.forEach(function (item, index) {
//console.log(item);
});
const url = 'http://localhost:8080/rptview?tablist=1&rn=2';
var rt;
fetch(url)
.then(function(response) { return response.text() })
.then(function(text) {
var someElem = document.querySelector( '#rptview' );
someElem.innerHTML = "<pre>" + text + "</pre>";
})
.catch(function(error) {
console.log("ERROR" + error);
// If there is any error you will catch them here
});
} );
</script>
</body>
</html>