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

reworked design of profile and team site

Browse Source
This commit is contained in:
rchrist 2019-05-14 12:14:36 +02:00
parent 79ca7f53e9
commit 08c933976f
1 changed files with 143 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,124 +20,120 @@
<div class="col flex column"> <div class="col flex column">
<q-tab-panels v-model="tab" animated swipeable class="col"> <q-tab-panels v-model="tab" animated swipeable class="col">
<q-tab-panel name="profile" class=" fit"> <q-tab-panel name="profile" class="fit q-pa-none">
<p class="text-h5"> Persönliche Daten </p> <div class="bg-primary q-pa-md">
<q-table <p class="text-h3 text-white"> {{userName}} </p>
:data="data" <p class="text-white"> {{email}} </p>
:columns="columns" <p class="text-white"> Mein Rang: {{userRanking}} </p>
row-key="name" <p class="text-white"> Mein Team: {{teamName}} </p>
hide-header </div>
hide-bottom <div class="q-pa-md">
table-class="my-custom" <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
/>
<q-list>
<q-card class="q-mb-md" v-for="teamInvite in teamInvites" :key="teamInvite.id">
<q-expansion-item
class=""
expand-icon-toggle
expand-separator
icon="group"
:label="teamInvite.team.name"
:caption="teamInvite.team.teamStatus"
>
<q-item class="q-pr-sm reverse q-gutter-x-sm">
<q-btn :disabled="boolAlreadyInTeam" @click="joinTeam(teamInvite)" unelevated color="positive" stack
icon="arrow_forward"
label="Annehmen" size="sm"/>
<q-btn @click="deleteTeamInvite(teamInvite)" unelevated color="negative" stack icon="delete"
label="Ablehnen" size="sm"/>
</q-item>
</q-expansion-item>
</q-card>
</q-list>
<div align="center">
<q-btn label="Team verlassen"
@click="confirmLeave()"
color="negative"
type="submit"/>
</div>
</div>
</q-tab-panel> </q-tab-panel>
<q-tab-panel name="teams"> <q-tab-panel name="teams" class="q-pa-none">
<div class="q-pa-md" align="center"> <div class="bg-primary q-pa-md">
<q-btn-dropdown color="primary" :label="dropDownSelectedItem" size="20px"> <p class="text-h3 text-white"> {{teamName}} </p>
<q-list> <p class="text-white"> Unser Rang: {{teamRanking}} </p>
<q-item :clickable="boolAlreadyInTeam" v-close-popup @click="dropDownSelectItem('team')" <p v-show="!boolStatus" class="text-white">
:disabled="!boolAlreadyInTeam"> {{currentTeamStatus}}
<q-item-section> <q-btn icon="create"
<q-item-label v-html="teamName"></q-item-label> class="on-right"
</q-item-section> @click="updateStatus()"
</q-item> color="amber"/>
</p>
<q-item clickable v-close-popup @click="dropDownSelectItem('Offene Teameinladungen')"> <q-input v-show="boolStatus" lazy-rules outlined filled stack-label v-model="teamStatus"
<q-item-section avatar> type="text" label="Neuer Teamstatus" bg-color="white"
<q-avatar icon="group_add" color="primary" text-color="white"/> :rules="[val=>val.length<=160||'Status zu lang!']"/>
</q-item-section> <div v-show="boolStatus" align="center">
<q-item-section> <q-btn icon="done"
<q-item-label>Offene Teameinladungen</q-item-label> class="on-left"
</q-item-section> :disabled="!teamStatusChecked"
</q-item> @click="setTeamStatus()"
color="positive"
<q-item :clickable="!boolAlreadyInTeam" v-close-popup :disabled="boolAlreadyInTeam" type="submit"/>
@click="dropDownSelectItem('Neues Team erstellen')"> <q-btn icon="clear"
<q-item-section avatar> class="on-right"
<q-avatar icon="add" color="primary" text-color="white"/> @click="updateStatus()"
</q-item-section> color="negative"
<q-item-section> type="submit"/>
<q-item-label v-show="!boolAlreadyInTeam">Neues Team erstellen</q-item-label> </div>
<q-item-label v-show="boolAlreadyInTeam">Neues Team erstellen<br/>(Team verlassen um Option zu
nutzen)
</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
</div> </div>
<p class="text-h5"> Teamstatus </p> <div class="bg-white q-pa-md">
<p>{{currentTeamStatus}}</p> <p class="text-h5"> Teammitglieder </p>
<q-input lazy-rules outlined filled stack-label v-model="teamStatus" <q-table
type="text" label="Neuer Teamstatus" name="teamDataTable"
:rules="[val=>val.length<=160||'Status zu lang!']"/> :data="teamData"
<div align="center"> :columns="teamColumns"
<q-btn label="Teamstatus aktualisieren" row-key="name"
:disabled="!teamStatusChecked" table-class="my-custom"
@click="setTeamStatus()" hide-bottom
color="primary" :pagination.sync="pagination"
type="submit"/> />
</div> <br/>
<br/> <div align="center">
<p class="text-h5"> Teammitglieder </p> <q-btn label="Nutzer einladen"
<q-table @click="activateInvite()"
:data="teamData" color="primary"
:columns="teamColumns" type="submit"/>
row-key="name" </div>
table-class="my-custom" <br/>
hide-bottom <q-input v-show="inviteActivated" lazy-rules outlined filled stack-label v-model="inviteMail"
:pagination.sync="pagination" type="text" label="Email des Nutzers"
/> :rules="[val=>validateEmail(val)||'Bitte Email verwenden']"/>
<br/> <q-btn v-show="inviteActivated"
<p class="text-h5"> Einladungen </p> icon="arrow_right_alt"
<q-input lazy-rules outlined filled stack-label v-model="inviteMail"
type="text" label="Email des Nutzers"
:rules="[val=>validateEmail(val)||'Bitte Email verwenden']"/>
<div align="center">
<q-btn label="Einladung versenden"
@click="sendTeamInvite()" @click="sendTeamInvite()"
:disabled="!teamInviteChecked" :disabled="!teamInviteChecked"
color="primary" color="positive"
type="submit"/> type="submit"/>
<br/>
<div align="center">
<q-btn label="Team verlassen"
@click="confirmLeave()"
color="negative"
type="submit"/>
</div>
<br/>
</div> </div>
<br/>
<div align="center">
<q-btn label="Team verlassen"
:disabled="!leaveConfirmed"
@click="leaveTeam()"
color="negative"
type="submit"/>
</div>
<q-list>
<q-card class="q-mb-md" v-for="teamInvite in teamInvites" :key="teamInvite.id">
<q-expansion-item
class=""
expand-icon-toggle
expand-separator
icon="group"
:label="teamInvite.team.name"
:caption="teamInvite.team.teamStatus"
>
<q-item class="q-pr-sm reverse q-gutter-x-sm">
<q-btn @click="joinTeam(teamInvite)" unelevated color="positive" stack icon="arrow_forward"
label="Annehmen" size="sm"/>
<q-btn @click="deleteTeamInvite(teamInvite)" unelevated color="negative" stack icon="delete"
label="Ablehnen" size="sm"/>
</q-item>
</q-expansion-item>
</q-card>
</q-list>
<q-input 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
:disabled="!newTeamNameValidationSuccesful"
label="Team anlegen"
color="primary"
class="full-width"
@click="createTeam()"
unelevated
/>
</q-tab-panel> </q-tab-panel>
</q-tab-panels> </q-tab-panels>
@ -175,55 +171,17 @@
teamName: null, teamName: null,
boolAlreadyInTeam: false, boolAlreadyInTeam: false,
teamRanking: null, teamRanking: null,
dropDownSelectedItem: null,
boolMyTeam: true,
boolInvites: false,
boolCreateTeam: false,
newTeamName: "", newTeamName: "",
leaveTeamCheck: "", leaveTeamCheck: "",
teamMembers: [], teamMembers: [],
teamInvites: [], teamInvites: [],
columns: [ inviteActivated: false,
{ boolStatus: false,
name: 'desc', boolMemberTableUpdating: false,
required: true,
align: 'left',
field: row => row.name,
format: val => `${val}`,
},
{
name: 'userData',
required: true,
align: 'left',
field: 'userData',
}
],
data: [
{
name: 'Benutzername',
userData: this.userName,
},
{
name: 'E-Mail',
userData: this.email,
},
{
name: 'Rang',
userData: this.userRanking,
},
{
name: 'Team',
userData: this.teamName,
},
{
name: 'Team-Rang',
userData: this.teamRanking,
},
],
teamColumns: [ teamColumns: [
{ {
name: 'desc', name: 'desc',
label: 'Benutzername', label: 'Name',
required: true, required: true,
align: 'left', align: 'left',
field: row => row.name, field: row => row.name,
@ -244,7 +202,6 @@
descending: false, descending: false,
page: 1, page: 1,
rowsPerPage: 10 rowsPerPage: 10
// rowsNumber: xx if getting data from a server
}, },
} }
}, },
@ -283,14 +240,40 @@
this.$store.commit('auth/SET_AUTHENTICATED'); this.$store.commit('auth/SET_AUTHENTICATED');
this.$store.commit('auth/SET_USER'); this.$store.commit('auth/SET_USER');
this.userName = JSON.parse(localStorage.getItem('userToken')).name; this.userName = JSON.parse(localStorage.getItem('userToken')).name;
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.getPersonalRanking(); this.getPersonalRanking();
this.getTeamData(); this.getTeamData();
this.fetchTeamInvites(); this.fetchTeamInvites();
}, },
methods: { methods: {
confirmLeave() {
this.$q.dialog({
title: 'Verlassen...',
message: 'Willst du dein aktuelles Team wirklich verlassen?',
persistent: true,
cancel: true,
}).onOk(() => {
console.log('>>>> OK');
this.leaveTeam();
}).onCancel(() => {
console.log('>>>> Cancel')
}).onDismiss(() => {
})
},
activateInvite() {
if (this.inviteActivated) {
this.inviteActivated = false;
} else {
this.inviteActivated = true;
}
},
updateStatus() {
if (this.boolStatus) {
this.boolStatus = false;
} else {
this.boolStatus = 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());
@ -300,7 +283,6 @@
this.$axios.get('/api/getRankingPlace', {params: {email}}) this.$axios.get('/api/getRankingPlace', {params: {email}})
.then((response) => { .then((response) => {
this.userRanking = response.data; this.userRanking = response.data;
this.data[2].userData = this.userRanking;
}).catch((error) => { }).catch((error) => {
this.handleError(error); this.handleError(error);
}) })
@ -324,35 +306,12 @@
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.teamRanking = response.data.teamRanking;
this.fetchTeamMembers(); this.fetchTeamMembers();
} }
this.data[3].userData = this.teamName;
this.dropDownSelectedItem = this.teamName;
this.data[4].userData = this.teamRanking;
console.log("getTeam: " + response); console.log("getTeam: " + response);
}).catch((error) => { }).catch((error) => {
this.handleError(error); this.handleError(error);
}) });
},
dropDownSelectItem(item) {
if (item === 'team') {
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 {
this.dropDownSelectedItem = item;
this.boolMyTeam = false;
this.boolInvites = false;
this.boolCreateTeam = true;
}
}, },
createTeam() { createTeam() {
let params = {}; let params = {};
@ -395,6 +354,7 @@
}) })
}, },
fetchTeamMembers() { fetchTeamMembers() {
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((response) => {
@ -510,6 +470,7 @@
}).catch((error) => { }).catch((error) => {
this.handleError(error); this.handleError(error);
}) })
this.updateStatus();
}, },
handleError(error) { handleError(error) {
// Error // Error