Widget:CJP3: Difference between revisions

Jump to navigation Jump to search
Christopher Popma (talk | contribs)
No edit summary
Christopher Popma (talk | contribs)
No edit summary
 
(26 intermediate revisions by the same user not shown)
Line 1: Line 1:
<includeonly>
<includeonly>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script content-type= "application/javascript" src="http://www.wikidoc.org/includes/raty/md5.js"></script>
<script content-type= "application/javascript" src="http://crypto-js.googlecode.com/svn/tags/3.0.2/build/rollups/md5.js"></script>
<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=WikidocBoardReview");
window.location.replace("http://www.wikidoc.org/index.php?title=Special:UserLogin&returnto=User%3AChristopher+Popma%2FSandbox+TestCJP3");
} else {
} else {
alert("You are logged in");
 
runQuery();
$('#button').click(runQuery);
}
}
};
function buildQueryParameters(){
return "[[Pill%20Shape::Round]]";
};
};


function runQuery() {
function runQuery() {
$('#button').click(function() {
var queryParameters = buildQueryParameters();
var jsonURL = "http://www.wikidoc.org/api.php?action=ask&query=[[Pill%20Shape::Oval]]|?Pill%20Imprint|?Pill%20Dosage|?Pill%20Ingred|?Pill%20Color|?Pill%20Shape|?Pill%20Size%20(mm)|?Pill%20Scoring|?NDC|?Pill%20Name&format=json"
var printoutRequests = "|?Pill%20Imprint|?Pill%20Dosage|?Pill%20Ingred|?Pill%20Color|?Pill%20Shape|?Pill%20Size%20(mm)|?Pill%20Scoring|?NDC|?Pill%20Name";
$.getJSON(jsonURL, function (data) {
var jsonURL = "http://www.wikidoc.org/api.php?action=ask&query="+queryParameters+printoutRequests+"&format=json"
$.each(data.query.results, function(ind, val) {
$.getJSON(jsonURL, function (data) {
drugNameFull = val.fulltext;
$.each(data.query.results, function(ind, val) {
drugNameShort = drugNameFull.split("#")[0];
/////////////////////////////////////////////////////////////////////////
pillImprint = val.printouts["Pill Imprint"];
//////                  Store each returned result                //////
pillDosage = val.printouts["Pill Dosage"];
/////////////////////////////////////////////////////////////////////////
pillIngred = val.printouts["Pill Ingred"];
//
pillColor = val.printouts["Pill Color"];
//If the .getJSON() function is able to successfully receive information
pillShape = val.printouts["Pill Shape"];
//from the WikiDoc API, it will begin to execute the unnamed function we
pillSize = val.printouts["Pill Size (mm)"];
//have provided.  The data that is returned is in JSON format, meaning
pillScoring = val.printouts["Pill Scoring"];
//that we will have lots of objects within objects.  Our function says
ndc = val.printouts["NDC"];
//that for EACH property of data.query.results (that is, each returned
pillName = val.printouts["Pill Name"];
//result from the query) we should perform the following operations.
//Look up file Directory with MD5:
//
md5 = string(CryptoJS.MD5(pillName[0]));
//We will first store all the results as local variables. Some of these
imageDirect = 'http://static.wikidoc.org/' + md5.charAt(0) + '/' + md5.substring(0,1) + '/' + pillName
//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
//Find a <table> element with id="resultsTable-body":
//construct a hyperlink and image URL.  Lastly, we add a row to the
table = document.getElementById("resultsTable-body");
//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>'


//Create an empty <tr> element and add it to the 1st position of the table:
/////////////////////////////////////////////////////////////////////////
row = table.insertRow(ind);
//////  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");


//Insert new cells(<td> elements) into the "new" <tr> element:
//Create an empty <tr> element and add it to the 1st position of the table:
cellDrugName = row.insertCell(0);
row = table.insertRow(ind);
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:
//Insert new cells(<td> elements) into the "new" <tr> element:
cellDrugName.innerHTML = drugNameShort ;
cellDrugName = row.insertCell(0);
cellPillImprint.innerHTML = pillImprint;
cellPillImprint = row.insertCell(1);
cellPillDosage.innerHTML = pillDosage;
cellPillDosage = row.insertCell(2);
cellPillIngred.innerHTML = pillIngred;
cellPillIngred = row.insertCell(3);
cellPillColor.innerHTML = pillColor;
cellPillColor = row.insertCell(4);
cellPillShape.innerHTML = pillShape;
cellPillShape = row.insertCell(5);
cellPillSize.innerHTML = pillSize;
cellPillSize = row.insertCell(6);
cellPillSocring.innerHTML = pillScoring;
cellPillSocring = row.insertCell(7);
cellNDC.innerHTML = ndc;
cellNDC = row.insertCell(8);
cellPillName.innerHTML = imageDirect;
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>

Latest revision as of 19:46, 11 June 2014