Widget:CJP4: Difference between revisions

Jump to navigation Jump to search
VisualWikitext
Christopher Popma (talk | contribs)
Bureaucrats, exportpages, nocaptcha, Administrators
2,750 edits
Created page with "<includeonly> <script content-type= "application/javascript" src="http://www.wikidoc.org/includes/raty/md5.js"></script> <script type"text/javascript"> $(document).ready(ensur..."
 
Christopher Popma (talk | contribs)
Bureaucrats, exportpages, nocaptcha, Administrators
2,750 edits
No edit summary
 
(99 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://www.wikidoc.org/includes/raty/md5.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type"text/javascript">
<script type"text/javascript">
$(document).ready(ensureLoggedIn);


function ensureLoggedIn() {
$(document).ready(loadResources);
mw.loader.load('mediaWiki.user');
 
if ($.isEmptyObject(wgUserName)) {
function loadResources() {
alert("Please Log In To Continue.");
jQuery.browser = {};
window.location.replace("http://www.wikidoc.org/index.php?title=Special:UserLogin&returnto=User%3AChristopher+Popma%2FSandbox+TestCJP3");
(function () {
} else {
    jQuery.browser.msie = false;
    jQuery.browser.version = 0;
    if (navigator.userAgent.match(/MSIE ([0-9]+)\./)) {
        jQuery.browser.msie = true;
        jQuery.browser.version = RegExp.$1;
    }
})();
// mw.loader.load('mediaWiki.user');
$('#search').click(runQuery);
$('#query-container').change(updateDisplay);
$('#update').click(updateDisplay);
 
    $("#slider").slider({
        min: 0,
        max: 25,
        step: 1,
        range: true,
        values: [5, 20],
        slide: function(event, ui) {
            if (ui.values[0] < ui.values[1])
            {       
                $("input.pillSizeSlider[data-index=0]").val(ui.values[0]);
                $("input.pillSizeSlider[data-index=1]").val(ui.values[1]);
                updatePillSizeImages();
            }
            else if (ui.values[0] > ui.values[1])
            {
                $("input.pillSizeSlider[data-index=1]").val(ui.values[0]);
                $("input.pillSizeSlider[data-index=0]").val(ui.values[1]);
                updatePillSizeImages();               
            }
            else
            {       
                $("input.pillSizeSlider[data-index=0]").val(ui.values[0]);
                $("input.pillSizeSlider[data-index=1]").val(ui.values[1]);
                updatePillSizeImages();
            }
        }
    });
 


$('#button').click(runQuery);
    $('input.pillSizeSlider[data-index=0]').val($("#slider").slider("option","values")[0]);
    $('input.pillSizeSlider[data-index=1]').val($("#slider").slider("option","values")[1]);
}
 
    $("input.pillSizeSlider").change(function() {
        var $this = $(this);
        $("#slider").slider("values", $this.data("index"), $this.val());
        updatePillSizeImages();
    });
 
};
 
function updatePillSizeImages() {
var minPillSize = $('input.pillSizeSlider[data-index=0]').val();
var maxPillSize = $('input.pillSizeSlider[data-index=1]').val();
var pillArr = [
"http://static.wikidoc.org/3/35/Pill_Size_1_mm.png",
"http://static.wikidoc.org/3/35/Pill_Size_1_mm.png",
"http://static.wikidoc.org/8/8a/Pill_Size_2_mm.png",
"http://static.wikidoc.org/f/f7/Pill_Size_3_mm.png",
"http://static.wikidoc.org/f/fb/Pill_Size_4_mm.png",
"http://static.wikidoc.org/f/f2/Pill_Size_5_mm.png",
"http://static.wikidoc.org/d/d8/Pill_Size_6_mm.png",
"http://static.wikidoc.org/e/ec/Pill_Size_7_mm.png",
                "http://static.wikidoc.org/4/4d/Pill_Size_8_mm.png",
"http://static.wikidoc.org/9/97/Pill_Size_9_mm.png",
"http://static.wikidoc.org/3/36/Pill_Size_10_mm.png",
"http://static.wikidoc.org/2/2e/Pill_Size_11_mm.png",
                "http://static.wikidoc.org/c/c5/Pill_Size_12_mm.png",
"http://static.wikidoc.org/0/0d/Pill_Size_13_mm.png",
"http://static.wikidoc.org/1/16/Pill_Size_14_mm.png",
"http://static.wikidoc.org/4/4a/Pill_Size_15_mm.png",
"http://static.wikidoc.org/e/ee/Pill_Size_16_mm.png",
"http://static.wikidoc.org/8/86/Pill_Size_17_mm.png",
"http://static.wikidoc.org/a/af/Pill_Size_18_mm.png",
"http://static.wikidoc.org/e/ea/Pill_Size_19_mm.png",
"http://static.wikidoc.org/e/e6/Pill_Size_20_mm.png",
"http://static.wikidoc.org/e/e2/Pill_Size_21_mm.png",
"http://static.wikidoc.org/a/a3/Pill_Size_22_mm.png",
"http://static.wikidoc.org/b/b4/Pill_Size_23_mm.png",
"http://static.wikidoc.org/c/cf/Pill_Size_24_mm.png",
"http://static.wikidoc.org/9/92/Pill_Size_25_mm.png"
];
$("#queryDisplaySmallSize").attr("src",pillArr[minPillSize]);
$("#queryDisplayLargeSize").attr("src",pillArr[maxPillSize]);
};
};


function buildQueryParameters(){
function buildQueryParameters(){
return "[[Pill%20Shape::Round]]";
var queryShape = "";
var queryColor = "";
var queryScoring = "";
var queryImprint = "";
var queryMinSize = "";
var queryMaxSize = "";
var queryNDC = "";
var queryIngred = "";
if (document.getElementById('selectedShape').value)
{
var  queryShape = '[[Pill%20Shape::' + document.getElementById('selectedShape').value + ']]';
}
if (document.getElementById('selectedColor').value)
{
var queryColor = '[[Pill%20Color::' + document.getElementById('selectedColor').value + ']]'
}
if (document.getElementById('selectedScoring').value)
{
var queryScoring = '[[Pill%20Scoring::' + document.getElementById('selectedScoring').value + ']]'
}
if (document.getElementById('selectedImprint').value)
{
var queryImprint = '[[Pill%20Imprint::' + document.getElementById('selectedImprint').value + ']]'
}
if (document.getElementById('selectedMinSize').value)
{
var queryMinSize = '[[Pill%20Size%20(mm)::>' + document.getElementById('selectedMinSize').value + ']]'
}
if (document.getElementById('selectedMaxSize').value)
{
var queryMaxSize = '[[Pill%20Size%20(mm)::<' + document.getElementById('selectedMaxSize').value + ']]'
}
if (document.getElementById('selectedNDC').value)
{
var queryNDC = '[[NDC::' + document.getElementById('selectedNDC').value + ']]'
}
if (document.getElementById('selectedIngred').value)
{
var selectedIngredArray = document.getElementById('selectedIngred').value.split(',');
                $.each(selectedIngredArray, function(index, value){
                    selectedIngredArray[index] = '[[Pill%20Ingred::' + value.trim() + ']]';
                });
 
var queryIngred = selectedIngredArray.join("");
}
return queryShape+queryColor+queryScoring+queryImprint+queryMinSize+queryMaxSize+queryNDC+queryIngred;
};
};
function updateDisplay() {
if (document.getElementById('selectedShape').value)
{
switch(document.getElementById('selectedShape').value){
case "Round":
document.getElementById('queryDisplayShape').src = "http://www.wikidoc.org/images/7/79/Round_Grey_Pill.png";
break;
case "Oval":
document.getElementById('queryDisplayShape').src = "http://www.wikidoc.org/images/3/3d/Oval_Grey_Pill.png";
break;
case "Square":
document.getElementById('queryDisplayShape').src = "http://www.wikidoc.org/images/e/e9/Square_Grey_Pill.png";
break;
case "Rectangular":
document.getElementById('queryDisplayShape').src = "http://www.wikidoc.org/images/8/8e/Rectangular_Grey_Pill.png";
break;
case "Triangular":
document.getElementById('queryDisplayShape').src = "http://www.wikidoc.org/images/c/cb/Triangular_Grey_Pill.png";
break;
case "Capsule":
document.getElementById('queryDisplayShape').src = "http://www.wikidoc.org/images/b/b8/Capsule_Grey_Pill.png";
break;
case "Pentagon":
document.getElementById('queryDisplayShape').src = "http://www.wikidoc.org/images/b/be/Pentagon_Grey_Pill.png";
break;
case "Hexagon":
document.getElementById('queryDisplayShape').src = "http://www.wikidoc.org/images/2/25/Hexagon_Grey_Pill.png";
break;
case "Diamond":
document.getElementById('queryDisplayShape').src = "http://www.wikidoc.org/images/9/98/Diamond_Grey_Pill.png";
break;
case "Gear":
document.getElementById('queryDisplayShape').src = "http://www.wikidoc.org/images/5/56/Gear_Grey_Pill.png";
break;
case "DoubleCircle":
document.getElementById('queryDisplayShape').src = "http://www.wikidoc.org/images/7/73/Double_Circle_Grey_Pill.png";
break;
case "Clover":
document.getElementById('queryDisplayShape').src = "http://www.wikidoc.org/images/a/a3/Clover_Grey_Pill.png";
break;
case "TearDrop":
document.getElementById('queryDisplayShape').src = "http://www.wikidoc.org/images/9/9a/Tear_Drop_Grey_Pill.png";
break;
case "Octagon":
document.getElementById('queryDisplayShape').src = "http://www.wikidoc.org/images/f/f7/Octagon_Grey_Pill.png";
break;
case "SemiCircle":
document.getElementById('queryDisplayShape').src = "http://www.wikidoc.org/images/8/80/SemiCircle_Grey_Pill.png";
break;
case "Bullet":
document.getElementById('queryDisplayShape').src = "http://www.wikidoc.org/images/8/8c/Bullet_Grey_Pill.png";
break;
case "Trapezoid":
document.getElementById('queryDisplayShape').src = "http://www.wikidoc.org/images/7/7a/Trapezoid_Grey_Pill.png";
break;
case "FreeForm":
document.getElementById('queryDisplayShape').src = "http://www.wikidoc.org/images/f/fa/Free_Form_Grey_Pill.png";
break;
}
}
if (document.getElementById('selectedImprint').value)
{
document.getElementById('queryDisplaySelectedImprint').innerHTML = document.getElementById('selectedImprint').value
}
};
function changeImage(a) {
        document.getElementById("img").src=a;
}


function runQuery() {
function runQuery() {
$('#resultsTable-body tr').remove();
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";
Line 135: Line 342:
};
};
</script>
</script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<style type="text/css">
<style type="text/css">
/*Query Container********************************************
/*Query Container********************************************
Line 209: Line 419:
height:auto !important;
height:auto !important;
}
}
#queryDisplayContent img{
height:44px !important;
                float:right !important;
}
/*Results*****************************************************
/*Results*****************************************************
Line 223: Line 436:
*************************************************************/
*************************************************************/
#resultsTable-container{
#resultsTable-container{
width:100%;
width:100% !important;
position:relative;
position:relative;
}
}
Line 229: Line 442:
#resultsTable{
#resultsTable{
border-collapse:collapse;
border-collapse:collapse;
width:100% !important;
table-layout:fixed;
table-layout:fixed;
border:1px solid #B0E0E6;
border:1px solid #B0E0E6;
Line 251: Line 465:
}
}


 
        .resultsTable-class tbody img{
                width:300px !important;
        }




Line 275: Line 491:
             Please Select a Shape:
             Please Select a Shape:
                 <select name="selectedShape" id="selectedShape">
                 <select name="selectedShape" id="selectedShape">
                <option value="Round">Round</option>
                    <option value=""></option>
                    <option value="Round">Round</option>
                     <option value="Oval">Oval</option>
                     <option value="Oval">Oval</option>
                     <option value="Square">Square</option>
                     <option value="Square">Square</option>
Line 293: Line 510:
                     <option value="Trapezoid">Trapezoid</option>
                     <option value="Trapezoid">Trapezoid</option>
                     <option value="FreeForm">Free Form</option>
                     <option value="FreeForm">Free Form</option>
                   
                 </select>
                 </select>
                 <br/>
                 <br/>
                 Please Select a Color:
                 Please Select a Color:
                 <select name="selectedColor" id="selectedColor">
                 <select name="selectedColor" id="selectedColor">
                <option value="Brown">Brown</option>
                    <option value=""></option>
                    <option value="Brown">Brown</option>
                     <option value="Red">Red</option>
                     <option value="Red">Red</option>
                     <option value="Orange">Orange</option>
                     <option value="Orange">Orange</option>
Line 315: Line 532:
             Please Choose the Pill Scoring:
             Please Choose the Pill Scoring:
                 <select name="selectedScoring" id="selectedScoring">
                 <select name="selectedScoring" id="selectedScoring">
                <option value="1">1</option>
                    <option value=""></option>
                    <option value="1">1</option>
                     <option value="2">2</option>
                     <option value="2">2</option>
                     <option value="3">3</option>
                     <option value="3">3</option>
Line 331: Line 549:
             </div>
             </div>
             <div id="propertySize-container">
             <div id="propertySize-container">
             Show Pills Larger than:<input name="selectedMinSize" id="selectedMinSize" type="text"size="5"> mm
             Show Pills between:<input type="text" class="pillSizeSlider" data-index="0" name="selectedMinSize" id="selectedMinSize" size="5"/> mm and <input type="text" class="pillSizeSlider" data-index="1" name="selectedMaxSize" id="selectedMaxSize" size="5" /> mm
                 <br/>
                 <br/>
                Show Pills Smaller than: <input name="selectedMaxSize" id="selectedMaxSize" type="text"size="5"> mm
                <div id="slider"></div>
             </div>
             </div>
             <div id="propertyNDCIngreds-container">
             <div id="propertyNDCIngreds-container">
Line 374: Line 592:
                 </div>
                 </div>
                 <div class="queryDisplayImprint">
                 <div class="queryDisplayImprint">
            <span id="queryDisplaySelectedImprint"></span>
                 </div>
                 </div>
             </div>
             </div>
             <div id="queryDisplaySize-container">
             <div id="queryDisplaySize-container">
            <div class="queryDisplayHeader">
            <span>Selected Size:</span>
                </div>
                <div id="queryDisplaySize-container">
             <div class="queryDisplayHeader">
             <div class="queryDisplayHeader">
             <span>Selected Size:</span>
             <span>Selected Size:</span>
                 </div>
                 </div>
                 <div class="queryDisplayContent">
                 <div class="queryDisplayContent">
                <img id="queryDisplaySize" src="http://static.wikidoc.org/2/29/Relative_Pill_Size_13_mm.jpg" />
<img id="queryDisplaySmallSize" style="height:44px !important" src="http://static.wikidoc.org/f/f2/Pill_Size_5_mm.png" />
<img id="queryDisplayDime" style="height:44px !important" src="http://static.wikidoc.org/c/c4/Pill_Size_Dime.png" />
<img id="queryDisplayLargeSize" style="height:44px !important" src="http://static.wikidoc.org/e/e6/Pill_Size_20_mm.png" />
                 </div>
                 </div>
            </div>
             </div>
             </div>
             <div id="queryDisplaySearch-container" style="align-content:center;">
             <div id="queryDisplaySearch-container" style="align-content:center;">
             <button id="button">Click Me</button>
             <button id="search">Search</button>
          <button id="update">Update</button>
             </div>
             </div>
         </div>
         </div>
     </div>
     </div>
<div id="resultsTable-container" style="visibility:hidden;">
    <div id="resultsTable-container" style="visibility:collapse;">
  <div id="resultsTable-container2" style="visibility:hidden;">
    <table id="resultsTable" class="resultsTable-class">
    <table id="resultsTable" class="resultsTable-class">
        <thead>
    <th><div id="resultsTable-container3" style="visibility:hidden;">
            <th>
      <div id="resultsTable-container4" style="visibility:hidden;">
                Drug Name
        <div id="resultsTable-container5" style="visibility:hidden;">
                </th>
          <table id="resultsTable2" class="resultsTable-class">
               
            <th><div id="resultsTable-container6" style="visibility:hidden;">
                <th>
              <table id="resultsTable3" class="resultsTable-class">
                Pill Imprint
                <thead>
                </th>
                  <th> Drug Name </th>
               
                    <th> Pill Imprint </th>
                <th style="width:60px;">
                    <th> Dosage </th>
                Dosage
                    <th> Ingredients </th>
                </th>
                    <th> Pill Color </th>
               
                    <th> Pill Shape </th>
                <th>
                    <th> Pill Size (mm) </th>
                Ingredients
                    <th style="width:60px;"> Score </th>
                </th>
                    <th> NDC </th>
               
                    <th style="width:360px;"> Pill Image </th>
                <th style="width:60px;">
                    <tbody id="resultsTable-body">
                Pill Color
                      <tr>
                </th>
                        <td>tsdf</td>
               
                        <td>tdsfds</td>
                <th style="width:60px;">
                        </tr>
                Pill Shape
                      <tr>
                </th>
                        <td>tsdf</td>
               
                        <td> tsdfdsfdsF</td>
                <th>
                        </tr>
                Pill Size (mm)
                      </tbody>
                </th>
                </table>
               
              </div></th>
                <th style="width:60px;">
                          </table>
                Score
          </div>
                </th>
        </div>
               
    </div></th>
                <th>
    </table>
                NDC
  </div>
                </th>
</div>
               
                <th style="width:360px;">
                Pill Image
                </th>
            </thead>
           
            <tbody id="resultsTable-body">
           
            </tbody>
        </table>
    </div>
</includeonly>
</includeonly>

Latest revision as of 03:49, 23 July 2015

Retrieved from "https://www.wikidoc.org/index.php?title=Widget:CJP4&oldid=1120552"