140 lines
6.1 KiB
HTML
140 lines
6.1 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>Twilio Sync Kanban</title>
|
|
<meta charset="utf-8">
|
|
<script src="https://media.twiliocdn.com/sdk/js/sync/v0.8/twilio-sync.min.js"></script>
|
|
<script src="jkanban.min.js"></script>
|
|
<link rel="stylesheet" href="jkanban.min.css">
|
|
<style>
|
|
form { margin: 1em; }
|
|
span { padding: .5em; }
|
|
[data-class=card]:hover { cursor: grab }
|
|
.dragging { cursor: grabbing !important }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<form onsubmit="addItem(event)">
|
|
<input id="todo-input" type=text name=todos />
|
|
<input type=submit />
|
|
</form>
|
|
<div id="kanban-container"></div>
|
|
<script>
|
|
let syncClient, removeList, updateItem, deleteItem, list
|
|
|
|
const board = new jKanban({
|
|
element: "#kanban-container",
|
|
gutter: "10px",
|
|
widthBoard: "350px",
|
|
dragBoards: false,
|
|
boards: [
|
|
{
|
|
"id": "todo",
|
|
"title" : "todo",
|
|
},
|
|
{
|
|
"id": "doing",
|
|
"title" : "doing",
|
|
},
|
|
{
|
|
"id": "done",
|
|
"title" : "done",
|
|
},
|
|
],
|
|
dropEl: async (el, target, source) => {
|
|
const sourceId = source.parentElement.dataset.id
|
|
const targetId = target.parentElement.dataset.id
|
|
if (sourceId === targetId) {
|
|
return
|
|
}
|
|
const itemId = el.dataset.eid
|
|
const name = el.innerText
|
|
updateItem(itemId, {name, list: targetId})
|
|
}
|
|
})
|
|
|
|
updateItem = async (uid, value) => list.set(uid, value)
|
|
deleteItem = async index => list.remove(index)
|
|
|
|
const addItem = async event => {
|
|
event.preventDefault()
|
|
const newItemField = event.target.elements.todos
|
|
const newItem = newItemField.value
|
|
newItemField.value = ''
|
|
list.push({name: newItem, list: 'todo'})
|
|
}
|
|
|
|
const setupTwilioClient = async () => {
|
|
try {
|
|
// note: You will probably have to change the IP address here to your machine's IP.
|
|
// here's a guide for that: https://www.avast.com/c-how-to-find-ip-address
|
|
const response = await fetch('http://192.168.178.25:5001/token')
|
|
const responseJson = await response.json()
|
|
const token = responseJson.token
|
|
syncClient = new Twilio.Sync.Client(token, { logLevel: 'info' })
|
|
} catch (e) {
|
|
console.log(e)
|
|
}
|
|
syncClient.on('connectionStateChanged', state => {
|
|
if (state != 'connected') {
|
|
console.log(`Sync is not live (websocket connection ${state})`)
|
|
} else {
|
|
console.log('Sync is live!')
|
|
}
|
|
})
|
|
|
|
list = await syncClient.list('todos')
|
|
|
|
const items = await list.getItems()
|
|
items.items.forEach(item => {
|
|
const { data } = item
|
|
board.addElement(data.value.list, {
|
|
id: data.index,
|
|
title: (
|
|
`<span>${data.value.name}</span>`
|
|
+ `<svg onclick="deleteItem(${data.index})" xmlns="http://www.w3.org/2000/svg" height=15 width=15 style="cursor: pointer; vertical-align: top;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
|
</svg>`
|
|
),
|
|
class: "card",
|
|
drag: el => el.classList.add('dragging'),
|
|
dragend: el => el.classList.remove('dragging'),
|
|
})
|
|
})
|
|
|
|
list.on('itemAdded', item => {
|
|
const data = item.item.data
|
|
board.addElement(data.value.list, {
|
|
id: data.index,
|
|
title: (
|
|
`<span>${data.value.name}</span>`
|
|
+ `<svg onclick="deleteItem(${data.index})" xmlns="http://www.w3.org/2000/svg" height=15 width=15 style="cursor: pointer; vertical-align: top;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
|
</svg>`
|
|
),
|
|
class: "card",
|
|
drag: el => el.classList.add('dragging'),
|
|
dragend: el => el.classList.remove('dragging'),
|
|
})
|
|
})
|
|
|
|
list.on('itemUpdated', ({ item }) => {
|
|
const id = item.index.toString()
|
|
const element = board.findElement(id)
|
|
board.removeElement(id)
|
|
board.addElement(item.value.list, {id,
|
|
'title': element.innerHTML,
|
|
class: "card",
|
|
drag: el => el.classList.add('dragging'),
|
|
dragend: el => el.classList.remove('dragging'),
|
|
})
|
|
})
|
|
|
|
list.on('itemRemoved', ({index}) => board.removeElement(index.toString()))
|
|
}
|
|
|
|
window.onload = setupTwilioClient()
|
|
</script>
|
|
</body>
|
|
</html>
|