<template>
    <div class="container">

    <br />
    
    <p>{{ caddyConfig }}</p>
    
    <ButtonTest />
    </div>

</template>

<script>
import ButtonTest from '../views/ButtonTest.vue';

    export default {
        components: {
            ButtonTest
        },
        data() {
            return {
                caddyConfig: null,
                isLoading: false,
                error: null
            };
        },
        methods: {
            async fetchCaddyConfig() {
                this.isLoading = true;
                this.error = null;
            
                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 => response.json())
                .then(data => {
                    fetch_data = data;
                    this.myData = data;
                })
                .catch(error => {
                        console.error('Error:', error);
                        this.error = error;
                    }
                );
                */
            }
        },
        mounted() {
            this.fetchCaddyConfig();
        }
    }

</script>