47 lines
1.7 KiB
HTML
47 lines
1.7 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>
|
|
<div id="todos"></div>
|
|
<script>
|
|
let syncClient
|
|
|
|
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 list = await syncClient.list('todos')
|
|
// await list.push({name: 'buy milk'})
|
|
// await list.push({name: 'write blog post'})
|
|
const items = await list.getItems()
|
|
console.log(items)
|
|
const listDiv = document.getElementById('todos')
|
|
items.items.forEach(item => {
|
|
const itemDiv = document.createElement('div')
|
|
itemDiv.className = "todo-item"
|
|
itemDiv.innerText = item.data.value.name
|
|
listDiv.appendChild(itemDiv)
|
|
})
|
|
}
|
|
|
|
window.onload = setupTwilioClient()
|
|
</script>
|
|
</body>
|
|
</html>
|