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

View File

@ -6,7 +6,7 @@
<div class="col">
<div class="">
<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!']"/>
</div>
</div>