diff options
author | Derick Montague <derick.montague@ibm.com> | 2020-01-17 22:46:30 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2020-01-21 21:08:12 +0300 |
commit | a2988f40b965fdcf2941ff6e62c5bac5cf0e6988 (patch) | |
tree | 2517f594e51376f66b5f352065a86aeffa104900 /src/components/AppHeader/AppHeader.vue | |
parent | b935611638d871412c8582c0d9798e109ce4e06e (diff) | |
download | webui-vue-a2988f40b965fdcf2941ff6e62c5bac5cf0e6988.tar.xz |
Create basic application using vue
- Create vue app
- Add AppHeader and AppNavigation
- Set up routes for server overview and local user management
- Add themes and set to gray-10 theme
- Add active class for current navigation
- Add a prototype method named $http to vue prototype
- The UI uses console logs in production to communicate to users
- Add boostrap vue component library
Change-Id: Ib6618e6357ca01bdac6de4ed031a15c8552226f3
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Diffstat (limited to 'src/components/AppHeader/AppHeader.vue')
-rw-r--r-- | src/components/AppHeader/AppHeader.vue | 44 |
1 files changed, 44 insertions, 0 deletions
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue new file mode 100644 index 00000000..b28927ee --- /dev/null +++ b/src/components/AppHeader/AppHeader.vue @@ -0,0 +1,44 @@ +<template> + <div> + <a href="#main-content">Skip to main content</a> + <header> + <b-navbar toggleable="lg" type="dark" variant="primary"> + <div> + <router-link to="/">{{ orgName }} System Management</router-link> + </div> + <div> + <span>{{ serverName }}</span> + <span>{{ ipAddress }}</span> + </div> + <div> + <b-button variant="link"> + <Renew20 /> + Refresh Data + </b-button> + <b-button variant="link"> + <user-avatar-20 /> + User Avatar + </b-button> + </div> + </b-navbar> + </header> + </div> +</template> + +<script> +import UserAvatar20 from "@carbon/icons-vue/es/user--avatar/20"; +import Renew20 from "@carbon/icons-vue/es/renew/20"; +export default { + name: "AppHeader", + components: { Renew20, UserAvatar20 }, + data() { + return { + orgName: "OpenBMC", + serverName: "Server Name", + ipAddress: "127.0.0.0" + }; + } +}; +</script> + +<style lang="scss" scoped></style> |