Kosmos QB 2018

by dshilkret

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Example 1:
<select id="example1">
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
    <option value="4">four</option>
</select>Example 2 :
<select id="example2">
    <option id="1">one</option>
    <option id="2">two</option>
    <option id="3">three</option>
    <option id="4">four</option>
</select>


<!--main requirements
font-awesome.min.css
bootstrap.min.css
jquery.min.js (if not already loaded)
-->
<div data-ng-controller="BasicController as example">        
  <div class="container">    <h4>DS KosmosConfigulator v1.0.2018</h4>              
    <br>    <h5>Filters</h5>              
    <div id="filter-container">              
    </div>              
    <div id="filter-proto">                    
      <div class="list-group-item elastic-builder-chooser list-group-item-info ng-scope filter-field">                          
        <div class="twrapper">                                
          <!-- left side -->                                  
          <div class="left-side">                                      
            <span class="form-inline">                                                                                       
              <div class="form-group">                                                                                                   
                <label>From Type                                                                                     
                </label>                                                                                       
              </div>                                                                             
           ...

CSS

label {
  min-width: 100px;
}

a.fl-right {
  float: right;
  top: -18px;
  position: relative;
}

a.fl-right-side {
  float: right;
}

#filter-proto {
  display: none;
}

span.pipe_spacer {
  min-width: 40px;
}

.filter-include-directive span {
  color: #ccc;
  font-weight: lighter;
}

.filter-include-directive span.active {
  color: #294;
  font-weight: bold;
}

.list-group-item.actions a:nth-child(2) {
  display: none; //hides the create group button
}

.twrapper {
  display: table;
  width: 100%;
}

div.left-side {
  width: 40%; display: table-cell;
}
div.right-side {
  width: 60%; display: table-cell;
}

JavaScript

(function($) {

  $(document).ready(function() {
    console.log('start');
    //copy the prototype actions into the container
    $('#filter-container').append($('#filter-proto div.list-group-item.actions').clone());

    //delegate to handle the must|should|shouldnot choices
    $('#filter-container').delegate(".filter-include-directive span", "click", function() {
      $(this).parent().find("span.active").removeClass("active");
      $(this).addClass("active");
    });

    //delegate for click actions on a tags in the container
    $('#filter-container').delegate("a", "click", function() {
      var a_title = $(this).attr("title");
      console.log(a_title);
      if (a_title == 'Add Rule') {
        $('#filter-container div.list-group-item.actions').before($('#filter-proto div.filter-field').clone());
        $('#filter-container div.filter-field').find("select").change();
      } else if (a_title == 'Remove Section') {
        $(this).parentsUntil('#filter-container').remove();
      } else if (a_title == 'Save') {
        $('#filter-container div.filter-field').each(function() {
          //foreach filter box config
          var from_type = $('Select[name="Filter Type"]', this).val();
          console.log('filter type: ' + from_type);
          var major_map = new Map();
          major_map.set('Field', 'Select[name="Table"]');
          major_map.set('Keyword', 'Select[name="Keyword"]');
          major_map.set('Pattern', 'Select[name="Pattern"]');
          major_map.set('Other Value', 'input[name="Fixed Value"]');

          var selection_major = $(major_map.get(from_type), this).val();
          console.log('selection major: ' + selection_major);

          var minor_map = new Map();
          minor_map.set('Field', 'Select[name="Field"]');
          var selection_minor = minor_map.get(from_type) === undefined ? '' : $(minor_map.get(from_type), this).val();
          console.log('selection minor: ' + selection_minor);

          var operation_map =...