yisroelbaum/BudgetingApp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

html and js for spliting lines

Browse source
This commit is contained in:
Yisroel Baum 2024-10-13 14:43:03 +03:00
parent 34b8368e9b
commit 9609ad426d
2 changed files with 81 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

25
app/static/split_line.js Normal file
View file

@ -0,0 +1,25 @@
const addLineButton = document.getElementById("add-line-button");
const lineContainer = document.getElementById('table-body');
function addLine(){
const columns = ['Amount', 'Vendor', 'Confirmation Code', 'Note'];
var tr = document.createElement('tr');
var counter = 2;
columns.forEach(column => {
var td = document.createElement('td');
var ip = document.createElement('input');
ip.type = 'text'
ip.classList = 'form-control'
ip.name = `${column}-${counter++}`
ip.placeholder = column
td.appendChild(ip)
tr.appendChild(td)
})
lineContainer.appendChild(tr)
}
document.addEventListener('DOMContentLoaded', () => {
addLineButton.addEventListener('click', addLine)
})

56
app/templates/split_line.html Normal file
View file

@ -0,0 +1,56 @@
{% extends 'base.html' %}
{% block title %}Split Line{% endblock title %}
{% block content %}
<main>
<div class="container mt-5">
<div class="card">
<div class="card-header bg-primary text-white">
Split Line
</div>
<!-- Display Details Section -->
<div class="card-body">
<h5 class="card-title">Details</h5>
<div class="table-responsive">
<table class="table table-borderless">
<tbody>
<tr>
<th scope="row">Total Amount:</th>
<td>{{ li.amount }}</td>
</tr>
<tr>
<th scope="row">Vendor:</th>
<td>{{ li.get_vendor().name }}</td>
</tr>
<tr>
<th scope="row">Date:</th>
<td>{{ li.display_date() }}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card-body">
<form action="{{ url_for('split_line_endpoint') }}" method="POST">
<div class="table-responsive">
<table class="table table-bordered">
<tbody id="table-body">
<tr>
<td><input type="text" class="form-control" name="Amount-1" placeholder="Amount"></td>
<td><input type="text" class="form-control" name="Vendor-1" placeholder="Vendor"></td>
<td><input type="text" class="form-control" name="Confirmation Code-1" placeholder="Confirmation Code"></td>
<td><input type="text" class="form-control" name="Note-1" placeholder="Note"></td>
</tr>
</tbody>
</table>
</div>
<button type="button" class="btn btn-primary" id="add-line-button">Add Another Line?</button>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
<script src="{{url_for('.static', filename='split_line.js')}}"></script>
</main>
{% endblock content %}