Advanced Search TS

src/app/components/browse/search-bar/search-bar.component.html

@@ -8,8 +8,8 @@
   </div>
 
   <div id="quantityDropdownItem" [class.hidden]="!showAdvanced" class="item">
-    <div class="ui compact selection dropdown">
-      <input name="quantityMatch" type="hidden" value="all">
+    <div #quantityDropdown class="ui compact selection dropdown">
+      <input name="quantityMatch" type="hidden">
       <i class="dropdown icon"></i>
       <div class="text"><b>all</b> words match</div>
       <div class="menu">
@@ -20,7 +20,7 @@
   </div>
 
   <div id="similarityDropdownItem" [class.hidden]="!showAdvanced" class="item">
-    <div class="ui compact selection dropdown">
+    <div #similarityDropdown class="ui compact selection dropdown">
       <input name="similarityMatch" type="hidden" value="similar">
       <i class="dropdown icon"></i>
       <div class="text"><b>similar</b> words match</div>
@@ -41,159 +41,159 @@
 
 <div id="advancedSearchForm" [class.collapsed]="!showAdvanced" class="ui horizontal segments">
   <div class="ui secondary segment">
-    <h4 class="ui header">Search for:</h4>
     <div class="grouped fields">
+      <h4 class="ui header">Search for:</h4>
       <div class="field">
         <div class="ui checkbox">
-          <input type="checkbox" name="name">
+          <input type="checkbox" name="name" [(ngModel)]="searchSettings.fields.name">
           <label>Name</label>
         </div>
       </div>
       <div class="field">
         <div class="ui checkbox">
-          <input type="checkbox" name="artist">
+          <input type="checkbox" name="artist" [(ngModel)]="searchSettings.fields.artist">
           <label>Artist</label>
         </div>
       </div>
       <div class="field">
         <div class="ui checkbox">
-          <input type="checkbox" name="album">
+          <input type="checkbox" name="album" [(ngModel)]="searchSettings.fields.album">
           <label>Album</label>
         </div>
       </div>
       <div class="field">
         <div class="ui checkbox">
-          <input type="checkbox" name="genre">
+          <input type="checkbox" name="genre" [(ngModel)]="searchSettings.fields.genre">
           <label>Genre</label>
         </div>
       </div>
       <div class="field">
         <div class="ui checkbox">
-          <input type="checkbox" name="year">
+          <input type="checkbox" name="year" [(ngModel)]="searchSettings.fields.year">
           <label>Year</label>
         </div>
       </div>
       <div class="field">
         <div class="ui checkbox">
-          <input type="checkbox" name="charter">
+          <input type="checkbox" name="charter" [(ngModel)]="searchSettings.fields.charter">
           <label>Charter</label>
         </div>
       </div>
       <div class="field">
         <div class="ui checkbox">
-          <input type="checkbox" name="tag">
+          <input type="checkbox" name="tag" [(ngModel)]="searchSettings.fields.tag">
           <label>Tag</label>
         </div>
       </div>
     </div>
   </div>
   <div class="ui secondary segment">
-    <h4 class="ui header">Must include:</h4>
     <div class="grouped fields">
+      <h4 class="ui header">Must include:</h4>
       <div class="field">
         <div class="ui checkbox">
-          <input type="checkbox" name="sections">
+          <input type="checkbox" name="sections" [(ngModel)]="searchSettings.tags.sections">
           <label>Sections</label>
         </div>
       </div>
       <div class="field">
         <div class="ui checkbox">
-          <input type="checkbox" name="starpower">
+          <input type="checkbox" name="starpower" [(ngModel)]="searchSettings.tags['star power']">
           <label>Star Power</label>
         </div>
       </div>
       <div class="field">
         <div class="ui checkbox">
-          <input type="checkbox" name="forcing">
+          <input type="checkbox" name="forcing" [(ngModel)]="searchSettings.tags.forcing">
           <label>Forcing</label>
         </div>
       </div>
       <div class="field">
         <div class="ui checkbox">
-          <input type="checkbox" name="taps">
+          <input type="checkbox" name="taps" [(ngModel)]="searchSettings.tags.taps">
           <label>Taps</label>
         </div>
       </div>
       <div class="field">
         <div class="ui checkbox">
-          <input type="checkbox" name="lyrics">
+          <input type="checkbox" name="lyrics" [(ngModel)]="searchSettings.tags.lyrics">
           <label>Lyrics</label>
         </div>
       </div>
       <div class="field">
         <div class="ui checkbox">
-          <input type="checkbox" name="videobackground">
+          <input type="checkbox" name="videobackground" [(ngModel)]="searchSettings.tags.video">
           <label>Video Background</label>
         </div>
       </div>
       <div class="field">
         <div class="ui checkbox">
-          <input type="checkbox" name="stems">
+          <input type="checkbox" name="stems" [(ngModel)]="searchSettings.tags.stems">
           <label>Audio Stems</label>
         </div>
       </div>
       <div class="field">
         <div class="ui checkbox">
-          <input type="checkbox" name="solosections">
+          <input type="checkbox" name="solosections" [(ngModel)]="searchSettings.tags['solo sections']">
           <label>Solo Sections</label>
         </div>
       </div>
       <div class="field">
         <div class="ui checkbox">
-          <input type="checkbox" name="opennotes">
+          <input type="checkbox" name="opennotes" [(ngModel)]="searchSettings.tags['open notes']">
           <label>Open Notes</label>
         </div>
       </div>
     </div>
   </div>
   <div class="ui secondary segment">
-    <h4 class="ui header">Instruments:</h4>
     <div class="grouped fields">
+      <h4 class="ui header">Instruments:</h4>
       <div class="field">
         <div class="ui checkbox">
-          <input type="checkbox" name="guitar">
+          <input type="checkbox" name="guitar" [(ngModel)]="searchSettings.instruments.guitar">
           <label>Guitar</label>
         </div>
       </div>
       <div class="field">
         <div class="ui checkbox">
-          <input type="checkbox" name="bass">
+          <input type="checkbox" name="bass" [(ngModel)]="searchSettings.instruments.bass">
           <label>Bass</label>
         </div>
       </div>
       <div class="field">
         <div class="ui checkbox">
-          <input type="checkbox" name="rhythm">
+          <input type="checkbox" name="rhythm" [(ngModel)]="searchSettings.instruments.rhythm">
           <label>Rhythm</label>
         </div>
       </div>
       <div class="field">
         <div class="ui checkbox">
-          <input type="checkbox" name="keys">
+          <input type="checkbox" name="keys" [(ngModel)]="searchSettings.instruments.keys">
           <label>Keys</label>
         </div>
       </div>
       <div class="field">
         <div class="ui checkbox">
-          <input type="checkbox" name="drums">
+          <input type="checkbox" name="drums" [(ngModel)]="searchSettings.instruments.drums">
           <label>Drums</label>
         </div>
       </div>
       <div class="field">
         <div class="ui checkbox">
-          <input type="checkbox" name="guitarghl">
+          <input type="checkbox" name="guitarghl" [(ngModel)]="searchSettings.instruments.guitarghl">
           <label>GHL Guitar</label>
         </div>
       </div>
       <div class="field">
         <div class="ui checkbox">
-          <input type="checkbox" name="bassghl">
+          <input type="checkbox" name="bassghl" [(ngModel)]="searchSettings.instruments.bassghl">
           <label>GHL Bass</label>
         </div>
       </div>
       <div class="field">
         <div class="ui checkbox">
-          <input type="checkbox" name="vocals">
+          <input type="checkbox" name="vocals" [(ngModel)]="searchSettings.instruments.vocals">
           <label>Vocals</label>
         </div>
       </div>
@@ -204,31 +204,31 @@
     <div class="grouped fields">
       <div class="field">
         <div class="ui checkbox">
-          <input type="checkbox" name="expert">
+          <input type="checkbox" name="expert" [(ngModel)]="searchSettings.difficulties.expert">
           <label>Expert</label>
         </div>
       </div>
       <div class="field">
         <div class="ui checkbox">
-          <input type="checkbox" name="hard">
+          <input type="checkbox" name="hard" [(ngModel)]="searchSettings.difficulties.hard">
           <label>Hard</label>
         </div>
       </div>
       <div class="field">
         <div class="ui checkbox">
-          <input type="checkbox" name="medium">
+          <input type="checkbox" name="medium" [(ngModel)]="searchSettings.difficulties.medium">
           <label>Medium</label>
         </div>
       </div>
       <div class="field">
         <div class="ui checkbox">
-          <input type="checkbox" name="easy">
+          <input type="checkbox" name="easy" [(ngModel)]="searchSettings.difficulties.easy">
           <label>Easy</label>
         </div>
       </div>
       <h4 class="ui header">Difficulty range:</h4>
       <div class="field">
-        <div class="ui labeled ticked range slider" id="diffSlider"></div>
+        <div #diffSlider class="ui labeled ticked range slider" id="diffSlider"></div>
       </div>
     </div>
   </div>