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