104 lines
4.2 KiB
HTML
104 lines
4.2 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>
|
|
<style>
|
|
div { margin: .5em; }
|
|
span { padding: .5em; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<form onsubmit="addItem(event, 'todos')">
|
|
<input id="todo-input" type=text name=todos />
|
|
<input type=submit />
|
|
</form>
|
|
<div id="todos"></div>
|
|
<script>
|
|
let syncClient, removeList, updateItem, deleteItem
|
|
|
|
const addItem = async (event, listName) => {
|
|
event.preventDefault()
|
|
const newItemField = event.target.elements[listName]
|
|
const newItem = newItemField.value
|
|
newItemField.value = ''
|
|
const list = await syncClient.list(listName)
|
|
list.push({name: newItem})
|
|
}
|
|
|
|
const setupTwilioClient = async () => {
|
|
try {
|
|
const response = await fetch('http://localhost: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!')
|
|
}
|
|
})
|
|
|
|
removeList = async listName => {
|
|
const list = await syncClient.list(listName)
|
|
return list.removeList()
|
|
}
|
|
|
|
deleteItem = async (listName, index) => {
|
|
const list = await syncClient.list(listName)
|
|
list.remove(index)
|
|
}
|
|
|
|
const todos = await syncClient.list('todos')
|
|
const items = await todos.getItems()
|
|
const todosDiv = document.getElementById('todos')
|
|
items.items.forEach(item => {
|
|
const { data } = item
|
|
const containerDiv = document.createElement('div')
|
|
containerDiv.className = "todo-item"
|
|
containerDiv.dataset.index = data.index
|
|
const itemSpan = document.createElement('span')
|
|
itemSpan.innerText = data.value.name
|
|
containerDiv.appendChild(itemSpan)
|
|
|
|
const deleteButton = document.createElement('button')
|
|
deleteButton.innerText = "delete"
|
|
deleteButton.addEventListener('click', () => deleteItem('todos', data.index))
|
|
containerDiv.appendChild(deleteButton)
|
|
|
|
todosDiv.appendChild(containerDiv)
|
|
})
|
|
|
|
todos.on('itemAdded', item => {
|
|
const data = item.item.data
|
|
const containerDiv = document.createElement('div')
|
|
containerDiv.className = "todo-item"
|
|
containerDiv.dataset.index = data.index
|
|
const itemSpan = document.createElement('span')
|
|
itemSpan.innerText = data.value.name
|
|
containerDiv.appendChild(itemSpan)
|
|
|
|
const deleteButton = document.createElement('button')
|
|
deleteButton.innerText = "delete"
|
|
deleteButton.addEventListener('click', () => deleteItem('todos', data.index))
|
|
containerDiv.appendChild(deleteButton)
|
|
|
|
todosDiv.appendChild(containerDiv)
|
|
})
|
|
|
|
todos.on('itemRemoved', item => {
|
|
const itemDiv = document.querySelector(`.todo-item[data-index="${item.index}"`)
|
|
itemDiv.remove()
|
|
})
|
|
}
|
|
|
|
window.onload = setupTwilioClient()
|
|
</script>
|
|
</body>
|
|
</html>
|