Fixed issue with 204 on iOS. Moved call to ajax

This commit is contained in:
FrederikBaerentsen 2024-03-14 08:18:05 +01:00
parent c0111e5c2c
commit 13a4a3b191
4 changed files with 202 additions and 31 deletions

68
app.py
View File

@ -1,4 +1,4 @@
from flask import Flask, request, redirect, jsonify, render_template
from flask import Flask, request, redirect, jsonify, render_template, Response
import json
from pprint import pprint as pp
from pathlib import Path
@ -19,22 +19,73 @@ def index():
set_list.append(info_file)
return render_template('frontpage.html',set_list=set_list)
@app.route('/<tmp>')
@app.route('/<tmp>', methods=['GET', 'POST'])
def sets(tmp):
with open('./static/sets/'+tmp+'/info.json') as info:
info_file = json.loads(info.read())
with open('./static/sets/'+tmp+'/inventory.json') as inventory:
inventory_file = json.loads(inventory.read())
with open('./info/'+tmp+'.json') as info:
json_file = json.loads(info.read())
return render_template('bootstrap_table.html', tmp=tmp,title=info_file['name'],
info_file=info_file,inventory_file=inventory_file,json_file=json_file)
if request.method == 'POST':
part_num = request.form.get('brickpartpart_num')
color = request.form.get('brickcolorname')
index = request.form.get('index')
number = request.form.get('numberInput')
is_spare = request.form.get('is_spare')
# print(part_num)
# print(color)
# print(index)
# print(number)
# print(is_spare)
if number is not None:
print(part_num)
print(color)
print(number)
print(is_spare)
with open('./info/'+tmp+'.json') as info:
json_file = json.loads(info.read())
print(json_file['count'])
data = '{"brick" : {"ID":"' + part_num + '","is_spare": "' + is_spare + '","color_name": "' + color + '","amount":"' + number + '"}}'
if len(json_file['unit'][int(index)]['bricks']['missing']) == 0:
json_file['unit'][int(index)]['bricks']['missing'].append(json.loads(data))
print(json_file)
elif number == '':
for idx,i in enumerate(json_file['unit'][int(index)]['bricks']['missing']):
if i['brick']['ID'] == part_num and i['brick']['is_spare'] == is_spare and i['brick']['color_name'] == color:
json_file['unit'][int(index)]['bricks']['missing'].pop(idx)
else:
found = False
for idx,i in enumerate(json_file['unit'][int(index)]['bricks']['missing']):
if not found and i['brick']['ID'] == part_num and i['brick']['is_spare'] == is_spare and i['brick']['color_name'] == color:
json_file['unit'][int(index)]['bricks']['missing'][idx]['brick']['amount'] = number
found = True
if not found:
json_file['unit'][int(index)]['bricks']['missing'].append(json.loads(data))
with open('./info/'+tmp+'.json', 'w') as dump_file:
json.dump(json_file,dump_file)
#return Response(status=200)
return ('', 204)
else:
return render_template('bootstrap_table.html', tmp=tmp,title=info_file['name'],
info_file=info_file,inventory_file=inventory_file,json_file=json_file)
@app.route('/<tmp>/saveNumber', methods=['POST'])
def save_number(tmp):
part_num = request.form.get('brick.part.part_num')
color = request.form.get('brick.color.name')
part_num = request.form.get('brickpartpart_num')
color = request.form.get('brickcolorname')
index = request.form.get('index')
number = request.form.get('numberInput')
is_spare = request.form.get('is_spare')
@ -48,14 +99,13 @@ def save_number(tmp):
with open('./info/'+tmp+'.json') as info:
json_file = json.loads(info.read())
print(json_file['count'])
data = '{"brick" : {"ID":"' + part_num + '","is_spare": "' + is_spare + '","color_name": "' + color + '","amount":"' + number + '"}}'
if len(json_file['unit'][int(index)]['bricks']['missing']) == 0:
json_file['unit'][int(index)]['bricks']['missing'].append(json.loads(data))
print(json_file)
elif number == '0' or number == '':
elif number == '':
for idx,i in enumerate(json_file['unit'][int(index)]['bricks']['missing']):
if i['brick']['ID'] == part_num and i['brick']['is_spare'] == is_spare and i['brick']['color_name'] == color:
json_file['unit'][int(index)]['bricks']['missing'].pop(idx)
@ -72,7 +122,7 @@ def save_number(tmp):
with open('./info/'+tmp+'.json', 'w') as dump_file:
json.dump(json_file,dump_file)
return redirect('/{}'.format(tmp))
return Response(status=204)
if __name__ == '__main__':
app.run(host='192.168.10.109', debug=True, port=3333)

View File

@ -1,16 +1,26 @@
<!doctype html>
<html>
<html data-theme="light">
<head>
<title>{{ title }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS Reset -->
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <!-- CSS Reset -->
<link href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
<!-- Milligram CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css">
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
th {
text-align: left;
margin: 0px;
@ -18,6 +28,7 @@ th {
}
table {
}
#data {
@ -137,6 +148,9 @@ td {
border: 1px solid #d1d1d1;
}
.highlighted {
background-color: yellow; /* Adjust as needed */
}
td img{
display: block;
@ -164,6 +178,8 @@ td img{
height: 100%;
}
.lightbox-content {
max-width: 90%;
max-height: 90%;

View File

@ -34,12 +34,14 @@
<td class="centered-cell">
<div class="inputContainer">
{% set ns = namespace(count='') %}
<form id="number-form" action="/{{ tmp }}/saveNumber" method="post">
<input type="hidden" name="brick.part.part_num" value="{{ brick.part.part_num }}">
<input type="hidden" name="count" value="{{ i }}">
<input type="hidden" name="index" value="{{ loop.index0 }}">
<input type="hidden" name="is_spare" value="{{ brick.is_spare }}">
<input type="hidden" name="brick.color.name" value="{{ brick.color.name }}">
<!-- <form id="number-form" action="/{{ tmp }}" method="post"> -->
<form id="number-form">
<input type="hidden" name="numberID" id="numberID" value="{{ tmp }}">
<input type="hidden" name="brickpartpart_num" id="brickpartpart_num" value="{{ brick.part.part_num }}">
<input type="hidden" name="count" value="{{ i }}">
<input type="hidden" name="index" id="index" value="{{ loop.index0 }}">
<input type="hidden" name="is_spare" id="is_spare" value="{{ brick.is_spare }}">
<input type="hidden" name="brickcolorname" id="brickcolorname" value="{{ brick.color.name }}">
{% for j in json_file['unit'][loop.index0]['bricks']['missing'] %}
{% if j['brick']['ID'] == brick.part.part_num and j['brick']['color_name'] == brick.color.name %}
@ -50,10 +52,12 @@
{% endif %}
{% endfor %}
<div class='inputField'>
<input type="tel" style="text-align:center;" id="numberInput" name="numberInput" value="{{ ns.count }}" pattern="\d+">
<button class="square-button" type="submit">
<img src="/static/save.svg" alt="Save Icon">
</button>
<input type="tel" style="text-align:center;font-size: 16px;" id="numberInput" name="numberInput" value="{{ ns.count }}" pattern="\d+">
<span style="display:none">{{ ns.count }}</span>
<button class="square-button" id="bnumber-form" type="submit">
<img src="/static/save.svg" alt="Save Icon">
</button>
</div>
</form>
</div>
@ -68,7 +72,7 @@
<h1>Spares</h1>
<div class="center-table">
<table id="data" class="table">
<table id="sdata" class="table">
<thead>
<tr>
<th></th>
@ -99,12 +103,13 @@
<td class="centered-cell">
<div class="inputContainer">
{% set ns = namespace(count='') %}
<form id="number-form" action="/{{ tmp }}/saveNumber" method="post">
<input type="hidden" name="brick.part.part_num" value="{{ brick.part.part_num }}">
<form id="number-form" action="/{{ tmp }}" method="post">
<input type="hidden" name="numberID" id="numberID" value="{{ tmp }}">
<input type="hidden" name="brickpartpart_num" value="{{ brick.part.part_num }}">
<input type="hidden" name="count" value="{{ i }}">
<input type="hidden" name="index" value="{{ loop.index0 }}">
<input type="hidden" name="is_spare" value="{{ brick.is_spare }}">
<input type="hidden" name="brick.color.name" value="{{ brick.color.name }}">
<input type="hidden" name="brickcolor.name" value="{{ brick.color.name }}">
{% for j in json_file['unit'][loop.index0]['bricks']['missing'] %}
{% if j['brick']['ID'] == brick.part.part_num and j['brick']['color_name'] == brick.color.name %}
@ -120,8 +125,11 @@
<img src="/static/save.svg" alt="Save Icon">
</button>
</div>
</form>
</div>
</td>
{% endfor %}
</tr>
@ -150,18 +158,47 @@
{% block scripts %}
<script>
// $(document).ready( function () {
// $('#data').DataTable();
// } );
// document.addEventListener('DOMContentLoaded', function () {
// const myDataTable = document.getElementById('data');
// myDataTable.addEventListener('click', function (event) {
// const clickedRow = event.target.closest('td');
// if (clickedRow) {
// // Remove highlighting from all rows
// const rows = myDataTable.querySelectorAll('tr');
// rows.forEach(row => row.classList.remove('highlighted'));
// // Add highlighting to the clicked row
// if (clickedRow.classList.contains('highlighted')) {
// clickedRow.classList.remove('highlighted');
// } else {
// clickedRow.classList.add('highlighted');
// }
// }
// });
// });
function goToPage(url) {
window.location.href = url;
}
const expandButton = document.getElementById('expand-button');
const dataTable = document.getElementById('data');
const myDataTable = document.getElementById('data');
let isExpanded = false;
expandButton.addEventListener('click', () => {
const hiddenColumns = dataTable.querySelectorAll('.hidden-mobile');
const hiddenColumns = myDataTable.querySelectorAll('.hidden-mobile');
hiddenColumns.forEach(column => {
if (isExpanded) {
column.style.display = 'none';
@ -223,7 +260,71 @@ document.addEventListener('DOMContentLoaded', function () {
numberInput.setAttribute('inputmode', 'numeric');
});
let options = {
searchable: true,
sortable: true,
paging: false,
perPage: 10,
perPageSelect: [5, 10, 25, 50, ["All", -1]],
columns: [
{ select: [0], sortable: false }
]
};
let myTable = document.querySelector("#data");
let dataTable = new simpleDatatables.DataTable(myTable, options);
$("body").on("click", "#number-form", function (event) {
// $('#number-form').submit(function(event) {
event.preventDefault();
//console.log($(this)[0]);
brickpartpart_num = $(this)[0][1].value;
brickcolorname = $(this)[0][5].value;
index = $(this)[0][3].value;
numberInput = $(this)[0][6].value;
is_spare = $(this)[0][4].value;
// console.log('ID: ' + brickpartpart_num);
// console.log('Color Name: ' + brickcolorname);
// console.log('Index: ' + index);
// console.log('Number Input: ' + numberInput);
// console.log('is_spare: ' + is_spare);
$.ajax({
url: '/'+$(this)[0][0].value,
type: 'POST',
data: {
'brickpartpart_num': brickpartpart_num,
'brickcolorname': brickcolorname,
'index': index,
'numberInput': numberInput,
'is_spare': is_spare
}
});
// part_num = request.form.get('brickpartpart_num')
// color = request.form.get('brickcolorname')
// index = request.form.get('index')
// number = request.form.get('numberInput')
// is_spare = request.form.get('is_spare')
});
</script>
{% endblock %}

View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -11,7 +11,10 @@
<!-- Milligram CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css">
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
/>
<style>
body {
@ -96,6 +99,7 @@
<button class="button button-outline" onclick="dynamicSort('set_parts')">Sort by Parts</button>
<button class="button button-outline" onclick="dynamicSort('set_name')">Sort by Name</button>
</center>
<!-- Add more buttons for other text values if needed -->
</div>