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

bugfixes

Browse Source
This commit is contained in:
rchrist 2019-05-14 14:12:10 +02:00
parent 93174fa788
commit adad85d4d0
2 changed files with 126 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,7 +12,7 @@
switch-indicator switch-indicator
> >
<q-tab name="profile" label="Profil" icon="perm_identity"/> <q-tab name="profile" label="Profil" icon="perm_identity"/>
<q-tab name="teams" label="Team" icon="group"/> <q-tab v-if="boolAlreadyInTeam" name="teams" label="Team" icon="group"/>
</q-tabs> </q-tabs>
<q-separator color="grey-4"/> <q-separator color="grey-4"/>
</div> </div>
@ -23,24 +23,28 @@
<q-tab-panel name="profile" class="fit q-pa-none"> <q-tab-panel name="profile" class="fit q-pa-none">
<div class="bg-primary q-pa-md"> <div class="bg-primary q-pa-md">
<p class="text-h3 text-white"> {{userName}} </p> <p class="text-h3 text-white"> {{userName}} </p>
<p class="text-white"> {{email}} </p> <p class="text-white"> Meine Email: {{email}} </p>
<p class="text-white"> Mein Rang: {{userRanking}} </p> <p class="text-white"> Mein Rang: {{userRanking}} </p>
<p class="text-white"> Mein Team: {{teamName}} </p> <p class="text-white"> Mein Team: {{teamName}} </p>
</div> </div>
<div class="q-pa-md"> <div class="q-pa-md">
<q-input v-show="!boolAlreadyInTeam" lazy-rules outlined filled stack-label v-model="newTeamName" <div>
type="text" <q-input v-show="!boolAlreadyInTeam" lazy-rules outlined filled stack-label v-model="newTeamName"
label="Teamname eingeben" type="text"
:rules="[val=>val.length>=2||'Name muss mindestens 5 Zeichen lang sein!']"/> label="Teamname eingeben"
<q-btn :rules="[val=>val.length>=2||'Name muss mindestens 5 Zeichen lang sein!']"/>
v-show="!boolAlreadyInTeam" <q-btn
:disabled="!newTeamNameValidationSuccesful" v-show="!boolAlreadyInTeam"
label="Team anlegen" :disabled="!newTeamNameValidationSuccesful"
color="primary" label="Team anlegen"
class="full-width" color="primary"
@click="createTeam()" class="full-width"
unelevated @click="createTeam()"
/> unelevated
/>
</div>
<br/>
<p class="text-h5" v-show="!boolAlreadyInTeam"> Teameinladungen </p>
<q-list> <q-list>
<q-card class="q-mb-md" v-for="teamInvite in teamInvites" :key="teamInvite.id"> <q-card class="q-mb-md" v-for="teamInvite in teamInvites" :key="teamInvite.id">
<q-expansion-item <q-expansion-item
@ -62,19 +66,20 @@
</q-card> </q-card>
</q-list> </q-list>
<div align="center"> <div align="center">
<q-btn label="Team verlassen" <q-btn v-show="boolAlreadyInTeam"
label="Team verlassen"
@click="confirmLeave()" @click="confirmLeave()"
color="negative" color="negative"
type="submit"/> type="submit"/>
</div> </div>
</div> </div>
</q-tab-panel> </q-tab-panel>
<q-tab-panel name="teams" class="q-pa-none"> <q-tab-panel v-if="boolAlreadyInTeam" name="teams" class="q-pa-none">
<div class="bg-primary q-pa-md"> <div class="bg-primary q-pa-md" v-show="boolAlreadyInTeam">
<p class="text-h3 text-white"> {{teamName}} </p> <p class="text-h3 text-white"> {{teamName}} </p>
<p class="text-white"> Unser Rang: {{teamRanking}} </p> <p class="text-white"> Unser Rang: {{teamRanking}} </p>
<p v-show="!boolStatus" class="text-white"> <p v-show="!boolStatus" class="text-white">
{{currentTeamStatus}} Unser Status: {{currentTeamStatus}}
<q-btn icon="create" <q-btn icon="create"
class="on-right" class="on-right"
@click="updateStatus()" @click="updateStatus()"
@ -97,9 +102,10 @@
type="submit"/> type="submit"/>
</div> </div>
</div> </div>
<div class="bg-white q-pa-md"> <div class="bg-white q-pa-md" v-show="boolAlreadyInTeam">
<p class="text-h5"> Teammitglieder </p> <p class="text-h5"> Teammitglieder </p>
<q-table <q-table
v-if="boolTable"
name="teamDataTable" name="teamDataTable"
:data="teamData" :data="teamData"
:columns="teamColumns" :columns="teamColumns"
@ -116,15 +122,17 @@
type="submit"/> type="submit"/>
</div> </div>
<br/> <br/>
<q-input v-show="inviteActivated" lazy-rules outlined filled stack-label v-model="inviteMail" <div align="center">
type="text" label="Email des Nutzers" <q-input v-show="inviteActivated" lazy-rules outlined filled stack-label v-model="inviteMail"
:rules="[val=>validateEmail(val)||'Bitte Email verwenden']"/> type="text" label="Email des Nutzers"
<q-btn v-show="inviteActivated" :rules="[val=>validateEmail(val)||'Bitte Email verwenden']"/>
icon="arrow_right_alt" <q-btn v-show="inviteActivated"
@click="sendTeamInvite()" icon="arrow_right_alt"
:disabled="!teamInviteChecked" @click="sendTeamInvite()"
color="positive" :disabled="!teamInviteChecked"
type="submit"/> color="positive"
type="submit"/>
</div>
<br/> <br/>
<div align="center"> <div align="center">
<q-btn label="Team verlassen" <q-btn label="Team verlassen"
@ -177,6 +185,7 @@
teamInvites: [], teamInvites: [],
inviteActivated: false, inviteActivated: false,
boolStatus: false, boolStatus: false,
boolTable: true,
boolMemberTableUpdating: false, boolMemberTableUpdating: false,
teamColumns: [ teamColumns: [
{ {
@ -242,8 +251,7 @@
this.userName = JSON.parse(localStorage.getItem('userToken')).name; this.userName = JSON.parse(localStorage.getItem('userToken')).name;
this.email = JSON.parse(localStorage.getItem('userMail')); this.email = JSON.parse(localStorage.getItem('userMail'));
this.getPersonalRanking(); this.getPersonalRanking();
this.getTeamData(); this.updateTeamData();
this.fetchTeamInvites();
}, },
methods: { methods: {
confirmLeave() { confirmLeave() {
@ -274,6 +282,13 @@
this.boolStatus = true; this.boolStatus = true;
} }
}, },
updateTable() {
if (this.boolTable) {
this.boolTable = false;
} else {
this.boolTable = true;
}
},
validateEmail(email) { validateEmail(email) {
let re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; let re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase()); return re.test(String(email).toLowerCase());
@ -287,31 +302,38 @@
this.handleError(error); this.handleError(error);
}) })
}, },
async updateTeamData() {
await this.getTeamData();
this.boolTable = false;
this.boolTable = await this.fetchTeamMembers();
await this.fetchTeamInvites();
},
getTeamData() { getTeamData() {
let token; return new Promise(resolve => {
if (localStorage.getItem('userToken')) { let token;
token = JSON.parse(localStorage.getItem('userToken')).token; if (localStorage.getItem('userToken')) {
} else { token = JSON.parse(localStorage.getItem('userToken')).token;
return; } else {
} return;
this.$axios.get('/api/getTeamOfUser', {params: {token}}) }
.then(response => { this.$axios.get('/api/getTeamOfUser', {params: {token}})
if (response.data === '') { .then(response => {
this.boolAlreadyInTeam = false; if (response.data === '') {
this.teamName = "Aktuell in keinem Team"; this.boolAlreadyInTeam = false;
this.currentTeamStatus = ""; this.teamName = "Aktuell in keinem Team";
this.teamRanking = "-"; this.currentTeamStatus = "";
this.dropDownSelectItem('Offene Teameinladungen'); this.teamRanking = "-";
} else { } else {
this.boolAlreadyInTeam = true; this.boolAlreadyInTeam = true;
this.teamName = response.data.name; this.teamName = response.data.name;
this.currentTeamStatus = response.data.teamStatus; this.currentTeamStatus = response.data.teamStatus;
this.fetchTeamMembers(); this.teamRanking = "-";
} }
console.log("getTeam: " + response); console.log("getTeam: " + response);
}).catch((error) => { }).catch((error) => {
this.handleError(error); this.handleError(error);
}); }).finally(() => resolve(true));
})
}, },
createTeam() { createTeam() {
let params = {}; let params = {};
@ -329,6 +351,7 @@
title: "Teamerstellung", title: "Teamerstellung",
color: "blue" color: "blue"
}); });
this.updateTeamData();
}).catch((error) => { }).catch((error) => {
this.handleError(error); this.handleError(error);
}) })
@ -344,56 +367,63 @@
.then((response) => { .then((response) => {
console.log("createTeam: " + response); console.log("createTeam: " + response);
this.$store.commit('dialog/NEW_MESSAGE_DIALOG', { this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {
message: "Dus hast das Team " + this.teamName + " verlassen!", message: "Du hast das Team " + this.teamName + " verlassen!",
title: "Team verlassen", title: "Team verlassen",
color: "blue" color: "blue"
}); });
this.getTeamData(); this.updateTeamData();
}).catch((error) => { }).catch((error) => {
this.handleError(error); this.handleError(error);
}) })
}, },
fetchTeamMembers() { fetchTeamMembers() {
this.teamData = []; return new Promise(resolve => {
let name = this.teamName; this.teamData = [];
this.$axios.get('/api/getTeamMembers', {params: {name}}) let name = this.teamName;
.then((response) => { this.$axios.get('/api/getTeamMembers', {params: {name}})
console.log(response.data); .then(async (response) => {
this.teamMembers = response.data; console.log(response.data);
for (var i = 0; i < this.teamMembers.length; i++) { this.teamMembers = response.data;
let member = {}; for (var i = 0; i < this.teamMembers.length; i++) {
member.name = this.teamMembers[i].username; let member = {};
member.email = this.teamMembers[i].email; member.name = this.teamMembers[i].username;
this.getMemberRanking(member, member.email); member.email = this.teamMembers[i].email;
this.teamData.push(member); await this.getMemberRanking(member, member.email);
} this.teamData.push(member);
}).catch((error) => { }
this.handleError(error); }).catch((error) => {
this.handleError(error);
}).finally(() => resolve(true))
}) })
}, },
getMemberRanking(member, email) { getMemberRanking(member, email) {
let ranking; return new Promise(resolve => {
this.$axios.get('/api/getRankingPlace', {params: {email}}) this.updateTable();
.then((response) => { let ranking;
ranking = response.data; this.$axios.get('/api/getRankingPlace', {params: {email}})
member.ranking = ranking; .then((response) => {
}).catch((error) => { ranking = response.data;
this.handleError(error); member.ranking = ranking;
}); }).catch((error) => {
this.handleError(error);
}).finally(() => resolve(true))
})
}, },
fetchTeamInvites() { fetchTeamInvites() {
let token; return new Promise(resolve => {
if (localStorage.getItem('userToken')) { let token;
token = JSON.parse(localStorage.getItem('userToken')).token; if (localStorage.getItem('userToken')) {
} else { token = JSON.parse(localStorage.getItem('userToken')).token;
return; } else {
} return;
this.$axios.get('/api/getMyTeamInvites', {params: {token}}) }
.then((response) => { this.$axios.get('/api/getMyTeamInvites', {params: {token}})
this.teamInvites = response.data; .then((response) => {
console.log(this.teamInvites); this.teamInvites = response.data;
}).catch((error) => { console.log(this.teamInvites);
this.handleError(error); }).catch((error) => {
this.handleError(error);
}).finally(() => resolve(true))
}) })
}, },
joinTeam(teamInvite) { joinTeam(teamInvite) {
@ -412,7 +442,7 @@
title: "Teambeitrittsanfrage", title: "Teambeitrittsanfrage",
color: "blue" color: "blue"
}); });
this.getTeamData(); this.updateTeamData();
}).catch((error) => { }).catch((error) => {
this.handleError(error); this.handleError(error);
}) })
@ -432,7 +462,7 @@
title: "Teambeitrittsanfrage", title: "Teambeitrittsanfrage",
color: "blue" color: "blue"
}); });
this.getTeamData(); this.updateTeamData();
}).catch((error) => { }).catch((error) => {
this.handleError(error); this.handleError(error);
}) })
@ -466,7 +496,7 @@
params.teamStatus = this.teamStatus; params.teamStatus = this.teamStatus;
this.$axios.put('/api/setTeamStatus', null, {params}) this.$axios.put('/api/setTeamStatus', null, {params})
.then((response) => { .then((response) => {
this.getTeamData(); this.updateTeamData();
}).catch((error) => { }).catch((error) => {
this.handleError(error); this.handleError(error);
}) })

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

@ -6,7 +6,7 @@
<div class="col"> <div class="col">
<div class=""> <div class="">
<div class="" style="max-width: 440px"> <div class="" style="max-width: 440px">
<q-input lazy-rules outlined filled stack-label v-model="user.name" type="text" label="Benutzername" <q-input lazy-rules outlined filled stack-label v-model="user.name" type="text" label="Name"
:rules="[val=>val.length>=2||'Name muss mindestens 2 Zeichen lang sein!']"/> :rules="[val=>val.length>=2||'Name muss mindestens 2 Zeichen lang sein!']"/>
</div> </div>
</div> </div>