/apps/request/templates/filter/edit_body.tpl
Smarty Template | 359 lines | 311 code | 48 blank | 0 comment | 16 complexity | 805627c9e103d6dc469a6d6288a24469 MD5 | raw file
1<script> 2 3var config = {json var=$config}; 4 5{literal} 6$(document).ready(function() { 7 initTemplate(); 8}); 9 10function initTemplate() 11{ 12 if(content) 13 initTemplateBuild(); 14 else 15 initTemplateDefault(); 16} 17 18function initTemplateBuild() 19{ 20 // initialize the first menu 21 var menu = $('#template .fieldMenu'); 22 for(var fieldName in config.fields) 23 menu.append('<option value="' + fieldName + '">' + config.fields[fieldName].display + '</option>'); 24 updateOperatorMenu($('#template .rowWrapper:first')); 25 updateOperandField($('#template .rowWrapper:first')); 26 buildTemplate(content, $('#editable'), 1); 27 28 // disable all of it's buttons 29 $('#editable .anyAllWrapper:first button').attr({disabled: 'true'}); 30 // newSub.find('.minusButton').attr({disabled: 'true'}); 31 32 33} 34 35function buildTemplate(curContent, container, depth) 36{ 37 // get a copy of the first subWrapper row 38 var newSub = $('#template .subWrapper:first').clone(); 39 newSub.find('.anyall').val(curContent.anyall); 40 41 for(var index in curContent.fields) 42 { 43 var newRow = $('#template .rowWrapper:first').clone(); 44 if(index == 0) 45 newRow.find('.minusButton:first').attr({disabled: 'true'}); 46 var rowContainer = newSub.find('.rowContainer:first'); 47 rowContainer.append(newRow); 48 49 // set up the first operand (field) menu 50 var firstMenu = newRow.find('.fieldMenu:first'); 51 firstMenu.val(curContent.fields[index].field); 52 updateOperatorMenu(newRow); 53 54 // set up operator menu 55 var operatorMenu = newRow.find('.operatorMenu:first'); 56 operatorMenu.val(curContent.fields[index].operator); 57 updateOperandField(newRow); 58 59 // set up operand menu 60 var operandMenu = newRow.find('.operand:first'); 61 updateOperandMenu(operandMenu, curContent.fields[index].operandValues); 62 } 63 64 for(var index in curContent.subs) 65 { 66 buildTemplate(curContent.subs[index], rowContainer, depth + 1); 67 } 68 69 // add the subWrapper to the outer container 70 container.append(newSub); 71} 72 73function updateOperandMenu(menu, values) 74{ 75 menu.val(values.menu); 76} 77 78function initTemplateDefault() 79{ 80 // initialize the first menu 81 var menu = $('#template .fieldMenu'); 82 for(var fieldName in config.fields) 83 menu.append('<option value="' + fieldName + '">' + config.fields[fieldName].display + '</option>'); 84 85 // initialize the second menu 86 updateOperatorMenu($('.rowWrapper:first')); 87 88 // initialize the operand field 89 updateOperandField($('.rowWrapper:first')); 90 91 // add the first row to the real table 92 var firstRow = $('#template .subWrapper:first').clone(); 93 addDefaultRowToSub(firstRow); 94 firstRow.find('.minusButton').attr({disabled: 'true'}); 95 $('#editable').append(firstRow); 96} 97 98 99 100function fieldMenuChanged(fieldMenu) 101{ 102 var row = $(fieldMenu).parents('.rowWrapper'); 103 updateOperatorMenu(row); 104 updateOperandField(row); 105} 106 107function operatorMenuChanged(fieldMenu) 108{ 109 var row = $(fieldMenu).parents('.rowWrapper'); 110 updateOperandField(row); 111} 112 113function updateOperatorMenu(row) 114{ 115 var fieldMenu = row.find('.fieldMenu'); 116 var fieldName = fieldMenu.val(); 117 var operatorMenu = row.find('.operatorMenu'); 118 operatorMenu.empty(); 119 var type = config.fields[fieldName].type; 120 for(var i in config.types[type].operators) 121 { 122 var operatorName = config.types[type].operators[i]; 123 var operatorDisplayName = config.operators[operatorName].display; 124 operatorMenu.append('<option value="' + operatorName + '">' + operatorDisplayName + '</option>'); 125 } 126} 127 128function updateOperandField(row) 129{ 130 // get jQuery references to all of the desired elements 131 var fieldMenu = row.find('.fieldMenu'); 132 var fieldName = fieldMenu.val(); 133 var operatorMenu = row.find('.operatorMenu'); 134 var operatorName = operatorMenu.val(); 135 var typeName = config.fields[fieldName].type; 136 var widgitName = config.type_operator_map[typeName][operatorName].widgit; 137 var templateCell = $('#template .' + widgitName); 138 var targetCell = row.find('.operandBox'); 139 140 // put in the correct element 141 targetCell.empty(); 142 targetCell.append( templateCell.html() ); 143 144 setOperandOptions(fieldName, widgitName, targetCell); 145} 146 147function setOperandOptions(fieldName, widgitName, targetCell) 148{ 149 var option; 150 if(widgitName == 'int_menu') 151 options = config.widgits[widgitName].list; 152 else 153 options = config.fields[fieldName].list; 154 155 var target = targetCell.find('select'); 156 if(options && target) 157 { 158 for(var key in options) 159 target.append('<option value="' + key + '">' + options[key] + '</option>'); 160 target.css({width: '100%'}); 161 } 162} 163 164function newRow(theButton) 165{ 166 var newRow = $('#template .rowWrapper:first').clone(); 167 var theRow = $(theButton).parents('.rowWrapper:first'); 168 theRow.after( newRow ); 169} 170 171function newSubRow(theButton) 172{ 173 var newRow = $('#template .rowWrapper:first').clone(); 174 var theRow = $(theButton).parents('.subWrapper:first'); 175 theRow.after( newRow ); 176} 177 178function addDefaultRowToSub(sub) 179{ 180 var newRow = $('#template .rowWrapper:first').clone(); 181 newRow.find('.minusButton:first').attr({disabled: 'true'}); 182 updateOperatorMenu(newRow); 183 updateOperandField(newRow); 184 sub.find('.rowContainer:first').append(newRow); 185} 186 187function removeRow(theButton) 188{ 189 $(theButton).parents('.rowWrapper:first').remove(); 190} 191 192function newSub(theButton) 193{ 194 var newRow = $('#template .subWrapper:first').clone(); 195 addDefaultRowToSub(newRow); 196 var theRow = $(theButton).parents('.rowWrapper:first'); 197 theRow.after( newRow ); 198} 199 200function newSubSub(theButton) 201{ 202 var newRow = $('#template .subWrapper:first').clone(); 203 var theRow = $(theButton).parents('.subWrapper:first'); 204 theRow.after( newRow ); 205} 206 207function removeSub(theButton) 208{ 209 $(theButton).parents('.subWrapper:first').remove(); 210} 211 212function saveFilterData(showAlert) 213{ 214 var data = {}; 215 // var curContainer = $('#editable .rowContainer:first'); 216 var curContainer = $('#editable'); 217 gatherFilterData(data, curContainer, 1); 218 var stringed = JSON.stringify(data); 219 if(showAlert) 220 alert(stringed); 221 $('#filterData').val(stringed); 222} 223 224function getFilterData() 225{ 226 var data = {}; 227 var curContainer = $('#editable'); 228 // var curContainer = $('#editable .rowContainer:first'); 229 gatherFilterData(data, curContainer, 1); 230 return JSON.stringify(data); 231} 232 233function gatherFilterData(data, cur, depth) 234{ 235 // console.log('depth start = ' + depth); 236 data.subs = []; 237 data.fields = []; 238 239 cur.children('.subWrapper:first').each(function(i, e) { 240 var newNode = {anyall: $(this).find('.anyAllWrapper:first .anyall:first').val()}; 241 data.subs.push(newNode); 242 console.log('calling: ' + ' ' + depth + ' ' + i); 243 gatherFilterData(newNode, $(this).find('.rowContainer:first'), depth + 1); 244 console.log('called: ' + ' ' + depth + ' ' + i); 245 }); 246 // console.log('back to = ' + depth); 247 248 cur.children('.rowWrapper').each(function(i, e) { 249 // console.log('depth = ' + depth + ' i = ' + i); 250 if(true || depth < 3) 251 { 252 var operandValues = {}; 253 $(this).find('.operandBox:first .operand').each(function() { 254 operandValues[$(this).attr('name')] = $(this).val(); 255 }); 256 257 data.fields.push({ 258 field: $(this).find('.fieldMenu:first').val(), 259 operator: $(this).find('.operatorMenu:first').val(), 260 operandValues: operandValues 261 }); 262 } 263 }); 264 // console.log('depth end = ' + depth); 265} 266 267{/literal} 268</script> 269 270<style> 271{literal} 272{/literal} 273</style> 274 275<div id="template" style="border: 1px solid black; display: none"> 276 <div class="subWrapper" style="border: 0px solid red"> 277 <div class="anyAllWrapper" style="border: 0px solid green"> 278 <div style="float: left"> 279 <select class="anyall"> 280 <option value="all">all</option> 281 <option value="any">any</option> 282 </select> of the following rules: 283 </div> 284 <div style="float: right"> 285 <table> 286 <tr> 287 <td> 288 <table border="0" width="100%"> 289 <tr> 290 <td width="30px"><div style="float: left; width: 30px"><button class="minusButton" onclick="removeSub(this); return false;">-</button></div></td> 291 <td width="30px"><div style="float: left; width: 30px"><button class="plusButton" onclick="newSubRow(this); return false;">+</button></div></td> 292 <td width="30px"><div style="float: left; width: 30px"><button class="subButton" onclick="newSubSub(this); return false;">..</button></div></td> 293 </tr> 294 </table> 295 </td> 296 </tr> 297 </table> 298 </div> 299 <br style="clear: both"/> 300 </div> 301 <div style="border: 0px solid orange; margin-left: 20px" class="rowContainer"> 302 </div> 303 </div> 304 305 <div class="rowWrapper" style="border: 0px solid blue;"> 306 <table border="0" width="100%"> 307 <tr> 308 <td> 309 <table border="0" width="100%"> 310 <tr> 311 <td width="20%"><select class="fieldMenu" style="width: 100%" onchange="fieldMenuChanged(this); return false;"></select></td> 312 <td width="20%"><select class="operatorMenu" style="width: 100%" onchange="operatorMenuChanged(this); return false;"></select></td> 313 </tr> 314 </table> 315 </td> 316 <td> 317 <table border="0" width="100%"> 318 <tr> 319 <td class="operandBox"></td> 320 <td width="30px"><div style="float: left; width: 30px"><button class="minusButton" onclick="removeRow(this); return false;">-</button></div></td> 321 <td width="30px"><div style="float: left; width: 30px"><button class="plusButton" onclick="newRow(this); return false;">+</button></div></td> 322 <td width="30px"><div style="float: left; width: 30px"><button class="subButton" onclick="newSub(this); return false;">..</button></div></td> 323 </tr> 324 </table> 325 </td> 326 </tr> 327 </table> 328 </div> 329 330 <div class="date"> 331 <input class="operand" name="date"> 332 </div> 333 <div class="date_range"> 334 <input class="operand" name="date1"> 335 <input class="operand" name="date2"> 336 </div> 337 <div class="select"> 338 <select class="operand" name="menu"></select> 339 </div> 340 <div class="select_range"> 341 <select class="operand" name="menu1"></select> 342 <select class="operand" name="menu2"></select> 343 </div> 344 <div class="select_multiple"> 345 <select class="operand" name="multi" multiple="multiple"></select> 346 </div> 347 <div class="int_menu"> 348 <table width="100%"><tr><td width="10%"> 349 <input class="operand" name="amount" type="text" size="4"> 350 </td> 351 <td> 352 <select class="operand" name="units"></select> 353 </td></tr></table> 354 </div> 355</div> 356 357<div style="border: 1px; width: 100%" id="editable"> 358</div> 359<input type="hidden" name="filterData" id="filterData" value="asdfff">