Changes for pitch2
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
Lukas Bachschwell 2020-04-09 13:30:46 +02:00
parent 7129e224aa
commit 94cbbf8895
Signed by: lbsadmin
GPG Key ID: CCC6AA87CC8DF425
7 changed files with 498 additions and 76 deletions

View File

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

View File

@ -1,99 +1,281 @@
<template> <template>
<div class="board-column"> <div class="drag-container">
<div class="board-column-header"> <ul class="drag-list">
{{ headerText }} <li
</div> v-for="stage in stages"
<draggable :key="stage.text"
:list="list" class="drag-column"
v-bind="$attrs" :class="{ ['drag-column-' + stage.text]: true }"
class="board-column-content" >
:set-data="setData" <span class="drag-column-header">
> <slot :name="stage.text">
<div v-for="element in list" :key="element.id" class="board-item"> <h2>{{ stage.text }}</h2>
{{ element.name }} {{ element.id }} </slot>
</div> </span>
</draggable> <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> </div>
</template> </template>
<script> <script>
import draggable from 'vuedraggable' import dragula from 'dragula'
import { Machine } from 'xstate'
export default { export default {
name: 'DragKanbanDemo', name: 'KanbanBoard',
components: {
draggable
},
props: { props: {
headerText: { stages: {
type: String,
default: 'Header'
},
options: {
type: Object,
default() {
return {}
}
},
list: {
type: Array, type: Array,
default() { required: true
return [] },
} 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: { methods: {
setData(dataTransfer) { getBlocks(status) {
// to avoid Firefox bug return this.localBlocks.filter(block => block.status === status)
// Detail see : https://github.com/RubaXa/Sortable/issues/1012 },
dataTransfer.setData('Text', '')
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> </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 { <style lang="scss">
height: 50px; .personImage {
line-height: 50px; height: 100px;
overflow: hidden; }
padding: 0 20px; $ease-out: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
text-align: center;
background: #333; ul.drag-list,
color: #fff; ul.drag-inner-list {
border-radius: 3px 3px 0 0; 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 { h2 {
height: auto; font-size: 0.8rem;
overflow: hidden; margin: 0;
border: 10px solid transparent; text-transform: uppercase;
min-height: 60px; font-weight: 600;
display: flex; }
justify-content: flex-start; }
flex-direction: column;
align-items: center;
.board-item { .drag-column-header {
cursor: pointer; display: flex;
width: 100%; align-items: center;
height: 64px; justify-content: space-between;
margin: 5px 0; padding: 10px;
background-color: #fff; }
text-align: left;
line-height: 54px; .drag-inner-list {
padding: 5px 10px; min-height: 50px;
box-sizing: border-box; color: white;
box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, 0.2); }
.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>

5
src/layout/clean.vue Normal file
View File

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

View File

@ -87,6 +87,18 @@ export default {
}).catch((err) => { }).catch((err) => {
console.log('ThaErr', 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) }, 1000)
}, },
beforeDestroy() { beforeDestroy() {
@ -100,6 +112,19 @@ export default {
async logout() { async logout() {
await this.$store.dispatch('user/logout') await this.$store.dispatch('user/logout')
this.$router.push(`/login?redirect=${this.$route.fullPath}`) 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)
})
} }
} }
} }

View File

@ -6,6 +6,7 @@ Vue.use(Router)
/* Layout */ /* Layout */
import Layout from '@/layout' import Layout from '@/layout'
import Clean from '@/layout/clean'
/* Router Modules */ /* Router Modules */
import componentsRouter from './modules/components' import componentsRouter from './modules/components'
@ -111,6 +112,20 @@ export const constantRoutes = [
meta: { title: 'Profil', icon: 'user', noCache: true } 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 }
}
]
} }
] ]

View File

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

View File

@ -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>