source: extensions/ASearchEngine/templates/ase_dialog_date_choose.tpl @ 20318

{combine_script id="jquery.ui.datepicker" path="themes/default/js/ui/jquery.ui.datepicker.js" require='jquery,jquery.ui'}

{assign var="datepicker_language" value="themes/default/js/ui/i18n/jquery.ui.datepicker-"|@cat:$lang_info.code|@cat:".js"}
{if "PHPWG_ROOT_PATH"|@constant|@cat:$datepicker_language|@file_exists}
{combine_script id="jquery.ui.datepicker-$lang_info.code" path=$datepicker_language}
{/if}

{html_head}
<link rel="stylesheet" type="text/css" href="themes/default/js/ui/theme/jquery.ui.datepicker.css">
{/html_head}


{literal}
<style type='text/css'>
  #ui-datepicker-div {
    z-index:1500;
    display:none;
  }
</style>

<script type="text/javascript">
/**
 * include this template in a page and use dialogChooseASEDateBox.show({options}) to display
 * the dialog box
 *
 */
dialogChooseASEDateBox = function()
{
  var dialogOptions = {
      id:'',
      eventOk:null,
      cBuilder:null,

      values: {
        dateType:'c', //c:creation, a:available
        from:'',
        to:'',
        searchType:'bt'
      },
    };

  /**
   * initialize the dialog box
   */
  var initDialogBox = function()
  {
    $("#iDialogASEDateChoose")
    .dialog(
      {
        autoOpen: false,
        resizable: false,
        width:550,
        height:200,
        modal: true,
        draggable:true,
        dialogClass: 'gcBgTabSheet gcBorder',
        title: '{/literal}{"ase_choose_date"|@translate}{literal}',
        open: function(event, ui)
        {
        },
        buttons:
        {
          '{/literal}{"ase_ok"|@translate}{literal}':
            function()
            {
              if(checkValidity())
              {
                dialogOptions.values.dateType=$('[name=fASEDateDateType]:checked').val();
                dialogOptions.values.from=$('#iASEDateFrom').val();
                dialogOptions.values.to=$('#iASEDateTo').val();
                dialogOptions.values.searchType=$('#iASEDateSearchType').val();

                switch(dialogOptions.values.searchType)
                {
                  case 'gt':
                  case 'eq':
                    dialogOptions.values.to='';
                    break;
                  case 'lt':
                    dialogOptions.values.from='';
                    break;
                }

                if(dialogOptions.cBuilder!=null)
                {
                  setCBuilderItem(dialogOptions.id, dialogOptions.values);
                }

                if(dialogOptions.eventOk!=null)
                {
                  dialogOptions.eventOk(dialogOptions.id, dialogOptions.values);
                }
                $(this).dialog('close');
              }
            },
          '{/literal}{"ase_cancel"|@translate}{literal}':
            function()
            {
              $(this).dialog('close');
            }
        }
      }
    );

    $("#iASEDateFrom").datepicker({dateFormat:'yy-mm-dd'});
    $('#iASEDateTo').datepicker({dateFormat:'yy-mm-dd'});
    $('#iASEDateSearchType').bind('change', changeSearchType);
  }


  /**
   * called when the search type is changed
   */
  var changeSearchType = function ()
  {
    switch($('#iASEDateSearchType').val())
    {
      case 'bt':
        $("#iASEDateFromRow").show();
        $("#iASEDateToRow").show();
        break;
      case 'gt':
      case 'eq':
        $("#iASEDateFromRow").show();
        $("#iASEDateToRow").hide();
        break;
      case 'lt':
        $("#iASEDateFromRow").hide();
        $("#iASEDateToRow").show();
        break;
    }
  };


  var isDate = function (s)
  {
    re=/\d{2,4}-\d\d-\d\d/i;
    return((re.exec(s)!=null));
  }

  /**
   * check the validity of the condition
   * return Boolean : true if OK, otherwise false
   */
  var checkValidity = function ()
  {
    $(".error").removeClass('error');
    returned=true;

    switch($('#iASEDateSearchType').val())
    {
      case 'bt':
        if(!isDate($("#iASEDateFrom").val() ))
        {
          $("#iASEDateFrom").addClass('error');
          returned=false;
          alert("{/literal}{'ase_error_date_from'|@translate}{literal}");
        }
        if(!isDate($("#iASEDateTo").val() ))
        {
          $("#iASEDateTo").addClass('error');
          returned=false;
          alert("{/literal}{'ase_error_date_to'|@translate}{literal}");
        }
        if(returned && $("#iASEDateFrom").val() > $("#iASEDateTo").val())
        {
          $("#iASEDateTo, #iASEDateFrom").addClass('error');
          returned=false;
          alert("{/literal}{'ase_error_period'|@translate}{literal}");
        }
        break;
      case 'gt':
        if(!isDate($("#iASEDateFrom").val() ))
        {
          $("#iASEDateFrom").addClass('error');
          alert("{/literal}{'ase_error_date'|@translate}{literal}");
          returned=false;
        }
        break;
      case 'lt':
        if(!isDate($("#iASEDateTo").val() ))
        {
          $("#iASEDateTo").addClass('error');
          alert("{/literal}{'ase_error_date'|@translate}{literal}");
          returned=false;
        }
        break;
    }

    return(returned);
  }


  /**
   * the show() function display and manage a dialog box to choose categories
   * and the kind of test to apply
   *
   * @param options : properties to manage the dialog box
   *                  - id : a string to identify a DOM object ; this parameter
   *                         is given to the callback when the OK button is pushed
   *                  - values : an object with 3 properties
   *                               - dateType : 'c' for creation or 'a' for available
   *                               - from :
   *                               - to :
   *                  - eventOK : a callback function, with 2 parameters : id of
   *                              the given DOM object and values parameted
   *                  - cBuilder : a criteriaBuilder object
   *                               if set, the dialog box manage automaticaly
   *                               the criteria builder interface
   */
  this.show = function (options)
  {
    showDialog(options);
  }

  /**
   * private function used to show the dialog box
   */
  var showDialog = function(options)
  {
    if(options.id!=null)
    {
      dialogOptions.id=options.id;
    }
    else
    {
      dialogOptions.id='';
    }

    if(options.eventOk!=null)
    {
      dialogOptions.eventOk=options.eventOk;
    }

    if(options.cBuilder!=null)
    {
      dialogOptions.cBuilder=options.cBuilder;
      dialogOptions.cBuilder.doAction('setOptions',
        {
          onEdit:function (e) { editCB(e.data); },
          onDelete:function (e) { deleteCB(e.data); },
        }
      );
    }

    if(options.values!=null)
    {
      dialogOptions.values=jQuery.extend(dialogOptions.values, options.values);
    }
    else
    {
      dialogOptions.values.dateType='c';
      dialogOptions.values.from='';
      dialogOptions.values.to='';
      dialogOptions.values.searchType='bt';
    }

    if(dialogOptions.values.dateType=='c')
    {
      $('#iASEDateDateTypeC').get(0).checked=true;
    }
    else
    {
      $('#iASEDateDateTypeA').get(0).checked=true;
    }
    $('#iASEDateFrom').val(dialogOptions.values.from);
    $('#iASEDateTo').val(dialogOptions.values.to);
    $('#iASEDateSearchType').val(dialogOptions.values.searchType);

    changeSearchType();

    $("#iDialogASEDateChoose").dialog('open');
  }



  /**
   * manage the 'edit' button from criteria builder interface
   * @param String itemId : the itemId
   */
  var editCB = function (itemId)
  {
    extraData=dialogOptions.cBuilder.doAction('getExtraData', itemId);
    showDialog(
      {
        id:itemId,
        values:
          {
            dateType:extraData.param.dateType,
            from:extraData.param.from,
            to:extraData.param.from,
            searchType:extraData.param.searchType
          },
      }
    );
  }

  /**
   * manage the 'delete' button from criteria builder interface
   * @param String itemId : the itemId
   */
  var deleteCB = function (itemId)
  {
    dialogOptions.cBuilder.doAction('delete', itemId);
  }

  /**
   * set the content for the cBuilder item
   */
  var setCBuilderItem = function(id)
  {
    var content="<div>{/literal}{'ase_the_date'|@translate}{literal} ";

    if(dialogOptions.values.dateType=='c')
    {
      content+="{/literal}{'ase_image_shot'|@translate}{literal}&nbsp;";
    }
    else
    {
      content+="{/literal}{'ase_image_availability'|@translate}{literal}&nbsp;";
    }

    switch(dialogOptions.values.searchType)
    {
      case 'eq':
        content+="{/literal}{'ase_is_equal_to'|@translate}{literal} <span style='font-style:italic;'>"+dialogOptions.values.from+'</span>';
        break;
      case 'bt':
        content+="{/literal}{'ase_is_between'|@translate}{literal} <span style='font-style:italic;'>"+dialogOptions.values.from+"</span> {/literal}{'ase_is_between_and'|@translate}{literal} <span style='font-style:italic;'>"+dialogOptions.values.to+"</span>";
        break;
      case 'gt':
        content+="{/literal}{'ase_is_greater_or_equal'|@translate}{literal} <span style='font-style:italic;'>"+dialogOptions.values.from+"</span>";
        break;
      case 'lt':
        content+="{/literal}{'ase_is_less_or_equal'|@translate}{literal} <span style='font-style:italic;'>"+dialogOptions.values.to+"</span>";
        break;
    }
    content+="</div>";


    if(id=='')
    {
      //no id:add a new item in the list
      dialogOptions.cBuilder.doAction(
        'add',
        content,
        criteriaBuilder.makeExtendedData(
          'ASEDate',
          {
            dateType:dialogOptions.values.dateType,
            searchType:dialogOptions.values.searchType,
            from:dialogOptions.values.from,
            to:dialogOptions.values.to
          }
        )
      );
    }
    else
    {
      // update item
      dialogOptions.cBuilder.doAction(
        'edit',
        id,
        content,
        criteriaBuilder.makeExtendedData(
          'ASEDate',
          {
            dateType:dialogOptions.values.dateType,
            searchType:dialogOptions.values.searchType,
            from:dialogOptions.values.from,
            to:dialogOptions.values.to
          }
        )
      );
    }
  }

  initDialogBox();
}


</script>
{/literal}

<div id="iDialogASEDateChoose" style='display:none;'>

  <table class="formtable">
    <tr>
      <td>{'ase_search_on_date'|@translate}</td>
      <td>
         <label><input type="radio" id="iASEDateDateTypeC" name='fASEDateDateType' value='c' >&nbsp;{'ase_image_shot'|@translate}</label><br>
         <label><input type="radio" id="iASEDateDateTypeA" name='fASEDateDateType' value='a' >&nbsp;{'ase_image_availability'|@translate}</label>
      </td>
    </tr>


    <tr>
      <td>{'ase_the_date'|@translate}</td>
      <td>
        <select id="iASEDateSearchType">
          <option value="eq">{'ase_is_equal_to'|@translate} ...</option>
          <option value="bt">{'ase_is_between'|@translate} ... {'ase_is_between_and'|@translate} ...</option>
          <option value="gt">{'ase_is_greater_or_equal'|@translate} ... </option>
          <option value="lt">{'ase_is_less_or_equal'|@translate} ... </option>
        </select>
      </td>
    </tr>


    <tr id="iASEDateFromRow">
      <td>&nbsp;</td>
      <td>
         <input type="text" id="iASEDateFrom">
      </td>
    </tr>

    <tr id="iASEDateToRow">
      <td>&nbsp;</td>
      <td>
         <input type="text" id="iASEDateTo">
      </td>
    </tr>


  </table>

</div>