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 | |
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')
-rw-r--r-- | src/components/AppHeader/AppHeader.vue | 44 | ||||
-rw-r--r-- | src/components/AppHeader/index.js | 2 | ||||
-rw-r--r-- | src/components/AppNavigation/AppNavigation.vue | 31 | ||||
-rw-r--r-- | src/components/AppNavigation/index.js | 2 | ||||
-rw-r--r-- | src/components/AppOverview/AppOverview.vue | 12 | ||||
-rw-r--r-- | src/components/AppOverview/index.js | 2 |
6 files changed, 93 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> diff --git a/src/components/AppHeader/index.js b/src/components/AppHeader/index.js new file mode 100644 index 00000000..b8f3ab3c --- /dev/null +++ b/src/components/AppHeader/index.js @@ -0,0 +1,2 @@ +import AppHeader from "./AppHeader"; +export default AppHeader; diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue new file mode 100644 index 00000000..e5a1eeeb --- /dev/null +++ b/src/components/AppNavigation/AppNavigation.vue @@ -0,0 +1,31 @@ +<template> + <nav> + <ul> + <li><router-link to="/">Overview</router-link></li> + <li> + <router-link to="/access-control/local-user-management" + >Local User Management</router-link + > + </li> + </ul> + </nav> +</template> + +<script> +// import Analytics16 from "@carbon/icons-vue/es/analytics/16"; +// import DataCheck16 from "@carbon/icons-vue/es/data--check/16"; +// import SettingsAdjust16 from "@carbon/icons-vue/es/settings--adjust/16"; +// import Settings16 from "@carbon/icons-vue/es/settings/16"; +// import Password16 from "@carbon/icons-vue/es/password/16"; + +export default { + name: "AppNavigation" + // components: { + // Analytics16, + // DataCheck16, + // SettingsAdjust16, + // Settings16, + // Password16 + // } +}; +</script> diff --git a/src/components/AppNavigation/index.js b/src/components/AppNavigation/index.js new file mode 100644 index 00000000..8046f702 --- /dev/null +++ b/src/components/AppNavigation/index.js @@ -0,0 +1,2 @@ +import AppNavigation from "./AppNavigation"; +export default AppNavigation; diff --git a/src/components/AppOverview/AppOverview.vue b/src/components/AppOverview/AppOverview.vue new file mode 100644 index 00000000..055c9111 --- /dev/null +++ b/src/components/AppOverview/AppOverview.vue @@ -0,0 +1,12 @@ +<template> + <h1>Overview</h1> +</template> + +<script> +export default { + name: "AppOverview", + data() { + return {}; + } +}; +</script> diff --git a/src/components/AppOverview/index.js b/src/components/AppOverview/index.js new file mode 100644 index 00000000..3f1a43b2 --- /dev/null +++ b/src/components/AppOverview/index.js @@ -0,0 +1,2 @@ +import AppOverview from "./AppOverview"; +export default AppOverview; |