Assignment 7

App.vue

<template>
    <div class="container">
        <app-header></app-header>
        <hr>
        <div class="row">
            <servers></servers>
            <app-server-details></app-server-details>
        </div>
        <hr>
        <app-footer></app-footer>
    </div>
</template>

<script>
    import Vue from 'vue';
    import Header from './components/Shared/Header.vue';
    import Footer from './components/Shared/Footer.vue';
    import Servers from './components/Server/Servers.vue';
    import ServerDetails from './components/Server/ServerDetails.vue';

    export default {
        provide: {
            eventBus: new Vue(),
        },
        components: {
            appHeader: Header,
            Servers,
            'app-server-details': ServerDetails,
            'app-footer': Footer
        }
    }
</script>

ServerDetails.vue

<template>
    <div class="col-xs-12 col-sm-6">
        <p v-if="!currentServer">Server Details are currently not updated</p>
        <template v-else>
            <div><strong>ID:</strong> {{currentServer.id}}</div>
            <div><strong>Status:</strong> {{currentServer.status}}</div>
            <button v-show="currentServer.status !== 'Normal'" @click="resetServerStatus()">Reset Status</button>
        </template>
    </div>
</template>

<script>
export default {
    inject: ['eventBus'],
    data() {
        return  {
            currentServer: null,
        };
    },
    methods: {
        resetServerStatus() {
            this.currentServer.status = 'Normal';
        },
    },
    created() {
        this.eventBus.$on('selectServer', (server) => {
            this.currentServer = server;
        });
    }
};
</script>

Servers.vue

<template>
    <div class="col-xs-12 col-sm-6">
        <ul class="list-group">
            <li class="list-group-item" 
                v-for="server in servers" :key="server.id"
                @click="viewServerDetail(server)">

                Server #{{ server.id }}
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    inject: ['eventBus'],
    data() {
        return {
            servers: [
                { id: 1, status: 'Normal'},
                { id: 2, status: 'Critical'},
                { id: 3, status: 'Unknown'},
                { id: 4, status: 'Normal'},
            ]
        };
    },
    methods: {
        viewServerDetail(server) {
            this.eventBus.$emit('selectServer', server);
        },
    },
};
</script>