-
Notifications
You must be signed in to change notification settings - Fork 24
/
map_actions.html
196 lines (180 loc) · 12.9 KB
/
map_actions.html
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
183
184
185
186
187
188
189
190
191
192
193
194
195
196
<div id="map-aside-header__tabpanels" class="tabpanels">
<div id="map-aside__msa-analysis" class="map-aside__msa-analysis">
<div class="map-divider"><h6 class="tab-title">Analysis Themes</h6></div>
<div class="map-divider">
<h4 class="selector-label item-sub">Choose display of Loan Application Records (LAR):</h4>
<select name="geoTypeQuerySelector" id="geoTypeQuerySelector" class="selector">
<option value="selected">Show LAR for Selected MSA</option>
<option value="all_msa">Show LAR for All MSAs on Map</option>
<option value="all">Show all LAR on Map</option>
</select>
<h4 class="selector-label item-sub">Choose how to filter the LAR:</h4>
<select id="action-taken-selector" class="selector">
<option value="all-apps-5" selected data-scale="{{ scaled_median_loans }}">All applications</option>
<option value="all-apps-6" data-scale="{{ scaled_median_loans }}">Applications and purchases</option>
<option value="originations-1" data-scale="{{ scaled_median_loans }}">Originations</option>
</select>
</div>
<div id="demographics" class="map-divider-minor darker-still">
<h6 class="main-header-name" >Demographics <span class="tooltipsy" title="For complete details on demographic data and how designations are determined please <a href='/map/faq/'>view our Data / FAQ page.</a>"><i class="cf-icon cf-icon-information-round"></i></span></h6>
</div>
<div id="layerOptions">
<div id="inv_non_hisp_white_only_perc" class="map-divider-minor option darker">
<h6 class="sub-header-name">Percent Minority</h6><i class="cf-icon cf-icon-right"></i>
</div>
<div id="plurality" class="map-divider-minor option darker">
<h6 class="sub-header-name">Minority Plurality</h6><i class="cf-icon cf-icon-right"></i>
</div>
<div id="non_hisp_black_only_perc" class="map-divider-minor option darker">
<h6 class="sub-header-name">Percent Black / African-American</h6><i class="cf-icon cf-icon-right"></i>
</div>
<div id="non_hisp_asian_only_perc" class="map-divider-minor option darker">
<h6 class="sub-header-name">Percent Asian</h6><i class="cf-icon cf-icon-right"></i>
</div>
<div id="hispanic_perc" class="map-divider-minor option darker">
<h6 class="sub-header-name">Percent Hispanic</h6><i class="cf-icon cf-icon-right"></i>
</div>
<div id="non_hisp_white_only_perc" class="map-divider-minor option darker">
<h6 class="sub-header-name">Percent White</h6><i class="cf-icon cf-icon-right"></i>
</div>
<div id="marketCriteria" class="map-divider-minor darker-still">
<h6 class="main-header-name" >Market Criteria <span class="tooltipsy" title="For complete details on market data and how designations are determined please <a href='/map/faq/'>view our Data / FAQ page.</a>"><i class="cf-icon cf-icon-information-round"></i></span></h6>
</div>
<div id="median_family_income" class="map-divider-minor option darker">
<h6 class="sub-header-name">Median Family Income</h6><i class="cf-icon cf-icon-right"></i>
</div>
<div id="owner_occupancy" class="map-divider-minor option darker">
<h6 class="sub-header-name">Owner Occupancy</h6><i class="cf-icon cf-icon-right"></i>
</div>
<div id="median_value" class="map-divider-minor option darker">
<h6 class="sub-header-name">Median Home Value</h6><i class="cf-icon cf-icon-right"></i>
</div>
<div id="median_year" class="map-divider-minor option darker">
<h6 class="sub-header-name">Median Year Built</h6><i class="cf-icon cf-icon-right"></i>
</div>
<!-- <div id="fico_scores" class="map-divider-minor option lighter">
<h6 class="sub-header-name">FICO Scores</h6><i class="cf-icon cf-icon-right"></i>
</div> -->
</div>
</div><!-- /.tabpanel -->
{% if lender %}
<div id="map-aside__lender-details" class="map-aside__lender-details">
<div class="map-divider"><h6 class="tab-title">Lender Details - HMDA {{ lender.year }} </div>
<div id="lender-info" class="map-divider"><!-- lender-info ID is in a test, it needs to be changed in the test -->
<div class="header-group">
<h3 class="tab-main">{{ lender.name }}</h3>
<h6 class="item-sub inst-id">{{ lender.institution_id}}</h6>
</div>
<div class="header-group">
<h6 class="item-sub">Regulating Agency</h6>
<h6 class="item-main">{{ lender.agency.acronym }}</h6>
</div>
<div class="header-group">
<h6 class="item-sub">Headquarters</h6>
<h6 class="item-main">{{ lender.zip_code.city }}, {{ lender.zip_code.state }}</h6>
</div>
</div>
<div id="lender-branches" class="map-divider-minor">
<input type="checkbox" id="branchSelect" style="display:inline-block"/><h6 class="sub-header-name" style="display:inline-block">Show Branch Locations <span class="tooltipsy branch-component" title="Locations are only shown for {{lender.name}} and will not include peers or affiliates"><i class="cf-icon cf-icon-information-round"></i></span></h6>
</div>
{% if institution_hierarchy.count > 0 %}
<div id="lender-affiliates" class="map-divider-minor">
<input type="checkbox" id="superSelect" style="display:inline-block"/><h6 class="sub-header-name" style="display:inline-block">Include Parent/Affiliate LAR</h6>
</div>
<div class="map-divider lighter hidden" id="lender-affiliate-list">
{% for inst in institution_hierarchy %}
<div class="header-group divided">
<h6 class="item-main">{{ inst.institution.name }}</h6>
<h6 class="item-sub">{{ inst.institution.institution_id }}</h6>
</div>
{% endfor %}
</div>
{% else %}
<div id="lender-affiliates" class="map-divider-minor">
<input type="checkbox" disabled=true style="display:inline-block"/><h6 class="sub-header-name" style="display:inline-block">No Parents / Affiliates</h6>
</div>
{% endif %}
{% if institution_peers.count > 0 %}
<div id="lender-peers" class="map-divider-minor">
<input type="checkbox" id="peerSelect" style="display:inline-block"/><h6 class="sub-header-name" style="display:inline-block">Show Peer LAR ({{ institution_peers.count}} Peer{{ institution_peers.count|pluralize}}) <span class="tooltipsy peer-component" title="A 'peer' is an institution that has <li class='tooltip-li'>Between 50% and 200% of the total HMDA LAR submissions of the selected entity; and</li><li class='tooltip-li'>A similar percentage of FHA applications in the selected MSA.</li> The LAR from the peer entities are aggregated and displayed on the map when 'Show Peer LAR' is selected. <a href='/map/faq'>Full Peer Details</a>"><i class="cf-icon cf-icon-information-round"></i></span></h6>
</div>
<div style="max-height:275px; overflow:scroll" class="map-divider lighter hidden" id="lender-peers-list">
{% for peer in institution_peers %}
<div class="header-group divided">
<h6 class="item-main"><a class="peer-link" data-instid="{{ peer.institution.institution_id}}" target="_blank" href="#">{{ peer.institution.name }}</a></h6>
<h6 class="item-sub">{{ peer.institution.institution_id }} | {{ peer.lar_count}} LAR</h6>
</div>
{% endfor %}
</div>
{% else %}
<div id="lender-peers" class="map-divider-minor">
<input type="checkbox" disabled=true /><h6 class="sub-header-name" style="display:inline-block">No Peers Available <span class="tooltipsy peer-component" title="Peers are institutions that have between 50% and 200% of {{lender.name}} LAR count, and and a similar percentage of overall FHA Applications in {{ metro.name}}"><i class="cf-icon cf-icon-information-round"></i></span></h6>
</div>
{% endif %}
</div><!-- /.tabpanel -->
{% endif %}
<div id="map-aside__summary-tables" class="map-aside__summary-tables">
<div class="map-divider"><h6 class="tab-title">Summary Tables</div>
<div id="chart-toggle__basic-table" class="chart-toggle map-divider lighter">
<h6 class="sub-header-name" style="display:inline-block">Basic Summary Data Table</h6>
</div>
{% if institution_peers.count > 0 %}
<div id="chart-toggle__peer-table" class="chart-toggle map-divider lighter">
<h6 class="sub-header-name" style="display:inline-block">Peer Summary Data Table</h6>
</div>
{% else %}
<div class="map-divider lighter">
<h6 class="header-name" style="display:inline-block; color: #75787B;">No Peer Table Available</h6>
</div>
{% endif %}
</div><!-- /.tabpanel -->
<div id="map-aside__download-export">
<div class="map-divider darker"><h6 class="tab-title">Export Options</h6></div>
<div class="map-aside__download">
<div class="map-divider print-map">
<div class="header-group">
<h3 class="tab-main">Print map exhibit</h3>
<h6 class="item-sub">Print the map using your current settings and selections</h6>
<a id="printLink" href="/map/print/" class="btn" target="mapPrintView">
<span class="btn_icon__left cf-icon cf-icon-print"></span>
Print
</a>
</div>
</div>
{% if download_url %}
<div class="map-divider download-csv">
<div class="header-group">
<h3 class="tab-main">HMDA data</h3>
<h6 class="item-sub">Download the 2013 loan application records (LAR) for {{ lender.name }} in the {{ metro.name }} MSA.</h6>
<a target="_blank" id="downloadData" data-download="{{ download_url }}" data-super-download="{{ hierarchy_download_url }}" data-peer-download="{{ peer_download_url }}" href="{{ download_url}}" class="btn btn__secondary">
<span class="btn_icon__left cf-icon cf-icon-download"></span>
Download CSV
</a>
</div>
</div>
{% endif %}
<div class="map-divider download-census">
<div class="header-group">
<h3 class="tab-main">Census data</h3>
<h6 class="item-sub">Download the 2010 SF-1 Census demographic data for {{ metro.name }}. This download also includes LAR counts by tract, filtered as explained below.</h6>
<a target="_blank" id="downloadCensus" href="/census/race_summary_csv/" class="btn btn__secondary">
<span class="btn_icon__left cf-icon cf-icon-download"></span>
Download CSV
</a>
</div>
</div>
</div>
</div><!-- /.tabpanel -->
<div id="map-aside__msa-search" class="map-aside__msa-search">
<div class="map-divider"><h6 class="tab-title">MSA Search</h6></div>
<div style="padding:10px">
<form action="{% url 'map' %}" method="GET">
<label for="geoid">Search and select a city:</label>
<input type="text" id="geoid">
<input type="hidden" name="lender" value="{{ lender.agency_id }}{{ lender.respondent_id }}">
<input type="hidden" id="msa-field" name="metro">
<button type="submit" id="metro-search__submit" class="btn btn__disabled" disabled>Go to MSA</button>
</form>
</div>
</div><!-- /.tabpanel -->
</div><!-- /.map-aside-header__tablist -->