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()"> <form @submit.prevent="save()">
<div class="row"> <div class="row">
<div class="col-xs-12 col-md-6"> <div class="col-xs-12 col-md-6">
<div class="form-group"> <form-group label="Gender">
<label for="gender" class="control-label"> <select v-model="userData.gender" class="form-control">
Gender:
</label>
<select id="gender" v-model="userData.gender" class="form-control">
<option value="w">W</option> <option value="w">W</option>
<option value="m">M</option> <option value="m">M</option>
<option value="d">D</option> <option value="d">D</option>
</select> </select>
</div> </form-group>
<div class="form-group"> <form-group label="Title">
<label for="title" class="control-label"> <input type="text" v-model="userData.title" class="form-control">
Titel: </form-group>
</label> <form-group label="Name" :error="formErrors.lastName">
<input id="title" type="text" v-model="userData.title" class="form-control"> <input type="text" v-model="userData.lastName" class="form-control">
</div> </form-group>
<div class="form-group" :class="{'has-error': formErrors.lastName }"> <form-group label="Vorname" :error="formErrors.firstName">
<label for="name" class="control-label"> <input type="text" v-model="userData.firstName" class="form-control">
Name: </form-group>
</label> <form-group label="Geburtsdatum">
<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>
<span ref="picker"></span> <span ref="picker"></span>
</div> </form-group>
</div> </div>
<div class="col-xs-12 col-md-6"> <div class="col-xs-12 col-md-6">
<div class="form-group" :class="{'has-error': formErrors.street }"> <form-group label="Straße" :error="formErrors.street">
<label for="street" class="control-label"> <input type="text" v-model="userData.street" class="form-control">
Straße: </form-group>
</label> <form-group label="PLZ" :error="formErrors.zipCode">
<input id="street" type="text" v-model="userData.street" class="form-control"> <input type="text" v-model="userData.zipCode" class="form-control">
<span class="help-block">{{ formErrors.street }}</span> </form-group>
</div> <form-group label="Stadt" :error="formErrors.city">
<div class="form-group" :class="{'has-error': formErrors.zipCode }"> <input type="text" v-model="userData.city" class="form-control">
<label for="zipCode" class="control-label"> </form-group>
PLZ: <form-group label="Land" :error="formErrors.country">
</label> <select v-model="userData.country" class="form-control">
<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">
<option v-for="country in countries" <option v-for="country in countries"
:value="country['code']">{{ country['name'] }}</option> :value="country['code']">{{ country['name'] }}</option>
</select> </select>
<span class="help-block">{{ formErrors.country }}</span> </form-group>
</div> <form-group label="E-Mail" :error="formErrors.email">
<div class="form-group" :class="{'has-error': formErrors.email }"> <input type="text" v-model="userData.email" class="form-control">
<label for="email" class="control-label"> </form-group>
E-Mail: <form-group label="Telefon" :error="formErrors.phonePrivate">
</label> <input type="text" v-model="userData.phonePrivate" class="form-control">
<input id="email" type="text" v-model="userData.email" class="form-control"> </form-group>
<span class="help-block">{{ formErrors.email }}</span> <form-group label="Mobil" :error="formErrors.phoneMobile">
</div> <input type="text" v-model="userData.phoneMobile" class="form-control">
<div class="form-group"> </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>
</div> </div>
<div class="col-xs-12"> <div class="col-xs-12">
<div class="form-group"> <div class="form-group">
@@ -111,8 +68,12 @@
import axios from 'axios' import axios from 'axios'
import flatpickr from 'flatpickr' import flatpickr from 'flatpickr'
import { German } from 'flatpickr/dist/l10n/de' import { German } from 'flatpickr/dist/l10n/de'
import FormGroup from './components/FormGroup';
export default { export default {
components: {
FormGroup
},
data () { data () {
return { return {
picker: null, picker: null,
@@ -121,7 +82,6 @@
} }
}, },
created () { created () {
this.initFormErrors();
this.loadFormOptions(); this.loadFormOptions();
this.$store.dispatch('loadAddress') this.$store.dispatch('loadAddress')
.then(() => { .then(() => {
@@ -142,19 +102,6 @@
}, },
methods: { methods: {
...mapMutations(['alert', 'beginLoading', 'endLoading']), ...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 () { loadFormOptions () {
this.beginLoading(); this.beginLoading();
return axios({ return axios({
@@ -167,7 +114,7 @@
}); });
}, },
save () { save () {
this.initFormErrors(); this.formErrors = {};
this.$store.dispatch('saveAddress', this.userData) this.$store.dispatch('saveAddress', this.userData)
.catch(error => { .catch(error => {
this.alert({ 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"> <div id="app">
<nav class="navbar navbar-default" v-if="isLoggedIn"> <nav class="navbar navbar-default" v-if="isLoggedIn">
<div class="navbar-header"> <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="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
@@ -12,11 +13,11 @@
</div> </div>
<div class="collapse navbar-collapse" id="myep-navbar"> <div class="collapse navbar-collapse" id="myep-navbar">
<ul class="nav navbar-nav"> <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: '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 }"><a>Newsletter</a></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 }"><a>Mein Profil</a></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 }"><a>Reise-Historie</a></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"><a>Teamer</a></router-link> <router-link :to="{ name: 'teamer' }" tag="li" active-class="active" :class="{ disabled: loading }" v-if="isTeamer">Teamer</router-link>
</ul> </ul>
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">
<li :class="{ disabled: loading }"><a href="#" @click.prevent="logout()">Logout</a></li> <li :class="{ disabled: loading }"><a href="#" @click.prevent="logout()">Logout</a></li>
@@ -53,8 +54,7 @@
this.$store.dispatch('logout') this.$store.dispatch('logout')
.then(() => { .then(() => {
this.$router.push({ name: 'login' }) this.$router.push({ name: 'login' })
}).catch(error => { }).catch(error => {});
});
} }
}, },
computed: { computed: {
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Registration.vue
+32 -57
View File
@@ -1,49 +1,33 @@
<template> <template>
<div class="form-wrapper form--border" id="myep-main"> <div class="form-wrapper form--border" id="myep-main">
<h1>Registrierung MyE&amp;P</h1> <h1>Registrierung MyE&amp;P</h1>
<form @submit.prevent="submit()"> <form @submit.prevent="register()">
<div class="row"> <div class="row">
<div class="col-xs-12 col-md-6"> <div class="col-xs-12 col-md-6">
<div class="form-group" :class="{'has-error': formErrors.firstName }"> <form-group label="Vorname" :error="formErrors.firstName">
<label for="firstname" class="control-label"> <input type="text" v-model="userData.firstName" class="form-control">
Vorname </form-group>
</label>
<input id="firstname" type="text" v-model="userData.firstName" class="form-control">
<span class="help-block">{{ formErrors.firstName }}</span>
</div>
</div> </div>
<div class="col-xs-12 col-md-6"> <div class="col-xs-12 col-md-6">
<div class="form-group" :class="{'has-error': formErrors.lastName }"> <form-group label="Name" :error="formErrors.lastName">
<label for="name" class="control-label"> <input type="text" v-model="userData.lastName" class="form-control">
Name </form-group>
</label>
<input id="name" type="text" v-model="userData.lastName" class="form-control">
<span class="help-block">{{ formErrors.lastName }}</span>
</div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-xs-12 col-md-6"> <div class="col-xs-12 col-md-6">
<div class="form-group" :class="{'has-error': formErrors.email }"> <form-group label="E-Mail" :error="formErrors.email">
<label for="email" class="control-label"> <input type="text" v-model="userData.email" class="form-control">
E-Mail </form-group>
</label>
<input id="email" type="text" v-model="userData.email" class="form-control">
<span class="help-block">{{ formErrors.email }}</span>
</div>
</div> </div>
<div class="col-xs-12 col-md-6"> <div class="col-xs-12 col-md-6">
<div class="form-group" :class="{'has-error': formErrors.gender }"> <form-group label="Gender" :error="formErrors.gender">
<label for="gender" class="control-label"> <select v-model="userData.gender" class="form-control">
Gender
</label>
<select id="gender" v-model="userData.gender" class="form-control">
<option value="M">M</option> <option value="M">M</option>
<option value="W">W</option> <option value="W">W</option>
<option value="D">D</option> <option value="D">D</option>
</select> </select>
<span class="help-block">{{ formErrors.gender }}</span> </form-group>
</div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
@@ -66,22 +50,28 @@
<script> <script>
import { mapState, mapMutations } from 'vuex' import { mapState, mapMutations } from 'vuex'
import FormGroup from './components/FormGroup';
export default { export default {
components: {
FormGroup
},
data () { data () {
return { return {
userData: {}, userData: {
lastName: '',
firstName: '',
email: '',
gender: 'M'
},
formErrors: {} formErrors: {}
} }
}, },
methods: { methods: {
...mapMutations(['alert']), ...mapMutations(['alert']),
submit () {
this.message = '';
this.register();
},
register () { register () {
this.initFormErrors(); this.message = '';
this.formErrors = {};
this.$store.dispatch('register', this.userData) this.$store.dispatch('register', this.userData)
.then(response => { .then(response => {
if (response.data.success) { 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.', message: 'Du erhältst in Kürze eine E-Mail mit einem Link zum (Zurück)setzen deines Passworts.',
class: 'alert-success' class: 'alert-success'
}); });
this.initFormData(); this.userData = {
this.initFormErrors(); lastName: '',
firstName: '',
email: '',
gender: 'M'
};
this.formErrors = {};
} else { } else {
this.alert({ this.alert({
message: 'Du bist bereits registriert. Bitte nutze die Passwort vergessen Funktion.', message: 'Du bist bereits registriert. Bitte nutze die Passwort vergessen Funktion.',
@@ -103,28 +98,8 @@
this.formErrors[violation.property_path] = violation.message; 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: { computed: {
...mapState(['loading']) ...mapState(['loading'])
} }
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Teamer.vue
+16 -23
View File
@@ -36,28 +36,19 @@
</label> </label>
</div> </div>
</div> </div>
<div class="form-group"> <form-group label="Status">
<label for="status" class="control-label">
Status:
</label>
<select id="status" v-model="userData.seniority" class="form-control"> <select id="status" v-model="userData.seniority" class="form-control">
<option v-for="status in this.status" :value="status.value">{{ status.label }}</option> <option v-for="status in this.status" :value="status.value">{{ status.label }}</option>
</select> </select>
</div> </form-group>
<div class="form-group"> <form-group label="Jackengröße">
<label for="jacketsize" class="control-label"> <select v-model="userData.jacketSize" class="form-control">
Jackengröße:
</label>
<select id="jacketsize" v-model="userData.jacketSize" class="form-control">
<option v-for="size of this.sizes" :value="size">{{ size }}</option> <option v-for="size of this.sizes" :value="size">{{ size }}</option>
</select> </select>
</div> </form-group>
<div class="form-group"> <form-group label="Wünsche">
<label for="jacketsize" class="control-label">
Wünsche:
</label>
<textarea class="xxlarge form-control" cols="30" rows="3" v-model="userData.notes"></textarea> <textarea class="xxlarge form-control" cols="30" rows="3" v-model="userData.notes"></textarea>
</div> </form-group>
</div> </div>
<div class="col-xs-12 col-md-6"> <div class="col-xs-12 col-md-6">
<h4>Verfügbarkeiten</h4> <h4>Verfügbarkeiten</h4>
@@ -69,13 +60,9 @@
{{ timeFrame | period }} {{ timeFrame | period }}
</label> </label>
</div> </div>
<div class="checkbox"> <form-checkbox :value.sync="userData.monthLong">
<label> Ich habe Zeit und würde gerne über einen Monat am Stück in eine Destination.
<input type="checkbox" class="form-control" v-model="userData.monthLong"/> </form-checkbox>
<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>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
@@ -96,8 +83,14 @@
import axios from 'axios' import axios from 'axios'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import 'dayjs/locale/de' import 'dayjs/locale/de'
import FormGroup from './components/FormGroup';
import FormCheckbox from './components/FormCheckbox';
export default { export default {
components: {
FormGroup,
FormCheckbox
},
data () { data () {
return { return {
sizes: [ 'S', 'M', 'L', 'XL', 'XXL' ], 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>