Regatten.net/RegattenApp
1
0
Fork 0
Code Issues 40 Pull Requests Actions Packages Projects Releases Wiki Activity

Better regattas list

Browse Source
This commit is contained in:
Timon Ostertun
2020-09-23 17:39:33 +02:00
parent 76878ed14d
commit e610d60f62
16 changed files with 301 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/scripts/database.js
View File

@@ -125,7 +125,7 @@ function dbGetRegattasRange(minDate, maxDate) {
var regatta = regattas[id];
var dateFrom = parseDate(regatta['date']);
var dateTo = parseDate(regatta['date']);
dateTo.setDate(dateTo.getDate() + parseInt(regatta['length']) - 1);
dateTo.setDate(dateTo.getDate() + Math.max(parseInt(regatta['length']) - 1, 0));
if ((minDate <= dateTo) && (maxDate >= dateFrom)) {
regatta['dateFrom'] = dateFrom;
regatta['dateTo'] = dateTo;

43
client/styles/regatten.css Normal file
View File

@@ -0,0 +1,43 @@
.regattas-list > div {
padding-top: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid #dee2e6;
cursor: pointer;
}
.regattas-list > div:last-child {
border: 0;
padding-bottom: 0;
}
.regattas-list div {
white-space: nowrap;
}
.regattas-list > div > div > div {
display: inline-block;
}
.regattas-list > div > div:nth-child(2) > div:nth-child(1) {
width: 25%;
}
.regattas-list > div > div:nth-child(2) > div:nth-child(2) {
width: 25%;
}
.regattas-list > div > div:nth-child(2) > div:nth-child(3) {
width: 25%;
text-align: center;
}
.regattas-list > div > div:nth-child(2) > div:nth-child(4) {
width: 25%;
text-align: right;
font-size: 14px;
}
.regattas-list > div > div:nth-child(3) > div:nth-child(1) {
width: 75%;
}
.regattas-list > div > div:nth-child(3) > div:nth-child(2) {
width: 25%;
text-align: right;
}

17
content/regattas.php
View File

@@ -17,16 +17,19 @@
// Regattas
$content = '<p id="p-count" class="mb-0"></p>';
$content .= $tpl->load('input', ['html-id' => 'input-search', 'placeholder' => 'Suche', 'type' => 'text', 'css-class' => 'mt-2']);
$thead = '<tr><th id="th-number">#</th><th>Datum</th><th>Regatta</th>';
if (($showSpecial = $_CLASS['special']) !== false) {
$thead .= '<th>' . $_CLASS['special'] . '</th>';
}
$thead .= '<th>Informationen</th><th>Ergebnisse</th><th>RLF</th></tr>';
$content .= $tpl->load('table', [$thead, 'html-id' => 'table-regattas', 'css-class' => 'mb-0']);
$content .= '<div id="div-regattas" class="regattas-list mb-0"></div>';
$sp['output'] .= $tpl->load('card', [$content, 'html-id' => 'card-regattas']);
$sp['scripts'] = '<script>const showSpecial = ' . ($showSpecial ? 'true' : 'false') . ';</script>';
// Menu
$items = $tpl->load('menu/item-icon', ['Ergebnisse', '', 'html-id' => 'menu-item-results', 'icon' => 'fa-poll']);
$items .= $tpl->load('menu/item-icon', ['Bericht', '', 'html-id' => 'menu-item-bericht', 'icon' => 'fa-book']);
$items .= $tpl->load('menu/item-icon', ['Informationen', '', 'html-id' => 'menu-item-info', 'icon' => 'fa-info']);
$items .= $tpl->load('menu/item-icon-badge', ['Meldung', '', 'html-id' => 'menu-item-meldung', 'icon' => 'fa-file-signature', 'badge-id' => 'badge-regatta-meldung']);
$items .= $tpl->load('menu/item-icon', ['offizielle Ergebnisse', '', 'html-id' => 'menu-item-oresults', 'icon' => 'fa-poll']);
$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-regatta', 'title' => 'Regatta-Details', 'height' => 320]);
$sp['scripts'] .= $scripts->load('regattas');
?>

4
server/page/menus.php
View File

@@ -161,12 +161,12 @@
<div id="menu-login" class="menu menu-box-top menu-box-detached rounded-m" data-menu-height="270">
<div class="content bottom-0">
<h1 class="text-center mt-5 font-900">Login</h1>
<div class="input-style input-style-1 has-icon input-required">
<div class="input-style input-style-2 has-icon input-required">
<i class="input-icon fa fa-user color-theme"></i>
<span class="color-highlight">Benutzername</span>
<input id="input-login-username" class="form-control" type="name" placeholder="Benutzername" />
</div>
<div class="input-style input-style-1 has-icon input-required">
<div class="input-style input-style-2 has-icon input-required">
<i class="input-icon fa fa-lock color-theme"></i>
<span class="color-highlight">Passwort</span>
<input id="input-login-password" class="form-control" type="password" placeholder="Passwort" />

1
server/page/wrapper.php
View File

@@ -9,6 +9,7 @@
<title><?php echo $sp['title']; ?></title>
<link rel="stylesheet" type="text/css" href="<?php echo SERVER_ADDR; ?>/client/styles/bootstrap.css">
<link rel="stylesheet" type="text/css" href="<?php echo SERVER_ADDR; ?>/client/styles/style.css">
<link rel="stylesheet" type="text/css" href="<?php echo SERVER_ADDR; ?>/client/styles/regatten.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i|Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i,900,900i&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="<?php echo SERVER_ADDR; ?>/client/fonts/css/fontawesome-all.min.css">
<link rel="manifest" href="<?php echo SERVER_ADDR; ?>/manifest.json.php" data-pwa-version="<?php echo PWA_VERSION; ?>">

302
server/scripts/regattas.js
View File

@@ -1,12 +1,12 @@
function selectChange(callSiteScript = true) {
var val = $('#select-year').val();
if (val == "user") {
$('#input-from').show();
$('#input-to').show();
$('#input-from').parent().show();
$('#input-to').parent().show();
$('#button-show').show();
} else {
$('#input-from').hide();
$('#input-to').hide();
$('#input-from').parent().hide();
$('#input-to').parent().hide();
$('#button-show').hide();
$('#input-from').val(val + '-01-01');
@@ -29,33 +29,157 @@ function initYear() {
var firstCall = true;
var rows = [];
var heuteLen = 0;
var today;
async function drawTable () {
//setLoading(true, 'loading');
window.setTimeout(function () {
tbody = '';
var list = '';
rows.forEach(function (entry) {
if (entry == null) {
tbody += '<tr><td colspan="' + heuteLen + '" class="bg-highlight color-white">';
tbody += 'Heute ist der ' + formatDate('d.m.Y', today);
tbody += '</td></tr>';
//tbody += '<tr><td colspan="' + heuteLen + '" class="bg-highlight color-white">';
//tbody += 'Heute ist der ' + formatDate('d.m.Y', today);
//tbody += '</td></tr>';
} else if (search($('#input-search').val(), entry.keywords)) {
tbody += '<tr>';
entry.cells.forEach(function (cell) {
tbody += '<td>' + cell + '</td>';
});
tbody += '</tr>';
list += entry.content;
}
});
$('#table-regattas').find('tbody').html(tbody);
$('#div-regattas').html(list);
//setLoading(false, 'loading');
}, 0);
}
async function regattaClicked(id) {
var regatta = await dbGetData('regattas', id);
console.log(regatta);
$('#menu-regatta').find('.menu-title').find('p').text(regatta.name);
// Results
var results = await dbGetDataIndex('results', 'regatta', regatta['id']);
if (results.length > 0) {
$('#menu-item-results').show();
$('#menu-item-results').attr('href', LINK_PRE + 'result/' + regatta['id']);
} else {
$('#menu-item-results').hide();
}
// Bericht
if (regatta['bericht'] != '') {
$('#menu-item-bericht').show();
$('#menu-item-bericht').attr('href', regatta['bericht']);
$('#menu-item-bericht').attr('target', '_blank');
} else {
$('#menu-item-bericht').hide();
}
// Info
if (regatta['info'] != '') {
$('#menu-item-info').show();
$('#menu-item-info').attr('href', regatta['info']);
$('#menu-item-info').attr('target', '_blank');
} else {
$('#menu-item-info').hide();
}
// Meldung
var dateTo = parseDate(regatta['date']);
dateTo.setDate(dateTo.getDate() + Math.max(parseInt(regatta['length']) - 1, 0));
if ((regatta['meldung'] != '') && (dateTo >= today)) {
$('#menu-item-meldung').show();
$('#menu-item-meldung').attr('href', regatta['meldung']);
$('#menu-item-meldung').attr('target', '_blank');
var planning = null;
if (isLoggedIn()) {
var plannings = await dbGetDataIndex('plannings', 'regatta', regatta['id']);
for (id in plannings) {
if (plannings[id]['user'] == USER_ID) {
planning = plannings[id];
break;
}
}
}
if ((planning != null) && (planning['gemeldet'] == '1')) {
$('#badge-regatta-meldung').text('schon gemeldet');
$('#badge-regatta-meldung').addClass('bg-green2-dark').removeClass('bg-highlight bg-red2-dark bg-yellow2-dark');
} else if (regatta['meldungOffen'] == '0') {
$('#badge-regatta-meldung').text('geschlossen');
$('#badge-regatta-meldung').addClass('bg-highlight').removeClass('bg-green2-dark bg-red2-dark bg-yellow2-dark');
} else if (regatta['meldungSchluss'] != null) {
var early = false;
var ms;
if (regatta['meldungEarly'] != null) {
ms = parseDate(regatta['meldungEarly']);
if (ms >= today) {
early = true;
}
}
if (!early)
ms = parseDate(regatta['meldungSchluss']);
if (ms >= today) {
var diff = Math.round((ms - today) / 86400000);
var red = (diff < 7);
var txt;
if (diff <= 14) {
txt = diff + ' Tag' + (diff != 1 ? 'e' : '');
} else if (diff < 35) {
diff = Math.floor(diff / 7);
txt = diff + ' Woche' + (diff != 1 ? 'n' : '');
} else {
diff = Math.floor(diff / 30.5);
txt = diff + ' Monat' + (diff != 1 ? 'e' : '');
}
if (early)
txt += ' vergünstigt';
$('#badge-regatta-meldung').text(txt);
if (red) {
if (early) {
$('#badge-regatta-meldung').addClass('bg-yellow2-dark').removeClass('bg-highlight bg-green2-dark bg-red2-dark');
} else {
$('#badge-regatta-meldung').addClass('bg-red2-dark').removeClass('bg-highlight bg-green2-dark bg-yellow2-dark');
}
} else {
$('#badge-regatta-meldung').addClass('bg-highlight').removeClass('bg-green2-dark bg-red2-dark bg-yellow2-dark');
}
} else {
$('#badge-regatta-meldung').text('Meldeschluss abgelaufen');
$('#badge-regatta-meldung').addClass('bg-highlight').removeClass('bg-green2-dark bg-red2-dark bg-yellow2-dark');
}
} else {
$('#badge-regatta-meldung').text('');
}
} else {
$('#menu-item-meldung').hide();
}
// off. results
if (regatta['oresults'] != '') {
$('#menu-item-oresults').show();
$('#menu-item-oresults').attr('href', regatta['oresults']);
$('#menu-item-oresults').attr('target', '_blank');
} else {
$('#menu-item-oresults').hide();
}
// club website
var clubwebsite = '';
if (regatta['club'] != null) {
clubwebsite = (await dbGetData('clubs', regatta['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-regatta').showMenu();
$('#menu-regatta').scrollTop(0);
}
var siteScript = async function() {
if (firstCall) {
firstCall = false;
@@ -71,13 +195,10 @@ var siteScript = async function() {
var maxDate = parseDate($('#input-to').val());
var regattas = await dbGetRegattasRange(minDate, maxDate);
var regattaResults = [];
var showNumbers = false;
for (id in regattas) {
var entry = regattas[id];
var results = await dbGetDataIndex('results', 'regatta', entry['id']);
regattaResults[entry['id']] = (results.length > 0);
if (entry['number'] != null)
showNumbers = true;
}
var selectedYear = $('#select-year').val();
@@ -103,18 +224,10 @@ var siteScript = async function() {
} else {
$('#p-count').html('Es wurden ' + count + ' Regatten gefunden!');
}
$('#table-regattas').show();
$('#input-search').show();
if (showNumbers) {
$('#th-number').show();
} else {
$('#th-number').hide();
}
$('#div-regattas').show();
$('#input-search').parent().show();
var heute = false;
heuteLen = 5;
if (showNumbers) heuteLen ++;
if (showSpecial) heuteLen ++;
rows = [];
@@ -128,7 +241,7 @@ var siteScript = async function() {
var dateFrom = entry['dateFrom'];
var dateTo = entry['dateTo'];
var row = { keywords: [], cells: [] };
var row = { keywords: [], content: '' };
row.keywords.push(entry['name']);
if (entry['number'] != null) row.keywords.push(entry['number']);
if (club != null) row.keywords.push(club['kurz'], club['name']);
@@ -138,98 +251,67 @@ var siteScript = async function() {
heute = true;
}
if (showNumbers) {
row.cells.push(entry['number'] != null ? ('<span style="white-space:nowrap;">' + entry['number'] + '</span>') : '');
}
row.content += '<div onclick="regattaClicked(' + entry['id'] + ');">';
row.cells.push('<span style="white-space:nowrap;">' + formatDate("j. M 'y", dateFrom) + '<br>' + formatDate("j. M 'y", dateTo) + '</span>');
// ZEILE 1
// Name
row.content += '<div><b>' + (entry['canceled'] == 1 ? '<s>' : '') + entry['name'] + (entry['canceled'] == 1 ? '</s>' : '') + '</b></div>';
var content = '';
if (club != null) {
content = club['kurz'];
if (club['website'] != '') {
content = '<a href="' + club['website'] + '" target="_blank">' + content + '</a>';
}
}
row.cells.push(content + '<br>' + (entry['canceled'] == 1 ? '<s>' : '') + entry['name']) + (entry['canceled'] == 1 ? '</s>' : '');
// ZEILE 2
row.content += '<div>';
if (showSpecial) {
row.cells.push('<span style="white-space:nowrap;">' + entry['special'] + '</span>');
}
// Number
row.content += '<div>' + ((entry['number'] != null) ? ('# ' + entry['number']) : '') + '</div>';
var buf = '';
if (entry['info'] != '') {
buf += '<a target="_blank" href="' + entry['info'] + '">Informationen</a>';
}
if ((entry['meldung'] != '') && (dateTo >= today)) {
buf += '<br><a target="_blank" href="' + entry['meldung'] + '">Meldung</a>';
var planning = null;
if (isLoggedIn()) {
for (id in plannings) {
if (plannings[id]['user'] == USER_ID) {
planning = plannings[id];
break;
}
}
}
// Club
row.content += '<div>' + ((club != null) ? club['kurz'] : '') + '</div>';
if ((planning != null) && (planning['gemeldet'] == "1")) {
buf += ' <i>(du hast gemeldet)</i>';
} else if (entry['meldungOffen'] == "0") {
buf += ' <i>(geschlossen)</i>';
} else if (entry['meldungSchluss'] != null) {
early = false;
if (entry['meldungEarly'] != null) {
ms = parseDate(entry['meldungEarly']);
if (ms >= today) {
early = true;
// Special
row.content += '<div>' + entry['special'] + '</div>';
// Icons
var icons = [];
if (entry['info'] != '')
icons.push('<i class="fas fa-info"></i>');
if ((entry['meldung'] != '') && (dateTo >= today) && (entry['meldungOffen'] == '1')) {
var color = '';
if (entry['meldungSchluss'] != null) {
var ms = parseDate(entry['meldungSchluss']);
var diff = Math.round((ms - today) / 86400000);
if ((ms >= today) && (diff < 7))
color = ' color-red2-dark';
}
icons.push('<i class="fas fa-file-signature' + color + '"></i>');
}
if (!early)
ms = parseDate(entry['meldungSchluss']);
if (ms >= today) {
diff = Math.round((ms - today) / 86400000);
red = (diff < 7);
if (diff <= 14) {
txt = 'noch ' + diff + ' Tag' + (diff != 1 ? 'e' : '');
} else if (diff < 35) {
diff = Math.floor(diff / 7);
txt = 'noch ' + diff + ' Woche' + (diff != 1 ? 'n' : '');
if (entry['bericht'] != '')
icons.push('<i class="fas fa-book"></i>');
if (entry['canceled'] == '1') {
icons.push('<i class="fas fa-times color-red2-dark"></i>');
} else if (regattaResults[entry['id']]) {
icons.push('<i class="fas fa-poll"></i>');
}
row.content += '<div class="color-green2-dark">' + icons.join('&ensp;') + '</div>';
row.content += '</div>';
// ZEILE 3
row.content += '<div>';
// Date
if (entry['length'] < 1) {
if (formatDate('d.m', dateFrom) == '01.01') {
row.content += '<div><font class="color-red2-dark">Datum noch unklar</font></div>';
} else {
diff = Math.floor(diff / 30.5);
txt = 'noch ' + diff + ' Monat' + (diff != 1 ? 'e' : '');
row.content += '<div>' + formatDate("d.m.Y", dateFrom) + ' - <font class="color-red2-dark">Datum nicht final</font></div>';
}
buf += ' <i>' + (red ? '<b><font style="color:red;">(' : '(') + txt + (early ? ' verg&uuml;nstigt' : '') + (red ? ')</font></b>' : ')') + '</i>';
} else {
buf += ' <i>(Meldeschluss abgelaufen)</i>';
row.content += '<div>' + formatDate("d.m.Y", dateFrom) + ' - ' + formatDate("d.m.Y", dateTo) + '</div>';
}
}
}
if (entry['bericht'] != '') {
buf += '<br><a target="_blank" href="' + entry['bericht'] + '">Bericht</a>';
}
if (entry['oresults'] != '') {
buf += '<br><a target="_blank" href="' + entry['oresults'] + '">off. Ergebnisse</a>';
}
row.cells.push(buf);
buf = '';
if (entry['canceled'] == "1") {
buf = '<i style="color:red;" class="fas fa-times"></i> Ausgefallen</td>';
} else {
if (regattaResults[entry['id']]) {
buf = '<i style="color:green;" class="fas fa-check"></i> <a href="' + LINK_PRE + 'result?regatta=' + entry['id'] + '">Ergebnisse</a></td>';
} else {
var pC = plannings.length;
buf = '<i class="fas fa-calendar-alt"></i> In der Saison-Planung von ' + pC + ' Seglern.';
if (pC > 0) {
buf += '<br><a href="' + LINK_PRE + 'regatta_plan?regatta=' + entry['id'] + '">Ansehen</a>';
}
}
}
row.cells.push(buf);
// RLF
row.content += '<div>' + parseFloat(entry['rlf']).toFixed(2) + '</div>';
row.cells.push('<span style="white-space:nowrap;">' + parseFloat(entry['rlf']).toFixed(2) + '</span>');
row.content += '</div></div>';
rows.push(row);
}
@@ -242,8 +324,8 @@ var siteScript = async function() {
} else {
$('#p-count').html('Keine Regatten gefunden!');
$('#table-regattas').hide();
$('#input-search').hide();
$('#div-regattas').hide();
$('#input-search').parent().hide();
}
hideLoader();

2
server/templates/input.html
View File

@@ -1,4 +1,4 @@
<div class="input-style input-style-1 input-required">
<div class="input-style input-style-2 input-required">
<span class="color-highlight">$$placeholder;</span>
<input id="$$html-id;" class="form-control $$css-class;" type="$$type;" placeholder="$$placeholder;" value="$$value;" />
</div>

9
server/templates/menu/bottom.html Normal file
View File

@@ -0,0 +1,9 @@
<div id="$$html-id;" class="menu menu-box-bottom menu-box-detached rounded-m" data-menu-height="$$height;" >
<div class="menu-title"><h1>$$title;</h1><p class="color-highlight">$$subtitle;&nbsp;</p><a href="#" class="close-menu"><i class="fa fa-times"></i></a></div>
<div class="divider divider-margins mb-n2"></div>
<div class="content">
<div class="list-group list-custom-small">
$$0;
</div>
</div>
</div>

5
server/templates/menu/item-badge.html Normal file
View File

@@ -0,0 +1,5 @@
<a id="$$html-id;" href="$$1;" class="$$css-class;">
<span>$$0;</span>
<span id="$$badge-id;" class="badge bg-highlight color-white">$$badge-value;</span>
<i class="fa fa-angle-right"></i>
</a>

6
server/templates/menu/item-icon-badge.html Normal file
View File

@@ -0,0 +1,6 @@
<a id="$$html-id;" href="$$1;" class="$$css-class;">
<i class="fa font-14 $$icon; rounded-s bg-highlight color-white"></i>
<span>$$0;</span>
<span id="$$badge-id;" class="badge bg-highlight color-white">$$badge-value;</span>
<i class="fa fa-angle-right"></i>
</a>

5
server/templates/menu/item-icon.html Normal file
View File

@@ -0,0 +1,5 @@
<a id="$$html-id;" href="$$1;" class="$$css-class;">
<i class="fa font-14 $$icon; rounded-s bg-highlight color-white"></i>
<span>$$0;</span>
<i class="fa fa-angle-right"></i>
</a>

4
server/templates/menu/item-simple.html Normal file
View File

@@ -0,0 +1,4 @@
<a id="$$html-id;" href="$$1;" class="$$css-class;">
<span>$$0;</span>
<i class="fa fa-angle-right"></i>
</a>

9
server/templates/menu/modal.html Normal file
View File

@@ -0,0 +1,9 @@
<div id="$$html-id;" class="menu menu-box-modal menu-box-detached rounded-m" data-menu-width="$$width;" data-menu-height="$$height;">
<div class="menu-title"><h1>$$title;</h1><p class="color-highlight">$$subtitle;&nbsp;</p><a href="#" class="close-menu"><i class="fa fa-times"></i></a></div>
<div class="divider divider-margins mb-n2"></div>
<div class="content">
<div class="list-group list-custom-small">
$$0;
</div>
</div>
</div>

9
server/templates/menu/top.html Normal file
View File

@@ -0,0 +1,9 @@
<div id="$$html-id;" class="menu menu-box-top menu-box-detached rounded-m" data-menu-height="$$height;" >
<div class="menu-title"><h1>$$title;</h1><p class="color-highlight">$$subtitle;&nbsp;</p><a href="#" class="close-menu"><i class="fa fa-times"></i></a></div>
<div class="divider divider-margins mb-n2"></div>
<div class="content">
<div class="list-group list-custom-small">
$$0;
</div>
</div>
</div>

2
server/templates/select.html
View File

@@ -1,4 +1,4 @@
<div class="input-style input-style-1 input-required">
<div class="input-style input-style-2 input-required">
<span class="color-highlight input-style-1-active">$$placeholder;</span>
<select id="$$html-id;" class="form-control $$css-class;">
$$options;

2
server/templates/textarea.html
View File

@@ -1,4 +1,4 @@
<div class="input-style input-style-1 input-required">
<div class="input-style input-style-2 input-required">
<span class="color-highlight">$$placeholder;</span>
<textarea id="$$html-id;" class="form-control $$css-class;" placeholder="$$placeholder;">$$value;</textarea>
</div>