Create some javascript to make the front end have n lines
This commit is contained in:
TT-392
parent
9de5ba5524
commit
c7b5ac9f5f
2 changed files with 123 additions and 65 deletions
81
app.py
81
app.py
|
|
@ -180,55 +180,56 @@ def text_form():
|
|||
check_for_new_user(session)
|
||||
|
||||
if request.method == 'POST':
|
||||
session["text1"] = {
|
||||
"string": request.form["string1"],
|
||||
"size": int(request.form["size1"]),
|
||||
"pos": int(request.form["pos1"]),
|
||||
"bold": "bold1" in request.form,
|
||||
}
|
||||
session["text2"] = {
|
||||
"string": request.form["string2"],
|
||||
"size": int(request.form["size2"]),
|
||||
"pos": int(request.form["pos2"]),
|
||||
"bold": "bold2" in request.form,
|
||||
}
|
||||
print(request.form)
|
||||
#session["text1"] = {
|
||||
# "string": request.form["string1"],
|
||||
# "size": int(request.form["size1"]),
|
||||
# "pos": int(request.form["pos1"]),
|
||||
# "bold": "bold1" in request.form,
|
||||
#}
|
||||
#session["text2"] = {
|
||||
# "string": request.form["string2"],
|
||||
# "size": int(request.form["size2"]),
|
||||
# "pos": int(request.form["pos2"]),
|
||||
# "bold": "bold2" in request.form,
|
||||
#}
|
||||
|
||||
# Clear previously saved font
|
||||
for font in session["fonts"]:
|
||||
session["fonts"][font]["selected"] = False
|
||||
## Clear previously saved font
|
||||
#for font in session["fonts"]:
|
||||
# session["fonts"][font]["selected"] = False
|
||||
|
||||
# If an invalid font has been submitted, just default to the first one
|
||||
chosen_font = request.form["font"]
|
||||
if chosen_font in session["fonts"]:
|
||||
session["fonts"][chosen_font]["selected"] = True
|
||||
else:
|
||||
first_font = next(iter(session["fonts"]))
|
||||
session["fonts"][first_font]["selected"] = True
|
||||
## If an invalid font has been submitted, just default to the first one
|
||||
#chosen_font = request.form["font"]
|
||||
#if chosen_font in session["fonts"]:
|
||||
# session["fonts"][chosen_font]["selected"] = True
|
||||
#else:
|
||||
# first_font = next(iter(session["fonts"]))
|
||||
# session["fonts"][first_font]["selected"] = True
|
||||
|
||||
# Select the first font that has been marked as selected
|
||||
chosen_font = None
|
||||
for font in session["fonts"]:
|
||||
f = session["fonts"][font]
|
||||
if f["selected"]:
|
||||
chosen_font = f
|
||||
## Select the first font that has been marked as selected
|
||||
#chosen_font = None
|
||||
#for font in session["fonts"]:
|
||||
# f = session["fonts"][font]
|
||||
# if f["selected"]:
|
||||
# chosen_font = f
|
||||
|
||||
# If the font is still None, something has gone wrong
|
||||
if chosen_font is None:
|
||||
return
|
||||
## If the font is still None, something has gone wrong
|
||||
#if chosen_font is None:
|
||||
# return
|
||||
|
||||
message, status, img = gen_image(label_width, session["text1"], session["text2"], chosen_font)
|
||||
#message, status, img = gen_image(label_width, session["text1"], session["text2"], chosen_font)
|
||||
|
||||
if status == "Error":
|
||||
session["text image path"] = None
|
||||
return render_text_template(message, "red")
|
||||
#if status == "Error":
|
||||
# session["text image path"] = None
|
||||
# return render_text_template(message, "red")
|
||||
|
||||
get_folder_path(session)
|
||||
#get_folder_path(session)
|
||||
|
||||
session["text image path"] = text_image_filename
|
||||
img.save(get_file_path(session, session["text image path"]))
|
||||
#session["text image path"] = text_image_filename
|
||||
#img.save(get_file_path(session, session["text image path"]))
|
||||
|
||||
print()
|
||||
print(session["text image path"])
|
||||
#print()
|
||||
#print(session["text image path"])
|
||||
|
||||
return render_text_template(scrollDown = True)
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
|
||||
{% block head %}
|
||||
<title>LabelPrinter Label generator</title>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
|
@ -17,32 +18,9 @@
|
|||
</form>
|
||||
|
||||
|
||||
<form method="POST" action="/text-form">
|
||||
<h2>Top text</h2>
|
||||
Text:<br>
|
||||
<textarea name="string1">{{text1["string"]}}</textarea><br>
|
||||
Size: <input type="number" value="{{text1["size"]}}" name="size1" min="0" required
|
||||
style="width: 40px"><br>
|
||||
Y position: <input type="number" value="{{text1["pos"]}}" name="pos1" required
|
||||
style="width: 40px"><br>
|
||||
{% if text1["bold"]%}
|
||||
Bold: <input type="checkbox" name="bold1" value="bold1" checked>
|
||||
{% else %}
|
||||
Bold: <input type="checkbox" name="bold1" value="bold1">
|
||||
{% endif %}
|
||||
<form method="POST" action="/text-form", id="text_form">
|
||||
<div id="input"> </div>
|
||||
|
||||
<h2>Bottom text</h2>
|
||||
Text:<br>
|
||||
<textarea name="string2">{{text2["string"]}}</textarea><br>
|
||||
Size: <input type="number" value="{{text2["size"]}}" name="size2" min="0" required
|
||||
style="width: 40px"><br>
|
||||
Y position: <input type="number" value="{{text2["pos"]}}" name="pos2" required
|
||||
style="width: 40px"><br>
|
||||
{% if text2["bold"]%}
|
||||
Bold: <input type="checkbox" name="bold2" value="bold2" checked>
|
||||
{% else %}
|
||||
Bold: <input type="checkbox" name="bold2" value="bold2">
|
||||
{% endif %}
|
||||
|
||||
<h2>Font</h2>
|
||||
<label for="font">Font:</label>
|
||||
|
|
@ -75,6 +53,85 @@
|
|||
</form>
|
||||
{% endif %}
|
||||
|
||||
<script>
|
||||
const line_form = `<h2>[title]</h2>
|
||||
Text:<br>
|
||||
<textarea name="[text]">(text)</textarea><br>
|
||||
Size: <input type="number" value="(size)" name="[size]" min="0" required
|
||||
style="width: 40px"><br>
|
||||
Y position: <input type="number" value="(y_pos)" name="[y_pos]" required
|
||||
style="width: 40px"><br>`
|
||||
|
||||
const min_button = `<button type="button" onClick="remove_line()">-</button>`
|
||||
const plus_button = `<button type="button" onClick="add_line()">+</button>`
|
||||
|
||||
function get_persistent(name, initial_value) {
|
||||
if (localStorage.getItem(name) == null) {
|
||||
localStorage.setItem(name, initial_value)
|
||||
}
|
||||
return localStorage.getItem(name)
|
||||
}
|
||||
|
||||
function init_field(local_name, initial_value, i, html) {
|
||||
html = html.replace("[" + local_name + "]", local_name + i);
|
||||
html = html.replace("(" + local_name + ")", get_persistent(local_name + i, initial_value));
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
|
||||
function generate_fields() {
|
||||
let html = ""
|
||||
|
||||
let lineCnt = get_persistent("lineCount", 2);
|
||||
for (let i = 0; i < lineCnt; i++) {
|
||||
let modified_line_form = line_form;
|
||||
modified_line_form
|
||||
|
||||
modified_line_form = modified_line_form.replace("[title]", "Line " + i);
|
||||
modified_line_form = init_field("text", "Text", i, modified_line_form);
|
||||
modified_line_form = init_field("size", 130, i, modified_line_form);
|
||||
modified_line_form = init_field("y_pos", i*130, i, modified_line_form);
|
||||
html += modified_line_form;
|
||||
console.log(i);
|
||||
}
|
||||
if (lineCnt == 1) {
|
||||
html += plus_button;
|
||||
} else {
|
||||
html += min_button + plus_button;
|
||||
}
|
||||
|
||||
document.getElementById("input").innerHTML = html;
|
||||
}
|
||||
generate_fields()
|
||||
|
||||
const text_form = document.getElementById("text_form")
|
||||
text_form.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
for (const element of text_form.elements) {
|
||||
localStorage.setItem(element.name, element.value);
|
||||
}
|
||||
|
||||
const lineCount = document.createElement('input');
|
||||
lineCount.type = 'hidden';
|
||||
lineCount.name = 'lineCount';
|
||||
lineCount.value = localStorage.getItem("lineCount");
|
||||
text_form.appendChild(lineCount);
|
||||
|
||||
text_form.submit();
|
||||
});
|
||||
|
||||
function add_line() {
|
||||
localStorage.setItem("lineCount", Number(localStorage.getItem("lineCount")) + 1);
|
||||
generate_fields();
|
||||
}
|
||||
function remove_line() {
|
||||
localStorage.setItem("lineCount", Number(localStorage.getItem("lineCount")) - 1);
|
||||
generate_fields();
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue