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

make generic delete item function, make create item generic. add delete buttons and indexes

Browse Source
This commit is contained in:
Zev B Averbach
2020-12-20 00:22:40 +01:00
parent 3fdc5a52a6
commit bdd9a2f3e6
2 changed files with 57 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
demo2.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 341 KiB

75
front/index.html
View File

@@ -4,24 +4,27 @@
<title>Twilio Sync Kanban</title> <title>Twilio Sync Kanban</title>
<meta charset="utf-8"> <meta charset="utf-8">
<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>
<style>
div { margin: .5em; }
span { padding: .5em; }
</style>
</head> </head>
<body> <body>
<form onsubmit="addTodo(event)"> <form onsubmit="addItem(event, 'todos')">
<input id="todo-input" type=text name=todo /> <input id="todo-input" type=text name=todos />
<input type=submit /> <input type=submit />
</form> </form>
<div id="todos"></div> <div id="todos"></div>
<script> <script>
let syncClient let syncClient, removeList, updateItem, deleteItem
const addTodo = async event => { const addItem = async (event, listName) => {
event.preventDefault() event.preventDefault()
newToDoField = event.target.elements.todo const newItemField = event.target.elements[listName]
const newTodo = newToDoField.value const newItem = newItemField.value
console.log(newTodo) newItemField.value = ''
newToDoField.value = '' const list = await syncClient.list(listName)
const todos = await syncClient.list('todos') list.push({name: newItem})
todos.push({name: newTodo})
} }
const setupTwilioClient = async () => { const setupTwilioClient = async () => {
@@ -40,21 +43,57 @@
console.log('Sync is live!') 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 todos = await syncClient.list('todos')
const items = await todos.getItems() const items = await todos.getItems()
const todosDiv = document.getElementById('todos') const todosDiv = document.getElementById('todos')
items.items.forEach(item => { items.items.forEach(item => {
const itemDiv = document.createElement('div') const { data } = item
itemDiv.className = "todo-item" const containerDiv = document.createElement('div')
itemDiv.innerText = item.data.value.name containerDiv.className = "todo-item"
todosDiv.appendChild(itemDiv) 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 => { todos.on('itemAdded', item => {
const itemDiv = document.createElement('div') const data = item.item.data
itemDiv.className = "todo-item" const containerDiv = document.createElement('div')
itemDiv.innerText = item.item.data.value.name containerDiv.className = "todo-item"
todosDiv.appendChild(itemDiv) 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()
}) })
} }