Difference between revisions of "Team:William and Mary/Database"
| (33 intermediate revisions by 2 users not shown) | |||
| Line 8: | Line 8: | ||
<style> | <style> | ||
ul.tag-type { | ul.tag-type { | ||
| + | list-style: none; | ||
column-width: 300px; | column-width: 300px; | ||
| − | |||
} | } | ||
| Line 20: | Line 20: | ||
} | } | ||
| − | .tag-label{ | + | .tag-label { |
| − | margin-left: | + | margin-left: 15px; |
| + | vertical-align: top; | ||
| + | width: 260px; | ||
| + | font-size: 16px; | ||
} | } | ||
| − | .tag{ | + | .tag { |
| − | display: block | + | 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 36: | 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 48: | Line 49: | ||
{{#each this}} | {{#each this}} | ||
<li class='tag'> | <li class='tag'> | ||
| − | <input type='checkbox' name='{{@../key}}' value='{{this}}' class='tag-checkbox'/><label class='tag-label | + | <input type='checkbox' name='{{@../key}}' value='{{this}}' class='tag-checkbox' /><label class='tag-label'>{{this}}</label> |
| − | + | ||
</li> | </li> | ||
<br> {{/each}} | <br> {{/each}} | ||
| Line 76: | 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: | + | <div class='project-title' style='font-size: 25px; margin-right: 250px;'><b>{{[Outreach Project]}}</b></div> |
| − | <div style='font-size: | + | <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: | + | <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: | + | {{#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: | + | <div style='font-size: 16px;'> |
{{[Project Tag]}}</div> | {{[Project Tag]}}</div> | ||
</dd> | </dd> | ||
| Line 147: | Line 148: | ||
$(this).parent().find(".tag-type").toggle(); | $(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 | ||
} | } | ||
); | ); | ||
| Line 183: | 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 220: | Line 235: | ||
<body> | <body> | ||
| + | <br></br> | ||
<br></br> | <br></br> | ||
| − | <center> | + | <center><img src="https://static.igem.org/mediawiki/2017/4/41/T--William_and_Mary--Database383.jpeg" width=360/></center> |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
<br></br> | <br></br> | ||
| + | |||
| + | |||
<!----start's here----> | <!----start's here----> | ||
<div class="container"> | <div class="container"> | ||
| − | <div id='checkbox-area' style='padding-top: | + | <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
Search By Tags:
