Widget:CJP3: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
(24 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
<includeonly> | <includeonly> | ||
<script content-type= "application/javascript" src="http://www.wikidoc.org/includes/raty/md5.js"></script> | |||
<script content-type= "application/javascript" src="http:// | |||
<script type"text/javascript"> | <script type"text/javascript"> | ||
$(document).ready(ensureLoggedIn); | //$(document).ready(ensureLoggedIn); | ||
function ensureLoggedIn() { | function ensureLoggedIn() { | ||
Line 9: | Line 8: | ||
if ($.isEmptyObject(wgUserName)) { | if ($.isEmptyObject(wgUserName)) { | ||
alert("Please Log In To Continue."); | alert("Please Log In To Continue."); | ||
window.location.replace("http://www.wikidoc.org/index.php?title=Special:UserLogin&returnto= | window.location.replace("http://www.wikidoc.org/index.php?title=Special:UserLogin&returnto=User%3AChristopher+Popma%2FSandbox+TestCJP3"); | ||
} else { | } else { | ||
$('#button').click(runQuery); | |||
} | } | ||
}; | |||
function buildQueryParameters(){ | |||
return "[[Pill%20Shape::Round]]"; | |||
}; | }; | ||
function runQuery() { | function runQuery() { | ||
var queryParameters = buildQueryParameters(); | |||
var | var printoutRequests = "|?Pill%20Imprint|?Pill%20Dosage|?Pill%20Ingred|?Pill%20Color|?Pill%20Shape|?Pill%20Size%20(mm)|?Pill%20Scoring|?NDC|?Pill%20Name"; | ||
var jsonURL = "http://www.wikidoc.org/api.php?action=ask&query="+queryParameters+printoutRequests+"&format=json" | |||
$.getJSON(jsonURL, function (data) { | |||
$.each(data.query.results, function(ind, val) { | |||
///////////////////////////////////////////////////////////////////////// | |||
////// Store each returned result ////// | |||
///////////////////////////////////////////////////////////////////////// | |||
// | |||
//If the .getJSON() function is able to successfully receive information | |||
//from the WikiDoc API, it will begin to execute the unnamed function we | |||
//have provided. The data that is returned is in JSON format, meaning | |||
//that we will have lots of objects within objects. Our function says | |||
//that for EACH property of data.query.results (that is, each returned | |||
//result from the query) we should perform the following operations. | |||
// | |||
//We will first store all the results as local variables. Some of these | |||
//results will need to be converted to a string, so don't be alarmed if | |||
//you see some string() methods. After storing our variables,we | |||
//construct a hyperlink and image URL. Lastly, we add a row to the | |||
//our results table. | |||
// | |||
//The EACH loop will run through all of the described steps before | |||
//starting with the next returned result. Doing this will build a table | |||
//of our results, row by row. | |||
drugNameFull = val.fulltext; | |||
drugNameShort = drugNameFull.split("#")[0]; | |||
pillImprint = val.printouts["Pill Imprint"]; | |||
pillDosage = val.printouts["Pill Dosage"]; | |||
pillIngred = val.printouts["Pill Ingred"]; | |||
pillColor = val.printouts["Pill Color"]; | |||
pillShape = val.printouts["Pill Shape"]; | |||
pillSize = val.printouts["Pill Size (mm)"]; | |||
pillScoring = val.printouts["Pill Scoring"]; | |||
ndc = val.printouts["NDC"]; | |||
pillName = String(val.printouts["Pill Name"][0]).split(' ').join('_'); | |||
///////////////////////////////////////////////////////////////////////// | |||
////// Generate the URL to the image. ////// | |||
///////////////////////////////////////////////////////////////////////// | |||
// | |||
//When a picture is uploaded, the server will place the file in a | |||
//directory. This directory is based upon the MD5 hashed name of file. A | |||
//file named "Example.jpg" will have an MD5 hashed name of: | |||
// "a91fe217e45a700fc2dab0cc476f01c7." | |||
//The file would then be located at the following URl: | |||
// "http://static.wikidoc.org/a/a9/Example.jpg" | |||
//To generate the URL, we use the MD5 method provided in the CryptoJS lib | |||
//This means http://www.wikidoc.org/includes/raty/md5.js must be loaded | |||
//First we create the MD5 hash of the pill name | |||
md5 = String(CryptoJS.MD5(pillName)); | |||
//Next we build the directory name using the first two characters | |||
imageDirect = 'http://static.wikidoc.org/' + md5.charAt(0) + '/' + md5.substring(0,2) + '/' + pillName | |||
///////////////////////////////////////////////////////////////////////// | |||
////// Create the Drug Name Hyperlink ////// | |||
///////////////////////////////////////////////////////////////////////// | |||
//Turn the spaces into underscores | |||
linkName = String(drugNameShort).split(' ').join('_') | |||
//String together appropiate text to create the link | |||
drugNameLink = '<a href="http://www.wikidoc.org/index.php/'+linkName+'">'+drugNameShort+'</a>' | |||
///////////////////////////////////////////////////////////////////////// | |||
////// Add each iteration of query results to the Results Table ////// | |||
///////////////////////////////////////////////////////////////////////// | |||
// | |||
//Adding the results parameters works in the following way. | |||
// The location of a specific table within the document is assigned to | |||
// the variable "table" | |||
// | |||
// A row is added the to table at the index location (ind being the | |||
// index of the .each() loop. | |||
// | |||
// Cells are then added to each row with a named corresponding to the | |||
// column header. For example, Drug Name is the header of the first | |||
// column, so the cell in the 0 index (the first cell of the row) will | |||
// have a variable name of cellDrugName | |||
// | |||
// The cells are then populated with | |||
//Find a <table> element with id="resultsTable-body": | |||
table = document.getElementById("resultsTable-body"); | |||
//Create an empty <tr> element and add it to the 1st position of the table: | |||
row = table.insertRow(ind); | |||
//Insert new cells(<td> elements) into the "new" <tr> element: | |||
cellDrugName = row.insertCell(0); | |||
cellPillImprint = row.insertCell(1); | |||
cellPillDosage = row.insertCell(2); | |||
cellPillIngred = row.insertCell(3); | |||
cellPillColor = row.insertCell(4); | |||
cellPillShape = row.insertCell(5); | |||
cellPillSize = row.insertCell(6); | |||
cellPillSocring = row.insertCell(7); | |||
cellNDC = row.insertCell(8); | |||
cellPillName = row.insertCell(9); | |||
//Add Values to the cells: | |||
cellDrugName.innerHTML = drugNameLink; | |||
}; | cellPillImprint.innerHTML = pillImprint; | ||
cellPillDosage.innerHTML = pillDosage; | |||
cellPillIngred.innerHTML = pillIngred; | |||
cellPillColor.innerHTML = pillColor; | |||
cellPillShape.innerHTML = pillShape; | |||
cellPillSize.innerHTML = pillSize; | |||
cellPillSocring.innerHTML = pillScoring; | |||
cellNDC.innerHTML = ndc; | |||
cellPillName.innerHTML = '<img class="pillImages" src="' + imageDirect + '" />'; | |||
}); | |||
}); | |||
$('#resultsTable-container').css("visibility", "visible") | |||
};// | |||
</script> | </script> | ||
<style type="text/css"> | |||
#resultsTable-container{ | |||
width:100%; | |||
visibility:hidden; | |||
} | |||
#resultsTable{ | |||
border-collapse:collapse; | |||
table-layout:fixed; | |||
border:1px solid #B0E0E6; | |||
margin:10px; | |||
} | |||
.pillImages{ | |||
width:300px; | |||
} | |||
.resultsTableHeader{ | |||
background-color:#B0E0E6; | |||
padding:5px; | |||
width:125px; | |||
height:25px; | |||
} | |||
#resultsTable tbody tr:nth-child(even){ | |||
background-color:#EBEDED; | |||
text-align:center; | |||
} | |||
#resultsTable tbody tr:nth-child(odd){ | |||
background-color:#FFFFFF; | |||
text-align:center; | |||
} | |||
</style> | |||
<button id="button">Click Me</button> | <button id="button">Click Me</button> | ||
<div id="resultsTable-container"> | <div id="resultsTable-container"> | ||
<table id="resultsTable"> | <table id="resultsTable"> | ||
<thead> | <thead> | ||
<th> | <th class="resultsTableHeader"> | ||
Drug Name | Drug Name | ||
</th> | </th> | ||
<th> | <th class="resultsTableHeader"> | ||
Pill Imprint | Pill Imprint | ||
</th> | </th> | ||
<th> | <th class="resultsTableHeader"> | ||
Dosage | Dosage | ||
</th> | </th> | ||
<th> | <th class="resultsTableHeader"> | ||
Ingredients | Ingredients | ||
</th> | </th> | ||
<th> | <th class="resultsTableHeader"> | ||
Pill Color | Pill Color | ||
</th> | </th> | ||
<th> | <th class="resultsTableHeader"> | ||
Pill Shape | Pill Shape | ||
</th> | </th> | ||
<th> | <th class="resultsTableHeader"> | ||
Pill Size (mm) | Pill Size (mm) | ||
</th> | </th> | ||
<th> | <th class="resultsTableHeader" style="width:60px;"> | ||
Score | Score | ||
</th> | </th> | ||
<th> | <th class="resultsTableHeader"> | ||
NDC | NDC | ||
</th> | </th> | ||
<th> | <th class="resultsTableHeader" style="width:360px;"> | ||
Pill Image | Pill Image | ||
</th> | </th> |