2323 .column {
2424 word-break : break-word;
2525 }
26+
27+ .select .is-solid-info ::after {
28+ border-color : white !important ;
29+ }
30+
2631</ style >
2732{% endblock %}
2833
@@ -40,21 +45,43 @@ <h1>Advisory To-Dos</h1>
4045 < form method ="get " class ="box px-6 mx-0 ">
4146
4247 < div class ="field has-addons ">
43- < div class ="control is-expanded has-icons-right ">
48+
49+ < div class ="control ">
50+ < div class ="select is-solid-info ">
51+ < select id ="search-mode " class ="has-background-info has-text-white border-0 ">
52+ < option value ="search " class ="has-background-white has-text-black "> Search</ option >
53+ < option value ="lookup " class ="has-background-white has-text-black "> Lookup</ option >
54+ </ select >
55+ </ div >
56+ </ div >
57+
58+ < div class ="control is-expanded has-icons-right " id ="search-container ">
4459 {{ form.search }}
4560
4661 {% if form.search.value %}
47- < a href ="?{% querystring request search='' %} "
48- class ="icon is-right "
49- style ="pointer-events: auto; cursor: pointer; ">
50- ✕
51- </ a >
62+ < a href ="?{% querystring request search='' avid='' %} "
63+ class ="icon is-right "
64+ style ="pointer-events: auto; cursor: pointer; ">
65+ < i class ="fa fa-close " style ="color:grey "> </ i >
66+ </ a >
67+ {% endif %}
68+ </ div >
69+
70+ < div class ="control is-expanded has-icons-right " id ="lookup-container ">
71+ {{ form.avid }}
72+
73+ {% if form.avid.value %}
74+ < a href ="?{% querystring request search='' avid='' %} "
75+ class ="icon is-right "
76+ style ="pointer-events: auto; cursor: pointer; ">
77+ < i class ="fa fa-close " style ="color:gray "> </ i >
78+ </ a >
5279 {% endif %}
5380 </ div >
5481
5582 < div class ="control ">
5683 < button type ="submit " class ="button is-info ">
57- < i class ="fa fa-search mx-1 "> </ i >
84+ < i class ="fa fa-arrow-right mx-1 "> </ i >
5885 </ button >
5986 </ div >
6087 </ div >
@@ -80,6 +107,7 @@ <h1>Advisory To-Dos</h1>
80107 < th colspan ="4 ">
81108 < form method ="get ">
82109 < input type ="hidden " name ="search " value ="{{ form.search.value|default:'' }} ">
110+ < input type ="hidden " name ="avid " value ="{{ form.avid.value|default:'' }} ">
83111
84112 < div class ="columns is-vcentered px-1 ">
85113 < div class ="column has-text-left " style ="flex: 0 0 20%; "> </ div >
@@ -169,3 +197,39 @@ <h1>Advisory To-Dos</h1>
169197</ div >
170198{% endblock %}
171199
200+ {% block scripts %}
201+ < script >
202+ document . addEventListener ( 'DOMContentLoaded' , function ( ) {
203+
204+ const mode = document . getElementById ( 'search-mode' ) ;
205+ const searchContainer = document . getElementById ( 'search-container' ) ;
206+ const lookupContainer = document . getElementById ( 'lookup-container' ) ;
207+ const params = new URLSearchParams ( window . location . search ) ;
208+
209+ const search = params . get ( 'search' ) ;
210+ const avid = params . get ( 'avid' ) ;
211+
212+ if ( search && search . trim ( ) !== '' ) {
213+ mode . value = 'search' ;
214+ } else if ( avid && avid . trim ( ) !== '' ) {
215+ mode . value = 'lookup' ;
216+ }
217+
218+ function updateMode ( ) {
219+ if ( mode . value === 'lookup' ) {
220+ searchContainer . style . display = 'none' ;
221+ lookupContainer . style . display = '' ;
222+ searchContainer . querySelector ( 'input' ) . value = '' ;
223+ } else {
224+ searchContainer . style . display = '' ;
225+ lookupContainer . style . display = 'none' ;
226+ lookupContainer . querySelector ( 'input' ) . value = '' ;
227+ }
228+ }
229+
230+ mode . addEventListener ( 'change' , updateMode ) ;
231+ updateMode ( ) ;
232+ } ) ;
233+ </ script >
234+
235+ {% endblock %}
0 commit comments