root
/
tauri-workspace


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
							<!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__
          .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>