betonski cegli lp

2025-04-17 12:00:14 +00:00
parent 52603a5d1a
commit 9b8c3902de
4 changed files with 141 additions and 7 deletions
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>Items CRUD App</title>
+  <style>
+    body { font-family: Arial; padding: 2rem; }
+    input, button { margin: 5px; padding: 0.5rem; }
+    ul { list-style-type: none; padding: 0; }
+    li { margin-bottom: 10px; }
+  </style>
+</head>
+<body>
+  <h1>Items List (CRUD)</h1>
+
+  <input type="text" id="name" placeholder="Item name" />
+  <input type="text" id="description" placeholder="Description" />
+  <button onclick="createItem()">Add Item</button>
+
+  <ul id="item-list"></ul>
+
+  <script>
+    const API_BASE = "http://localhost:8000/v1";
+
+    async function fetchItems() {
+      const res = await fetch(`${API_BASE}/items`);
+      const items = await res.json();
+      const list = document.getElementById("item-list");
+      list.innerHTML = "";
+      items.forEach(item => {
+        const li = document.createElement("li");
+        li.innerHTML = `
+          <strong>${item.name}</strong>: ${item.description} 
+          <button onclick="deleteItem(${item.id})">Delete</button>
+          <button onclick="editItem(${item.id}, '${item.name}', '${item.description}')">Edit</button>
+        `;
+        list.appendChild(li);
+      });
+    }
+
+    async function createItem() {
+      const name = document.getElementById("name").value;
+      const description = document.getElementById("description").value;
+      await fetch(`${API_BASE}/items/`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name, description })
+      });
+      document.getElementById("name").value = "";
+      document.getElementById("description").value = "";
+      fetchItems();
+    }
+
+    async function deleteItem(id) {
+      await fetch(`${API_BASE}/items/${id}`, { method: "DELETE" });
+      fetchItems();
+    }
+
+    function editItem(id, currentName, currentDesc) {
+      const newName = prompt("New name:", currentName);
+      const newDesc = prompt("New description:", currentDesc);
+      if (newName && newDesc) {
+        updateItem(id, newName, newDesc);
+      }
+    }
+
+    async function updateItem(id, name, description) {
+      await fetch(`${API_BASE}/items/${id}`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name, description })
+      });
+      fetchItems();
+    }
+
+    
+    fetchItems();
+  </script>
+</body>
+</html>