<html>
<head>
<title>OrangeScape Report Configuration</title>

<link rel="stylesheet" href="${application_static_path}/static/css/report-pref.css" type="text/css">

<script type="text/javascript" src="${common_static_path}/common/scripts/jquery.js"></script>
<script type="text/javascript" src="${common_static_path}/common/scripts/jquery-ui.min.js"></script>
<script language="javascript" src="${common_static_path}/common/scripts/template.js"></script>
<script language="javascript" src="${common_static_path}/common/scripts/json2.js"></script>
<script type="text/javascript" src="${common_static_path}/runtime/scripts/report-pref.js"></script>
<script language="javascript">
	var path = "$httprequest.getNative().path"
	var template = null;
	var tGroupby = null;
	var tMeasure = null;
	var tFilter = null;

	#set reportPref = None
	#set reportPrefMetadata = None
	#set reportFilter = '{}'
	#set session = $context.getNative()
	#set searchDefId = $httprequest.getNative().path.split('/')[5]
	#if session.getApplication().getSheetMetadataDict().__contains__('ReportPreference'):
		#set reportPrefMetadata = session.getApplication().getSheetMetadata('ReportPreference')
		#set reportPref = session.getIfExists(searchDefId, reportPrefMetadata)
	#end if


	#if $reportPref is not None
		#if $reportPref.getValue('Filter')
			#set reportFilter = $reportPref.getValue('Filter')
		#end if
		var config = {url:'$reportPref.getValue('Url')',
			groupby:$reportPref.getValue('GroupBy'),
			measures:$reportPref.getValue('Measures'),
			chart:$reportPref.getValue('Chart'),
			theme:'$reportPref.getValue('Theme')',
			filter:$reportFilter};
		config.preferenceId = "$reportPref.getValue('SheetId')";
	#else
		var config = {url:"", groupby:{}, measures:{}, chart:{}, filter:{},theme:"dark"};
	#end if
	config.application_static_path = "$application_static_path";
	config.reportId = "$searchDefId";
	config.applicationId = "$metadata.getApplication().getSheetId()";

	#if $reportPrefMetadata is not None:
		config.reportPrefMetadataId = "$reportPrefMetadata.getSheetId()"
		config.reprotPrefStartActivityId = "$reportPrefMetadata.getStartActivity().getSheetId()"
	#end if

	#raw
	$(function() {
		template = TrimPath.parseDOMTemplate("reportPref");
		tGroupby = TrimPath.parseDOMTemplate("reportGroupby");
		tMeasure = TrimPath.parseDOMTemplate("reportMeasure");
		tFilter = TrimPath.parseDOMTemplate("reportFilter");
		$.getJSON(path, load);
	});
	#end raw
</script>

</head>
<body>

<div id="pref101" class='preference' style="width:99%;height:100%;overflow:auto;">
</div>


<textarea id="reportPref" style="display: none;">
	$getFileContents($templatePath+"/report.filter.pref.jstl")
#raw
	<div class="row-fields">
		{for gbi in groupby}
			<div class="gbi item">${gbi_index}</div>
		{/for}
		<div class="marker"> Row <br/>Fields</div>
	</div>
	<div class="data-fields">
		{for mei in measures}
			<div class="mei item">${mei_index}</div>
		{/for}
		<div class="marker"> Data <br/>Fields</div>
	</div>
	{var gb = groupby}
	{var me = measures}
	<div class="fields">
		{var stab = getTab()}
		{for tab in metatab}
			<div>
				<h3>
					<a href="javascript:selectTab('${tab_index}');">
						${tab==stab?"-":"+"} ${tab_index}
						${metadata.columns[tab_index]?"("+metadata.columns[tab_index]+")":""}
					</a>
				</h3>
				{if tab == stab}
					<div class="pane">
						{for tn in keys(tab).sort() }
							{if gb[tn]}
							{elseif me[tn]}
							{else}
								<div class="fi item">${tab[tn]}</div>
							{/if}
						{/for}
					</div>
				{/if}
			</div>
		{/for}
	</div>
	<div class="buttons">
		<div>Theme :
			<select onchange="config.theme=$(this).val()">
				<option/>
				{for thm in ["dark","rounded","clean","light","redish"]}
					<option ${config.theme==thm?"selected":""}>${thm}</option>
				{/for}
			</select>
		</div>
		<div>Chart &nbsp;&nbsp; :
			{var chs = getCharts()}
			<select onchange="config.chart.type=$(this).val();render();">
				<option/>
				{for ch in chs}
					<option ${config.chart.type==ch_index?"selected":""}>${ch_index}</option>
				{/for}
			</select>
		</div>
		{if config.chart.type}
		<div>Series1 :
			<select onchange="config.chart.x=$(this).val()">
				<option/>
				{for gb in groupby}
					<option ${config.chart.x==gb_index?"selected":""}>${gb_index}</option>
				{/for}
			</select>
		</div>
			{if chs[config.chart.type] > 1}
			<div>Series2 :
				<select onchange="config.chart.y=$(this).val()">
					<option/>
					{for gb in groupby}
						<option ${config.chart.y==gb_index?"selected":""}>${gb_index}</option>
					{/for}
				</select>
			</div>
			{/if}
		<div>Data &nbsp;&nbsp;&nbsp; :
			<select onchange="config.chart.data=$(this).val()">
				<option/>
				{for me in measures}
					<option ${config.chart.data==me_index?"selected":""}>${me_index}</option>
				{/for}
			</select>
		</div>
		{/if}
		<div><input type="button" value="OK" onclick="saveConfig()"/></div>
		<div><input type="button" value="Cancel" onclick="window.close()"/></div>
		<div><input type="button" value="Remove" onclick="removeConfig()"/></div>
		<!--
		<div><input type="button" value="Refresh" onclick="render()"/></div>
		-->
	</div>
	<div class="tip">
		Drag the fields from the right into the desired position.
	</div>
</textarea>

<textarea id="reportGroupby" style="display: none;">
	<link rel="stylesheet" href="${application_static_path}/static/css/report-pref.css" type="text/css">
	{var selectedColumn = metadata.columns[selected]}
	{var selectedGroupby = groupby[selected]}
	<form id="measure">
	<div class="measure">
		<div class="properties">
			<div class="heading">
				<input type="hidden" name="name" value="${selected}"/>
				<input type="hidden" name="type" value="${selectedColumn}"/>
			</div>
			<div><label for="name">Name &nbsp;&nbsp;&nbsp;&nbsp; : </label> ${selected}</div>
			<div>
				<label for="display">Display  &nbsp; : </label>
				<input type="text" name="display" value="${selectedGroupby.display}"/>
			</div>
			<div>
				<label for="format">Format  &nbsp; : </label>
				<input type="text" name="format" value="${selectedGroupby.format}"/>
			</div>
			<div>
				<label for="hide">Hide  &nbsp;&nbsp;&nbsp;&nbsp; : </label>
				<input type="checkbox" name="hide" ${selectedGroupby.hide?"checked":""}/>
			</div>
			<div>
				<label for="value">Function : </label>
				<input type="text" name="value" value="${selectedGroupby.value}"/>
			</div>
		</div>
		<div class="buttons">
			<div><input type="button" value="OK" onclick="window.opener.setProperty(this.form, window, 'groupby')"/></div>
			<div><input type="button" value="Cancel" onclick="window.close()"/></div>
		</div>
	</div>
	</form>
</textarea>

<textarea id="reportMeasure" style="display: none;">
	<link rel="stylesheet" href="${application_static_path}/static/css/report-pref.css" type="text/css">
	{var selectedColumn = metadata.columns[selected]}
	{var selectedMeasure = measures[selected]}
	<form id="measure">
	<div class="measure">
		<div class="properties">
			<div class="heading">
				<b>Function</b>
				<input type="hidden" name="name" value="${selected}"/>
				<input type="hidden" name="type" value="${selectedColumn}"/>
			</div>
			<div class="operation">
				<select name="op" size="5">
					{for func in getOperations()}
						<option value="${func_index}" ${func_index==selectedMeasure.op?"selected":""}>${func}</option>
					{/for}
				</select>
			</div>
			<div><label for="name">Name &nbsp;&nbsp;&nbsp;&nbsp; : </label> ${selected}</div>
			<div>
				<label for="display">Display  &nbsp; : </label>
				<input type="text" name="display" value="${selectedMeasure.display}"/>
			</div>
			<div>
				<label for="format">Format  &nbsp; : </label>
				<input type="text" name="format" value="${selectedMeasure.format}"/>
			</div>
			<div>
				<label for="hide">Hide  &nbsp;&nbsp;&nbsp;&nbsp; : </label>
				<input type="checkbox" name="hide" ${selectedMeasure.hide?"checked":""}/>
			</div>
			<div>
				<label for="value">Function : </label>
				<input type="text" name="value" value="${selectedMeasure.value}"/>
			</div>
		</div>
		<div class="buttons">
			<div><input type="button" value="OK" onclick="window.opener.setProperty(this.form, window, 'measures')"/></div>
			<div><input type="button" value="Cancel" onclick="window.close()"/></div>
		</div>
	</div>
	</form>
</textarea>

<textarea id="reportFilter" style="display: none;">
	<link rel="stylesheet" href="${application_static_path}/static/css/report-pref.css" type="text/css">
	<form id="filter">
	<div class="measure">
		<div class="properties">
			<div class="heading">
				<input type="hidden" name="name" value="${selected}"/>
			</div>
			<div><label for="name">Name &nbsp;&nbsp;&nbsp;&nbsp; : </label>${selected}</div>
			<div>
				<label for="display">Display  &nbsp; : </label>
				<input type="text" name="display" value="{if config.metadata.filter}${config.metadata.filter[selected].DisplayValue} {/if}"/>
			</div>
			<div>
				<label for="hide">Hide  &nbsp;&nbsp;&nbsp;&nbsp; : </label>
				<input type="checkbox" name="hide" {if filter && filter[selected]}${filter[selected].hide?"checked":""} {/if}/>
			</div>
		</div>
		<div class="buttons">
			<div><input type="button" value="OK" onclick="window.opener.setProperty(this.form, window, 'filter')"/></div>
			<div><input type="button" value="Cancel" onclick="window.close()"/></div>
		</div>
	</div>
	</form>
</textarea>
#end raw

</body>
</html>