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

Update to Vue 3, split archive to own collection;

modals-to-spa
Nero Ignis 4 years ago
parent
138f82f4bb
commit
c7cf50ff6f
4 changed files with 244 additions and 12208 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 17
      css/app.css
  2. 361
      index.html
  3. 109
      js/app.js
  4. 11965
      js/vue.js

17
css/app.css
Unescape View File

@ -7,10 +7,6 @@ body { @@ -7,10 +7,6 @@ body {
margin: 20px auto 20px auto;
}
.add-button {
padding: 1px 5px 1px 5px;
}
.ticket-action-button {
margin-top: 10px;
padding: 1px 5px 1px 5px;
@ -25,7 +21,7 @@ body { @@ -25,7 +21,7 @@ body {
}
.side-button-right {
position: absolute;
position: fixed;
right: 30px;
height: 60px;
@ -35,7 +31,7 @@ body { @@ -35,7 +31,7 @@ body {
}
.add-tracker-button {
position: absolute;
position: fixed;
left: 30px;
bottom: 30px;
@ -51,17 +47,10 @@ body { @@ -51,17 +47,10 @@ body {
.second-button {
bottom: 110px;
padding-left: 16px;
}
.third-button {
bottom: 190px;
padding-left: 16px;
}
.fourth-button {
bottom: 270px;
padding-left: 16px;
}
.navbar-brand {
@ -106,7 +95,7 @@ nav, .card { @@ -106,7 +95,7 @@ nav, .card {
margin-bottom: 1px;
}
#showTrackedTicketsModal .showTrackedTicketsModalDialog,
#showTicketsModal .showTicketsModalDialog,
#showArchivedTicketsModal .showArchivedTicketsModalDialog{
max-width: 900px;
}

361
index.html
Unescape View File

@ -22,63 +22,63 @@ @@ -22,63 +22,63 @@
<div class="row">
<div class="col-md-12">
<div class="row">
<div class=" col-lg-4 col-md-6"
v-for="(ticket, ticketIndex) in trackedTickets"
v-if="!ticket.archived">
<div class="card bg-gradient-secondary">
<div class="card-body">
<div class="card-text">
<input type="text"
v-model="ticket.number"
class="form-control trackingNameField"
@keydown="updateStorage()"/>
<template v-for="ticket in tickets">
<div class="col-lg-4 col-md-6">
<div class="card bg-gradient-secondary">
<div class="card-body">
<div class="card-text">
<input type="text"
v-model="ticket.number"
class="form-control trackingNameField"
@keydown="updateStorage()"/>
<div class="ticket-time-info">
<div v-if="ticket.tracking === true">
<div class="text-danger font-weight-bolder float-end">
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="sr-only">Tracking...</span>
<div class="ticket-time-info">
<div v-if="ticket.tracking === true">
<div class="text-danger font-weight-bolder float-end">
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="sr-only">Tracking...</span>
</div>
Tracking
</div>
Tracking
</div>
</div>
</div>
<div v-if="ticket.tracking === true" class="ticket-time-info">
<span class="float-end">{{ getTrackingStartTime(ticket) }}</span>
<span v-if="ticket.tracking === true">Gestartet: </span>
<br/>
<span class="float-end">{{ currentTrackingRunningFor(ticket) }}</span>
<span v-if="ticket.tracking === true">Läuft seit: </span>
</div>
<div v-if="ticket.tracking === true" class="ticket-time-info">
<span class="float-end">{{ getTrackingStartTime(ticket) }}</span>
<span v-if="ticket.tracking === true">Gestartet: </span>
<br/>
<span class="float-end">{{ currentTrackingRunningFor(ticket) }}</span>
<span v-if="ticket.tracking === true">Läuft seit: </span>
</div>
<div class="ticket-time-info">
<span class="float-end">{{ getTotalTime(ticket) }}</span>
<span class="current-ticket-info">Gesamt: </span>
</div>
<div class="ticket-time-info">
<span class="float-end">{{ getTotalTime(ticket) }}</span>
<span class="current-ticket-info">Gesamt: </span>
</div>
<span class="float-end">{{ getTotalTimeToday(ticket) }}</span>
<span class="">Heute: </span>
<span class="float-end">{{ getTotalTimeToday(ticket) }}</span>
<span class="">Heute: </span>
<div class="row">
<div class="col-md-12" v-if="ticket.tracking == false">
<button type="button" class="btn btn-info ticket-action-button"
@click="startTracking(ticket)">
<i class="far fa-play-circle"></i>
</button>
</div>
<div class="row">
<div class="col-md-12" v-if="!ticket.tracking">
<button type="button" class="btn btn-info ticket-action-button"
@click="startTracking(ticket)">
<i class="far fa-play-circle"></i>
</button>
</div>
<div class="col-md-12" v-else>
<button type="button" class="btn btn-danger ticket-action-button"
@click="stopTracking(ticket)">
<i class="far fa-stop-circle"></i>
</button>
<div class="col-md-12" v-else>
<button type="button" class="btn btn-danger ticket-action-button"
@click="stopTracking(ticket)">
<i class="far fa-stop-circle"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
</div>
</div>
</div>
@ -87,13 +87,13 @@ @@ -87,13 +87,13 @@
<i class="fas fa-plus"></i>
</a>
<a type="button" :class="'btn btn-primary side-button-right text-light ' + (archivedTrackers > 0 ? 'third-button' : 'second-button')" data-toggle="modal"
data-target="#showTrackedTicketsModal" v-if="activeTrackers > 0">
<a type="button" :class="'btn btn-primary side-button-right text-light ' + (archive.length > 0 ? 'third-button' : 'second-button')" data-toggle="modal"
data-target="#showTicketsModal" v-if="tickets.length > 0">
<i class="fas fa-user-clock"></i>
</a>
<a type="button" :class="'btn btn-secondary side-button-right text-dark second-button'" data-toggle="modal"
data-target="#showArchivedTicketsModal" v-if="archivedTrackers > 0">
data-target="#showArchivedTicketsModal" v-if="archive.length > 0">
<i class="fas fa-archive"></i>
</a>
@ -102,10 +102,10 @@ @@ -102,10 +102,10 @@
<i class="fas fa-sliders-h"></i>
</a>
<div class="modal modal-fullscreen fade" id="showTrackedTicketsModal" tabindex="-1" role="dialog"
aria-labelledby="showTrackedTicketsModalLabel"
<div class="modal modal-fullscreen fade" id="showTicketsModal" tabindex="-1" role="dialog"
aria-labelledby="showTicketsModalLabel"
aria-hidden="true">
<div class="modal-dialog showTrackedTicketsModalDialog" role="document">
<div class="modal-dialog showTicketsModalDialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><i class="fas fa-user-clock"></i> Tracker</h5>
@ -113,66 +113,69 @@ @@ -113,66 +113,69 @@
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6" v-for="(ticket, ticketIndex) in trackedTickets" v-if="!ticket.archived">
<h6><span v-if="isTicketNumber(ticket.number)"></span>{{ ticket.number }}</h6>
<template v-for="(ticket, ticketIndex) in tickets">
<div class="col-md-6">
<h6><span v-if="isTicketNumber(ticket.number)"></span>{{ ticket.number }}</h6>
<div class="form-group">
<input type="text" class="form-control" v-model="ticket.description" @keydown="updateStorage()" placeholder="Beschreibung">
</div>
<span>Gesamtzeit: {{ getTotalTime(ticket) }}</span>
<br>
<div class="row">
<div class="col-md-3">
<button class="btn btn-success ticket-action-button"
@click="bookTimeManually(ticket, 30)">
+ ½h
</button>
</div>
<div class="col-md-3">
<button class="btn btn-success ticket-action-button"
@click="bookTimeManually(ticket, 60)">
+ 1h
</button>
<div class="form-group">
<input type="text" class="form-control" v-model="ticket.description" @keydown="updateStorage()" placeholder="Beschreibung">
</div>
<div class="col-md-3">
<button class="btn btn-warning ticket-action-button"
@click="bookTimeManually(ticket, -30)">
- ½h
</button>
</div>
<div class="col-md-3">
<button class="btn btn-warning ticket-action-button"
@click="bookTimeManually(ticket, -60)">
- 1h
</button>
</div>
<div class="col">
<button class="btn btn-secondary ticket-action-button" data-bs-dismiss="modal"
@click="archiveTicket(ticket)" title="Archivieren">
<i class="fas fa-archive"></i>
</button>
</div>
<div class="col" v-if="ticket.history.length > 0">
<button class="btn btn-info ticket-action-button" data-bs-dismiss="modal"
@click="showHistoryForTicket(ticket)" title="History">
<i class="fas fa-history"></i>
</button>
</div>
<div class="col">
<button class="btn btn-danger ticket-action-button"
@click="deleteTicket(ticket)" title="Löschen">
<i class="fas fa-trash"></i>
</button>
</div>
<div class="col" v-if="ticketSystemUrl">
<a v-if="isTicketNumber(ticket.number)" :href="ticketSystemUrl + ticket.number"
target="_blank" class="btn btn-dark ticket-action-button" title="Ticket">
<i class="fas fa-external-link-square-alt"></i>
</a>
<span v-if="getTotalTime(ticket) > 0">Gesamtzeit: {{ getTotalTime(ticket) }}</span>
<br>
<div class="row">
<div class="col-md-3">
<button class="btn btn-success ticket-action-button"
@click="bookTimeManually(ticket, 30)">
+ ½h
</button>
</div>
<div class="col-md-3">
<button class="btn btn-success ticket-action-button"
@click="bookTimeManually(ticket, 60)">
+ 1h
</button>
</div>
<div class="col-md-3">
<button class="btn btn-warning ticket-action-button"
@click="bookTimeManually(ticket, -30)">
- ½h
</button>
</div>
<div class="col-md-3">
<button class="btn btn-warning ticket-action-button"
@click="bookTimeManually(ticket, -60)">
- 1h
</button>
</div>
<div class="col">
<button class="btn btn-secondary ticket-action-button" data-bs-dismiss="modal"
@click="archiveTicket(ticketIndex)" title="Archivieren">
<i class="fas fa-archive"></i>
</button>
</div>
<div class="col" v-if="ticket.history.length > 0">
<button class="btn btn-info ticket-action-button" data-bs-dismiss="modal"
@click="showHistoryForTicket(ticket)" title="History">
<i class="fas fa-history"></i>
</button>
</div>
<div class="col">
<button class="btn btn-danger ticket-action-button"
@click="deleteTicket(ticket)" title="Löschen">
<i class="fas fa-trash"></i>
</button>
</div>
<div class="col" v-if="ticketSystemUrl">
<a v-if="isTicketNumber(ticket.number)" :href="ticketSystemUrl + ticket.number"
target="_blank" class="btn btn-dark ticket-action-button" title="Ticket">
<i class="fas fa-external-link-square-alt"></i>
</a>
</div>
</div>
<br/>
</div>
</div>
</template>
</div>
</div>
</div>
@ -190,40 +193,43 @@ @@ -190,40 +193,43 @@
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6" v-for="(ticket, ticketIndex) in trackedTickets" v-if="ticket.archived">
<h6><span v-if="isTicketNumber(ticket.number)"></span>{{ ticket.number }}</h6>
<div v-if="ticket.description">
<p class="blockquote">{{ ticket.description }}</p>
</div>
<span>Gesamtzeit: {{ getTotalTime(ticket) }}</span>
<br>
<div class="col-md-12 row">
<div class="col">
<button class="btn btn-success ticket-action-button" data-bs-dismiss="modal"
@click="reactivateTicket(ticket)" title="Reaktivieren">
<i class="fas fa-power-off"></i>
</button>
</div>
<div class="col" v-if="ticket.history.length > 0">
<button class="btn btn-info ticket-action-button" data-bs-dismiss="modal"
@click="showHistoryForTicket(ticket)" title="History">
<i class="fas fa-history"></i>
</button>
<template v-for="(ticket, ticketIndex) in archive">
<div class="col-md-6">
<h6><span v-if="isTicketNumber(ticket.number)"></span>{{ ticket.number }}</h6>
<div v-if="ticket.description">
<p class="blockquote">{{ ticket.description }}</p>
</div>
<div class="col">
<button class="btn btn-danger ticket-action-button"
@click="deleteTicket(ticket)" title="Löschen">
<i class="fas fa-trash"></i>
</button>
</div>
<div class="col" v-if="ticketSystemUrl">
<a v-if="isTicketNumber(ticket.number)" :href="ticketSystemUrl + ticket.number"
target="_blank" class="btn btn-dark ticket-action-button" title="Ticket">
<i class="fas fa-external-link-square-alt"></i>
</a>
<span v-if="getTotalTime(ticket) > 0">Gesamtzeit: {{ getTotalTime(ticket) }}</span>
<br>
<div class="col-md-12 row">
<div class="col">
<button class="btn btn-success ticket-action-button" data-bs-dismiss="modal"
@click="reactivateTicket(ticketIndex)" title="Reaktivieren">
<i class="fas fa-power-off"></i>
</button>
</div>
<div class="col" v-if="ticket.history.length > 0">
<button class="btn btn-info ticket-action-button" data-bs-dismiss="modal"
@click="showHistoryForTicket(ticket)" title="History">
<i class="fas fa-history"></i>
</button>
</div>
<div class="col">
<button class="btn btn-danger ticket-action-button"
@click="deleteTicket(ticket)" title="Löschen">
<i class="fas fa-trash"></i>
</button>
</div>
<div class="col" v-if="ticketSystemUrl">
<a v-if="isTicketNumber(ticket.number)" :href="ticketSystemUrl + ticket.number"
target="_blank" class="btn btn-dark ticket-action-button" title="Ticket">
<i class="fas fa-external-link-square-alt"></i>
</a>
</div>
</div>
<br/>
</div>
</div>
</template>
</div>
</div>
</div>
@ -309,60 +315,63 @@ @@ -309,60 +315,63 @@
</div>
<div class="modal-body">
<ul class="list-group ticket-history">
<li class="list-group-item" v-for="(tracker, historyIndex) in selectedTicket.history" v-if="!tracker.manually">
<div>
<div class="float-end" :title="exactTimestamp(tracker.trackingStarted)">
{{ formattedDate(tracker.trackingStarted) }}
<template v-for="(tracker, historyIndex) in selectedTicket.history">
<li class="list-group-item" v-if="!tracker.manually">
<div>
<div class="float-end" :title="exactTimestamp(tracker.trackingStarted)">
{{ formattedDate(tracker.trackingStarted) }}
</div>
Start:
</div>
Start:
</div>
<div>
<div class="float-end" :title="exactTimestamp(tracker.trackingStopped)">
{{ formattedDate(tracker.trackingStopped) }}
<div>
<div class="float-end" :title="exactTimestamp(tracker.trackingStopped)">
{{ formattedDate(tracker.trackingStopped) }}
</div>
Ende:
</div>
Ende:
</div>
<div>
<div class="float-end">
{{ timeWithPostFix(tracker.minutes) }}
<div>
<div class="float-end">
{{ timeWithPostFix(tracker.minutes) }}
</div>
Zeit:
</div>
Zeit:
</div>
<a href="javascript:" @click="deleteHistoryEntry(null, historyIndex)" class="float-end">
<i class="fas fa-trash"></i>
</a>
<br/>
</li>
<li class="list-group-item bg-light" v-for="(tracker, historyIndex) in selectedTicket.history"
v-if="tracker.manually && tracker.manually == true">
<div>
<div class="float-end" :title="exactTimestamp(tracker.trackingStarted)">
{{ formattedDate(tracker.trackingStarted) }}
<a href="javascript:" @click="deleteHistoryEntry(null, historyIndex)" class="float-end">
<i class="fas fa-trash"></i>
</a>
<br/>
</li>
</template>
<template v-for="(tracker, historyIndex) in selectedTicket.history">
<li class="list-group-item bg-light"
v-if="tracker.manually">
<div>
<div class="float-end" :title="exactTimestamp(tracker.trackingStarted)">
{{ formattedDate(tracker.trackingStarted) }}
</div>
Manuell erfasst am:
</div>
Manuell erfasst am:
</div>
<div>
<div class="float-end">
{{ timeWithPostFix(tracker.minutes) }}
<div>
<div class="float-end">
{{ timeWithPostFix(tracker.minutes) }}
</div>
Zeit:
</div>
Zeit:
</div>
<a href="javascript:" @click="deleteHistoryEntry(ticketIndex, historyIndex)" class="float-end">
<i class="fas fa-trash"></i>
</a>
<br/>
</li>
<a href="javascript:" @click="deleteHistoryEntry(ticketIndex, historyIndex)" class="float-end">
<i class="fas fa-trash"></i>
</a>
<br/>
</li>
</template>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="https://kit.fontawesome.com/b54a4cceff.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js"></script>
<script src="js/vue.js"></script>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

109
js/app.js
Unescape View File

@ -1,17 +1,19 @@ @@ -1,17 +1,19 @@
let tab = new Vue({
el: '#root',
data: {
theme: 'quartz',
themes: null,
dashboardLogo: 'img/logo.png',
ticketSystemUrl: '',
showPT: true,
linkTarget: '_blank',
inputs: {
importJson: ''
},
trackedTickets: [],
selectedTicket: null
const TimeTrack = {
data() {
return {
theme: 'quartz',
themes: null,
dashboardLogo: 'img/logo.png',
ticketSystemUrl: '',
showPT: true,
linkTarget: '_blank',
inputs: {
importJson: ''
},
tickets: [],
archive: [],
selectedTicket: null
}
},
mounted() {
let vue = this;
@ -26,8 +28,11 @@ let tab = new Vue({ @@ -26,8 +28,11 @@ let tab = new Vue({
},
methods: {
loadStorage() {
let storedTrackedTickets = JSON.parse(localStorage.getItem('trackedTickets'));
this.trackedTickets = storedTrackedTickets == null ? [] : storedTrackedTickets;
let storedTickets = JSON.parse(localStorage.getItem('tickets'));
this.tickets = storedTickets == null ? [] : storedTickets;
let storedArchive = JSON.parse(localStorage.getItem('archive'));
this.archive = storedArchive == null ? [] : storedArchive;
let storedticketSystemUrl = localStorage.getItem('ticketSystemUrl');
this.ticketSystemUrl = storedticketSystemUrl == null ? '' : storedticketSystemUrl;
@ -39,17 +44,19 @@ let tab = new Vue({ @@ -39,17 +44,19 @@ let tab = new Vue({
this.theme = storedTheme == null ? 'materia' : storedTheme;
},
updateStorage() {
localStorage.setItem('trackedTickets', JSON.stringify(this.trackedTickets));
localStorage.setItem('tickets', JSON.stringify(this.tickets));
localStorage.setItem('archive', JSON.stringify(this.archive));
localStorage.setItem('ticketSystemUrl', this.ticketSystemUrl);
localStorage.setItem('showPT', this.showPT);
localStorage.setItem('theme', this.theme);
this.$forceUpdate();
},
resetToDefault() {
this.updateStorage();
},
addTrackedTicket() {
let newTicket = {
archived: false,
tracking: false,
number: '#',
trackingStarted: null,
@ -57,7 +64,7 @@ let tab = new Vue({ @@ -57,7 +64,7 @@ let tab = new Vue({
history: []
};
this.trackedTickets.push(newTicket);
this.tickets.push(newTicket);
this.updateStorage();
},
startTracking(ticket) {
@ -153,7 +160,7 @@ let tab = new Vue({ @@ -153,7 +160,7 @@ let tab = new Vue({
stopTrackingTicket() {
let vue = this;
vue.trackedTickets.forEach(function (ticket) {
vue.tickets.forEach(function (ticket) {
if (ticket.tracking === true) {
vue.stopTracking(ticket);
}
@ -166,24 +173,26 @@ let tab = new Vue({ @@ -166,24 +173,26 @@ let tab = new Vue({
return number.indexOf('#') >= 0;
},
deleteTicket(index) {
this.trackedTickets.splice(index, 1);
this.tickets.splice(index, 1);
this.updateStorage();
},
archiveTicket(ticket) {
ticket.archived = true;
if (ticket.tracking) {
archiveTicket(index) {
if (this.tickets[index].tracking) {
this.stopTrackingTicket();
}
this.archive.push(this.tickets[index]);
this.tickets.splice(index, 1);
this.updateStorage();
this.$forceUpdate();
},
reactivateTicket(ticket) {
ticket.archived = false;
reactivateTicket(index) {
this.tickets.push(this.archive[index]);
this.archive.splice(index, 1);
this.updateStorage();
},
deleteHistoryEntry(ticketIndex, historyIndex) {
if (ticketIndex) {
this.trackedTickets[ticketIndex].history.splice(historyIndex, 1);
this.tickets[ticketIndex].history.splice(historyIndex, 1);
} else {
this.selectedTicket.history.splice(historyIndex, 1);
}
@ -202,7 +211,8 @@ let tab = new Vue({ @@ -202,7 +211,8 @@ let tab = new Vue({
importData() {
let json = JSON.parse(this.inputs.importJson);
this.trackedTickets = json.trackedTickets;
this.tickets = json.tickets;
this.archive = json.archive;
this.ticketSystemUrl = json.ticketSystemUrl;
this.showPT = json.showPT;
this.theme = json.theme;
@ -237,6 +247,19 @@ let tab = new Vue({ @@ -237,6 +247,19 @@ let tab = new Vue({
let historyModal = new bootstrap.Modal(document.getElementById('historyModal'));
historyModal.toggle();
}, 50)
},
collectDataForDay() {
let collection = [];
this.tickets.forEach((ticket) => {
ticket.history.forEach((historyEntry) => {
if (moment(historyEntry.trackingStarted).format("MMM Do YY") === moment().format("MMM Do YY")) {
collection.push(historyEntry);
}
});
});
return collection;
}
},
watch: {
@ -252,33 +275,13 @@ let tab = new Vue({ @@ -252,33 +275,13 @@ let tab = new Vue({
computed: {
exportJson() {
return JSON.stringify({
trackedTickets: this.trackedTickets,
tickets: this.tickets,
ticketSystemUrl: this.ticketSystemUrl,
showPT: this.showPT,
theme: this.theme
});
},
archivedTrackers() {
let vue = this;
let count = 0;
this.trackedTickets.forEach((ticket) => {
count += (ticket.archived ? 1 : 0);
})
return count;
},
activeTrackers() {
let vue = this;
let count = 0;
this.trackedTickets.forEach((ticket) => {
count += (ticket.archived ? 0 : 1);
})
return count;
}
},
created() {
}
});
};
Vue.createApp(TimeTrack).mount('#root');

11965
js/vue.js
View File

File diff suppressed because it is too large Load Diff