~craftyguy/ridecasa

c3d7b3cee1599812612a4a20187d2fa76604ceec — Clayton Craft 3 years ago 2e951b1 summary_date_range
DO NOT MERGE: add range date pickers to summary page

Form components added, but input='data' isn't supported by safari/webkit
(lol): https://bugs.webkit.org/show_bug.cgi?id=119175
M ridecasa/home/forms.py => ridecasa/home/forms.py +6 -0
@@ 1,7 1,13 @@
from flask_wtf import FlaskForm
from wtforms import SelectField
from wtforms.fields.html5 import DateField


class ActivityFilterForm(FlaskForm):
    year = SelectField('Year', id='formYearSelect')
    month = SelectField('Month', id='formMonthSelect')


class ActivityFilterRangeForm(FlaskForm):
    start_date = DateField('Start Date', id='formStartDate')
    end_date = DateField('End Date', id='formEndDate')

M ridecasa/home/views.py => ridecasa/home/views.py +8 -2
@@ 5,7 5,7 @@ from flask import (Blueprint, make_response, redirect, render_template,
from flask_login import current_user, login_required
from pony.orm import db_session
from pony import orm
from ridecasa.home.forms import ActivityFilterForm
from ridecasa.home.forms import ActivityFilterForm, ActivityFilterRangeForm
from ridecasa.models import db
from ridecasa.util import get_user_prefs



@@ 28,9 28,12 @@ def summary():
        selected_month = str(datetime.utcnow().month)

    form = ActivityFilterForm()
    formRange = ActivityFilterRangeForm()
    if request.method == 'POST':
        selected_year = form.year.data
        selected_month = form.month.data
        start_date = formRange.start_date.data
        end_date = formRange.end_date.data
    # Fetch years from activities for filtering list of activities
    form.year.choices = orm.select((str(a.startTime.year),
                                    str(a.startTime.year)) for a


@@ 42,6 45,7 @@ def summary():
    form.year.choices = ([('all', 'All')] + form.year.choices
                         + [('1yr', '1 Year')] + [('6mo', '6 Months')]
                         + [('1mo', '1 Month')])
    #breakpoint()
    # day, month, year
    chart_x_axis_unit = 'year'
    if selected_year == 'all':


@@ 147,7 151,9 @@ def summary():

    total_distance = orm.sum(a.distance for a in db.Activity
                             if a.user.id == current_user.id)
    resp = make_response(render_template('home/summary.html', form=form,
    resp = make_response(render_template('home/summary.html',
                                         form=form,
                                         formRange=formRange,
                                         activities=activities,
                                         total_distance=total_distance,
                                         activities_summary=activities_summary,

M ridecasa/static/css/main.css => ridecasa/static/css/main.css +36 -0
@@ 83,3 83,39 @@ hr {
    justify-content: center;
    flex-direction: column;
}

/* Removes the clear button from date inputs */
input[type="date"]::-webkit-clear-button {
    display: none;
}

/* Removes the spin button */
input[type="date"]::-webkit-inner-spin-button {
    display: none;
}

/* Always display the drop down caret */
input[type="date"]::-webkit-calendar-picker-indicator {
    color: #2c3e50;
}

/* A few custom styles for date inputs */
input[type="date"] {
    appearance: none;
    -webkit-appearance: none;
    color: #95a5a6;
    font-family: "Helvetica", arial, sans-serif;
    font-size: 18px;
    border:1px solid #ecf0f1;
    background:#ecf0f1;
    padding:5px;
    display: inline-block !important;
    visibility: visible !important;
}

input[type="date"], focus {
    color: #95a5a6;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}

M ridecasa/templates/home/summary.html => ridecasa/templates/home/summary.html +12 -4
@@ 28,12 28,20 @@
  </div>
  <div class="field">
    <div class="container">
      <form id="formDateFilter" action="" method="post" novalidate>
        <div class="field is-grouped">
      <div class="is-pulled-left">
        <form id="formDateFilter" action="" method="post" novalidate>
          <div class="select">{{ form.year(class_="select") }}</div>
          <div class="select">{{ form.month(class_="select") }}</div>
        </div>
      </form>
        </form>
      </div>
      <div class="is-pulled-right">
        <form id="formDateFilter" action="" method="post" novalidate>
          <span style="margin: .5em"> or select date range: </span>
          {{ formRange.start_date() }}
          <span class="is-size-4">-</span> 
          {{ formRange.end_date() }}
        </form>
      </div>
    </div>
  </div>
  <div class="field">