I am new to Flask and html, but I am trying to build a project for golf stats. I am at the very beginning, and I have been searching a lot for this but have not found anything that works. Pretty sure it is something simple but again I am very new to html stuff.
I ask the user what course he has played, how many holes (18 holes, front nine, back nine, other) and display the scorecard accordingly. (I apologize in advance, some variables are named in French, others in English, I did not change them manually not to forget any. Hope you get it anyways.)
Here is my home.html file where I request information
<form action="{{ url_for("partie") }}" method="POST">
<table>
<tr>
<td align="right">Parcours : </td>
<td align="left"><input type="text" name="terrain" required /></td>
</tr>
<tr>
<td align="right">Jalons : </td>
<td align="right"><input type="text" name="jalon" required /></td>
</tr>
</table>
<input type="radio" name="nbTrous" value="18">18 trous
<input type="radio" name="nbTrous" value="9f">Premier 9 trous
<input type="radio" name="nbTrous" value="9s">Deuxième 9 trous
<input type="radio" name="nbTrous" value="Autre">Autre
<br>
<button id="showCard" class="float-left submit-button">
Entrer
</button>
<br>
<script type="text/javascript">
document.getElementById("showCard").onclick = function(){
location.href = "carte.html"
}
</script>
</form>
I pass all this information to a function called "partie" which goes like this
@app.route("/carte", methods=["GET", "POST"])
def partie():
if request.method == "POST":
terrain = request.form["terrain"]
jalon = request.form["jalon"]
par = allCourses[terrain]["par"]
dist = allCourses[terrain][jalon]
Trous = request.form["nbTrous"]
nbTrous = int(sub(r"\D", "", Trous))
rowTrou = "<th> Trou </th>,"
rowDist = "<th> Distance </th>,"
rowPar = "<th> Normale </th>,"
rowScore = "<th> Score </th>,"
couleur = ""
if jalon == "black":
couleur = "table-active"
elif jalon == "blue":
couleur = "table-primary"
elif jalon == "white":
couleur = "table-dark"
elif jalon == "gold":
couleur = "table-warning"
if nbTrous == 18:
for i in range(9):
rowTrou += "<th> {} </th>,".format(i+1)
rowTrou += "<th> </th>,"
for i in range(9,18):
rowTrou += "<th> {} </th>,".format(i+1)
rowTrou += "<th> </th>,"
rowTrou += "<th> </th>,"
for longueur in dist:
rowDist += "<th> {} </th>,".format(longueur)
for normale in par:
rowPar += "<th> {} </th>,".format(normale)
rowScore += "<th> </th>,"
else:
if nbTrous == 9:
if Trous == "9f":
for i in range(9):
rowTrou += "<th> {} </th>".format(i+1)
rowTrou += "<th> </th>"
for longueur in dist[:10]:
rowDist += "<th> {} </th>".format(longueur)
for normale in par[:10]:
rowPar += "<th> {} </th>".format(normale)
rowScore += "<th> </th>"
elif Trous == "9s":
for i in range(9):
rowTrou += "<th> {} </th>".format(i+10)
rowTrou += "<th> </th>"
for longueur in dist[10:-1]:
rowDist += "<th> {} </th>".format(longueur)
for normale in par[10:-1]:
rowPar += "<th> {} </th>".format(normale)
rowScore += "<th> </th>"
#else:
#faire autre chose, gérer exception
rowTrou=rowTrou.split(",")
rowDist=rowDist.split(",")
rowPar=rowPar.split(",")
rowScore=rowScore.split(",")
longList=len(rowTrou)
return render_template("carte.html", terrain=terrain, couleur=couleur, rowTrou=rowTrou, rowDist=rowDist, rowPar=rowPar, rowScore=rowScore, nbTrous=nbTrous, longList=longList)
And I render the table in my carte.html file
<head>
<table class="table table-bordered" id="carte">
Carte parcours {{ terrain }}
<thead>
<tr>
{% for i in range(longList) %}
{{ rowTrou[i]|safe }}
{% endfor %}
</tr>
</thead>
<tbody>
<tr class={{couleur}}>
{% for i in range(longList) %}
{{ rowDist[i]|safe }}
{% endfor %}
</tr>
<tr>
{% for i in range(longList) %}
{{ rowPar[i]|safe }}
{% endfor %}
</tr>
<tr>
{% for i in range(longList) %}
{{ rowScore[i]|safe }}
{% endfor%}
</tr>
</tbody>
</table>
</head>
<body>
<form action="{{ url_for("trou") }}" method="GET">
<button id="startGame" class="float-left submit-button">
Commencer
</button>
</form>
</body>
Which would render, for example, the scorecard for the course selection Royal on the black tee for an 18 hole round.
So far so good, but now I would like to save the scorecard as a variable and reuse it in other html files, such as /carte/hole_i and loop over all 18 holes (in this case) asking information to the user on every hole played. How can I pass the scorecard between html files? I have tried includes, extends, but it didn't work. Perhaps the best way would be to request the table by its Id, carte, and pass it to my other function asking information hole by hole. That way I would have the scorecard on top of the page, and below forms handling shot by shot informations. Being new to this, I am confused as to how to do it. Javascript function, directly in html,...
Any help is appreciated! Thank you!