65 lines
2.4 KiB
HTML
65 lines
2.4 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>
|
|
</head>
|
|
<body>
|
|
<form onsubmit="addTodo(event)">
|
|
<input id="todo-input" type=text name=todo />
|
|
<input type=submit />
|
|
</form>
|
|
<div id="todos"></div>
|
|
<script>
|
|
let syncClient
|
|
|
|
const addTodo = async event => {
|
|
event.preventDefault()
|
|
newToDoField = event.target.elements.todo
|
|
const newTodo = newToDoField.value
|
|
console.log(newTodo)
|
|
newToDoField.value = ''
|
|
const todos = await syncClient.list('todos')
|
|
todos.push({name: newTodo})
|
|
}
|
|
|
|
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!')
|
|
}
|
|
})
|
|
const todos = await syncClient.list('todos')
|
|
const items = await todos.getItems()
|
|
const todosDiv = document.getElementById('todos')
|
|
items.items.forEach(item => {
|
|
const itemDiv = document.createElement('div')
|
|
itemDiv.className = "todo-item"
|
|
itemDiv.innerText = item.data.value.name
|
|
todosDiv.appendChild(itemDiv)
|
|
})
|
|
|
|
todos.on('itemAdded', item => {
|
|
const itemDiv = document.createElement('div')
|
|
itemDiv.className = "todo-item"
|
|
itemDiv.innerText = item.item.data.value.name
|
|
todosDiv.appendChild(itemDiv)
|
|
})
|
|
}
|
|
|
|
window.onload = setupTwilioClient()
|
|
</script>
|
|
</body>
|
|
</html>
|