Widget:CJP3: Difference between revisions

Jump to navigation Jump to search
Christopher Popma (talk | contribs)
Created page with "<includeonly> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type"text/javascript"> $(document).ready(ensureLoggedI..."
 
Christopher Popma (talk | contribs)
No edit summary
 
(69 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() {
mw.loader.load('mediaWiki.user');
if ($.isEmptyObject(wgUserName)) {
alert("Please Log In To Continue.");
window.location.replace("http://www.wikidoc.org/index.php?title=Special:UserLogin&returnto=User%3AChristopher+Popma%2FSandbox+TestCJP3");
} else {
 
$('#button').click(runQuery);
}
};
 
function buildQueryParameters(){
return "[[Pill%20Shape::Round]]";
};
 
function runQuery() {
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 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 + '" />';
});
function ensureLoggedIn() {
});
mw.loader.load('mediaWiki.user');
$('#resultsTable-container').css("visibility", "visible")
if ($.isEmptyObject(wgUserName)) {
};//
alert("Please Log In To Continue.");
</script>
window.location.replace("http://www.wikidoc.org/index.php?title=Special:UserLogin&returnto=WikidocBoardReview");
<style type="text/css">
} else {
#resultsTable-container{
alert("You are logged in");
width:100%;
runQuery();
visibility:hidden;
}
}
};
#resultsTable{
border-collapse:collapse;
function runQuery() {
table-layout:fixed;
$('#button').click(function() {
border:1px solid #B0E0E6;
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"
margin:10px;
$.getJSON(jsonURL, function(data,status) {
}
alert("Data: " + data + "\nStatus: " + status);
.pillImages{
});
width:300px;
});
}
};
</script>
.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="hideMe" style="width:200px; height:200px; background-color:red;"></div>
<div id="resultsTable-container">
    <table id="resultsTable">
        <thead>
            <th class="resultsTableHeader">
                Drug Name
                </th>
               
                <th class="resultsTableHeader">
                Pill Imprint
                </th>
               
                <th class="resultsTableHeader">
                Dosage
                </th>
               
                <th class="resultsTableHeader">
                Ingredients
                </th>
               
                <th class="resultsTableHeader">
                Pill Color
                </th>
               
                <th class="resultsTableHeader">
                Pill Shape
                </th>
               
                <th class="resultsTableHeader">
                Pill Size (mm)
                </th>
               
                <th class="resultsTableHeader" style="width:60px;">
                Score
                </th>
               
                <th class="resultsTableHeader">
                NDC
                </th>
               
                <th class="resultsTableHeader" style="width:360px;">
                Pill Image
                </th>
            </thead>
           
            <tbody id="resultsTable-body">
           
            </tbody>
        </table>
    </div>
</includeonly>
</includeonly>

Latest revision as of 19:46, 11 June 2014