-
Notifications
You must be signed in to change notification settings - Fork 16
/
source.jinja2
182 lines (174 loc) · 9.47 KB
/
source.jinja2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
{% extends "sitebase.jinja2" %}
{% set page_title = _("My Profile") %}
{% set show_breadcrumbs = True %}
{% set profile_header = True %}
{% set profile_header_active = "profile" %}
{% set profile_header_name = source_name %}
{% set profile_account_id = account_id %}
{% set profile_source_id = source_id %}
{% set show_tips_icon = True %}
{% set show_tips_content = "surveys" %}
{% set basic_info_template_id = 10 %}
{% block head %}
<link rel="stylesheet" href="/static/vendor/font-awesome-4.7.0/css/font-awesome.min.css"/>
<style>
.tooltipper {
display: inline-block; /* tooltip misplaced horizontally otherwise */
}
</style>
<script type="text/javascript">
{% if need_reconsent %}
function takeExternalSurvey(survey_link, survey_title, survey_description) {
window.location.href = survey_link;
return false;
}
{% else %}
function takeExternalSurvey(survey_link, survey_title, survey_description) {
$("#modal-title").empty();
$("#modal-title").text(survey_title);
$("#survey-description").empty();
$("#survey-description").text(survey_description);
$("#take-survey").click(async function(e) {
window.open(survey_link, '_blank').focus();
$("#source_modal").modal('hide');
// We need to wait a couple of seconds for the external survey to register in the database, then reload the page. This is not ideal.
await new Promise(r => setTimeout(r, 5000));
window.location.reload();
});
$("#source_modal").modal('show');
return false;
}
{% endif %}
function hideModal() {
$("#source_modal").modal('hide');
return false;
}
</script>
<script src="/static/vendor/js/jquery.form-4.2.2/jquery.form.min.js"></script>
{% endblock %}
{% block breadcrumb %}
<li class="breadcrumb-item"><a href="/accounts/{{account_id}}" class="breadcrumb-item-profile">{{ _('Dashboard') }}</a></li>
<li class="breadcrumb-item active-profile" aria-current="page">{{source_name}}</li>
{% endblock %}
{% block content %}
<div class="container profile-container">
<br />
{% if need_reconsent %}
<div id="consent_alert" class="alert alert-consent" role="alert">
{{ _('<strong>Please note</strong>: Since you opted to not update your consent agreement, you may view your existing profile data, but may not update or revise your responses.') }}
</div>
{% endif %}
<p class="tmi-tooltip">
<strong>
{{ _('Lifestyle, health, and diet information is essential in order to gain novel insights into the human microbiome and design better studies.') }}<br />
{{ _('You can help us by completing our surveys, starting with your Basic Information.') }}
</strong>
</p>
<p class="tmi-tooltip">
<strong>{{ _('If this is your first time using our new interface, please review <a href="#" onClick="return openModalSiteBase();">these tips</a> for navigating and completing surveys.') }}</strong>
</p>
<div class="row mt-5">
{% for detail in local_surveys %}
<div class="col-12 col-sm-6 col-md-4 p-2">
{% if detail.new_tab %}
<a style="text-decoration: none" href="/accounts/{{ account_id }}/sources/{{ source_id }}/take_survey?survey_template_id={{ detail.survey_template_id }}" target="_blank">
{% else %}
<a style="text-decoration: none" href="/accounts/{{ account_id }}/sources/{{ source_id }}/take_survey?survey_template_id={{ detail.survey_template_id }}">
{% endif %}
<div class="card card-survey {% if detail.date_last_taken is none and detail.survey_template_id == basic_info_template_id %}card-survey-highlight{% endif %}">
<div class="row m-2 survey-info-row">
{% if detail.date_last_taken is not none %}
<div class="col-8 small-text survey-info">{{ _('Last modified') }} {{ detail.date_last_taken }}</div>
{% else %}
{% if detail.survey_template_id == basic_info_template_id %}
<div class="col-8 card-survey-new">{{ _('START HERE') }}</div>
{% else %}
{% if detail.answered > 2 %}
<div class="col-8 small-text survey-info">{{ _('Needs Review') }}</div>
{% else %}
<div class="col-8 small-text survey-info">{{ _('Not Completed') }}</div>
{% endif %}
{% endif %}
{% endif %}
<div class="col-4 small-text survey-info text-end">{{ detail.est_minutes }} {{ _('minutes') }}</div>
</div>
{% if detail.answered < 360 %}
<div class="card-survey-bg-progress mx-auto mb-4" style="background: conic-gradient(#006a96 {{ detail.answered }}deg, #c7c7c7 {{ detail.answered }}deg);">
{% else %}
<div class="card-survey-bg-progress mx-auto mb-4" style="background-color: #D9ECDB;">
<img src="/static/img/survey_complete.svg" class="survey-complete-icon" />
{% endif %}
<div class="card-survey-bg-blank survey-title mx-auto">
<img src="/static/img/{{ detail.icon }}" class="card-survey-icon">
</div>
</div>
<div class="survey-title mx-auto">
{{ detail.survey_template_title|e }}
</div>
</div>
</a>
</div>
{% endfor %}
</div>
{% if remote_surveys|length > 0 %}
<p class="tmi-tooltip mt-4">
{{ _('Below are surveys hosted by partner organizations. You will be directed to an external site in a new browser tab to complete the survey(s) you select. Once you complete them, you may close the tab and return to this page.') }}
</p>
<div class="row mt-4">
{% for detail in remote_surveys %}
<div class="col-12 col-sm-6 col-md-4 p-2">
{% if not detail.answered %}
<a style="text-decoration: none" onClick="return takeExternalSurvey('/accounts/{{ account_id }}/sources/{{ source_id }}/take_survey?survey_template_id={{ detail.survey_template_id }}', '{{ detail.survey_template_title }}', '{{ detail.description }}');" href="/accounts/{{ account_id }}/sources/{{ source_id }}/take_survey?survey_template_id={{ detail.survey_template_id }}" target="_blank">
{% endif %}
<div class="card card-survey-external">
<div class="row m-2 survey-info-row">
{% if detail.answered %}
<div class="col-8 card-survey-completed">{{ _('COMPLETED') }}</div>
{% else %}
<div class="col-8 card-survey-new">{{ _('NEW') }}</div>
{% endif %}
<div class="col-4 small-text survey-info text-end">{{ detail.est_minutes }} {{ _('min') }}</div>
</div>
<div class="row m-3 text-center survey-title">
{% if not detail.answered %}
<img src="/static/img/survey_external.svg" class="card-survey-icon-external">
{% else %}
<img src="/static/img/survey_external_taken.svg" class="card-survey-icon-external">
{% endif %}
</div>
<div class="row text-center">
{% if not detail.answered %}
<span class="survey-title">{{ detail.survey_template_title|e }}</span>
{% else %}
<span class="survey-title-taken">{{ detail.survey_template_title|e }}</span>
{% endif %}
</div>
</div>
{% if not detail.answered %}
</a>
{% endif %}
</div>
{% endfor %}
</div>
{% endif %}
</div>
<!-- Modal -->
<div class="modal fade" id="source_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<img src="/static/img/survey_external.svg">
<span class="survey-title" id="modal-title"></span>
</div>
<div class="modal-body">
<p id="survey-description" class="survey-description"></p>
<p id="survey-warning" class="survey-warning">{{ _('You will only have one opportunity to take this survey. Please make sure you have ample time before you start.') }}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white-blue-border" id="cancel" onClick="hideModal();">{{ _('Maybe Later') }}</button>
<button type="button" class="btn btn-blue-gradient" id="take-survey">{{ _('Take This Survey Now') }}</button>
</div>
</div>
</div>
</div>
{% endblock %}