null/finfree-be
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

show db items in a table, and can create new items with form

Browse Source
This commit is contained in:
null
2024-02-17 13:40:47 +01:00
parent 8d4c29451e
commit 5f61ce8c45
6 changed files with 81 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/index.html
+19 -14
View File
@@ -10,6 +10,7 @@
<body>
<div class="container">
<h1>Conditions</h1>
<button onclick="openModal()">Add Item</button>
@@ -31,7 +32,7 @@
<div class="modal-content">
<span class="close" onclick="closeModal()">&times;</span>
<h2>Add Item</h2>
<form id="addItemForm">
<form id="addItemForm" method="POST" action="/conditions">
<label for="itemName">Name:</label><br>
<input type="text" id="itemName" name="itemName" required><br>
<label for="itemDescription">Description:</label><br>
@@ -43,11 +44,9 @@
<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' }
];
const data = `{{ data.conditions | tojson }}`;
const sampleData = JSON.parse(data)
// Function to populate the table with data
function populateTable(data) {
@@ -55,9 +54,9 @@
tableBody.innerHTML = '';
data.forEach(item => {
const row = `<tr>
<td>${item.id}</td>
<td>${item.name}</td>
<td>${item.description}</td>
<td title="${item.id}">${item.id.substr(0,6)}</td>
<td>${item.itemName}</td>
<td>${item.itemDescription}</td>
</tr>`;
tableBody.insertAdjacentHTML('beforeend', row);
});
@@ -76,11 +75,17 @@
// 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);
const form = event.target.closest('form');
const formData = new FormData(form);
const json = Array.from(formData.entries()).reduce((acc, [k, v]) => ({...acc, [k]: v}), {});
const xhr = new XMLHttpRequest();
xhr.open('POST', form.action, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = console.log
xhr.onerror = console.log
xhr.send(JSON.stringify(json));
closeModal();
});