summaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
authorDerick Montague <derick.montague@ibm.com>2020-01-17 22:46:30 +0300
committerDerick Montague <derick.montague@ibm.com>2020-01-21 21:08:12 +0300
commita2988f40b965fdcf2941ff6e62c5bac5cf0e6988 (patch)
tree2517f594e51376f66b5f352065a86aeffa104900 /src/components
parentb935611638d871412c8582c0d9798e109ce4e06e (diff)
downloadwebui-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.vue44
-rw-r--r--src/components/AppHeader/index.js2
-rw-r--r--src/components/AppNavigation/AppNavigation.vue31
-rw-r--r--src/components/AppNavigation/index.js2
-rw-r--r--src/components/AppOverview/AppOverview.vue12
-rw-r--r--src/components/AppOverview/index.js2
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;