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
fe8027e8d7
commit
81166b82bb
12 changed files with 175 additions and 186 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. 57
      src/App.vue
  2. 18
      src/css/app.scss
  3. 11
      src/views/Archive.vue
  4. 4
      src/views/Boardview.vue
  5. 55
      src/views/CustomBookForTracker.vue
  6. 7
      src/views/History.vue
  7. 19
      src/views/HistoryForTracker.vue
  8. 2
      src/views/Menu.vue
  9. 8
      src/views/Settings.vue
  10. 7
      src/views/TasksForTracker.vue
  11. 5
      src/views/Trackers.vue
  12. 42
      src/views/TrackersDetail.vue

57
src/App.vue
Unescape View File

@ -9,22 +9,25 @@
</div> </div>
<HistoryForTracker/> <HistoryForTracker/>
<CustomBookForTracker/>
<TasksForTracker/> <TasksForTracker/>
<History/> <History/>
</template> </template>
<script> <script>
import moment from 'moment' import moment from 'moment'
import bootstrap from 'bootstrap' import { Tooltip } from 'bootstrap'
import iziToast from "izitoast"; import iziToast from "izitoast";
import Menu from "./views/Menu"; import Menu from "./views/Menu";
import History from "./views/History"; import History from "./views/History";
import TasksForTracker from "./views/TasksForTracker"; import TasksForTracker from "./views/TasksForTracker";
import HistoryForTracker from "./views/HistoryForTracker"; import HistoryForTracker from "./views/HistoryForTracker";
import CustomBookForTracker from "./views/CustomBookForTracker";
export default { export default {
el: '#root', el: '#root',
components: { components: {
CustomBookForTracker,
HistoryForTracker, HistoryForTracker,
TasksForTracker, TasksForTracker,
History, History,
@ -73,7 +76,7 @@ export default {
loadTooltips() { loadTooltips() {
let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
tooltipTriggerList.map((tooltipTriggerEl) => { tooltipTriggerList.map((tooltipTriggerEl) => {
return new bootstrap.Tooltip(tooltipTriggerEl) return new Tooltip(tooltipTriggerEl)
}); });
}, },
startTracking(tracker, individual = false, timeBoxMinutes = null) { startTracking(tracker, individual = false, timeBoxMinutes = null) {
@ -166,31 +169,31 @@ export default {
this.stopActiveTracker(); this.stopActiveTracker();
}, },
watch: { watch: {
trackers: { // trackers: {
handler() { // handler() {
this.$store.commit('saveTrackers'); // this.$store.commit('saveTrackers');
}, // },
deep: true // deep: true
}, // },
publicDB() { // publicDB() {
this.publicDB = this.validateBooleans(this.publicDB) // this.publicDB = this.validateBooleans(this.publicDB)
this.$store.commit('saveTrackers'); // this.$store.commit('saveTrackers');
this.$forceUpdate(); // this.$forceUpdate();
}, // },
showPT() { // showPT() {
this.showPT = this.validateBooleans(this.showPT) // this.showPT = this.validateBooleans(this.showPT)
this.$store.commit('saveTrackers'); // this.$store.commit('saveTrackers');
this.$forceUpdate(); // this.$forceUpdate();
}, // },
dontShowMinutes() { // dontShowMinutes() {
this.dontShowMinutes = this.validateBooleans(this.dontShowMinutes) // this.dontShowMinutes = this.validateBooleans(this.dontShowMinutes)
this.$store.commit('saveTrackers'); // this.$store.commit('saveTrackers');
this.$forceUpdate(); // this.$forceUpdate();
}, // },
theme() { // theme() {
this.$store.commit('saveTrackers'); // this.$store.commit('saveTrackers');
this.$forceUpdate(); // this.$forceUpdate();
} // }
}, },
computed: { computed: {
exportJson() { exportJson() {

18
src/css/app.scss
Unescape View File

@ -23,10 +23,6 @@ nav, .card {
margin-bottom: 20px; margin-bottom: 20px;
} }
.modal-content {
max-width: 1000px;
}
.btn-full-width { .btn-full-width {
width: 100%; width: 100%;
} }
@ -48,12 +44,6 @@ nav, .card {
margin-bottom: 1px; margin-bottom: 1px;
} }
#settingsModal .modal-dialog,
#showTicketsModal .modal-dialog,
#showArchivedTicketsModal .modal-dialog {
max-width: 900px;
}
.btn { .btn {
text-transform: initial !important; text-transform: initial !important;
} }
@ -63,10 +53,6 @@ nav, .card {
margin-top: 0.5em; margin-top: 0.5em;
} }
#settingsModal .form-group {
margin-bottom: 0.5em;
}
.search-field { .search-field {
display: inline-block; display: inline-block;
max-width: 85%; max-width: 85%;
@ -130,11 +116,11 @@ nav, .card {
text-decoration: line-through; text-decoration: line-through;
} }
#trackerTasksModal a li { #trackerTasksCanvas a li {
color: black !important; color: black !important;
} }
#trackerTasksModal input[type=range] { #trackerTasksCanvas input[type=range] {
width: 100%; width: 100%;
} }

11
src/views/Archive.vue
Unescape View File

@ -1,6 +1,5 @@
<template> <template>
<h5><i class="fas fa-archive"></i> Archivierte Tracker</h5> <h5><i class="fas fa-archive"></i> Archivierte Tracker</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="row"> <div class="row">
<div class="col-sm-6"></div> <div class="col-sm-6"></div>
<div class="col-sm-6"> <div class="col-sm-6">
@ -36,7 +35,7 @@
</router-link> </router-link>
</div> </div>
<div class="col" v-if="tracker.history.length > 0"> <div class="col" v-if="tracker.history.length > 0">
<button class="btn btn-info tracker-action-button" data-bs-dismiss="modal" <button class="btn btn-info tracker-action-button"
@click="showHistoryForTracker(tracker)" title="History"> @click="showHistoryForTracker(tracker)" title="History">
<i class="fas fa-history"></i> <i class="fas fa-history"></i>
</button> </button>
@ -63,7 +62,7 @@
<script> <script>
import moment from "moment"; import moment from "moment";
import bootstrap from "bootstrap"; import { Offcanvas } from "bootstrap";
export default { export default {
name: "Archive", name: "Archive",
@ -98,7 +97,7 @@ export default {
timeWithPostFix(time) { timeWithPostFix(time) {
let postFix = ' Minute'; let postFix = ' Minute';
if (time >= 480 && this.showPT) { if (time >= 480 && this.$store.state.settings.showPT) {
postFix = ' PT'; postFix = ' PT';
time = (time / 480).toFixed(1); time = (time / 480).toFixed(1);
} else if (time >= 60 || this.$store.state.settings.dontShowMinutes) { } else if (time >= 60 || this.$store.state.settings.dontShowMinutes) {
@ -138,8 +137,8 @@ export default {
showHistoryForTracker(tracker) { showHistoryForTracker(tracker) {
this.$store.commit('selectTracker', tracker); this.$store.commit('selectTracker', tracker);
setTimeout(() => { setTimeout(() => {
let historyModal = new bootstrap.Modal(document.getElementById('historyModal')); let historyCanvas = new Offcanvas(document.getElementById('historyCancas'));
historyModal.toggle(); historyCanvas.toggle();
}, 50); }, 50);
}, },
} }

4
src/views/Boardview.vue
Unescape View File

@ -59,7 +59,7 @@
</div> </div>
<div class="col-md-12"> <div class="col-md-12">
<button class="btn btn-warning tracker-action-button" data-bs-dismiss="modal" <button class="btn btn-warning tracker-action-button"
@click="archiveTracker(trackerIndex)" title="Archivieren"> @click="archiveTracker(trackerIndex)" title="Archivieren">
<i class="fas fa-archive"></i> <i class="fas fa-archive"></i>
</button> </button>
@ -124,7 +124,7 @@
</div> </div>
<div class="col-md-12"> <div class="col-md-12">
<button class="btn btn-warning tracker-action-button" data-bs-dismiss="modal" <button class="btn btn-warning tracker-action-button"
@click="archiveTracker(trackerIndex)" title="Archivieren"> @click="archiveTracker(trackerIndex)" title="Archivieren">
<i class="fas fa-archive"></i> <i class="fas fa-archive"></i>
</button> </button>

55
src/views/CustomBookForTracker.vue
Unescape View File

@ -1,25 +1,22 @@
<template> <template>
<div class="modal fade" id="customBookingModal" tabindex="-1" role="dialog" aria-labelledby="customBookingModalLabel" <div class="offcanvas offcanvas-end" id="customBookingCanvas"
aria-hidden="true" v-if="selectedTracker"> v-if="$store.state.selectedTracker">
<div class="modal-dialog" role="document"> <div class="offcanvas-header">
<div class="modal-content"> <h5><i class="fas fa-user-edit"></i> Buchung für {{ $store.state.selectedTracker.number }}</h5>
<div class="modal-header">
<h5><i class="fas fa-user-edit"></i> Buchung für {{selectedTracker.number}}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div> </div>
<div class="modal-body"> <div class="offcanvas-body">
<div class="form-group"> <div class="form-group">
<label>Zeit in Minuten:</label> <label>Zeit in Minuten:</label>
<input type="text" class="form-control" v-model="customBookingValue"> <input type="text" class="form-control" v-model="customBookingValue">
</div> </div>
<div class="row"> <div class="row">
<div class="col-6"> <div class="col-6">
<a href="javascript:" class="btn btn-success btn-full-width" data-bs-dismiss="modal" @click="makeCustomBooking()">+ Hinzubuchen</a> <a href="javascript:" class="btn btn-success btn-full-width" data-bs-dismiss="offcanvas"
@click="makeCustomBooking()">+ Hinzubuchen</a>
</div> </div>
<div class="col-6"> <div class="col-6">
<a href="javascript:" class="btn btn-danger btn-full-width" data-bs-dismiss="modal" @click="makeCustomBooking(true)">- Abbuchen</a> <a href="javascript:" class="btn btn-danger btn-full-width" data-bs-dismiss="offcanvas"
</div> @click="makeCustomBooking(true)">- Abbuchen</a>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -27,8 +24,40 @@
</template> </template>
<script> <script>
import iziToast from "izitoast";
import moment from "moment";
export default { export default {
name: "CustomBookForTracker" name: "CustomBookForTracker",
data() {
return {
customBookingValue: ''
}
},
methods: {
makeCustomBooking(subtract = false) {
if (subtract) {
this.customBookingValue -= (this.customBookingValue * 2)
}
iziToast.show({
message: 'Buchung erfolgreich',
color: 'green'
});
this.bookTimeManually(this.$store.state.selectedTracker, this.customBookingValue);
},
bookTimeManually(tracker, minutes) {
tracker.history.pushToBeginning({
trackingStarted: moment(),
trackingStopped: moment(),
manually: true,
minutes: Math.round(minutes)
});
this.$store.commit('saveTrackers');
},
}
} }
</script> </script>

7
src/views/History.vue
Unescape View File

@ -1,10 +1,9 @@
<template> <template>
<div class="offcanvas offcanvas-end" id="pastDaysModal" tabindex="-1" role="dialog" <div class="offcanvas offcanvas-end" id="pastDaysCanvas"
aria-labelledby="pastDaysModalLabel"
aria-hidden="true"> aria-hidden="true">
<div class="offcanvas-header"> <div class="offcanvas-header">
<h5><i class="fas fa-random"></i> Buchungsverlauf</h5> <h5><i class="fas fa-random"></i> Buchungsverlauf</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div> </div>
<div class="offcanvas-body"> <div class="offcanvas-body">
<div class="row"> <div class="row">
@ -104,7 +103,7 @@ export default {
timeWithPostFix(time) { timeWithPostFix(time) {
let postFix = ' Minute'; let postFix = ' Minute';
if (time >= 480 && this.showPT) { if (time >= 480 && this.$store.state.settings.showPT) {
postFix = ' PT'; postFix = ' PT';
time = (time / 480).toFixed(1); time = (time / 480).toFixed(1);
} else if (time >= 60 || this.$store.state.settings.dontShowMinutes) { } else if (time >= 60 || this.$store.state.settings.dontShowMinutes) {

19
src/views/HistoryForTracker.vue
Unescape View File

@ -1,14 +1,12 @@
<template> <template>
<div class="modal fade" id="historyModal" tabindex="-1" role="dialog" aria-labelledby="historyModalLabel" <div class="offcanvas offcanvas-end" id="historyCancas" tabindex="-1" role="dialog"
aria-labelledby="historyCancasLabel"
aria-hidden="true" v-if="$store.state.selectedTracker"> aria-hidden="true" v-if="$store.state.selectedTracker">
<div class="modal-dialog" role="document"> <div class="offcanvas-header">
<div class="modal-content">
<div class="modal-header">
<h5><i class="fas fa-history"></i> History von <h5><i class="fas fa-history"></i> History von
{{ $store.state.selectedTracker.number }}</h5> {{ $store.state.selectedTracker.number }}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div> </div>
<div class="modal-body"> <div class="offcanvas-body">
<ul class="list-group tracker-history"> <ul class="list-group tracker-history">
<template v-for="(tracker, historyIndex) in $store.state.selectedTracker.history" <template v-for="(tracker, historyIndex) in $store.state.selectedTracker.history"
v-bind:key="historyIndex"> v-bind:key="historyIndex">
@ -63,8 +61,6 @@
</ul> </ul>
</div> </div>
</div> </div>
</div>
</div>
</template> </template>
<script> <script>
@ -78,10 +74,11 @@ export default {
}, },
deleteHistoryEntry(trackerIndex, historyIndex) { deleteHistoryEntry(trackerIndex, historyIndex) {
if (trackerIndex) { if (trackerIndex) {
this.trackers[trackerIndex].history.splice(historyIndex, 1); this.$store.state.trackers[trackerIndex].history.splice(historyIndex, 1);
} else { } else {
this.selectedTracker.history.splice(historyIndex, 1); this.$store.state.selectedTracker.history.splice(historyIndex, 1);
} }
this.$store.commit('saveTrackers'); this.$store.commit('saveTrackers');
}, },
formattedDate(date) { formattedDate(date) {
@ -90,7 +87,7 @@ export default {
timeWithPostFix(time) { timeWithPostFix(time) {
let postFix = ' Minute'; let postFix = ' Minute';
if (time >= 480 && this.showPT) { if (time >= 480 && this.$store.state.settings.showPT) {
postFix = ' PT'; postFix = ' PT';
time = (time / 480).toFixed(1); time = (time / 480).toFixed(1);
} else if (time >= 60 || this.$store.state.settings.dontShowMinutes) { } else if (time >= 60 || this.$store.state.settings.dontShowMinutes) {

2
src/views/Menu.vue
Unescape View File

@ -49,7 +49,7 @@
<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="offcanvas" data-bs-toggle="offcanvas"
data-bs-target="#pastDaysModal" data-bs-target="#pastDaysCanvas"
data-bs-placement="top" data-bs-placement="top"
title="Buchungsverlauf"> title="Buchungsverlauf">
<i class="fas fa-history"></i> <i class="fas fa-history"></i>

8
src/views/Settings.vue
Unescape View File

@ -15,14 +15,14 @@
<br/> <br/>
<div class="form-group"> <div class="form-group">
<label> <label>
<input type="checkbox" class="form-control-checkbox" v-model="showPT"> <input type="checkbox" class="form-control-checkbox" v-model="$store.state.settings.showPT">
Ab 8 Stunden nurmehr PT anzeigen Ab 8 Stunden nurmehr PT anzeigen
</label> </label>
</div> </div>
<br/> <br/>
<div class="form-group"> <div class="form-group">
<label> <label>
<input type="checkbox" class="form-control-checkbox" v-model="dontShowMinutes"> <input type="checkbox" class="form-control-checkbox" v-model="$store.state.settings.dontShowMinutes">
Zeit immer in Stunden anzeigen Zeit immer in Stunden anzeigen
</label> </label>
</div> </div>
@ -64,8 +64,8 @@
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button class="btn btn-primary" v-on:click="updateStorage()" data-bs-dismiss="modal">Speichern</button> <button class="btn btn-primary" v-on:click="updateStorage()" data-bs-dismiss="offcanvas" >Speichern</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button> <button type="button" class="btn btn-secondary" data-bs-dismiss="offcanvas" >Schließen</button>
</div> </div>
</template> </template>

7
src/views/TasksForTracker.vue
Unescape View File

@ -1,16 +1,15 @@
<template> <template>
<div class="offcanvas offcanvas-end" <div class="offcanvas offcanvas-end"
id="trackerTasksModal" id="trackerTasksCanvas"
tabindex="-1" tabindex="-1"
role="dialog" role="dialog"
v-if="$store.state.selectedTracker" v-if="$store.state.selectedTracker"
aria-labelledby="showTrackerTasksModal" aria-labelledby="showTrackerCanvasCanvas"
aria-hidden="true"> aria-hidden="true">
<div class="offcanvas-header"> <div class="offcanvas-header">
<h5><i class="fas fa-clock"></i> Tasks für {{ $store.state.selectedTracker.number }}</h5> <h5><i class="fas fa-clock"></i> Tasks für {{ $store.state.selectedTracker.number }}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div> </div>
<div class="modal-body"> <div class="offcanvas-body">
<div class="form-group"> <div class="form-group">
<input type="text" id="newTaskInput" class="form-control" <input type="text" id="newTaskInput" class="form-control"
v-model="newTaskInput" placeholder="Neuer Task" v-on:keyup.enter="addTask()"/> v-model="newTaskInput" placeholder="Neuer Task" v-on:keyup.enter="addTask()"/>

5
src/views/Trackers.vue
Unescape View File

@ -58,7 +58,6 @@
<div class="col-md-6"> <div class="col-md-6">
<button class="btn btn-warning tracker-action-button" <button class="btn btn-warning tracker-action-button"
data-bs-dismiss="modal"
@click="archiveTracker(trackerIndex)" title="Archivieren"> @click="archiveTracker(trackerIndex)" title="Archivieren">
<i class="fas fa-archive"></i> <small>Archivieren</small> <i class="fas fa-archive"></i> <small>Archivieren</small>
</button> </button>
@ -262,7 +261,7 @@ export default {
timeWithPostFix(time) { timeWithPostFix(time) {
let postFix = ' Minute'; let postFix = ' Minute';
if (time >= 480 && this.showPT) { if (time >= 480 && this.$store.state.settings.showPT) {
postFix = ' PT'; postFix = ' PT';
time = (time / 480).toFixed(1); time = (time / 480).toFixed(1);
} else if (time >= 60 || this.$store.state.settings.dontShowMinutes) { } else if (time >= 60 || this.$store.state.settings.dontShowMinutes) {
@ -345,7 +344,7 @@ export default {
this.$store.commit('selectTracker', tracker); this.$store.commit('selectTracker', tracker);
setTimeout(() => { setTimeout(() => {
let canvas = document.getElementById('trackerTasksModal'); let canvas = document.getElementById('trackerTasksCanvas');
let tasksCanvas = new Offcanvas(canvas); let tasksCanvas = new Offcanvas(canvas);
tasksCanvas.show(); tasksCanvas.show();
}, 50) }, 50)

42
src/views/TrackersDetail.vue
Unescape View File

@ -1,7 +1,6 @@
<template> <template>
<div> <div>
<h5><i class="fas fa-clock"></i> Tracker</h5> <h5><i class="fas fa-clock"></i> Tracker</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-6" v-for="(tracker, trackerIndex) in $store.state.trackers" v-bind:key="trackerIndex"> <div class="col-md-6" v-for="(tracker, trackerIndex) in $store.state.trackers" v-bind:key="trackerIndex">
@ -26,13 +25,13 @@
</button> </button>
</div> </div>
<div class="col"> <div class="col">
<button class="btn btn-warning tracker-action-button" data-bs-dismiss="modal" <button class="btn btn-warning tracker-action-button"
@click="archiveTracker(trackerIndex)" title="Archivieren"> @click="archiveTracker(trackerIndex)" title="Archivieren">
<i class="fas fa-archive"></i> <i class="fas fa-archive"></i>
</button> </button>
</div> </div>
<div class="col" v-if="tracker.history.length > 0"> <div class="col" v-if="tracker.history.length > 0">
<button class="btn btn-info tracker-action-button" data-bs-dismiss="modal" <button class="btn btn-info tracker-action-button"
@click="showHistoryForTracker(tracker)" title="History"> @click="showHistoryForTracker(tracker)" title="History">
<i class="fas fa-history"></i> <i class="fas fa-history"></i>
</button> </button>
@ -58,8 +57,7 @@
<script> <script>
import moment from "moment"; import moment from "moment";
import bootstrap from "bootstrap"; import { Offcanvas } from "bootstrap";
import iziToast from "izitoast";
export default { export default {
name: "TrackersDetail", name: "TrackersDetail",
@ -89,7 +87,7 @@ export default {
timeWithPostFix(time) { timeWithPostFix(time) {
let postFix = ' Minute'; let postFix = ' Minute';
if (time >= 480 && this.showPT) { if (time >= 480 && this.$store.state.settings.showPT) {
postFix = ' PT'; postFix = ' PT';
time = (time / 480).toFixed(1); time = (time / 480).toFixed(1);
} else if (time >= 60 || this.$store.state.settings.dontShowMinutes) { } else if (time >= 60 || this.$store.state.settings.dontShowMinutes) {
@ -129,40 +127,20 @@ export default {
showHistoryForTracker(tracker) { showHistoryForTracker(tracker) {
this.$store.commit('selectTracker', tracker); this.$store.commit('selectTracker', tracker);
setTimeout(() => { setTimeout(() => {
let historyModal = new bootstrap.Modal(document.getElementById('historyModal')); let historyCanvas = new Offcanvas(document.getElementById('historyCancas'));
historyModal.toggle(); historyCanvas.toggle();
}, 50); }, 50);
}, },
bookTimeManually(tracker, minutes) {
tracker.history.pushToBeginning({
trackingStarted: moment(),
trackingStopped: moment(),
manually: true,
minutes: Math.round(minutes)
});
this.$store.commit('saveTrackers');
},
showCustomBookingForTracker(tracker) { showCustomBookingForTracker(tracker) {
this.selectedTracker = tracker; this.$store.commit('selectTracker', tracker);
this.$forceUpdate(); this.$forceUpdate();
setTimeout(() => { setTimeout(() => {
let customBookingModal = new bootstrap.Modal(document.getElementById('customBookingModal')); let customBookingCanvas = new Offcanvas(document.getElementById('customBookingCanvas'));
customBookingModal.toggle(); customBookingCanvas.toggle();
}, 50); }, 50);
}, },
makeCustomBooking(subtract = false) {
if (subtract) {
this.customBookingValue -= (this.customBookingValue * 2)
}
iziToast.show({
message: 'Buchung erfolgreich',
color: 'green'
});
this.bookTimeManually(this.selectedTracker, this.customBookingValue);
},
} }
} }
</script> </script>

Write Preview
Loading…
Cancel
Save