/apps/request/templates/filter/edit_body.tpl

  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">