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

WIP new fancy design ✨

poc/redesign-trackers
Nero Ignis 4 years ago
parent
f0da8a1430
commit
00faf546fb
3 changed files with 234 additions and 16851 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. 16831
      package-lock.json
  2. 1
      package.json
  3. 253
      src/views/Trackers.vue

16831
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
Unescape View File

@ -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": {

253
src/views/Trackers.vue
Unescape View File

@ -8,144 +8,147 @@
: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">
<a class="position-absolute"
data-bs-toggle="dropdown"
aria-expanded="false"
title="Neu">
<i class="fas fa-ellipsis-v"></i>
</a>
<div class="dropdown-menu" aria-labelledby="create-dropdown-menu">
<span @click="archiveTracker(trackerIndex)" title="Archivieren">
<i class="fas fa-archive"></i> <small>Archivieren</small>
</span><br/>
<span @click="openTasksForTracker(tracker)" title="Tasks">
<i class="fas fa-clipboard -check"></i> <small>Tasks
{{ showOpenTasksForTracker(tracker.tasks) }}</small>
</span><br/>
<span @click="deleteTracker(trackerIndex)" title="Löschen">
<i class="fas fa-trash"></i> <small>Löschen</small>
</span>
</div>
<input type="text" <input type="text"
v-model="tracker.number" v-model="tracker.number"
class="form-control trackingNameField" class="form-control trackingNameField"
@keydown="this.$store.commit('saveTrackers')"/> @keydown="this.$store.commit('saveTrackers')"/>
<div class="row"> <div class="row time-data-container">
<div v-if="tracker.tracking === true"> <div v-if="!tracker.tracking">
<div class="text-danger font-weight-bolder float-end tracker-time-info"> <button type="button"
<div class="spinner-grow spinner-grow-sm" role="status"> class="btn btn-success rounded-circle position-absolute btn-tracker-state"
<span class="sr-only">Tracking...</span> @click="startTracking(tracker)">
</div> <i class="fas fa-play"></i>
Tracking </button>
</div>
</div>
</div>
<template v-if="!tracker.isTimeBox">
<div v-if="tracker.tracking === true">
<span class="float-end">{{ getTrackingStartTime(tracker) }}</span>
<span v-if="tracker.tracking === true">Gestartet: </span>
<br/>
<span class="float-end">{{ currentTrackingRunningFor(tracker) }}</span>
<span v-if="tracker.tracking === true">Läuft seit: </span>
</div> </div>
<div> <div v-else>
<span class="float-end">{{ getTotalTime(tracker) }}</span> <button type="button"
<span class="current-tracker-info">Gesamt: </span> class="btn btn-danger rounded-circle position-absolute btn-tracker-state"
@click="stopTracking(tracker)">
<i class="fas fa-stop"></i>
</button>
</div> </div>
<span class="float-end">{{ getTotalTimeToday(tracker) }}</span> <template v-if="!tracker.isTimeBox">
<span class="">Heute: </span> <template v-if="tracker.tracking === true">
<div class="col-6 col-sm-3">
<div class="row"> <small class="text-muted">Gestartet </small><br/>
<div class="col-md-6" v-if="!tracker.tracking"> <span>{{ getTrackingStartTime(tracker) }}</span>
<button type="button" class="btn btn-primary tracker-action-button" </div>
@click="startTracking(tracker)">
<i class="far fa-play-circle"></i> <small>Starten</small>
</button>
</div>
<div class="col-md-6" v-else>
<button type="button" class="btn btn-danger tracker-action-button"
@click="stopTracking(tracker)">
<i class="far fa-stop-circle"></i> <small>Stoppen</small>
</button>
</div>
<div class="col-md-6"> <div class="col-6 col-sm-3">
<button class="btn btn-warning tracker-action-button" <small class="text-muted">Läuft seit </small><br/>
@click="archiveTracker(trackerIndex)" title="Archivieren"> <span>{{ currentTrackingRunningFor(tracker) }}</span>
<i class="fas fa-archive"></i> <small>Archivieren</small> </div>
</button> </template>
</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">Gesamt </small><br/>
@click="openTasksForTracker(tracker)" title="Tasks"> <span>{{ getTotalTime(tracker) }}</span>
<i class="fas fa-clipboard -check"></i> <small>Tasks
{{ showOpenTasksForTracker(tracker.tasks) }}</small>
</button>
</div> </div>
<div class="col-md-6"> <div class="col-6 col-sm-3">
<button class="btn btn-danger tracker-action-button" <small class="text-muted">Heute </small><br/>
@click="deleteTracker(trackerIndex)" title="Löschen"> <span>{{ getTotalTimeToday(tracker) }}</span>
<i class="fas fa-trash"></i> <small>Löschen</small>
</button>
</div>
</div>
</template>
<template v-else>
<div class="row">
<div v-if="tracker.tracking === true">
<span class="float-end">{{ getTrackingStartTime(tracker) }}</span>
<span v-if="tracker.tracking === true">Gestartet: </span>
<br/>
<span class="float-end">{{ currentTrackingRunningFor(tracker) }}</span>
<span v-if="tracker.tracking === true">Läuft seit: </span>
</div> </div>
</template>
<template v-else>
<div class="row">
<div v-if="tracker.tracking === true">
<span class="float-end">{{ getTrackingStartTime(tracker) }}</span>
<span v-if="tracker.tracking === true">Gestartet: </span>
<br/>
<span class="float-end">{{
currentTrackingRunningFor(tracker)
}}</span>
<span v-if="tracker.tracking === true">Läuft seit: </span>
</div>
<template v-if="!tracker.timeBoxMinutes"> <template v-if="!tracker.timeBoxMinutes">
<div class="col-12"> <div class="col-12">
Minuten: Minuten:
</div>
<div class="col">
<button type="button"
class="btn btn-secondary tracker-action-button"
@click="startTimeBox(tracker, 15)">
<i class="far fa-play-circle"></i> 15
</button>
</div>
<div class="col">
<button type="button"
class="btn btn-secondary tracker-action-button"
@click="startTimeBox(tracker, 30)">
<i class="far fa-play-circle"></i> 30
</button>
</div>
<div class="col">
<button type="button"
class="btn btn-secondary tracker-action-button"
@click="startTimeBox(tracker, 60)">
<i class="far fa-play-circle"></i> 60
</button>
</div>
</template>
<div class="col-12"
v-if="tracker.timeBoxMinutes && timeBoxTimeLeft(tracker) > 0">
<span class="float-end">{{
timeBoxTimeLeft(tracker)
}} Minuten</span>
<span>Zeit übrig: </span>
</div> </div>
<div class="col"> <div class="col-12 text-center" v-if="timeBoxTimeLeft(tracker) <= 0">
<button type="button" class="btn btn-secondary tracker-action-button" <h5 class="text-danger text-bold">Abgeschlossen</h5>
@click="startTimeBox(tracker, 15)">
<i class="far fa-play-circle"></i> 15
</button>
</div> </div>
<div class="col"> <div class="col-md-12" v-if="tracker.tracking">
<button type="button" class="btn btn-secondary tracker-action-button" <button type="button" class="btn btn-danger tracker-action-button"
@click="startTimeBox(tracker, 30)"> @click="stopTracking(tracker)">
<i class="far fa-play-circle"></i> 30 <i class="far fa-stop-circle"></i> <small>Stoppen</small>
</button> </button>
</div> </div>
<div class="col-md-12"
<div class="col"> v-if="!tracker.tracking && tracker.timeBoxMinutes && timeBoxTimeLeft(tracker) > 0">
<button type="button" class="btn btn-secondary tracker-action-button" <button type="button" class="btn btn-primary tracker-action-button"
@click="startTimeBox(tracker, 60)"> @click="startTracking(tracker)">
<i class="far fa-play-circle"></i> 60 <i class="far fa-play-circle"></i> <small>Starten</small>
</button> </button>
</div> </div>
</template>
<div class="col-12"
v-if="tracker.timeBoxMinutes && timeBoxTimeLeft(tracker) > 0">
<span class="float-end">{{ timeBoxTimeLeft(tracker) }} Minuten</span>
<span>Zeit übrig: </span>
</div>
<div class="col-12 text-center" v-if="timeBoxTimeLeft(tracker) <= 0">
<h5 class="text-danger text-bold">Abgeschlossen</h5>
</div>
<div class="col-md-12" v-if="tracker.tracking"> <div class="col-md-12">
<button type="button" class="btn btn-danger tracker-action-button" <button class="btn btn-danger tracker-action-button"
@click="stopTracking(tracker)"> @click="deleteTracker(trackerIndex)" title="Löschen">
<i class="far fa-stop-circle"></i> <small>Stoppen</small> <i class="fas fa-trash"></i> <small>Löschen</small>
</button> </button>
</div> </div>
<div class="col-md-12"
v-if="!tracker.tracking && tracker.timeBoxMinutes && timeBoxTimeLeft(tracker) > 0">
<button type="button" class="btn btn-primary tracker-action-button"
@click="startTracking(tracker)">
<i class="far fa-play-circle"></i> <small>Starten</small>
</button>
</div>
<div class="col-md-12">
<button class="btn btn-danger tracker-action-button"
@click="deleteTracker(trackerIndex)" title="Löschen">
<i class="fas fa-trash"></i> <small>Löschen</small>
</button>
</div> </div>
</div> </template>
</template> </div>
</div> </div>
</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>
Write Preview
Loading…
Cancel
Save