assignment6

App.vue

<template>
    <div class="container">
        <my-header></my-header>
        <hr>
        <my-status-pane></my-status-pane>
        <hr>
        <my-footer></my-footer>
    </div>
</template>

Footer.vue

<template>
    <div class="row">
        <div class="col-xs-12">
            <footer>
                <p>All Servers are managed here</p>
            </footer>
        </div>
    </div>
</template>

Header.vue

<template>
    <div class="row">
        <div class="col-xs-12">
            <header>
                <h1>Server Status</h1>
            </header>
        </div>
    </div>
</template>

main.js

import Vue from 'vue'
import App from './App.vue'
import Header from './Header.vue'
import Footer from './Footer.vue'
import StatusPane from './StatusPane.vue'

Vue.component('my-header', Header)
Vue.component('my-footer', Footer)
Vue.component('my-status-pane', StatusPane)

new Vue({
  el: '#app',
  render: h => h(App)
})

StatusPane.vue

<template>
    <div class="row">
        <div class="col-xs-12 col-sm-6">
            <ul class="list-group">
                <li class="list-group-item" v-for="index in 5" :key="index">
                    Server #{{ index }}
                </li>
            </ul>
        </div>
        <div class="col-xs-12 col-sm-6">
            <p>Server Details are currently not updated</p>
        </div>
    </div>
</template>