First nett3.0 webpage version

app/modules/Front/Home/templates/interactive.latte

@@ -0,0 +1,107 @@
+{block title}Slovnik{/block}
+{layout ../@layout.latte}
+{block head}
+<script>
+$( document ).ready(function() {
+ $("img.ajax").on("click", function (event) {
+    event.preventDefault();
+    id = $(this).attr("data-sound-id");
+    var audioElement = document.createElement('audio');
+    audioElement.setAttribute('src', {link Homepage:play} + "/" + id);
+    console.log("Play sound:" + id);
+    audioElement.play();
+});
+
+$(function() {
+	var select_name = "string";
+	$("input[name=" + select_name + "]").autocomplete({
+		source: function( request, response ) {
+			$.ajax({
+				url: "{!$presenter->link('autocomplete')}",
+				data: {
+					whichData: select_name,
+					typedText: request.term,
+					translation: $("select[name=translation]").val()
+				},
+				success: function( data ) {
+					response( $.map( data, function( item ) {
+						return { label: item, value: item }
+					}));
+				}
+			});
+		},
+		minLength: 3,
+		open: function() {
+			$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
+		},
+		close: function() {
+			$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
+		},
+		select: function(e, ui) {
+			$("#frm-searchForm-string").val(ui.item.value);
+			$("#frm-searchForm").submit();
+		}
+	});
+});
+
+
+
+
+});
+</script>
+{/block}
+
+{block content}
+<div id="content">
+	<h2>Zadaj vyhladavany vyraz.</h2>
+
+	<div class="boxes">
+	{form searchForm}
+	<table>
+		<tr>
+			<th>{label string /}</th><th>{label translation /}</th>
+		</tr>
+		<tr>
+			<td>{input string}</td><td>{input translation}</td><td>{input search}</td>
+		</tr>
+	</table>
+	{ifset $result}
+		<table id="searchBox">
+
+		</table>
+		<table class="trans">
+		<tr>
+			<th>Preklad</th>
+		</tr>
+{var $last = ''}
+{foreach $result as $term}
+{if ($last != $term->string1 && $last != '') }
+				</div>
+			</td>
+		</tr>
+{/if}
+{if $last != $term->string1}
+		<tr>
+			<td>
+				<span class="term">{$term->string1}</span>&nbsp;
+				{foreach $term->pronunciations as $pron}
+					<span class="ipa-{$pron->type->id}">[{$pron->ipa}]</span>
+					<img n:if="$pron->filename" class="sound-ipa ajax" src="/images/sound.png" alt="Prehraj" style="vertical-align: middle;" data-sound-id="{$pron->id}" ></image>
+				{/foreach}
+				<br/>
+				<div style="margin-left: 20px;" class="translations">
+{/if}
+{$last == $term->string1 && trim($last2) != '' && trim($term->string2) != ''  ? ', ' : ''}{$term->string2}{**
+	Nutne kvoli newline
+**}
+{? $last = $term->string1}
+{? $last2 = $term->string2}
+{/foreach}
+		</table>
+	{/ifset}
+	{/form}
+	{control paginator}
+	</div>
+{/block}
+
+