From 2dad506280ce68595dd0e18ef9d0751de6b2a99c Mon Sep 17 00:00:00 2001
From: CPSO <5735792+CPSO@users.noreply.github.com>
Date: Thu, 21 May 2020 02:29:41 +0200
Subject: [PATCH] button for fetch servers from user, and saves it in store.
 option list has all servers listed and saves the selected servers
 clientIdentifier as id

---
 src/components/layout/Header.vue   | 47 +++++++++++++++++++++++-----
 src/store/index.js                 |  6 ++++
 src/store/modules/servers/index.js | 50 ++++++++++++++++++++++++++++++
 3 files changed, 96 insertions(+), 7 deletions(-)
 create mode 100644 src/store/modules/servers/index.js

diff --git a/src/components/layout/Header.vue b/src/components/layout/Header.vue
index 5caea37..0afe691 100644
--- a/src/components/layout/Header.vue
+++ b/src/components/layout/Header.vue
@@ -18,15 +18,21 @@
 
              <div class="container is-vcentered is-pulled-right">
                 <div class="select is-dark is-pulled-right">
-                <select>
-                    <option>Select dropdown</option>
-                    <option>With options</option>
-                    <option>Loooooooong server name</option>
-
-                </select>
+                <b-select placeholder="Select Server"
+                @input="assignTag">
+                <option
+                    v-for="option in pserver"
+                    :value="option.clientIdentifier"
+                    :key="option.clientIdentifier"
+                    v-on:change="onchange()"
+                    >
+                    {{ option.name }}
+                </option>
+            </b-select>
                 </div>
                  
-                <b-button  id="sync-button" @click="clickMe" type="is-warning" icon-left="fas fa-sync" icon-pack="fas" class="is-pulled-right" >
+                <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>
@@ -38,7 +44,34 @@
 <script>
 
 
+
+
 export default {
+    methods: {
+        fetchServers(){
+            console.log("fetching servers")
+            this.$store.dispatch('getPlexServers');
+        },
+        assignTag: function (selected) {
+            this.selected = selected;
+            this.$store.commit("UPDATE_SELECTED_SERVER", selected);
+
+            
+        },
+        onChange(event) {
+              console.log(event.target.selected);
+              console.log("hello")
+          }
+    },
+    created(){
+        console.log("menu created")
+        this.$store.dispatch('getPlexServers');
+    },
+    computed: {
+        pserver(){
+        return this.$store.getters.plexServers
+        }
+    }
 
 }
 </script>
diff --git a/src/store/index.js b/src/store/index.js
index 10ecddc..75e6a9f 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import VuexPersistence from 'vuex-persist';
+import servers from './modules/servers/index'
 
 Vue.use(Vuex)
 
@@ -23,10 +24,15 @@ export default new Vuex.Store({
     }
   },
   getters: {
+    getAuthToken: state => {
+      return state.authToken
+    }
   },
   actions: {
   },
   modules: {
+    servers
+
   },
   plugins: [vuexLocal.plugin]
 })
diff --git a/src/store/modules/servers/index.js b/src/store/modules/servers/index.js
new file mode 100644
index 0000000..302497e
--- /dev/null
+++ b/src/store/modules/servers/index.js
@@ -0,0 +1,50 @@
+import axios from 'axios';
+import mstore from '../../index';
+
+
+const state = {
+  plexServers: [],
+  selectedServerId: ''
+};
+
+const mutations = {
+  UPDATE_PLEX_SERVERS(state, payload) {
+    state.plexServers = payload;
+  },
+  UPDATE_SELECTED_SERVER(state, value) {
+      state.selectedServerId = value
+  }
+};
+
+const actions = {
+  getPlexServers({ commit }) {
+      axios({
+          method: 'get',
+          url: 'https://plex.tv/api/v2/resources',
+          headers: 
+          {
+            'includeHttps' : '1',
+            'includeRelay' : '1',
+            'X-Plex-Client-Identifier' : 'WebTools-NG',
+            'X-Plex-Token': mstore.getters.getAuthToken
+          },
+        })
+          .then((response) => {
+            commit('UPDATE_PLEX_SERVERS', response.data)
+          });
+
+  }
+};
+
+const getters = {
+    plexServers: state => state.plexServers
+};
+
+const serverModule = {
+  state,
+  mutations,
+  actions,
+  getters
+}
+
+export default serverModule;
\ No newline at end of file