Difference between revisions of "Team:William and Mary/Database"

 
(41 intermediate revisions by 2 users not shown)
Line 8: Line 8:
 
   <style>
 
   <style>
 
     ul.tag-type {
 
     ul.tag-type {
−
      column-width: 300px;
 
 
       list-style: none;
 
       list-style: none;
 +
      column-width: 300px;
 
     }
 
     }
  
Line 20: Line 20:
 
     }
 
     }
  
−
     .tag-label{
+
     .tag-label {
−
       margin-left: 25px;
+
       margin-left: 15px;
 +
      vertical-align: top;
 +
      width: 260px;
 +
      font-size: 16px;
 
     }
 
     }
  
 +
    .tag {
 +
      display: inline-block;
 +
    }
 
   </style>
 
   </style>
 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.min.js"></script>
 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.min.js"></script>
Line 30: Line 36:
 
   <script src="http://cdn.jsdelivr.net/alasql/0.3/alasql.min.js"></script>
 
   <script src="http://cdn.jsdelivr.net/alasql/0.3/alasql.min.js"></script>
 
   <script src='https://2017.igem.org/Team:William_and_Mary/outreach_db_js?action=raw&ctype=text/javascript' type='text/javascript'></script>
 
   <script src='https://2017.igem.org/Team:William_and_Mary/outreach_db_js?action=raw&ctype=text/javascript' type='text/javascript'></script>
 +
  <script src='https://cdnjs.cloudflare.com/ajax/libs/fuse.js/3.0.4/fuse.min.js'></script>
 
   <!--script src='outreach_db.js'></script-->
 
   <!--script src='outreach_db.js'></script-->
  
Line 38: Line 45:
 
     {{#each this}}
 
     {{#each this}}
 
     <fieldset id='{{@key}}' value='{{@key}}'>
 
     <fieldset id='{{@key}}' value='{{@key}}'>
−
       <legend>{{@key}}</legend>
+
       <legend style='cursor: pointer'>{{@key}}</legend>
−
       <ul class='tag-type'>
+
       <ul class='tag-type' style='display:none'>
 
         {{#each this}}
 
         {{#each this}}
 
         <li class='tag'>
 
         <li class='tag'>
−
           <input type='checkbox' name='{{@../key}}' value='{{this}}' class='tag-checkbox'/><label class='tag-label'><div style='font-size:
+
           <input type='checkbox' name='{{@../key}}' value='{{this}}' class='tag-checkbox' /><label class='tag-label'>{{this}}</label>
−
16px;'>{{this}}</div></label>
+
 
         </li>
 
         </li>
 
         <br> {{/each}}
 
         <br> {{/each}}
Line 63: Line 69:
  
  
−
   <!-----Search Results------>
+
   <!--Search Results------>
  
  
Line 70: Line 76:
 
     {{#each this}}
 
     {{#each this}}
 
     <div class='search-result' style="background-color:#DBDBDB; text-align:left; vertical-align: middle; padding:20px 47px;">
 
     <div class='search-result' style="background-color:#DBDBDB; text-align:left; vertical-align: middle; padding:20px 47px;">
−
       <div class='project-title' style='font-size: 30px; margin-right: 250px;'>{{[Outreach Project]}}</div>
+
       <div class='project-title' style='font-size: 25px; margin-right: 250px;'><b>{{[Outreach Project]}}</b></div>
−
       <div style='font-size: 20px; padding-top: 0px; padding-bottom: 6px;margin-top:-30px;'><span class="pull-right"><a class='school-info' href='{{[Wiki hyperlink]}}'>{{[School]}} {{[Year]}} {{[School Level]}}</a></span></div>
+
       <div style='font-size: 17px; padding-top: 0px; padding-bottom: 6px;margin-top:-30px;'><span class="pull-right"><a class='school-info' href='{{[Wiki hyperlink]}}'>{{[School]}} {{[Year]}} {{[School Level]}}</a></span></div>
  
 
       <div style='font-size: 20px; padding-top: 26px; padding-bottom: px;'><span class="pull-right"><span class='outreach-category'>{{[Outreach Category]}}</span></span>
 
       <div style='font-size: 20px; padding-top: 26px; padding-bottom: px;'><span class="pull-right"><span class='outreach-category'>{{[Outreach Category]}}</span></span>
 
       </div>
 
       </div>
−
       <div style='font-size: 17px; padding-bottom: 15px;margin-top: 5px; margin-right: 350px;text-indent: 15px;'>
+
       <div style='font-size: 17px; padding-bottom: 15px;padding-left: 10px;margin-top: 5px; margin-right: 350px;text-indent: px;'>
 
         {{[Description]}}
 
         {{[Description]}}
 
       </div>
 
       </div>
 
       <dl>
 
       <dl>
−
         <dt>
+
{{#if [Award]}}
 +
         <dt style="font-size:20px;">
 
Award
 
Award
−
</dt>
+
</dt>{{/if}}
 
         <dd>
 
         <dd>
−
           <div style='font-size: 20px;'>
+
           {{#if [Award]}}<div style='font-size: 16px;'>
−
             {{[Award]}}</div>
+
             {{[Award]}}</div>{{/if}}
 
         </dd>
 
         </dd>
−
         <dt>
+
         <dt style="font-size:20px;">
 
Project Tag
 
Project Tag
 
</dt>
 
</dt>
 
         <dd>
 
         <dd>
−
           <div style='font-size: 20px;'>
+
           <div style='font-size: 16px;'>
 
             {{[Project Tag]}}</div>
 
             {{[Project Tag]}}</div>
 
         </dd>
 
         </dd>
Line 137: Line 144:
 
         function() {
 
         function() {
 
           $('#checkbox-area input').change(search);
 
           $('#checkbox-area input').change(search);
 +
          $("fieldset legend").click(function() {
 +
            console.log('legend clicked', this)
 +
            $(this).parent().find(".tag-type").toggle();
 +
          });
 +
          outreach_arr = alasql('select * from outreach')
 +
          var options = {
 +
            shouldSort: true,
 +
            threshold: 0.6,
 +
            location: 0,
 +
            distance: 100,
 +
            maxPatternLength: 32,
 +
            minMatchCharLength: 1,
 +
            keys: Object.keys(outreach_arr[0])
 +
          };
 +
          fuse = new Fuse(outreach_arr, options); // "list" is the item array
 
         }
 
         }
 
       );
 
       );
−
      $("fieldset legend").click(function() {
 
−
        console.log('legend clicked', this)
 
−
        if ($(this).parent().children().length == 2)
 
−
          $(this).parent().find("div").toggle();
 
−
        else {
 
−
          $(this).parent().wrapInner("<div>");
 
−
          $(this).appendTo($(this).parent().parent());
 
−
          $(this).parent().find("div").toggle();
 
−
        }
 
−
      });
 
−
 
 
     });
 
     });
  
Line 184: Line 195:
 
     }
 
     }
  
 +
    function fulltext_search(str){
 +
      show_results(search_result = fuse.search(str))
 +
    }
 
     function show_details(outreach_id) {
 
     function show_details(outreach_id) {
 
       datastring = encodeURIComponent(
 
       datastring = encodeURIComponent(
Line 221: Line 235:
  
 
<body>
 
<body>
 +
  <br></br>
 
   <br></br>
 
   <br></br>
  
−
   <center>DATABASE</center>
+
   <center><img src="https://static.igem.org/mediawiki/2017/4/41/T--William_and_Mary--Database383.jpeg" width=360/></center>
−
  <br></br>
+
−
  <center>
+
−
    <div>
+
−
      <form onsubmit="show_details(parseInt(document.getElementById('input-id').value, 10).toString())">
+
−
        Quick ID Jump: <input type="number" name="id" id="input-id">
+
−
        <input type="submit" id="getid" value="Go">
+
−
      </form>
+
−
    </div>
+
−
  </center>
+
 
   <br></br>
 
   <br></br>
 +
 +
  
 
   <!----start's here---->
 
   <!----start's here---->
  
 
   <div class="container">
 
   <div class="container">
−
     <div id='checkbox-area' style='padding-top: 150px;'>
+
    <div class="row">
 +
      <div class="col-lg-11" style='padding: top: 50px;font-size: 16px;'>
 +
        <form onsubmit="show_details(parseInt(document.getElementById('input-id').value, 10).toString()); return false">
 +
          Quick ID Jump:<br /> <input type="number" name="id" id="input-id">
 +
          <input type="submit" id="getid" value="Go">
 +
        </form>
 +
        <form onsubmit="fulltext_search(document.getElementById('input-fuzzy').value); return false">
 +
          Search:<br /> <input type="text" name="fuzzy" id="input-fuzzy">
 +
          <input type="submit" id="get-fuzzy" value="Go">
 +
      </div>
 +
    </div>
 +
 
 +
    <center>
 +
      OR
 +
    </center>
 +
 
 +
    <h2>Search By Tags:</h2>
 +
     <div id='checkbox-area' style='padding-top: 30px;'>
  
 
     </div>
 
     </div>

Latest revision as of 02:46, 2 November 2017

Outreach Database: select tags for search





Quick ID Jump:
Search:
OR

Search By Tags: