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

 
(92 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
{{Team:William_and_Mary/CSS_RESET}}
+
{{Team:William_and_Mary/CSS_RESET}} {{Team:William_and_Mary/CSS_FIX}} {{Team:William_and_Mary/SOURCE}} {{Team:William_and_Mary/HEADER2}}
−
{{Team:William_and_Mary/CSS_FIX}}
+
−
{{Team:William_and_Mary/SOURCE}}
+
−
{{Team:William_and_Mary/HEADER2}}
+
 
<html lang="en">
 
<html lang="en">
  
  
 
<head>
 
<head>
−
<meta charset="UTF-8">
+
  <meta charset="UTF-8">
−
<title>Outreach Database: select tags for search</title>
+
  <title>Outreach Database: select tags for search</title>
−
<style>
+
  <style>
−
ul.tag-type{
+
    ul.tag-type {
−
column-width: 300px;
+
      list-style: none;
−
list-style: none;
+
      column-width: 300px;
−
}
+
    }
−
div.search-result{
+
−
margin-top: 30px;
+
−
}
+
−
.school-info{
+
−
color: #006621;
+
−
}
+
−
</style>
+
−
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.min.js"></script>
+
−
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
+
−
<script src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.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='outreach_db.js'></script-->
+
−
<script id="checkbox-area-template" type="text/x-handlebars-template">
+
−
{{#each this}}
+
−
<fieldset id='{{@key}}' value='{{@key}}'>
+
−
<legend>{{@key}}</legend>
+
−
<ul class='tag-type'>
+
−
{{#each this}}
+
−
<li class='tag'>
+
−
<input type='checkbox' name='{{@../key}}' value='{{this}}' class='tag-checkbox' style='float:left'/><label class='tag-label'>{{this}}</label>
+
−
</li>
+
−
<br>
+
−
{{/each}}
+
−
</ul>
+
−
</fieldset>
+
−
{{/each}}
+
−
</script>
+
  
−
<script id="querystring-template" type="text/x-handlebars-template">
+
    div.search-result {
−
{{#each this}}
+
      margin-top: 30px;
−
{{#if @first}}
+
    }
−
WHERE
+
−
{{/if}}
+
−
(
+
−
{{#each this}}
+
−
[{{@../key}}] LIKE ("%{{this}}%")
+
−
{{#unless @last}} OR {{/unless}}
+
−
{{/each}}
+
−
)
+
  
−
{{#unless @last}}AND{{/unless}}
+
    .school-info {
−
{{/each}}
+
      color: #006621;
−
</script>
+
    }
  
−
<script id="search-results-template" type="text/x-handlebars-template">
+
    .tag-label {
 +
      margin-left: 15px;
 +
      vertical-align: top;
 +
      width: 260px;
 +
      font-size: 16px;
 +
    }
  
−
{{#each this}}
+
    .tag {
−
<div class='search-result' style="background-color:#DBDBDB; text-align:left; vertical-align: middle; padding:20px 47px;">
+
      display: inline-block;
−
<div class='project-title' style='font-size: 30px;'>{{[Outreach Project]}}</div>
+
    }
−
<div style='font-size: 20px; padding-top: 15px; padding-bottom: 15px;'><a class='school-info' href='{{[Wiki hyperlink]}}'>{{[School]}} {{[Year]}} {{[School Level]}}</a></div>
+
  </style>
−
+
  <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.min.js"></script>
−
<div style='font-size: 20px; padding-top: px; padding-bottom: 15px;'><span class='outreach-category'>{{[Outreach Category]}}</span></div>
+
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
−
<div style='font-size: 20px;'>
+
  <script src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js'></script>
−
{{[Product Description]}}
+
  <script src="http://cdn.jsdelivr.net/alasql/0.3/alasql.min.js"></script>
−
</div>
+
  <script src='https://2017.igem.org/Team:William_and_Mary/outreach_db_js?action=raw&ctype=text/javascript' type='text/javascript'></script>
−
<dl>
+
  <script src='https://cdnjs.cloudflare.com/ajax/libs/fuse.js/3.0.4/fuse.min.js'></script>
−
<dt>
+
  <!--script src='outreach_db.js'></script-->
 +
 
 +
 
 +
 
 +
 
 +
  <script id="checkbox-area-template" type="text/x-handlebars-template">
 +
    {{#each this}}
 +
    <fieldset id='{{@key}}' value='{{@key}}'>
 +
      <legend style='cursor: pointer'>{{@key}}</legend>
 +
      <ul class='tag-type' style='display:none'>
 +
        {{#each this}}
 +
        <li class='tag'>
 +
          <input type='checkbox' name='{{@../key}}' value='{{this}}' class='tag-checkbox' /><label class='tag-label'>{{this}}</label>
 +
        </li>
 +
        <br> {{/each}}
 +
      </ul>
 +
    </fieldset>
 +
    {{/each}}
 +
  </script>
 +
 
 +
 
 +
 
 +
 
 +
  <script id="querystring-template" type="text/x-handlebars-template">
 +
    {{#each this}} {{#if @first}} WHERE {{/if}} ( {{#each this}} [{{@../key}}] LIKE ("%{{this}}%") {{#unless @last}} OR {{/unless}} {{/each}} ) {{#unless @last}}AND{{/unless}} {{/each}}
 +
  </script>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
  <!--Search Results------>
 +
 
 +
 
 +
  <script id="search-results-template" type="text/x-handlebars-template">
 +
 
 +
    {{#each this}}
 +
    <div class='search-result' style="background-color:#DBDBDB; text-align:left; vertical-align: middle; padding:20px 47px;">
 +
      <div class='project-title' style='font-size: 25px; margin-right: 250px;'><b>{{[Outreach Project]}}</b></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>
 +
      <div style='font-size: 17px; padding-bottom: 15px;padding-left: 10px;margin-top: 5px; margin-right: 350px;text-indent: px;'>
 +
        {{[Description]}}
 +
      </div>
 +
      <dl>
 +
{{#if [Award]}}
 +
        <dt style="font-size:20px;">
 
Award
 
Award
−
</dt>
+
</dt>{{/if}}
−
<dd>
+
        <dd>
−
{{[Award]}}
+
          {{#if [Award]}}<div style='font-size: 16px;'>
−
</dd>
+
            {{[Award]}}</div>{{/if}}
−
<dt>
+
        </dd>
 +
        <dt style="font-size:20px;">
 
Project Tag
 
Project Tag
 
</dt>
 
</dt>
−
<dd>
+
        <dd>
−
{{[Project Tag]}}
+
          <div style='font-size: 16px;'>
−
</dd>
+
            {{[Project Tag]}}</div>
−
</dl>
+
        </dd>
−
<a class='details-link' href='#' outreach-id='{{id}}'>Details</a>
+
      </dl>
−
</div>
+
      <a class='details-link' href='#' outreach-id='{{id}}'>Details</a>
−
{{/each}}
+
    </div>
 +
    {{/each}}
  
−
</script>
+
  </script>
−
<script type='text/javascript' >
+
  <!---end of search results--->
−
$(document).ready(function(){
+
−
var OUTREACH_URL = 'https://docs.google.com/spreadsheets/d/1lkZSXS3HXTS_ZyPZytyIW0Keer_aKy8rr1_pxV2-fSs/pubhtml?gid=1097044156&single=true'
+
−
outreach_db.init(
+
−
).then(  // scrape all tags from data
+
−
outreach_db.list_tags
+
−
).then(  // initialize checkbox area using tag data
+
−
init_checkbox_area
+
−
).then(  // now that we have the checkboxes, we can hook them up with the search function
+
−
function(){
+
−
$('#checkbox-area input').change(search);
+
−
}
+
−
);
+
  
−
});
 
  
−
function read_checkbox_area(){
 
−
var checked_tags = {}
 
−
// returns array of form {tag_type: [tag, tag, tag], tag_type2: [tag, tag, tag]}
 
−
$('#checkbox-area fieldset').each(function(idx, elm){
 
−
checked_tags[$(elm).attr('value')] = $(elm).find('input:checked').map(function(idx1, elm1){
 
−
return $(elm1).attr('value')
 
−
}).get()
 
−
})
 
−
console.log(checked_tags)
 
−
return checked_tags;
 
−
}
 
  
 +
  <script id=mv type=text/x-handlebars-template>
  
 +
    <div class='details-page'>
 +
      <h1 class='project-title'>{{[Outreach Project]}}</h1>
 +
      <a class='school-info' href='{{[Wiki hyperlink]}}'>{{[School]}}-{{[Year]}}-{{[School Level]}}</a>
 +
      <br/>
 +
      <span class='outreach-category'>{{[Outreach Category]}}</span>
 +
      <p>
 +
        {{{[Product Description]}}}
 +
      </p>
  
−
function search(){
+
      {{#each this}}
 +
      <h2>{{@key}}:</h2>
  
−
// From light comes darkness, and from darkness, light.
+
      <div>
−
// i.e. Don't filter types of which no tags has been selected
+
        {{{this}}}
 +
      </div>
 +
      {{/each}}
 +
    </div>
 +
  </script>
  
−
var ordburl = 'https://docs.google.com/spreadsheets/d/1lkZSXS3HXTS_ZyPZytyIW0Keer_aKy8rr1_pxV2-fSs/pubhtml?gid=1097044156&single=true';
 
−
selected_tags = read_checkbox_area()
 
−
everything = "CAST([id] AS STRING), CAST([School] AS STRING),  CAST([Section] AS STRING), CAST([Year] AS STRING), CAST([Wiki hyperlink] AS STRING), CAST([Award] AS STRING),  CAST([Outreach Category] AS  STRING),  CAST([Outreach Project] AS STRING),    CAST([Project Tag] AS STRING), CAST([Product] AS STRING), CAST([Product Description] AS STRING), CAST([Product Tag] AS STRING), CAST([Audience] AS STRING), CAST([Goal] AS STRING), CAST([Objectives] AS STRING), CAST([Data Type] AS STRING),CAST([Data] AS STRING), CAST([Reach] AS STRING), CAST([Analysis] AS STRING), CAST([References] AS STRING), CAST([Description] AS STRING)"
 
−
qString = 'SELECT * FROM outreach  ' + outreach_db.compile_sql(selected_tags)
 
−
console.time(qString);
 
−
alasql(qString, [], callback= function(data){
 
−
show_results(search_result=data);
 
−
console.log(data);
 
−
console.timeEnd(qString);
 
−
});
 
−
}
 
  
−
function show_details(outreach_id){
 
−
datastring = encodeURIComponent(
 
−
JSON.stringify(
 
−
outreach_db.get_by_id(
 
−
outreach_id
 
−
)
 
−
)
 
−
);
 
−
console.log(decodeURIComponent(datastring));
 
−
window.open('https://2017.igem.org/Team:William_and_Mary/Outreach_DB/Details?datastring='+datastring);
 
−
}
 
−
var test;
 
−
function show_results(search_result){
 
−
show_results.template = show_results.template || Handlebars.compile($('#search-results-template').html())
 
−
//$('#search-results').html(show_results.template(search_result));
 
−
$('#search-results').html(show_results.template(search_result));
 
−
// bind click event to new links
 
−
$('.details-link').click(
 
−
function(e){
 
−
clicked_outreach_id = e.target.getAttribute('outreach-id');
 
−
show_details(clicked_outreach_id);
 
−
console.log(clicked_outreach_id);
 
−
return false; // return false to intercept event and prevent other things from handling link click
 
−
}
 
−
)
 
−
}
 
  
−
function init_checkbox_area(tag_data){
+
 
−
var checkbox_area_template_function = Handlebars.compile($("#checkbox-area-template").html())
+
  <script type='text/javascript'>
−
checkbox_area_html = checkbox_area_template_function(tag_data)
+
    $(document).ready(function() {
−
$('#checkbox-area').html(checkbox_area_html)
+
      var OUTREACH_URL = 'https://docs.google.com/spreadsheets/d/1lkZSXS3HXTS_ZyPZytyIW0Keer_aKy8rr1_pxV2-fSs/pubhtml?gid=1097044156&single=true'
−
}
+
      outreach_db.init().then( // scrape all tags from data
−
</script>
+
        outreach_db.list_tags
 +
      ).then( // initialize checkbox area using tag data
 +
        init_checkbox_area
 +
      ).then( // now that we have the checkboxes, we can hook them up with the search function
 +
        function() {
 +
          $('#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
 +
        }
 +
      );
 +
    });
 +
 
 +
    function read_checkbox_area() {
 +
      var checked_tags = {}
 +
      // returns array of form {tag_type: [tag, tag, tag], tag_type2: [tag, tag, tag]}
 +
      $('#checkbox-area fieldset').each(function(idx, elm) {
 +
        checked_tags[$(elm).attr('value')] = $(elm).find('input:checked').map(function(idx1, elm1) {
 +
          return $(elm1).attr('value')
 +
        }).get()
 +
      })
 +
      console.log(checked_tags)
 +
      return checked_tags;
 +
    }
 +
 
 +
 
 +
 
 +
    function search() {
 +
 
 +
      // From light comes darkness, and from darkness, light.
 +
      // i.e. Don't filter types of which no tags has been selected
 +
 
 +
      var ordburl = 'https://docs.google.com/spreadsheets/d/1lkZSXS3HXTS_ZyPZytyIW0Keer_aKy8rr1_pxV2-fSs/pubhtml?gid=1097044156&single=true';
 +
      selected_tags = read_checkbox_area()
 +
      everything =
 +
        "CAST([id] AS STRING), CAST([School] AS STRING),  CAST([Section] AS STRING), CAST([Year] AS STRING), CAST([Wiki hyperlink] AS STRING), CAST([Award] AS STRING),  CAST([Outreach Category] AS  STRING),  CAST([Outreach Project] AS STRING),    CAST([Project Tag] AS STRING), CAST([Product] AS STRING), CAST([Product Description] AS STRING), CAST([Product Tag] AS STRING), CAST([Audience] AS STRING), CAST([Goal] AS STRING), CAST([Objectives] AS STRING), CAST([Data Type] AS STRING),CAST([Data] AS STRING), CAST([Reach] AS STRING), CAST([Analysis] AS STRING), CAST([References] AS STRING), CAST([Description] AS STRING)"
 +
      qString = 'SELECT * FROM outreach  ' + outreach_db.compile_sql(selected_tags)
 +
      console.time(qString);
 +
      alasql(qString, [], callback = function(data) {
 +
        show_results(search_result = data);
 +
        console.log(data);
 +
        console.timeEnd(qString);
 +
      });
 +
    }
 +
 
 +
    function fulltext_search(str){
 +
      show_results(search_result = fuse.search(str))
 +
    }
 +
    function show_details(outreach_id) {
 +
      datastring = encodeURIComponent(
 +
        JSON.stringify(
 +
          outreach_db.get_by_id(
 +
            outreach_id
 +
          )
 +
        )
 +
      );
 +
      console.log(decodeURIComponent(datastring));
 +
      window.open('https://2017.igem.org/Team:William_and_Mary/Outreach_DB/Details?datastring=' + datastring);
 +
    }
 +
    var test;
 +
 
 +
    function show_results(search_result) {
 +
      show_results.template = show_results.template || Handlebars.compile($('#search-results-template').html())
 +
      //$('#search-results').html(show_results.template(search_result));
 +
      $('#search-results').html(show_results.template(search_result));
 +
      // bind click event to new links
 +
      $('.details-link').click(
 +
        function(e) {
 +
          clicked_outreach_id = e.target.getAttribute('outreach-id');
 +
          show_details(clicked_outreach_id);
 +
          console.log(clicked_outreach_id);
 +
          return false; // return false to intercept event and prevent other things from handling link click
 +
        }
 +
      )
 +
    }
 +
 
 +
    function init_checkbox_area(tag_data) {
 +
      var checkbox_area_template_function = Handlebars.compile($("#checkbox-area-template").html())
 +
      checkbox_area_html = checkbox_area_template_function(tag_data)
 +
      $('#checkbox-area').html(checkbox_area_html)
 +
    }
 +
  </script>
 
</head>
 
</head>
 +
 
<body>
 
<body>
−
        <div class="container">
+
  <br></br>
−
<div id='checkbox-area'>
+
  <br></br>
  
−
</div>
+
  <center><img src="https://static.igem.org/mediawiki/2017/4/41/T--William_and_Mary--Database383.jpeg" width=360/></center>
−
<div id='search-results'>
+
  <br></br>
  
−
</div>
+
 
−
         </div>
+
 
 +
  <!----start's here---->
 +
 
 +
  <div class="container">
 +
    <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 id='search-results'>
 +
 
 +
    </div>
 +
  </div>
 
</body>
 
</body>
 +
 
</html>
 
</html>
 +
 +
{{Team:William_and_Mary/FOOTER_SMALL}}

Latest revision as of 02:46, 2 November 2017

Outreach Database: select tags for search





Quick ID Jump:
Search:
OR

Search By Tags: