diff --git a/client/styles/regatten.css b/client/styles/regatten.css index 44cee2f..0815a55 100644 --- a/client/styles/regatten.css +++ b/client/styles/regatten.css @@ -43,6 +43,35 @@ text-align: right; } +/*** NORMAL LIST ***/ +.normal-list > div { + padding-top: 1rem; + padding-bottom: 1rem; + border-bottom: 1px solid #dee2e6; + cursor: pointer; +} + +.normal-list > div:last-child { + border: 0; + padding-bottom: 0; +} + +.normal-list div { + white-space: nowrap; +} + +.normal-list > div > div > div { + display: inline-block; +} + +.normal-list > div > div:nth-child(2) > div:nth-child(1) { + width: 50%; +} +.normal-list > div > div:nth-child(2) > div:nth-child(2) { + width: 50%; + text-align: right; +} + /*** BLINKING ICONS ***/ @keyframes fa-blink { 0% { opacity: 1; } diff --git a/server/content/404.php b/server/content/404.php index 47e5e75..6f12d52 100644 --- a/server/content/404.php +++ b/server/content/404.php @@ -1,6 +1,6 @@ load('error', ['404', 'Seite nicht gefunden']); diff --git a/server/content/boats.php b/server/content/boats.php new file mode 100644 index 0000000..9ddabf4 --- /dev/null +++ b/server/content/boats.php @@ -0,0 +1,42 @@ +Boote"; + + $sp['output'] .= $tpl->load('card', [$content]); + + // Info Years + $content = '

Bootsnamen

'; + $content .= '

'; + $content .= 'Genauso wie bei den Jahrgängen der Segler fehlen uns auch viele Bootsnamen.
'; + $content .= 'Kennst Du ein Boot, dessen Name hier noch nicht hinterlegt ist oder das vielleicht umgetauft wurde, hilf uns bitte, indem Du den Namen einträgst!
'; + $content .= 'Klicke dazu einfach auf das entsprechende Boot und wähle Bootsnamen bearbeiten aus.
'; + $content .= 'Vielen Dank für Deine Unterstützung!'; + $content .= '

'; + + $sp['output'] .= $tpl->load('card', [$content]); + + // List + $content = '

'; + $content .= $tpl->load('input', ['html-id' => 'input-search', 'placeholder' => 'Suche', 'type' => 'text', 'css-class' => 'mt-2']); + $content .= '
'; + + $sp['output'] .= $tpl->load('card', [$content, 'html-id' => 'card-list']); + + // Pagination + $sp['output'] .= $tpl->load('pagination', ['html-id' => 'pagination']); + + // Menu + // TODO: add entries for jump2rank jump2club + $items = $tpl->load('menu/item-icon', ['', '#', 'html-id' => 'menu-item-boatname', 'icon' => 'fa-edit']); + $items .= $tpl->load('menu/item-icon', ['Vereins-Website', '', 'html-id' => 'menu-item-clubwebsite', 'icon' => 'fa-globe']); + $sp['menus'] .= $tpl->load('menu/bottom', [$items, 'html-id' => 'menu-boat', 'title' => 'Boots-Details', 'height' => 320]); + + $sp['scripts'] .= $scripts->load('pagination', ['pageChange', 'page', 'pageCount', 'pagination']); + $sp['scripts'] .= $scripts->load('boats'); + +?> \ No newline at end of file diff --git a/server/content/clubs.php b/server/content/clubs.php new file mode 100644 index 0000000..fcc0504 --- /dev/null +++ b/server/content/clubs.php @@ -0,0 +1,30 @@ +Vereine"; + + $sp['output'] .= $tpl->load('card', [$content]); + + // List + $content = '

'; + $content .= $tpl->load('input', ['html-id' => 'input-search', 'placeholder' => 'Suche', 'type' => 'text', 'css-class' => 'mt-2']); + $content .= '
'; + + $sp['output'] .= $tpl->load('card', [$content, 'html-id' => 'card-list']); + + // Pagination + $sp['output'] .= $tpl->load('pagination', ['html-id' => 'pagination']); + + // Menu + // TODO: add entries for jump2rank jump2club + $items = $tpl->load('menu/item-icon', ['Vereins-Website', '', 'html-id' => 'menu-item-clubwebsite', 'icon' => 'fa-globe']); + $sp['menus'] .= $tpl->load('menu/bottom', [$items, 'html-id' => 'menu-club', 'title' => 'Vereins-Details', 'height' => 320]); + + $sp['scripts'] .= $scripts->load('pagination', ['pageChange', 'page', 'pageCount', 'pagination']); + $sp['scripts'] .= $scripts->load('clubs'); + +?> \ No newline at end of file diff --git a/server/content/index.php b/server/content/index.php index f040ebf..3e4c2ea 100644 --- a/server/content/index.php +++ b/server/content/index.php @@ -1,6 +1,6 @@ Segler"; + + $sp['output'] .= $tpl->load('card', [$content]); + + // Info Years + $content = '

Jahrgänge

'; + $content .= '

'; + $content .= 'Zu vielen Seglern fehlen uns leider noch die Jahrgänge. Diese benötigen wir jedoch, um die Ranglisten vernünftig zu erstellen.
'; + $content .= 'Solltest Du jemanden kennen, dessen Jahrgang hier in der Liste noch nicht hinterlegt ist oder der womöglich falsch ist, hilf uns bitte, indem Du diesen einträgst!
'; + $content .= 'Klicke dazu einfach auf den entsprechenden Segler und wähle Jahrgang bearbeiten aus.
'; + $content .= 'Vielen Dank für Deine Unterstützung!'; + $content .= '

'; + + $sp['output'] .= $tpl->load('card', [$content]); + + // List + $content = '

'; + $content .= $tpl->load('input', ['html-id' => 'input-search', 'placeholder' => 'Suche', 'type' => 'text', 'css-class' => 'mt-2']); + $content .= '
'; + + $sp['output'] .= $tpl->load('card', [$content, 'html-id' => 'card-list']); + + // Pagination + $sp['output'] .= $tpl->load('pagination', ['html-id' => 'pagination']); + + // Menu + // TODO: add entries for jump2rank jump2club + $items = $tpl->load('menu/item-icon', ['', '#', 'html-id' => 'menu-item-year', 'icon' => 'fa-edit']); + $items .= $tpl->load('menu/item-icon', ['Vereins-Website', '', 'html-id' => 'menu-item-clubwebsite', 'icon' => 'fa-globe']); + $sp['menus'] .= $tpl->load('menu/bottom', [$items, 'html-id' => 'menu-sailor', 'title' => 'Segler-Details', 'height' => 320]); + + $sp['scripts'] .= $scripts->load('pagination', ['pageChange', 'page', 'pageCount', 'pagination']); + $sp['scripts'] .= $scripts->load('sailors'); + +?> \ No newline at end of file diff --git a/server/scripts/boats.js b/server/scripts/boats.js new file mode 100644 index 0000000..4077cbd --- /dev/null +++ b/server/scripts/boats.js @@ -0,0 +1,149 @@ +var firstCall = true; +var rows = []; +var displayed = []; +var page = 1; +var pageCount = 0; +const showCount = 25; + +async function onListClicked(id) { + var boat = await dbGetData('boats', id); + + $('#menu-boat').find('.menu-title').find('p').text(boat.sailnumber); + + // Edit Boatname + // TODO: create menu for edit boatname + if (boat['name'] == '') { + $('#menu-item-boatname').find('span').text('Bootsnamen hinzufügen'); + } else { + $('#menu-item-boatname').find('span').text('Bootsnamen bearbeiten'); + } + + // club website + var clubwebsite = ''; + if (boat['club'] != null) { + clubwebsite = (await dbGetData('clubs', boat['club'])).website; + } + if (clubwebsite != '') { + $('#menu-item-clubwebsite').show(); + $('#menu-item-clubwebsite').attr('href', clubwebsite); + $('#menu-item-clubwebsite').attr('target', '_blank'); + } else { + $('#menu-item-clubwebsite').hide(); + } + + $('#menu-boat').showMenu(); + $('#menu-boat').scrollTop(0); +} + +function pageChange() { + $('#p-count')[0].scrollIntoView({ behavior: "smooth" }); + drawList(); +} + +async function drawList() { + window.setTimeout(function () { + var list = ''; + + if (displayed.length > 0) { + var offset = (page - 1) * showCount; + var count = (page == pageCount ? (displayed.length % showCount) : showCount); + if (count == 0) count = showCount; + + for (i = 0; i < count; i ++) { + list += displayed[i + offset]; + } + } else { + list = '
Keine Ergebnisse, die der Suche entsprechen
'; + } + + $('#div-list').html(list); + }, 0); +} + +async function reSearch() { + window.setTimeout(function () { + displayed = []; + rows.forEach(function (entry) { + if (search($('#input-search').val(), entry.keywords)) { + displayed.push(entry.content); + } + }); + pageCount = Math.ceil(displayed.length / showCount); + if ((page < 1) || (page > pageCount)) { + if (page < 1) { + page = 1; + } else { + page = pageCount; + } + } + drawPagination(); + drawList(); + }, 0); +} + +var siteScript = async function() { + if (firstCall) { + firstCall = false; + initPagination(); + $('#input-search').on('input', reSearch); + } + + var results = await dbGetData('boats'); + + var count = results.length; + if (count > 0) { + if (count == 1) { + $('#p-count').html('Es wurde 1 Boot gefunden!'); + } else { + $('#p-count').html('Es wurden ' + count + ' Boote gefunden!'); + } + $('#div-list').show(); + $('#input-search').parent().show(); + + results.sort(function (a, b) { + return a.sailnumber.localeCompare(b.sailnumber); + }); + + rows = []; + + for (id in results) { + var entry = results[id]; + var club = null; + if (entry['club'] != null) + club = await dbGetData('clubs', entry['club']); + + var row = { keywords: [], content: '' }; + row.keywords.push(entry['sailnumber']); + if (entry['name'] != '') row.keywords.push(entry['name']); + if (club != null) row.keywords.push(club['kurz'], club['name']); + + row.content += '
'; + + // ZEILE 1 + // Sailnumber + row.content += '
' + entry['sailnumber'] + '
'; + + // ZEILE 2 + row.content += '
'; + + // Name + row.content += '
' + entry['name'] + '
'; + + // Club + row.content += '
' + ((club != null) ? club['kurz'] : '') + '
'; + + row.content += '
'; + + rows.push(row); + } + + reSearch(); + + } else { + $('#p-count').html('Keine Boote gefunden!'); + $('#div-list').hide(); + $('#input-search').parent().hide(); + } + + hideLoader(); +} \ No newline at end of file diff --git a/server/scripts/clubs.js b/server/scripts/clubs.js new file mode 100644 index 0000000..bb507c2 --- /dev/null +++ b/server/scripts/clubs.js @@ -0,0 +1,136 @@ +var firstCall = true; +var rows = []; +var displayed = []; +var page = 1; +var pageCount = 0; +const showCount = 25; + +async function onListClicked(id) { + var club = await dbGetData('clubs', id); + + $('#menu-club').find('.menu-title').find('p').text(club.name); + + // club website + if (club.website != '') { + $('#menu-item-clubwebsite').show(); + $('#menu-item-clubwebsite').attr('href', club.website); + $('#menu-item-clubwebsite').attr('target', '_blank'); + } else { + $('#menu-item-clubwebsite').hide(); + } + + $('#menu-club').showMenu(); + $('#menu-club').scrollTop(0); +} + +function pageChange() { + $('#p-count')[0].scrollIntoView({ behavior: "smooth" }); + drawList(); +} + +async function drawList() { + window.setTimeout(function () { + var list = ''; + + if (displayed.length > 0) { + var offset = (page - 1) * showCount; + var count = (page == pageCount ? (displayed.length % showCount) : showCount); + if (count == 0) count = showCount; + + for (i = 0; i < count; i ++) { + list += displayed[i + offset]; + } + } else { + list = '
Keine Ergebnisse, die der Suche entsprechen
'; + } + + $('#div-list').html(list); + }, 0); +} + +async function reSearch() { + window.setTimeout(function () { + displayed = []; + rows.forEach(function (entry) { + if (search($('#input-search').val(), entry.keywords)) { + displayed.push(entry.content); + } + }); + pageCount = Math.ceil(displayed.length / showCount); + if ((page < 1) || (page > pageCount)) { + if (page < 1) { + page = 1; + } else { + page = pageCount; + } + } + drawPagination(); + drawList(); + }, 0); +} + +var siteScript = async function() { + if (firstCall) { + firstCall = false; + initPagination(); + $('#input-search').on('input', reSearch); + } + + var results = await dbGetData('clubs'); + + var count = results.length; + if (count > 0) { + if (count == 1) { + $('#p-count').html('Es wurde 1 Verein gefunden!'); + } else { + $('#p-count').html('Es wurden ' + count + ' Vereine gefunden!'); + } + $('#div-list').show(); + $('#input-search').parent().show(); + + results.sort(function (a, b) { + var comp = a.kurz.localeCompare(b.kurz); + if (comp == 0) + comp = a.name.localeCompare(b.name); + return comp; + }); + + rows = []; + + for (id in results) { + var entry = results[id]; + + var row = { keywords: [], content: '' }; + row.keywords.push(entry['dsv'], entry['kurz'], entry['name']); + if (entry['website'] != '') row.keywords.push(entry['website']); + + row.content += '
'; + + // ZEILE 1 + // Name + row.content += '
' + entry['name'] + '
'; + + // ZEILE 2 + row.content += '
'; + + // DSV + row.content += '
' + entry['dsv'] + '
'; + + // Kurz + row.content += '
' + entry['kurz'] + '
'; + + row.content += '
'; + + rows.push(row); + } + + reSearch(); + + } else { + $('#p-count').html('Keine Vereine gefunden!'); + $('#div-list').hide(); + $('#input-search').parent().hide(); + } + + hideLoader(); +} \ No newline at end of file diff --git a/server/scripts/pagination.js b/server/scripts/pagination.js new file mode 100644 index 0000000..b51a820 --- /dev/null +++ b/server/scripts/pagination.js @@ -0,0 +1,75 @@ +// $$0; - site script for redraw content +// $$1; - current page +// $$2; - count of pages +// $$3; - pagination id + +var paginationButtons = []; + +function paginationSetActive() { + for (i = 1; i <= 7; i ++) { + if ($$1; == $('#$$3;-' + i).text()) { + $('#$$3;-' + i).addClass('active'); + } else { + $('#$$3;-' + i).removeClass('active'); + } + } +} + +function drawPagination() { + if ($$2; > 1) { + $('#$$3;').show(); + paginationButtons[6].text($$2;); + if ($$2; <= 7) { + for (i = 2; i <= $$2; - 1; i ++) { + paginationButtons[i-1].text(i); + $('#$$3;-' + i).show(); + } + for (i = $$2;; i < 7; i ++) { + $('#$$3;-' + i).hide(); + } + } else if ($$1; <= 4) { + for (i = 2; i <= 5; i ++) { + paginationButtons[i-1].text(i); + $('#$$3;-' + i).show(); + } + paginationButtons[5].text('...'); + $('#$$3;-6').show(); + } else if ($$1; > $$2; - 4) { + paginationButtons[1].text('...'); + $('#$$3;-2').show(); + for (i = 3; i <= 6; i ++) { + paginationButtons[i-1].text($$2; + i - 7); + $('#$$3;-' + i).show(); + } + } else { + paginationButtons[1].text('...'); + $('#$$3;-2').show(); + for (i = 3; i <= 5; i ++) { + paginationButtons[i-1].text($$1; + i - 4); + $('#$$3;-' + i).show(); + } + paginationButtons[5].text('...'); + $('#$$3;-6').show(); + } + paginationSetActive(); + } else { + $('#$$3;').hide(); + } +} + +function onPaginationClick(paginationButton) { + var newPage = parseInt($(paginationButton).text()); + if (!isNaN(newPage)) { + $$1; = newPage; + drawPagination(); + $$0;(); + } +} + +function initPagination() { + paginationButtons = []; + for (i = 1; i <= 7; i ++) { + paginationButtons.push($('#$$3;-' + i).find('a')); + } + drawPagination(); +} \ No newline at end of file diff --git a/server/scripts/sailors.js b/server/scripts/sailors.js new file mode 100644 index 0000000..896bcb9 --- /dev/null +++ b/server/scripts/sailors.js @@ -0,0 +1,149 @@ +var firstCall = true; +var rows = []; +var displayed = []; +var page = 1; +var pageCount = 0; +const showCount = 25; + +async function onListClicked(id) { + var sailor = await dbGetData('sailors', id); + + $('#menu-sailor').find('.menu-title').find('p').text(sailor.name); + + // Edit Year + // TODO: create menu for edit year + if (sailor['year'] == null) { + $('#menu-item-year').find('span').text('Jahrgang hinzufügen'); + } else { + $('#menu-item-year').find('span').text('Jahrgang bearbeiten'); + } + + // club website + var clubwebsite = ''; + if (sailor['club'] != null) { + clubwebsite = (await dbGetData('clubs', sailor['club'])).website; + } + if (clubwebsite != '') { + $('#menu-item-clubwebsite').show(); + $('#menu-item-clubwebsite').attr('href', clubwebsite); + $('#menu-item-clubwebsite').attr('target', '_blank'); + } else { + $('#menu-item-clubwebsite').hide(); + } + + $('#menu-sailor').showMenu(); + $('#menu-sailor').scrollTop(0); +} + +function pageChange() { + $('#p-count')[0].scrollIntoView({ behavior: "smooth" }); + drawList(); +} + +async function drawList() { + window.setTimeout(function () { + var list = ''; + + if (displayed.length > 0) { + var offset = (page - 1) * showCount; + var count = (page == pageCount ? (displayed.length % showCount) : showCount); + if (count == 0) count = showCount; + + for (i = 0; i < count; i ++) { + list += displayed[i + offset]; + } + } else { + list = '
Keine Ergebnisse, die der Suche entsprechen
'; + } + + $('#div-list').html(list); + }, 0); +} + +async function reSearch() { + window.setTimeout(function () { + displayed = []; + rows.forEach(function (entry) { + if (search($('#input-search').val(), entry.keywords)) { + displayed.push(entry.content); + } + }); + pageCount = Math.ceil(displayed.length / showCount); + if ((page < 1) || (page > pageCount)) { + if (page < 1) { + page = 1; + } else { + page = pageCount; + } + } + drawPagination(); + drawList(); + }, 0); +} + +var siteScript = async function() { + if (firstCall) { + firstCall = false; + initPagination(); + $('#input-search').on('input', reSearch); + } + + var results = await dbGetData('sailors'); + + var count = results.length; + if (count > 0) { + if (count == 1) { + $('#p-count').html('Es wurde 1 Segler gefunden!'); + } else { + $('#p-count').html('Es wurden ' + count + ' Segler gefunden!'); + } + $('#div-list').show(); + $('#input-search').parent().show(); + + results.sort(function (a, b) { + return a.name.localeCompare(b.name); + }); + + rows = []; + + for (id in results) { + var entry = results[id]; + var club = null; + if (entry['club'] != null) + club = await dbGetData('clubs', entry['club']); + + var row = { keywords: [], content: '' }; + row.keywords.push(entry['name']); + if (entry['year'] != null) row.keywords.push(entry['year']); + if (club != null) row.keywords.push(club['kurz'], club['name']); + + row.content += '
'; + + // ZEILE 1 + // Name + row.content += '
' + entry['name'] + '
'; + + // ZEILE 2 + row.content += '
'; + + // Year + row.content += '
' + ((entry['year'] != null) ? (entry['year']) : '') + '
'; + + // Club + row.content += '
' + ((club != null) ? club['kurz'] : '') + '
'; + + row.content += '
'; + + rows.push(row); + } + + reSearch(); + + } else { + $('#p-count').html('Keine Segler gefunden!'); + $('#div-list').hide(); + $('#input-search').parent().hide(); + } + + hideLoader(); +} \ No newline at end of file diff --git a/server/templates/pagination.html b/server/templates/pagination.html new file mode 100644 index 0000000..0cb3e66 --- /dev/null +++ b/server/templates/pagination.html @@ -0,0 +1,11 @@ + \ No newline at end of file