Add user stats dashboard with max perk count table
This commit is contained in:
parent
343d3c3dff
commit
ac86d39dea
|
@ -53,10 +53,11 @@ class UserSerializer(serializers.Serializer):
|
||||||
fields = ('id', 'perks', 'base_user')
|
fields = ('id', 'perks', 'base_user')
|
||||||
|
|
||||||
|
|
||||||
# class AuthorSerializer(serializers.ModelSerializer):
|
class UserPerksSerializer(serializers.Serializer):
|
||||||
# book_list = BookSerializer(many=True, read_only=True)
|
id = serializers.IntegerField(read_only=True)
|
||||||
|
perks = PerkSerializer(read_only=True, many=True)
|
||||||
|
|
||||||
# class Meta:
|
class Meta:
|
||||||
# model = Author
|
model = User
|
||||||
# fields = ('id', 'name', 'last_name', 'book_list')
|
fields = ('id', 'perks')
|
||||||
|
|
||||||
|
|
|
@ -15,7 +15,7 @@ from rest_framework.views import APIView
|
||||||
from .models import Perk, Tree, User
|
from .models import Perk, Tree, User
|
||||||
from .parser import PerkParser
|
from .parser import PerkParser
|
||||||
from .permissions import IsPostOrIsAuthenticated, IsGetOrIsSuperuser
|
from .permissions import IsPostOrIsAuthenticated, IsGetOrIsSuperuser
|
||||||
from .serializers import PerkSerializer, TreeSerializer, UserSerializer
|
from .serializers import PerkSerializer, TreeSerializer, UserSerializer, UserPerksSerializer
|
||||||
|
|
||||||
|
|
||||||
PERKS_DIR = environ.get('PERKS_DIR')
|
PERKS_DIR = environ.get('PERKS_DIR')
|
||||||
|
@ -99,7 +99,10 @@ class UserView(APIView):
|
||||||
return Response(status=404)
|
return Response(status=404)
|
||||||
|
|
||||||
user = User.objects.get(base_user__id=request.user.id)
|
user = User.objects.get(base_user__id=request.user.id)
|
||||||
serialized_user = UserSerializer(user).data
|
if request.GET.get('full', False):
|
||||||
|
serialized_user = UserPerksSerializer(user).data
|
||||||
|
else:
|
||||||
|
serialized_user = UserSerializer(user).data
|
||||||
|
|
||||||
return Response(serialized_user)
|
return Response(serialized_user)
|
||||||
|
|
||||||
|
|
|
@ -16,6 +16,10 @@ export default class AuthApi {
|
||||||
return Axios.get(ENDPOINTS.USER);
|
return Axios.get(ENDPOINTS.USER);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
static getUserPerks() {
|
||||||
|
return Axios.get(ENDPOINTS.USER, { params: { full: 1 } });
|
||||||
|
}
|
||||||
|
|
||||||
static createUser(data) {
|
static createUser(data) {
|
||||||
return Axios.post(ENDPOINTS.USER, data);
|
return Axios.post(ENDPOINTS.USER, data);
|
||||||
}
|
}
|
||||||
|
|
|
@ -37,6 +37,7 @@ export default {
|
||||||
true: [
|
true: [
|
||||||
{ icon: 'fas fa-upload', text: 'Upload perks', to: { name: 'upload-perks' } },
|
{ icon: 'fas fa-upload', text: 'Upload perks', to: { name: 'upload-perks' } },
|
||||||
{ icon: 'fas fa-code-branch', text: 'Perk trees', to: { name: 'trees' } },
|
{ icon: 'fas fa-code-branch', text: 'Perk trees', to: { name: 'trees' } },
|
||||||
|
{ icon: 'fas fa-user', text: 'User', to: { name: 'user' } },
|
||||||
{ icon: 'fas fa-sign-out-alt', text: 'Logout', to: { name: 'logout' } },
|
{ icon: 'fas fa-sign-out-alt', text: 'Logout', to: { name: 'logout' } },
|
||||||
],
|
],
|
||||||
false: [
|
false: [
|
||||||
|
|
|
@ -1,12 +1,68 @@
|
||||||
<template>
|
<template>
|
||||||
<v-container>
|
<v-container>
|
||||||
<h1>Dashboard</h1>
|
<v-layout row wrap id="user-stats">
|
||||||
|
<v-flex xl8 offset-xl2 sm12>
|
||||||
|
<v-card>
|
||||||
|
<center><h1>User stats</h1></center>
|
||||||
|
<hr>
|
||||||
|
<template v-if="loading">
|
||||||
|
<h3>loading</h3>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<v-layout row wrap>
|
||||||
|
<v-flex lg7 sm12>
|
||||||
|
<v-data-table
|
||||||
|
:headers="headers"
|
||||||
|
:items="maxPerkCounts[fantasy]"
|
||||||
|
disable-initial-sort
|
||||||
|
hide-actions
|
||||||
|
class="elevation-1"
|
||||||
|
>
|
||||||
|
<template v-slot:items="props">
|
||||||
|
<td>{{ props.item.level }}</td>
|
||||||
|
<td>{{ props.item.total }}</td>
|
||||||
|
<td>{{ props.item.level3 }}</td>
|
||||||
|
<td>{{ props.item.level4 }}</td>
|
||||||
|
</template>
|
||||||
|
</v-data-table>
|
||||||
|
</v-flex>
|
||||||
|
<v-flex lg2 offset-lg1 sm12>
|
||||||
|
<v-layout column id="side-wrapper">
|
||||||
|
<v-radio-group v-model="fantasy">
|
||||||
|
<v-radio
|
||||||
|
label="High fantasy"
|
||||||
|
value="high"
|
||||||
|
></v-radio>
|
||||||
|
<v-radio
|
||||||
|
label="Mid fantasy"
|
||||||
|
value="mid"
|
||||||
|
></v-radio>
|
||||||
|
<v-radio
|
||||||
|
label="Low fantasy"
|
||||||
|
value="low"
|
||||||
|
></v-radio>
|
||||||
|
</v-radio-group>
|
||||||
|
<div>
|
||||||
|
<span><b>Level 1: </b>{{ perkCount[1] }}</span><br>
|
||||||
|
<span><b>Level 2: </b>{{ perkCount[2] }}</span><br>
|
||||||
|
<span><b>Level 3: </b>{{ perkCount[3] }}</span><br>
|
||||||
|
<span><b>Level 4: </b>{{ perkCount[4] }}</span><br>
|
||||||
|
<span><b>Total: </b>{{ perkCount.total }}</span>
|
||||||
|
</div>
|
||||||
|
</v-layout>
|
||||||
|
</v-flex>
|
||||||
|
</v-layout>
|
||||||
|
</template>
|
||||||
|
</v-card>
|
||||||
|
</v-flex>
|
||||||
|
</v-layout>
|
||||||
</v-container>
|
</v-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import * as _ from 'lodash';
|
||||||
|
|
||||||
// import AuthController from '../controllers/auth.controller';
|
import UserController from '../controllers/user.controller';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Index',
|
name: 'Index',
|
||||||
|
@ -14,14 +70,134 @@ export default {
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
|
user: null,
|
||||||
|
loading: true,
|
||||||
|
fantasy: 'high',
|
||||||
|
headers: [
|
||||||
|
{ text: 'Character Level', value: 'level', sortable: false },
|
||||||
|
{ text: 'Total number of perks', value: 'total', sortable: false },
|
||||||
|
{ text: 'Max level 3 perks', value: 'level3', sortable: false },
|
||||||
|
{ text: 'Max level 4 perks', value: 'level4', sortable: false },
|
||||||
|
],
|
||||||
|
maxPerkCounts: {
|
||||||
|
high: [
|
||||||
|
{ level: 1, total: 2, level3: 0, level4: 0 },
|
||||||
|
{ level: 2, total: 4, level3: 1, level4: 1 },
|
||||||
|
{ level: 3, total: 6, level3: 2, level4: 1 },
|
||||||
|
{ level: 4, total: 8, level3: 3, level4: 1 },
|
||||||
|
{ level: 5, total: 10, level3: 3, level4: 2 },
|
||||||
|
{ level: 6, total: 12, level3: 4, level4: 2 },
|
||||||
|
{ level: 7, total: 14, level3: 5, level4: 2 },
|
||||||
|
{ level: 8, total: 16, level3: 6, level4: 3 },
|
||||||
|
{ level: 9, total: 18, level3: 7, level4: 3 },
|
||||||
|
{ level: 10, total: 20, level3: 8, level4: 3 },
|
||||||
|
{ level: 11, total: 22, level3: 8, level4: 4 },
|
||||||
|
{ level: 12, total: 24, level3: 9, level4: 4 },
|
||||||
|
{ level: 13, total: 26, level3: 10, level4: 4 },
|
||||||
|
{ level: 14, total: 28, level3: 11, level4: 5 },
|
||||||
|
{ level: 15, total: 30, level3: 12, level4: 5 },
|
||||||
|
{ level: 16, total: 32, level3: 13, level4: 5 },
|
||||||
|
{ level: 17, total: 34, level3: 14, level4: 6 },
|
||||||
|
{ level: 18, total: 36, level3: 15, level4: 6 },
|
||||||
|
{ level: 19, total: 38, level3: 16, level4: 6 },
|
||||||
|
{ level: 20, total: 40, level3: 17, level4: 7 },
|
||||||
|
],
|
||||||
|
mid: [
|
||||||
|
{ level: 1, total: 1, level3: 0, level4: 0 },
|
||||||
|
{ level: 2, total: 3, level3: 1, level4: 0 },
|
||||||
|
{ level: 3, total: 4, level3: 1, level4: 0 },
|
||||||
|
{ level: 4, total: 5, level3: 2, level4: 1 },
|
||||||
|
{ level: 5, total: 7, level3: 2, level4: 1 },
|
||||||
|
{ level: 6, total: 8, level3: 3, level4: 1 },
|
||||||
|
{ level: 7, total: 9, level3: 3, level4: 1 },
|
||||||
|
{ level: 8, total: 11, level3: 4, level4: 2 },
|
||||||
|
{ level: 9, total: 12, level3: 4, level4: 2 },
|
||||||
|
{ level: 10, total: 13, level3: 5, level4: 2 },
|
||||||
|
{ level: 11, total: 15, level3: 5, level4: 2 },
|
||||||
|
{ level: 12, total: 16, level3: 6, level4: 3 },
|
||||||
|
{ level: 13, total: 17, level3: 6, level4: 3 },
|
||||||
|
{ level: 14, total: 19, level3: 7, level4: 3 },
|
||||||
|
{ level: 15, total: 20, level3: 7, level4: 3 },
|
||||||
|
{ level: 16, total: 21, level3: 8, level4: 4 },
|
||||||
|
{ level: 17, total: 23, level3: 8, level4: 4 },
|
||||||
|
{ level: 18, total: 24, level3: 9, level4: 4 },
|
||||||
|
{ level: 19, total: 25, level3: 9, level4: 4 },
|
||||||
|
{ level: 20, total: 27, level3: 10, level4: 5 },
|
||||||
|
],
|
||||||
|
low: [
|
||||||
|
{ level: 1, total: 1, level3: 0, level4: 0 },
|
||||||
|
{ level: 2, total: 2, level3: 0, level4: 0 },
|
||||||
|
{ level: 3, total: 3, level3: 1, level4: 0 },
|
||||||
|
{ level: 4, total: 4, level3: 1, level4: 1 },
|
||||||
|
{ level: 5, total: 5, level3: 2, level4: 1 },
|
||||||
|
{ level: 6, total: 6, level3: 2, level4: 1 },
|
||||||
|
{ level: 7, total: 7, level3: 2, level4: 1 },
|
||||||
|
{ level: 8, total: 8, level3: 3, level4: 1 },
|
||||||
|
{ level: 9, total: 9, level3: 3, level4: 2 },
|
||||||
|
{ level: 10, total: 10, level3: 3, level4: 2 },
|
||||||
|
{ level: 11, total: 11, level3: 4, level4: 2 },
|
||||||
|
{ level: 12, total: 12, level3: 4, level4: 2 },
|
||||||
|
{ level: 13, total: 13, level3: 4, level4: 2 },
|
||||||
|
{ level: 14, total: 14, level3: 5, level4: 3 },
|
||||||
|
{ level: 15, total: 15, level3: 5, level4: 3 },
|
||||||
|
{ level: 16, total: 16, level3: 5, level4: 3 },
|
||||||
|
{ level: 17, total: 17, level3: 6, level4: 3 },
|
||||||
|
{ level: 18, total: 18, level3: 6, level4: 3 },
|
||||||
|
{ level: 19, total: 19, level3: 6, level4: 4 },
|
||||||
|
{ level: 20, total: 20, level3: 7, level4: 4 },
|
||||||
|
],
|
||||||
|
},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
computed: {
|
||||||
|
perkCount() {
|
||||||
|
const result = {
|
||||||
|
0: 0,
|
||||||
|
1: 0,
|
||||||
|
2: 0,
|
||||||
|
3: 0,
|
||||||
|
4: 0,
|
||||||
|
total: 0,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!this.user) {
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
_.each(this.user.perks, (perk) => {
|
||||||
|
result[perk.level]++;
|
||||||
|
if (perk.level > 0) {
|
||||||
|
result.total++;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return result;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
// AuthController.getUser().then((response) => {
|
UserController.getUserPerks().then((response) => {
|
||||||
// });
|
this.user = response.data;
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus">
|
||||||
|
#user-stats
|
||||||
|
hr
|
||||||
|
margin: 2rem 0
|
||||||
|
|
||||||
|
td
|
||||||
|
height 2rem !important
|
||||||
|
|
||||||
|
.v-card
|
||||||
|
padding 1rem
|
||||||
|
|
||||||
|
#side-wrapper
|
||||||
|
height 100%
|
||||||
|
justify-content space-around
|
||||||
|
|
||||||
|
.v-input
|
||||||
|
flex unset
|
||||||
|
</style>
|
||||||
|
|
|
@ -12,6 +12,10 @@ export default class AuthController {
|
||||||
return UserApi.getUser();
|
return UserApi.getUser();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
static getUserPerks() {
|
||||||
|
return UserApi.getUserPerks();
|
||||||
|
}
|
||||||
|
|
||||||
static createUser(data) {
|
static createUser(data) {
|
||||||
return UserApi.createUser(data);
|
return UserApi.createUser(data);
|
||||||
}
|
}
|
||||||
|
|
|
@ -50,6 +50,7 @@ const configureRaven = () => {
|
||||||
|
|
||||||
configureHttp();
|
configureHttp();
|
||||||
configureRaven();
|
configureRaven();
|
||||||
|
AuthController.setupToken();
|
||||||
|
|
||||||
new Vue({
|
new Vue({
|
||||||
router,
|
router,
|
||||||
|
|
|
@ -5,8 +5,8 @@
|
||||||
height 100%
|
height 100%
|
||||||
|
|
||||||
.v-card
|
.v-card
|
||||||
padding 1rem
|
|
||||||
height 100%
|
height 100%
|
||||||
|
padding 1rem
|
||||||
|
|
||||||
#perktree
|
#perktree
|
||||||
height 100%
|
height 100%
|
||||||
|
|
Reference in New Issue