add simple input form

2024-02-17 11:19:10 +01:00
parent 17b3c46960
commit 8d4c29451e
5 changed files with 195 additions and 3 deletions
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Paper-Like Website</title>
+  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/styles.css') }}">
+</head>
+
+<body>
+
+  <div class="container">
+    <h1>Conditions</h1>
+    <button onclick="openModal()">Add Item</button>
+    <table id="dataTable">
+      <thead>
+        <tr>
+          <th>ID</th>
+          <th>Name</th>
+          <th>Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        <!-- Data will be inserted here dynamically -->
+      </tbody>
+    </table>
+  </div>
+
+  <div id="myModal" class="modal">
+    <div class="modal-content">
+      <span class="close" onclick="closeModal()">&times;</span>
+      <h2>Add Item</h2>
+      <form id="addItemForm">
+        <label for="itemName">Name:</label><br>
+        <input type="text" id="itemName" name="itemName" required><br>
+        <label for="itemDescription">Description:</label><br>
+        <textarea id="itemDescription" name="itemDescription" required></textarea><br><br>
+        <button type="submit">Submit</button>
+      </form>
+    </div>
+  </div>
+
+  <script>
+    // Sample data to populate the table
+    const sampleData = [
+      { id: 1, name: 'Item 1', description: 'Description for Item 1' },
+      { id: 2, name: 'Item 2', description: 'Description for Item 2' },
+      { id: 3, name: 'Item 3', description: 'Description for Item 3' }
+    ];
+
+    // Function to populate the table with data
+    function populateTable(data) {
+      const tableBody = document.querySelector('#dataTable tbody');
+      tableBody.innerHTML = '';
+      data.forEach(item => {
+        const row = `<tr>
+        <td>${item.id}</td>
+        <td>${item.name}</td>
+        <td>${item.description}</td>
+      </tr>`;
+        tableBody.insertAdjacentHTML('beforeend', row);
+      });
+    }
+
+    // Open modal function
+    function openModal() {
+      document.getElementById('myModal').style.display = 'block';
+    }
+
+    // Close modal function
+    function closeModal() {
+      document.getElementById('myModal').style.display = 'none';
+    }
+
+    // Handle form submission
+    document.getElementById('addItemForm').addEventListener('submit', function (event) {
+      event.preventDefault();
+      const itemName = document.getElementById('itemName').value;
+      const itemDescription = document.getElementById('itemDescription').value;
+      // Here you would typically send this data to the backend
+      // For simplicity, let's just log it for now
+      console.log('Submitted:', itemName, itemDescription);
+      closeModal();
+    });
+
+    // Initially populate the table with sample data
+    populateTable(sampleData);
+  </script>
+
+</body>
+
+</html>