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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
__pycache__

15
app.py
View File

@ -1,10 +1,21 @@
from flask import Flask, render_template from flask import Flask, render_template, jsonify
from rethinkdb import RethinkDB
from routes.conditions import create_conditions_routes
app = Flask(__name__) app = Flask(__name__)
# Connect to RethinkDB
r = RethinkDB()
conn = r.connect('alice', 40002, db='finfree')
create_conditions_routes(app, r, conn)
@app.route('/') @app.route('/')
def index(): def index():
return render_template('index.html') cursor = r.table("conditions").run(conn)
conditions = list(cursor)
return render_template('index.html', data={"conditions": conditions})
if __name__ == '__main__': if __name__ == '__main__':
app.run(host='0.0.0.0', port=8080) app.run(host='0.0.0.0', port=8080)

1
requirements.txt
View File

@ -1 +1,2 @@
flask flask
rethinkdb

0
routes/__init__.py Normal file
View File

47
routes/conditions.py Normal file
View File

@ -0,0 +1,47 @@
from flask import jsonify, request
import rethinkdb as r
table_name = 'conditions'
route = table_name
def create_conditions_routes(app, r, conn):
# Create a table (if not exists)
if table_name not in r.table_list().run(conn):
r.table_create(table_name).run(conn)
# Routes for CRUD operations
# Create operation
@app.route('/' + route, methods=['POST'])
def create_condition():
if request.headers['Content-Type'] == 'application/json':
data = request.json
else: # Assuming form data is in 'application/x-www-form-urlencoded' format
data = request.form.to_dict()
result = r.table(table_name).insert(data).run(conn)
return jsonify({'id': result['generated_keys'][0]}), 201
# Read operation
@app.route('/' + route, methods=['GET'])
def get_conditions():
cursor = r.table(table_name).run(conn)
conditions = list(cursor)
return jsonify(conditions)
@app.route('/' + route + '/<id>', methods=['GET'])
def get_condition(id):
condition = r.table(table_name).get(id).run(conn)
return jsonify(condition)
# Update operation
@app.route('/' + route + '/<id>', methods=['PUT'])
def update_condition(id):
data = request.get_json()
r.table(table_name).get(id).update(data).run(conn)
return jsonify({'message': 'condition updated successfully'})
# Delete operation
@app.route('/' + route + '/<id>', methods=['DELETE'])
def delete_condition(id):
r.table(table_name).get(id).delete().run(conn)
return jsonify({'message': 'condition deleted successfully'})

33
templates/index.html
View File

@ -10,6 +10,7 @@
<body> <body>
<div class="container"> <div class="container">
<h1>Conditions</h1> <h1>Conditions</h1>
<button onclick="openModal()">Add Item</button> <button onclick="openModal()">Add Item</button>
@ -31,7 +32,7 @@
<div class="modal-content"> <div class="modal-content">
<span class="close" onclick="closeModal()">&times;</span> <span class="close" onclick="closeModal()">&times;</span>
<h2>Add Item</h2> <h2>Add Item</h2>
<form id="addItemForm"> <form id="addItemForm" method="POST" action="/conditions">
<label for="itemName">Name:</label><br> <label for="itemName">Name:</label><br>
<input type="text" id="itemName" name="itemName" required><br> <input type="text" id="itemName" name="itemName" required><br>
<label for="itemDescription">Description:</label><br> <label for="itemDescription">Description:</label><br>
@ -43,11 +44,9 @@
<script> <script>
// Sample data to populate the table // Sample data to populate the table
const sampleData = [ const data = `{{ data.conditions | tojson }}`;
{ id: 1, name: 'Item 1', description: 'Description for Item 1' }, const sampleData = JSON.parse(data)
{ 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 to populate the table with data
function populateTable(data) { function populateTable(data) {
@ -55,9 +54,9 @@
tableBody.innerHTML = ''; tableBody.innerHTML = '';
data.forEach(item => { data.forEach(item => {
const row = `<tr> const row = `<tr>
<td>${item.id}</td> <td title="${item.id}">${item.id.substr(0,6)}</td>
<td>${item.name}</td> <td>${item.itemName}</td>
<td>${item.description}</td> <td>${item.itemDescription}</td>
</tr>`; </tr>`;
tableBody.insertAdjacentHTML('beforeend', row); tableBody.insertAdjacentHTML('beforeend', row);
}); });
@ -76,11 +75,17 @@
// Handle form submission // Handle form submission
document.getElementById('addItemForm').addEventListener('submit', function (event) { document.getElementById('addItemForm').addEventListener('submit', function (event) {
event.preventDefault(); event.preventDefault();
const itemName = document.getElementById('itemName').value; const form = event.target.closest('form');
const itemDescription = document.getElementById('itemDescription').value; const formData = new FormData(form);
// Here you would typically send this data to the backend const json = Array.from(formData.entries()).reduce((acc, [k, v]) => ({...acc, [k]: v}), {});
// For simplicity, let's just log it for now
console.log('Submitted:', itemName, itemDescription); 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(); closeModal();
}); });