Updated overview page

edivorce/apps/core/templates/overview.html

@@ -7,19 +7,69 @@
 {% block content %}
 
 <h2>Answer the Questions Related to Your Divorce Questionnaire</h2>
+<div class="progress-column">
+    <a href="{% url 'prequalification' '01' %}" class="progress-question complete {% if active_page == 'prequalification' %} active {% endif %}">
+        <span class="progress-icon"><i class="fa fa-share-alt" aria-hidden="true"></i></span>
+        <span class="progress-content">Qualifying Questions</span>
+        <span class="progress-status"><i class="fa fa-check" aria-hidden="true"></i></span>
+    </a>
+    <a href="{% url 'question_steps' '01_orders' %}" class="progress-question {% if active_page == '01_orders' %} active {% endif %}">
+        <span class="progress-icon"><i class="fa fa-commenting" aria-hidden="true"></i></span>
+        <span class="progress-content"><small>Step 1</small><br />What Are You Asking For?</span>
+        {% if step_status.which_orders == 'Started' %}<span class="progress-status"><i class="fa fa-adjust" aria-hidden="true"></i></span> {% endif %}
+    </a>
+    <a href="{% url 'question_steps' '02_claimant' %}" class="progress-question {% if active_page == '02_claimant' %} active {% endif %}">
+        <span class="progress-icon"><i class="fa fa-info" aria-hidden="true"></i></span>
+        <span class="progress-content"><small>Step 2</small><br />Your information</span>
+        {% if step_status.your_information == 'Started' %}<span class="progress-status"><i class="fa fa-adjust" aria-hidden="true"></i></span> {% endif %}
+    </a>
+    <a href="{% url 'question_steps' '03_respondent' %}" class="progress-question {% if active_page == '03_respondent' %} active {% endif %}">
+        <span class="progress-icon"><i class="fa fa-user" aria-hidden="true"></i></span>
+        <span class="progress-content"><small>Step 3</small><br />Your spouse</span>
+        {% if step_status.your_spouse == 'Started' %}<span class="progress-status"><i class="fa fa-adjust" aria-hidden="true"></i></span> {% endif %}
+    </a>
+    <a href="{% url 'question_steps' '04_marriage' %}" class="progress-question {% if active_page == '04_marriage' %} active {% endif %}">
+        <span class="progress-icon"><i class="fa fa-link" aria-hidden="true"></i></span>
+        <span class="progress-content"><small>Step 4</small><br />Your marriage</span>
+        {% if step_status.your_marriage == 'Started' %}<span class="progress-status"><i class="fa fa-adjust" aria-hidden="true"></i></span> {% endif %}
+    </a>
+    <a href="{% url 'question_steps' '05_separation' %}" class="progress-question {% if active_page == '05_separation' %} active {% endif %}">
+        <span class="progress-icon"><i class="fa fa-chain-broken" aria-hidden="true"></i></span>
+        <span class="progress-content"><small>Step 5</small><br />Your separation</span>
+        {% if step_status.your_separation == 'Started' %}<span class="progress-status"><i class="fa fa-adjust" aria-hidden="true"></i></span> {% endif %}
+    </a>
+    <a href="{% url 'question_steps' '06_support' %}" class="progress-question {% if active_page == '06_support' %} active {% endif %}">
+        <span class="progress-icon"><i class="fa fa-life-ring" aria-hidden="true"></i></span>
+        <span class="progress-content"><small>Step 6</small><br />Spousal support</span>
+        {% if step_status.spousal_support == 'Started' %}<span class="progress-status"><i class="fa fa-adjust" aria-hidden="true"></i></span> {% endif %}
+    </a>
+    <a href="{% url 'question_steps' '07_property' %}" class="progress-question {% if active_page == '07_property' %} active {% endif %}">
+        <span class="progress-icon"><i class="fa fa-home" aria-hidden="true"></i></span>
+        <span class="progress-content"><small>Step 7</small><br />Property and debt</span>
+        {% if step_status.property_and_debt == 'Started' %}<span class="progress-status"><i class="fa fa-adjust" aria-hidden="true"></i></span> {% endif %}
+    </a>
+    <a href="{% url 'question_steps' '08_other_orders' %}" class="progress-question {% if active_page == '08_other_orders' %} active {% endif %}">
+        <span class="progress-icon"><i class="fa fa-gavel" aria-hidden="true"></i></span>
+        <span class="progress-content"><small>Step 8</small><br />Other orders</span>
+        {% if step_status.other_orders == 'Started' %}<span class="progress-status"><i class="fa fa-adjust" aria-hidden="true"></i></span> {% endif %}
+    </a>
+    <a href="{% url 'question_steps' '09_other_questions' %}" class="progress-question {% if active_page == '09_other_questions' %} active {% endif %}">
+        <span class="progress-icon"><i class="fa fa-question" aria-hidden="true"></i></span>
+        <span class="progress-content"><small>Step 9</small><br />Other questions</span>
+        {% if step_status.other_questions == 'Started' %}<span class="progress-status"><i class="fa fa-adjust" aria-hidden="true"></i></span> {% endif %}
+    </a>
+    <a href="{% url 'question_steps' '10_location' %}" class="progress-question {% if active_page == '10_location' %} active {% endif %}">
+        <span class="progress-icon"><i class="fa fa-location-arrow" aria-hidden="true"></i></span>
+        <span class="progress-content"><small>Step 10</small><br />Filing locations</span>
+        {% if step_status.filing_locations == 'Started' %}<span class="progress-status"><i class="fa fa-adjust" aria-hidden="true"></i></span> {% endif %}
+    </a>
+    <a href="{% url 'question_steps' '11_review' %}" class="progress-question {% if active_page == '11_review' %} active {% endif %}">
+        <span class="progress-icon"><i class="fa fa-file" aria-hidden="true"></i></span>
+        <span class="progress-content"><small>Step 11</small><br />Review</span>
+    </a>
+</div>
+<!-- TODO once all questions in uncategorized are placed in right step, remove it -->
 <ul>
-    <li style="display: flex"><a href="{% url 'prequalification' '01' %}">Qualifying Questions</a><p style="margin-left: 90px">{{prequalification}}</p></li>
-    <li style="display: flex"><a href="{% url 'question_steps' '01_orders' %}">Step 1: What are you asking for?</a><p style="margin-left: 90px">{{which_orders}}</p></li>
-    <li style="display: flex"><a href="{% url 'question_steps' '02_claimant' %}">Step 2: Your information</a><p style="margin-left: 90px">{{your_information}}</p></li>
-    <li style="display: flex"><a href="{% url 'question_steps' '03_respondent' %}">Step 3: Your spouse</a><p style="margin-left: 90px">{{your_spouse}}</p></li>
-    <li style="display: flex"><a href="{% url 'question_steps' '04_marriage' %}">Step 4: Your marriage</a><p style="margin-left: 90px">{{your_marriage}}</p></li>
-    <li style="display: flex"><a href="{% url 'question_steps' '05_separation' %}">Step 5: Your separation</a><p style="margin-left: 90px">{{your_separation}}</p></li>
-    <li style="display: flex"><a href="{% url 'question_steps' '06_support' %}">Step 6: Spousal support</a><p style="margin-left: 90px">{{spousal_support}}</p></li>
-    <li style="display: flex"><a href="{% url 'question_steps' '07_property' %}">Step 7: Property and debt</a><p style="margin-left: 90px">{{property_and_debt}}</p></li>
-    <li style="display: flex"><a href="{% url 'question_steps' '08_other_orders' %}">Step 8: Other orders</a><p style="margin-left: 90px">{{other_orders}}</p></li>
-    <li style="display: flex"><a href="{% url 'question_steps' '09_other_questions' %}">Step 9: Other questions</a><p style="margin-left: 90px">{{other_questions}}</p></li>
-    <li style="display: flex"><a href="{% url 'question_steps' '10_location' %}">Step 10: Filing locations</a><p style="margin-left: 90px">{{filing_locations}}</p></li>
-    <li style="display: flex"><a href="{% url 'question_steps' '11_review' %}">Step 11: Review</a></li>
     <li style="display: flex"><a href="{% url 'question_steps' '12_uncategorized' %}">Step 12: Uncategorized</a></li>
 </ul>
 

edivorce/apps/core/views/main.py

@@ -132,16 +132,11 @@ def overview(request):
     mark that step as "Started" otherwise "Not started"
     """
     user = __get_bceid_user(request)
-    responses_dict = get_responses_from_db_grouped_by_steps(user)
-    # To Show whether user has started to respond questions in each step
-    started_dict = {}
-    for step, lst in responses_dict.items():
-        if not lst:
-            started_dict[step] = "Not started"
-        else:
-            started_dict[step] = "Started"
-    started_dict['active_page'] = 'overview'
-    return render(request, 'overview.html', context=started_dict)
+    responses_dict_by_step = get_responses_from_db_grouped_by_steps(user)
+    # step status dictionary
+    status_dict = {'step_status': get_step_status(responses_dict_by_step),
+                   'active_page': 'overview'}
+    return render(request, 'overview.html', context=status_dict)
 
 
 def __get_bceid_user(request):