From 48648abda89fe5ae6d560f2873744a1eb26a0ff7 Mon Sep 17 00:00:00 2001
From: Lukas Bachschwell <lukas@lbsfilm.at>
Date: Fri, 3 Jan 2020 23:40:01 +0100
Subject: [PATCH] Kontactbutton, and cleanup

---
 README.md                                     |   9 +-
 src/router/index.js                           |   4 +-
 src/views/dashboard/admin/index.vue           |  44 +------
 src/views/find/components/BoxCard.vue         |   4 +-
 src/views/profile/components/RaddarChart.vue  | 111 ++++++++++++++++++
 src/views/profile/components/UserCard.vue     |   8 +-
 src/views/profile/components/mixins/resize.js |  55 +++++++++
 7 files changed, 181 insertions(+), 54 deletions(-)
 create mode 100644 src/views/profile/components/RaddarChart.vue
 create mode 100644 src/views/profile/components/mixins/resize.js

diff --git a/README.md b/README.md
index cee15c9..03efdb7 100644
--- a/README.md
+++ b/README.md
@@ -15,12 +15,7 @@ https://botpress.io/docs/tutorials/webchat-embedding
 
 
 ## TODO:
-Adminpage:
 
-Display grouping of skills ?!
+## some botpress hints
 
-Seperate skill select ?
-
-Add a ADD button to team members
-
-Implement Chatbot Logic
\ No newline at end of file
+https://www.evernote.com/shard/s42/client/snv?noteGuid=1820f9f8-6171-4284-b564-fdc08bd690de&noteKey=ec4c82cffe92c0ff&sn=https%3A%2F%2Fwww.evernote.com%2Fshard%2Fs42%2Fsh%2F1820f9f8-6171-4284-b564-fdc08bd690de%2Fec4c82cffe92c0ff&title=Development%2Bof%2Ba%2BBotpress%2BSkill
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index b894511..bb55a52 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -122,6 +122,7 @@ export const asyncRoutes = [
   {
     path: '/', // find
     component: Layout,
+    redirect: '/index',
     alwaysShow: false,
     children: [
       {
@@ -139,10 +140,9 @@ export const asyncRoutes = [
   {
     path: '/dashboard',
     component: Layout,
-    redirect: '/dashboard',
     children: [
       {
-        path: 'dashboard',
+        path: 'index',
         component: () => import('@/views/dashboard/index'),
         name: 'Dashboard',
         meta: { title: 'Dashboard', icon: 'dashboard', affix: true }
diff --git a/src/views/dashboard/admin/index.vue b/src/views/dashboard/admin/index.vue
index d7e6794..d0a0807 100644
--- a/src/views/dashboard/admin/index.vue
+++ b/src/views/dashboard/admin/index.vue
@@ -5,48 +5,12 @@
     <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
       <line-chart :chart-data="lineChartData" />
     </el-row>
-
-    <el-row :gutter="32">
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <raddar-chart />
-        </div>
-      </el-col>
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <pie-chart />
-        </div>
-      </el-col>
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <bar-chart />
-        </div>
-      </el-col>
-    </el-row>
-
-    <el-row :gutter="8">
-      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
-        <transaction-table />
-      </el-col>
-      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
-        <todo-list />
-      </el-col>
-      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
-        <box-card />
-      </el-col>
-    </el-row>
   </div>
 </template>
 
 <script>
 import PanelGroup from './components/PanelGroup'
 import LineChart from './components/LineChart'
-import RaddarChart from './components/RaddarChart'
-import PieChart from './components/PieChart'
-import BarChart from './components/BarChart'
-import TransactionTable from './components/TransactionTable'
-import TodoList from './components/TodoList'
-import BoxCard from './components/BoxCard'
 
 const lineChartData = {
   newVisitis: {
@@ -71,13 +35,7 @@ export default {
   name: 'DashboardAdmin',
   components: {
     PanelGroup,
-    LineChart,
-    RaddarChart,
-    PieChart,
-    BarChart,
-    TransactionTable,
-    TodoList,
-    BoxCard
+    LineChart
   },
   data() {
     return {
diff --git a/src/views/find/components/BoxCard.vue b/src/views/find/components/BoxCard.vue
index 6c3061f..32479b3 100644
--- a/src/views/find/components/BoxCard.vue
+++ b/src/views/find/components/BoxCard.vue
@@ -15,7 +15,9 @@
               <span>{{ skill.name }}</span>
               <el-progress :percentage="skill.strength" />
             </div>
-
+            <div>
+              <el-button type="primary">Kontaktieren</el-button>
+            </div>
           </div>
         </el-main>
       </el-container>
diff --git a/src/views/profile/components/RaddarChart.vue b/src/views/profile/components/RaddarChart.vue
new file mode 100644
index 0000000..90314aa
--- /dev/null
+++ b/src/views/profile/components/RaddarChart.vue
@@ -0,0 +1,111 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from './mixins/resize'
+
+const animationDuration = 3000
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '300px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        radar: {
+          radius: '66%',
+          center: ['50%', '42%'],
+          splitNumber: 8,
+          splitArea: {
+            areaStyle: {
+              color: 'rgba(127,95,132,.3)',
+              opacity: 1,
+              shadowBlur: 45,
+              shadowColor: 'rgba(0,0,0,.5)',
+              shadowOffsetX: 0,
+              shadowOffsetY: 15
+            }
+          },
+          indicator: [
+            { name: 'Sales', max: 10000 },
+            { name: 'Administration', max: 20000 },
+            { name: 'Information Techology', max: 20000 },
+            { name: 'Customer Support', max: 20000 },
+            { name: 'Development', max: 20000 },
+            { name: 'Marketing', max: 20000 }
+          ]
+        },
+        series: [{
+          type: 'radar',
+          symbolSize: 0,
+          areaStyle: {
+            normal: {
+              shadowBlur: 13,
+              shadowColor: 'rgba(0,0,0,.2)',
+              shadowOffsetX: 0,
+              shadowOffsetY: 10,
+              opacity: 1
+            }
+          },
+          data: [
+            {
+              value: [5000, 7000, 12000, 11000, 15000, 14000],
+              name: 'Allocated Budget'
+            },
+            {
+              value: [4000, 9000, 15000, 15000, 13000, 11000],
+              name: 'Expected Spending'
+            },
+            {
+              value: [5500, 11000, 12000, 15000, 12000, 12000],
+              name: 'Actual Spending'
+            }
+          ],
+          animationDuration: animationDuration
+        }]
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/profile/components/UserCard.vue b/src/views/profile/components/UserCard.vue
index 0ee2bf2..2483f7b 100644
--- a/src/views/profile/components/UserCard.vue
+++ b/src/views/profile/components/UserCard.vue
@@ -47,15 +47,21 @@
           </div>
         </div>
       </div>
+      <el-col>
+        <div class="chart-wrapper">
+          <raddar-chart />
+        </div>
+      </el-col>
     </div>
   </el-card>
 </template>
 
 <script>
 import PanThumb from '@/components/PanThumb'
+import RaddarChart from './RaddarChart'
 
 export default {
-  components: { PanThumb },
+  components: { PanThumb, RaddarChart },
   props: {
     user: {
       type: Object,
diff --git a/src/views/profile/components/mixins/resize.js b/src/views/profile/components/mixins/resize.js
new file mode 100644
index 0000000..234953b
--- /dev/null
+++ b/src/views/profile/components/mixins/resize.js
@@ -0,0 +1,55 @@
+import { debounce } from '@/utils'
+
+export default {
+  data() {
+    return {
+      $_sidebarElm: null,
+      $_resizeHandler: null
+    }
+  },
+  mounted() {
+    this.$_resizeHandler = debounce(() => {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    }, 100)
+    this.$_initResizeEvent()
+    this.$_initSidebarResizeEvent()
+  },
+  beforeDestroy() {
+    this.$_destroyResizeEvent()
+    this.$_destroySidebarResizeEvent()
+  },
+  // to fixed bug when cached by keep-alive
+  // https://github.com/PanJiaChen/vue-element-admin/issues/2116
+  activated() {
+    this.$_initResizeEvent()
+    this.$_initSidebarResizeEvent()
+  },
+  deactivated() {
+    this.$_destroyResizeEvent()
+    this.$_destroySidebarResizeEvent()
+  },
+  methods: {
+    // use $_ for mixins properties
+    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
+    $_initResizeEvent() {
+      window.addEventListener('resize', this.$_resizeHandler)
+    },
+    $_destroyResizeEvent() {
+      window.removeEventListener('resize', this.$_resizeHandler)
+    },
+    $_sidebarResizeHandler(e) {
+      if (e.propertyName === 'width') {
+        this.$_resizeHandler()
+      }
+    },
+    $_initSidebarResizeEvent() {
+      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
+      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    $_destroySidebarResizeEvent() {
+      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
+    }
+  }
+}