mirror of
https://github.com/WebTools-NG/WebTools-NG
synced 2024-11-25 20:40:19 +00:00
added avatar to header, fetching plex resources now only saves owned and PMS
This commit is contained in:
CPSO
parent
690be7ca94
commit
c93c601d4b
4 changed files with 65 additions and 60 deletions
|
|
@ -46,7 +46,7 @@
|
|||
|
||||
|
||||
<script>
|
||||
//onst axios = require('axios').default;
|
||||
//const axios = require('axios').default;
|
||||
import store from '../store'
|
||||
//import router from '../router'
|
||||
|
||||
|
|
|
|||
|
|
@ -1,40 +1,44 @@
|
|||
<template>
|
||||
<section class="hero is-dark is-small">
|
||||
<div class="hero-body">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="level">
|
||||
|
||||
|
||||
<figure class="image is-48x48 is-pulled-left">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<figure class="image is-48x48">
|
||||
<img src="https://bulma.io/images/placeholders/128x128.png">
|
||||
</figure>
|
||||
|
||||
<!-- <div id="title" >
|
||||
<p id="top_title" class="title is-size-3 is-pulled-left">{{ $t("Common.AppName") }}</p>
|
||||
</div> -->
|
||||
|
||||
<div id="title" >
|
||||
<p id="top_title" class="title is-size-3">{{ $t("Common.AppName") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container is-vcentered is-pulled-right">
|
||||
<div class="select is-dark is-pulled-right">
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<figure class="image is-48x48" id="avatar">
|
||||
<img id="avatar" src="https://bulma.io/images/placeholders/128x128.png">
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="level-item">
|
||||
<b-button id="sync-button" @click="fetchServers" type="is-warning"
|
||||
icon-left="fas fa-sync" icon-pack="fas" class="is-pulled-right" >
|
||||
</b-button>
|
||||
|
||||
<div class="select is-dark">
|
||||
<b-select placeholder="Select Server"
|
||||
@input="assignTag">
|
||||
<option
|
||||
v-for="option in pserver"
|
||||
:value="option.clientIdentifier"
|
||||
:key="option.clientIdentifier"
|
||||
v-on:change="onchange()"
|
||||
>
|
||||
v-on:change="onchange()">
|
||||
{{ option.name }}
|
||||
</option>
|
||||
</b-select>
|
||||
</div>
|
||||
|
||||
<b-button id="sync-button" @click="fetchServers" type="is-warning"
|
||||
icon-left="fas fa-sync" icon-pack="fas" class="is-pulled-right" >
|
||||
</b-button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -46,12 +50,11 @@ import store from '../../store';
|
|||
|
||||
|
||||
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
fetchServers(){
|
||||
console.log("fetching servers")
|
||||
this.$store.dispatch('getPlexServers', store.getters.getAuthToken);
|
||||
this.$store.dispatch('fetchPlexServers', store.getters.getAuthToken);
|
||||
},
|
||||
assignTag: function (selected) {
|
||||
this.selected = selected;
|
||||
|
|
@ -63,11 +66,15 @@ export default {
|
|||
},
|
||||
created(){
|
||||
console.log("menu created")
|
||||
this.$store.dispatch('getPlexServers');
|
||||
this.$store.dispatch('fetchPlexServers');
|
||||
|
||||
},
|
||||
computed: {
|
||||
pserver(){
|
||||
return this.$store.getters.plexServers
|
||||
return this.$store.getters.getPlexServers
|
||||
},
|
||||
userAvatar(){
|
||||
return this.$store.getters.getAvatar
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,29 +11,12 @@ const vuexLocal = new VuexPersistence({
|
|||
|
||||
|
||||
export default new Vuex.Store({
|
||||
state: {
|
||||
/*
|
||||
authenticated: false,
|
||||
authToken: ''
|
||||
*/
|
||||
},
|
||||
mutations: {
|
||||
/*
|
||||
setAuthentication(state, status) {
|
||||
state.authenticated = status;
|
||||
},
|
||||
setAuthToken(state, token){
|
||||
state.authToken = token
|
||||
}
|
||||
*/
|
||||
},
|
||||
getters: {
|
||||
},
|
||||
actions: {
|
||||
},
|
||||
state: {},
|
||||
mutations: {},
|
||||
getters: {},
|
||||
actions: {},
|
||||
modules: {
|
||||
plextv
|
||||
|
||||
},
|
||||
plugins: [vuexLocal.plugin]
|
||||
})
|
||||
|
|
|
|||
|
|
@ -6,7 +6,9 @@ const state = {
|
|||
plexServers: [],
|
||||
selectedServerId: '',
|
||||
authenticated: false,
|
||||
authToken: ''
|
||||
authToken: '',
|
||||
avatar: '',
|
||||
filteredProducts: []
|
||||
};
|
||||
|
||||
const mutations = {
|
||||
|
|
@ -21,11 +23,14 @@ const mutations = {
|
|||
},
|
||||
UPDATE_AUTHTOKEN(state, value){
|
||||
state.authToken = value
|
||||
},
|
||||
UPDATE_AVATAR(state, value){
|
||||
state.avatar = value
|
||||
}
|
||||
};
|
||||
|
||||
const actions = {
|
||||
getPlexServers({ commit, getters }) {
|
||||
fetchPlexServers({ commit, getters }) {
|
||||
axios({
|
||||
method: 'get',
|
||||
url: 'https://plex.tv/api/v2/resources?includeHttps=1&includeRelay=1',
|
||||
|
|
@ -38,7 +43,15 @@ const actions = {
|
|||
},
|
||||
})
|
||||
.then((response) => {
|
||||
commit('UPDATE_PLEX_SERVERS', response.data)
|
||||
let result=[];
|
||||
response.data.forEach((req) => {
|
||||
if (req.owned == true && req.product == "Plex Media Server") {
|
||||
result.push(req);
|
||||
}
|
||||
})
|
||||
|
||||
console.log(result)
|
||||
commit('UPDATE_PLEX_SERVERS', result)
|
||||
})
|
||||
.catch(function (error) {
|
||||
if (error.response) {
|
||||
|
|
@ -71,6 +84,7 @@ const actions = {
|
|||
console.log(response.status)
|
||||
commit('UPDATE_AUTHTOKEN', response.data.user.authToken)
|
||||
commit('UPDATE_AUTHENTICATED', true)
|
||||
commit('UPDATE_AVATAR', response.data.user.thumb)
|
||||
router.replace({name: "home"});
|
||||
})
|
||||
.catch(function (error) {
|
||||
|
|
@ -94,8 +108,9 @@ const actions = {
|
|||
};
|
||||
|
||||
const getters = {
|
||||
plexServers: state => state.plexServers,
|
||||
getAuthToken: state => state.authToken
|
||||
getPlexServers: state => state.plexServers,
|
||||
getAuthToken: state => state.authToken,
|
||||
getAvatar: state => state.avatar
|
||||
};
|
||||
|
||||
const serverModule = {
|
||||
|
|
|
|||
Loading…
Reference in a new issue