From d054a905991a57d3136788656ce9b0cb4deb817d Mon Sep 17 00:00:00 2001 From: LEE JEONG EUN <dlwjddms0102@hanmail.net> Date: Mon, 2 Dec 2019 13:06:08 +0900 Subject: [PATCH] jeongeun commit --- src/components/core/Drawer.vue | 27 ++-- src/router/paths.js | 15 +- src/views/Dashboard.vue | 270 +++------------------------------ 3 files changed, 40 insertions(+), 272 deletions(-) diff --git a/src/components/core/Drawer.vue b/src/components/core/Drawer.vue index 0753bb2..3a20e4a 100644 --- a/src/components/core/Drawer.vue +++ b/src/components/core/Drawer.vue @@ -7,22 +7,24 @@ <v-img :src="logo" height="34" contain/> </v-list-tile-avatar> <v-list-tile-title class="title"> - Vuetify MD + 우 미 알 </v-list-tile-title> </v-list-tile> <v-divider/> + <v-list-tile v-for="(link, i) in links" :key="i" :to="link.to" :active-class="color" avatar class="v-list-item"> <v-list-tile-action> <v-icon>{{ link.icon }}</v-icon> </v-list-tile-action> <v-list-tile-title v-text="link.text"/> </v-list-tile> - <v-list-tile active-class="success" class="v-list-item v-list__tile--buy" to="/upgrade"> + + <v-list-tile active-class="success" class="v-list-item v-list__tile--buy" to="/"> <v-list-tile-action> <v-icon>mdi-package-up</v-icon> </v-list-tile-action> <v-list-tile-title class="font-weight-light"> - Upgrade To PRO + Log Out </v-list-tile-title> </v-list-tile> </v-layout> @@ -32,10 +34,7 @@ <script> // Utilities -import { - mapMutations, - mapState -} from 'vuex' +import {mapMutations, mapState} from 'vuex' export default { props: { @@ -50,22 +49,22 @@ export default { { to: '/', icon: 'mdi-view-dashboard', - text: 'Dashboard' + text: 'Home' }, { - to: '/user-profile', + to: '/finderboard', icon: 'mdi-account', - text: 'User Profile' + text: 'Finder Board' }, { - to: '/table-list', + to: '/losterboard', icon: 'mdi-clipboard-outline', - text: 'Table List' + text: 'Loster Board' }, { - to: '/typography', + to: '/mypage', icon: 'mdi-format-font', - text: 'Typography' + text: 'My Page' }, { to: '/icons', diff --git a/src/router/paths.js b/src/router/paths.js index 6b364dd..f340d52 100644 --- a/src/router/paths.js +++ b/src/router/paths.js @@ -7,20 +7,21 @@ export default [ { path: '', // Relative to /src/views + name: 'Home', view: 'Dashboard' }, { - path: '/user-profile', - name: 'User Profile', - view: 'UserProfile' + path: '/finderboard', + name: 'FinderBoard', + view: 'TableList' }, { - path: '/table-list', - name: 'Table List', - view: 'TableList' + path: '/losterboard', + name: 'LosterBoard', + view: 'UserProfile' }, { - path: '/typography', + path: '/mypage', view: 'Typography' }, { diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue index 048cb78..1b5f5f3 100644 --- a/src/views/Dashboard.vue +++ b/src/views/Dashboard.vue @@ -1,65 +1,9 @@ <template> <v-container fill-height fluid grid-list-xl> <v-layout wrap> - <v-flex md12 sm12 lg4> - <material-chart-card :data="dailySalesChart.data" :options="dailySalesChart.options" color="info" type="Line"> - <h4 class="title font-weight-light">Daily Sales</h4> - <p class="category d-inline-flex font-weight-light"> - <v-icon color="green" small> - mdi-arrow-up - </v-icon> - <span class="green--text">55%</span> - increase in today's sales - </p> - - <template slot="actions"> - <v-icon class="mr-2" small> - mdi-clock-outline - </v-icon> - <span class="caption grey--text font-weight-light">updated 4 minutes ago</span> - </template> - </material-chart-card> - </v-flex> - <v-flex md12 sm12 lg4> - <material-chart-card :data="emailsSubscriptionChart.data" :options="emailsSubscriptionChart.options" :responsive-options="emailsSubscriptionChart.responsiveOptions" color="red" type="Bar"> - <h4 class="title font-weight-light">Email Subscription</h4> - <p class="category d-inline-flex font-weight-light">Last Campaign Performance</p> - - <template slot="actions"> - <v-icon class="mr-2" small> - mdi-clock-outline - </v-icon> - <span class="caption grey--text font-weight-light">updated 10 minutes ago</span> - </template> - </material-chart-card> - </v-flex> - <v-flex md12 sm12 lg4> - <material-chart-card :data="dataCompletedTasksChart.data" :options="dataCompletedTasksChart.options" color="green" type="Line"> - <h3 class="title font-weight-light">Completed Tasks</h3> - <p class="category d-inline-flex font-weight-light">Last Last Campaign Performance</p> - - <template slot="actions"> - <v-icon class="mr-2" small> - mdi-clock-outline - </v-icon> - <span class="caption grey--text font-weight-light">campaign sent 26 minutes ago</span> - </template> - </material-chart-card> - </v-flex> - <v-flex sm6 xs12 md6 lg3> - <material-stats-card color="green" icon="mdi-store" title="Revenue" value="$34,245" sub-icon="mdi-calendar" sub-text="Last 24 Hours"/> - </v-flex> - <v-flex sm6 xs12 md6 lg3> - <material-stats-card color="orange" icon="mdi-content-copy" title="Used Space" value="49/50" small-value="GB" sub-icon="mdi-alert" sub-icon-color="error" sub-text="Get More Space..." sub-text-color="text-primary"/> - </v-flex> - <v-flex sm6 xs12 md6 lg3> - <material-stats-card color="red" icon="mdi-information-outline" title="Fixed Issues" value="75" sub-icon="mdi-tag" sub-text="Tracked from Github"/> - </v-flex> - <v-flex sm6 xs12 md6 lg3> - <material-stats-card color="info" icon="mdi-twitter" title="Followers" value="+245" sub-icon="mdi-update" sub-text="Just Updated"/> - </v-flex> + <v-flex md12 lg6> - <material-card color="orange" title="발견 게시글" text="발견 게시글 중 최신 글 5개 입니다."> + <material-card color="orange" title="Finder Board"> <v-data-table :headers="headers" :items="items" hide-actions> <template slot="headerCell" slot-scope="{ header }"> <span class="font-weight-light text-warning text--darken-3" v-text="header.text"/> @@ -74,103 +18,24 @@ </v-data-table> </material-card> </v-flex> - <v-flex md12 lg6> - <material-card class="card-tabs" color="green"> - <v-flex slot="header"> - <v-tabs v-model="tabs" color="transparent" slider-color="white"> - <span class="subheading font-weight-light mr-3" style="align-self: center">Tasks:</span> - <v-tab class="mr-3"> - <v-icon class="mr-2">mdi-bug</v-icon> - Bugs - </v-tab> - <v-tab class="mr-3"> - <v-icon class="mr-2">mdi-code-tags</v-icon> - Website - </v-tab> - <v-tab> - <v-icon class="mr-2">mdi-cloud</v-icon> - Server - </v-tab> - </v-tabs> - </v-flex> - <v-tabs-items v-model="tabs"> - <v-tab-item v-for="n in 3" :key="n"> - <v-list three-line> - <v-list-tile @click="complete(0)"> - <v-list-tile-action> - <v-checkbox :value="list[0]" color="green"/> - </v-list-tile-action> - <v-list-tile-title> - Sign contract for "What are conference organized afraid of?" - </v-list-tile-title> - <div class="d-flex"> - <v-tooltip top content-class="top"> - <v-btn slot="activator" class="v-btn--simple" color="success" icon> - <v-icon color="primary">mdi-pencil</v-icon> - </v-btn> - <span>Edit</span> - </v-tooltip> - <v-tooltip top content-class="top"> - <v-btn slot="activator" class="v-btn--simple" color="danger" icon> - <v-icon color="error">mdi-close</v-icon> - </v-btn> - <span>Close</span> - </v-tooltip> - </div> - </v-list-tile> - <v-divider/> - <v-list-tile @click="complete(1)"> - <v-list-tile-action> - <v-checkbox :value="list[1]" color="success"/> - </v-list-tile-action> - <v-list-tile-title> - Lines From Great Russian Literature? Or E-mails From My Boss? - </v-list-tile-title> - <div class="d-flex"> - <v-tooltip top content-class="top"> - <v-btn slot="activator" class="v-btn--simple" color="success" icon> - <v-icon color="primary">mdi-pencil</v-icon> - </v-btn> - <span>Edit</span> - </v-tooltip> - - <v-tooltip top content-class="top"> - <v-btn slot="activator" class="v-btn--simple" color="danger" icon> - <v-icon color="error">mdi-close</v-icon> - </v-btn> - <span>Close</span> - </v-tooltip> - </div> - </v-list-tile> - <v-divider/> - <v-list-tile @click="complete(2)"> - <v-list-tile-action> - <v-checkbox :value="list[2]" color="success"/> - </v-list-tile-action> - <v-list-tile-title> - Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit - </v-list-tile-title> - <div class="d-flex"> - <v-tooltip top content-class="top"> - <v-btn slot="activator" class="v-btn--simple" color="success" icon> - <v-icon color="primary">mdi-pencil</v-icon> - </v-btn> - <span>Edit</span> - </v-tooltip> - <v-tooltip top content-class="top"> - <v-btn slot="activator" class="v-btn--simple" color="danger" icon> - <v-icon color="error">mdi-close</v-icon> - </v-btn> - <span>Close</span> - </v-tooltip> - </div> - </v-list-tile> - </v-list> - </v-tab-item> - </v-tabs-items> + <v-flex md12 lg6> + <material-card color="green" title="Loster Board"> + <v-data-table :headers="headers" :items="items" hide-actions> + <template slot="headerCell" slot-scope="{ header }"> + <span class="font-weight-light text-warning text--darken-3" v-text="header.text"/> + </template> + <template slot="items" slot-scope="{ index, item }"> + <td>{{ index + 1 }}</td> + <td>{{ item.name }}</td> + <td class="text-xs-right">{{ item.salary }}</td> + <td class="text-xs-right">{{ item.country }}</td> + <td class="text-xs-right">{{ item.city }}</td> + </template> + </v-data-table> </material-card> </v-flex> + </v-layout> </v-container> </template> @@ -179,80 +44,6 @@ export default { data () { return { - dailySalesChart: { - data: { - labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'], - series: [ - [12, 17, 7, 17, 23, 18, 38] - ] - }, - options: { - lineSmooth: this.$chartist.Interpolation.cardinal({ - tension: 0 - }), - low: 0, - high: 50, // creative tim: we recommend you to set the high sa the biggest value + something for a better look - chartPadding: { - top: 0, - right: 0, - bottom: 0, - left: 0 - } - } - }, - dataCompletedTasksChart: { - data: { - labels: ['12am', '3pm', '6pm', '9pm', '12pm', '3am', '6am', '9am'], - series: [ - [230, 750, 450, 300, 280, 240, 200, 190] - ] - }, - options: { - lineSmooth: this.$chartist.Interpolation.cardinal({ - tension: 0 - }), - low: 0, - high: 1000, // creative tim: we recommend you to set the high sa the biggest value + something for a better look - chartPadding: { - top: 0, - right: 0, - bottom: 0, - left: 0 - } - } - }, - emailsSubscriptionChart: { - data: { - labels: ['Ja', 'Fe', 'Ma', 'Ap', 'Mai', 'Ju', 'Jul', 'Au', 'Se', 'Oc', 'No', 'De'], - series: [ - [542, 443, 320, 780, 553, 453, 326, 434, 568, 610, 756, 895] - - ] - }, - options: { - axisX: { - showGrid: false - }, - low: 0, - high: 1000, - chartPadding: { - top: 0, - right: 5, - bottom: 0, - left: 0 - } - }, - responsiveOptions: [ - ['screen and (max-width: 640px)', { - seriesBarDistance: 5, - axisX: { - labelInterpolationFnc: function (value) { - return value[0] - } - } - }] - ] - }, headers: [ { sortable: false, @@ -295,35 +86,12 @@ export default { country: 'Curaçao', city: 'Sinaai-Waas', salary: '$23,738' - }, { - name: 'Sage Rodriguez', - country: 'Netherlands', - city: 'Overland Park', - salary: '$56,142' - }, { - name: 'Philip Chanley', - country: 'Korea, South', - city: 'Gloucester', - salary: '$38,735' - }, { - name: 'Doris Greene', - country: 'Malawi', - city: 'Feldkirchen in Kārnten', - salary: '$63,542' } - ], - tabs: 0, - list: { - 0: false, - 1: false, - 2: false - } + ] } }, methods: { - complete (index) { - this.list[index] = !this.list[index] - } + } } </script> -- GitLab