From 769b44c494ff11fd46ed1e128b2b07a045820f4b Mon Sep 17 00:00:00 2001
From: lwcrosier <lwc5402@psu.edu>
Date: Wed, 3 Dec 2025 22:03:36 -0500
Subject: [PATCH] Added an example button that is included as another component
 to show how to add additional .vue includes into other Vue files

---
 src/views/ButtonTest.vue |  5 +++++
 src/views/HomeView.vue   | 41 +++++++++++++++++++++++++++++++---------
 2 files changed, 37 insertions(+), 9 deletions(-)
 create mode 100644 src/views/ButtonTest.vue

diff --git a/src/views/ButtonTest.vue b/src/views/ButtonTest.vue
new file mode 100644
index 0000000..75accbd
--- /dev/null
+++ b/src/views/ButtonTest.vue
@@ -0,0 +1,5 @@
+
+
+<template>
+    <button class="btn btn-primary">"Test Button"</button>
+</template>
\ No newline at end of file
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 6435dd3..4150e52 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,20 +1,25 @@
 <template>
     <div class="container">
-        <button class="btn btn-primary" @click="fetchCaddyConfig">Get Config</button>
-    <br/>
-
-    <p> {{ myData }}</p>
 
+    <br />
+    
+    <p>{{ caddyConfig }}</p>
+    
+    <ButtonTest />
     </div>
 
 </template>
 
 <script>
+import ButtonTest from '../views/ButtonTest.vue';
 
     export default {
+        components: {
+            ButtonTest
+        },
         data() {
             return {
-                myData: null,
+                caddyConfig: null,
                 isLoading: false,
                 error: null
             };
@@ -26,14 +31,29 @@
             
                 let fetch_data = null;
 
+                try {
+                    const response = await fetch('http://localhost:2019/config/', {
+                            mode: 'cors',
+                            method: 'GET'
+                        });
+
+                    if(!response.ok) {
+                        throw new Error('Error in fetch request');
+                    }
+
+                    fetch_data = await response.json();
+                    this.caddyConfig = fetch_data;
+                } catch (error) {
+                    this.error = "Could not fetch Caddy Config: " + error.message;
+                    console.error(error);
+                }
+
+                /*
                 fetch('http://localhost:2019/config/', {
                         mode: 'cors',
                         method: 'GET'
                     })
-                //.then(response => console.log(response))
                 .then(response => response.json())
-                //then(responseJson => fetch_data = responseJson)
-                //.then(data => console.log(data))
                 .then(data => {
                     fetch_data = data;
                     this.myData = data;
@@ -43,8 +63,11 @@
                         this.error = error;
                     }
                 );
-
+                */
             }
+        },
+        mounted() {
+            this.fetchCaddyConfig();
         }
     }