refactor
This commit is contained in:
null
parent
4957c56381
commit
741979aee5
7
app.py
7
app.py
|
|
@ -18,8 +18,13 @@ create_conditions_routes(app, r, conn)
|
||||||
def index():
|
def index():
|
||||||
cursor = r.table("conditions").run(conn)
|
cursor = r.table("conditions").run(conn)
|
||||||
conditions = list(cursor)
|
conditions = list(cursor)
|
||||||
|
conditionModel = {
|
||||||
|
"id": "string",
|
||||||
|
"itemDescription": "string",
|
||||||
|
"itemName": "string"
|
||||||
|
}
|
||||||
|
|
||||||
return render_template('index.html', data={"conditions": conditions})
|
return render_template('index.html', data={"conditions": { "data": conditions, "model": conditionModel }})
|
||||||
|
|
||||||
if __name__ == '__main__':
|
if __name__ == '__main__':
|
||||||
app.run(host='0.0.0.0', port=8080, debug=True)
|
app.run(host='0.0.0.0', port=8080, debug=True)
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
version: '3.8'
|
||||||
|
|
||||||
|
services:
|
||||||
|
finfree-be:
|
||||||
|
image: finfree-be
|
||||||
|
volumes:
|
||||||
|
- .:/usr/src/app
|
||||||
|
ports:
|
||||||
|
- "8080:8080"
|
||||||
|
environment:
|
||||||
|
- RETHINKDB_URL=192.168.90.11
|
||||||
|
- RETHINKDB_PORT=40002
|
||||||
|
|
@ -26,18 +26,17 @@ table {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
table,
|
|
||||||
th,
|
th,
|
||||||
td {
|
td {
|
||||||
border: 1px solid #ddd;
|
border: 1px solid #ddd;
|
||||||
}
|
|
||||||
|
|
||||||
th,
|
|
||||||
td {
|
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
tfoot td {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
background-color: #4CAF50;
|
background-color: #4CAF50;
|
||||||
color: white;
|
color: white;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,126 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Trading Zone Website</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/styles.css') }}">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<h1>Conditions</h1>
|
||||||
|
<table id="dataTable">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>ID</th>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Description</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<!-- Data will be inserted here dynamically -->
|
||||||
|
</tbody>
|
||||||
|
<tfoot>
|
||||||
|
<tr>
|
||||||
|
<td colspan="3" style="text-align: right;"> <!-- Adjust colspan as per your total columns -->
|
||||||
|
<button onclick="openModal()">Add Item</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="myModal" class="modal">
|
||||||
|
<div class="modal-content">
|
||||||
|
<span class="close" onclick="closeModal()">×</span>
|
||||||
|
<h2>Add Condition</h2>
|
||||||
|
<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>
|
||||||
|
<textarea id="itemDescription" name="itemDescription" required></textarea><br><br>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<dialog id="editConditionDialog">
|
||||||
|
<form id="editItemForm" method="PUT" action="/conditions">
|
||||||
|
<label for="itemName">Name:</label><br>
|
||||||
|
<input type="text" id="itemName" name="itemName"><br>
|
||||||
|
<label for="itemDescription">Description:</label><br>
|
||||||
|
<textarea id="itemDescription" name="itemDescription"></textarea><br><br>
|
||||||
|
<button value="cancel" formmethod="dialog">Cancel</button>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</dialog>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Sample data to populate the table
|
||||||
|
const data = `{{ data.conditions | tojson }}`;
|
||||||
|
const sampleData = JSON.parse(data)
|
||||||
|
|
||||||
|
|
||||||
|
// Function to populate the table with data
|
||||||
|
function populateTable(data) {
|
||||||
|
const tableBody = document.querySelector('#dataTable tbody');
|
||||||
|
tableBody.innerHTML = '';
|
||||||
|
data.forEach(item => {
|
||||||
|
const row = `<tr onclick="onRowClick('${item.id}')">
|
||||||
|
<td title="${item.id}">${item.id.substr(0,6)}</td>
|
||||||
|
<td>${item.itemName}</td>
|
||||||
|
<td>${item.itemDescription}</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';
|
||||||
|
}
|
||||||
|
|
||||||
|
function onRowClick(id) {
|
||||||
|
console.log("row id", id)
|
||||||
|
document.getElementById("editConditionDialog").showModal();
|
||||||
|
const form = document.getElementById("editItemForm");
|
||||||
|
form.action = form.action + "/" + id
|
||||||
|
document.getElementById("itemName").value = "a";
|
||||||
|
document.getElementById("itemDescription").value = "b";
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle form submission
|
||||||
|
document.getElementById('addItemForm').addEventListener('submit', function (event) {
|
||||||
|
event.preventDefault();
|
||||||
|
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();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Initially populate the table with sample data
|
||||||
|
populateTable(sampleData);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -6,115 +6,49 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Trading Zone Website</title>
|
<title>Trading Zone Website</title>
|
||||||
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/styles.css') }}">
|
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/styles.css') }}">
|
||||||
|
<script type="text/javascript" src="{{ url_for('static', filename='js/main.js') }}" ></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h1>Conditions</h1>
|
<h1>Conditions</h1>
|
||||||
<button onclick="openModal()">Add Item</button>
|
<dialog id="conditionDialog">
|
||||||
<table id="dataTable">
|
<form method="POST" action="/conditions">
|
||||||
|
<label for="itemName">Name:</label><br>
|
||||||
|
<input type="text" id="itemName" name="itemName"><br>
|
||||||
|
<label for="itemDescription">Description:</label><br>
|
||||||
|
<textarea id="itemDescription" name="itemDescription"></textarea><br><br>
|
||||||
|
|
||||||
|
<button value="cancel" formmethod="dialog">Cancel</button>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</dialog>
|
||||||
|
<table id="conditionTable">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>ID</th>
|
{% for key, items in data.conditions.model.items() %}
|
||||||
<th>Name</th>
|
<th>{{ key }}</th>
|
||||||
<th>Description</th>
|
{% endfor %}
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<!-- Data will be inserted here dynamically -->
|
{% for item in data.conditions.data %}
|
||||||
|
<tr>
|
||||||
|
{% for key, value in item.items() %}
|
||||||
|
<td>{{ value }}</td>
|
||||||
|
{% endfor %}
|
||||||
|
</tr>
|
||||||
|
{% endfor %}
|
||||||
</tbody>
|
</tbody>
|
||||||
|
<tfoot>
|
||||||
|
<tr>
|
||||||
|
<td colspan="3" style="text-align: right;"> <!-- Adjust colspan as per your total columns -->
|
||||||
|
<button onclick="openModal()">Add Item</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="myModal" class="modal">
|
|
||||||
<div class="modal-content">
|
|
||||||
<span class="close" onclick="closeModal()">×</span>
|
|
||||||
<h2>Add Condition</h2>
|
|
||||||
<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>
|
|
||||||
<textarea id="itemDescription" name="itemDescription" required></textarea><br><br>
|
|
||||||
<button type="submit">Submit</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<dialog id="editConditionDialog">
|
|
||||||
<form id="editItemForm" method="PUT" action="/conditions">
|
|
||||||
<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 value="cancel" formmethod="dialog">Cancel</button>
|
|
||||||
<button type="submit">Submit</button>
|
|
||||||
</form>
|
|
||||||
</dialog>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// Sample data to populate the table
|
|
||||||
const data = `{{ data.conditions | tojson }}`;
|
|
||||||
const sampleData = JSON.parse(data)
|
|
||||||
|
|
||||||
|
|
||||||
// Function to populate the table with data
|
|
||||||
function populateTable(data) {
|
|
||||||
const tableBody = document.querySelector('#dataTable tbody');
|
|
||||||
tableBody.innerHTML = '';
|
|
||||||
data.forEach(item => {
|
|
||||||
const row = `<tr onclick="onRowClick('${item.id}')">
|
|
||||||
<td title="${item.id}">${item.id.substr(0,6)}</td>
|
|
||||||
<td>${item.itemName}</td>
|
|
||||||
<td>${item.itemDescription}</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';
|
|
||||||
}
|
|
||||||
|
|
||||||
function onRowClick(id) {
|
|
||||||
console.log("row id", id)
|
|
||||||
document.getElementById("editConditionDialog").showModal();
|
|
||||||
const form = document.getElementById("editItemForm");
|
|
||||||
form.action = form.action + "/" + id
|
|
||||||
document.getElementById("itemName").value = "a";
|
|
||||||
document.getElementById("itemDescription").value = "b";
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle form submission
|
|
||||||
document.getElementById('addItemForm').addEventListener('submit', function (event) {
|
|
||||||
event.preventDefault();
|
|
||||||
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();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Initially populate the table with sample data
|
|
||||||
populateTable(sampleData);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in New Issue