flask - How to make buttons change variables passed into my jinja template from my views.py?

Question

I am trying to create a weekly plan and I want the left and right arrows to change the week. I am having trouble thinking of how to do this with Flask, Jinja, and WTForms.

My page will look something like this

Eventually I want each day to populate with any stuff the user has added to that particular day so I need the button id and value fields to have the date which I have working.

What I am having issues with is I can't figure out how to have the left and right buttons update the starting date that I am using to create these weekday cards.

The bandaid I have to even have this working as is, is I create an array starting with datetime.datetime.now() for the current week using a simple for loop. I then pass that week array into the template context as a meal variable.

views.py

...
@weeklyplan.route('')
def weeklyplans():
  modalForm = ModalForm()
  week = []

  for i in range(6):
    week.append(datetime.datetime.now() + datetime.timedelta(days=i))
  return render_template('/weeklyplan/weeklyplan.html', title='Weekly Planner', form=modalForm, week=week)

Then in the weeklyplan.html jinja2 template I loop through the week array to create the cards.

weeklyplan.html

...
    <button><i class="fas fa-angle-left"></i></button>
    <div class="card-group">
      {% for day in week %}
        <div class="card">
          <div class="card-header text-center">
            <!-- I need to get today + 6 days from DB and allow the moving left
              and right when the arrows are clicked -->
            {{ day.strftime("%m/%d") }}<br>
            {{ day.strftime("%A") }}
          </div>
          <div class="card-body text-center">
            <button
            id="add_{{ day.strftime('%d%m%y') }}_btn"
            value="{{ day.strftime('%d%m%y') }}"
            class='add-btn btn btn-primary btn-md'
            data-toggle="modal"
            data-target="#exampleModal"><i class="fas fa-plus-circle"></i> Add
          </button>
          </div>
        </div>
      {% endfor %}
    </div>
    <button><i class="fas fa-angle-right"></i></button>
...

I have been trying to figure out a way to get the buttons to the left and right (top and bottom of the code snippet). I know the way I currently do it has to go, it's a placeholder more or less.

I don't want to just redirect back to this same page with a new start date of the current start date - 7 days. I want to avoid reloading the page.

If I can find a way to have the buttons adjust the week array or loop differently such that all I need is a start date in jinja which would always be today and I can just more that by + or - 7 increments that would be ideal. I don't see a way to add and subtract datetime objects directly in jinja or how to properly get this to change without reloading the whole page?

Any ideas?

question from:https://stackoverflow.com/questions/65836686/how-to-make-buttons-change-variables-passed-into-my-jinja-template-from-my-views

Answer 1

Waitting for answers