✨ Add server status loading and saving functionality with improved error handling and UI updates

code/websites/pokedex.online/src/views/GamemasterManager.vue

@@ -80,8 +80,8 @@
           {{ saving ? 'Saving...' : '💾 Save All Files to Server' }}
         </button>
         <div v-if="saveSuccess" class="success">
-          ✅ Files saved to server successfully! Other apps can now access
+          ✅ Files saved to server successfully! Other apps can now access the
-          the data via the Gamemaster API.
+          data via the Gamemaster API.
         </div>
       </div>
 
@@ -114,7 +114,11 @@
           </p>
           <p><strong>Files Available:</strong> {{ serverStatus.totalFiles }}</p>
           <div class="file-list">
-            <div v-for="file in serverStatus.available" :key="file.filename" class="file-item">
+            <div
+              v-for="file in serverStatus.available"
+              :key="file.filename"
+              class="file-item"
+            >
               <span class="file-name">{{ file.filename }}</span>
               <span class="file-size">{{ file.sizeKb }} KB</span>
             </div>
@@ -159,7 +163,7 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import {
   fetchLatestGamemaster,
   breakUpGamemaster,
@@ -169,14 +173,33 @@ import {
 
 const loading = ref(false);
 const error = ref(null);
+const saving = ref(false);
+const saveSuccess = ref(false);
 const rawGamemaster = ref(null);
 const processedData = ref(null);
+const serverStatus = ref(null);
 
 const stats = computed(() => {
   if (!processedData.value) return null;
   return getGamemasterStats(processedData.value);
 });
 
+onMounted(async () => {
+  // Load server status on component mount
+  await loadServerStatus();
+});
+
+async function loadServerStatus() {
+  try {
+    const response = await fetch('/api/gamemaster/status');
+    if (response.ok) {
+      serverStatus.value = await response.json();
+    }
+  } catch (err) {
+    console.error('Failed to load server status:', err);
+  }
+}
+
 async function fetchGamemaster() {
   loading.value = true;
   error.value = null;
@@ -203,6 +226,42 @@ function processGamemaster() {
   }
 }
 
+async function saveToServer() {
+  if (!processedData.value) return;
+
+  saving.value = true;
+  saveSuccess.value = false;
+  error.value = null;
+
+  try {
+    const response = await fetch('/api/gamemaster/save', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        pokemon: processedData.value.pokemon,
+        pokemonAllForms: processedData.value.pokemonAllForms,
+        moves: processedData.value.moves,
+        raw: rawGamemaster.value
+      })
+    });
+
+    if (!response.ok) {
+      const err = await response.json();
+      throw new Error(err.error || 'Failed to save to server');
+    }
+
+    saveSuccess.value = true;
+    // Reload server status
+    await loadServerStatus();
+  } catch (err) {
+    error.value = `Failed to save to server: ${err.message}`;
+  } finally {
+    saving.value = false;
+  }
+}
+
 function downloadPokemon() {
   downloadJson(processedData.value.pokemon, 'pokemon.json');
 }
@@ -223,6 +282,12 @@ function downloadAll() {
   setTimeout(() => downloadAllForms(), 500);
   setTimeout(() => downloadMoves(), 1000);
 }
+
+function formatDate(dateString) {
+  if (!dateString || dateString === 'Never') return 'Never';
+  return new Date(dateString).toLocaleString();
+}
+</script>
 </script>
 
 <style scoped>