Previous button and progress added

app/main/forms.py

@@ -4,4 +4,7 @@
 
 class VoteForm(FlaskForm):
   score = RadioField('Avaliação', choices = [1, 2, 3, 4, 5],  validators=[DataRequired()])
-  submit = SubmitField('Próximo')
+  submit_next = SubmitField('Próximo')
+
+class PageForm(FlaskForm):
+  submit_prev = SubmitField('Anterior')

app/main/views.py

@@ -3,7 +3,7 @@
 from flask import render_template, send_from_directory, send_file, session, url_for, redirect, flash
 from flask_login import login_required, current_user
 from . import main
-from .forms import VoteForm
+from .forms import VoteForm, PageForm
 
 import os
 import glob
@@ -33,19 +33,24 @@ def introduction():
 @main.route('/', methods=['GET', 'POST'])
 @login_required
 def hello():
+  # Make a copy of the audio paths for further processing
   audio_filepaths = audio_filepaths_orig[:]
-  form = VoteForm()
+  # Vote form, with the 'next' button
+  vote_form = VoteForm()
+  # Form used to introduce the 'previous' button
+  page_form = PageForm()
+
   # First access to the application
   if current_user.seed == None and current_user.last_audio == None:
-    # Set seed to shuffle audio file paths
+    # Set seed to shuffle audio filepaths
     session['seed'] = datetime.now()
     current_user.seed = session['seed']
 
     # Set index
     session['idx'] = 0
     current_user.last_audio = session['idx']
 
-    # Saves seed and index in the database
+    # Saves seed and index in the local database
     db.session.add(current_user)
     db.session.commit()
     return redirect(url_for('main.hello'))
@@ -60,16 +65,24 @@ def hello():
   if session['idx'] >= max_lenth:
     flash('Votação concluida com sucesso', 'success')
 
-  if form.validate_on_submit():
+  # 'previous' button
+  if page_form.validate_on_submit() and page_form.submit_prev.data == True:
+    # The index is subtracted if the 'previous' button is pressed
+    session['idx'] -= 1
+    current_user.last_audio = session['idx']
+    db.session.add(current_user)
+    db.session.commit()
+    return redirect(url_for('main.hello'))
+
+  elif vote_form.validate_on_submit():
     # Saves user's score into the firebase's realtime database
-    score_data = {"score": form.score.data}
+    score_data = {"score": vote_form.score.data}
     firebase_db.child(f"audio/{os.path.basename(audio_filepaths[session['idx']].key.split('.wav')[0])}/id_{current_user.id}").set(score_data)
     # Iterate the index and saves in the database
     session['idx'] += 1
     current_user.last_audio = session['idx']
     db.session.add(current_user)
     db.session.commit()
-
     return redirect(url_for('main.hello'))
 
-  return render_template('home.html', form=form, session=session, max_lenth=max_lenth, audio_filepaths=audio_filepaths, s3_client=s3_client)
+  return render_template('home.html', vote_form=vote_form, page_form=page_form, session=session, max_lenth=max_lenth, audio_filepaths=audio_filepaths, s3_client=s3_client)

app/templates/home.html

@@ -53,7 +53,7 @@
       <div class="col-md-6">
         <div class="shadow-sm card">
           <div class="card-header h3 text-center">
-            Amostra {{session['idx'] + 1}}
+            Amostra {{session['idx'] + 1}} de {{max_lenth}}
           </div>
           <div class="card-body">
             <!-- Audio Player -->
@@ -65,17 +65,22 @@
             <!-- Audio Score -->
             <div class="text-center">
               <form method="POST">
-                {{ form.hidden_tag() }}
+                {{ vote_form.hidden_tag() }}
                 <fieldset class="mb-3 form-group form-check-inline">
-                  {% for score in form.score %}
+                  {% for score in vote_form.score %}
                     <div class="form-check form-check-inline">
                       {{ score(class="form-check-input", type="radio") }}
                       {{ score.label(class="form-check-label") }}
                     </div>
                   {% endfor %}
                 </fieldset>
                 <fieldset class="mb-3 form-group">
-                  {{ form.submit(class="btn btn-outline-primary btn-md") }}
+                  <!-- Previous button -->
+                  {%if session['idx'] > 0%}
+                    {{ page_form.submit_prev(class="btn btn-outline-primary btn-md") }}
+                  {%endif%}
+                  <!-- Next button -->
+                  {{ vote_form.submit_next(class="btn btn-outline-primary btn-md") }}
                 </fieldset>
               </form>
             </div>