Changeset 1526 for trunk/web-app

Timestamp:

Feb 16, 2011, 11:12:14 AM (10 years ago)

Author:

robert@…

Message:

Added assay search and improved query form

Location:

trunk/web-app

Files:

• css/advancedQuery.css (modified) (1 diff)
• js/advancedQuery.js (modified) (5 diffs)

trunk/web-app/css/advancedQuery.css

@@ -1 +1 @@
 label { display: inline-block; zoom: 1; *display: inline; width: 110px; margin-top: 10px;  }
 
-#searchForm { position: relative; border: 1px solid #666666; padding: 5px 10px; margin: 10px 0; }
+#searchForm { position: relative; margin: 10px 0; font-size: 11px; }
+#searchForm h3 { font-size: 13px; }
+#searchForm h3 .nummer { display: inline-block; zoom: 1; *display: inline; width: 25px; } 
 
-#searchForm ul#criteria { margin-left: 110px; padding-left: 0px; margin-top: -19px; list-style-type: none;  }
-#searchForm ul#criteria li { margin: 2px 0; padding-left: 0; }
+#searchForm p { margin-left: 25px; }
+
+#searchForm ul#criteria { margin-left: 25px; padding-left: 0px; list-style-type: none;  }
+#searchForm ul#criteria li { margin: 2px 0; padding: 2px 0; }
 #searchForm ul#criteria li span, 
 #searchForm ul#criteria li a { display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 5px; }
-#searchForm ul#criteria li .entityfield { width: 180px; }
+#searchForm ul#criteria li .entityfield { width: 200px; }
 #searchForm ul#criteria li .operator { width: 100px; }
 #searchForm ul#criteria li .value { width: 240px; }
+#searchForm ul#criteria li .addButton { margin: 4px 0; }
+#searchForm ul#criteria li input, #searchForm ul#criteria li select { font-size: 11px; }
 
-#searchForm ul#criteria li.emptyList { color: #666; }
-#searchForm ul#criteria li.emptyList:hover { cursor: default; }
+#searchForm ul#criteria li.titlerow { font-weight: bold; border-bottom: 1px solid #aaa; }
 
-#searchForm ul#criteria li:hover { cursor: pointer; }
-#searchForm ul#criteria li:hover span { text-decoration: line-through; }
-
-#input_criteria { display: block; float: right; width: 260px; border-left: 1px solid #666; padding: 10px; position: relative; height: 100%; }
-#input_criteria h2 { margin-top: 2px; margin-bottom: 8px; font-weight: bold; }
-#input_criteria label { width: 80px; margin-top: 8px; }
-#input_criteria input.text, #input_criteria select { width: 165px; }
-#input_criteria input.button {  margin-top: 8px; }
-#input_criteria .explanation { font-size: 10px; }
+#searchMode { display: none; }
 
 .ui-menu-item .entity { color: #666; font-style: italic; }

trunk/web-app/js/advancedQuery.js

@@ -8 +8 @@
         // By replacing it with javascript, users without javascript will still be able to use the select
         $( '#queryFieldSelect' ).after( $( '<input type="text" class="text" id="queryFieldText">' ));
-        $( '#queryFieldText' ).after( $( '<input type="hidden" name="field" id="queryField"></span>' ));
+        $( '#queryFieldText' ).after( $( '<input type="hidden" name="criteria.0.entityfield" id="queryField"></span>' ));
         $( '#queryFieldSelect' ).remove();
 
@@ -40 +40 @@
 
 // Is used to keep track of a unique ID for all criteria.
-var criteriumId = 0;
+// ID = 0 is used for the input fields, in order to have them sent as well
+// when the user clicks 'run query'
+var criteriumId = 1;
 
 /**
  * Adds a criteria to the list of search criteria 
  */
-function addCriterium() {
-        var field_descriptor = $( '#input_criteria [name=field]' ).val();
-        var value = $( '#input_criteria input[name=value]' ).val();
-        var operator = $( '#input_criteria select[name=operator]' ).val();
+function addCriterion() {
+        var field_descriptor = $( '#searchForm #queryField' ).val();
+        var value = $( '#searchForm input#value' ).val();
+        var operator = $( '#searchForm select#operator' ).val();
         
         // Show the title and a remove button
         showCriterium(field_descriptor, value, operator);
-        showHideNoCriteriaItem();
+        toggleSearchMode();
         
         // Clear the input form
-        $( '#input_criteria #queryFieldText' ).val( '' );
-        $( '#input_criteria [name=field]' ).val( '' );
-        $( '#input_criteria select[name=operator]' ).val( 'equals' );
-        $( '#input_criteria input[name=value]' ).val( '' );
-}
-
-function showHideNoCriteriaItem() {
-        remainingCriteria = $( '#criteria' ).children().length - 1; // -1 because one element is the 'empty' item
-
-        if( remainingCriteria == 0 ) {
-                // Show the 'none box'
-                $('#criteria .emptyList').show();
-                $('.submitcriteria' ).attr( 'disabled', 'disabled' );
-        } else {
-                // Hide the 'none box'
-                $('#criteria .emptyList').hide();
-                $('.submitcriteria' ).attr( 'disabled', '' );
-        }       
+        $( '#searchForm #queryFieldText' ).val( '' );
+        $( '#searchForm #queryField' ).val( '' );
+        $( '#searchForm select#operator' ).val( 'equals' );
+        $( '#searchForm input#value' ).val( '' );
 }
 
@@ -80 +68 @@
 function removeCriterium(element) {
         element.remove();
-        showHideNoCriteriaItem();
+        toggleSearchMode();
 }
+
+function toggleSearchMode() {
+        if( $('#criteria' ).children( 'li' ) - 2 == 0 ) {
+                $( '#searchMode' ).hide();
+        } else {
+                $( '#searchMode' ).show();
+        }
+}
+
 
 /**
@@ -98 +95 @@
                 valueSpan = createCriteriumElement( 'value', value );
         
+        var input = $( '<a href="#" onClick="return false;"><img src="../plugins/famfamfam-1.0.1/images/icons/delete.png" border="0"></a>' );
+        input.bind( 'click', function() {
+                if( confirm( "Are you sure you want to remove this criterium?" ) ) {
+                        removeCriterium( $(this).closest( 'li' ) );
+                        return false;
+                }
+        });
+        var span = $( '<span></span>' );
+        span.append( "\n" ).append( input );
+        
         // Increase the criteriumID to ensure a unique number every time
         criteriumId++;
@@ -103 +110 @@
         // Append them to a list item
         var li = $( '<li></li>' );
-        li.append( fieldSpan ).append( operatorSpan ).append( valueSpan );
+        li.append( fieldSpan ).append( "\n" ).append( operatorSpan ).append( "\n" ).append( valueSpan ).append( "\n" ).append( span );
         
-        li.bind( 'click', function() {
-                if( confirm( "Are you sure you want to remove this criterium?" ) ) {
-                        removeCriterium( $(this) );
-                        return false;
-                }
-        });
 
-        $('#criteria').append(li);
+        $('#criteria .newCriterion').before(li);
 }