Commit b0f837b4 authored by dm141569's avatar dm141569 Committed by BZ

Add more style and validate

parent c5baf968
......@@ -197,6 +197,20 @@ main {
background-color: #FFFFFF;
}
#info {
padding-top: 1em;
background-color: #EFEFEF;
}
#info h2 {
margin: 0 0 0 0.5em;
}
#info p:last-child {
margin-bottom: 0;
}
/**
* ********** Create Meetup Form **********
*/
......@@ -320,7 +334,14 @@ label {
.num {
font-weight: bold;
}
.success {
padding-bottom: 1em;
color: #41A85F;
font-weight: bold;
}
#details footer {
padding: 3em 0 4em 0;
......
......@@ -62,27 +62,38 @@ SPORTMEETUPFH.Main = (function() {
* Submit create a new meetup
*/
function createMeetup() {
// Validierung findet mit HTML5 statt, müsste eigentlich auch noch spearat mit JS und am Backend stattfinden, aus Zeitgründen wird das weggelassen.
$.post(path + '/', {
_token: $('#_token').val(),
name: $('#name').val(),
contact: $('#contact').val(),
sport: $('#sport').val(),
date: $('#date').val(),
time: $('#time').val(),
meetupPlace: $('#meetup-place').val()
});
$('#create')
.find('input[type=text], textarea')
.val('');
var valid = validateForm([
$('#name').val(),
$('#contact').val(),
$('#sport').val(),
$('#date').val(),
$('#time').val(),
$('#meetup-place').val()
]);
if (valid) {
$.post(path + '/', {
_token: $('#_token').val(),
name: $('#name').val(),
contact: $('#contact').val(),
sport: $('#sport').val(),
date: $('#date').val(),
time: $('#time').val(),
meetupPlace: $('#meetup-place').val()
});
/** Quick and Dirty Solution */
$('#meetups').empty();
loadData();
$('#create-meetup').fadeOut();
$('#create')
.find('input[type=text], textarea')
.val('');
/** Quick and Dirty Solution */
$('#meetups').empty();
loadData();
$('#create-meetup').fadeOut();
} else {
alert('Bitte alle Felder ausfüllen!');
}
return false;
}
......@@ -133,6 +144,7 @@ SPORTMEETUPFH.Main = (function() {
$('.name').text(currentEvent.name);
$('.date').text(currentEvent.date);
$('.time').text(currentEvent.time);
$('.contact').text(currentEvent.contact);
$('.meeting-place').text(currentEvent.meeting_place);
$('#create-meetup').fadeOut('slow');
......@@ -147,25 +159,45 @@ SPORTMEETUPFH.Main = (function() {
/**
* Submit form attend to a meetup
*/
function attendMeetup() {
$.post(path + '/' + currentEvent.id, {
_token: $('#_a-token').val(),
id: currentEvent.id,
name: $('#a-name').val(),
contact: $('#a-contact').val()
})
$('#attend').fadeOut(function() {
$('#attend')
.find('input[type=text], textarea')
.val('');
});
// @todo SUCCESS MESSAGE
function attendMeetup() {
var valid = validateForm([
$('#a-name').val(),
$('#a-contact').val()
]);
if (valid) {
$.post(path + '/' + currentEvent.id, {
_token: $('#_a-token').val(),
id: currentEvent.id,
name: $('#a-name').val(),
contact: $('#a-contact').val()
})
$('#attend').fadeOut(function() {
$('#attend')
.find('input[type=text], textarea')
.val('');
animTop();
});
$('.success').fadeIn('slow');
} else {
alert('Bitte alle Felder ausfüllen!');
}
return false;
}
function validateForm(fields) {
var isValid = true;
$(fields).each(function(key, value) {
if ( !$.trim(value) ) isValid = false;
});
return isValid;
}
/**
* Plus button at the top right corner
*/
......@@ -193,6 +225,7 @@ SPORTMEETUPFH.Main = (function() {
$('#attend').show();
$('#participants').empty();
$('#no-ps').hide();
$('.success').hide();
$('.num').text('0');
animTop();
});
......@@ -232,7 +265,7 @@ SPORTMEETUPFH.Main = (function() {
$('#btnInfo').click(btnInfo);
$('#create').submit(createMeetup);
$('#attend').submit(attendMeetup);
$('#btn-back').bind('click', btnBack);
$('.btn-back').bind('click', btnBack);
$('[title="top"]').bind('click', animTop);
},
......@@ -244,6 +277,7 @@ SPORTMEETUPFH.Main = (function() {
$('#create-meetup').hide();
$('#details').hide();
$('#no-ps').hide();
$('.success').hide();
}
}
}());
......
......@@ -18,7 +18,30 @@
<main role="main">
<section id="info">
<p>Text</p>
<h2>Was ist "Sportmeetup FH"?</h2>
<p>
Wenn man allein ist, fällt es oft
schwer sich für Sport zu motivieren. Diese Anwendung soll dazu
dienen, mit anderen Menschen in Verbindung zu treten und
gemeinsam Sport auszuüben.
</p>
<h2>Wie funktionerts?</h2>
<p>
Auf das Plus rechts oben drücken und eine neues Meetup
erstellen. Andere Personen sehen dann dieses Meetup und
können mitmachen. Man kann natürlich auch selbst bei einem
bereits eingetragenen Meetup mitmachen.
</p>
<h2>Warum gibt es diese WebApp?</h2>
<p>
Diese Anwendung entstand im Rahmen des Masters "Mobiles Internet"
bei dem ein "Print - To - Mobile - Social" Webapplikation
als Initialprojekt erstellt werden sollte. Möglichst viele
Personen sollen über den QR Code auf diese Seite kommen
und das Angebot vielleicht auch noch nutzen. Viel Spaß ;)
</p>
</section>
<section id="create-meetup">
......@@ -29,22 +52,22 @@
<input type="hidden" name="_token" id="_token" value="<?php echo csrf_token(); ?>" />
<label for="name">Dein Name:</label>
<input type="text" name="name" id="name" placeholder="Name eingeben" required="required" />
<input type="text" name="name" id="name" placeholder="Name eingeben" />
<label for="contact">Kontaktdaten:</label>
<input type="text" name="contact" id="contact" placeholder="E-Mail, Telefon,..." required="required"/>
<input type="text" name="contact" id="contact" placeholder="E-Mail, Telefon,..." />
<label for="sport">Sportart:</label>
<input type="text" name="sport" id="sport" placeholder="Sportart eintragen" required="required"/>
<input type="text" name="sport" id="sport" placeholder="Sportart eintragen" />
<label for="date">Datum:</label>
<input type="date" name="date" id="date" placeholder="An welchem Tag soll das stattfinden?" required="required"/>
<input type="date" name="date" id="date" placeholder="An welchem Tag soll das stattfinden?" />
<label for="time">Zeit:</label>
<input type="time" name="time" id="time" placeholder="zu welcher Uhrzeit?" required="required"/>
<input type="time" name="time" id="time" placeholder="zu welcher Uhrzeit?" />
<label for="meetup-place">Treffpunkt:</label>
<input type="text" name="meetup-place" id="meetup-place" placeholder="Wo trefft ihr euch?" required="required"/>
<input type="text" name="meetup-place" id="meetup-place" placeholder="Wo trefft ihr euch?" />
<!-- <label for="notes">Notizen:</label>
<input type="text" name="notes" id="notes" placeholder="Sonstige Bemerkungen" /> -->
......@@ -60,6 +83,8 @@
<section id="details">
<div id="content">
<header>
<a href="/" title="Back" class="btn btn-back dark">&lt; Zurück</a>
<h1>
<span class="sport"></span> am
<span class="date"></span> um
......@@ -67,10 +92,13 @@
</h1>
</header>
<p class="success">Du hast dich für dieses Meetup erfolgreich eingetragen</p>
<p>Sport: <span class="sport"></span></p>
<p>Treffpunkt am <span class="date"></span> um <span class="time"></span> Uhr.</p>
<p>Wo: <span class="meeting-place"></span></p>
<p>Meetup erstellt von <span class="name"></span></p>
<p>Kontaktdaten: <span class="contact"></span></p>
<!-- <p>Notizen: <span class="notes"></span></p> -->
<h2>Teilnehmer</h2>
......@@ -88,10 +116,10 @@
<input type="hidden" name="_a-token" id="_a-token" value="<?php echo csrf_token(); ?>" />
<label for="a-name">Dein Name:</label>
<input type="text" name="a-name" id="a-name" placeholder="Name eingeben" required="required" />
<input type="text" name="a-name" id="a-name" placeholder="Name eingeben" />
<label for="a-contact">Kontaktdaten:</label>
<input type="text" name="a-contact" id="a-contact" placeholder="E-Mail, Telefon,..." required="required" />
<input type="text" name="a-contact" id="a-contact" placeholder="E-Mail, Telefon,..." />
<input type="submit" name="submit-attend" id="submit-attend" value="Mitmachen!"/>
</fieldset>
......@@ -99,7 +127,7 @@
</div>
<footer>
<a href="/" title="Back" id="btn-back" class="btn dark">&lt; Zurück</a>
<a href="/" title="Back" class="btn btn-back dark">&lt; Zurück</a>
</footer>
</section>
</main>
......@@ -108,7 +136,7 @@
<p class="align-left">
&copy; 2014 dm141560<br />
FH St. Pölten, Master Mobiles Internet, Semester 1<br />
Initialprojekt<br />
Initialprojekt, Mobile Forschungsgruppe (MFG)<br />
<a href="http://mfg.fhstp.ac.at" title="MFG Website" />
<img src="img/mfg-logo.png" alt="MFG Logo" title="MFG Logo" />
</a>
......
No preview for this file type
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment