First nett3.0 webpage version

This commit is contained in:
2022-01-17 16:40:13 +01:00
parent c801608fe8
commit 59d4ef9966
14 changed files with 1149 additions and 64 deletions

View File

@@ -1,28 +1,65 @@
{**
* @param string $basePath web base path
* @param array $flashes flash messages
*}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" href="{$basePath}/favicon.ico">
<meta charset="utf-8">
<!-- Seo -->
<title>{block #title|stripHtml|trim}Webapp Skeleton{/} | Contributte</title>
<title>{ifset title}{include title|striptags} | {/ifset}Nette Sandbox</title>
<!-- Meta -->
<meta name="description" n:ifset="#description" content="{include #description}">
<meta name="keywords" n:ifset="#keywords" content="{include #keywords}">
<meta name="robots" content="index,follow">
<meta name="googlebot" content="snippet,archive">
<meta name="author" content="f3l1x">
{block #head}{/}
<link rel="stylesheet" href="{$basePath}/css/style.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
{block head}{/block}
</head>
<body>
{block #main}
<div class="container">
{include #content}
</div>
{/}
<header>
<hgroup>
<h1>My Dictionary</h1>
<h2>multilanguage dictionary with pronunciations</h2>
</hgroup>
<nav>
<ul>
<li><a href="{link Homepage:default}">Jednoduchý</a></li>
<li><a href="{link Homepage:ipa}">s výslovnosťou</a></li>
<li><a href="{link Homepage:interactive}">Interaktívny</a></li>
<li><a href="{link Homepage:alphabet}">Abeceda</a></li>
</ul>
</nav>
<a href="#" title="Jaro's Solutions homepage"><img src="logo.gif" alt="Jaro's Solutions" /></a>
</header>
<article>
<h1 n:ifset="$title">{$title}</h1>
<div n:foreach="$flashes as $flash" n:class="flash, $flash->type">{$flash->message}</div>
{include content}
</article>
<section>
<h1>Slovníky</h1>
<ul>
{foreach $translations as $tr}
<li><a href="{link Homepage:select $tr["slug"] }">{$tr["lang"]}</a></li>
{/foreach}
</ul>
</section>
<footer>
<p>&copy; 2016 Jaro's Solutions - <a href="#">Sitemap</a> </p>
</footer>
{block scripts}
<script src="https://nette.github.io/resources/js/netteForms.min.js"></script>
<script src="{$basePath}/js/nette.ajax.js"></script>
<script src="{$basePath}/js/main.js"></script>
{/block}
</body>
</html>

View File

@@ -154,7 +154,7 @@ final class HomePresenter extends BaseFrontPresenter
public function beforeRender()
{
$dicttypes = $this->em->getDictTypeRepository()->findPairs('id');
$dicttypes = $this->em->getDictTypeRepository()->findAssoc([],'id');
$this->template->dicttypes = $dicttypes;
$this->template->dictionaries = $this->dictionaries;
$this->template->translations = $this->translations;

View File

@@ -0,0 +1,205 @@
{layout ../@layout.latte}
{block content}
<table class="trans">
<tbody><tr>
<th>písmeno</th>
<th>PSP</th>
<th>alt.</th>
<th>IPA</th>
</tr>
<tr>
<td><a href="/wiki/B" title="B">B</a> b</td>
<td>bé</td>
<td>&nbsp;</td>
<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/b/</span></td>
</tr>
<tr>
<td><a href="/wiki/C" title="C">C</a> c</td>
<td>cé</td>
<td>&nbsp;</td>
<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/t͡s/</span></td>
</tr>
<tr>
<td><a href="/wiki/%C4%8C" title="Č">Č</a> č</td>
<td>čé</td>
<td>&nbsp;</td>
<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/t͡ʃ/</span></td>
</tr>
<tr>
<td><a href="/wiki/D" title="D">D</a> d</td>
<td>dé</td>
<td>&nbsp;</td>
<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/d/</span></td>
</tr>
<tr>
<td><a href="/wiki/%C4%8E" title="Ď">Ď</a> ď</td>
<td>ďé</td>
<td>mäkké dé</td>
<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/ɟ/</span></td>
</tr>
<tr>
<td>DZ dz</td>
<td>dzé</td>
<td>&nbsp;</td>
<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/d͡z/</span></td>
</tr>
<tr>
<td>DŽ dž</td>
<td>džé</td>
<td>&nbsp;</td>
<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/d͡ʒ/</span></td>
</tr>
<tr>
<td><a href="/wiki/F" title="F">F</a> f</td>
<td>ef</td>
<td>&nbsp;</td>
<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/f/</span></td>
</tr>
<tr>
<td><a href="/wiki/G" title="G">G</a> g</td>
<td>gé</td>
<td>&nbsp;</td>
<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/ɡ/</span></td>
</tr>
<tr>
<td><a href="/wiki/H" title="H">H</a> h</td>
<td>há</td>
<td>&nbsp;</td>
<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/ɦ/</span></td>
</tr>
<tr>
<td><a href="/wiki/CH" class="mw-disambig" title="CH">CH</a> ch</td>
<td>chá</td>
<td>&nbsp;</td>
<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/x/</span></td>
</tr>
<tr>
<td><a href="/wiki/J" title="J">J</a> j</td>
<td>jé</td>
<td>&nbsp;</td>
<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/j/</span></td>
</tr>
<tr>
<td><a href="/wiki/K" title="K">K</a> k</td>
<td>ká</td>
<td>&nbsp;</td>
<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/k/</span></td>
</tr>
<tr>
<td><a href="/wiki/L" title="L">L</a> l</td>
<td>el</td>
<td>&nbsp;</td>
<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/l/</span></td>
</tr>
<tr>
<td><a href="/wiki/%C4%B9" title="Ĺ">Ĺ</a> ĺ</td>
<td>dlhé el</td>
<td>&nbsp;</td>
<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/lː/</span></td>
</tr>
<tr>
<td><a href="/wiki/%C4%BD" title="Ľ">Ľ</a> ľ</td>
<td>eľ</td>
<td>mäkké el</td>
<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/ʎ/</span></td>
</tr>
<tr>
<td><a href="/wiki/M" title="M">M</a> m</td>
<td>em</td>
<td>&nbsp;</td>
<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/m/</span></td>
</tr>
<tr>
<td><a href="/wiki/N" title="N">N</a> n</td>
<td>en</td>
<td>&nbsp;</td>
<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/n/</span></td>
</tr>
<tr>
<td><a href="/wiki/%C5%87" title="Ň">Ň</a> ň</td>
<td>eň</td>
<td>mäkké en</td>
<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/ɲ/</span></td>
</tr>
<tr>
<td><a href="/wiki/P" title="P">P</a> p</td>
<td>pé</td>
<td>&nbsp;</td>
<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/p/</span></td>
</tr>
<tr>
<td><a href="/wiki/Q" title="Q">Q</a> q</td>
<td>kvé</td>
<td>&nbsp;</td>
<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/kv/</span></td>
</tr>
<tr>
<td><a href="/wiki/R" title="R">R</a> r</td>
<td>er</td>
<td>&nbsp;</td>
<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/r/</span></td>
</tr>
<tr>
<td><a href="/wiki/%C5%94" title="Ŕ">Ŕ</a> ŕ</td>
<td>dlhé er</td>
<td>&nbsp;</td>
<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/rː/</span></td>
</tr>
<tr>
<td><a href="/wiki/S" title="S">S</a> s</td>
<td>es</td>
<td>&nbsp;</td>
<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/s/</span></td>
</tr>
<tr>
<td><a href="/wiki/%C5%A0" title="Š">Š</a> š</td>
<td>eš</td>
<td>&nbsp;</td>
<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/ʃ/</span></td>
</tr>
<tr>
<td><a href="/wiki/T" title="T">T</a> t</td>
<td>té</td>
<td>&nbsp;</td>
<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/t/</span></td>
</tr>
<tr>
<td><a href="/wiki/%C5%A4" title="Ť">Ť</a> ť</td>
<td>ťé</td>
<td>mäkké té</td>
<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/c/</span></td>
</tr>
<tr>
<td><a href="/wiki/V" title="V">V</a> v</td>
<td>vé</td>
<td>&nbsp;</td>
<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/v/</span></td>
</tr>
<tr>
<td><a href="/wiki/W" title="W">W</a> w</td>
<td>dvojité vé</td>
<td>&nbsp;</td>
<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/v/</span></td>
</tr>
<tr>
<td><a href="/wiki/X" title="X">X</a> x</td>
<td>iks</td>
<td>&nbsp;</td>
<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/ks/</span></td>
</tr>
<tr>
<td><a href="/wiki/Z" title="Z">Z</a> z</td>
<td>zé</td>
<td>zet</td>
<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/z/</span></td>
</tr>
<tr>
<td><a href="/wiki/%C5%BD" title="Ž">Ž</a> ž</td>
<td>žé</td>
<td>žet</td>
<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/ʒ/</span></td>
</tr>
</tbody>
</table>
{/block}

View File

@@ -1,2 +1,75 @@
{block #content}
Welcome
{block head}
<script>
$( document ).ready(function() {
console.log( "ready!" );
$("tr[id*='term']").on("click",function () {
var id = this.id + '-info';
if ($('#' + id).length == 0) {
$(this).after('<tr id=' + '"' + id + '"></tr>');
console.log('Append ' + id);
$.ajax({
url: $(this).attr('data-url'),
context: $('#' + id)
}).done(function (response) {
console.log(response);
$(this).html("<td colspan='4'>" + response + "</td>");
$("img.ajax").on("click", function (event) {
event.preventDefault();
id = $(this).attr("data-sound-id");
var audioElement = document.createElement('audio');
var link = {link Home:play 1234567};
audioElement.setAttribute('src', link.replace('1234567',id));
console.log("Play sound:" + id);
audioElement.play();
});
});
}
});
});
</script>
{/block}
{block content}
<div id="content">
<p>Zadaj vyhladavany vyraz.</p>
<div class="boxes">
{form searchForm}
<table>
<tr>
<th>{label string /}</th><th>{label translation /}</th><th>{label clen /}</th>
</tr>
<tr>
<td>{input string}</td><td>{input translation}</td><td>{input clen}</td><td>{input search}</td>
</tr>
</table>
{ifset $result}
{dump $result}
<table class="e-table" n:snippet="termsComnainer">
<tr>
<th>Vyraz</th><th>Preklad</th><th>Typ</th><th>Member</th>
</tr>
{foreach $result as $term}
{dump $term}
<tr data-url="{link getInfo! $term->id}" n:snippet="term-$term->id">
{if $translation->direction == 1}
<td>{$term->string1}{if $term->suffix1}&nbsp;{$term->suffix1->text}{/if}</td>
<td>{$term->string2}{if $term->suffix2}&nbsp;{$term->suffix2->text}{/if}</td>
{else}
<td>{$term->string2}{if $term->suffix2}&nbsp;{$term->suffix2->text}{/if}</td>
<td>{$term->string1}{if $term->suffix1}&nbsp;{$term->suffix1->text}{/if}</td>
{/if}
<td n:attr="title => $term->type ? $dicttypes[$term->type->id]->fullName : null">{$term->type ? $dicttypes[$term->type->id]->shortName : ''}</td>
<td>{$term->member}</td>
</tr>
{/foreach}
</table>
{control paginator}
{/ifset}
{/form}
</div>
{/block}

View File

@@ -0,0 +1,26 @@
<table class="trans1">
{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}{foreach $term->flags as $flag} <span class="flag">{$termFlags[$flag]->code}</span>{/foreach}{ifset $term->type->id}<span class="type"> ({$dicttypes[$term->type->id]->fullName|lower})</span>{/ifset}{**
Nutne kvoli newline
**}
{? $last = $term->string1}
{? $last2 = $term->string2}
{/foreach}
</table>

View File

@@ -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}

View File

@@ -0,0 +1,68 @@
{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');
var link = {link Homepage:play 123456 };
audioElement.setAttribute('src', link.replace('123456',id));
console.log("Play sound:" + id);
audioElement.play();
});
});
</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><th>{label clen /}</th>
</tr>
<tr>
<td>{input string}</td><td>{input translation}</td><td>{input clen}</td><td>{input search}</td>
</tr>
</table>
{ifset $result}
<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}

View File

@@ -1,38 +1,62 @@
{layout '../../Base/templates/@layout.latte'}
{**
* @param string $basePath web base path
* @param array $flashes flash messages
*}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
{block #head}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" defer/>
<link rel="stylesheet" href="{$basePath}/assets/front.css" defer/>
<script src="{$basePath}/assets/front.js" defer></script>
{/}
<title>{ifset title}{include title|striptags} | {/ifset}Nette Sandbox</title>
{block #main}
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="masthead mb-auto">
<div class="inner">
<h3 class="masthead-brand">Webapp</h3>
<nav class="nav nav-masthead justify-content-center">
<a n:class="$presenter->isLinkCurrent(':Front:Home:') ? active, nav-link" n:href=":Front:Home:">Home</a>
<a n:class="$presenter->isLinkCurrent(':Admin:Home:') ? active, nav-link" n:href=":Admin:Home:">Admin</a>
<a n:class="$presenter->isLinkCurrent(':Pdf:Home:') ? active, nav-link" n:href=":Pdf:Home:">PDF example</a>
</nav>
</div>
</header>
<link rel="stylesheet" href="{$basePath}/assets/css/style.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
{block head}{/block}
</head>
<main role="main" class="inner cover">
<h1 class="cover-heading">Webapp skeleton.</h1>
<p class="lead">This is example project based on <a href="https://nette.org">Nette Framework</a></p>
<p class="lead">And also many <a href="https://contributte.org">Contributte + Nettrine</a> packages.</p>
<div class="lead">
<a href="https://github.com/contributte/webapp-skeleton" class="btn btn-lg btn-secondary">Learn more in docs</a>
</div>
</main>
<body>
<footer class="mastfoot mt-auto">
<div class="inner">
<p>Cover template for <a href="https://getbootstrap.com/">Bootstrap</a>, by
<a href="https://twitter.com/mdo">@mdo</a>.</p>
</div>
</footer>
</div>
{/}
<header>
<hgroup>
<h1>My Dictionary</h1>
<h2>multilanguage dictionary with pronunciations</h2>
</hgroup>
<nav>
<ul>
<li><a href="{link Home:default}">Jednoduchý</a></li>
<li><a href="{link Home:ipa}">s výslovnosťou</a></li>
<li><a href="{link Home:interactive}">Interaktívny</a></li>
<li><a href="{link Home:alphabet}">Abeceda</a></li>
</ul>
</nav>
<a href="#" title="Jaro's Solutions homepage"><img src="logo.gif" alt="Jaro's Solutions" /></a>
</header>
<article>
<h1 n:ifset="$title">{$title}</h1>
<div n:foreach="$flashes as $flash" n:class="flash, $flash->type">{$flash->message}</div>
{include content}
</article>
<section>
<h1>Slovníky</h1>
<ul>
{foreach $translations as $tr}
<li><a href="{link Home:select $tr["slug"] }">{$tr["lang"]}</a></li>
{/foreach}
</ul>
</section>
<footer>
<p>&copy; 2022 Jaro's Solutions - <a href="#">Sitemap</a> </p>
</footer>
{block scripts}
{/block}
</body>
</html>