Widget:PillIdentifier: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
(23 intermediate revisions by the same user not shown) | |||
Line 24: | Line 24: | ||
$('.navTool').click(nav); | $('.navTool').click(nav); | ||
$("#reset").click(resetForm); | $("#reset").click(resetForm); | ||
$(".pillShapeOption").click(function(){ | $(".pillShapeOption").click(function(){ | ||
$(".pillShapeOption").children("img").css("border",""); | $(".pillShapeOption").children("img").css("border",""); | ||
Line 86: | Line 87: | ||
function resetForm(){ | function resetForm(){ | ||
$('pillShapeOption).children("img").css("border",""); | $('.pillShapeOption').children("img").css("border",""); | ||
$('pillColorOption).children("img").css("border",""); | $('.pillColorOption').children("img").css("border",""); | ||
$('pillScoreOption).children("img").css("border",""); | $('.pillScoreOption').children("img").css("border",""); | ||
$("#selectedShape").val(""); | $("#selectedShape").val(""); | ||
Line 101: | Line 102: | ||
$("#back").css("visibility","hidden"); | $("#back").css("visibility","hidden"); | ||
$('#resultsTable-container').html(''); | |||
}; | }; | ||
Line 156: | Line 158: | ||
function runQuery() { | function runQuery() { | ||
$('#resultsTable- | $('#resultsTable-container').html(''); | ||
var queryParameters = buildQueryParameters(); | var queryParameters = buildQueryParameters(); | ||
var printoutRequests = "|?Pill%20Imprint|?Pill%20Dosage|?Pill%20Ingred|?Pill%20Color|?Pill%20Shape|?Pill%20Size%20(mm)|?Pill%20Scoring|?NDC|?Pill%20Name"; | 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"; | var jsonURL = "http://www.wikidoc.org/api.php?action=ask&query="+queryParameters+printoutRequests+"&format=json"; | ||
$.getJSON(jsonURL, function (data) { | $.getJSON(jsonURL, function (data) { | ||
$.each(data.query.results, function(ind, val) { | if(countProperties(data.query.results) > 0){ | ||
$.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 = 'http://www.wikidoc.org/index.php/'+linkName; | |||
///////////////////////////////////////////////////////////////////////// | |||
////// 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. | |||
// | |||
var pillContainer ='<div class="pillResult">' + | |||
'<a href="'+drugNameLink+'">' + | |||
'<img src="'+imageDirect+'" alt"'+drugNameShort+'">' + | |||
'</a>' + | |||
' <div class="pillResult-text">' + | |||
'<h1><a href="'+drugNameLink+'">'+drugNameShort+'</a></h1>' + | |||
'<h2>'+pillDosage+' (' + pillImprint + ')</h2>' + | |||
'<p>'+pillShape+', '+pillColor+', '+pillSize+' mm, Scored ' + pillScoring +', NDC: '+ndc+'</p>'+ | |||
'<p>'+pillIngred+'</p>' + | |||
'</div>' + | |||
'</div>'; | |||
//Add Values to the cells: | |||
}); | $("#resultsTable-container").append(pillContainer); | ||
}); | |||
} else { | |||
$("#resultsTable-container").append('<div style="margin:auto"><span style="font-size:36px;">No Results Found. Please Check Back Later.</span></div>'); | |||
} | |||
}); | }); | ||
$('#resultsTable-container').css("visibility", "visible"); | $('#resultsTable-container').css("visibility", "visible"); | ||
} | |||
} | |||
function updatePillSizeImages() { | function updatePillSizeImages() { | ||
Line 307: | Line 314: | ||
$("#"+selectedProperty).val(selectedValue); | $("#"+selectedProperty).val(selectedValue); | ||
} | } | ||
function nav(){ | function nav(){ | ||
Line 355: | Line 361: | ||
} | } | ||
}; | }; | ||
function countProperties (obj) { | |||
var count = 0; | |||
for (var property in obj) { | |||
if (Object.prototype.hasOwnProperty.call(obj, property)) { | |||
count++; | |||
} | |||
} | |||
return count; | |||
} | |||
</script> | </script> | ||
<style type="text/css"> | <style type="text/css"> | ||
Line 415: | Line 433: | ||
width: 100px; | width: 100px; | ||
margin: 50px; | margin: 50px; | ||
cursor:pointer; | |||
} | } | ||
.pillColorOption { | .pillColorOption { | ||
Line 421: | Line 440: | ||
width: 100px; | width: 100px; | ||
margin: 50px; | margin: 50px; | ||
cursor:pointer; | |||
} | } | ||
.pillScoreOption { | .pillScoreOption { | ||
Line 427: | Line 447: | ||
width: 100px; | width: 100px; | ||
margin: 50px; | margin: 50px; | ||
cursor:pointer; | |||
} | } | ||
Line 498: | Line 519: | ||
#pillIDNav div{ | #pillIDNav div{ | ||
display:inline-block; | display:inline-block; | ||
cursor:pointer; | |||
} | } | ||
Line 554: | Line 576: | ||
font-size:16px; | font-size:16px; | ||
} | } | ||
</style> | </style> | ||
Line 565: | Line 589: | ||
<form id="selectedProperties" action="" method="get"> | <form id="selectedProperties" action="" method="get"> | ||
<div id="selectedShape-container" class="ui-button"> | <div id="selectedShape-container" class="ui-button"> | ||
<span>Shape:</span><input readonly type="text" name="selectedShape" id="selectedShape" value=""> | <span>Shape:</span><input readonly type="text" name="selectedShape" id="selectedShape" size="10" value=""> | ||
</div> | </div> | ||
<div id="selectedColor-container" class="ui-button"> | <div id="selectedColor-container" class="ui-button"> | ||
<span>Color:</span><input readonly type="text" name="selectedColor" id="selectedColor" value=""> | <span>Color:</span><input readonly type="text" name="selectedColor" id="selectedColor" size="10" value=""> | ||
</div> | </div> | ||
<div id="selectedScoring-container" class="ui-button"> | <div id="selectedScoring-container" class="ui-button"> | ||
<span>Scoring:</span><input readonly type="text" name="selectedScoring" id="selectedScoring" value=""> | <span>Scoring:</span><input readonly type="text" name="selectedScoring" id="selectedScoring" size="5" value=""> | ||
</div> | </div> | ||
<div class="ui-button" id="selectedMinSize-container"> | <div class="ui-button" id="selectedMinSize-container"> |