Added contact

server/content/contact.php

@@ -1,19 +1,38 @@
 <?php
 	
-	// TODO: Create site
+	$sp['title'] = 'Kontakt - Regatten.net ' . $_CLASS['name'];
-	
-	$sp['title'] = 'Seite noch nicht unterstuuml;tzt - Regatten.net ' . $_CLASS['name'];
 	$sp['backbutton'] = true;
+	$sp['activenav'] = 5;
 	
-	$content = $tpl->load('error', ['404', 'Seite existiert noch nicht']);
+	// TITLE
-	$content .= '<p>';
+	$content = '<h1>Kontakt</h1>';
-	$content .= 'Die gesuchte Seite ist leider noch nicht verf&uuml;gbar.<br>';
+	
-	$content .= 'Wir arbeiten daran, sie schnellstm&ouml;glich zur Verf&uuml;gung zu stellen.<br>';
+	$sp['output'] .= $tpl->load('card', [$content]);
-	$content .= 'Wie w&auml;re es mit der Homepage?';
+	
+	// Info
+	$content = '<p>';
+	$content .= 'Du hast eine Frage? Du hast einen Fehler in unserer Software oder in den gespeicherten Daten gefunden? Du willst Regatten.net auch f&uuml;r Deine Bootsklasse nutzen?<br>';
+	$content .= 'Egal was es ist, lass es uns wissen! Schreibe uns eine Mail an <a href="mailto:info@regatten.net">info@regatten.net</a> oder nutze einfach dieses Kontakt-Formular.<br>';
+	$content .= 'Wir werden Deine Anfrage so schnell wie m&ouml;glich bearbeiten.';
+	$content .= '</p>';
+	$content .= '<p>';
+	$content .= 'Alternativ erreichst Du uns auch telefonisch unter <a href="tel:+4941039659768">+49 (0) 4103 965 976 8</a><br>';
+	$content .= 'Mo-Fr: 7-20 Uhr<br>';
+	$content .= 'Sa: 9-17 Uhr';
 	$content .= '</p>';
-	$content .= $tpl->load('button', ['Zur Startseite', LINK_PRE . 'index', 'css-class' => 'mb-3']);
-	$content .= $tpl->load('button', ['Kontakt', LINK_PRE . 'contact']);
 	
-	$sp['output'] = $tpl->load('card', [$content, 'css-class' => 'text-center pt-3']);
+	$sp['output'] .= $tpl->load('card', [$content]);
+	
+	// Formular
+	$content = '<h2>Kontakt-Formular</h2>';
+	$content .= $tpl->load('input', ['html-id' => 'input-name', 'placeholder' => 'Dein Name', 'type' => 'text']);
+	$content .= $tpl->load('input', ['html-id' => 'input-email', 'placeholder' => 'Email-Adresse', 'type' => 'email']);
+	$content .= $tpl->load('input', ['html-id' => 'input-subject', 'placeholder' => 'Betreff', 'type' => 'text']);
+	$content .= $tpl->load('textarea', ['html-id' => 'input-message', 'placeholder' => 'Deine Nachricht']);
+	$content .= $tpl->load('button', ['Senden', '#', 'html-id' => 'button-send']);
+	
+	$sp['output'] .= $tpl->load('card', [$content]);
+	
+	$sp['scripts'] .= $scripts->load('contact');
 	
 ?>

server/scripts/contact.js

@@ -0,0 +1,49 @@
+function sendMessage() {
+	var name = $('#input-name').val();
+	var email = $('#input-email').val();
+	var subject = $('#input-subject').val();
+	var message = $('#input-message').val();
+	
+	if ((name == '') || (email == '') || (subject == '') || (message == '')) {
+		toastError('Bitte fülle alle Felder aus!');
+		return;
+	}
+	
+	showLoader();
+	$.ajax({
+		url: QUERY_URL + 'contact',
+		method: 'POST',
+		data: {
+			name: name,
+			email: email,
+			subject: subject,
+			message: message
+		},
+		error: function (xhr, status, error) {
+			if (xhr.status == 0) {
+				toastError('Du bist momentan offline.<br>Stelle eine Internetverbindung her, um eine Nachricht zu versenden');
+			} else {
+				console.log('Contact: unbekannter Fehler', status, error);
+				console.log(xhr);
+				toastError('Ein unbekannter Fehler ist aufgetreten. Bitte versuche es noch einmal', 5000);
+			}
+			hideLoader();
+		},
+		success: function (data, status, xhr) {
+			toastOk('Nachricht erfolgreich versandt!');
+			$('#input-subject').val('');
+			$('#input-message').val('');
+			hideLoader();
+		}
+	});
+}
+
+var siteScript = async function () {
+	if (isLoggedIn()) {
+		var user = await dbGetData('users', USER_ID);
+		$('#input-name').val(user.username).trigger('focusin').trigger('focusout');
+		$('#input-email').val(user.email).trigger('focusin').trigger('focusout');
+	}
+	$('#button-send').click(sendMessage);
+	hideLoader();
+}

server/templates/textarea.html

@@ -1,4 +1,4 @@
 <div class="input-style input-style-2 input-required $$css-class;">
 	<span class="color-highlight">$$placeholder;</span>
-	<textarea id="$$html-id;" class="form-control" placeholder="$$placeholder;">$$value;</textarea>
+	<textarea id="$$html-id;" class="form-control pt-3 pb-3" placeholder="$$placeholder;" style="height: 10em; line-height: 1.5em;">$$value;</textarea>
 </div>