tvolkmann/labswp_2019_sose_geocaching
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

some work at profile component

Browse Source
This commit is contained in:
rchrist 2019-05-06 17:46:26 +02:00
parent e76581f128
commit 52b04a90a2
2 changed files with 119 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
frontend/src/pages/Profile.vue
View File

@ -61,35 +61,45 @@
</q-list> </q-list>
</q-btn-dropdown> </q-btn-dropdown>
</div> </div>
<p class="text-h5"> Teammitglieder </p> <div v-show="boolMyTeam">
<q-table <p class="text-h5"> Teammitglieder </p>
:data="teamData" <q-table
:columns="teamColumns" :data="teamData"
row-key="name" :columns="teamColumns"
table-class="my-custom" row-key="name"
hide-bottom table-class="my-custom"
:pagination.sync="pagination" hide-bottom
/> :pagination.sync="pagination"
<br/> />
<p class="text-h5"> Einladungen </p> <br/>
<q-input outlined filled stack-label v-model="inviteMail" <p class="text-h5"> Einladungen </p>
type="text" label="Email des Nutzers" <q-input outlined filled stack-label v-model="inviteMail"
:rules="[val=>validateEmail(val)||'Bitte Email verwenden']"/> type="text" label="Email des Nutzers"
<div align="center"> :rules="[val=>validateEmail(val)||'Bitte Email verwenden']"/>
<q-btn label="Einladung versenden" <div align="center">
color="primary" <q-btn label="Einladung versenden"
type="submit"/> color="primary"
type="submit"/>
</div>
<br/>
<p class="text-h5"> Teamstatus </p>
<p>{{currentTeamStatus}}</p>
<q-input outlined filled stack-label v-model="teamStatus"
type="text" label="Neuer Teamstatus"
:rules="[val=>val.length<=160||'Status zu lang!']"/>
<div align="center">
<q-btn label="Teamstatus aktualisieren"
color="primary"
type="submit"/>
</div>
</div> </div>
<br/> <div v-show="boolInvites">
<p class="text-h5"> Teamstatus </p>
<p>{{currentTeamStatus}}</p> </div>
<q-input outlined filled stack-label v-model="teamStatus" <div v-show="boolCreateTeam">
type="text" label="Neuer Teamstatus" <q-input outlined filled stack-label v-model="newTeamName" type="text"
:rules="[val=>val.length<=160||'Status zu lang!']"/> label="Teamname eingeben"
<div align="center"> :rules="[val=>val.length>=2||'Name muss mindestens 5 Zeichen lang sein!']"/>
<q-btn label="Teamstatus aktualisieren"
color="primary"
type="submit"/>
</div> </div>
</q-tab-panel> </q-tab-panel>
@ -119,7 +129,6 @@
data() { data() {
return { return {
tab: 'profile', tab: 'profile',
startedCaches: [],
inviteMail: "", inviteMail: "",
currentTeamStatus: "Dienstag 15:00 Treffen zum Blumencache", currentTeamStatus: "Dienstag 15:00 Treffen zum Blumencache",
teamStatus: "", teamStatus: "",
@ -129,6 +138,10 @@
teamName: null, teamName: null,
teamRanking: null, teamRanking: null,
dropDownSelectedItem: null, dropDownSelectedItem: null,
boolMyTeam: true,
boolInvites: false,
boolCreateTeam: false,
newTeamName: "",
columns: [ columns: [
{ {
name: 'desc', name: 'desc',
@ -233,12 +246,12 @@
this.data[0].userData = this.userName; this.data[0].userData = this.userName;
this.email = JSON.parse(localStorage.getItem('userMail')); this.email = JSON.parse(localStorage.getItem('userMail'));
this.data[1].userData = this.email; this.data[1].userData = this.email;
this.getPersonalRanking(); this.userRanking = 1234;
this.data[2].userData = this.userRanking; this.data[2].userData = this.userRanking;
this.teamName = "BuGa19Community"; this.teamName = "BuGa19Community";
this.data[3].userData = this.teamName; this.data[3].userData = this.teamName;
this.dropDownSelectedItem = this.teamName; this.dropDownSelectedItem = this.teamName;
this.teamRanking = "2019"; this.teamRanking = 2019;
this.data[4].userData = this.teamRanking; this.data[4].userData = this.teamRanking;
}, },
methods: { methods: {
@ -248,7 +261,7 @@
}, },
getPersonalRanking() { getPersonalRanking() {
const token = JSON.parse(localStorage.getItem('userToken')).token; const token = JSON.parse(localStorage.getItem('userToken')).token;
this.$axios.get('/api/getRankingPlace', {params: {token}}) this.$axios.get('/api/getRankingPlace', {token})
.then((response) => { .then((response) => {
this.userRanking = response.data; this.userRanking = response.data;
console.log(response.data); console.log(response.data);
@ -308,8 +321,19 @@
dropDownSelectItem(item) { dropDownSelectItem(item) {
if (item === 'team') { if (item === 'team') {
this.dropDownSelectedItem = this.teamName; this.dropDownSelectedItem = this.teamName;
this.boolMyTeam = true;
this.boolInvites = false;
this.boolCreateTeam = false;
} else if (item === 'Offene Teameinladungen') {
this.dropDownSelectedItem = item;
this.boolMyTeam = false;
this.boolInvites = true;
this.boolCreateTeam = false;
} else { } else {
this.dropDownSelectedItem = item; this.dropDownSelectedItem = item;
this.boolMyTeam = false;
this.boolInvites = false;
this.boolCreateTeam = true;
} }
}, },
} }

120
frontend/src/pages/Register.vue
View File

@ -7,57 +7,62 @@
<div class=""> <div class="">
<div class="" style="max-width: 440px"> <div class="" style="max-width: 440px">
<q-input outlined filled stack-label v-model="user.name" type="text" <q-input outlined filled stack-label v-model="user.name" type="text"
label="Nutzername eingeben" :rules="[val=>val.length>=2||'Name muss mindestens 2 Zeichen lang sein!']"/> label="Nutzername eingeben"
:rules="[val=>val.length>=2||'Name muss mindestens 2 Zeichen lang sein!']"/>
</div> </div>
</div> </div>
</div> </div>
<div class="col"> <div class="col">
<div class=""> <div class="">
<div class="" style="max-width: 440px"> <div class="" style="max-width: 440px">
<q-input outlined filled stack-label v-model="user.email" type="text" label="Email eingeben" :rules="[val=>validateEmail(val)||'Email muss valide sein']"/> <q-input outlined filled stack-label v-model="user.email" type="text" label="Email eingeben"
</div> :rules="[val=>validateEmail(val)||'Email muss valide sein']"/>
</div> </div>
</div> </div>
<div class="col"> </div>
<div class=""> <div class="col">
<div class="" style="max-width: 440px"> <div class="">
<q-input outlined filled stack-label v-model="user.checkemail" type="text" <div class="" style="max-width: 440px">
label="Email erneut eingeben" placeholer="Email" :rules="[val=>val===user.email||'Email stimmt nicht überein']"/> <q-input outlined filled stack-label v-model="user.checkemail" type="text"
</div> label="Email erneut eingeben" placeholer="Email"
:rules="[val=>val===user.email||'Email stimmt nicht überein']"/>
</div> </div>
</div> </div>
<div class="col"> </div>
<div class=""> <div class="col">
<div class="" style="max-width: 440px"> <div class="">
<q-input outlined filled stack-label v-model="user.password" type="password" <div class="" style="max-width: 440px">
label="Passwort eingeben" :rules="[val=>val.length>=8||'Passwort muss mindestens 8 Zeichen lang sein!']"/> <q-input outlined filled stack-label v-model="user.password" type="password"
</div> label="Passwort eingeben"
:rules="[val=>val.length>=8||'Passwort muss mindestens 8 Zeichen lang sein!']"/>
</div> </div>
</div> </div>
<div class="col"> </div>
<div class=""> <div class="col">
<div class="" style="max-width: 440px"> <div class="">
<q-input outlined filled stack-label v-model="user.checkpassword" type="password" <div class="" style="max-width: 440px">
label="Passwort erneut eingeben" :rules="[val=>val===user.password||'Passwort stimmt nicht überein']"/> <q-input outlined filled stack-label v-model="user.checkpassword" type="password"
</div> label="Passwort erneut eingeben"
:rules="[val=>val===user.password||'Passwort stimmt nicht überein']"/>
</div> </div>
</div> </div>
<div class="col"> </div>
<div class=""> <div class="col">
<div class="" style="max-width: 440px"> <div class="">
<q-btn <div class="" style="max-width: 440px">
:disabled="!validationSuccesful" <q-btn
label="Registrieren" :disabled="!validationSuccesful"
color="primary" label="Registrieren"
class="full-width" color="primary"
@click="register()" class="full-width"
unelevated @click="register()"
/> unelevated
</div> />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</form> </form>
</div> </div>
</template> </template>
@ -65,23 +70,23 @@
<script> <script>
export default { export default {
data() { data() {
return{ return {
user: { user: {
name:"", name: "",
email:"", email: "",
checkemail:"", checkemail: "",
password: "", password: "",
checkpassword: "", checkpassword: "",
}, },
} }
}, },
computed: { computed: {
validationSuccesful(){ validationSuccesful() {
if(this.user.name.length>=2 if (this.user.name.length >= 2
&&this.validateEmail(this.user.email) && this.validateEmail(this.user.email)
&&this.user.email===this.user.checkemail && this.user.email === this.user.checkemail
&&this.user.password.length>=8 && this.user.password.length >= 8
&&this.user.password===this.user.checkpassword){ && this.user.password === this.user.checkpassword) {
return true; return true;
} }
return false; return false;
@ -97,7 +102,7 @@
}, },
register: function () { register: function () {
if(this.user.email===this.user.checkemail&&this.user.password===this.user.checkpassword){ if (this.user.email === this.user.checkemail && this.user.password === this.user.checkpassword) {
const data = { const data = {
name: this.user.name, name: this.user.name,
password: this.user.password, password: this.user.password,
@ -109,18 +114,19 @@
} }
] ]
}; };
console.log("POST /api/register/ - json: " + JSON.stringify(data));
const token = JSON.parse(localStorage.getItem('registerToken')).token; const token = JSON.parse(localStorage.getItem('registerToken')).token;
this.$axios.post(process.env.USER_API+'/account/register', data,{ this.$axios.post(process.env.USER_API + '/account/register', data, {
headers: { headers: {
'Authorization': 'Bearer ' + token, 'Authorization': 'Bearer ' + token,
} }
}) })
.then((response) => { .then((response) => {
console.log(response.data); if (response.status === 201) {
if(response.status === 201){ this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {
this.$store.commit('dialog/NEW_MESSAGE_DIALOG', { message: "Deine Registrierung war erfolgreich!", title: "Registrierungsprozess", color: "blue"}); message: "Deine Registrierung war erfolgreich!",
title: "Registrierungsprozess",
color: "blue"
});
} }
}) })
.catch((error) => { .catch((error) => {
@ -147,12 +153,12 @@
}) })
} else { } else {
if(this.user.email!=this.user.checkemail) { if (this.user.email != this.user.checkemail) {
this.$store.commit('dialog/NEW_MESSAGE_DIALOG', { this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {
message: "Email stimmt nicht überein", message: "Email stimmt nicht überein",
title: "Fehler", title: "Fehler",
}); });
} else if (this.user.password!=this.user.checkpassword){ } else if (this.user.password != this.user.checkpassword) {
this.$store.commit('dialog/NEW_MESSAGE_DIALOG', { this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {
message: "Passwort stimmt nicht überein", message: "Passwort stimmt nicht überein",
title: "Fehler", title: "Fehler",
@ -169,7 +175,7 @@
console.log("GET /api/login/ - json: " + JSON.stringify(logindata)); console.log("GET /api/login/ - json: " + JSON.stringify(logindata));
this.$axios.post(process.env.USER_API+'/account/login', logindata) this.$axios.post(process.env.USER_API + '/account/login', logindata)
.then((response) => { .then((response) => {
localStorage.setItem('registerToken', JSON.stringify(response.data)); localStorage.setItem('registerToken', JSON.stringify(response.data));
}) })
@ -193,7 +199,7 @@
message = error.message; message = error.message;
} }
console.log(error.config); console.log(error.config);
this.$store.commit('dialog/NEW_MESSAGE_DIALOG', { message: message, title: header, }); this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: message, title: header,});
}) })
}, },
}, },