1nicerOli
/
timetrack-router
1
0
Fork 0
Code Issues 26 Pull Requests Projects Releases Wiki Activity
Browse Source

WIP

poc/redesign-trackers
Nero Ignis 4 years ago
parent
f30bff34c4
commit
2250cd7666
13 changed files with 2425 additions and 500 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2106
      package-lock.json
  2. 2
      package.json
  3. 174
      public/app.css
  4. 113
      src/App.vue
  5. 176
      src/css/app.scss
  6. 18
      src/helpers.js
  7. 1
      src/main.js
  8. 6
      src/views/Archive.vue
  9. 134
      src/views/History.vue
  10. 23
      src/views/HistoryForTracker.vue
  11. 15
      src/views/Menu.vue
  12. 141
      src/views/TasksForTracker.vue
  13. 16
      src/views/Trackers.vue

2106
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
Unescape View File

@ -11,6 +11,7 @@
"@popperjs/core": "^2.11.0", "@popperjs/core": "^2.11.0",
"axios": "^0.24.0", "axios": "^0.24.0",
"bootstrap": "^5.1.3", "bootstrap": "^5.1.3",
"bootswatch": "^5.1.3",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"fontawesome": "^5.6.3", "fontawesome": "^5.6.3",
"izitoast": "^1.4.0", "izitoast": "^1.4.0",
@ -29,6 +30,7 @@
"babel-eslint": "^10.1.0", "babel-eslint": "^10.1.0",
"eslint": "^6.7.2", "eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0", "eslint-plugin-vue": "^7.0.0",
"node-sass": "^6.0.1",
"sass": "^1.43.5", "sass": "^1.43.5",
"sass-loader": "^10.2.0" "sass-loader": "^10.2.0"
}, },

174
public/app.css
Unescape View File

@ -1,174 +0,0 @@
body {
background-color: #e7e7e7;
overflow-y: auto;
}
.container {
margin: 20px auto 20px auto;
}
.tracker-action-button {
margin-top: 10px;
padding: 1px 5px 1px 5px;
width: 100%;
}
.delete-tracker-button {
margin-top: 10px;
margin-bottom: 15px;
padding: 1px 5px 1px 5px;
width: 100%;
}
.side-button-right {
font-size: 1.7em;
}
.add-tracker-button {
font-size: 1.7em;
}
.navbar-brand {
width: 100%;
}
.logo-nav {
max-height: 35px;
margin: 5px;
}
nav {
border-radius: 45px;
}
nav, .card {
margin-bottom: 20px;
}
.modal-content {
max-width: 1000px;
}
.btn-full-width {
width: 100%;
}
.timeTracking {
height: 635px;
overflow-y: scroll;
margin-bottom: 0;
padding-bottom: 0;
}
.ticket-history {
list-style: none;
padding-left: 0;
}
.trackingNameField {
max-height: 1em;
margin-bottom: 1px;
}
#settingsModal .modal-dialog,
#showTicketsModal .modal-dialog,
#showArchivedTicketsModal .modal-dialog {
max-width: 900px;
}
.btn {
text-transform: initial !important;
}
.brand-title {
margin-left: 2em;
margin-top: 0.5em;
}
#settingsModal .form-group {
margin-bottom: 0.5em;
}
.search-field {
display: inline-block;
max-width: 85%;
margin-left: 5%;
}
#left-menu {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 90px;
align-content: center;
background-color: #bdbdbd;
border-right: 1px solid grey;
padding: 0;
}
#content {
margin-left: 90px;
max-width: 85vw;
}
.bottom-menu-item {
width: 100%;
margin-bottom: 1em;
}
.btn-switcher {
width: 100%;
}
.container {
margin-top: 1em;
}
.form-control {
margin-bottom: 1em;
}
.switch-portal-button {
margin-bottom: 0.5em;
}
.col-board-inner {
border-right: 1px solid grey;
}
#board-view h5 {
text-align: center;
text-transform: uppercase;
color: dimgrey;
line-height: 0.7em;
word-spacing: 1px;
}
.snippet-space-item {
display: none;
}
.CodeMirror {
border-radius: 5px;
margin-top: 1em;
}
.btn-wide {
width: 5em;
margin-top: 1em;
margin-left: 1em;
}
.finished-task {
text-decoration: line-through;
}
#trackerTasksModal a li {
color: black !important;
}
#trackerTasksModal input[type=range] {
width: 100%;
}

113
src/App.vue
Unescape View File

@ -1,9 +1,10 @@
<template> <template>
<div class="container" id="content"> <div class="container" id="content">
<link rel="stylesheet" :href="'https://bootswatch.com/5/materia/bootstrap.min.css'">
<router-view/> <router-view/>
</div> </div>
<TasksForTracker/>
<History/>
<Menu/> <Menu/>
</template> </template>
@ -13,10 +14,14 @@ import iziToast from 'izitoast'
import axios from 'axios' import axios from 'axios'
import bootstrap from 'bootstrap' import bootstrap from 'bootstrap'
import Menu from "./views/Menu"; import Menu from "./views/Menu";
import History from "./views/History";
import TasksForTracker from "./views/TasksForTracker";
export default { export default {
el: '#root', el: '#root',
components: { components: {
TasksForTracker,
History,
Menu Menu
}, },
data() { data() {
@ -181,63 +186,6 @@ export default {
return 'https://' + finalPortalName + '.vemap.com'; return 'https://' + finalPortalName + '.vemap.com';
}, },
collectDataForDay(subtractDays = 0, customDate = false) {
let day = moment().subtract(subtractDays, "days").format("MMM Do YY");
let collection = [];
if (customDate) {
day = moment(customDate).format("MMM Do YY");
}
this.trackers.forEach((tracker) => {
tracker.history.forEach((historyEntry) => {
if (moment(historyEntry.trackingStarted).format("MMM Do YY") === day) {
let newEntry = {};
Object.assign(newEntry, historyEntry);
newEntry.tracker = tracker.number;
let existingEntry = this.getCollectionItemWithValue(collection, 'tracker', tracker.number);
if (existingEntry) {
existingEntry.minutes = Number(existingEntry.minutes) + Number(newEntry.minutes);
} else {
collection.pushToBeginning(newEntry);
}
}
});
});
this.archive.forEach((tracker) => {
tracker.history.forEach((historyEntry) => {
if (moment(historyEntry.trackingStarted).format("MMM Do YY") === day) {
let newEntry = {};
Object.assign(newEntry, historyEntry);
newEntry.tracker = tracker.number;
let existingEntry = this.getCollectionItemWithValue(collection, 'tracker', tracker.number);
if (existingEntry) {
existingEntry.minutes = Number(existingEntry.minutes) + Number(newEntry.minutes);
} else {
collection.pushToBeginning(newEntry);
}
}
});
});
return collection;
},
getCollectionItemWithValue(collection, property, value) {
let found = false;
collection.forEach((item) => {
if (item[property] === value) {
found = item;
}
})
return found;
},
sendPortalChangeRequest() { sendPortalChangeRequest() {
let component = this; let component = this;
let publicDBParam = this.publicDB ? '&publicDB=1' : ''; let publicDBParam = this.publicDB ? '&publicDB=1' : '';
@ -320,48 +268,6 @@ export default {
validateBooleans(value) { validateBooleans(value) {
return value === 'true' || value === true; return value === 'true' || value === true;
}, },
addTask() {
if (this.newTaskInput.length <= 0 || this.newTaskInput.trim() === '') {
return false;
}
if (!this.selectedTracker.tasks) {
this.selectedTracker.tasks = [];
}
this.selectedTracker.tasks.pushToBeginning({
name: this.newTaskInput,
done: false,
created: moment(),
percentDone: 0,
finished: null
});
this.newTaskInput = '';
this.$store.commit('saveTrackers');
},
deleteTask(taskIndex) {
this.selectedTracker.tasks.splice(taskIndex, 1)
this.$store.commit('saveTrackers');
},
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('saveTrackers');
},
checkForCompletionOfTask(task) {
task.done = task.percentDone == 100;
this.$forceUpdate();
this.$store.commit('saveTrackers');
},
}, },
beforeUnmount() { beforeUnmount() {
this.stopActiveTracker(); this.stopActiveTracker();
@ -422,12 +328,5 @@ function playSound(sound, extension = null) {
</script> </script>
<style> <style>
body {
background-color: #e7e7e7;
}
.container {
margin: 20px auto 20px 60px;
height: 100vh;
}
</style> </style>

176
src/css/app.scss
Unescape View File

@ -0,0 +1,176 @@
@import '~izitoast/dist/css/iziToast.min.css';
@import "~bootswatch/dist/materia/bootstrap.min.css";
body {
background-color: #e7e7e7;
}
.container {
margin: 20px auto 20px auto;
}
.tracker-action-button {
margin-top: 10px;
padding: 1px 5px 1px 5px;
width: 100%;
}
.delete-tracker-button {
margin-top: 10px;
margin-bottom: 15px;
padding: 1px 5px 1px 5px;
width: 100%;
}
.side-button-right {
font-size: 1.7em;
}
.add-tracker-button {
font-size: 1.7em;
}
.navbar-brand {
width: 100%;
}
.logo-nav {
max-height: 35px;
margin: 5px;
}
nav {
border-radius: 45px;
}
nav, .card {
margin-bottom: 20px;
}
.modal-content {
max-width: 1000px;
}
.btn-full-width {
width: 100%;
}
.timeTracking {
height: 635px;
overflow-y: scroll;
margin-bottom: 0;
padding-bottom: 0;
}
.ticket-history {
list-style: none;
padding-left: 0;
}
.trackingNameField {
max-height: 1em;
margin-bottom: 1px;
}
#settingsModal .modal-dialog,
#showTicketsModal .modal-dialog,
#showArchivedTicketsModal .modal-dialog {
max-width: 900px;
}
.btn {
text-transform: initial !important;
}
.brand-title {
margin-left: 2em;
margin-top: 0.5em;
}
#settingsModal .form-group {
margin-bottom: 0.5em;
}
.search-field {
display: inline-block;
max-width: 85%;
margin-left: 5%;
}
#left-menu {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 90px;
align-content: center;
background-color: #bdbdbd;
border-right: 1px solid grey;
padding: 0;
}
#content {
margin-left: 90px;
max-width: 85vw;
}
.bottom-menu-item {
width: 100%;
margin-bottom: 1em;
}
.btn-switcher {
width: 100%;
}
.container {
margin-top: 1em;
}
.form-control {
margin-bottom: 1em;
}
.switch-portal-button {
margin-bottom: 0.5em;
}
.col-board-inner {
border-right: 1px solid grey;
}
#board-view h5 {
text-align: center;
text-transform: uppercase;
color: dimgrey;
line-height: 0.7em;
word-spacing: 1px;
}
.snippet-space-item {
display: none;
}
.CodeMirror {
border-radius: 5px;
margin-top: 1em;
}
.btn-wide {
width: 5em;
margin-top: 1em;
margin-left: 1em;
}
.finished-task {
text-decoration: line-through;
}
#trackerTasksModal a li {
color: black !important;
}
#trackerTasksModal input[type=range] {
width: 100%;
}

18
src/helpers.js
Unescape View File

@ -1,18 +0,0 @@
function oneOf(collection) {
return collection[Math.floor(Math.random()*collection.length)];
}
function playSound(sound, extension = null) {
let audio = new Audio('/timetrack/assets/audio/' + sound + (extension ?? '.mp3'));
audio.play();
}
function getRandomID() {
let text = '';
const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
for (let i = 0; i < 10; i++) {
text += possible.charAt(Math.floor(Math.random() * possible.length));
}
return text;
}

1
src/main.js
Unescape View File

@ -2,5 +2,6 @@ import { createApp } from 'vue'
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'
import store from './store' import store from './store'
import './css/app.scss'
createApp(App).use(store).use(router).mount('#app') createApp(App).use(store).use(router).mount('#app')

6
src/views/Archive.vue
Unescape View File

@ -148,10 +148,4 @@ export default {
<style scoped> <style scoped>
.tracker-action-button {
margin-top: 10px;
padding: 1px 5px 1px 5px;
width: 100%;
}
</style> </style>

134
src/views/History.vue
Unescape View File

@ -1,28 +1,28 @@
<template> <template>
<div class="modal fade" id="pastDaysModal" tabindex="-1" role="dialog" aria-labelledby="pastDaysModalLabel" <div class="offcanvas offcanvas-end" id="pastDaysModal" tabindex="-1" role="dialog"
aria-labelledby="pastDaysModalLabel"
aria-hidden="true"> aria-hidden="true">
<div class="modal-dialog" role="document"> <div class="offcanvas-header">
<div class="modal-content"> <h5><i class="fas fa-random"></i> Buchungsverlauf</h5>
<div class="modal-header"> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<h5 class="modal-title"><i class="fas fa-random"></i> Buchungsverlauf</h5> </div>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <div class="offcanvas-body">
</div> <div class="row">
<div class="modal-body"> <div class="col-12">
<div class="row"> <div class="form-group">
<div class="col-12"> <div class="form-group">
<div class="form-group"> <h6 for="date">Datum</h6>
<div class="form-group"> <input id="date" type="date" class="form-control" v-model="customDateForPastDays">
<h6 for="date">Datum</h6>
<input id="date" type="date" class="form-control" v-model="customDateForPastDays">
</div>
<ul class="list-group">
<li class="list-group-item" v-for="entry in collectDataForDay(0, customDateForPastDays)" :style="entry.archive ? 'background-color: lightgrey;' : ''">
{{ entry.tracker }}
<span class="float-end">{{ timeWithPostFix(entry.minutes) }}</span>
</li>
</ul>
</div>
</div> </div>
<ul class="list-group">
<li class="list-group-item"
:style="entry.archive ? 'background-color: lightgrey;' : ''"
v-for="(entry, entryIndex) in collectDataForDay(0, customDateForPastDays)"
v-bind:key="entryIndex">
{{ entry.tracker }}
<span class="float-end">{{ timeWithPostFix(entry.minutes) }}</span>
</li>
</ul>
</div> </div>
</div> </div>
</div> </div>
@ -31,8 +31,96 @@
</template> </template>
<script> <script>
import moment from "moment";
export default { export default {
name: "History" name: "History",
data() {
return {
customDateForPastDays: null,
}
},
mounted() {
this.customDateForPastDays = moment().format();
},
methods: {
collectDataForDay(subtractDays = 0, customDate = false) {
let day = moment().subtract(subtractDays, "days").format("MMM Do YY");
let collection = [];
if (customDate) {
day = moment(customDate).format("MMM Do YY");
}
this.$store.state.trackers.forEach((tracker) => {
tracker.history.forEach((historyEntry) => {
if (moment(historyEntry.trackingStarted).format("MMM Do YY") === day) {
let newEntry = {};
Object.assign(newEntry, historyEntry);
newEntry.tracker = tracker.number;
let existingEntry = this.getCollectionItemWithValue(collection, 'tracker', tracker.number);
if (existingEntry) {
existingEntry.minutes = Number(existingEntry.minutes) + Number(newEntry.minutes);
} else {
collection.pushToBeginning(newEntry);
}
}
});
});
this.$store.state.archive.forEach((tracker) => {
tracker.history.forEach((historyEntry) => {
if (moment(historyEntry.trackingStarted).format("MMM Do YY") === day) {
let newEntry = {};
Object.assign(newEntry, historyEntry);
newEntry.tracker = tracker.number;
let existingEntry = this.getCollectionItemWithValue(collection, 'tracker', tracker.number);
if (existingEntry) {
existingEntry.minutes = Number(existingEntry.minutes) + Number(newEntry.minutes);
} else {
collection.pushToBeginning(newEntry);
}
}
});
});
return collection;
},
getCollectionItemWithValue(collection, property, value) {
let found = false;
collection.forEach((item) => {
if (item[property] === value) {
found = item;
}
})
return found;
},
timeWithPostFix(time) {
let postFix = ' Minute';
if (time >= 480 && this.showPT) {
postFix = ' PT';
time = (time / 480).toFixed(1);
} else if (time >= 60 || this.$store.state.settings.dontShowMinutes) {
postFix = ' Stunde';
time = (time / 60).toFixed(2);
}
let plural = '';
if (((time > 1 || time <= 0) || this.$store.state.settings.dontShowMinutes) && postFix !== ' PT') {
plural = 'n'
}
return time + postFix + plural;
},
}
} }
</script> </script>

23
src/views/HistoryForTracker.vue
Unescape View File

@ -1,15 +1,17 @@
<template> <template>
<div class="modal fade" id="historyModal" tabindex="-1" role="dialog" aria-labelledby="historyModalLabel" <div class="modal fade" id="historyModal" tabindex="-1" role="dialog" aria-labelledby="historyModalLabel"
aria-hidden="true" v-if="selectedTracker"> aria-hidden="true" v-if="$store.state.selectedTracker">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title"><i class="fas fa-history"></i> History von {{ selectedTracker.number }}</h5> <h5 class="modal-title"><i class="fas fa-history"></i> History von
{{ $store.state.selectedTracker.number }}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<ul class="list-group tracker-history"> <ul class="list-group tracker-history">
<template v-for="(tracker, historyIndex) in selectedTracker.history"> <template v-for="(tracker, historyIndex) in $store.state.selectedTracker.history"
v-bind:key="historyIndex">
<li class="list-group-item" v-if="!tracker.manually"> <li class="list-group-item" v-if="!tracker.manually">
<div> <div>
<div class="float-end" :title="exactTimestamp(tracker.trackingStarted)"> <div class="float-end" :title="exactTimestamp(tracker.trackingStarted)">
@ -35,7 +37,8 @@
<br/> <br/>
</li> </li>
</template> </template>
<template v-for="(tracker, historyIndex) in selectedTracker.history"> <template v-for="(tracker, historyIndex) in $store.state.selectedTracker.history"
v-bind:key="historyIndex">
<li class="list-group-item bg-light" <li class="list-group-item bg-light"
v-if="tracker.manually"> v-if="tracker.manually">
<div> <div>
@ -50,7 +53,8 @@
</div> </div>
Zeit: Zeit:
</div> </div>
<a href="javascript:" @click="deleteHistoryEntry(trackerIndex, historyIndex)" class="float-end"> <a href="javascript:" @click="deleteHistoryEntry(trackerIndex, historyIndex)"
class="float-end">
<i class="fas fa-trash"></i> <i class="fas fa-trash"></i>
</a> </a>
<br/> <br/>
@ -64,8 +68,15 @@
</template> </template>
<script> <script>
import moment from "moment";
export default { export default {
name: "HistoryForTracker" name: "HistoryForTracker",
methods: {
exactTimestamp(date) {
return moment(date).format('LTS');
}
}
} }
</script> </script>

15
src/views/Menu.vue
Unescape View File

@ -49,10 +49,10 @@
<i class="fas fa-archive"></i> <i class="fas fa-archive"></i>
</router-link> </router-link>
</div> </div>
<div class=""> <div class="" v-if="($store.state.trackers.length + $store.state.archive.length) > 0">
<a type="button" <a type="button"
class="btn btn-info text-light bottom-menu-item" class="btn btn-info text-light bottom-menu-item"
data-bs-toggle="modal" data-bs-toggle="offcanvas"
data-bs-target="#pastDaysModal" data-bs-target="#pastDaysModal"
data-bs-placement="top" data-bs-placement="top"
title="Buchungsverlauf"> title="Buchungsverlauf">
@ -75,8 +75,6 @@
</template> </template>
<script> <script>
import bootstrap from "bootstrap";
export default { export default {
name: "Menu", name: "Menu",
props: { props: {
@ -91,15 +89,6 @@ export default {
this.$store.commit('createTimebox'); this.$store.commit('createTimebox');
this.$store.commit('saveTrackers'); this.$store.commit('saveTrackers');
}, },
openTasksForTracker(tracker) {
this.selectedTracker = tracker;
this.$forceUpdate();
setTimeout(() => {
let tasksModal = new bootstrap.Modal(document.getElementById('trackerTasksModal'));
tasksModal.toggle();
}, 50);
}
} }
} }
</script> </script>

141
src/views/TasksForTracker.vue
Unescape View File

@ -1,72 +1,119 @@
<template> <template>
<div class="modal modal-fullscreen fade" <div class="offcanvas offcanvas-end"
v-if="selectedTracker"
id="trackerTasksModal" id="trackerTasksModal"
tabindex="-1" tabindex="-1"
role="dialog" role="dialog"
v-if="$store.state.selectedTracker"
aria-labelledby="showTrackerTasksModal" aria-labelledby="showTrackerTasksModal"
aria-hidden="true"> aria-hidden="true">
<div class="modal-dialog" role="document"> <div class="offcanvas-header">
<div class="modal-content"> <h5 class="modal-title"><i class="fas fa-clock"></i> Tasks für {{ $store.state.selectedTracker.number }}</h5>
<div class="modal-header"> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<h5 class="modal-title"><i class="fas fa-clock"></i> Tasks für {{ selectedTracker.number }}</h5> </div>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <div class="modal-body">
</div> <div class="form-group">
<div class="modal-body"> <input type="text" id="newTaskInput" class="form-control"
<div class="form-group"> v-model="newTaskInput" placeholder="Neuer Task" v-on:keyup.enter="addTask()"/>
<input type="text" id="newTaskInput" class="form-control" </div>
v-model="newTaskInput" placeholder="Neuer Task" v-on:keyup.enter="addTask()"/> <ul class="list-group" v-if="$store.state.selectedTracker.tasks && $store.state.selectedTracker.tasks.length > 0">
</div> <template v-for="(task, taskIndex) in $store.state.selectedTracker.tasks" v-bind:key="taskIndex">
<ul class="list-group" v-if="selectedTracker.tasks && selectedTracker.tasks.length > 0"> <li class="list-group-item" v-if="!task.done">
<template v-for="(task, taskIndex) in selectedTracker.tasks">
<li class="list-group-item" v-if="!task.done">
<span class="float-end"> <span class="float-end">
<a href="javascript:"> <a href="javascript:">
<i class="fas fa-trash" @click="deleteTask(taskIndex)"></i> <i class="fas fa-trash" @click="deleteTask(taskIndex)"></i>
</a> </a>
</span> </span>
<a href="javascript:" @click="toggleTask(task)"> <a href="javascript:" @click="toggleTask(task)">
<i class="far fa-square"></i> <i class="far fa-square"></i>
</a> {{ task.name }} </a> {{ task.name }}
<div class="form-group"> <div class="form-group">
<div class="float-end"> <div class="float-end">
{{ task.percentDone }}% erledigt {{ task.percentDone }}% erledigt
</div> </div>
<input type="range" <input type="range"
class="range range-success range-tasks" class="range range-success range-tasks"
min="0" min="0"
max="100" max="100"
step="5" step="5"
v-model="task.percentDone" v-model="task.percentDone"
@change="checkForCompletionOfTask(task)"> @change="checkForCompletionOfTask(task)">
</div> </div>
</li> </li>
</template> </template>
</ul> </ul>
<br/> <br/>
<ul class="list-group" v-if="selectedTracker.tasks && selectedTracker.tasks.length > 0"> <ul class="list-group" v-if="$store.state.selectedTracker.tasks && $store.state.selectedTracker.tasks.length > 0">
<template v-for="(task, taskIndex) in selectedTracker.tasks"> <template v-for="(task, taskIndex) in $store.state.selectedTracker.tasks" v-bind:key="taskIndex">
<li class="list-group-item" v-if="task.done"> <li class="list-group-item" v-if="task.done">
<span class="float-end"> <span class="float-end">
<a href="javascript:"> <a href="javascript:">
<i class="fas fa-trash" @click="deleteTask(taskIndex)"></i> <i class="fas fa-trash" @click="deleteTask(taskIndex)"></i>
</a> </a>
</span> </span>
<a href="javascript:" @click="toggleTask(task)"> <a href="javascript:" @click="toggleTask(task)">
<i class="far fa-check-square"></i> <i class="far fa-check-square"></i>
</a> <span class="finished-task">{{ task.name }}</span> </a> <span class="finished-task">{{ task.name }}</span>
</li> </li>
</template> </template>
</ul> </ul>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import moment from "moment";
export default { export default {
name: "TasksForTracker" name: "TasksForTracker",
data() {
return {
newTaskInput: ''
}
},
methods: {
deleteTask(taskIndex) {
this.$store.state.selectedTracker.tasks.splice(taskIndex, 1)
this.$store.commit('saveTrackers');
},
addTask() {
if (this.newTaskInput.length <= 0 || this.newTaskInput.trim() === '') {
return false;
}
if (!this.$store.state.selectedTracker.tasks) {
this.$store.state.selectedTracker.tasks = [];
}
this.$store.state.selectedTracker.tasks.pushToBeginning({
name: this.newTaskInput,
done: false,
created: moment(),
percentDone: 0,
finished: null
});
this.newTaskInput = '';
this.$store.commit('saveTrackers');
},
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('saveTrackers');
},
checkForCompletionOfTask(task) {
task.done = task.percentDone === 100;
this.$forceUpdate();
this.$store.commit('saveTrackers');
},
}
} }
</script> </script>

16
src/views/Trackers.vue
Unescape View File

@ -160,6 +160,7 @@
<script> <script>
import moment from "moment"; import moment from "moment";
import iziToast from "izitoast"; import iziToast from "izitoast";
import {Offcanvas} from "bootstrap";
export default { export default {
name: "Trackers", name: "Trackers",
@ -337,7 +338,14 @@ export default {
startTimeBox(tracker, minutes) { startTimeBox(tracker, minutes) {
Notification.requestPermission(); Notification.requestPermission();
this.startTracking(tracker, false, minutes); this.startTracking(tracker, false, minutes);
} },
openTasksForTracker(tracker) {
this.$store.commit('selectTracker', tracker);
let canvas = document.getElementById('trackerTasksModal');
let tasksCanvas = new Offcanvas(canvas);
tasksCanvas.show();
},
} }
} }
</script> </script>
@ -348,12 +356,6 @@ export default {
clear: both; clear: both;
} }
.tracker-action-button {
margin-top: 10px;
padding: 1px 5px 1px 5px;
width: 100%;
}
.trackingNameField { .trackingNameField {
max-height: 1em; max-height: 1em;
margin-bottom: 1px; margin-bottom: 1px;

Write Preview
Loading…
Cancel
Save