Compare commits
26 Commits
poc/redesi
...
chronos
| Author | SHA1 | Date |
|---|---|---|
stingl
|
d8ed85792a | 3 years ago |
|
stingl
|
b9d82dbf93 | 3 years ago |
|
stingl
|
0f08919318 | 3 years ago |
|
stingl
|
21bf3a7035 | 3 years ago |
|
stingl
|
3824776c7e | 3 years ago |
|
stingl
|
075e3a37e1 | 3 years ago |
|
stingl
|
4a5f06cc4a | 3 years ago |
 1nicerOli
|
d6053fb205 | 3 years ago |
|
Nero Ignis
|
b8860afe93 | 3 years ago |
|
Nero Ignis
|
cc91919da1 | 3 years ago |
|
Nero Ignis
|
1be7efaff7 | 3 years ago |
|
Nero Ignis
|
9ab4122bd6 | 3 years ago |
|
Nero Ignis
|
6fb5ba4220 | 3 years ago |
|
Nero Ignis
|
c636bb6f82 | 3 years ago |
|
Nero Ignis
|
287a335f21 | 3 years ago |
|
Nero Ignis
|
0c2cb6c44a | 3 years ago |
|
stingl
|
5e25410897 | 3 years ago |
|
stingl
|
e1ecf56258 | 3 years ago |
|
stingl
|
c5671f0fc7 | 3 years ago |
|
stingl
|
f7605e8084 | 3 years ago |
|
stingl
|
ed32f4ba13 | 3 years ago |
|
stingl
|
d97dce6905 | 4 years ago |
|
stingl
|
d3c13a37b2 | 4 years ago |
|
stingl
|
b449678ace | 4 years ago |
|
stingl
|
fd3a7b6911 | 4 years ago |
|
stingl
|
35b605a8f8 | 4 years ago |
13 changed files with 493 additions and 35 deletions
Binary file not shown.
@ -0,0 +1,190 @@ |
|||||||
|
<template> |
||||||
|
<div class="row"> |
||||||
|
<div class="col-md-12"> |
||||||
|
<div class="float-end"> |
||||||
|
<div v-if="$store.state.notes.length > 0" class="filter-wrapper"> |
||||||
|
<a href="javascript:" |
||||||
|
v-if="colorToFilter !== ''" |
||||||
|
v-on:click="colorToFilter = ''" |
||||||
|
class="color-change-button disable-filter-button" |
||||||
|
:style="'background-color: '+colorToFilter"> |
||||||
|
Filter aus |
||||||
|
</a> |
||||||
|
<span v-for="color in noteColors" |
||||||
|
v-bind:key="color"> |
||||||
|
<a href="javascript:" |
||||||
|
v-if="colorToFilter !== color" |
||||||
|
v-on:click="colorToFilter = color" |
||||||
|
class="color-change-button" |
||||||
|
:style="'background-color: ' + color"> |
||||||
|
<i class="fas fa-filter filter-icon"></i> |
||||||
|
</a> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
|
||||||
|
<a href="javascript:" v-on:click="createNote()" class="btn btn-sm btn-success">Neue Notiz</a> |
||||||
|
</div> |
||||||
|
<h5><i class="fa fa-pen"></i> Notizen</h5> |
||||||
|
</div> |
||||||
|
<template v-for="(note, noteIndex) in $store.state.notes" v-bind:key="noteIndex"> |
||||||
|
<div v-if="colorToFilter === '' || note.color === colorToFilter" class="col-sm-6 col-md-4 col-lg-3 card-box"> |
||||||
|
<div class="card"> |
||||||
|
<div class="card-body note" |
||||||
|
:style="'background-color:' + note.color ?? '#ffea77'"> |
||||||
|
<textarea v-model="note.body" spellcheck="false" |
||||||
|
@keydown="this.$store.commit('saveNotes')"></textarea> |
||||||
|
<div class="color-changer"> |
||||||
|
<span v-for="color in noteColors" v-bind:key="color"> |
||||||
|
<span href="javascript:" |
||||||
|
@click="changeColor(note, color);" |
||||||
|
class="color-change-button" |
||||||
|
v-if="color !== note.color" |
||||||
|
:style="'background-color: ' + color"> |
||||||
|
</span> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="float-end"> |
||||||
|
<a href="javascript:" class="delete-button" |
||||||
|
@click="$store.commit('deleteNote', noteIndex)"><i |
||||||
|
class="fas fa-trash"></i></a> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<span v-if="colorToFilter !== '' && !notesExistInFilteredColor"> |
||||||
|
Keine Notizen mit gewählter Farbe vorhanden<br> |
||||||
|
<a href="javascript:" |
||||||
|
class="color-change-button disable-filter-button" |
||||||
|
:style="'background-color: '+colorToFilter" |
||||||
|
v-on:click="colorToFilter = ''"> |
||||||
|
Filter ausschalten |
||||||
|
</a> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import axios from "axios"; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "Notes", |
||||||
|
data() { |
||||||
|
return { |
||||||
|
noteColors: ['#ffea77', '#ee6352', '#59cd90', '#3fa7d6', '#fac05e', '#f79d84'], |
||||||
|
colorToFilter: '' |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
createNote() { |
||||||
|
let component = this; |
||||||
|
|
||||||
|
axios.get( |
||||||
|
'https://api.quotable.io/random' |
||||||
|
).then((response) => { |
||||||
|
component.$store.commit('createNote', response.data.content + '\n - ' + response.data.author); |
||||||
|
component.$store.commit('saveNotes'); |
||||||
|
}).catch(() => { |
||||||
|
component.$store.commit('createNote', ''); |
||||||
|
component.$store.commit('saveNotes'); |
||||||
|
}) |
||||||
|
}, |
||||||
|
changeColor(note, color) { |
||||||
|
note.color = color; |
||||||
|
this.$store.commit('saveNotes'); |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
notesExistInFilteredColor() { |
||||||
|
let component = this; |
||||||
|
|
||||||
|
return this.$store.state.notes.filter((note) => { |
||||||
|
return note.color === component.colorToFilter; |
||||||
|
}).length; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.card-body { |
||||||
|
font-family: NotePaper, sans-serif; |
||||||
|
} |
||||||
|
|
||||||
|
#note-container { |
||||||
|
margin-top: 1em; |
||||||
|
} |
||||||
|
|
||||||
|
textarea { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
padding: 0; |
||||||
|
margin: 0; |
||||||
|
background-color: transparent; |
||||||
|
border: 0 solid transparent; |
||||||
|
min-height: 10em; |
||||||
|
} |
||||||
|
|
||||||
|
textarea:focus { |
||||||
|
outline: none; |
||||||
|
} |
||||||
|
|
||||||
|
.color-changer { |
||||||
|
position: absolute; |
||||||
|
bottom: -0.8em; |
||||||
|
z-index: 1000; |
||||||
|
} |
||||||
|
|
||||||
|
.color-change-button { |
||||||
|
margin-right: 0.2em; |
||||||
|
background-color: red; |
||||||
|
border-radius: 25px; |
||||||
|
padding: 0.2em 0.7em; |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
|
||||||
|
.color-change-button:hover { |
||||||
|
opacity: 0.9; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
.delete-button { |
||||||
|
position: absolute; |
||||||
|
bottom: -1.5em; |
||||||
|
right: 0.5em; |
||||||
|
|
||||||
|
text-align: right; |
||||||
|
background-color: red; |
||||||
|
border-radius: 25px; |
||||||
|
z-index: 1000; |
||||||
|
} |
||||||
|
|
||||||
|
.delete-button i { |
||||||
|
margin: 1em; |
||||||
|
color: black; |
||||||
|
} |
||||||
|
|
||||||
|
.delete-button:hover * { |
||||||
|
color: white; |
||||||
|
} |
||||||
|
|
||||||
|
.filter-icon { |
||||||
|
color: white; |
||||||
|
font-size: 0.7em; |
||||||
|
} |
||||||
|
|
||||||
|
.disable-filter-button { |
||||||
|
color: white; |
||||||
|
background-color: grey; |
||||||
|
} |
||||||
|
|
||||||
|
.filter-wrapper { |
||||||
|
display: inline-block; |
||||||
|
margin: 0.3em 1em; |
||||||
|
} |
||||||
|
|
||||||
|
.card-box { |
||||||
|
margin-top: 0.5em; |
||||||
|
margin-bottom: 0.5em; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,120 @@ |
|||||||
|
<template> |
||||||
|
<div class="offcanvas offcanvas-end" |
||||||
|
id="tasksCanvas" |
||||||
|
tabindex="-1" |
||||||
|
role="dialog" |
||||||
|
aria-labelledby="showTasksCanvas" |
||||||
|
aria-hidden="true"> |
||||||
|
<div class="offcanvas-header"> |
||||||
|
<h5><i class="fas fa-clipboard"></i> Tasks</h5> |
||||||
|
</div> |
||||||
|
<div class="offcanvas-body"> |
||||||
|
<div class="form-group"> |
||||||
|
<input type="text" id="newTaskInput" class="form-control" |
||||||
|
v-model="newTaskInput" placeholder="Neuer Task" v-on:keyup.enter="addTask()"/> |
||||||
|
</div> |
||||||
|
<ul class="list-group" v-if="$store.state.tasks && $store.state.tasks.length > 0"> |
||||||
|
<template v-for="(task, taskIndex) in $store.state.tasks" v-bind:key="taskIndex"> |
||||||
|
<li class="list-group-item" v-if="!task.done"> |
||||||
|
<span class="float-end"> |
||||||
|
<a href="javascript:"> |
||||||
|
<i class="fas fa-trash" @click="deleteTask(taskIndex)"></i> |
||||||
|
</a> |
||||||
|
</span> |
||||||
|
<a href="javascript:" @click="toggleTask(task)"> |
||||||
|
<i class="far fa-square"></i> |
||||||
|
</a> {{ task.name }} |
||||||
|
<div class="form-group"> |
||||||
|
<div class="float-end"> |
||||||
|
{{ task.percentDone }}% erledigt |
||||||
|
</div> |
||||||
|
<input type="range" |
||||||
|
class="range range-success range-tasks" |
||||||
|
min="0" |
||||||
|
max="100" |
||||||
|
step="5" |
||||||
|
v-model="task.percentDone" |
||||||
|
@change="checkForCompletionOfTask(task)"> |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
</template> |
||||||
|
</ul> |
||||||
|
<br/> |
||||||
|
<ul class="list-group" v-if="$store.state.tasks && $store.state.tasks.length > 0"> |
||||||
|
<template v-for="(task, taskIndex) in $store.state.tasks" v-bind:key="taskIndex"> |
||||||
|
<li class="list-group-item" v-if="task.done"> |
||||||
|
<span class="float-end"> |
||||||
|
<a href="javascript:"> |
||||||
|
<i class="fas fa-trash" @click="deleteTask(taskIndex)"></i> |
||||||
|
</a> |
||||||
|
</span> |
||||||
|
<a href="javascript:" @click="toggleTask(task)"> |
||||||
|
<i class="far fa-check-square"></i> |
||||||
|
</a> <span class="finished-task">{{ task.name }}</span> |
||||||
|
</li> |
||||||
|
</template> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import moment from "moment"; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "Tasks", |
||||||
|
data() { |
||||||
|
return { |
||||||
|
newTaskInput: '' |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
deleteTask(taskIndex) { |
||||||
|
this.$store.state.tasks.splice(taskIndex, 1) |
||||||
|
this.$store.commit('saveTasks'); |
||||||
|
}, |
||||||
|
addTask() { |
||||||
|
if (this.newTaskInput.length <= 0 || this.newTaskInput.trim() === '') { |
||||||
|
return false; |
||||||
|
} |
||||||
|
|
||||||
|
if (!this.$store.state.tasks) { |
||||||
|
this.$store.state.tasks = []; |
||||||
|
} |
||||||
|
|
||||||
|
this.$store.state.tasks.pushToBeginning({ |
||||||
|
name: this.newTaskInput, |
||||||
|
done: false, |
||||||
|
created: moment(), |
||||||
|
percentDone: 0, |
||||||
|
finished: null |
||||||
|
}); |
||||||
|
|
||||||
|
this.newTaskInput = ''; |
||||||
|
this.$store.commit('saveTasks'); |
||||||
|
}, |
||||||
|
toggleTask(task) { |
||||||
|
task.done = !task.done; |
||||||
|
|
||||||
|
if (task.done) { |
||||||
|
task.finished = moment(); |
||||||
|
task.percentDone = 100; |
||||||
|
} else { |
||||||
|
task.finished = null; |
||||||
|
task.percentDone = 0; |
||||||
|
} |
||||||
|
|
||||||
|
this.$store.commit('saveTasks'); |
||||||
|
}, |
||||||
|
checkForCompletionOfTask(task) { |
||||||
|
task.done = task.percentDone === 100; |
||||||
|
this.$forceUpdate(); |
||||||
|
this.$store.commit('saveTasks'); |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
||||||
Loading…
Reference in new issue