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
 
(47 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 type"text/javascript">
<script type"text/javascript">
$(document).ready(ensureLoggedIn);
//$(document).ready(ensureLoggedIn);


function ensureLoggedIn() {
function ensureLoggedIn() {
Line 8: 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"
alert('Success!');
$.getJSON(jsonURL, function (data) {
                                        alert('Data return: ' + data.query.results);
$.each(data.query.results, function(ind, val) {
                                        keys = Object.keys(data.query.results);
/////////////////////////////////////////////////////////////////////////
                                        alert('Keys: ' + keys);
//////                  Store each returned result                //////
                                        $.each(data.query.results, function(ind, val) {
/////////////////////////////////////////////////////////////////////////
                                          drugNameFull = val.fulltext;
//
                                          drugNameShort = drugNameFull.split("#")[0];
//If the .getJSON() function is able to successfully receive information
                                          pillImprint = val.printouts["Pill Imprint"];
//from the WikiDoc API, it will begin to execute the unnamed function we
                                          pillDosage = val.printouts["Pill Dosage"];
//have provided.  The data that is returned is in JSON format, meaning
                                          pillIngred = val.printouts["Pill Ingred"];
//that we will have lots of objects within objects.  Our function says
                                          pillColor = val.printouts["Pill Color"];
//that for EACH property of data.query.results (that is, each returned
                                          pillShape = val.printouts["Pill Shape"];
//result from the query) we should perform the following operations.
                                          pillSize = val.printouts["Pill Size (mm)"];
//
                                          pillScoring = val.printouts["Pill Scoring"];
//We will first store all the results as local variables. Some of these
                                          ndc = val.printouts["NDC"];
//results will need to be converted to a string, so don't be alarmed if
                                          pillName = val.printouts["Pill Name"];
//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");


//Find a <table> element with id="resultsTable-body":
//Create an empty <tr> element and add it to the 1st position of the table:
                                          table = document.getElementById("resultsTable-body");
row = table.insertRow(ind);


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


//Insert new cells(<td> elements) into the "new" <tr> element:
//Add Values to the cells:
  cellDrugName = row.insertCell(0);
cellDrugName.innerHTML = drugNameLink;
  cellPillImprint = row.insertCell(1);
cellPillImprint.innerHTML = pillImprint;
  cellPillDosage = row.insertCell(2);
cellPillDosage.innerHTML = pillDosage;
  cellPillIngred = row.insertCell(3);
cellPillIngred.innerHTML = pillIngred;
  cellPillColor = row.insertCell(4);
cellPillColor.innerHTML = pillColor;
  cellPillShape = row.insertCell(5);
cellPillShape.innerHTML = pillShape;
  cellPillSize = row.insertCell(6);
cellPillSize.innerHTML = pillSize;
  cellPillSocring = row.insertCell(7);
cellPillSocring.innerHTML = pillScoring;
  cellNDC = row.insertCell(8);
cellNDC.innerHTML = ndc;
  cellPillName = row.insertCell(9);
cellPillName.innerHTML = '<img class="pillImages" src="' + imageDirect + '" />';
});
});
$('#resultsTable-container').css("visibility", "visible")
};//
</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>


//Add Values to the cells:
  cellDrugName.innerHTML = drugNameShort ;
  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 = pillName;


                                          alert(drugNameFull + '\n' + drugNameShort + '\n' + pillImprint + '\n' + pillDosage + '\n' + pillIngred + '\n' + pillColor + '\n' + pillShape + '\n' + pillSize + '\n' + pillScoring + '\n' + ndc + '\n' + pillName);
                                        });
});
});
};
</script>
<button id="button">Click Me</button>
<button id="button">Click Me</button>
<div id="hideMe" style="width:200px; height:200px; background-color:red;"></div>
<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