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

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,11 +23,12 @@
<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">
<div>
<q-input v-show="!boolAlreadyInTeam" lazy-rules outlined filled stack-label v-model="newTeamName" <q-input v-show="!boolAlreadyInTeam" lazy-rules outlined filled stack-label v-model="newTeamName"
type="text" type="text"
label="Teamname eingeben" label="Teamname eingeben"
@ -41,6 +42,9 @@
@click="createTeam()" @click="createTeam()"
unelevated 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,6 +122,7 @@
type="submit"/> type="submit"/>
</div> </div>
<br/> <br/>
<div align="center">
<q-input v-show="inviteActivated" lazy-rules outlined filled stack-label v-model="inviteMail" <q-input v-show="inviteActivated" lazy-rules outlined filled stack-label v-model="inviteMail"
type="text" label="Email des Nutzers" type="text" label="Email des Nutzers"
:rules="[val=>validateEmail(val)||'Bitte Email verwenden']"/> :rules="[val=>validateEmail(val)||'Bitte Email verwenden']"/>
@ -125,6 +132,7 @@
:disabled="!teamInviteChecked" :disabled="!teamInviteChecked"
color="positive" color="positive"
type="submit"/> 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,7 +302,14 @@
this.handleError(error); this.handleError(error);
}) })
}, },
async updateTeamData() {
await this.getTeamData();
this.boolTable = false;
this.boolTable = await this.fetchTeamMembers();
await this.fetchTeamInvites();
},
getTeamData() { getTeamData() {
return new Promise(resolve => {
let token; let token;
if (localStorage.getItem('userToken')) { if (localStorage.getItem('userToken')) {
token = JSON.parse(localStorage.getItem('userToken')).token; token = JSON.parse(localStorage.getItem('userToken')).token;
@ -301,17 +323,17 @@
this.teamName = "Aktuell in keinem Team"; this.teamName = "Aktuell in keinem Team";
this.currentTeamStatus = ""; this.currentTeamStatus = "";
this.teamRanking = "-"; this.teamRanking = "-";
this.dropDownSelectItem('Offene Teameinladungen');
} 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,34 +367,38 @@
.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() {
return new Promise(resolve => {
this.teamData = []; this.teamData = [];
let name = this.teamName; let name = this.teamName;
this.$axios.get('/api/getTeamMembers', {params: {name}}) this.$axios.get('/api/getTeamMembers', {params: {name}})
.then((response) => { .then(async (response) => {
console.log(response.data); console.log(response.data);
this.teamMembers = response.data; this.teamMembers = response.data;
for (var i = 0; i < this.teamMembers.length; i++) { for (var i = 0; i < this.teamMembers.length; i++) {
let member = {}; let member = {};
member.name = this.teamMembers[i].username; member.name = this.teamMembers[i].username;
member.email = this.teamMembers[i].email; member.email = this.teamMembers[i].email;
this.getMemberRanking(member, member.email); await this.getMemberRanking(member, member.email);
this.teamData.push(member); this.teamData.push(member);
} }
}).catch((error) => { }).catch((error) => {
this.handleError(error); this.handleError(error);
}).finally(() => resolve(true))
}) })
}, },
getMemberRanking(member, email) { getMemberRanking(member, email) {
return new Promise(resolve => {
this.updateTable();
let ranking; let ranking;
this.$axios.get('/api/getRankingPlace', {params: {email}}) this.$axios.get('/api/getRankingPlace', {params: {email}})
.then((response) => { .then((response) => {
@ -379,9 +406,11 @@
member.ranking = ranking; member.ranking = ranking;
}).catch((error) => { }).catch((error) => {
this.handleError(error); this.handleError(error);
}); }).finally(() => resolve(true))
})
}, },
fetchTeamInvites() { fetchTeamInvites() {
return new Promise(resolve => {
let token; let token;
if (localStorage.getItem('userToken')) { if (localStorage.getItem('userToken')) {
token = JSON.parse(localStorage.getItem('userToken')).token; token = JSON.parse(localStorage.getItem('userToken')).token;
@ -394,6 +423,7 @@
console.log(this.teamInvites); console.log(this.teamInvites);
}).catch((error) => { }).catch((error) => {
this.handleError(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);
}) })

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>