Compare commits

...

1 Commits

Author SHA1 Message Date
Nero Ignis 00faf546fb WIP new fancy design 4 years ago
  1. 16831
      package-lock.json
  2. 1
      package.json
  3. 137
      src/views/Trackers.vue

16831
package-lock.json generated

File diff suppressed because it is too large Load Diff

1
package.json

@ -18,6 +18,7 @@
"moment": "^2.29.1", "moment": "^2.29.1",
"vue": "^3.0.0", "vue": "^3.0.0",
"vue-router": "^4.0.0-0", "vue-router": "^4.0.0-0",
"vuetify": "^3.0.0-alpha.0",
"vuex": "^4.0.0-0" "vuex": "^4.0.0-0"
}, },
"devDependencies": { "devDependencies": {

137
src/views/Trackers.vue

@ -8,75 +8,70 @@
:style="tracker.isTimeBox ? 'background: linear-gradient(90deg, grey ' + ((timeBoxTimeLeft(tracker) * 100) / tracker.timeBoxMinutes)+'% , black 100%':''"> :style="tracker.isTimeBox ? 'background: linear-gradient(90deg, grey ' + ((timeBoxTimeLeft(tracker) * 100) / tracker.timeBoxMinutes)+'% , black 100%':''">
<div class="card-body"> <div class="card-body">
<div class="card-text"> <div class="card-text">
<input type="text" <a class="position-absolute"
v-model="tracker.number" data-bs-toggle="dropdown"
class="form-control trackingNameField" aria-expanded="false"
@keydown="this.$store.commit('saveTrackers')"/> title="Neu">
<i class="fas fa-ellipsis-v"></i>
<div class="row"> </a>
<div v-if="tracker.tracking === true"> <div class="dropdown-menu" aria-labelledby="create-dropdown-menu">
<div class="text-danger font-weight-bolder float-end tracker-time-info"> <span @click="archiveTracker(trackerIndex)" title="Archivieren">
<div class="spinner-grow spinner-grow-sm" role="status"> <i class="fas fa-archive"></i> <small>Archivieren</small>
<span class="sr-only">Tracking...</span> </span><br/>
</div>
Tracking
</div>
</div>
</div>
<template v-if="!tracker.isTimeBox"> <span @click="openTasksForTracker(tracker)" title="Tasks">
<div v-if="tracker.tracking === true"> <i class="fas fa-clipboard -check"></i> <small>Tasks
<span class="float-end">{{ getTrackingStartTime(tracker) }}</span> {{ showOpenTasksForTracker(tracker.tasks) }}</small>
<span v-if="tracker.tracking === true">Gestartet: </span> </span><br/>
<br/>
<span class="float-end">{{ currentTrackingRunningFor(tracker) }}</span>
<span v-if="tracker.tracking === true">Läuft seit: </span>
</div>
<div> <span @click="deleteTracker(trackerIndex)" title="Löschen">
<span class="float-end">{{ getTotalTime(tracker) }}</span> <i class="fas fa-trash"></i> <small>Löschen</small>
<span class="current-tracker-info">Gesamt: </span> </span>
</div> </div>
<span class="float-end">{{ getTotalTimeToday(tracker) }}</span> <input type="text"
<span class="">Heute: </span> v-model="tracker.number"
class="form-control trackingNameField"
@keydown="this.$store.commit('saveTrackers')"/>
<div class="row"> <div class="row time-data-container">
<div class="col-md-6" v-if="!tracker.tracking"> <div v-if="!tracker.tracking">
<button type="button" class="btn btn-primary tracker-action-button" <button type="button"
class="btn btn-success rounded-circle position-absolute btn-tracker-state"
@click="startTracking(tracker)"> @click="startTracking(tracker)">
<i class="far fa-play-circle"></i> <small>Starten</small> <i class="fas fa-play"></i>
</button> </button>
</div> </div>
<div class="col-md-6" v-else> <div v-else>
<button type="button" class="btn btn-danger tracker-action-button" <button type="button"
class="btn btn-danger rounded-circle position-absolute btn-tracker-state"
@click="stopTracking(tracker)"> @click="stopTracking(tracker)">
<i class="far fa-stop-circle"></i> <small>Stoppen</small> <i class="fas fa-stop"></i>
</button> </button>
</div> </div>
<div class="col-md-6"> <template v-if="!tracker.isTimeBox">
<button class="btn btn-warning tracker-action-button" <template v-if="tracker.tracking === true">
@click="archiveTracker(trackerIndex)" title="Archivieren"> <div class="col-6 col-sm-3">
<i class="fas fa-archive"></i> <small>Archivieren</small> <small class="text-muted">Gestartet </small><br/>
</button> <span>{{ getTrackingStartTime(tracker) }}</span>
</div> </div>
<div class="col-md-6"> <div class="col-6 col-sm-3">
<button type="button" class="btn btn-info tracker-action-button" <small class="text-muted">Läuft seit </small><br/>
@click="openTasksForTracker(tracker)" title="Tasks"> <span>{{ currentTrackingRunningFor(tracker) }}</span>
<i class="fas fa-clipboard -check"></i> <small>Tasks
{{ showOpenTasksForTracker(tracker.tasks) }}</small>
</button>
</div> </div>
</template>
<div class="col-md-6"> <div class="col-6 col-sm-3">
<button class="btn btn-danger tracker-action-button" <small class="text-muted">Gesamt </small><br/>
@click="deleteTracker(trackerIndex)" title="Löschen"> <span>{{ getTotalTime(tracker) }}</span>
<i class="fas fa-trash"></i> <small>Löschen</small>
</button>
</div> </div>
<div class="col-6 col-sm-3">
<small class="text-muted">Heute </small><br/>
<span>{{ getTotalTimeToday(tracker) }}</span>
</div> </div>
</template> </template>
<template v-else> <template v-else>
@ -85,7 +80,9 @@
<span class="float-end">{{ getTrackingStartTime(tracker) }}</span> <span class="float-end">{{ getTrackingStartTime(tracker) }}</span>
<span v-if="tracker.tracking === true">Gestartet: </span> <span v-if="tracker.tracking === true">Gestartet: </span>
<br/> <br/>
<span class="float-end">{{ currentTrackingRunningFor(tracker) }}</span> <span class="float-end">{{
currentTrackingRunningFor(tracker)
}}</span>
<span v-if="tracker.tracking === true">Läuft seit: </span> <span v-if="tracker.tracking === true">Läuft seit: </span>
</div> </div>
@ -94,21 +91,24 @@
Minuten: Minuten:
</div> </div>
<div class="col"> <div class="col">
<button type="button" class="btn btn-secondary tracker-action-button" <button type="button"
class="btn btn-secondary tracker-action-button"
@click="startTimeBox(tracker, 15)"> @click="startTimeBox(tracker, 15)">
<i class="far fa-play-circle"></i> 15 <i class="far fa-play-circle"></i> 15
</button> </button>
</div> </div>
<div class="col"> <div class="col">
<button type="button" class="btn btn-secondary tracker-action-button" <button type="button"
class="btn btn-secondary tracker-action-button"
@click="startTimeBox(tracker, 30)"> @click="startTimeBox(tracker, 30)">
<i class="far fa-play-circle"></i> 30 <i class="far fa-play-circle"></i> 30
</button> </button>
</div> </div>
<div class="col"> <div class="col">
<button type="button" class="btn btn-secondary tracker-action-button" <button type="button"
class="btn btn-secondary tracker-action-button"
@click="startTimeBox(tracker, 60)"> @click="startTimeBox(tracker, 60)">
<i class="far fa-play-circle"></i> 60 <i class="far fa-play-circle"></i> 60
</button> </button>
@ -117,7 +117,9 @@
<div class="col-12" <div class="col-12"
v-if="tracker.timeBoxMinutes && timeBoxTimeLeft(tracker) > 0"> v-if="tracker.timeBoxMinutes && timeBoxTimeLeft(tracker) > 0">
<span class="float-end">{{ timeBoxTimeLeft(tracker) }} Minuten</span> <span class="float-end">{{
timeBoxTimeLeft(tracker)
}} Minuten</span>
<span>Zeit übrig: </span> <span>Zeit übrig: </span>
</div> </div>
<div class="col-12 text-center" v-if="timeBoxTimeLeft(tracker) <= 0"> <div class="col-12 text-center" v-if="timeBoxTimeLeft(tracker) <= 0">
@ -150,6 +152,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
</div> </div>
</div> </div>
@ -164,8 +167,7 @@ import {Offcanvas} from "bootstrap";
export default { export default {
name: "Trackers", name: "Trackers",
data() { data() {
return { return {}
}
}, },
computed: { computed: {
trackers() { trackers() {
@ -304,7 +306,7 @@ export default {
['<button><i class="fas fa-undo"></i></button>', function (instance, toast) { ['<button><i class="fas fa-undo"></i></button>', function (instance, toast) {
instance.hide({ instance.hide({
transitionOut: 'fadeOutUp', transitionOut: 'fadeOutUp',
onClosing: function(){ onClosing: function () {
component.$store.commit('restoreTrashed'); component.$store.commit('restoreTrashed');
component.$store.commit('saveTrackers'); component.$store.commit('saveTrackers');
} }
@ -316,7 +318,7 @@ export default {
}, },
showOpenTasksForTracker(tasks) { showOpenTasksForTracker(tasks) {
let count = this.getOpenTasksForTracker(tasks); let count = this.getOpenTasksForTracker(tasks);
return count > 0 ? ' ('+count+' offen)' : ''; return count > 0 ? ' (' + count + ' offen)' : '';
}, },
getOpenTasksForTracker(tasks) { getOpenTasksForTracker(tasks) {
if (!tasks) { if (!tasks) {
@ -354,14 +356,10 @@ export default {
</script> </script>
<style scoped> <style scoped>
.tracker-time-info {
margin-top: 1em;
clear: both;
}
.trackingNameField { .trackingNameField {
max-height: 1em; max-height: 1em;
margin-bottom: 1px; margin-bottom: 1px;
width: 80%;
} }
.bg-timebox input { .bg-timebox input {
@ -372,4 +370,13 @@ export default {
color: lightgray; color: lightgray;
} }
.btn-tracker-state {
margin-top: -2em;
right: 1em;
}
.time-data-container {
padding-top: 2.5em;
}
</style> </style>
Loading…
Cancel
Save