zev/twilio-sync-kanban
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add todos is working

Browse Source
This commit is contained in:
Zev B Averbach
2020-12-19 23:23:06 +01:00
parent 6f636f1061
commit 3fdc5a52a6
2 changed files with 25 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
demo.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 302 KiB

32
front/index.html
View File

@@ -6,10 +6,24 @@
<script src="https://media.twiliocdn.com/sdk/js/sync/v0.8/twilio-sync.min.js"></script> <script src="https://media.twiliocdn.com/sdk/js/sync/v0.8/twilio-sync.min.js"></script>
</head> </head>
<body> <body>
<form onsubmit="addTodo(event)">
<input id="todo-input" type=text name=todo />
<input type=submit />
</form>
<div id="todos"></div> <div id="todos"></div>
<script> <script>
let syncClient 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 () => { const setupTwilioClient = async () => {
try { try {
const response = await fetch('http://localhost:5001/token') const response = await fetch('http://localhost:5001/token')
@@ -26,17 +40,21 @@
console.log('Sync is live!') console.log('Sync is live!')
} }
}) })
const list = await syncClient.list('todos') const todos = await syncClient.list('todos')
// await list.push({name: 'buy milk'}) const items = await todos.getItems()
// await list.push({name: 'write blog post'}) const todosDiv = document.getElementById('todos')
const items = await list.getItems()
console.log(items)
const listDiv = document.getElementById('todos')
items.items.forEach(item => { items.items.forEach(item => {
const itemDiv = document.createElement('div') const itemDiv = document.createElement('div')
itemDiv.className = "todo-item" itemDiv.className = "todo-item"
itemDiv.innerText = item.data.value.name itemDiv.innerText = item.data.value.name
listDiv.appendChild(itemDiv) 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)
}) })
} }