Changes for pitch2

package.json

@@ -39,6 +39,7 @@
     "axios": "0.18.1",
     "clipboard": "2.0.4",
     "codemirror": "5.45.0",
+    "dragula": "^3.7.2",
     "driver.js": "0.9.5",
     "dropzone": "5.5.1",
     "echarts": "4.2.1",
@@ -61,7 +62,8 @@
     "vue-splitpane": "1.0.4",
     "vuedraggable": "2.20.0",
     "vuex": "3.1.0",
-    "xlsx": "0.14.1"
+    "xlsx": "0.14.1",
+    "xstate": "^4.8.0"
   },
   "devDependencies": {
     "@babel/core": "7.0.0",

src/components/Kanban/index.vue

@@ -1,99 +1,281 @@
 <template>
-  <div class="board-column">
-    <div class="board-column-header">
-      {{ headerText }}
-    </div>
-    <draggable
-      :list="list"
-      v-bind="$attrs"
-      class="board-column-content"
-      :set-data="setData"
-    >
-      <div v-for="element in list" :key="element.id" class="board-item">
-        {{ element.name }} {{ element.id }}
-      </div>
-    </draggable>
+  <div class="drag-container">
+    <ul class="drag-list">
+      <li
+        v-for="stage in stages"
+        :key="stage.text"
+        class="drag-column"
+        :class="{ ['drag-column-' + stage.text]: true }"
+      >
+        <span class="drag-column-header">
+          <slot :name="stage.text">
+            <h2>{{ stage.text }}</h2>
+          </slot>
+        </span>
+        <img v-if="stage.image" class="personImage" :src="stage.image">
+        <div class="drag-options" />
+        <ul ref="list" class="drag-inner-list" :data-status="stage.text">
+          <li
+            v-for="block in getBlocks(stage.text)"
+            :key="block.id"
+            class="drag-item"
+            :data-block-id="block.id"
+          >
+            <slot :name="block.id">
+              <strong>{{ block.title }}</strong>
+            </slot>
+          </li>
+        </ul>
+        <div class="drag-column-footer">
+          <slot :name="`footer-${stage.text}`" />
+        </div>
+      </li>
+    </ul>
   </div>
 </template>
 
 <script>
-import draggable from 'vuedraggable'
+import dragula from 'dragula'
+import { Machine } from 'xstate'
 
 export default {
-  name: 'DragKanbanDemo',
-  components: {
-    draggable
-  },
+  name: 'KanbanBoard',
+
   props: {
-    headerText: {
-      type: String,
-      default: 'Header'
-    },
-    options: {
-      type: Object,
-      default() {
-        return {}
-      }
-    },
-    list: {
+    stages: {
       type: Array,
-      default() {
-        return []
-      }
+      required: true
+    },
+    blocks: {
+      type: Array,
+      required: true
+    },
+    config: {
+      type: Object,
+      default: () => ({})
+    },
+    stateMachineConfig: {
+      type: Object,
+      default: null
     }
   },
+
+  data() {
+    return {
+      machine: null
+    }
+  },
+
+  computed: {
+    localBlocks() {
+      return this.blocks
+    }
+  },
+
+  updated() {
+    this.drake.containers = this.$refs.list
+  },
+
+  mounted() {
+    this.config.accepts = this.config.accepts || this.accepts
+    this.drake = dragula(this.$refs.list, this.config)
+      .on('drag', el => {
+        el.classList.add('is-moving')
+      })
+      .on('drop', (block, list, source) => {
+        let index = 0
+        for (index = 0; index < list.children.length; index += 1) {
+          if (list.children[index].classList.contains('is-moving')) break
+        }
+
+        let newState = list.dataset.status
+
+        if (this.machine) {
+          const transition = this.findTransition(list, source)
+          if (!transition) return
+          newState = this.machine.transition(source.dataset.status, transition)
+            .value
+        }
+
+        this.$emit('update-block', block.dataset.blockId, newState, index)
+      })
+      .on('dragend', el => {
+        el.classList.remove('is-moving')
+
+        window.setTimeout(() => {
+          el.classList.add('is-moved')
+          window.setTimeout(() => {
+            el.classList.remove('is-moved')
+          }, 600)
+        }, 100)
+      })
+  },
+
+  created() {
+    if (!this.stateMachineConfig) return
+    this.machine = Machine(this.stateMachineConfig)
+  },
+
   methods: {
-    setData(dataTransfer) {
-      // to avoid Firefox bug
-      // Detail see : https://github.com/RubaXa/Sortable/issues/1012
-      dataTransfer.setData('Text', '')
+    getBlocks(status) {
+      return this.localBlocks.filter(block => block.status === status)
+    },
+
+    findPossibleTransitions(sourceState) {
+      return this.machine.config.states[sourceState].on || {}
+    },
+
+    findTransition(target, source) {
+      const targetState = target.dataset.status
+      const sourceState = source.dataset.status
+      const possibleTransitions = this.findPossibleTransitions(sourceState)
+      return Object.keys(possibleTransitions).find(
+        transition => possibleTransitions[transition] === targetState
+      )
+    },
+
+    accepts(block, target, source) {
+      if (!this.machine) return true
+      const targetState = target.dataset.status
+      const sourceState = source.dataset.status
+      return Object.values(this.findPossibleTransitions(sourceState)).includes(
+        targetState
+      )
     }
   }
 }
 </script>
-<style lang="scss" scoped>
-.board-column {
-  min-width: 300px;
-  min-height: 100px;
-  height: auto;
-  overflow: hidden;
-  background: #f0f0f0;
-  border-radius: 3px;
 
-  .board-column-header {
-    height: 50px;
-    line-height: 50px;
-    overflow: hidden;
-    padding: 0 20px;
-    text-align: center;
-    background: #333;
-    color: #fff;
-    border-radius: 3px 3px 0 0;
+<style lang="scss">
+.personImage {
+  height: 100px;
+}
+$ease-out: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+
+ul.drag-list,
+ul.drag-inner-list {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.drag-container {
+  max-width: 1000px;
+  margin: 20px auto;
+}
+
+.drag-list {
+  display: flex;
+  align-items: flex-start;
+
+  @media (max-width: 690px) {
+    display: block;
+  }
+}
+
+.drag-column {
+  flex: 1;
+  margin: 0 10px;
+  position: relative;
+  background: rgba(black, 0.2);
+  overflow: hidden;
+
+  @media (max-width: 690px) {
+    margin-bottom: 30px;
   }
 
-  .board-column-content {
-    height: auto;
-    overflow: hidden;
-    border: 10px solid transparent;
-    min-height: 60px;
-    display: flex;
-    justify-content: flex-start;
-    flex-direction: column;
-    align-items: center;
+  h2 {
+    font-size: 0.8rem;
+    margin: 0;
+    text-transform: uppercase;
+    font-weight: 600;
+  }
+}
 
-    .board-item {
-      cursor: pointer;
-      width: 100%;
-      height: 64px;
-      margin: 5px 0;
-      background-color: #fff;
-      text-align: left;
-      line-height: 54px;
-      padding: 5px 10px;
-      box-sizing: border-box;
-      box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, 0.2);
+.drag-column-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px;
+}
+
+.drag-inner-list {
+  min-height: 50px;
+  color: white;
+}
+
+.drag-item {
+  padding: 10px;
+  margin: 10px;
+  //height: 100px;
+  background: rgba(black, 0.4);
+  transition: $ease-out;
+
+  &.is-moving {
+    transform: scale(1.5);
+    background: rgba(black, 0.8);
+  }
+}
+
+.drag-header-more {
+  cursor: pointer;
+}
+
+.drag-options {
+  position: absolute;
+  top: 44px;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+  transform: translateX(100%);
+  opacity: 0;
+  transition: $ease-out;
+
+  &.active {
+    transform: translateX(0);
+    opacity: 1;
+  }
+
+  &-label {
+    display: block;
+    margin: 0 0 5px 0;
+
+    input {
+      opacity: 0.6;
+    }
+
+    span {
+      display: inline-block;
+      font-size: 0.9rem;
+      font-weight: 400;
+      margin-left: 5px;
     }
   }
 }
-</style>
 
+/* Dragula CSS  */
+
+.gu-mirror {
+  position: fixed !important;
+  margin: 0 !important;
+  z-index: 9999 !important;
+  opacity: 0.8;
+  list-style-type: none;
+}
+
+.gu-hide {
+  display: none !important;
+}
+
+.gu-unselectable {
+  -webkit-user-select: none !important;
+  -moz-user-select: none !important;
+  -ms-user-select: none !important;
+  user-select: none !important;
+}
+
+.gu-transit {
+  opacity: 0.2;
+}
+</style>

src/layout/clean.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="app-wrapper">
+    <router-view />
+  </div>
+</template>

src/layout/components/Navbar.vue

@@ -87,6 +87,18 @@ export default {
       }).catch((err) => {
         console.log('ThaErr', err)
       })
+
+      request({
+        url: 'https://joinbot.tk/kvs/gameopen',
+        method: 'get',
+        headers: { 'x-api-key': 'PMl`&xWpZ1vE)M]G;{8qIXx4k!ce|n' }
+      }).then((result) => {
+        if (result === 1) {
+          this.openGame()
+        }
+      }).catch((err) => {
+        console.log('ThaErr', err)
+      })
     }, 1000)
   },
   beforeDestroy() {
@@ -100,6 +112,19 @@ export default {
     async logout() {
       await this.$store.dispatch('user/logout')
       this.$router.push(`/login?redirect=${this.$route.fullPath}`)
+    },
+    openGame() {
+      window.open('/#/draggame/index', '', '"width=800,height=800"')
+      request({
+        url: 'https://joinbot.tk/kvs/gameopen',
+        method: 'post',
+        headers: { 'x-api-key': 'PMl`&xWpZ1vE)M]G;{8qIXx4k!ce|n' },
+        data: '0'
+      }).then((result) => {
+
+      }).catch((err) => {
+        console.log('ThaErr', err)
+      })
     }
   }
 }

src/router/index.js

@@ -6,6 +6,7 @@ Vue.use(Router)
 
 /* Layout */
 import Layout from '@/layout'
+import Clean from '@/layout/clean'
 
 /* Router Modules */
 import componentsRouter from './modules/components'
@@ -111,6 +112,20 @@ export const constantRoutes = [
         meta: { title: 'Profil', icon: 'user', noCache: true }
       }
     ]
+  },
+  {
+    path: '/draggame',
+    component: Clean,
+    redirect: '/draggame/index',
+    hidden: true,
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/draggame/index'),
+        name: 'Draggame',
+        meta: { title: 'Draggame', icon: 'user', noCache: true }
+      }
+    ]
   }
 ]
 

src/views/dashboard/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="dashboard-container">
+    <button @click="open">Game</button>
     <component :is="currentRole" />
   </div>
 </template>
@@ -26,6 +27,11 @@ export default {
     if (!this.roles.includes('admin')) {
       this.currentRole = 'editorDashboard'
     }
+  },
+  methods: {
+    open() {
+      window.open('/#/draggame/index', '', '"width=800,height=800"')
+    }
   }
 }
 </script>

src/views/draggame/index.vue

@@ -0,0 +1,187 @@
+<template>
+  <div id="app">
+    <h1>Aufgabe</h1>
+    <p>
+      Sie sing Manager in einem Softwareunternehmen und aktuell stehen wieder
+      einige neue Aufgaben an. <br>Da sie über ein tolles Team an Spezialisten
+      verfügen können sie diese Aufgaben sofort an die richtigen Leute zuteilen.
+      <br>Wie würden sie die Aufgaben am besten unter ihen Kollegen verteilen
+      ? <br><br>
+      Ziehen sie die Aufgaben dazu einfach von der Spalte <b>Aufgaben</b> in die
+      Spalen der jeweiligen MitarbeiterInnen
+      <br>
+    </p>
+    <KanBan
+      :stages="stages"
+      :blocks="blocks"
+      @update-block="updateBlock"
+      @isDone="isDoneCallback"
+    />
+    <button v-if="isDone" class="doneButton" @click="returnToBot">
+      Fertig
+    </button>
+  </div>
+</template>
+
+<script>
+import request from '@/utils/request'
+
+import KanBan from '@/components/Kanban'
+export default {
+  name: 'App',
+  components: {
+    KanBan
+  },
+  data() {
+    return {
+      isDone: false,
+      stages: [
+        {
+          text: 'Aufgaben'
+        },
+        { text: 'Frontend Developerin' },
+        { text: 'Grafikerin' },
+        {
+          text: 'Scrum Master',
+          image: '@/assets/joe.png'
+        },
+        { text: 'Backend Developer' },
+        { text: 'Support Techniker' }
+      ],
+      blocks: [
+        {
+          id: 1,
+          status: 'Aufgaben',
+          title: 'Landingpage Bugfix',
+          text: '...'
+        },
+        {
+          id: 2,
+          status: 'Aufgaben',
+          title: 'Logo überarbeiten',
+          text: '...'
+        },
+        {
+          id: 3,
+          status: 'Aufgaben',
+          title: 'Task',
+          text: '...'
+        },
+        {
+          id: 4,
+          status: 'Aufgaben',
+          title: 'Task',
+          text: '...'
+        },
+        {
+          id: 5,
+          status: 'Aufgaben',
+          title: 'Task',
+          text: '...'
+        },
+        {
+          id: 6,
+          status: 'Aufgaben',
+          title: 'Task',
+          text: '...'
+        },
+        {
+          id: 7,
+          status: 'Aufgaben',
+          title: 'Task',
+          text: '...'
+        },
+        {
+          id: 8,
+          status: 'Aufgaben',
+          title: 'Task',
+          text: '...'
+        },
+        {
+          id: 9,
+          status: 'Aufgaben',
+          title: 'Task',
+          text: '...'
+        }
+      ]
+    }
+  },
+  methods: {
+    returnToBot() {
+      request({
+        url: 'https://joinbot.tk/kvs/botmessage',
+        method: 'get',
+        headers: { 'x-api-key': 'PMl`&xWpZ1vE)M]G;{8qIXx4k!ce|n' }
+      }).then((result) => {
+        window.close()
+      }).catch((err) => {
+        console.log('ThaErr', err)
+      })
+    },
+    isDoneCallback(isDone) {
+      this.isDone = isDone
+    },
+    updateBlock(id, status, index) {
+      // Update specified status
+      const currentBlock = this.blocks.find(b => b.id === Number(id))
+      currentBlock.status = status
+
+      // remove currnet block
+      let currentList = this.blocks.filter(b => b.id !== Number(id))
+      const otherLists = currentList.filter(b => b.status !== status)
+      currentList = currentList.filter(b => b.status === status)
+
+      currentList.splice(index, 0, currentBlock)
+      currentList = currentList.concat(otherLists)
+      this.blocks = currentList
+      this.isDone =
+        this.blocks.filter(block => block.status === 'Aufgaben').length === 0
+      // localStorage.setItem("blocks", JSON.stringify(this.blocks));
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+
+.drag-column-Aufgaben {
+  background-color: red;
+  .drag-column-header > h2 {
+    color: white;
+    font-size: 1rem !important;
+  }
+}
+
+.doneButton {
+  box-shadow: 0px 10px 14px -7px #236069;
+  background: linear-gradient(to bottom, #2b84e3 5%, #3f8fcc 100%);
+  background-color: #2b84e3;
+  border-width: 0px;
+  border-radius: 8px;
+  display: inline-block;
+  cursor: pointer;
+  color: #ffffff;
+  font-family: Arial;
+  font-size: 20px;
+  font-weight: bold;
+  padding: 13px 32px;
+  text-decoration: none;
+  text-shadow: 0px 1px 0px #3d768a;
+}
+.doneButton:hover {
+  background: linear-gradient(to bottom, #3f8fcc 5%, #2b84e3 100%);
+  background-color: #3f8fcc;
+}
+.doneButton:active {
+  position: relative;
+  top: 1px;
+}
+</style>