Changes for pitch2

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>