show db items in a table, and can create new items with form
This commit is contained in:
null
parent
8d4c29451e
commit
5f61ce8c45
|
|
@ -0,0 +1 @@
|
|||
__pycache__
|
||||
15
app.py
15
app.py
|
|
@ -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__)
|
||||
|
||||
# Connect to RethinkDB
|
||||
r = RethinkDB()
|
||||
conn = r.connect('alice', 40002, db='finfree')
|
||||
|
||||
create_conditions_routes(app, r, conn)
|
||||
|
||||
@app.route('/')
|
||||
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__':
|
||||
app.run(host='0.0.0.0', port=8080)
|
||||
|
|
|
|||
|
|
@ -1 +1,2 @@
|
|||
flask
|
||||
rethinkdb
|
||||
|
|
@ -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'})
|
||||
|
|
@ -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()">×</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();
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue