Widget:PillIdentifier: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
Line 1: | Line 1: | ||
<includeonly> | <includeonly> | ||
<script content-type= "application/javascript" src="http://www.wikidoc.org/ | <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> | <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"> | <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> | ||
Line 118: | Line 118: | ||
return queryShape+queryColor+queryScoring+queryImprint+queryMinSize+queryMaxSize+queryNDC+queryIngred; | return queryShape+queryColor+queryScoring+queryImprint+queryMinSize+queryMaxSize+queryNDC+queryIngred; | ||
}; | }; | ||
function runQuery() { | function runQuery() { | ||
$('#resultsTable-body | $('#resultsTable-body').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"; | ||
Line 271: | Line 272: | ||
$("#"+selectedProperty).val(selectedValue); | $("#"+selectedProperty).val(selectedValue); | ||
} | } | ||
function nav(){ | function nav(){ | ||
Line 276: | Line 278: | ||
var dirIndex = ""; | var dirIndex = ""; | ||
var position = $(".propertyContainerActive").data()["order"]; | var position = $(".propertyContainerActive").data()["order"]; | ||
var positionArr = [ | var positionArr = [ | ||
["", ""], | ["", ""], | ||
Line 296: | Line 296: | ||
console.log("Ruh-roh. Something happened in figuring out what direction to navigate"); | console.log("Ruh-roh. Something happened in figuring out what direction to navigate"); | ||
} | } | ||
var newActiveDiv = positionArr[position][dirIndex]; | var newActiveDiv = positionArr[position][dirIndex]; | ||
console.log(newActiveDiv); | console.log(newActiveDiv); | ||
$( | $(".propertyContainerActive").attr("class", "propertyContainerInactive"); | ||
$(newActiveDiv).attr("class", "propertyContainerActive"); | |||
$(newActiveDiv). | |||
var nextPosition = $(newActiveDiv).data()["order"]; | var nextPosition = $(newActiveDiv).data()["order"]; | ||
console.log(nextPosition); | console.log(nextPosition); | ||
console.log(positionArr[nextPosition][0]); | console.log(positionArr[nextPosition][0]); | ||
Line 315: | Line 311: | ||
if (positionArr[nextPosition][0] == ""){ | if (positionArr[nextPosition][0] == ""){ | ||
$("#back"). | $("#back").css("visibility","hidden"); | ||
} | } | ||
else | else | ||
{ | { | ||
$("#back"). | $("#back").css("visibility","visible"); | ||
} | } | ||
if (positionArr[nextPosition][1] | if (positionArr[nextPosition][1] == ""){ | ||
$("#next"). | $("#next").css("visibility","hidden"); | ||
} | } | ||
else | else | ||
{ | { | ||
$("#next"). | $("#next").css("visibility","visible"); | ||
} | } | ||
}; | }; | ||
Line 472: | Line 468: | ||
} | } | ||
# | #pillIDNav div{ | ||
display:inline-block; | display:inline-block; | ||
} | } | ||
</style> | </style> | ||
<div id="pillIdentifierContainer"> | |||
<div id="pillIdentiferTitle"> | |||
<span>Pill Identifier</span> | |||
</div> | |||
<div id="queryContainer"> | |||
<div id="queryContainer_Shape" class="propertyContainerActive" data-order="1"> | |||
<span class="propertyContainer_Title">SHAPE</span> | |||
<div id="pillShapeContainer" class="propertyContainer" data-val="Shape"> | |||
<div id="pillShapeContainer_Row1" class="pillContainer_Row"> | |||
<div id="Shape_Round" class="pillShapeOption" data-val="Round" data-prop="selectedShape"><img src="http://static.wikidoc.org/7/79/Round_Grey_Pill.png" alt="Round Pill"/></div> | |||
<div id="Shape_Oval" class="pillShapeOption" data-val="Oval" data-prop="selectedShape"><img src="http://static.wikidoc.org/3/3d/Oval_Grey_Pill.png" alt="Oval Pill"/></div> | |||
<div id="Shape_Square" class="pillShapeOption" data-val="Square" data-prop="selectedShape"><img src="http://static.wikidoc.org/e/e9/Square_Grey_Pill.png" alt="Square Pill"/></div> | |||
<div id="Shape_Rectangular" class="pillShapeOption" data-val="Rectangular" data-prop="selectedShape"><img src="http://static.wikidoc.org/8/8e/Rectangular_Grey_Pill.png" alt="Rectangular Pill"/></div> | |||
<div id="Shape_Triangular" class="pillShapeOption" data-val="Triangular" data-prop="selectedShape"><img src="http://static.wikidoc.org/c/cb/Triangular_Grey_Pill.png" alt="Triangular Pill"/></div> | |||
<div id="Shape_Capsule" class="pillShapeOption" data-val="Capsule" data-prop="selectedShape"><img src="http://static.wikidoc.org/b/b8/Capsule_Grey_Pill.png" alt="Capsule"/></div> | |||
</div> | |||
<div id="pillShapeContainer_Row2" class="pillContainer_Row"> | |||
<div id="Shape_Diamond" class="pillShapeOption" data-val="Diamond" data-prop="selectedShape"><img src="http://static.wikidoc.org/9/98/Diamond_Grey_Pill.png" alt="Diamond Pill"/></div> | |||
<div id="Shape_Pentagon" class="pillShapeOption" data-val="Pentagon" data-prop="selectedShape"><img src="http://static.wikidoc.org/b/be/Pentagon_Grey_Pill.png" alt="Pentagon Pill"/></div> | |||
<div id="Shape_Hexagon" class="pillShapeOption" data-val="Hexagon" data-prop="selectedShape"><img src="http://static.wikidoc.org/2/25/Hexagon_Grey_Pill.png" alt="Hexagon Pill"/></div> | |||
<div id="Shape_Octagon" class="pillShapeOption" data-val="Octagon" data-prop="selectedShape"><img src="http://static.wikidoc.org/f/f7/Octagon_Grey_Pill.png" alt="Octagon Pill"/></div> | |||
<div id="Shape_DoubleCircle" class="pillShapeOption" data-val="DoubleCircle" data-prop="selectedShape"><img src="http://static.wikidoc.org/7/73/Double_Circle_Grey_Pill.png" alt="Double Circle Pill"/></div> | |||
<div id="Shape_Clover" class="pillShapeOption" data-val="Clover" data-prop="selectedShape"><img src="http://static.wikidoc.org/a/a3/Clover_Grey_Pill.png" alt="Clover Pill"/></div> | |||
</div> | |||
<div id="pillShapeContainer_Row3" class="pillContainer_Row"> | |||
<div id="Shape_Gear" class="pillShapeOption" data-val="Gear" data-prop="selectedShape"><img src="http://static.wikidoc.org/5/56/Gear_Grey_Pill.png" alt="Gear Pill"/></div> | |||
<div id="Shape_Bullet" class="pillShapeOption" data-val="Bullet" data-prop="selectedShape"><img src="http://static.wikidoc.org/8/8c/Bullet_Grey_Pill.png" alt="Bullet Pill"/></div> | |||
<div id="Shape_SemiCircle" class="pillShapeOption" data-val="SemiCircle" data-prop="selectedShape"><img src="http://static.wikidoc.org/8/80/SemiCircle_Grey_Pill.png" alt="Semi-Circle Pill"/></div> | |||
<div id="Shape_Trapezoid" class="pillShapeOption" data-val="Trapezoid" data-prop="selectedShape"><img src="http://static.wikidoc.org/7/7a/Trapezoid_Grey_Pill.png" alt="Trapezoid Pill"/></div> | |||
<div id="Shape_Tear_Drop" class="pillShapeOption" data-val="TearDrop" data-prop="selectedShape"><img src="http://static.wikidoc.org/9/9a/Tear_Drop_Grey_Pill.png" alt="Tear Drop Pill"/></div> | |||
<div id="Shape_Free_Form" class="pillShapeOption" data-val="FreeForm" data-prop="selectedShape"><img src="http://static.wikidoc.org/f/fa/Free_Form_Grey_Pill.png" alt="Free Form Pill"/></div> | |||
</div> | |||
</div> | |||
</div> | </div> | ||
<div id=" | <div id="queryContainer_Color" class="propertyContainerInactive" data-order="2"> | ||
< | <span class="propertyContainer_Title">COLOR</span> | ||
<div id="pillColorContainer" class="propertyContainer"> | |||
< | <div id="pillColorContainer_Row1" class="pillContainer_Row"> | ||
<div id="Color_RedBrown" class="pillColorOption" data-val="Brown" data-prop="selectedColor"><img src="http://static.wikidoc.org/8/8a/Pid_redbrown.png" alt="Red/Brown"></div> | |||
<div id="Color_Orange" class="pillColorOption" data-val="Orange" data-prop="selectedColor"><img src="http://static.wikidoc.org/a/ae/Pid_orange.png" alt="Orange"></div> | |||
<div id="Color_Yellow" class="pillColorOption" data-val="Yellow" data-prop="selectedColor"><img src="http://static.wikidoc.org/e/e3/Pid_yellow.png" alt="Yellow"></div> | |||
<div id="Color_Green" class="pillColorOption" data-val="Green" data-prop="selectedColor"><img src="http://static.wikidoc.org/c/c0/Pid_green.png" alt="Green"></div> | |||
<div id="Color_Torqouise" class="pillColorOption" data-val="Torquoise" data-prop="selectedColor"><img src="http://static.wikidoc.org/1/11/Pid_turquoise.png" alt="Torqouise"></div> | |||
<div id="Color_Blue" class="pillColorOption" data-val="Blue" data-prop="selectedColor"><img src="http://static.wikidoc.org/7/70/Pid_blue.png" alt="Blue"></div> | |||
</div> | |||
<div id="pillColorContainer_Row2" class="pillContainer_Row"> | |||
<div id="Color_Purple" class="pillColorOption" data-val="Purple" data-prop="selectedColor"><img src="http://static.wikidoc.org/1/19/Pid_purple.png" alt="Purple"></div> | |||
<div id="Color_Pink" class="pillColorOption" data-val="Pink" data-prop="selectedColor"><img src="http://static.wikidoc.org/9/97/Pid_pink.png" alt="Pink"></div> | |||
<div id="Color_Black" class="pillColorOption" data-val="Black" data-prop="selectedColor"><img src="http://static.wikidoc.org/c/cb/Pid_black.png" alt="Black"></div> | |||
<div id="Color_Grey" class="pillColorOption" data-val="Grey" data-prop="selectedColor"><img src="http://static.wikidoc.org/f/f5/Pid_grey.png" alt="Grey"></div> | |||
<div id="Color_White" class="pillColorOption" data-val="White" data-prop="selectedColor"><img src="http://static.wikidoc.org/d/d2/Pid_white.png" alt="White"></div> | |||
</div> | |||
</div> | </div> | ||
<div id=" | </div> | ||
<div id="queryContainer_Scoring" class="propertyContainerInactive" data-order="3"> | |||
<span class="propertyContainer_Title">SCORING</span> | |||
<div id="pillScoreContainer" class = "propertyContainer"> | |||
<div id="pillScoreContainer_Row1" class="pillContainer_Row"> | |||
<div id="pillScore1" class="pillScoreOption" data-val="1" data-prop="selectedScoring"><img src="http://static.wikidoc.org/f/f2/Score_1_Grey_Pill.jpg" alt="Score 1"></div> | |||
<div id="pillScore2" class="pillScoreOption" data-val="2" data-prop="selectedScoring"><img src="http://static.wikidoc.org/9/95/Score_2_Grey_Pill.jpg" alt="Score 2"></div> | |||
</div> | |||
<div id="pillScoreContainer_Row2" class="pillContainer_Row"> | |||
<div id="pillScore3" class="pillScoreOption" data-val="3" data-prop="selectedScoring"><img src="http://static.wikidoc.org/d/d9/Score_3_Grey_Pill.jpg" alt="Score 3"></div> | |||
<div id="pillScore4" class="pillScoreOption" data-val="4" data-prop="selectedScoring"><img src="http://static.wikidoc.org/3/35/Score_4_Grey_Pill.jpg" alt="Score 4"></div> | |||
</div> | |||
</div> | </div> | ||
</div> | </div> | ||
<div id=" | <div id="queryContainer_Size" class="propertyContainerInactive" data-order="4"> | ||
<span class="propertyContainer_Title">SIZE</span> | |||
<div id="pillSizeContainer" class="propertyContainer"> | |||
<span>Search for Pills Between: </span> | |||
<div id="sliderContainer" class="pillContainer_Row" style="m"> | |||
<div class="pillSizeOption"> | |||
<img id="DisplaySmallSize" src="http://static.wikidoc.org/f/f2/Pill_Size_5_mm.png" alt=""/> | |||
< | <span id="pillMinSize">5</span><span> mm</span> | ||
< | |||
</div> | </div> | ||
<div | <div class="pillSizeOption"> | ||
<img id="DisplayDime" src="http://static.wikidoc.org/c/c4/Pill_Size_Dime.png" alt="Reference Dime"/> | |||
</div> | </div> | ||
<div | <div class="pillSizeOption"> | ||
<span id="pillMaxSize">20</span><span> mm</span> | |||
< | <img id="DisplayLargeSize" src="http://static.wikidoc.org/e/e6/Pill_Size_20_mm.png" alt=""/> | ||
</div> | </div> | ||
</div> | </div> | ||
<br> | |||
<br> | |||
<div id="slider"></div> | |||
</div> | </div> | ||
</div> | |||
<div id = "misc" class="propertyContainerInactive" data-order="5"> | |||
<form name="selectMisc"> | |||
<div class="pillMiscContainer" id="queryContainer-Imprint" data-prop="selectedImprint" data-inputName="pillImprint"> | |||
<span class="propertyContainer_Title">IMPRINT</span> | |||
<div id="PillImprintContainer" class="propertyContainer-Small"> | |||
<span>Please Enter the Pill Imprint: </span><br> | |||
<input id="pillImprint" name="pillImprint" type="text"> | |||
<div id=" | |||
< | |||
</div> | </div> | ||
</div> | </div> | ||
<div class="pillMiscContainer" id="queryContainer-NDC" data-prop="selectedNDC" data-inputName="pillNDC"> | |||
<span class="propertyContainer_Title">NDC</span> | |||
<div id="pillNDCContainer" class="propertyContainer-Small"> | |||
<span>If available, please enter the NDC: </span><br> | |||
<input id="pillNDC" name="pillNDC" type="text"> | |||
< | |||
< | |||
</div> | </div> | ||
</div> | |||
<div class="pillMiscContainer" id="queryContainer-Ingred" data-prop="selectedIngred" data-inputName="pillIngred"> | |||
<span class="propertyContainer_Title">INGREDIENTS</span> | |||
<div id="PillIngredContainer" class="propertyContainer-Small"> | |||
<span>If available, please enter the ingredients: </span><br> | |||
<input id ="pillIngred" name="pillIngred" type="text"> | |||
</div> | </div> | ||
</div> | </div> | ||
</form> | |||
</div> | |||
</div> | |||
<div id="formContainer"> | |||
<form id="selectedProperties" action="" method="get"> | |||
<input type="hidden" name="selectedShape" id="selectedShape" value=""> | |||
<input type="hidden" name="selectedColor" id="selectedColor" value=""> | |||
<input type="hidden" name="selectedScoring" id="selectedScoring" value=""> | |||
<input type="hidden" name="selectedMinSize" id="selectedMinSize" value="5"> | |||
<input type="hidden" name="selectedMaxSize" id="selectedMaxSize" value="20"> | |||
<input type="hidden" name="selectedImprint" id="selectedImprint" value=""> | |||
<input type="hidden" name="selectedNDC" id="selectedNDC" value=""> | |||
<input type="hidden" name="selectedIngred" id="selectedIngred" value=""> | |||
</form> | |||
</div> | |||
<div id="pillIDNav"> | |||
<div id="back" class="navTool" data-direction="back" style="visibility:hidden"> | |||
<img src="http://static.wikidoc.org/8/83/Pid_backbutton.png" alt="back"> | |||
</div> | |||
<div id="next" class="navTool" data-direction="next" style="visibility:visible"> | |||
<img src="http://static.wikidoc.org/8/8a/Pid_nextbutton.png" alt="next"> | |||
< | |||
</div> | </div> | ||
<div id="submit"> | |||
<img src="http://static.wikidoc.org/6/6c/Pid_submitbutton.png" alt="Submit"> | |||
</div> | </div> | ||
</div> | </div> | ||
</div> | |||
<div id="resultsTable-container" style="visibility:collapse;"> | |||
<table id="resultsTable" class="resultsTable-class"> | |||
<thead> | |||
<th> | |||
Drug Name | |||
</th> | |||
<th> | |||
Pill Imprint | |||
</th> | |||
<th style="width:60px;"> | |||
Dosage | |||
</th> | |||
<th> | |||
Ingredients | |||
</th> | |||
<th style="width:60px;"> | |||
Pill Color | |||
</th> | |||
<th style="width:60px;"> | |||
Pill Shape | |||
</th> | |||
<th> | |||
Pill Size (mm) | |||
</th> | |||
<th style="width:60px;"> | |||
Score | |||
</th> | |||
<th> | |||
NDC | |||
</th> | |||
<th style="width:360px;"> | |||
Pill Image | |||
</th> | |||
</thead> | |||
<tbody id="resultsTable-body"> | |||
</tbody> | |||
</table> | |||
</div> | |||
</includeonly> | </includeonly> |