summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorPaulina Jankowska <paulinkaj1@gmail.com>2013-08-12 07:57:02 (GMT)
committer Paulina Jankowska <paulinkaj1@gmail.com>2013-08-12 07:57:02 (GMT)
commit51e02861e8d2f20559f740f2033560c03f68bf63 (patch)
treeafc87b60326f7c4d5a741e2faf7c7501c339dcf6
parentc3b18e11931ef46205cbc31000f91476c9c4ffb9 (diff)
downloadQCG-Data-51e02861e8d2f20559f740f2033560c03f68bf63.zip
QCG-Data-51e02861e8d2f20559f740f2033560c03f68bf63.tar.gz
QCG-Data-51e02861e8d2f20559f740f2033560c03f68bf63.tar.bz2
Adding metadata searching gui to idrop-web
-rw-r--r--idrop-web/web-app/css/dhx_comboStyle.css73
-rw-r--r--idrop-web/web-app/js/mydrop/metaFiltering.js182
2 files changed, 255 insertions, 0 deletions
diff --git a/idrop-web/web-app/css/dhx_comboStyle.css b/idrop-web/web-app/css/dhx_comboStyle.css
new file mode 100644
index 0000000..2f80286
--- /dev/null
+++ b/idrop-web/web-app/css/dhx_comboStyle.css
@@ -0,0 +1,73 @@
+
+.dhx_combo_img{position:absolute; top:0px; right:0px; width:23px; height:25px}
+.dhx_combo_option_img{position:relative; top:1px; margin:0px; margin-left:2px; left:0px; width:23px; height:25px; padding:0px}
+.dhx_combo_input{color:#333333; font-family: Arial; font-size: 9pt; border:0px; padding:2px 2px 2px 2px; position:absolute; top:0px; outline: none 0}
+.dhx_combo_box{position:relative; text-align:left; border:1px solid #7F9DB9; height:25px; _height:22px; overflow:hidden; background-color: white; margin-bottom: 9px;
+}
+.dhx_combo_list{position:absolute; z-index:230; overflow-y:auto; -webkit-overflow-scrolling: touch; overflow-x:hidden; border:1px solid black; height:100px; font-family: Arial; font-size: 9pt; background-color: white; z-index: 12000}
+.dhx_combo_list div{cursor:default; padding:2px 2px 2px 2px}
+.dhx_selected_option{background-color:navy; color:white}
+.dhx_combo_img_rtl{position:absolute; top:0px; left:1px; width:17px; height:20px}
+.dhx_combo_option_img_rtl{float:right; margin-right :0px; width:18px; height:18px}
+.dhx_combo_list_rtl{direction: rtl; position:absolute; z-index:230; overflow-y:auto; -webkit-overflow-scrolling: touch; overflow-x:hidden; border:1px solid black; height:100px; font-family: Arial; font-size: 9pt; background-color: white}
+.dhx_combo_list_rtl div{direction: rtl; padding:2px 2px 2px 2px}
+.dhx_combo_list_rtl div div{float :right !important; cursor:default;
+}
+.dhx_combo_list_rtl div img{float :right !important}
+.dhx_combo_list_rtl div input{float :right !important}
+.dhx_combo_input{box-sizing: border-box}
+.dhx_combo_box.dhx_terrace .dhx_combo_img{height:30px; top: -2px}
+.dhx_combo_box.dhx_terrace{height: 25px; line-height: 23px; _height:27px; padding:0px}
+.dhx_combo_box.dhx_terrace .dhx_combo_img_rtl{height:30px}
+.dhx_combo_box.dhx_terrace{border:1px solid #CECECE}
+.combo_dhx_terrace_sel{background:#FFF3A1; color:black}
+.dhx_combo_list.dhx_terrace_list div{cursor:default; padding:6px 4px}
+.dhx_combo_list.dhx_terrace_list{background-color: white; border:1px solid #CECECE; font-family:Arial; font-size: 13px}
+.dhx_combo_list_rtl.dhx_terrace_list{background-color: white; border:1px solid #CECECE; font-family:Arial; font-size: 13px}
+.dhx_combo_box.dhx_terrace .dhx_combo_input {height: 26px; line-height: 24px; font-family:Arial; font-size: 13px; padding:0px 0px 0px 2px;
+}
+.dhx_combo_box.dhx_skyblue{border:1px solid #a4bed4}
+.dhx_combo_box.dhx_skyblue .dhx_combo_input {font-family:Tahoma; font-size: 14px; margin-bottom: 9px;
+ height:25px; line-height:20px; padding:0 0 0 2px}
+.dhx_combo_list.dhx_skyblue_list{background-color: #eaf2fb; border:1px solid #a4bed4; font-family:Tahoma; font-size: 11px}
+.dhx_combo_list.dhx_skyblue_list div{cursor:default; padding:3px 4px}
+.dhx_combo_list_rtl.dhx_skyblue_list{background-color: #eaf2fb; border:1px solid #a4bed4; font-family:Tahoma; font-size: 11px}
+.combo_dhx_skyblue_sel{background-image: url('imgs/bg_selection.gif') !important; background-position: bottom; background-repeat: repeat-x; color:black}
+.combo_dhx_web_sel{background-color: #ACDAF0; color:black;
+}
+.dhx_combo_box.dhx_web .dhx_combo_input {height:20px; line-height:20px; padding:0 0 0 2px}
+.dhx_combo_box.dhx_web,.dhx_combo_list.dhx_web_list,.dhx_combo_list_rtl.dhx_web_list {border: 1px solid #8B8B8B}
+.dhtmlx_message_area{position:fixed; right:5px; width:250px; z-index:1000; padding:5px 0px}
+.dhtmlx-info{color:#444; border-radius:4px; min-width: 120px; padding:10px 10px 10px 20px; background-color:#FFFFCC; font-size:12px; font-family:Tahoma; z-index: 10000; margin:0px 5px 5px 5px; border:1px solid #d3d3d3; box-shadow: 0px 0px 5px #ccc;
+ -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease}
+.dhtmlx-info.hidden{height:0px; padding-bottom:0px; padding-top:0px; border-width:0px; margin-top:0px; margin-bottom:0px; overflow:hidden}
+.dhtmlx-error{background-color: #f17373; color:#fff}
+.dhtmlx_modal_box{overflow:hidden; display: inline-block; min-width: 300px; width: 300px !important; text-align: center; position:fixed; background-color: #fff; z-index:20000;
+ -moz-box-shadow: 0px 0px 5px #AAAAAA; -webkit-box-shadow: 0px 0px 0px #AAAAAA; box-shadow: 0px 0px 5px #AAAAAA; border:1px solid #a4bed4; border-radius: 6px}
+.dhtmlx_popup_title{padding: 5px 0; font-size: 12px; -webkit-border-top-right-radius:6px; -webkit-border-top-left-radius:6px; border-radius-top-right:6px; line-height: 16px; font-family:Tahoma; font-weight: bold}
+.dhtmlx-info, .dhtmlx_popup_title, .dhtmlx_popup_button{-webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; -moz-user-select:-moz-none; cursor:pointer}
+.dhtmlx_popup_text{font-size: 13px; font-family: Tahoma; color:#444; min-height: 30px; padding: 20px 10px 10px 10px !important; overflow:hidden}
+.dhtmlx_popup_controls{font-family: Tahoma; font-weight:bold; padding: 10px 10px 17px 10px !important}
+.dhtmlx_popup_button{font-size: 12px; font-family: Tahoma; font-weight: bold; min-width: 120px; width: 120px; height: 20px; display: inline-block; margin: 0 5px; border-radius: 4px}
+.dhtmlx_popup_button div{line-height:20px}
+div.dhx_modal_cover {background-color:#000; cursor:default; opacity: 0.2; filter:alpha(opacity = 0.2); position: fixed; z-index:19999; left: 0px; top: 0px; width: 100%; height: 100%; border: none; zoom: 1}
+.dhtmlx_popup_button{color: #2e3947; text-shadow: 0 1px 0 #ffffff; border: 1px solid #a4bed4; background-color: #d5e6fc; background-image: -moz-linear-gradient(center bottom, #e1eeff 0%, #cce2fe 12%, #ecf2f7 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #ecf2f7), color-stop(0.88, #cce2fe), color-stop(1.00, #e1eeff)); background: -o-linear-gradient( top, #e1eeff, #cce2fe 12%, #ecf2f7); background: linear-gradient(top, #e1eeff, #cce2fe 12%, #ecf2f7 ); background: -ms-linear-gradient(top, #e1eeff 0%,#cce2fe 12%,#ecf2f7 100%)}
+.dhtmlx_popup_button:active, .dhtmlx_popup_button:focus{box-shadow: inset 0 0 2px #aaaaaa; background: #bdd9fc;
+ background: -moz-linear-gradient(top, #C4DDFF 0%, #bdd9fc 88%, #deeaf4 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C4DDFF), color-stop(88%,#bdd9fc), color-stop(100%,#deeaf4));
+ background: -o-linear-gradient(top, #C4DDFF 0%,#bdd9fc 88%,#deeaf4 100%);
+ background: -ms-linear-gradient(top, #C4DDFF 0%,#bdd9fc 88%,#deeaf4 100%);
+ background: linear-gradient(top, #C4DDFF 0%,#bdd9fc 88%,#deeaf4 100%);
+}
+.dhtmlx_popup_title{box-shadow:inset 0 0 2px #ffffff; display: block}
+.dhtmlx-alert-error, .dhtmlx-confirm-error{}
+.dhtmlx-alert-error .dhtmlx_popup_title, .dhtmlx-confirm-error .dhtmlx_popup_title{color : white; border: 1px solid #f17373; background: #f17373; background: -webkit-linear-gradient(top,#ff7c7c, #f17373 88%, #ff7361); background: -moz-linear-gradient(top, #ff7c7c, #f17373 88%, #ff7361); background: -o-linear-gradient(top, #ff7c7c, #f17373 88%, #ff7361); background: linear-gradient(top, #ff7c7c, #f17373 88%, #ff7361); background: -ms-linear-gradient(top, #ff7c7c 0%,#f17373 88%,#ffbc75 100%)}
+.dhtmlx-alert-error.dhtmlx_modal_box, .dhtmlx-confirm-error.dhtmlx_modal_box{border: 1px solid #f17373}
+.dhtmlx-alert-warning .dhtmlx_popup_title, .dhtmlx-confirm-warning .dhtmlx_popup_title{color : #000; border: 1px solid #d2b07f; background: #ff9f37;
+ background: -webkit-linear-gradient(top, #ffc786, #ff9523 88%, #ffbc75); background: -moz-linear-gradient(top,#ffc786,#ff9523 88%, #ffbc75); background: -o-linear-gradient(top, #ffc786, #ff9523 88%, #ffbc75); background: linear-gradient(top, #ffc786, #ff9523 88%, #ffbc75); background: -ms-linear-gradient(top, #ffc786 0%,#ff9523 88%,#ffbc75 100%)}
+.dhtmlx-alert-warning .dhtmlx_popup_controls, .dhtmlx-confirm-warning .dhtmlx_popup_controls {border: 1px solid #d5d5d5; border-width: 0 1px 1px 1px}
+.dhtmlx-alert-warning .dhtmlx_popup_text, .dhtmlx-confirm-warning .dhtmlx_popup_text{border: 1px solid #d5d5d5; border-width: 0 1px 0 1px}
+.dhtmlx-alert .dhtmlx_popup_title, .dhtmlx-confirm .dhtmlx_popup_title{color : #000; border: 1px solid #a4bed4; background: #d5e6fc; background: -moz-linear-gradient(center bottom, #e1eeff 0%, #cce2fe 12%, #ecf2f7 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #ecf2f7), color-stop(0.88, #cce2fe), color-stop(1.00, #e1eeff)); background: -o-linear-gradient( top, #e1eeff, #cce2fe 12%, #ecf2f7); background: linear-gradient(top, #e1eeff, #cce2fe 12%, #ecf2f7 ); background: -ms-linear-gradient(top, #e1eeff 0%,#cce2fe 12%,#ecf2f7 100%);
+}
+.dhtmlx-alert .dhtmlx_popup_controls, .dhtmlx-confirm .dhtmlx_popup_controls{border: 1px solid #d5d5d5; border-width: 0 1px 1px 1px}
+.dhtmlx-alert .dhtmlx_popup_text, .dhtmlx-confirm .dhtmlx_popup_text{border: 1px solid #d5d5d5; border-width: 0 1px 0 1px}
diff --git a/idrop-web/web-app/js/mydrop/metaFiltering.js b/idrop-web/web-app/js/mydrop/metaFiltering.js
new file mode 100644
index 0000000..d87253d
--- /dev/null
+++ b/idrop-web/web-app/js/mydrop/metaFiltering.js
@@ -0,0 +1,182 @@
+$(document).ready(function() {
+ $(document).on({focusin: changeColorOnFocusin, focusout: changeColorOnFocusout}, ".filterMetaTable > tbody > tr");
+
+ $(document).on({click: addNewCondition, mouseenter: reverseColors, mouseleave: reverseColors}, ".addConditionBtn");
+ $(document).on({click: deleteCondition, mouseenter: reverseColors, mouseleave: reverseColors}, ".delConditionBtn");
+ $(document).on({click: deleteCondNode, mouseenter: reverseColors, mouseleave: reverseColors}, ".deleteNodeBtn");
+
+ $(document).on("click", "#newNodeBtn", addNewNode);
+
+
+ function reverseColors() {
+ var curColor = $(this).css("color");
+ var curBackG = $(this).css("background-color");
+
+ if (curBackG == "transparent")
+ curBackG = "#FFFFFF";
+
+ if (curColor == "#FFFFFF")
+ curColor = "transparent";
+
+ $(this).css({"color": curBackG, "background-color": curColor});
+
+ }
+
+ function changeColorOnFocusin() {
+ $(this).css("background-color", "#EEEEEE");
+ }
+
+
+ function changeColorOnFocusout() {
+ $(this).css("background-color", "#FFFFFF");
+ }
+
+
+ function newPartOfForm(which) {
+ var newCell;
+ switch (which) {
+ case 1:
+ newCell = "<div class='meta-header'> Attribute </div>\n\
+ <div class='dhx_combo_box dhx_skyblue' style='width: 177px;'>\n\
+ <input class='dhx_combo_input' type='text' autocomplete='off' style='width: 155px;'>\n\
+ <input type='hidden' name='' value=''>n\
+ <input type='hidden' name='_new_value' value='false'>\n\
+ <img class='dhx_combo_img' src='/idrop-web/imgs/combo_select_dhx_skyblue.gif'></div>";
+ break;
+ case 2:
+ newCell = "<div class='meta-header'> Operator</div>\n\
+ <select class='metaOperator'> \n\
+ <option> = </option> \n\
+ <option> > </option>\n\
+ <option> < </option>\n\
+ <option> >= </option>\n\
+ <option> <= </option>\n\
+ <option> <> </option>\n\
+ </select> ";
+ break;
+ case 3:
+ newCell = "<div class='meta-header'> Value </div>\n\
+ <input type='text'>";
+ break;
+ case 4:
+ newCell = "<br>\n\
+ <button class='delConditionBtn' disabled>DELETE</button>";
+ }
+ return newCell;
+ }
+
+
+ function addNewCondition() {
+
+ var curTab = $(this).closest(".filterMetaTable"); // current filterMetaTable
+
+
+ var newCell1 = newPartOfForm(1); //Attribute
+ var newCell2 = newPartOfForm(2); //Operator
+ var newCell3 = newPartOfForm(3); //Value
+ var newCell4 = newPartOfForm(4); //Delete Button
+
+ var newRow = "<tr class='none'> <td>" + newCell1 + "</td>" + "<td>" + newCell2 + "</td>" + "<td>" + newCell3 + "</td>" + "<td>" + newCell4 + "</td></tr>";
+
+ $(curTab).find("tbody").append(newRow);
+
+ $('tr.none').removeClass('none').animate({'backgroundColor': '#D6D6D6'}, 700, function() {
+ $(this).animate({'backgroundColor': '#FFFFFF'}, 700);
+ });
+
+ $(curTab).find(".delConditionBtn").removeAttr("disabled"); //enabling minusBtn*/
+
+ }
+
+
+ function deleteCondition() {
+ var rowToDel = $(this).closest("tr");
+ var curTab = $(this).closest(".filterMetaTable");
+
+ $(rowToDel).animate({'backgroundColor': '#D6D6D6'}, 500, function() {
+ $(rowToDel).remove();
+ });
+
+
+ var rowsLeft = $(curTab).find("tbody > tr").length; //checking amount of rows
+ if (rowsLeft == 2)
+ {
+ $(curTab).find(".delConditionBtn").attr("disabled", "disabled");
+ }
+ }
+
+
+ function addNewNode() {
+
+ var operator = "<div style='text-align: center; vertical-align: middle; display: block'>\n\
+ <select class='metaOperator'>\n\
+ <option>AND</option>\n\
+ <option>OR</option>\n\
+ </select></div>";
+
+ var head = "<thead>\n\
+ <tr>\n\
+ <th colspan='2'><input type='button' class='addConditionBtn' value='ADD CONDITION'></th>\n\
+ <th colspan='2'><button class='deleteNodeBtn' disabled>X</button></th></tr>" +
+ "<tr>\n\
+ <th colspan='2'>\n\
+ <input type='radio' value='Every' name=condOption"+ $(".filterMetaTable").length +" checked>\n\
+ <label class='labelRadio'> Every condition fulfilled </label></th>" +
+ "<th colspan='2'><input type='radio' value='One' name=condOption"+$(".filterMetaTable").length +">\n\
+ <label class='labelRadio'> At least one condition fulfilled</label></th>\n\
+ </tr>\n\
+ </thead>";
+
+ var cell1 = newPartOfForm(1);
+ var cell2 = newPartOfForm(2);
+ var cell3 = newPartOfForm(3);
+ var cell4 = newPartOfForm(4);
+
+
+ $(this).parent().before(operator + "<table class='filterMetaTable' name='none'>" + head + "<tbody> <tr>" +
+ "<td>" + cell1 + "</td><td>" + cell2 + "</td><td>" + cell3 + "</td><td>" + cell4 + "</td>" +
+ "</tr> </tbody> </table>");
+
+ $('.filterMetaTable[name=none]').removeAttr('name').animate({'backgroundColor': '#D6D6D6'}, 700, function() {
+ $(this).animate({'backgroundColor': '#FFFFFF'}, 700);
+ });
+
+ $(this).parents(".span9").find(".deleteNodeBtn").removeAttr("disabled");
+ }
+
+
+ function deleteCondNode() {
+
+ var tablesLeft = $(".filterMetaTable").length;
+
+ if (tablesLeft <= 2)
+ $(this).parents(".span9").find(".deleteNodeBtn").attr("disabled", "disabled");
+
+ var curTab = $(this).closest(".filterMetaTable");
+
+
+ if ($(curTab).index() == 0)
+ {
+ $(curTab).next().fadeOut("slow", function() {
+ $(this).remove();
+ });
+ }
+ else
+ {
+ $(curTab).prev().fadeOut("slow", function() {
+ $(this).remove();
+ });
+ }
+
+
+
+ $(curTab).fadeOut("slow", function() {
+ $(this).remove();
+ });
+
+
+
+ }
+
+
+}); \ No newline at end of file