tauri/examples/state/index.html

65 lines
1.7 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tauri</title>
</head>
<body>
<h3>Counter</h3>
<div>
<button id="increment-btn">Increment counter</button>
</div>
<h3>Database</h3>
<div>
<input id="store-input" placeholder="The value to store" />
<button id="store-btn">Store</button>
</div>
<div>
<button id="read-btn">Read</button>
</div>
<div id="response"></div>
<script>
const KEY = 'db-key'
const storeBtn = document.querySelector('#store-btn')
const readBtn = document.querySelector('#read-btn')
const incrementBtn = document.querySelector('#increment-btn')
const storeInput = document.querySelector('#store-input')
const responseContainer = document.querySelector('#response')
function updateResponse(response) {
responseContainer.innerText =
typeof response === 'string' ? response : JSON.stringify(response)
}
incrementBtn.addEventListener('click', () => {
window.__TAURI__.core
.invoke('increment_counter')
.then(updateResponse)
.catch(updateResponse)
})
storeBtn.addEventListener('click', () => {
window.__TAURI__.core
.invoke('db_insert', {
key: KEY,
value: storeInput.value
})
.then(updateResponse)
.catch(updateResponse)
})
readBtn.addEventListener('click', () => {
window.__TAURI__.core
.invoke('db_read', {
key: KEY
})
.then(updateResponse)
.catch(updateResponse)
})
</script>
</body>
</html>