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);
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);
}
};
};
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="propertyContainerActive">
         <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="propertyContainerActive">
         <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="propertyContainerActive">
         <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="propertyContainerActive">
<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>

Revision as of 13:25, 1 August 2015