Widget:PillIdentifier: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
Line 5: | Line 5: | ||
<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"> | ||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> | <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(loadResources); | $(document).ready(loadResources); | ||
Line 66: | Line 66: | ||
$('.pillMiscContainer').change(updateFormText); | $('.pillMiscContainer').change(updateFormText); | ||
}; | }; | ||
Line 175: | Line 118: | ||
return queryShape+queryColor+queryScoring+queryImprint+queryMinSize+queryMaxSize+queryNDC+queryIngred; | return queryShape+queryColor+queryScoring+queryImprint+queryMinSize+queryMaxSize+queryNDC+queryIngred; | ||
}; | }; | ||
function runQuery() { | function runQuery() { | ||
Line 291: | Line 233: | ||
}); | }); | ||
$('#resultsTable-container').css("visibility", "visible"); | $('#resultsTable-container').css("visibility", "visible"); | ||
}; | |||
function updatePillSizeImages() { | |||
var minPillSize = $('#pillMinSize').val(); | |||
var maxPillSize = $('#pillMaxSize').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" | |||
]; | |||
$("#DisplaySmallSize").attr("src",pillArr[minPillSize]); | |||
$("#DisplayLargeSize").attr("src",pillArr[maxPillSize]); | |||
$("#selectedMinSize").val(minPillSize); | |||
$("#selectedMaxSize").val(maxPillSize); | |||
}; | |||
function updateFormClick(){ | |||
console.log($(this).data()['prop'] + ": " + $(this).data()['val']); | |||
var $this = $(this) | |||
var selectedProperty = $this.data()['prop']; | |||
var selectedValue = $this.data()['val']; | |||
$("#"+selectedProperty).val(selectedValue) | |||
}; | |||
function updateFormText(){ | |||
var $this = $(this); | |||
var selectedInput = $this.data()['inputname']; | |||
var selectedProperty = $this.data()['prop']; | |||
var selectedValue = $("#"+selectedInput).val(); | |||
console.log(selectedProperty + ": " + selectedValue); | |||
$("#"+selectedProperty).val(selectedValue); | |||
} | |||
function nav(direction){ | |||
var dirIndex = ""; | |||
var position = $(".propertyContainerActive").data()[order]; | |||
var positionArr = [ | |||
["", ""], | |||
["", "#queryContainer_Color"], | |||
["#queryContainer_Shape", "#queryContainer_Scoring"], | |||
["#queryContainer_Color", "#queryContainer_Size"], | |||
["#queryContainer_Scoring","#misc"] | |||
["#queryContainer_Size", ""] | |||
]; | |||
if direction == "back" | |||
{ | |||
dirIndex = 0; | |||
} | |||
else if direction == "next" | |||
{ | |||
dirIndex = 1; | |||
} | |||
else { | |||
console.log("Ruh-roh. Something happened in figuring out what direction to navigate"); | |||
} | |||
var newActiveDiv = positionArr[position][dirIndex]; | |||
$(".propertyContainerActive").addClass("propertyContainerInactive"); | |||
$(newActiveDiv).addClass("propertyContainerActive"); | |||
var nextPosition = $(newActiveDiv).data()[order]; | |||
if positionArray[nextPosition][0] !== null{ | |||
$("#back").attr("visibility","visible"); | |||
} | |||
else | |||
{ | |||
$("#back").attr("visibility","hidden"); | |||
} | |||
if positionArray[nextPosition][1] !== null{ | |||
$("#next").attr("visibility","visible"); | |||
} | |||
else | |||
{ | |||
$("#next").attr("visibility","hidden"); | |||
} | |||
}; | }; | ||
</script> | </script> | ||
Line 302: | Line 351: | ||
margin-bottom:10px; | margin-bottom:10px; | ||
width: 95%; | width: 95%; | ||
} | |||
.propertyContainerInactive{ | |||
/*border: thin solid black;*/ | |||
display:inline-block; | |||
padding: 10px; | |||
margin: auto; | |||
margin-top:20px; | |||
margin-bottom:10px; | |||
width: 95%; | |||
display:none; | |||
} | } | ||
Line 428: | Line 488: | ||
} | } | ||
</style> | </style> | ||
<div id="pillIdentifierContainer"> | <div id="pillIdentifierContainer"> | ||
Line 436: | Line 494: | ||
</div> | </div> | ||
<div id="queryContainer"> | <div id="queryContainer"> | ||
<div id="queryContainer_Shape" class="propertyContainerActive"> | <div id="queryContainer_Shape" class="propertyContainerActive" data-order="1"> | ||
<span class="propertyContainer_Title">SHAPE</span> | <span class="propertyContainer_Title">SHAPE</span> | ||
<div id="pillShapeContainer" class="propertyContainer" data-val="Shape"> | <div id="pillShapeContainer" class="propertyContainer" data-val="Shape"> | ||
Line 465: | Line 523: | ||
</div> | </div> | ||
</div> | </div> | ||
<div id="queryContainer_Color" class=" | <div id="queryContainer_Color" class="propertyContainerInactive" data-order="2"> | ||
<span class="propertyContainer_Title">COLOR</span> | <span class="propertyContainer_Title">COLOR</span> | ||
<div id="pillColorContainer" class="propertyContainer"> | <div id="pillColorContainer" class="propertyContainer"> | ||
Line 485: | Line 543: | ||
</div> | </div> | ||
</div> | </div> | ||
<div id="queryContainer_Scoring" class=" | <div id="queryContainer_Scoring" class="propertyContainerInactive" data-order="3"> | ||
<span class="propertyContainer_Title">SCORING</span> | <span class="propertyContainer_Title">SCORING</span> | ||
<div id="pillScoreContainer" class = "propertyContainer"> | <div id="pillScoreContainer" class = "propertyContainer"> | ||
Line 498: | Line 556: | ||
</div> | </div> | ||
</div> | </div> | ||
<div id="queryContainer_Size" class=" | <div id="queryContainer_Size" class="propertyContainerInactive" data-order="4"> | ||
<span class="propertyContainer_Title">SIZE</span> | <span class="propertyContainer_Title">SIZE</span> | ||
<div id="pillSizeContainer" class="propertyContainer"> | <div id="pillSizeContainer" class="propertyContainer"> | ||
Line 521: | Line 579: | ||
</div> | </div> | ||
</div> | </div> | ||
<div id = "misc" class=" | <div id = "misc" class="propertyContainerInactive" data-order="5"> | ||
<form name="selectMisc"> | <form name="selectMisc"> | ||
<div class="pillMiscContainer" id="queryContainer-Imprint" data-prop="selectedImprint" data-inputName="pillImprint"> | <div class="pillMiscContainer" id="queryContainer-Imprint" data-prop="selectedImprint" data-inputName="pillImprint"> | ||
Line 552: | Line 610: | ||
<input type="hidden" name="selectedColor" id="selectedColor" value=""> | <input type="hidden" name="selectedColor" id="selectedColor" value=""> | ||
<input type="hidden" name="selectedScoring" id="selectedScoring" value=""> | <input type="hidden" name="selectedScoring" id="selectedScoring" value=""> | ||
<input type="hidden" name="selectedMinSize" id="selectedMinSize" value=""> | <input type="hidden" name="selectedMinSize" id="selectedMinSize" value="5"> | ||
<input type="hidden" name="selectedMaxSize" id="selectedMaxSize" value=""> | <input type="hidden" name="selectedMaxSize" id="selectedMaxSize" value="20"> | ||
<input type="hidden" name="selectedImprint" id="selectedImprint" value=""> | <input type="hidden" name="selectedImprint" id="selectedImprint" value=""> | ||
<input type="hidden" name="selectedNDC" id="selectedNDC" value=""> | <input type="hidden" name="selectedNDC" id="selectedNDC" value=""> | ||
Line 560: | Line 618: | ||
</div> | </div> | ||
<div id="pillIDNav"> | <div id="pillIDNav"> | ||
<div id="submit"> | <div id="back" data-direction="back" style="visibility:hidden"> | ||
<img src="http://static.wikidoc.org/8/83/Pid_backbutton.png" alt="back"> | |||
</div> | |||
<div id="next" data-direction="next"> | |||
<img src="http://static.wikidoc.org/8/8a/Pid_nextbutton.png" alt="next"> | |||
</div> | |||
<div id="submit"> | |||
<img src="http://static.wikidoc.org/6/6c/Pid_submitbutton.png" alt="Submit"> | <img src="http://static.wikidoc.org/6/6c/Pid_submitbutton.png" alt="Submit"> | ||
</div> | </div> | ||
Line 614: | Line 678: | ||
</table> | </table> | ||
</div> | </div> | ||
</includeonly> | </includeonly> |