feat(owner-vue): 점주용 vue 프로젝트 추가

This commit is contained in:
bum12ark
2022-02-22 14:36:49 +09:00
parent fc069f4439
commit 3da1bbb975
17 changed files with 581 additions and 0 deletions

1
.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
/owner-vue/node_modules/

View File

@@ -0,0 +1,5 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}

50
owner-vue/package.json Normal file
View File

@@ -0,0 +1,50 @@
{
"name": "owner-admin",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuetify": "^2.4.0"
},
"devDependencies": {
"@mdi/font": "^6.1.95",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"sass": "~1.32.0",
"sass-loader": "^10.0.0",
"vue-cli-plugin-vuetify": "~2.4.2",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.7.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

View File

@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

25
owner-vue/src/App.vue Normal file
View File

@@ -0,0 +1,25 @@
<template>
<v-app id="inspire">
<Sidebar :drawer="drawer" />
<Topbar @drawerEvent="drawer = !drawer" />
<v-main style="background: #f5f5f540">
<v-container class="py-8 px-6" fluid>
<router-view></router-view>
</v-container>
</v-main>
</v-app>
</template>
<script>
import Sidebar from "./components/Sidebar";
import Topbar from "./components/Topbar";
export default {
name: "App",
components: { Topbar, Sidebar },
data: () => ({
cards: ["Today", "Yesterday"],
drawer: null,
}),
methods: {},
};
</script>

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

View File

@@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>

After

Width:  |  Height:  |  Size: 539 B

View File

@@ -0,0 +1,52 @@
<template>
<!-- <v-navigation-drawer v-model="drawer" app> -->
<v-navigation-drawer app>
<v-img
height="140"
class="pa-4"
src="https://preview.pixlr.com/images/800wm/1439/2/1439104804.jpg"
>
<div class="text-center">
<v-avatar class="mb-4" color="grey darken-1" size="64">
<v-img
aspect-ratio="30"
src="https://yt3.ggpht.com/esazPAO03T0f0vKdByJvkDy6MSwjyG5f-c_2S2CJapszQ3KPQyZarpoqvgv0Us0atUbILytj=s88-c-k-c0x00ffffff-no-rj"
/>
</v-avatar>
<h2 class="white--text">Web Burden</h2>
</div>
</v-img>
<v-divider></v-divider>
<v-list>
<v-list-item v-for="[icon, text] in links" :key="icon" link>
<v-list-item-icon>
<v-icon>{{ icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ text }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
</template>
<script>
export default {
name: "Sidebar",
props: ["drawer"],
data() {
return {
links: [
["mdi-microsoft-windows", "Dashboard"],
["mdi-account", "Profile"],
["mdi-clipboard-list-outline", "Products"],
["mdi-card-account-details-outline", "Orders"],
["mdi-cog", "System Setting"],
],
};
},
};
</script>
<style scoped></style>

View File

@@ -0,0 +1,149 @@
<template>
<v-app-bar app elevate-on-scroll elevation="3" color="white">
<v-app-bar-nav-icon @click="$emit('drawerEvent')"></v-app-bar-nav-icon>
<v-spacer />
<v-col lg="6" cols="12">
<v-form>
<v-text-field
class="p-0 m-0 mt-6"
full-width
dense
append-icon="mdi-magnify"
outlined
rounded
placeholder="Search"
/>
</v-form>
</v-col>
<v-spacer />
<v-menu offset-y>
<template v-slot:activator="{ attrs, on }">
<span
class="mx-5 mr-10"
style="cursor: pointer"
v-bind="attrs"
v-on="on"
>
<v-badge content="3" color="red" offset-y="10" offset-x="10">
<v-icon>mdi-bell</v-icon>
</v-badge>
</span>
</template>
<v-list three-line width="250">
<template v-for="(item, index) in items">
<v-subheader
v-if="item.header"
:key="item.header"
v-text="item.header"
></v-subheader>
<v-divider
v-else-if="item.divider"
:key="index"
:inset="item.inset"
></v-divider>
<v-list-item v-else :key="item.title">
<v-list-item-avatar>
<v-img :src="item.avatar"></v-img>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title v-html="item.title"></v-list-item-title>
<v-list-item-subtitle
v-html="item.subtitle"
></v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</template>
</v-list>
</v-menu>
<v-menu offset-y>
<template v-slot:activator="{ attrs, on }">
<span style="cursor: pointer" v-bind="attrs" v-on="on">
<v-chip link>
<v-badge dot bottom color="green" offset-y="10" offset-x="10">
<v-avatar size="40">
<v-img src="https://randomuser.me/api/portraits/women/81.jpg" />
</v-avatar>
</v-badge>
<span class="ml-3">Jane Smith</span>
</v-chip>
</span>
</template>
<v-list width="250" class="py-0">
<v-list-item two-line>
<v-list-item-avatar>
<img src="https://randomuser.me/api/portraits/women/81.jpg" />
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>Jane Smith</v-list-item-title>
<v-list-item-subtitle>Logged In</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-divider />
<v-list-item link v-for="(menu, i) in menus" :key="i">
<v-list-item-icon>
<v-icon>{{ menu.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-title>
{{ menu.title }}
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-app-bar>
</template>
<script>
export default {
name: "Topbar",
data() {
return {
menus: [
{ title: "Profile", icon: "mdi-account" },
{ title: "Change Password", icon: "mdi-key" },
{ title: "Setting", icon: "mdi-cog" },
{ title: "Logout", icon: "mdi-logout" },
],
items: [
{
avatar: "https://cdn.vuetifyjs.com/images/lists/1.jpg",
title: "Brunch this weekend?",
subtitle: `<span class="text--primary">Ali Connors</span> &mdash; I'll be in your neighborhood doing errands this weekend. Do you want to hang out?`,
},
{ divider: true, inset: true },
{
avatar: "https://cdn.vuetifyjs.com/images/lists/2.jpg",
title: 'Summer BBQ <span class="grey--text text--lighten-1">4</span>',
subtitle: `<span class="text--primary">to Alex, Scott, Jennifer</span> &mdash; Wish I could come, but I'm out of town this weekend.`,
},
{ divider: true, inset: true },
{
avatar: "https://cdn.vuetifyjs.com/images/lists/3.jpg",
title: "Oui oui",
subtitle:
'<span class="text--primary">Sandra Adams</span> &mdash; Do you have Paris recommendations? Have you ever been?',
},
{ divider: true, inset: true },
{
avatar: "https://cdn.vuetifyjs.com/images/lists/4.jpg",
title: "Birthday gift",
subtitle:
'<span class="text--primary">Trevor Hansen</span> &mdash; Have any ideas about what we should get Heidi for her birthday?',
},
{ divider: true, inset: true },
{
avatar: "https://cdn.vuetifyjs.com/images/lists/5.jpg",
title: "Recipe to try",
subtitle:
'<span class="text--primary">Britta Holt</span> &mdash; We should eat this: Grate, Squash, Corn, and tomatillo Tacos.',
},
],
};
},
};
</script>
<style scoped></style>

12
owner-vue/src/main.js Normal file
View File

@@ -0,0 +1,12 @@
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import router from './router'
Vue.config.productionTip = false
new Vue({
vuetify,
router,
render: h => h(App)
}).$mount('#app')

View File

@@ -0,0 +1,11 @@
import '@mdi/font/css/materialdesignicons.css'
import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';
Vue.use(Vuetify);
export default new Vuetify({
icons: {
iconfont: 'mdi', // default - only for display purposes
},
});

View File

@@ -0,0 +1,20 @@
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'dashboard',
component: () => import('./../views/Dashboard')
},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router

View File

@@ -0,0 +1,5 @@
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>

View File

@@ -0,0 +1,212 @@
<template>
<div class="dashboard">
<v-subheader class="py-0 d-flex justify-space-between rounded-lg">
<h3>Dashboard</h3>
<v-btn color="success">
View Orders
</v-btn>
</v-subheader>
<br>
<v-row>
<v-col lg="7" cols="12">
<v-alert dense text type="success">
Login Successfully! Welcome to <strong>Web Burden</strong>
</v-alert>
<v-row>
<v-col lg="6" cols="12" v-for="(item,index) in activityLog" :key="index">
<v-card elevation="2" class="rounded-lg">
<v-card-text class="d-flex justify-space-between align-center">
<div>
<strong>{{ item.title }}</strong> <br>
<span>Last 3 weeks</span>
</div>
<v-avatar size="60" :color="item.color" style="border: 3px solid #444">
<span style="color: white">{{item.amount}} +</span>
</v-avatar>
</v-card-text>
<v-card-actions class="d-flex justify-space-between">
</v-card-actions>
</v-card>
</v-col>
</v-row>
</v-col>
<v-col cols="12" lg="5">
<v-card>
<v-card-title>Activities</v-card-title>
<v-card-text class="py-0">
<v-timeline align-top dense>
<v-timeline-item color="indigo" small>
<strong>5 Minuts ago</strong>
<div class="text-caption">
You have new order please check this out
</div>
</v-timeline-item>
<v-timeline-item color="green" small>
<strong>35 Minuts ago</strong>
<div class="text-caption mb-2">
A Product has delivered!
</div>
</v-timeline-item>
<v-timeline-item color="indigo" small>
<strong>44 Minuts ago</strong>
<div class="text-caption">
You have new order please check this out
</div>
</v-timeline-item>
</v-timeline>
</v-card-text>
</v-card>
</v-col>
<v-col>
<v-card>
<v-data-table
caption="Recent Order list"
:headers="headers"
:items="desserts"
:items-per-page="5"
class="elevation-1"
>
<template v-slot:item.action="">
<v-btn color="success" outlined small shaped >View</v-btn>
</template>
</v-data-table>
</v-card>
</v-col>
</v-row>
</div>
</template>
<script>
export default {
name: "Dashboard",
data() {
return {
activityLog: [
{title: 'Total Products', amount: 50, icon: 'mdi-account', color: 'cyan lighten-3'},
{title: 'Total Customer', amount: 3433, icon: 'mdi-account-group-outline', color: 'green darken-2'},
{title: 'Total Sale', amount: 3433, icon: 'mdi-account-group-outline', color: 'blue-grey darken-1'},
{
title: 'Pending Orders',
amount: 3433,
icon: 'mdi-account-group-outline',
color: 'deep-orange darken-1'
},
],
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
sortable: false,
value: 'name',
},
{text: 'Calories', value: 'calories'},
{text: 'Fat (g)', value: 'fat'},
{text: 'Carbs (g)', value: 'carbs'},
{text: 'Protein (g)', value: 'protein'},
{text: 'Iron (%)', value: 'iron'},
{text: 'Actions', value: 'action'},
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%',
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%',
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: '8%',
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
iron: '16%',
},
{
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
iron: '0%',
},
{
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
iron: '2%',
},
{
name: 'Honeycomb',
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
iron: '45%',
},
{
name: 'Donut',
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
iron: '22%',
},
{
name: 'KitKat',
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
iron: '6%',
},
],
}
},
methods: {
onButtonClick(item) {
console.log('click on ' + item.no)
}
}
}
</script>
<style scoped>
.overlap-icon {
position: absolute;
top: -33px;
text-align: center;
padding-top: 12px;
}
</style>

View File

@@ -0,0 +1,15 @@
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
</div>
</template>
<script>
// @ is an alias to /src
export default {
name: 'Home',
components: {
}
}
</script>

5
owner-vue/vue.config.js Normal file
View File

@@ -0,0 +1,5 @@
module.exports = {
transpileDependencies: [
'vuetify'
]
}