EP/website-typo3
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP Improve js code

Browse Source
This commit is contained in:
Björn Fromme
2019-10-01 22:06:06 +02:00
parent 5c5b722972
commit 07800c05d1
6 changed files with 139 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Address.vue
+40 -93
View File
@@ -4,94 +4,51 @@
<form @submit.prevent="save()">
<div class="row">
<div class="col-xs-12 col-md-6">
<div class="form-group">
<label for="gender" class="control-label">
Gender:
</label>
<select id="gender" v-model="userData.gender" class="form-control">
<form-group label="Gender">
<select v-model="userData.gender" class="form-control">
<option value="w">W</option>
<option value="m">M</option>
<option value="d">D</option>
</select>
</div>
<div class="form-group">
<label for="title" class="control-label">
Titel:
</label>
<input id="title" type="text" v-model="userData.title" class="form-control">
</div>
<div class="form-group" :class="{'has-error': formErrors.lastName }">
<label for="name" class="control-label">
Name:
</label>
<input id="name" type="text" v-model="userData.lastName" class="form-control">
<span class="help-block">{{ formErrors.lastName }}</span>
</div>
<div class="form-group" :class="{'has-error': formErrors.firstName }">
<label for="firstName" class="control-label">
Vorname:
</label>
<input id="firstName" type="text" v-model="userData.firstName" class="form-control">
<span class="help-block">{{ formErrors.firstName }}</span>
</div>
<div class="form-group">
<label class="control-label">
Geburtsdatum:
</label>
</form-group>
<form-group label="Title">
<input type="text" v-model="userData.title" class="form-control">
</form-group>
<form-group label="Name" :error="formErrors.lastName">
<input type="text" v-model="userData.lastName" class="form-control">
</form-group>
<form-group label="Vorname" :error="formErrors.firstName">
<input type="text" v-model="userData.firstName" class="form-control">
</form-group>
<form-group label="Geburtsdatum">
<span ref="picker"></span>
</div>
</form-group>
</div>
<div class="col-xs-12 col-md-6">
<div class="form-group" :class="{'has-error': formErrors.street }">
<label for="street" class="control-label">
Straße:
</label>
<input id="street" type="text" v-model="userData.street" class="form-control">
<span class="help-block">{{ formErrors.street }}</span>
</div>
<div class="form-group" :class="{'has-error': formErrors.zipCode }">
<label for="zipCode" class="control-label">
PLZ:
</label>
<input id="zipCode" type="text" v-model="userData.zipCode" class="form-control">
<span class="help-block">{{ formErrors.zipCode }}</span>
</div>
<div class="form-group" :class="{'has-error': formErrors.city }">
<label for="city" class="control-label">
Stadt:
</label>
<input id="city" type="text" v-model="userData.city" class="form-control">
<span class="help-block">{{ formErrors.city }}</span>
</div>
<div class="form-group" :class="{'has-error': formErrors.country }">
<label for="country" class="control-label">
Land:
</label>
<select id="country" v-model="userData.country" class="form-control">
<form-group label="Straße" :error="formErrors.street">
<input type="text" v-model="userData.street" class="form-control">
</form-group>
<form-group label="PLZ" :error="formErrors.zipCode">
<input type="text" v-model="userData.zipCode" class="form-control">
</form-group>
<form-group label="Stadt" :error="formErrors.city">
<input type="text" v-model="userData.city" class="form-control">
</form-group>
<form-group label="Land" :error="formErrors.country">
<select v-model="userData.country" class="form-control">
<option v-for="country in countries"
:value="country['code']">{{ country['name'] }}</option>
</select>
<span class="help-block">{{ formErrors.country }}</span>
</div>
<div class="form-group" :class="{'has-error': formErrors.email }">
<label for="email" class="control-label">
E-Mail:
</label>
<input id="email" type="text" v-model="userData.email" class="form-control">
<span class="help-block">{{ formErrors.email }}</span>
</div>
<div class="form-group">
<label for="phone" class="control-label">
Telefon:
</label>
<input id="phone" type="text" v-model="userData.phonePrivate" class="form-control">
</div>
<div class="form-group">
<label for="mobile" class="control-label">
Mobil:
</label>
<input id="mobile" type="text" v-model="userData.phoneMobile" class="form-control">
</div>
</form-group>
<form-group label="E-Mail" :error="formErrors.email">
<input type="text" v-model="userData.email" class="form-control">
</form-group>
<form-group label="Telefon" :error="formErrors.phonePrivate">
<input type="text" v-model="userData.phonePrivate" class="form-control">
</form-group>
<form-group label="Mobil" :error="formErrors.phoneMobile">
<input type="text" v-model="userData.phoneMobile" class="form-control">
</form-group>
</div>
<div class="col-xs-12">
<div class="form-group">
@@ -111,8 +68,12 @@
import axios from 'axios'
import flatpickr from 'flatpickr'
import { German } from 'flatpickr/dist/l10n/de'
import FormGroup from './components/FormGroup';
export default {
components: {
FormGroup
},
data () {
return {
picker: null,
@@ -121,7 +82,6 @@
}
},
created () {
this.initFormErrors();
this.loadFormOptions();
this.$store.dispatch('loadAddress')
.then(() => {
@@ -142,19 +102,6 @@
},
methods: {
...mapMutations(['alert', 'beginLoading', 'endLoading']),
initFormErrors () {
this.formErrors = {
lastName: null,
firstName: null,
dateOfBirth: null,
email: null,
gender: null,
street: null,
zipCode: null,
city: null,
country: null
}
},
loadFormOptions () {
this.beginLoading();
return axios({
@@ -167,7 +114,7 @@
});
},
save () {
this.initFormErrors();
this.formErrors = {};
this.$store.dispatch('saveAddress', this.userData)
.catch(error => {
this.alert({
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/App.vue
+8 -8
View File
@@ -2,7 +2,8 @@
<div id="app">
<nav class="navbar navbar-default" v-if="isLoggedIn">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myep-navbar" aria-expanded="false">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#myep-navbar" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
@@ -12,11 +13,11 @@
</div>
<div class="collapse navbar-collapse" id="myep-navbar">
<ul class="nav navbar-nav">
<router-link :to="{ name: 'address' }" tag="li" active-class="active" :class="{ disabled: loading }"><a>Adressdaten</a></router-link>
<router-link :to="{ name: 'newsletter' }" tag="li" active-class="active" :class="{ disabled: loading }"><a>Newsletter</a></router-link>
<router-link :to="{ name: 'profile' }" tag="li" active-class="active" :class="{ disabled: loading }"><a>Mein Profil</a></router-link>
<router-link :to="{ name: 'events' }" tag="li" active-class="active" :class="{ disabled: loading }"><a>Reise-Historie</a></router-link>
<router-link :to="{ name: 'teamer' }" tag="li" active-class="active" :class="{ disabled: loading }" v-if="isTeamer"><a>Teamer</a></router-link>
<router-link :to="{ name: 'address' }" tag="li" active-class="active" :class="{ disabled: loading }">Adressdaten</router-link>
<router-link :to="{ name: 'newsletter' }" tag="li" active-class="active" :class="{ disabled: loading }">Newsletter</router-link>
<router-link :to="{ name: 'profile' }" tag="li" active-class="active" :class="{ disabled: loading }">Mein Profil</router-link>
<router-link :to="{ name: 'events' }" tag="li" active-class="active" :class="{ disabled: loading }">Reise-Historie</router-link>
<router-link :to="{ name: 'teamer' }" tag="li" active-class="active" :class="{ disabled: loading }" v-if="isTeamer">Teamer</router-link>
</ul>
<ul class="nav navbar-nav navbar-right">
<li :class="{ disabled: loading }"><a href="#" @click.prevent="logout()">Logout</a></li>
@@ -53,8 +54,7 @@
this.$store.dispatch('logout')
.then(() => {
this.$router.push({ name: 'login' })
}).catch(error => {
});
}).catch(error => {});
}
},
computed: {
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Registration.vue
+32 -57
View File
@@ -1,49 +1,33 @@
<template>
<div class="form-wrapper form--border" id="myep-main">
<h1>Registrierung MyE&amp;P</h1>
<form @submit.prevent="submit()">
<form @submit.prevent="register()">
<div class="row">
<div class="col-xs-12 col-md-6">
<div class="form-group" :class="{'has-error': formErrors.firstName }">
<label for="firstname" class="control-label">
Vorname
</label>
<input id="firstname" type="text" v-model="userData.firstName" class="form-control">
<span class="help-block">{{ formErrors.firstName }}</span>
</div>
<form-group label="Vorname" :error="formErrors.firstName">
<input type="text" v-model="userData.firstName" class="form-control">
</form-group>
</div>
<div class="col-xs-12 col-md-6">
<div class="form-group" :class="{'has-error': formErrors.lastName }">
<label for="name" class="control-label">
Name
</label>
<input id="name" type="text" v-model="userData.lastName" class="form-control">
<span class="help-block">{{ formErrors.lastName }}</span>
</div>
<form-group label="Name" :error="formErrors.lastName">
<input type="text" v-model="userData.lastName" class="form-control">
</form-group>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-6">
<div class="form-group" :class="{'has-error': formErrors.email }">
<label for="email" class="control-label">
E-Mail
</label>
<input id="email" type="text" v-model="userData.email" class="form-control">
<span class="help-block">{{ formErrors.email }}</span>
</div>
<form-group label="E-Mail" :error="formErrors.email">
<input type="text" v-model="userData.email" class="form-control">
</form-group>
</div>
<div class="col-xs-12 col-md-6">
<div class="form-group" :class="{'has-error': formErrors.gender }">
<label for="gender" class="control-label">
Gender
</label>
<select id="gender" v-model="userData.gender" class="form-control">
<form-group label="Gender" :error="formErrors.gender">
<select v-model="userData.gender" class="form-control">
<option value="M">M</option>
<option value="W">W</option>
<option value="D">D</option>
</select>
<span class="help-block">{{ formErrors.gender }}</span>
</div>
</form-group>
</div>
</div>
<div class="row">
@@ -66,22 +50,28 @@
<script>
import { mapState, mapMutations } from 'vuex'
import FormGroup from './components/FormGroup';
export default {
components: {
FormGroup
},
data () {
return {
userData: {},
userData: {
lastName: '',
firstName: '',
email: '',
gender: 'M'
},
formErrors: {}
}
},
methods: {
...mapMutations(['alert']),
submit () {
this.message = '';
this.register();
},
register () {
this.initFormErrors();
this.message = '';
this.formErrors = {};
this.$store.dispatch('register', this.userData)
.then(response => {
if (response.data.success) {
@@ -89,8 +79,13 @@
message: 'Du erhältst in Kürze eine E-Mail mit einem Link zum (Zurück)setzen deines Passworts.',
class: 'alert-success'
});
this.initFormData();
this.initFormErrors();
this.userData = {
lastName: '',
firstName: '',
email: '',
gender: 'M'
};
this.formErrors = {};
} else {
this.alert({
message: 'Du bist bereits registriert. Bitte nutze die Passwort vergessen Funktion.',
@@ -103,28 +98,8 @@
this.formErrors[violation.property_path] = violation.message;
}
});
},
initFormData () {
this.userData = {
lastName: '',
firstName: '',
email: '',
gender: 'M'
}
},
initFormErrors () {
this.formErrors = {
lastName: null,
firstName: null,
email: null,
gender: null
}
}
},
created () {
this.initFormData();
this.initFormErrors();
},
computed: {
...mapState(['loading'])
}
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Teamer.vue
+16 -23
View File
@@ -36,28 +36,19 @@
</label>
</div>
</div>
<div class="form-group">
<label for="status" class="control-label">
Status:
</label>
<form-group label="Status">
<select id="status" v-model="userData.seniority" class="form-control">
<option v-for="status in this.status" :value="status.value">{{ status.label }}</option>
</select>
</div>
<div class="form-group">
<label for="jacketsize" class="control-label">
Jackengröße:
</label>
<select id="jacketsize" v-model="userData.jacketSize" class="form-control">
</form-group>
<form-group label="Jackengröße">
<select v-model="userData.jacketSize" class="form-control">
<option v-for="size of this.sizes" :value="size">{{ size }}</option>
</select>
</div>
<div class="form-group">
<label for="jacketsize" class="control-label">
Wünsche:
</label>
</form-group>
<form-group label="Wünsche">
<textarea class="xxlarge form-control" cols="30" rows="3" v-model="userData.notes"></textarea>
</div>
</form-group>
</div>
<div class="col-xs-12 col-md-6">
<h4>Verfügbarkeiten</h4>
@@ -69,13 +60,9 @@
{{ timeFrame | period }}
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="form-control" v-model="userData.monthLong"/>
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
Ich habe Zeit und würde gerne über einen Monat am Stück in eine Destination.
</label>
</div>
<form-checkbox :value.sync="userData.monthLong">
Ich habe Zeit und würde gerne über einen Monat am Stück in eine Destination.
</form-checkbox>
</div>
</div>
<div class="row">
@@ -96,8 +83,14 @@
import axios from 'axios'
import dayjs from 'dayjs'
import 'dayjs/locale/de'
import FormGroup from './components/FormGroup';
import FormCheckbox from './components/FormCheckbox';
export default {
components: {
FormGroup,
FormCheckbox
},
data () {
return {
sizes: [ 'S', 'M', 'L', 'XL', 'XXL' ],
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/FormCheckbox.vue
+20
View File
@@ -0,0 +1,20 @@
<template>
<div class="checkbox">
<label>
<input type="checkbox" class="form-control" v-model="value" @change="$emit('update:value', value);"/>
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
<slot></slot>
</label>
</div>
</template>
<script>
export default {
name: 'FormCheckbox',
props: {
value: {
required: true
}
}
}
</script>
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/FormGroup.vue
+23
View File
@@ -0,0 +1,23 @@
<template>
<div class="form-group" :class="{'has-error': error }">
<label class="control-label">{{ label }}:</label>
<slot></slot>
<span class="help-block">{{ error }}</span>
</div>
</template>
<script>
export default {
name: 'FormGroup',
props: {
label: {
type: String,
required: true
},
error: {
type: String,
default: null
}
}
}
</script>