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

Last change on this file since 8911 was 7374, checked in by grum, 14 years ago

Add search by tag ; improve css theming ; add en_Uk language

  • Property svn:executable set to *
File size: 11.5 KB
Line 
1{known_script id="jquery.ui" src=$ROOT_URL|@cat:"themes/default/js/ui/packed/ui.core.packed.js"}
2{known_script id="jquery.ui.dialog" src=$ROOT_URL|@cat:"themes/default/js/ui/packed/ui.dialog.packed.js"}
3{known_script id="jquery.ui.datepicker" src=$ROOT_URL|@cat:"themes/default/js/ui/packed/ui.datepicker.packed.js"}
4
5{assign var="datepicker_language" value="themes/default/js/ui/i18n/ui.datepicker-"|@cat:$lang_info.code|@cat:".js"}
6{if "PHPWG_ROOT_PATH"|@constant|@cat:$datepicker_language|@file_exists}
7{known_script id="jquery.ui.datepicker-$lang_info.code" src=$ROOT_URL|@cat:$datepicker_language}
8{/if}
9{html_head}
10<link rel="stylesheet" type="text/css" href="{$ROOT_URL}themes/default/js/ui/theme/ui.datepicker.css">
11{/html_head}
12
13{literal}
14<style type='text/css'>
15  #ui-datepicker-div {
16    z-index:1500;
17    display:none;
18  }
19</style>
20
21<script type="text/javascript">
22/**
23 * include this template in a page and use dialogChooseASEDateBox.show({options}) to display
24 * the dialog box
25 *
26 */
27dialogChooseASEDateBox = function()
28{
29  var dialogOptions = {
30      id:'',
31      eventOk:null,
32      cBuilder:null,
33
34      values: {
35        dateType:'c', //c:creation, a:available
36        from:'',
37        to:'',
38        searchType:'bt'
39      },
40    };
41
42  /**
43   * initialize the dialog box
44   */
45  var initDialogBox = function()
46  {
47    $("#iDialogASEDateChoose")
48    .dialog(
49      {
50        autoOpen: false,
51        resizable: false,
52        width:550,
53        height:200,
54        modal: true,
55        draggable:true,
56        dialogClass: 'gcBgTabSheet gcBorder',
57        title: '{/literal}{"ase_choose_date"|@translate}{literal}',
58        open: function(event, ui)
59        {
60        },
61        buttons:
62        {
63          '{/literal}{"ase_ok"|@translate}{literal}':
64            function()
65            {
66              if(checkValidity())
67              {
68                dialogOptions.values.dateType=$('[name=fASEDateDateType]:checked').val();
69                dialogOptions.values.from=$('#iASEDateFrom').val();
70                dialogOptions.values.to=$('#iASEDateTo').val();
71                dialogOptions.values.searchType=$('#iASEDateSearchType').val();
72
73                switch(dialogOptions.values.searchType)
74                {
75                  case 'gt':
76                  case 'eq':
77                    dialogOptions.values.to='';
78                    break;
79                  case 'lt':
80                    dialogOptions.values.from='';
81                    break;
82                }
83
84                if(dialogOptions.cBuilder!=null)
85                {
86                  setCBuilderItem(dialogOptions.id, dialogOptions.values);
87                }
88
89                if(dialogOptions.eventOk!=null)
90                {
91                  dialogOptions.eventOk(dialogOptions.id, dialogOptions.values);
92                }
93                $(this).dialog('close');
94              }
95            },
96          '{/literal}{"ase_cancel"|@translate}{literal}':
97            function()
98            {
99              $(this).dialog('close');
100            }
101        }
102      }
103    );
104
105    $("#iASEDateFrom").datepicker({dateFormat:'yy-mm-dd'});
106    $('#iASEDateTo').datepicker({dateFormat:'yy-mm-dd'});
107    $('#iASEDateSearchType').bind('change', changeSearchType);
108  }
109
110
111  /**
112   * called when the search type is changed
113   */
114  var changeSearchType = function ()
115  {
116    switch($('#iASEDateSearchType').val())
117    {
118      case 'bt':
119        $("#iASEDateFromRow").show();
120        $("#iASEDateToRow").show();
121        break;
122      case 'gt':
123      case 'eq':
124        $("#iASEDateFromRow").show();
125        $("#iASEDateToRow").hide();
126        break;
127      case 'lt':
128        $("#iASEDateFromRow").hide();
129        $("#iASEDateToRow").show();
130        break;
131    }
132  };
133
134
135  var isDate = function (s)
136  {
137    re=/\d{2,4}-\d\d-\d\d/i;
138    return((re.exec(s)!=null));
139  }
140
141  /**
142   * check the validity of the condition
143   * return Boolean : true if OK, otherwise false
144   */
145  var checkValidity = function ()
146  {
147    $(".error").removeClass('error');
148    returned=true;
149
150    switch($('#iASEDateSearchType').val())
151    {
152      case 'bt':
153        if(!isDate($("#iASEDateFrom").val() ))
154        {
155          $("#iASEDateFrom").addClass('error');
156          returned=false;
157          alert("{/literal}{'ase_error_date_from'|@translate}{literal}");
158        }
159        if(!isDate($("#iASEDateTo").val() ))
160        {
161          $("#iASEDateTo").addClass('error');
162          returned=false;
163          alert("{/literal}{'ase_error_date_to'|@translate}{literal}");
164        }
165        if(returned && $("#iASEDateFrom").val() > $("#iASEDateTo").val())
166        {
167          $("#iASEDateTo, #iASEDateFrom").addClass('error');
168          returned=false;
169          alert("{/literal}{'ase_error_period'|@translate}{literal}");
170        }
171        break;
172      case 'gt':
173        if(!isDate($("#iASEDateFrom").val() ))
174        {
175          $("#iASEDateFrom").addClass('error');
176          alert("{/literal}{'ase_error_date'|@translate}{literal}");
177          returned=false;
178        }
179        break;
180      case 'lt':
181        if(!isDate($("#iASEDateTo").val() ))
182        {
183          $("#iASEDateTo").addClass('error');
184          alert("{/literal}{'ase_error_date'|@translate}{literal}");
185          returned=false;
186        }
187        break;
188    }
189
190    return(returned);
191  }
192
193
194  /**
195   * the show() function display and manage a dialog box to choose categories
196   * and the kind of test to apply
197   *
198   * @param options : properties to manage the dialog box
199   *                  - id : a string to identify a DOM object ; this parameter
200   *                         is given to the callback when the OK button is pushed
201   *                  - values : an object with 3 properties
202   *                               - dateType : 'c' for creation or 'a' for available
203   *                               - from :
204   *                               - to :
205   *                  - eventOK : a callback function, with 2 parameters : id of
206   *                              the given DOM object and values parameted
207   *                  - cBuilder : a criteriaBuilder object
208   *                               if set, the dialog box manage automaticaly
209   *                               the criteria builder interface
210   */
211  this.show = function (options)
212  {
213    showDialog(options);
214  }
215
216  /**
217   * private function used to show the dialog box
218   */
219  var showDialog = function(options)
220  {
221    if(options.id!=null)
222    {
223      dialogOptions.id=options.id;
224    }
225    else
226    {
227      dialogOptions.id='';
228    }
229
230    if(options.eventOk!=null)
231    {
232      dialogOptions.eventOk=options.eventOk;
233    }
234
235    if(options.cBuilder!=null)
236    {
237      dialogOptions.cBuilder=options.cBuilder;
238      dialogOptions.cBuilder.doAction('setOptions',
239        {
240          onEdit:function (e) { editCB(e.data); },
241          onDelete:function (e) { deleteCB(e.data); },
242        }
243      );
244    }
245
246    if(options.values!=null)
247    {
248      dialogOptions.values=jQuery.extend(dialogOptions.values, options.values);
249    }
250    else
251    {
252      dialogOptions.values.dateType='c';
253      dialogOptions.values.from='';
254      dialogOptions.values.to='';
255      dialogOptions.values.searchType='bt';
256    }
257
258    if(dialogOptions.values.dateType=='c')
259    {
260      $('#iASEDateDateTypeC').get(0).checked=true;
261    }
262    else
263    {
264      $('#iASEDateDateTypeA').get(0).checked=true;
265    }
266    $('#iASEDateFrom').val(dialogOptions.values.from);
267    $('#iASEDateTo').val(dialogOptions.values.to);
268    $('#iASEDateSearchType').val(dialogOptions.values.searchType);
269
270    changeSearchType();
271
272    $("#iDialogASEDateChoose").dialog('open');
273  }
274
275
276
277  /**
278   * manage the 'edit' button from criteria builder interface
279   * @param String itemId : the itemId
280   */
281  var editCB = function (itemId)
282  {
283    extraData=dialogOptions.cBuilder.doAction('getExtraData', itemId);
284    showDialog(
285      {
286        id:itemId,
287        values:
288          {
289            dateType:extraData.param.dateType,
290            from:extraData.param.from,
291            to:extraData.param.from,
292            searchType:extraData.param.searchType
293          },
294      }
295    );
296  }
297
298  /**
299   * manage the 'delete' button from criteria builder interface
300   * @param String itemId : the itemId
301   */
302  var deleteCB = function (itemId)
303  {
304    dialogOptions.cBuilder.doAction('delete', itemId);
305  }
306
307  /**
308   * set the content for the cBuilder item
309   */
310  var setCBuilderItem = function(id)
311  {
312    var content="<div>{/literal}{'ase_the_date'|@translate}{literal} ";
313
314    if(dialogOptions.values.dateType=='c')
315    {
316      content+="{/literal}{'ase_image_shot'|@translate}{literal}&nbsp;";
317    }
318    else
319    {
320      content+="{/literal}{'ase_image_availability'|@translate}{literal}&nbsp;";
321    }
322
323    switch(dialogOptions.values.searchType)
324    {
325      case 'eq':
326        content+="{/literal}{'ase_is_equal_to'|@translate}{literal} <span style='font-style:italic;'>"+dialogOptions.values.from+'</span>';
327        break;
328      case 'bt':
329        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>";
330        break;
331      case 'gt':
332        content+="{/literal}{'ase_is_greater_or_equal'|@translate}{literal} <span style='font-style:italic;'>"+dialogOptions.values.from+"</span>";
333        break;
334      case 'lt':
335        content+="{/literal}{'ase_is_less_or_equal'|@translate}{literal} <span style='font-style:italic;'>"+dialogOptions.values.to+"</span>";
336        break;
337    }
338    content+="</div>";
339
340
341    if(id=='')
342    {
343      //no id:add a new item in the list
344      dialogOptions.cBuilder.doAction(
345        'add',
346        content,
347        criteriaBuilder.makeExtendedData(
348          'ASEDate',
349          {
350            dateType:dialogOptions.values.dateType,
351            searchType:dialogOptions.values.searchType,
352            from:dialogOptions.values.from,
353            to:dialogOptions.values.to
354          }
355        )
356      );
357    }
358    else
359    {
360      // update item
361      dialogOptions.cBuilder.doAction(
362        'edit',
363        id,
364        content,
365        criteriaBuilder.makeExtendedData(
366          'ASEDate',
367          {
368            dateType:dialogOptions.values.dateType,
369            searchType:dialogOptions.values.searchType,
370            from:dialogOptions.values.from,
371            to:dialogOptions.values.to
372          }
373        )
374      );
375    }
376  }
377
378  initDialogBox();
379}
380
381
382</script>
383{/literal}
384
385<div id="iDialogASEDateChoose" style='display:none;'>
386
387  <table class="formtable">
388    <tr>
389      <td>{'ase_search_on_date'|@translate}</td>
390      <td>
391         <label><input type="radio" id="iASEDateDateTypeC" name='fASEDateDateType' value='c' >&nbsp;{'ase_image_shot'|@translate}</label><br>
392         <label><input type="radio" id="iASEDateDateTypeA" name='fASEDateDateType' value='a' >&nbsp;{'ase_image_availability'|@translate}</label>
393      </td>
394    </tr>
395
396
397    <tr>
398      <td>{'ase_the_date'|@translate}</td>
399      <td>
400        <select id="iASEDateSearchType">
401          <option value="eq">{'ase_is_equal_to'|@translate} ...</option>
402          <option value="bt">{'ase_is_between'|@translate} ... {'ase_is_between_and'|@translate} ...</option>
403          <option value="gt">{'ase_is_greater_or_equal'|@translate} ... </option>
404          <option value="lt">{'ase_is_less_or_equal'|@translate} ... </option>
405        </select>
406      </td>
407    </tr>
408
409
410    <tr id="iASEDateFromRow">
411      <td>&nbsp;</td>
412      <td>
413         <input type="text" id="iASEDateFrom">
414      </td>
415    </tr>
416
417    <tr id="iASEDateToRow">
418      <td>&nbsp;</td>
419      <td>
420         <input type="text" id="iASEDateTo">
421      </td>
422    </tr>
423
424
425  </table>
426
427</div>
428
429
Note: See TracBrowser for help on using the repository browser.