-
Notifications
You must be signed in to change notification settings - Fork 16
/
source.jinja2
158 lines (151 loc) · 8.83 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
{% 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 %}
{% 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">
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;
}
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 />
<p class="tmi-tooltip">
{{ _('The Microsetta Initiative aims to generate quality data that can help you better understand your microbiome, help scientists design better studies, and improve the world\'s understanding of the human microbiome.') }}
</p>
<p class="tmi-tooltip">
{{ _('Answering our surveys can help us do just that. To get started, build out your profile by answering the surveys below. We will alert you when new surveys become available.') }}
</p>
<div class="row mt-5">
{% for detail in local_surveys %}
<div class="col-6 col-md-4 p-2">
<div class="card card-survey">
<div class="row m-2 survey-info-row">
{% if detail.date_last_taken != None %}
<div class="col-8 small-text survey-info">{{ _('Last modified') }} {{ detail.date_last_taken }}</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 }} {{ _('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">
{% if detail.new_tab %}
<a class="survey-title mx-auto" href="/accounts/{{ account_id }}/sources/{{ source_id }}/take_survey?survey_template_id={{ detail.survey_template_id }}" target="_blank">
{% else %}
<a class="survey-title mx-auto" href="/accounts/{{ account_id }}/sources/{{ source_id }}/take_survey?survey_template_id={{ detail.survey_template_id }}">
{% endif %}
<img src="/static/img/{{ detail.icon }}" class="card-survey-icon">
</a>
</div>
</div>
{% if detail.new_tab %}
<a class="survey-title mx-auto" href="/accounts/{{ account_id }}/sources/{{ source_id }}/take_survey?survey_template_id={{ detail.survey_template_id }}" target="_blank">
{% else %}
<a class="survey-title mx-auto" href="/accounts/{{ account_id }}/sources/{{ source_id }}/take_survey?survey_template_id={{ detail.survey_template_id }}">
{% endif %}
{{ detail.survey_template_title|e }}
</a>
</div>
</div>
{% endfor %}
</div>
<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-6 col-md-4 p-2">
<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">
{% if not detail.answered %}
<a class="survey-title" 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">
<img src="/static/img/survey_external.svg" class="card-survey-icon-external">
</a>
{% else %}
<img src="/static/img/survey_external_taken.svg" class="card-survey-icon-external">
{% endif %}
{% if not detail.answered %}
</a>
{% endif %}
</div>
<div class="row text-center">
{% if not detail.answered %}
<a class="survey-title" 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">
{{ detail.survey_template_title|e }}
</a>
{% else %}
<span class="survey-title-taken">{{ detail.survey_template_title|e }}</span>
{% endif %}
</div>
</div>
</div>
{% endfor %}
</div>
</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 %}