Edit.html

{namespace z=MyCompany\MyApplication\ViewHelpers}
<f:layout name="Default" />

<f:section name="Title">Report generieren</f:section>

<f:section name="Content">
	<div class="modal fade bs-modal-md" id="hint-modal" tabindex="-1" role="dialog" aria-labelledby="hintModal" aria-hidden="true">
		<div class="modal-dialog modal-md">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h3>Wird geladen...</h3>
				</div>
				<div class="modal-body">
					<img src="{f:uri.resource(path:'Images/loading.gif')}" alt="Loading...">
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Schliessen</button>
				</div>
			</div>
		</div>
	</div>
	<f:form action="update" object="{report}" objectName="report">
		<div class="row">
			<div class="col-xs-12">
				<div class="form-group">
					<label for="name">
						Name
					</label>
					<f:form.textfield property="name" id="name" class="form-control" placeholder="Name" />
				</div>
				<div class="form-group">
					<label for="from">
						Datenquellen
						<a href="{f:uri.action(controller:'report', action:'fromQuery')}" data-toggle="modal" data-target="#hint-modal">
							<i class="glyphicon glyphicon-question-sign"></i>
						</a>
					</label>
					<input type="text" name="statement[fromStatement]" id="from" class="form-control tagsinput" placeholder="Datenquelle" />
				</div>
				<div class="form-group">
					<label for="join">
						Verknüpfungen
						<a href="{f:uri.action(controller:'report', action:'joinQuery')}" data-toggle="modal" data-target="#hint-modal">
							<i class="glyphicon glyphicon-question-sign"></i>
						</a>
					</label>
					<input type="text" name="statement[joinStatement]" id="join" class="form-control tagsinput" placeholder="Verknüpfung" />
				</div>
				<div class="form-group">
					<label for="select">
						Felder
						<a href="{f:uri.action(controller:'report', action:'selectQuery')}" data-toggle="modal" data-target="#hint-modal">
							<i class="glyphicon glyphicon-question-sign"></i>
						</a>
					</label>
					<input type="text" name="statement[selectStatement]" id="select" class="form-control tagsinput" placeholder="Feld" />
				</div>
				<div class="form-group">
					<label for="where">
						Bedingungen
						<a href="{f:uri.action(controller:'report', action:'whereQuery')}" data-toggle="modal" data-target="#hint-modal">
							<i class="glyphicon glyphicon-question-sign"></i>
						</a>
					</label>
					<input type="text" name="statement[whereStatement]" id="where" class="form-control tagsinput" placeholder="Bedingung" />
				</div>
			</div>
		</div>
		<f:form.submit value="Speichern" class="btn btn-primary" />
		<f:link.action action="index" class="btn btn-default">Zurück</f:link.action>
	</f:form>
</f:section>

<f:section name="FooterScripts">
	<script type="text/javascript" src="{f:uri.resource(path:'Scripts/tagsinput.js')}"></script>
	<script type="text/javascript">
		var tags = {}; tags.from = []; tags.join = []; tags.select = []; tags.where = []; tags.order = [];
	</script>
	<f:for each="{fromTags}" as="fromTag">
		<script type="text/javascript">
			tags.from[tags.from.length] = {};
			tags.from[tags.from.length-1].value = '{fromTag.value}';
			tags.from[tags.from.length-1].output = '{fromTag.output}';
		</script>
	</f:for>
	<f:for each="{joinTags}" as="joinTag">
		<script type="text/javascript">
			tags.join[tags.join.length] = {};
			tags.join[tags.join.length-1].value = '{joinTag.value}';
			tags.join[tags.join.length-1].output = '{joinTag.output}';
			tags.join[tags.join.length-1].type = '{joinTag.type}';
		</script>
	</f:for>
	<f:for each="{selectTags}" as="selectTag">
		<script type="text/javascript">
			tags.select[tags.select.length] = {};
			tags.select[tags.select.length-1].value = '{selectTag.value}';
			tags.select[tags.select.length-1].output = '{selectTag.output}';
		</script>
	</f:for>
	<f:for each="{whereTags}" as="whereTag">
		<script type="text/javascript">
			tags.where[tags.where.length] = {};
			tags.where[tags.where.length-1].value = '{whereTag.value}';
			tags.where[tags.where.length-1].output = '{whereTag.output}';
			tags.where[tags.where.length-1].type = '{whereTag.type}';
		</script>
	</f:for>
	<f:for each="{orderTags}" as="orderTag">
		<script type="text/javascript">
			tags.order[tags.order.length] = {};
			tags.order[tags.order.length-1].value = '{orderTag.value}';
			tags.order[tags.order.length-1].output = '{orderTag.output}';
			tags.order[tags.order.length-1].type = '{orderTag.type}';
		</script>
	</f:for>
	<script type="text/javascript">
		$.each(tags.from, function(i, tag) {
			$('#from').tagsinput('add', { 'value': tag.value, 'output': tag.output });
		});
		$.each(tags.join, function(i, tag) {
			$('#join').tagsinput('add', { 'value': tag.value, 'output': tag.output, 'type': tag.type });
		});
		$.each(tags.select, function(i, tag) {
			$('#select').tagsinput('add', { 'value': tag.value, 'output': tag.output });
		});
		$.each(tags.where, function(i, tag) {
			$('#where').tagsinput('add', { 'value': tag.value, 'output': tag.output, 'type': tag.type });
		});
		$.each(tags.order, function(i, tag) {
			$('#order').tagsinput('add', { 'value': tag.value, 'output': tag.output, 'type': tag.type });
		});
	</script>
</f:section>