deno and tauri work and start

todo: fix deno that it displays page in /static
2024-12-23 14:06:31 -04:00
parent b9fe6f8882
commit 56cc15fef5
11 changed files with 284 additions and 67 deletions
--- a/frontend/static/index.html
+++ b/frontend/static/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Inventory</title>
+  <script type="module">
+    import { invoke } from 'https://cdn.jsdelivr.net/npm/@tauri-apps/api@latest/tauri.js';
+
+    document.getElementById('data-form').addEventListener('submit', async (e) => {
+      e.preventDefault();
+      const name = document.getElementById('name').value;
+      try {
+        await invoke('insert_data', { name });
+        console.log('Data inserted successfully'); // Debug print
+        fetchData();
+      } catch (error) {
+        console.error('Error inserting data:', error); // Print error
+      }
+    });
+
+    async function fetchData() {
+      try {
+        const data = await invoke('get_data');
+        const dataList = document.getElementById('data-list');
+        dataList.innerHTML = '';
+        data.forEach(item => {
+          const li = document.createElement('li');
+          li.textContent = item;
+          dataList.appendChild(li);
+        });
+      } catch (error) {
+        console.error('Error fetching data:', error); // Print error
+      }
+    }
+
+    fetchData();
+  </script>
+</head>
+<body>
+  <form id="data-form">
+    <input type="text" id="name" placeholder="Enter name" required>
+    <button type="submit">Submit</button>
+  </form>
+  <ul id="data-list"></ul>
+</body>
+</html>
--- a/frontend/static/main.js
+++ b/frontend/static/main.js
@@ -0,0 +1,30 @@
+// filepath: /home/smikkelbakje/Inventory/frontend/main.js
+
+document.getElementById('data-form').addEventListener('submit', async (e) => {
+  e.preventDefault();
+  const name = document.getElementById('name').value;
+  try {
+    await invoke('insert_data', { name });
+    console.log('Data inserted successfully'); // Debug print
+    fetchData();
+  } catch (error) {
+    console.error('Error inserting data:', error); // Print error
+  }
+});
+
+async function fetchData() {
+  try {
+    const data = await invoke('get_data');
+    const dataList = document.getElementById('data-list');
+    dataList.innerHTML = '';
+    data.forEach(item => {
+      const li = document.createElement('li');
+      li.textContent = item;
+      dataList.appendChild(li);
+    });
+  } catch (error) {
+    console.error('Error fetching data:', error); // Print error
+  }
+}
+
+fetchData();
--- a/frontend/static/style.css
+++ b/frontend/static/style.css
@@ -0,0 +1,10 @@
+body {
+    font-family: Arial, sans-serif;
+    text-align: center;
+    padding: 20px;
+}
+
+button {
+    padding: 10px 20px;
+    font-size: 16px;
+}