Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • fsini-informatik/fsfahrttool
  • kleemeis/fsfahrttool
2 results
Show changes
Hide whitespace changes
Inline Side-by-side
Showing
with 752 additions and 985 deletions
registration-system/view/signups/game1/js/story.js
View file @ 7c45322b
......@@ -164,22 +164,34 @@ Story.actions = {
condition: !state.studityp
}, {
answer: [{
message: 'Klar, studiere doch schon lange hier',
message: 'Klar, studiere doch schon lange den Bachelor hier',
action: function () {
state.studityp = true;
Environment.fapi.data.setValue('studityp', 'HOERS');
Environment.fapi.data.setValue('studityp', 'HOERS_B');
}
}, {
message: 'Ja, bin sogar Tutor dieses Jahr',
message: 'Klar, studiere doch schon lange den Master hier',
action: function () {
state.studityp = true;
Environment.fapi.data.setValue('studityp', 'TUTTI');
Environment.fapi.data.setValue('studityp', 'HOERS_M');
}
}, {
message: 'Nein, bin neu hier',
message: 'Ja, bin sogar Mentor dieses Jahr',
action: function () {
state.studityp = true;
Environment.fapi.data.setValue('studityp', 'ERSTI');
Environment.fapi.data.setValue('studityp', 'MENTO');
}
}, {
message: 'Nein, bin neu hier (Bachelor)',
action: function () {
state.studityp = true;
Environment.fapi.data.setValue('studityp', 'BERSTI');
}
}, {
message: 'Nein, bin neu hier (Master)',
action: function () {
state.studityp = true;
Environment.fapi.data.setValue('studityp', 'MERSTI');
}
}],
condition: !state.studityp
......@@ -194,7 +206,7 @@ Story.actions = {
condition: Environment.progress.inventory_money,
action: function () {
Environment.progress.inventory_ruestung = true;
if (Game.char) Game.char.animate(true); // apply new visuals
if (Game.char) Game.char.animate(true); // apply new visuals
}
}, {
message: 'Was? Spende? Ich hab\' nichts!',
......@@ -1149,6 +1161,7 @@ Story.credits = function () {
function allDone() {
clearInterval(standbyLoop);
Environment.fapi.data.setSignupStats('game1', {'achievedAchievements': Game.achievements.achievedAchievements});
Environment.fapi.submitSignup();
}
};
......@@ -1213,10 +1226,15 @@ Story.dialogueHelper = function (dialogue, context, done) {
return !!answer;
});
if (possibleAnswers.length > 3) {
dialogueBox.css('height', 14+(21*possibleAnswers.length)+'px');
}
if (possibleAnswers.length > 0) {
var list = '<ul>' + possibleAnswers.join('') + '</ul>';
dialogueBox.html(list);
$('[gameDialogueAnswer]').on('click', function () {
dialogueBox.css('height', '');
var answer = $(this).attr('gameDialogueAnswer');
if (typeof answers[answer].action === 'function') answers[answer].action();
dialogueStepper();
......
registration-system/view/signups/game1/js/svgUtils.js
View file @ 7c45322b
// Chrome removed getTranfformToElement https://github.com/cpettitt/dagre-d3/issues/202
SVGElement.prototype.getTransformToElement = SVGElement.prototype.getTransformToElement || function(toElement) {
return toElement.getScreenCTM().inverse().multiply(this.getScreenCTM());
};
function translate(x, y) {
return "translate("+x+", "+y+")";
}
......
registration-system/view/signups/index.php
View file @ 7c45322b
<?php
require_once "abstract_signup_class.php";
require_once 'abstract_signup_class.php';
class SignupMethods {
......@@ -8,6 +8,8 @@ class SignupMethods {
private $signup_methods = [];
private $fallback_method = 'form';
private $environment;
public static function getInstance() {
if(self::$__instance == NULL) self::$__instance = new SignupMethods();
return self::$__instance;
......@@ -15,6 +17,7 @@ class SignupMethods {
protected function __construct() {
$this->signup_methods = $this->loadSignupMethods();
$this->environment = Environment::getEnv();
}
public function getSignupMethods() {
......@@ -27,12 +30,19 @@ class SignupMethods {
public function getSignupMethodsBaseInfo() {
$tmp = [];
foreach($this->signup_methods as $method) {
array_push($tmp, [
"id" => $method["id"],
"name" => $method["class"]::getName(),
"description" => $method["class"]::getAltText(),
"meta" => $method["class"]::getMetaInfo()
]);
$tmp[$method['id']] = [
'id' => $method['id'],
'name' => $method['class']::getName(),
'description' => $method['class']::getAltText(),
'meta' => $method['class']::getMetaInfo(),
'logo' => $method['class']::getLogo(),
'score' => function($stats) use ($method) {
return $method['class']::getScore($stats);
},
'badgeDetails' => function($stats) use ($method) {
return $method['class']::getBadgeDetails($stats);
}
];
}
return $tmp;
}
......@@ -57,7 +67,7 @@ class SignupMethods {
/**
* @return class (instantiated) of the active signup method
* @throws ErrorException when $_GET["method"] is missing or not available in the list
* @throws ErrorException when $_GET['method'] is missing or not available in the list
*/
public function getActiveMethod() {
$method = $this->getActiveMethodObj();
......@@ -66,7 +76,7 @@ class SignupMethods {
/**
* @return id of the class (and with that the folder)
* @throws ErrorException when $_GET["method"] is missing or not available in the list
* @throws ErrorException when $_GET['method'] is missing or not available in the list
*/
public function getActiveMethodId() {
$method = $this->getActiveMethodObj();
......@@ -75,16 +85,16 @@ class SignupMethods {
/**
* @return array
* @throws ErrorException when $_GET["method"] is missing or not available in the list
* @throws ErrorException when $_GET['method'] is missing or not available in the list
*/
private function getActiveMethodObj() {
if(!isset($_REQUEST["method"])) throw new ErrorException("No signup-method selected!");
return $this->getMethodObj($_REQUEST["method"]);
if(!isset($_REQUEST['method'])) throw new ErrorException('No signup-method selected!');
return $this->getMethodObj($_REQUEST['method']);
}
private function getMethodObj($mode) {
if(Environment::getEnv()->formDataReceived()) $mode = $this->fallback_method;
if(!isset($this->signup_methods[$mode])) throw new ErrorException("Signup-method does not exist!");
if(!isset($this->signup_methods[$mode])) throw new ErrorException('Signup-method does not exist!');
return [ 'id' => $mode, 'class' => $this->signup_methods[$mode]['class']];
}
......@@ -125,158 +135,4 @@ class SignupMethods {
return $tmp_methods;
}
/**
* This function takes submitted form data from $_REQUEST and validates the input.
*
* returns assoc array looking like this:
* [
* "valid" => true|false,
* "message" => 'a message',
* "errors" => ['array of', 'errors'],
* "data" => [<validated data as assoc array>]
* ]
*
* @return array (see above)
*/
public function validateSubmission() {
$environment = Environment::getEnv();
$errors = [];
$data = [];
$fid = $environment->getSelectedTripId();
$data['fahrt_id'] = $fid;
if($environment->getRegistrationState() > 1){
$errors = ["Ungültige Fahrt!"];
} else {
$possible_dates = comm_get_possible_dates($environment->database, $fid);
$this->validateField('forname', $environment->config['invalidChars'], $data, $errors, "Fehlerhafter oder fehlender Vorname!");
$this->validateField('sirname', $environment->config['invalidChars'], $data, $errors, "Fehlerhafter oder fehlender Nachname!");
$this->validateField('pseudo', $environment->config['invalidChars'], $data, $errors, "Fehlerhafter oder fehlender Anzeigename!");
$this->validateField('mehl', 'mail', $data, $errors, "Fehlerhafte oder fehlende E-Mail-Adresse!");
$this->validateField('anday', array_slice($possible_dates,0, -1), $data, $errors, 'Hilfe beim Ausfüllen: <a href="https://www.hu-berlin.de/studium/bewerbung/imma/exma">hier klicken!</a>');
$this->validateField('antyp', $environment->oconfig['reisearten'], $data, $errors, 'Trolle hier lang: <a href="https://www.hu-berlin.de/studium/bewerbung/imma/exma">hier klicken!</a>');
$this->validateField('abday', array_slice($possible_dates,1), $data, $errors, 'Ruth hat mitgedacht: <a href="https://www.hu-berlin.de/studium/bewerbung/imma/exma">hier klicken!</a>');
$this->validateField('abtyp', $environment->oconfig['reisearten'], $data, $errors, 'Entwickler Bier geben und: <a href="https://www.hu-berlin.de/studium/bewerbung/imma/exma">hier klicken!</a>');
$this->validateField('essen', $environment->oconfig['essen'], $data, $errors, 'Hat das wirklich nicht gereicht??'); // ggf trollable machen mit /^[a-zA-Z]{2,50}$/
$this->validateField('studityp', $environment->oconfig['studitypen'], $data, $errors, 'Neue Chance, diesmal FS-Ini wählen!');
$this->validateField('public', 'public', $data, $errors, 'Trollololol');
$this->validateField('virgin', 'virgin', $data, $errors, 'Bitte Altersbereich wählen!');
$this->validateField('comment', 'comment', $data, $errors, 'Trollololol');
$this->validateField('captcha', 'captcha', $data, $errors, 'Captcha falsch eingegeben.');
if($data['anday'] == $data['abday'])
array_push($errors, "Anreisetag = Abreisetag -> Bitte prüfen!");
}
if(count($errors)>0){
return [
"valid" => false,
"errors" => $errors,
"message" => "Fehlerhafte Angaben!",
"data" => $data
];
} else {
return [
"valid" => true,
"errors" => null,
"message" => "Angaben gültig!",
"data" => $data
];
}
}
/**
* checks for correctness of a given field ($index) by trying $check.
* pushes $errmess into $errarr, if $check fails
* pushes empty data on fail or correct data on success into $data
*
* check can be regex or array or special (public, mail, comment).
* if array, than check only succeeds if sent data is inside that array
*
* @param $index
* @param $check
* @param $datarr
* @param $errarr
* @param $errmess
*/
function validateField($index, $check, &$datarr, &$errarr, $errmess){
$pushdat = "";
comm_verbose(3,"checking ".$index);
// check that first because if unchecked it doesnt exist
if($check == "public"){
if(isset($_REQUEST[$index])) $datarr[$index] = 0;
else $datarr[$index] = 1;
}
// if index is missing -> error!
elseif(!isset($_REQUEST[$index])){
array_push($errarr, $errmess);
// set it in every case so corrections are possible
$datarr[$index] = "";
}
// index is there -> check if value is allowed
else {
$tmp = trim($_REQUEST[$index]);
// do specific check if a set of variables is allowed
if(is_array($check)){
$vals = array_values($check);
$keys = array_keys($check);
// on error
if (!in_array($tmp, $vals) && !in_array($tmp, $keys)) array_push($errarr, $errmess);
// on success
// take val directly
if (in_array($tmp,$vals)) $datarr[$index] = $tmp;
// or translate
else $datarr[$index] = $check[$tmp];
}
// check captcha
elseif($check == "captcha"){
if(!(isset($_SESSION['captcha']) && strtolower($tmp) == strtolower($_SESSION['captcha']))) {
array_push($errarr, $errmess);
unset($_SESSION['captcha']);
$datarr[$index] = "";
}
}
// check mail address
elseif($check == "mail"){
if(!filter_var($tmp, FILTER_VALIDATE_EMAIL))
array_push($errarr, $errmess);
// set it in every case so corrections are possible
$datarr[$index] = $tmp;
}
// check comment field
elseif($check == "comment"){
$datarr[$index] = htmlspecialchars($tmp, ENT_QUOTES);
}
// check virgin field
elseif($index == "virgin"){
if($_REQUEST[$index]=="Ja") $datarr[$index] = 0; // NOTE: for consistency: virgin = 0 means > 18
else $datarr[$index] = 1;
}
//everything else
else {
// check with regex
if(!(preg_match($check, $tmp)==1))
array_push($errarr, $errmess);
// set it in every case so corrections are possible
$datarr[$index] = $tmp;
}
}
}
}
registration-system/view/signups/story/graphics/age.png deleted 100644 → 0
View file @ 385b142f
registration-system/view/signups/story/graphics/age.png

82.5 KiB

registration-system/view/signups/story/graphics/age.svg 0 → 100644
View file @ 7c45322b
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
registration-system/view/signups/story/graphics/begin.png deleted 100644 → 0
View file @ 385b142f
registration-system/view/signups/story/graphics/begin.png

86.3 KiB

registration-system/view/signups/story/graphics/begin.svg 0 → 100644
View file @ 7c45322b
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
registration-system/view/signups/story/graphics/eat.png deleted 100644 → 0
View file @ 385b142f
registration-system/view/signups/story/graphics/eat.png

133 KiB

registration-system/view/signups/story/graphics/eat.svg 0 → 100644
View file @ 7c45322b
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
registration-system/view/signups/story/graphics/hej.svg 0 → 100644
View file @ 7c45322b
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
registration-system/view/signups/story/graphics/travelBegin.png deleted 100644 → 0
View file @ 385b142f
registration-system/view/signups/story/graphics/travelBegin.png

164 KiB

registration-system/view/signups/story/graphics/travelBegin.svg 0 → 100644
View file @ 7c45322b
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
registration-system/view/signups/story/graphics/travelEnd.png deleted 100644 → 0
View file @ 385b142f
registration-system/view/signups/story/graphics/travelEnd.png

152 KiB

registration-system/view/signups/story/graphics/travelEnd.svg 0 → 100644
View file @ 7c45322b
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
registration-system/view/signups/story/index.php
View file @ 7c45322b
<?php
class StorySignupMethod extends SignupMethod {
public static function getName() {
return "Story Mode";
}
......@@ -11,14 +12,34 @@ class StorySignupMethod extends SignupMethod {
public static function getMetaInfo() {
return [
"version" => '1.1',
"date" => '20.09.2014',
"version" => '1.1',
"date" => '20.09.2014',
"contributors" => ['Manuel Herrmann <fsfahrt@icetruck.de>']
];
}
public static function getLogo() {
return 'graphics/hej.svg';
}
public static function getScore($stats) {
$allowedAchievements = ['test','stein','elch2','bagger','ball','ohh','star','park'];
if (isset($stats['achievements'])) {
$cnt = 0;
foreach($stats['achievements'] as $a){
if (in_array($a, $allowedAchievements)) $cnt++;
}
return round($cnt/count($allowedAchievements)*100);
}
return 0;
}
public static function getBadgeDetails($stats) {
return 'superspecial <br /> Detials';
}
public function getJSDependencies() {
return ['story.js'];
return ['story.js','../game1/jslib/d3.min.js'];
}
public function getCSSDependencies() {
......@@ -30,12 +51,10 @@ class StorySignupMethod extends SignupMethod {
}
public function showInlineHTML() {
global $config_reisearten_o, $config_essen_o;
$environment = Environment::getEnv();
$dates = $this->environment->getTrip()->getPossibleDates();
$dates = comm_get_possible_dates($environment->database, $environment->getSelectedTripId());
foreach($dates as &$date)
$date = '"'.$date.'"';
foreach ($dates as &$date)
$date = '"' . $date . '"';
echo '
<div id="storyhead"></div>
......@@ -50,10 +69,10 @@ class StorySignupMethod extends SignupMethod {
return [];
}
function config_get_travel_types() {
return ' . $this->putTypesInObject($config_reisearten_o) . ';
return ' . $this->putTypesInObject($this->environment->oconfig['reisearten']) . ';
}
function config_get_food_types() {
return ' . $this->putTypesInObject($config_essen_o) . ';
return ' . $this->putTypesInObject($this->environment->oconfig['essen']) . ';
}
</script>
</div>';
......@@ -67,7 +86,7 @@ class StorySignupMethod extends SignupMethod {
$first = false;
else
$text .= ', ';
$text .= '"'.$key.'":"'.$value.'"';
$text .= '"' . $key . '":"' . $value . '"';
}
$text .= ' }';
return $text;
......
registration-system/view/signups/story/story.js
View file @ 7c45322b
......@@ -3,790 +3,666 @@ var debug = false;
var story; // global access for links
var FAPI = new FAPI();
function Story(_storyhead, _storycanvas, _storybox)
{
this.storyhead = _storyhead;
this.storycanvas = _storycanvas;
this.storybox = _storybox;
this.umleitung = $('#story_umleitung');
this.state = -2;
this.form_variables = {};
this.basicData = null;
this.travelStart = null;
this.eat = null;
this.age = null;
this.travelEnd = null;
function Story(_storyhead, _storycanvas, _storybox) {
this.storyhead = _storyhead;
this.storycanvas = _storycanvas;
this.storybox = _storybox;
this.umleitung = $('#story_umleitung');
this.state = -2;
this.form_variables = {};
this.achievements = [];
this.basicData = null;
this.travelStart = null;
this.eat = null;
this.age = null;
this.travelEnd = null;
}
Story.prototype.next = function(bGoBack)
{
var self = this;
// === validate ===
// (e.g.) get mail:
// angular.element(document.querySelector('[ng-controller="storyBasicData"]')).scope().mehl;
if (!bGoBack)
{
switch(this.state)
{
case 0:
var basicDataScope = angular.element(document.querySelector('[ng-controller="storyBasicData"]')).scope();
if (basicDataScope.storyBasicData.$invalid)
return;
this.form_variables.forname = basicDataScope.forname;
this.form_variables.name = basicDataScope.name;
this.form_variables.anzeig = basicDataScope.anzeig;
this.form_variables.mehl = basicDataScope.mehl;
break;
case 1:
if (
this.form_variables.travelStartDate == null
||
this.form_variables.travelStartType == null
)
return;
break;
case 2:
if (this.form_variables.eat == null)
return;
break;
case 3:
if (this.form_variables.age == null)
return;
break;
case 4:
if (
this.form_variables.travelEndDate == null
||
this.form_variables.travelEndType == null
)
return;
break;
}
}
// === navigate ===
var previousState = this.state;
if (!bGoBack)
this.state += 1;
switch(this.state)
{
case -1:
this.initBeginButton();
this.initBasicData();
this.storycanvas.animate({height:0}, 0);
break;
case 0:
if (previousState == -1)
{
this.storyhead.children().remove();
if (debug)
this.storyhead.append('(debug) <div style="cursor:pointer; text-decoration: underline" onclick="story.next()">NEXT</a>');
if (debug)
{
this.storycanvas.stop(true, true).animate({height:'500px'}, 0);
this.initBasicDataAnimation();
}
else
{
this.storycanvas.stop(true, true).animate({height:'500px'}, {duration: 200, complete: function()
{
self.initBasicDataAnimation();
}});
}
}
break;
case 1:
this.initTravelStart();
this.travelStart.animate({left:bGoBack?'900px':'0px'}, {duration: 1000, complete: function()
{
self.initTravelStartAnimation();
}});
this.basicData.animate({left:bGoBack?'0px':'-900px'}, 1000);
break;
case 2:
this.initEat();
this.eat.animate({left:bGoBack?'900px':'0px'}, 1000);
this.travelStart.animate({left:bGoBack?'0px':'-900px'}, 1000);
break;
case 3:
this.initAge();
this.age.animate({left:bGoBack?'900px':'0px'}, {duration: 1000, complete: function()
{
self.initAgeAnimation();
}});
this.eat.animate({left:bGoBack?'0px':'-900px'}, 1000);
break;
case 4:
this.initTravelEnd();
this.travelEnd.animate({left:bGoBack?'-900px':'0px'}, 1000);
this.age.animate({left:bGoBack?'0px':'900px'}, 1000);
break;
case 5:
this.initSummary();
this.storycanvas.stop(true, true).animate({height:bGoBack?'500px':'680px'}, 1000);
this.storybox.stop(true, true).animate({height:bGoBack?'500px':'680px'}, 1000);
this.summary.animate({left:bGoBack?'-900px':'0px'}, 1000);
this.travelEnd.animate({left:bGoBack?'0px':'900px'}, 1000);
break;
default:
if (bGoBack)
this.state += 1;
else
this.state -= 1;
}
if (bGoBack)
{
this.state -= 1;
if (this.state < 0)
this.state = 0;
}
if (bGoBack && this.state == 0)
this.umleitung.animate({bottom:'-70px'}, 500);
else if (!bGoBack && this.state == 1)
this.umleitung.animate({bottom:'0px'}, 500);
Story.prototype.next = function (bGoBack) {
var self = this;
// === validate ===
if (!bGoBack) {
switch (this.state) {
case 0:
var basicDataScope = angular.element(document.querySelector('[ng-controller="storyBasicData"]')).scope();
if (basicDataScope.storyBasicData.$invalid)
return;
this.form_variables.forname = basicDataScope.forname;
this.form_variables.name = basicDataScope.name;
this.form_variables.anzeig = basicDataScope.anzeig;
this.form_variables.mehl = basicDataScope.mehl;
break;
case 1:
if (
this.form_variables.travelStartDate == null
||
this.form_variables.travelStartType == null
)
return;
break;
case 2:
if (this.form_variables.eat == null)
return;
break;
case 3:
if (this.form_variables.age == null)
return;
break;
case 4:
if (
this.form_variables.travelEndDate == null
||
this.form_variables.travelEndType == null
)
return;
break;
}
}
// === navigate ===
var previousState = this.state;
if (!bGoBack)
this.state += 1;
switch (this.state) {
case -1:
this.initBeginButton();
this.initBasicData();
this.storycanvas.animate({height: 0}, 0);
break;
case 0:
if (previousState == -1) {
this.storyhead.children().remove();
if (debug)
this.storyhead.append('(debug) <div style="cursor:pointer; text-decoration: underline" onclick="story.next()">NEXT</a>');
if (debug) {
this.storycanvas.stop(true, true).animate({height: '500px'}, 0);
this.initBasicDataAnimation();
}
else {
this.storycanvas.stop(true, true).animate({height: '500px'}, {
duration: 200, complete: function () {
self.initBasicDataAnimation();
}
});
}
}
break;
case 1:
this.initTravelStart();
this.travelStart.animate({left: bGoBack ? '900px' : '0px'}, {
duration: 1000, complete: function () {
self.initTravelStartAnimation();
}
});
this.basicData.animate({left: bGoBack ? '0px' : '-900px'}, 1000);
break;
case 2:
this.initEat();
this.eat.animate({left: bGoBack ? '900px' : '0px'}, 1000);
this.travelStart.animate({left: bGoBack ? '0px' : '-900px'}, 1000);
break;
case 3:
this.initAge();
this.age.animate({left: bGoBack ? '900px' : '0px'}, {
duration: 1000, complete: function () {
self.initAgeAnimation();
}
});
this.eat.animate({left: bGoBack ? '0px' : '-900px'}, 1000);
break;
case 4:
this.initTravelEnd();
this.travelEnd.animate({left: bGoBack ? '-900px' : '0px'}, 1000);
this.age.animate({left: bGoBack ? '0px' : '900px'}, 1000);
break;
case 5:
this.initSummary();
this.storycanvas.stop(true, true).animate({height: bGoBack ? '500px' : '680px'}, 1000);
this.storybox.stop(true, true).animate({height: bGoBack ? '500px' : '680px'}, 1000);
this.travelEnd.animate({left: bGoBack ? '0px' : '900px'}, 1000);
break;
default:
if (bGoBack)
this.state += 1;
else
this.state -= 1;
}
if (bGoBack) {
this.state -= 1;
if (this.state < 0)
this.state = 0;
}
if (bGoBack && this.state == 0)
this.umleitung.animate({bottom: '-70px'}, 500);
else if (!bGoBack && this.state == 1)
this.umleitung.animate({bottom: '0px'}, 500);
};
Story.prototype.initBeginButton = function () {
this.storyhead.append('<div style="text-align: center; cursor:pointer; text-decoration: underline" onclick="story.next()">Anmeldung starten (Story mode)</a>');
};
Story.prototype.initTravelStartAnimation = function () {
this.travelStartTicket.fadeIn(debug ? 0 : 1000);
};
Story.prototype.initSummary = function () {
FAPI.data.setValues({
forname: story.form_variables.forname,
sirname: story.form_variables.name,
pseudo: story.form_variables.anzeig,
mehl: story.form_variables.mehl,
virgin: Story.ageMap[story.form_variables.age],
essen: Story.eatMap[story.form_variables.eat],
anday: story.form_variables.travelStartDate,
abday: story.form_variables.travelEndDate,
antyp: Story.travelMap[story.form_variables.travelStartType],
abtyp: Story.travelMap[story.form_variables.travelEndType]
});
FAPI.data.setSignupStats('story', {achievements: story.achievements});
FAPI.submitSignup();
};
Story.prototype.initTravelStart = function () {
if (this.travelStart) return;
var self = this;
this.travelStart = this.storyImageSvg('travelBegin.svg');
this.travelStart.animate({left: '900px'}, 0);
this.storybox.append(this.travelStart);
this.travelStartTicket = this.storyImageDiv('ticket.png');
this.travelStartTicket.css({left: '560px', top: '100px', width: '329px', height: '161px'});
this.travelStart.append(this.travelStartTicket);
this.travelStartTicket.fadeOut(0);
this.addTicketTitle(this.travelStartTicket, "Anreise");
this.travelStartTicketButton = this.addTicketButton(this.travelStartTicket, "story.next()");
this.travelStartTicketButton.mouseenter(function (event) {
$(this).stop(true, true).effect("highlight");
});
var possible_dates = comm_get_possible_dates();
possible_dates.pop(); // remove last
possible_dates.unshift(""); // push_front(...)
this.travelStartDate = this.addComboBox(this.travelStartTicket, "Datum", "anday", possible_dates, 115, 70); // @TODO: get date options from php
this.travelStartTicket.append('<div style="position: absolute; left: 65px; top: 95px">Typ</div>');
this.travelStartTicket.append('<div style="position: absolute; left: 115px; top: 95px" id="travelStartType">------</div>');
this.travelStartDate.change(function () {
var value = $(this).val();
if (value == '') {
self.form_variables.travelStartDate = null;
self.travelStartDateWarning.show();
}
else {
self.form_variables.travelStartDate = value;
self.travelStartDateWarning.hide();
}
});
this.travelStartTypeButtons = this.addTravelTypeButtons(this.travelStart);
var travelFormNames = {
bike: "Fahrrad",
oeffi: "&Ouml;ffentlich",
camel: "Individuell"
};
for (var i in this.travelStartTypeButtons) {
(function (i) { // i - scope issues -> would remember last i in for loop
self.travelStartTypeButtons[i].click(function () {
self.form_variables.travelStartType = i;
for (var j in self.travelStartTypeButtons)
self.travelStartTypeButtons[j].css({border: '1px solid #000'});
self.travelStartTypeButtons[i].css({border: '2px solid #f00'});
$('#travelStartType').html(travelFormNames[i]);
self.travelStartTypeWarning.hide();
});
})(i);
}
// warnings created at the end -> on top
this.travelStartTypeWarning = this.toolTippedStoryWarning(this.travelStartTicket, 32, 95, null, "Auf der linken Seite den<br/>Anreise Typ anklicken");
this.travelStartDateWarning = this.toolTippedStoryWarning(this.travelStartTicket, 32, 70, null, "Anreise Datum wählen");
}
Story.prototype.initBeginButton = function()
{
this.storyhead.append('<div style="text-align: center; cursor:pointer; text-decoration: underline" onclick="story.next()">Anmeldung starten (Story mode)</a>');
Story.prototype.addTravelTypeButtons = function (page) {
var buttons = {
bike: $('<div style="position: absolute; border: 1px solid; left: 177px; top: 366px; width: 90px; height: 73px; cursor: pointer;">&nbsp;</div>'),
oeffi: $('<div style="position: absolute; border: 1px solid; left: 316px; top: 192px; width: 84px; height: 90px; cursor: pointer;">&nbsp;</div>'),
camel: $('<div style="position: absolute; border: 1px solid; left: 461px; top: 114px; width: 78px; height: 71px; cursor: pointer;">&nbsp;</div>')
};
var tips = {
bike: $('<div class="storyTip" style="left: 127px; top: 444px; display:none">Anfahrt mit dem Fahrrad</div>'),
oeffi: $('<div class="storyTip" style="left: 206px; top: 286px; display:none">Anfahrt gemeinsam mit den &Ouml;ffentlichen</div>'),
camel: $('<div class="storyTip" style="left: 391px; top: 190px; display:none">Anritt mit Kamel / Individuell</div>')
};
for (var i in buttons) {
if (i.indexOf('Tip') == i.length - 3)
continue;
var button = buttons[i];
var tip = tips[i];
page.append(button);
page.append(tip);
button.mouseenter(function () {
$(this).stop(true, true).effect("highlight");
});
function setHover(tip) // function to keep 'tip' from changing (scope issue)
{
button.hover(function () // in
{
tip.stop(true, true).fadeIn(200);
},
function () // out
{
tip.stop(true, true).fadeOut(200);
});
}
setHover(tip);
}
return buttons;
}
Story.prototype.initTravelStartAnimation = function()
{
this.travelStartTicket.fadeIn(debug ? 0 : 1000);
Story.prototype.addTicketTitle = function (ticket, title) {
ticket.append('<div style="position: absolute; left: 55px; top: 15px;">' + title + '</div>');
}
Story.prototype.initSummary = function()
{
// === Init View ===
if (!this.summary)
{
this.summary = $('<div style="position:absolute; left: 0px; top: 0px"/>');
this.summary.animate({left:'-900px'}, 0);
this.storybox.append(this.summary);
this.summary.append('<h2>Zusammenfassung</h2>');
this.summaryTable = $('<table class="story_summary"/>')
this.summary.append(this.summaryTable);
var rowOrder = ["forname", "name", "anzeig", "mehl", "andaytyp", "abdaytyp", "eat", "age"];
var rows = {
forname:
"Vorname",
name:
"Nachname",
anzeig:
"Anzeigename",
mehl:
"eMail",
andaytyp:
"Anreise Tag / Typ",
abdaytyp:
"Abreise Tag / Typ",
eat:
"Essenswahl",
age:
"Über 18?"
};
for (var i = 0; i < rowOrder.length; ++i)
{
var rowName = rowOrder[i];
var rowTitle = rows[rowName];
this.summaryTable.append('<tr><td>' + rowTitle + '</td><td id="story_summary_' + rowName + '"></td></tr>');
}
this.summaryTable.append('<tr><td>Du bist</td><td><select id="story_summary_studityp" name="studityp"><option>Ersti</option><option>Hoersti</option><option>Tutor</option></select></td></tr>');
this.summaryTable.append('<tr><td>Anmeldung verstecken</td><td><input id="story_summary_public" type="checkbox" name="public" value="public"/></td></tr>');
this.summaryTable.append('<tr><td>Captcha eingeben</td><td><input id="story_summary_captcha" type="text" name="captcha"/></td></tr>');
this.summaryTable.append('<tr><td align="center" colspan="2"><img src="view/captcha.php" alt=""/></td></tr>');
this.summaryTable.append('<tr><td colspan="2">Anmerkung</td></tr>');
this.summaryTable.append('<tr><td colspan="2"><textarea id="story_summary_comment" name="comment" style="width: 450px; height: 120px;"></textarea></td></tr>');
this.summaryTable.append('<tr><td colspan="2">Daten Ok? Dann <button onclick="storySubmit()">anmelden</button>.</td></tr>');
}
// === Update View ===
$('#story_summary_forname').text(this.form_variables.forname);
$('#story_summary_name').text(this.form_variables.name);
$('#story_summary_anzeig').text(this.form_variables.anzeig);
$('#story_summary_mehl').text(this.form_variables.mehl);
$('#story_summary_andaytyp').text(this.form_variables.travelStartDate + ", " + Story.travelMapPhp[Story.travelMap[this.form_variables.travelStartType]]);
$('#story_summary_abdaytyp').text(this.form_variables.travelEndDate + ", " + Story.travelMapPhp[Story.travelMap[this.form_variables.travelEndType]]);
$('#story_summary_eat').text(Story.eatMapPhp[Story.eatMap[this.form_variables.eat]]);
$('#story_summary_age').text(Story.ageMap[this.form_variables.age]);
Story.prototype.addTicketButton = function (ticket, funcstring) {
var newButton = $('<div style="position: absolute; left: 245px; top: 115px; width: 36px; height: 37px; cursor: pointer;" onclick="' + funcstring + '">&nbsp;</div>');
ticket.append(newButton);
return newButton;
}
Story.prototype.initTravelStart = function()
{
if (this.travelStart) return;
var self = this;
this.travelStart = this.storyImageDiv('travelBegin.png');
this.travelStart.animate({left:'900px'}, 0);
this.storybox.append(this.travelStart);
this.travelStartTicket = this.storyImageDiv('ticket.png');
this.travelStartTicket.css({left: '560px', top: '100px', width: '329px', height: '161px'});
this.travelStart.append(this.travelStartTicket);
this.travelStartTicket.fadeOut(0);
this.addTicketTitle(this.travelStartTicket, "Anreise");
this.travelStartTicketButton = this.addTicketButton(this.travelStartTicket, "story.next()");
this.travelStartTicketButton.mouseenter(function(event) {
$(this).stop(true, true).effect("highlight");
});
var possible_dates = comm_get_possible_dates();
possible_dates.pop(); // remove last
possible_dates.unshift(""); // push_front(...)
this.travelStartDate = this.addComboBox(this.travelStartTicket, "Datum", "anday", possible_dates, 115, 70); // @TODO: get date options from php
this.travelStartTicket.append('<div style="position: absolute; left: 65px; top: 95px">Typ</div>');
this.travelStartTicket.append('<div style="position: absolute; left: 115px; top: 95px" id="travelStartType">------</div>');
this.travelStartDate.change(function()
{
var value = $(this).val();
if (value == '')
{
self.form_variables.travelStartDate = null;
self.travelStartDateWarning.show();
}
else
{
self.form_variables.travelStartDate = value;
self.travelStartDateWarning.hide();
}
});
this.travelStartTypeButtons = this.addTravelTypeButtons(this.travelStart);
var travelFormNames = {
car:
"Auto",
bike:
"Fahrrad",
oeffi:
"&Ouml;ffentlich",
camel:
"Individuell"
};
for (var i in this.travelStartTypeButtons)
{
(function(i) { // i - scope issues -> would remember last i in for loop
self.travelStartTypeButtons[i].click(function()
{
self.form_variables.travelStartType = i;
for (var j in self.travelStartTypeButtons)
self.travelStartTypeButtons[j].css({border:'1px solid #000'});
self.travelStartTypeButtons[i].css({border:'2px solid #f00'});
$('#travelStartType').html(travelFormNames[i]);
self.travelStartTypeWarning.hide();
});
})(i);
}
// warnings created at the end -> on top
this.travelStartTypeWarning = this.toolTippedStoryWarning(this.travelStartTicket, 32, 95, null, "Auf der linken Seite den<br/>Anreise Typ anklicken");
this.travelStartDateWarning = this.toolTippedStoryWarning(this.travelStartTicket, 32, 70, null, "Anreise Datum wählen");
Story.prototype.initTravelEnd = function () {
if (this.travelEnd) return;
var self = this;
this.travelEnd = this.storyImageSvg('travelEnd.svg');
this.travelEnd.animate({left: '900px'}, 0);
this.storybox.append(this.travelEnd);
this.travelEndTicket = this.storyImageDiv('ticket.png');
this.travelEndTicket.css({left: '560px', top: '100px', width: '329px', height: '161px'});
this.travelEnd.append(this.travelEndTicket);
this.addTicketTitle(this.travelEndTicket, "Abreise");
this.travelEndTicketButton = this.addTicketButton(this.travelEndTicket, "story.next()");
this.travelEndTicketButton.mouseenter(function (event) {
$(this).stop(true, true).effect("highlight");
});
var possible_dates = comm_get_possible_dates();
possible_dates.shift(); // remove first
possible_dates.unshift(""); // push_front(...)
this.travelEndDate = this.addComboBox(this.travelEndTicket, "Datum", "abday", possible_dates, 115, 70); // @TODO: get date options from php
this.travelEndTicket.append('<div style="position: absolute; left: 65px; top: 95px">Typ</div>');
this.travelEndTicket.append('<div style="position: absolute; left: 115px; top: 95px" id="travelEndType">------</div>');
this.travelEndDate.change(function () {
var value = $(this).val();
if (value == '') {
self.form_variables.travelEndDate = null;
self.travelEndDateWarning.show();
}
else {
self.form_variables.travelEndDate = value;
self.travelEndDateWarning.hide();
}
});
this.travelEndTypeButtons = this.addTravelTypeButtons(this.travelEnd);
var travelFormNames = {
bike: "Fahrrad",
oeffi: "&Ouml;ffentlich",
camel: "Individuell"
};
for (var i in this.travelEndTypeButtons) {
(function (i) { // i - scope issues -> would remember last i in for loop
self.travelEndTypeButtons[i].click(function () {
self.form_variables.travelEndType = i;
for (var j in self.travelEndTypeButtons)
self.travelEndTypeButtons[j].css({border: '1px solid #000'});
self.travelEndTypeButtons[i].css({border: '2px solid #f00'});
$('#travelEndType').html(travelFormNames[i]);
self.travelEndTypeWarning.hide();
});
})(i);
}
// warnings created at the end -> on top
this.travelEndTypeWarning = this.toolTippedStoryWarning(this.travelEndTicket, 32, 95, null, "Auf der linken Seite den<br/>Abreise Typ anklicken");
this.travelEndDateWarning = this.toolTippedStoryWarning(this.travelEndTicket, 32, 70, null, "Abreise Datum wählen");
}
Story.prototype.addTravelTypeButtons = function(page)
{
var buttons = {
car:
$('<div style="position: absolute; border: 1px solid; left: 23px; top: 222px; width: 129px; height: 87px; cursor: pointer;">&nbsp;</div>'),
bike:
$('<div style="position: absolute; border: 1px solid; left: 177px; top: 366px; width: 90px; height: 73px; cursor: pointer;">&nbsp;</div>'),
oeffi:
$('<div style="position: absolute; border: 1px solid; left: 316px; top: 192px; width: 84px; height: 90px; cursor: pointer;">&nbsp;</div>'),
camel:
$('<div style="position: absolute; border: 1px solid; left: 461px; top: 114px; width: 78px; height: 71px; cursor: pointer;">&nbsp;</div>')
};
var tips = {
car:
$('<div class="storyTip" style="left: 8px; top: 314px; display:none">Anfahrt mit dem Auto</div>'),
bike:
$('<div class="storyTip" style="left: 127px; top: 444px; display:none">Anfahrt mit dem Fahrrad</div>'),
oeffi:
$('<div class="storyTip" style="left: 206px; top: 286px; display:none">Anfahrt gemeinsam mit den &Ouml;ffentlichen</div>'),
camel:
$('<div class="storyTip" style="left: 391px; top: 190px; display:none">Anritt mit Kamel / Individuell</div>')
};
for (var i in buttons)
{
if (i.indexOf('Tip') == i.length - 3)
continue;
var button = buttons[i];
var tip = tips[i];
page.append(button);
page.append(tip);
button.mouseenter(function ()
{
$(this).stop(true, true).effect("highlight");
});
function setHover(tip) // function to keep 'tip' from changing (scope issue)
{
button.hover(function () // in
{
tip.stop(true, true).fadeIn(200);
},
function () // out
{
tip.stop(true, true).fadeOut(200);
});
}
setHover(tip);
}
return buttons;
Story.prototype.initEat = function () {
if (this.eat) return;
var self = this;
this.eat = this.storyImageSvg('eat.svg');
this.eat.animate({left: '900px'}, 0);
this.storybox.append(this.eat);
this.foodTypeButtons = this.addFoodTypeButtons(this.eat);
for (var i in this.foodTypeButtons) {
(function (i) {
self.foodTypeButtons[i].click(function () {
self.form_variables.eat = i;
for (var j in self.foodTypeButtons)
self.foodTypeButtons[j].css({border: '1px solid #000'});
self.foodTypeButtons[i].css({border: '2px solid #f00'});
self.eatWarning.hide();
});
})(i);
}
this.eatContinueButton = $('<div style="position: absolute; left: 799px; top: 412px; width: 32px; height: 27px; cursor: pointer;" onclick="story.next()">&nbsp;</div>');
this.eatContinueButton.mouseenter(function (event) {
$(this).stop(true, true).effect("highlight");
});
this.eat.append(this.eatContinueButton);
this.eatWarning = this.toolTippedStoryWarning(this.eat, 386, 149, null, "Art des Essens auswählen");
}
Story.prototype.addTicketTitle = function(ticket, title)
{
ticket.append('<div style="position: absolute; left: 55px; top: 15px;">' + title + '</div>');
Story.prototype.addFoodTypeButtons = function (page) {
var buttons =
{
cow: $('<div style="position: absolute; border: 1px solid; left: 236px; top: 139px; width: 129px; height: 93px; cursor: pointer;">&nbsp;</div>'),
cheese: $('<div style="position: absolute; border: 1px solid; left: 446px; top: 236px; width: 57px; height: 56px; cursor: pointer;">&nbsp;</div>'),
wheat: $('<div style="position: absolute; border: 1px solid; left: 604px; top: 214px; width: 112px; height: 127px; cursor: pointer;">&nbsp;</div>')
};
var tips = {
cow: $('<div class="storyTip" style="left: 175px; top: 237px; display:none">Ziemlich alles:<br/>Vegan, Vegetarisch und Fleisch</div>'),
cheese: $('<div class="storyTip" style="left: 427px; top: 298px; display:none">Vegetarisch</div>'),
wheat: $('<div class="storyTip" style="left: 632px; top: 346px; display:none">Vegan</div>')
};
for (var i in buttons) {
var button = buttons[i];
page.append(button);
button.mouseenter(function (event) {
$(this).stop(true, true).effect("highlight");
});
page.append(tips[i]);
(function (tip) {
button.hover(function () // in
{
tip.stop(true, true).fadeIn(200);
},
function () // out
{
tip.stop(true, true).fadeOut(200);
});
})(tips[i]);
}
return buttons;
}
Story.prototype.addTicketButton = function(ticket, funcstring)
{
var newButton = $('<div style="position: absolute; left: 245px; top: 115px; width: 36px; height: 37px; cursor: pointer;" onclick="' + funcstring + '">&nbsp;</div>');
ticket.append(newButton);
return newButton;
Story.prototype.initAgeAnimation = function () {
var self = this;
setTimeout(function () {
for (var j in self.ageButtons)
self.ageButtons[j].effect("highlight");
}, 800);
}
Story.prototype.initTravelEnd = function()
{
if (this.travelEnd) return;
var self = this;
this.travelEnd = this.storyImageDiv('travelEnd.png');
this.travelEnd.animate({left:'900px'}, 0);
this.storybox.append(this.travelEnd);
this.travelEndTicket = this.storyImageDiv('ticket.png');
this.travelEndTicket.css({left: '560px', top: '100px', width: '329px', height: '161px'});
this.travelEnd.append(this.travelEndTicket);
this.addTicketTitle(this.travelEndTicket, "Abreise");
this.travelEndTicketButton = this.addTicketButton(this.travelEndTicket, "story.next()");
this.travelEndTicketButton.mouseenter(function(event) {
$(this).stop(true, true).effect("highlight");
});
var possible_dates = comm_get_possible_dates();
possible_dates.shift(); // remove first
possible_dates.unshift(""); // push_front(...)
this.travelEndDate = this.addComboBox(this.travelEndTicket, "Datum", "abday", possible_dates, 115, 70); // @TODO: get date options from php
this.travelEndTicket.append('<div style="position: absolute; left: 65px; top: 95px">Typ</div>');
this.travelEndTicket.append('<div style="position: absolute; left: 115px; top: 95px" id="travelEndType">------</div>');
this.travelEndDate.change(function()
{
var value = $(this).val();
if (value == '')
{
self.form_variables.travelEndDate = null;
self.travelEndDateWarning.show();
}
else
{
self.form_variables.travelEndDate = value;
self.travelEndDateWarning.hide();
}
});
this.travelEndTypeButtons = this.addTravelTypeButtons(this.travelEnd);
var travelFormNames = {
car:
"Auto",
bike:
"Fahrrad",
oeffi:
"&Ouml;ffentlich",
camel:
"Individuell"
};
for (var i in this.travelEndTypeButtons)
{
(function(i) { // i - scope issues -> would remember last i in for loop
self.travelEndTypeButtons[i].click(function()
{
self.form_variables.travelEndType = i;
for (var j in self.travelEndTypeButtons)
self.travelEndTypeButtons[j].css({border:'1px solid #000'});
self.travelEndTypeButtons[i].css({border:'2px solid #f00'});
$('#travelEndType').html(travelFormNames[i]);
self.travelEndTypeWarning.hide();
});
})(i);
}
// warnings created at the end -> on top
this.travelEndTypeWarning = this.toolTippedStoryWarning(this.travelEndTicket, 32, 95, null, "Auf der linken Seite den<br/>Abreise Typ anklicken");
this.travelEndDateWarning = this.toolTippedStoryWarning(this.travelEndTicket, 32, 70, null, "Abreise Datum wählen");
Story.prototype.initAge = function () {
if (this.age) return;
var self = this;
this.age = this.storyImageSvg('age.svg');
this.age.animate({left: '900px'}, 0);
this.storybox.append(this.age);
this.ageButtonContinue = $('<div style="position: absolute; left: 675px; top: 354px; width: 28px; height: 21px; cursor: pointer;" onclick="story.next()">&nbsp;</div>');
this.age.append(this.ageButtonContinue);
this.ageButtonContinue.mouseenter(function () {
$(this).stop(true, true).effect("highlight");
});
this.ageButtons = {
eighteenplus: $('<div style="position: absolute; left: 468px; top: 232px; width: 35px; height: 20px; cursor: pointer;">&nbsp;</div>'),
below: $('<div style="position: absolute; left: 38px; top: 285px; width: 88px; height: 33px; cursor: pointer;">&nbsp;</div>')
};
for (var i in this.ageButtons) {
(function (i) { // std::scope_issue<i>, own scope fixes reference
self.age.append(self.ageButtons[i]);
self.ageButtons[i].click(function () {
self.form_variables.age = i;
for (var j in self.ageButtons)
self.ageButtons[j].css({border: 'none'});
self.ageButtons[i].css({border: '2px solid #f00'});
self.ageButtonContinue.effect("highlight");
self.ageWarning.hide();
});
self.ageButtons[i].mouseenter(function () {
$(this).stop(true, true).effect("highlight");
});
})(i);
}
this.ageWarning = this.toolTippedStoryWarning(this.age, 678, 134, null, "Links ein Schild mit passendem<br/>Altersbereich anklicken");
}
Story.prototype.initEat = function()
{
if (this.eat) return;
var self = this;
this.eat = this.storyImageDiv('eat.png');
this.eat.animate({left:'900px'}, 0);
this.storybox.append(this.eat);
this.foodTypeButtons = this.addFoodTypeButtons(this.eat);
for (var i in this.foodTypeButtons)
{
(function (i)
{
self.foodTypeButtons[i].click(function()
{
self.form_variables.eat = i;
for (var j in self.foodTypeButtons)
self.foodTypeButtons[j].css({border: '1px solid #000'});
self.foodTypeButtons[i].css({border: '2px solid #f00'});
self.eatWarning.hide();
});
})(i);
}
this.eatContinueButton = $('<div style="position: absolute; left: 799px; top: 412px; width: 32px; height: 27px; cursor: pointer;" onclick="story.next()">&nbsp;</div>');
this.eatContinueButton.mouseenter(function(event) {
$(this).stop(true, true).effect("highlight");
});
this.eat.append(this.eatContinueButton);
this.eatWarning = this.toolTippedStoryWarning(this.eat, 386, 149, null, "Art des Essens auswählen");
Story.prototype.initBasicDataAnimation = function () {
var self = this;
setTimeout(function () {
self.bd_bell.fadeIn(debug ? 0 : 1200);
self.bd_orig_bell.effect("transfer", {to: self.bd_bell}, 800);
}, debug ? 0 : 600);
}
Story.prototype.addFoodTypeButtons = function(page)
{
var buttons =
{
cow:
$('<div style="position: absolute; border: 1px solid; left: 236px; top: 139px; width: 129px; height: 93px; cursor: pointer;">&nbsp;</div>'),
cheese:
$('<div style="position: absolute; border: 1px solid; left: 446px; top: 236px; width: 57px; height: 56px; cursor: pointer;">&nbsp;</div>'),
wheat:
$('<div style="position: absolute; border: 1px solid; left: 604px; top: 214px; width: 112px; height: 127px; cursor: pointer;">&nbsp;</div>')
};
var tips = {
cow:
$('<div class="storyTip" style="left: 175px; top: 237px; display:none">Ziemlich alles:<br/>Vegan, Vegetarisch und Fleisch</div>'),
cheese:
$('<div class="storyTip" style="left: 427px; top: 298px; display:none">Vegetarisch</div>'),
wheat:
$('<div class="storyTip" style="left: 632px; top: 346px; display:none">Vegan</div>')
};
for (var i in buttons)
{
var button = buttons[i];
page.append(button);
button.mouseenter(function(event) {
$(this).stop(true, true).effect("highlight");
});
page.append(tips[i]);
(function(tip) {
button.hover(function () // in
{
tip.stop(true, true).fadeIn(200);
},
function () // out
{
tip.stop(true, true).fadeOut(200);
});
})(tips[i]);
}
return buttons;
Story.prototype.initBasicData = function () {
if (this.basicData) return;
var self = this;
// == init view ==
this.basicData = this.storyImageSvg('begin.svg');
this.storybox.append(this.basicData);
this.bd_bell = this.storyImageDiv('bell.png');
this.bd_bell.css({position: 'absolute', top: '20px', left: '20px', width: '419px', height: '438px'});
this.basicData.append(this.bd_bell);
this.bd_bell.fadeOut(0);
// == form ==
this.bd_bellForm = $('<form name="storyBasicData" novalidate/>');
this.bd_bell.append(this.bd_bellForm);
this.bd_bellForname = this.addFormText(this.bd_bellForm, "Vorname", "forname", "text", "forname", 160, 60);
this.bd_bellForname.attr('ng-minlength', '2');
this.bd_bellForname.attr('required', 'required');
this.toolTippedStoryWarning(this.bd_bell, 135, 80, 'forname', "Bitte den Vornamen eingeben");
this.bd_bellName = this.addFormText(this.bd_bellForm, "Nachname", "name", "text", "name", 160, 140).attr('ng-minlength', '2');
this.bd_bellName.attr('ng-minlength', '2');
this.bd_bellName.attr('required', 'required');
this.toolTippedStoryWarning(this.bd_bell, 135, 160, 'name', "Bitte den Nachnamen eingeben");
this.bd_bellAnzeig = this.addFormText(this.bd_bellForm, "Anzeigename", "anzeig", "text", "anzeig", 160, 215);
this.bd_bellAnzeig.attr('ng-minlength', '2');
this.bd_bellAnzeig.attr('required', 'required');
this.toolTippedStoryWarning(this.bd_bell, 135, 235, 'anzeig', "Bitte einen Anzeige-Namen eingeben");
this.bd_bellMehl = this.addFormText(this.bd_bellForm, "eMail", "mehl", "email", "mehl", 160, 290);
this.bd_bellMehl.attr('ng-minlength', '5');
this.bd_bellMehl.attr('required', 'required');
this.toolTippedStoryWarning(this.bd_bell, 135, 310, 'mehl', "Bitte eine g&uuml;ltige eMail Addresse eingeben");
// == notice ==
this.bd_bell.append($('<div style="position:absolute;top:378px;left:168px">Bitte klingeln, wenn fertig.</div>'))
this.bd_btn_continue = $('<div style="width:60px;height:67px;position:absolute;top:48px;left:48px;cursor:pointer;" onclick="story.next();" />');
this.bd_bell.append(this.bd_btn_continue);
this.bd_btn_continue.mouseenter(function (event) {
$(this).stop(true, true).effect("highlight");
});
// for transition animation
this.bd_orig_bell = $('<div style="width:3px;height:3px;position:absolute;left:633px;top:193px" />');
this.basicData.append(this.bd_orig_bell);
// == angularJS ==
this.basicData.attr('ng-controller', 'storyBasicData');
// manually start angular for the forms
angular.module('storyApp', []).controller('storyBasicData', function ($scope) {
// for function decl.
});
angular.bootstrap(document, ['storyApp']);
}
Story.prototype.initAgeAnimation = function()
{
var self = this;
setTimeout(function()
{
for (var j in self.ageButtons)
self.ageButtons[j].effect("highlight");
}, 800);
}
Story.prototype.initAge = function()
{
if (this.age) return;
var self = this;
this.age = this.storyImageDiv('age.png');
this.age.animate({left:'900px'}, 0);
this.storybox.append(this.age);
this.ageButtonContinue = $('<div style="position: absolute; left: 675px; top: 354px; width: 28px; height: 21px; cursor: pointer;" onclick="story.next()">&nbsp;</div>');
this.age.append(this.ageButtonContinue);
this.ageButtonContinue.mouseenter(function() {
$(this).stop(true, true).effect("highlight");
});
this.ageButtons = {
eighteenplus:
$('<div style="position: absolute; left: 468px; top: 232px; width: 35px; height: 20px; cursor: pointer;">&nbsp;</div>'),
below:
$('<div style="position: absolute; left: 38px; top: 285px; width: 88px; height: 33px; cursor: pointer;">&nbsp;</div>')
};
for (var i in this.ageButtons)
{
(function(i) { // std::scope_issue<i>, own scope fixes reference
self.age.append(self.ageButtons[i]);
self.ageButtons[i].click(function()
{
self.form_variables.age = i;
for (var j in self.ageButtons)
self.ageButtons[j].css({border:'none'});
self.ageButtons[i].css({border:'2px solid #f00'});
self.ageButtonContinue.effect("highlight");
self.ageWarning.hide();
});
self.ageButtons[i].mouseenter(function() {
$(this).stop(true, true).effect("highlight");
});
})(i);
}
this.ageWarning = this.toolTippedStoryWarning(this.age, 678, 134, null, "Links ein Schild mit passendem<br/>Altersbereich anklicken");
}
Story.prototype.initBasicDataAnimation = function()
{
var self = this;
setTimeout(function() {
self.bd_bell.fadeIn(debug ? 0 : 1200);
self.bd_orig_bell.effect("transfer", {to: self.bd_bell}, 800);
}, debug ? 0 : 600);
}
Story.prototype.initBasicData = function()
{
if (this.basicData) return;
var self = this;
// == init view ==
this.basicData = this.storyImageDiv('begin.png');
this.storybox.append(this.basicData);
this.bd_bell = this.storyImageDiv('bell.png');
this.bd_bell.css({position: 'relative', top: '20px', left: '20px', width: '419px', height: '438px'});
this.basicData.append(this.bd_bell);
this.bd_bell.fadeOut(0);
// == form ==
this.bd_bellForm = $('<form name="storyBasicData" novalidate/>');
this.bd_bell.append(this.bd_bellForm);
this.bd_bellForname = this.addFormText(this.bd_bellForm, "Vorname", "forname", "text", "forname", 160, 60);
this.bd_bellForname.attr('ng-minlength', '2');
this.bd_bellForname.attr('required', 'required');
this.toolTippedStoryWarning(this.bd_bell, 135, 80, 'forname', "Bitte den Vornamen eingeben");
this.bd_bellName = this.addFormText(this.bd_bellForm, "Nachname", "name", "text", "name", 160, 140).attr('ng-minlength', '2');
this.bd_bellName.attr('ng-minlength', '2');
this.bd_bellName.attr('required', 'required');
this.toolTippedStoryWarning(this.bd_bell, 135, 160, 'name', "Bitte den Nachnamen eingeben");
this.bd_bellAnzeig = this.addFormText(this.bd_bellForm, "Anzeigename", "anzeig", "text", "anzeig", 160, 215);
this.bd_bellAnzeig.attr('ng-minlength', '2');
this.bd_bellAnzeig.attr('required', 'required');
this.toolTippedStoryWarning(this.bd_bell, 135, 235, 'anzeig', "Bitte einen Anzeige-Namen eingeben");
this.bd_bellMehl = this.addFormText(this.bd_bellForm, "eMail", "mehl", "email", "mehl", 160, 290);
this.bd_bellMehl.attr('ng-minlength', '5');
this.bd_bellMehl.attr('required', 'required');
this.toolTippedStoryWarning(this.bd_bell, 135, 310, 'mehl', "Bitte eine g&uuml;ltige eMail Addresse eingeben");
// == notice ==
this.bd_bell.append($('<div style="position:absolute;top:378px;left:168px">Bitte klingeln, wenn fertig.</div>'))
this.bd_btn_continue = $('<div style="width:60px;height:67px;position:absolute;top:48px;left:48px;cursor:pointer;" onclick="story.next();" />');
this.bd_bell.append(this.bd_btn_continue);
this.bd_btn_continue.mouseenter(function(event) {
$(this).stop(true, true).effect("highlight");
});
// for transition animation
this.bd_orig_bell = $('<div style="width:3px;height:3px;position:absolute;left:633px;top:193px" />');
this.basicData.append(this.bd_orig_bell);
// == angularJS ==
this.basicData.attr('ng-controller', 'storyBasicData');
// manually start angular for the forms
angular.module('storyApp', []).controller('storyBasicData', function($scope)
{
// for function decl.
});
angular.bootstrap(document, ['storyApp']);
}
Story.prototype.begin = function()
{
this.next();
Story.prototype.begin = function () {
this.next();
}
Story.prototype.storyImage = function(filename)
{
return $('<img src="view/graphics/story/' + filename + '" alt="" />');
Story.prototype.storyImage = function (filename) {
return $('<img src="view/graphics/story/' + filename + '" alt="" />');
}
Story.prototype.storyImageDiv = function(filename)
{
return $('<div style="position:absolute; width:900px; height:500px; background: url('+FAPI.resolvePath('graphics/'+filename)+');"></div>');
Story.prototype.storyImageDiv = function (filename) {
return $('<div style="position:absolute; width:900px; height:500px; background: url(' + FAPI.resolvePath('graphics/' + filename) + ');"></div>');
}
Story.prototype.addComboBox = function(parentNode, label, fieldName, options, x, y)
{
var form_label = $('<div>'+label+'</div>');
var form = $('<select name="story_field_'+fieldName+'"></select>');
for(var i = 0; i < options.length; ++i)
form.append('<option>' + options[i] + '</option>');
form_label.css({position:'absolute', top: y + 'px',left: (x - 60) + 'px'});
form.css({position:'absolute', top: y + 'px',left: x + 'px'});
parentNode.append(form_label);
parentNode.append(form);
Story.prototype.storyImageSvg = function (filename) {
var bg = $('<div style="position:absolute; width:900px; height:500px;"></div>');
d3.xml(FAPI.resolvePath('graphics/' + filename), 'image/svg+xml', function (xml) {
bg[0].appendChild(xml.documentElement);
});
return bg;
};
Story.prototype.addComboBox = function (parentNode, label, fieldName, options, x, y) {
var form_label = $('<div>' + label + '</div>');
var form = $('<select name="story_field_' + fieldName + '"></select>');
for (var i = 0; i < options.length; ++i)
form.append('<option>' + options[i] + '</option>');
form_label.css({position: 'absolute', top: y + 'px', left: (x - 60) + 'px'});
form.css({position: 'absolute', top: y + 'px', left: x + 'px'});
parentNode.append(form_label);
parentNode.append(form);
this.form_variables[fieldName] = null;
return form;
}
Story.prototype.addFormText = function (parentNode, label, fieldName, type, model, x, y) {
var form_label = $('<div>' + label + ':</div>');
var form = $('<input type="' + type + '" name="story_field_' + fieldName + '" ng-model="' + model + '"/>');
form_label.css({position: 'absolute', top: y + 'px', left: x + 'px'});
form.css({position: 'absolute', top: (y + 20) + 'px', left: x + 'px'});
parentNode.append(form_label);
parentNode.append(form);
this.form_variables[fieldName] = null;
this.form_variables[fieldName] = null;
return form;
}
Story.prototype.addFormText = function(parentNode, label, fieldName, type, model, x, y)
{
var form_label = $('<div>'+label+':</div>');
var form = $('<input type="'+type+'" name="story_field_'+fieldName+'" ng-model="'+model+'"/>');
form_label.css({position:'absolute', top:y+'px',left:x+'px'});
form.css({position:'absolute', top:(y+20)+'px',left:x+'px'});
parentNode.append(form_label);
parentNode.append(form);
this.form_variables[fieldName] = null;
return form;
return form;
}
Story.prototype.toolTippedStoryWarning = function(page, x, y, field, toolTipText)
{
var warning = $('<div class="storyWarn" style="left: '+x+'px; top: '+y+'px;"' + (field != null ? (' ng-show="!'+field+'"') : '') + '>&nbsp;</div>');
var toolTip = $('<div class="storyToolTip" style="left: '+x+'px; top: '+(y+25)+'px; display: none; text-align: left">'+toolTipText+'</div>');
page.append(warning);
page.append(toolTip);
warning.hover(function() // over
{
toolTip.stop(true, true).fadeIn(200);
},
function() // out
{
toolTip.stop(true, true).fadeOut(200);
});
return warning;
Story.prototype.toolTippedStoryWarning = function (page, x, y, field, toolTipText) {
var warning = $('<div class="storyWarn" style="left: ' + x + 'px; top: ' + y + 'px;"' + (field != null ? (' ng-show="!' + field + '"') : '') + '>&nbsp;</div>');
var toolTip = $('<div class="storyToolTip" style="left: ' + x + 'px; top: ' + (y + 25) + 'px; display: none; text-align: left">' + toolTipText + '</div>');
page.append(warning);
page.append(toolTip);
warning.hover(function () // over
{
toolTip.stop(true, true).fadeIn(200);
},
function () // out
{
toolTip.stop(true, true).fadeOut(200);
});
return warning;
}
Story.prototype.test = function()
{
function cI(objPhp, obj, error, label)
{
var i = 0;
objPhpLoop:
for (var n in objPhp)
{
++i;
for (var j in obj)
{
if (obj[j] == n)
continue objPhpLoop;
}
error.push(n + " is missing in " + label);
}
for (var n in obj)
--i;
if (i != 0)
error.push(label + " item count differs by " + i);
}
var error = [];
cI(Story.eatMapPhp, Story.eatMap, error, "eatMap");
cI(Story.travelMapPhp, Story.travelMap, error, "travelMap");
if (error.length > 0)
{
alert("Der Story Modus ist nicht aktuell.\r\nBitte ohne Story-Modus fortsetzen.\r\nDazu 'Seite funktioniert nicht' anklicken.\r\n\r\n"+error.join("\r\n"));
}
Story.prototype.test = function () {
function cI(objPhp, obj, error, label) {
var i = 0;
objPhpLoop:
for (var n in objPhp) {
++i;
for (var j in obj) {
if (obj[j] == n)
continue objPhpLoop;
}
error.push(n + " is missing in " + label);
}
for (var n in obj)
--i;
if (i != 0)
error.push(label + " item count differs by " + i);
}
var error = [];
cI(Story.eatMapPhp, Story.eatMap, error, "eatMap");
cI(Story.travelMapPhp, Story.travelMap, error, "travelMap");
if (error.length > 0) {
alert("Der Story Modus ist nicht aktuell.\r\nBitte ohne Story-Modus fortsetzen.\r\nDazu 'Seite funktioniert nicht' anklicken.\r\n\r\n" + error.join("\r\n"));
}
}
function storySubmit()
{
var formWrapper = $('<div style="display:none"/>');
var form = $('<form name="storySubmitForm" method="POST"/>');
formWrapper.append(form);
$('#storybox').append(formWrapper);
function formAppendText(name, value)
{
form.append('<input name="' + name + '" value="' + value.replace(/[\r\n]/g, "<br/>").replace(/&/g, "&amp;").replace(/"/g, "&quot;") + '"/>');
}
if(window.location.pathname.search("waitlist")>0)
formAppendText("waitlist", "waitlist");
formAppendText('forname', story.form_variables.forname);
formAppendText('sirname', story.form_variables.name);
formAppendText('pseudo', story.form_variables.anzeig);
formAppendText('mehl', story.form_variables.mehl);
formAppendText('studityp', $('#story_summary_studityp').val());
formAppendText('virgin', Story.ageMap[story.form_variables.age]);
formAppendText('essen', Story.eatMapPhp[Story.eatMap[story.form_variables.eat]]);
formAppendText('anday', story.form_variables.travelStartDate);
formAppendText('antyp', Story.travelMapPhp[Story.travelMap[story.form_variables.travelStartType]]);
formAppendText('abday', story.form_variables.travelEndDate);
formAppendText('abtyp', Story.travelMapPhp[Story.travelMap[story.form_variables.travelEndType]]);
formAppendText('comment', $('#story_summary_comment').val());
if ($('#story_summary_public').is(':checked'))
formAppendText('public', 'public');
formAppendText('captcha', $('#story_summary_captcha').val());
formAppendText('storySubmit', 'storySubmit');
form.submit();
Story.prototype.possibleAchievements = {
test: function () {
$('#elch').hide();
},
stein: function () {
$('#stein').hide();
},
elch2: function () {
$('#elch2').children().css('fill', '#F300FB');
},
bagger: function () {
$('#bagger').children().css('stroke', '#F300FB');
},
ball: function () {
$('#ball').hide();
},
ohh: function () {
$('ohh').css('fill', '#F300FB');
},
star: function () {
$('#licht1').hide();
},
park: function () {
$('#licht2').hide();
}
};
function triggerAchievement(aid) {
console.log(aid);
if (aid in story.possibleAchievements && !(aid in story.achievements)) {
story.possibleAchievements[aid]();
story.achievements.push(aid);
}
}
// === INIT ===
$(function()
{
var storybox = $('#storybox');
if (storybox)
{
Story.eatMapPhp = config_get_food_types();
Story.eatMap = {
cow:
"ALLES",
cheese:
"VEGE",
wheat:
"VEGA"
};
Story.ageMap = {
eighteenplus:
"Ja",
below:
"Nein"
};
Story.travelMapPhp = config_get_travel_types();
Story.travelMap = {
car:
"AUTO",
oeffi:
"BUSBAHN",
bike:
"RAD",
camel:
"INDIVIDUELL"
};
story = new Story($('#storyhead'), $('#storycanvas'), storybox);
story.test();
story.begin();
}
$(function () {
var storybox = $('#storybox');
if (storybox) {
Story.eatMapPhp = config_get_food_types();
Story.eatMap = {
cow: "ALLES",
cheese: "VEGE",
wheat: "VEGA"
};
Story.ageMap = {
eighteenplus: "Ja",
below: "Nein"
};
Story.travelMapPhp = config_get_travel_types();
Story.travelMap = {
oeffi: "BUSBAHN",
bike: "RAD",
camel: "INDIVIDUELL"
};
story = new Story($('#storyhead'), $('#storycanvas'), storybox);
story.test();
story.begin();
}
});
registration-system/view/style.css
View file @ 7c45322b
......@@ -14,7 +14,6 @@ Neon Purple: #993CF3
body {
background: #cfdee7;
font-family: sans-serif;
text-align: justify;
font-size: 1em;
}
......@@ -168,51 +167,23 @@ h3 {
}
p { margin: 15px; }
div.event_info { margin: 0 15px 5px 15px; }
p.event_date { background: url(event_date_icon.png) left center no-repeat; line-height: 20px; padding-left: 25px; }
a { color: black; text-decoration: none; }
a:hover { text-decoration: underline; }
a.email_all {
margin-left: 70px;
padding-left: 30px;
line-height: 25px;
background: white url(mail_all.jpg) no-repeat left center;
}
a.csv_download { margin-left: 70px; padding-left: 30px; line-height: 25px; background: url(csv_icon.gif) no-repeat left center; display: block; }
ul.user_list {
list-style-image: url(user_small.gif);
}
.event_name {
background: url(event.jpg) no-repeat left center;
padding-left: 40px;
}
h2.event_name { line-height: 50px; }
h3.event_name { line-height: 40px; }
h3.signup {
background: url(signup.gif) no-repeat left center;
padding-left: 45px;
line-height: 45px;
table.signups, div.signups { width: 95%; margin: 30px auto;}
table.signups tr th { }
table.signups tr th, tr td { text-align: left; padding: 1px 4px 1px 4px; }
table.signups td {
height: 2em;
vertical-align: middle;
margin:0;
}
table.signups {border:none;}
table.fieldset { margin-left: 30px; }
div.asterisk { margin-left: 30px; font-size: 10px; }
h3.signup_people {
background: url(group.jpg) no-repeat left center;
padding-left: 55px;
line-height: 50px;
margin-top: 15px;
table.signups tbody tr:nth-child(odd) {
background-color: #e6e6e6;
}
table.signups, div.signups { width: 90%; margin: 30px auto;}
table.signups tr th { }
table.signups tr th, tr td { text-align: left; padding: 1px 4px 1px 4px; }
p.edit_link {
padding: 10px;
border: 1px dotted black;
......@@ -298,10 +269,13 @@ a.editenum { display: block; height: 20px; line-height: 20px; width: 20px; font-
margin: 0px;
padding: 0px;
float: left;
background-color: #ffffff;
}
.fahrttable {
display: table;
margin-bottom: 1em;
margin-top: 1em;
}
.fahrttable div {
......@@ -374,4 +348,22 @@ ul#method-list a:hover {
#signup-container {
margin: 2em 0;
}
.progressbar {
height: 5px;
position: relative;
background: #d4bfc1;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
padding: 1px;
}
.progressbar > span {
display: block;
height: 100%;
background-color: rgb(65, 207, 75);
position: relative;
overflow: hidden;
}
\ No newline at end of file

Impressum | Datenschutzerklärung