root
/
tauri-workspace


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
							<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <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.innerHTML = typeof response === "string" ? response : JSON.stringify(response)
    }

    incrementBtn.addEventListener('click', () => {
      window.__TAURI__.invoke('increment_counter').then(updateResponse).catch(updateResponse)
    })

    storeBtn.addEventListener('click', () => {
      window.__TAURI__.invoke('db_insert', {
        key: KEY,
        value: storeInput.value
      }).then(updateResponse).catch(updateResponse)
    })

    readBtn.addEventListener('click', () => {
      window.__TAURI__.invoke('db_read', {
        key: KEY
      }).then(updateResponse).catch(updateResponse)
    })
  </script>
</body>

</html>