@@ -42,8 +42,19 @@ <h5 class="modal-title">Pathogen</h5>
42
42
</ div >
43
43
</ div >
44
44
</ div >
45
- {{ form.pathogen|as_crispy_field }}
46
-
45
+ < div id ="div_id_pathogen " class ="mb-3 ">
46
+ < div >
47
+ {% for choice in form.pathogen.field.choices %}
48
+ < div class ="form-check ">
49
+ < input type ="checkbox " class ="form-check-input " name ="pathogen " id ="id_pathogen_{{ choice.0 }} " value ="{{ choice.0 }} "
50
+ {% if choice.0 in url_params_dict.pathogen %}
51
+ checked
52
+ {% endif %} >
53
+ < label for ="id_pathogen_{{ choice.0 }} " class ="form-check-label "> {{ choice.1 }}</ label >
54
+ </ div >
55
+ {% endfor %}
56
+ </ div >
57
+ </ div >
47
58
</ div >
48
59
< div class ="card-body ">
49
60
< label for ="id_active " class ="form-label ">
@@ -103,7 +114,31 @@ <h5 class="modal-title">Available Geography</h5>
103
114
< a role ="button "> All</ a >
104
115
< a role ="button "> Clear</ a >
105
116
</ div >
106
- {{ form.available_geography|as_crispy_field }}
117
+ < div id ="div_id_available_geography " class ="mb-3 ">
118
+ {% for choice in form.available_geography.field.choices %}
119
+ < div class ="form-check "
120
+ {% if forloop.counter > 5 and not url_params_dict.available_geography %}
121
+ style="display: none;"
122
+ {% endif %}
123
+ >
124
+ < input type ="checkbox " class ="form-check-input " name ="available_geography " id ="id_available_geography_{{ choice.0 }} " value ="{{ choice.0 }} "
125
+ {% if choice.0 in url_params_dict.available_geography %}
126
+ checked
127
+
128
+ {% endif %} >
129
+ < label for ="id_available_geography_{{ choice.0 }} " class ="form-check-label "> {{ choice.1 }}</ label >
130
+ </ div >
131
+ {% endfor %}
132
+ {% if form.available_geography|length > 5 %}
133
+ < a href ="" onclick ="showAllOptions(event, div_id_available_geography) ">
134
+ {% if url_params_dict.available_geography %}
135
+ Show less...
136
+ {% else %}
137
+ Show more...
138
+ {% endif %}
139
+ </ a >
140
+ {% endif %}
141
+ </ div >
107
142
</ div >
108
143
< div class ="card-body ">
109
144
< label for ="id_signal_type " class ="form-label ">
@@ -135,7 +170,29 @@ <h5 class="modal-title">Signal Type</h5>
135
170
< a role ="button "> All</ a >
136
171
< a role ="button "> Clear</ a >
137
172
</ div >
138
- {{ form.signal_type|as_crispy_field }}
173
+ < div id ="div_id_signal_type " class ="mb-3 ">
174
+ {% for choice in form.signal_type.field.choices %}
175
+ < div class ="form-check "
176
+ {% if forloop.counter > 5 and not url_params_dict.signal_type %}
177
+ style="display: none;"
178
+ {% endif %}>
179
+ < input type ="checkbox " class ="form-check-input " name ="signal_type " id ="id_signal_type_{{ choice.0 }} " value ="{{ choice.0 }} "
180
+ {% if choice.0 in url_params_dict.signal_type %}
181
+ checked
182
+ {% endif %} >
183
+ < label for ="id_signal_type_{{ choice.0 }} " class ="form-check-label "> {{ choice.1 }}</ label >
184
+ </ div >
185
+ {% endfor %}
186
+ {% if form.signal_type|length > 5 %}
187
+ < a href ="" onclick ="showAllOptions(event, div_id_signal_type) ">
188
+ {% if url_params_dict.signal_type %}
189
+ Show less...
190
+ {% else %}
191
+ Show more...
192
+ {% endif %}
193
+ </ a >
194
+ {% endif %}
195
+ </ div >
139
196
</ div >
140
197
< div class ="card-body ">
141
198
< label for ="id_category " class ="form-label ">
@@ -231,7 +288,30 @@ <h5 class="modal-title">Source</h5>
231
288
< a role ="button "> All</ a >
232
289
< a role ="button "> Clear</ a >
233
290
</ div >
234
- {{ form.source|as_crispy_field }}
291
+ < div id ="div_id_source " class ="mb-3 ">
292
+ {% for choice in form.source.field.choices %}
293
+ < div class ="form-check "
294
+ {% if forloop.counter > 5 and not url_params_dict.source %}
295
+ style="display: none;"
296
+ {% endif %}
297
+ >
298
+ < input type ="checkbox " class ="form-check-input " name ="source " id ="id_source_{{ choice.0 }} " value ="{{ choice.0 }} "
299
+ {% if choice.0 in url_params_dict.source %}
300
+ checked
301
+ {% endif %} >
302
+ < label for ="id_source_{{ choice.0 }} " class ="form-check-label "> {{ choice.1 }}</ label >
303
+ </ div >
304
+ {% endfor %}
305
+ {% if form.source|length > 5 %}
306
+ < a href ="" onclick ="showAllOptions(event, div_id_source) ">
307
+ {% if url_params_dict.source %}
308
+ Show less...
309
+ {% else %}
310
+ Show more...
311
+ {% endif %}
312
+ </ a >
313
+ {% endif %}
314
+ </ div >
235
315
</ div >
236
316
< div class ="card-body ">
237
317
< label for ="id_time_label " class ="form-label ">
@@ -308,9 +388,26 @@ <h5 class="modal-title">Time Label</h5>
308
388
309
389
< script >
310
390
391
+ function showAllOptions ( event , parentDiv ) {
392
+ event . preventDefault ( ) ;
393
+ var childDivs = parentDiv . querySelectorAll ( '.form-check' ) ;
394
+ for ( i = 5 ; i < childDivs . length ; i ++ ) {
395
+ if ( childDivs [ i ] . style . display === 'none' ) {
396
+ childDivs [ i ] . style . display = 'block' ;
397
+ } else {
398
+ childDivs [ i ] . style . display = 'none' ;
399
+ }
400
+ }
401
+ if ( event . target . innerText === 'Show more...' ) {
402
+ event . target . innerText = 'Show less...' ;
403
+ } else {
404
+ event . target . innerText = 'Show more...' ;
405
+ }
406
+ }
407
+
311
408
// Add an event listener to the 'order_by' select element
312
409
document . getElementById ( 'id_order_by' ) . addEventListener ( 'change' , function ( ) {
313
- document . getElementById ( 'filters -form' ) . submit ( ) ;
410
+ document . getElementById ( 'x -form' ) . submit ( ) ;
314
411
} ) ;
315
412
316
413
0 commit comments