Compare commits
1 Commits
chronos
...
poc/redesi
| Author | SHA1 | Date |
|---|---|---|
 Nero Ignis
|
00faf546fb | 4 years ago |
14 changed files with 251 additions and 17326 deletions
Binary file not shown.
@ -1,190 +0,0 @@ |
|||||||
<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> |
|
||||||
@ -1,120 +0,0 @@ |
|||||||
<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