2020-04-09 11:30:46 +00:00
|
|
|
<template>
|
|
|
|
<div id="app">
|
|
|
|
<h1>Aufgabe</h1>
|
|
|
|
<p>
|
2020-04-09 15:53:51 +00:00
|
|
|
Sie sind Manager in einem Softwareunternehmen und aktuell stehen wieder
|
2020-04-09 11:30:46 +00:00
|
|
|
einige neue Aufgaben an. <br>Da sie über ein tolles Team an Spezialisten
|
2020-04-09 15:53:51 +00:00
|
|
|
verfügen können sie diese Aufgaben sofort an die richtigen Leute verteilen.
|
|
|
|
<br>Wie würden sie die Aufgaben am besten unter ihren Kollegen verteilen
|
2020-04-09 11:30:46 +00:00
|
|
|
? <br><br>
|
|
|
|
Ziehen sie die Aufgaben dazu einfach von der Spalte <b>Aufgaben</b> in die
|
2020-04-09 15:53:51 +00:00
|
|
|
Spalten der jeweiligen MitarbeiterInnen
|
2020-04-09 11:30:46 +00:00
|
|
|
<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'
|
|
|
|
},
|
2020-04-09 13:48:04 +00:00
|
|
|
{ text: 'Frontend Developerin',
|
|
|
|
image: '/frontend.png' },
|
|
|
|
{ text: 'Support Techniker', image: '/support.png' },
|
|
|
|
|
|
|
|
{ text: 'Grafikerin', image: '/grafiks.png' },
|
2020-04-09 11:30:46 +00:00
|
|
|
{
|
|
|
|
text: 'Scrum Master',
|
2020-04-09 13:48:04 +00:00
|
|
|
image: '/bussinesslady.png'
|
2020-04-09 11:30:46 +00:00
|
|
|
},
|
2020-04-09 13:48:04 +00:00
|
|
|
{ text: 'Backend Developer', image: '/coder.png' }
|
2020-04-09 11:30:46 +00:00
|
|
|
],
|
|
|
|
blocks: [
|
|
|
|
{
|
|
|
|
id: 1,
|
|
|
|
status: 'Aufgaben',
|
|
|
|
title: 'Landingpage Bugfix',
|
|
|
|
text: '...'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 2,
|
|
|
|
status: 'Aufgaben',
|
|
|
|
title: 'Logo überarbeiten',
|
|
|
|
text: '...'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 3,
|
|
|
|
status: 'Aufgaben',
|
2020-04-09 13:48:04 +00:00
|
|
|
title: 'Neues Datenbankfeld',
|
2020-04-09 11:30:46 +00:00
|
|
|
text: '...'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 4,
|
|
|
|
status: 'Aufgaben',
|
2020-04-09 13:48:04 +00:00
|
|
|
title: 'Sprint 7 planen',
|
2020-04-09 11:30:46 +00:00
|
|
|
text: '...'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 5,
|
|
|
|
status: 'Aufgaben',
|
2020-04-09 13:48:04 +00:00
|
|
|
title: 'Neues Pitchdeck',
|
2020-04-09 11:30:46 +00:00
|
|
|
text: '...'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 6,
|
|
|
|
status: 'Aufgaben',
|
2020-04-09 13:48:04 +00:00
|
|
|
title: 'Kunde meldet Datenverlust',
|
2020-04-09 11:30:46 +00:00
|
|
|
text: '...'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 7,
|
|
|
|
status: 'Aufgaben',
|
2020-04-09 13:48:04 +00:00
|
|
|
title: 'Tippfehler in Produkt Übersetzung',
|
2020-04-09 11:30:46 +00:00
|
|
|
text: '...'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 8,
|
|
|
|
status: 'Aufgaben',
|
2020-04-09 13:48:04 +00:00
|
|
|
title: 'API Tests überprüfen',
|
2020-04-09 11:30:46 +00:00
|
|
|
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>
|