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

new navbar

modals-to-spa
stingl 4 years ago
parent
d1eb9606f0
commit
59885e07a1
3 changed files with 154 additions and 93 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. 39
      css/app.css
  2. 195
      index.html
  3. 13
      js/app.js

39
css/app.css
Unescape View File

@ -21,36 +21,36 @@ body {
} }
.side-button-right { .side-button-right {
position: fixed; /*position: fixed;*/
right: 30px; /*right: 30px;*/
height: 60px; /*height: 60px;*/
width: 60px; /*width: 60px;*/
font-size: 1.7em; font-size: 1.7em;
} }
.add-tracker-button { .add-tracker-button {
position: fixed; /*position: fixed;*/
left: 30px; /*left: 30px;*/
bottom: 30px; /*bottom: 30px;*/
height: 60px; /*height: 60px;*/
width: 60px; /*width: 60px;*/
font-size: 1.7em; font-size: 1.7em;
} }
.first-button { .first-button {
bottom: 30px; /*bottom: 30px;*/
} }
.second-button { .second-button {
bottom: 110px; /*bottom: 110px;*/
} }
.third-button { .third-button {
bottom: 190px; /*bottom: 190px;*/
} }
.navbar-brand { .navbar-brand {
@ -124,3 +124,18 @@ nav, .card {
max-width: 85%; max-width: 85%;
margin-left: 5%; margin-left: 5%;
} }
#bottom-menu {
position: fixed;
bottom: 0;
width: 100%;
align-content: center;
background-color: #bdbdbd;
height: 90px;
border-top: 1px solid grey;
padding: 0;
}
.bottom-menu-item {
width: 100%;
}

195
index.html
Unescape View File

@ -11,104 +11,88 @@
</head> </head>
<body oncontextmenu="return false;"> <body oncontextmenu="return false;">
<div class="container" id="root"> <div id="root">
<link rel="stylesheet" :href="'https://bootswatch.com/5/' + theme + '/bootstrap.min.css'"> <div class="container">
<link rel="stylesheet" href="css/app.css"> <link rel="stylesheet" :href="'https://bootswatch.com/5/' + theme + '/bootstrap.min.css'">
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <link rel="stylesheet" href="css/app.css">
<a class="navbar-brand"> <nav class="navbar navbar-expand-lg navbar-light bg-light">
<img :src="dashboardLogo" alt="logo" class="logo-nav float-end" v-if="dashboardLogo"/> <a class="navbar-brand">
<h5 class="brand-title">Timetrack</h5> <img :src="dashboardLogo" alt="logo" class="logo-nav float-end" v-if="dashboardLogo"/>
</a> <h5 class="brand-title">Timetrack</h5>
</nav> </a>
<div class="row"> </nav>
<div class="col-md-12"> <div class="row">
<div class="row"> <div class="col-md-12">
<template v-for="ticket in tickets"> <div class="row">
<div class="col-lg-4 col-md-6"> <template v-for="(ticket, ticketIndex) in tickets">
<div class="card bg-gradient-secondary"> <div class="col-lg-4 col-md-6">
<div class="card-body"> <div class="card bg-gradient-secondary">
<div class="card-text"> <div class="card-body">
<input type="text" <div class="card-text">
v-model="ticket.number" <input type="text"
class="form-control trackingNameField" v-model="ticket.number"
@keydown="updateStorage()"/> class="form-control trackingNameField"
@keydown="updateStorage()"/>
<div class="ticket-time-info"> <div class="ticket-time-info">
<div v-if="ticket.tracking === true"> <div v-if="ticket.tracking === true">
<div class="text-danger font-weight-bolder float-end"> <div class="text-danger font-weight-bolder float-end">
<div class="spinner-grow spinner-grow-sm" role="status"> <div class="spinner-grow spinner-grow-sm" role="status">
<span class="sr-only">Tracking...</span> <span class="sr-only">Tracking...</span>
</div>
Tracking
</div> </div>
Tracking
</div> </div>
</div> </div>
</div>
<div v-if="ticket.tracking === true" class="ticket-time-info"> <div v-if="ticket.tracking === true" class="ticket-time-info">
<span class="float-end">{{ getTrackingStartTime(ticket) }}</span> <span class="float-end">{{ getTrackingStartTime(ticket) }}</span>
<span v-if="ticket.tracking === true">Gestartet: </span> <span v-if="ticket.tracking === true">Gestartet: </span>
<br/> <br/>
<span class="float-end">{{ currentTrackingRunningFor(ticket) }}</span> <span class="float-end">{{ currentTrackingRunningFor(ticket) }}</span>
<span v-if="ticket.tracking === true">Läuft seit: </span> <span v-if="ticket.tracking === true">Läuft seit: </span>
</div> </div>
<div class="ticket-time-info"> <div class="ticket-time-info">
<span class="float-end">{{ getTotalTime(ticket) }}</span> <span class="float-end">{{ getTotalTime(ticket) }}</span>
<span class="current-ticket-info">Gesamt: </span> <span class="current-ticket-info">Gesamt: </span>
</div> </div>
<span class="float-end">{{ getTotalTimeToday(ticket) }}</span> <span class="float-end">{{ getTotalTimeToday(ticket) }}</span>
<span class="">Heute: </span> <span class="">Heute: </span>
<div class="row"> <div class="row">
<div class="col-md-12" v-if="!ticket.tracking"> <div class="col-md-12" v-if="!ticket.tracking">
<button type="button" class="btn btn-info ticket-action-button" <button type="button" class="btn btn-info ticket-action-button"
@click="startTracking(ticket)"> @click="startTracking(ticket)">
<i class="far fa-play-circle"></i> <i class="far fa-play-circle"></i>
</button> </button>
</div> </div>
<div class="col-md-12" v-else> <div class="col-md-12" v-else>
<button type="button" class="btn btn-danger ticket-action-button" <button type="button" class="btn btn-danger ticket-action-button"
@click="stopTracking(ticket)"> @click="stopTracking(ticket)">
<i class="far fa-stop-circle"></i> <i class="far fa-stop-circle"></i>
</button> </button>
</div> </div>
<div class="col-md-12"> <div class="col-md-12">
<button class="btn btn-secondary ticket-action-button" data-bs-dismiss="modal" <button class="btn btn-secondary ticket-action-button" data-bs-dismiss="modal"
@click="archiveTicket(ticketIndex)" title="Archivieren"> @click="archiveTicket(ticketIndex)" title="Archivieren">
<i class="fas fa-archive"></i> <i class="fas fa-archive"></i>
</button> </button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </template>
</template> </div>
</div> </div>
</div> </div>
</div> </div>
<a type="button" class="btn btn-success add-tracker-button text-light" @click="addTrackedTicket()">
<i class="fas fa-plus"></i>
</a>
<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="archive.length > 0">
<i class="fas fa-archive"></i>
</a>
<a type="button" class="btn btn-dark text-light side-button-right first-button" data-toggle="modal"
data-target="#settingsModal">
<i class="fas fa-sliders-h"></i>
</a>
<div class="modal modal-fullscreen fade" id="showTicketsModal" tabindex="-1" role="dialog" <div class="modal modal-fullscreen fade" id="showTicketsModal" tabindex="-1" role="dialog"
aria-labelledby="showTicketsModalLabel" aria-labelledby="showTicketsModalLabel"
@ -116,7 +100,7 @@
<div class="modal-dialog showTicketsModalDialog" role="document"> <div class="modal-dialog showTicketsModalDialog" 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-user-clock"></i> Tracker</h5> <h5 class="modal-title"><i class="fas fa-clock"></i> Tracker</h5>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button> <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
@ -386,8 +370,59 @@
</div> </div>
</div> </div>
</div> </div>
<div id="bottom-menu">
<div class="container">
<div class="row">
<div class="col">
<a type="button"
class="btn btn-success text-light bottom-menu-item"
@click="addTrackedTicket()"
data-bs-toggle="tooltip"
data-bs-placement="left"
title="Neuer Tracker">
<i class="fas fa-plus"></i>
</a>
</div>
<div class="col" v-if="tickets.length > 0">
<a type="button"
class="btn btn-primary text-light bottom-menu-item"
data-toggle="modal"
data-target="#showTicketsModal"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Alle Tracker">
<i class="fas fa-clock"></i>
</a>
</div>
<div class="col" v-if="archive.length > 0">
<a type="button"
class="btn btn-secondary text-dark bottom-menu-item"
data-toggle="modal"
data-target="#showArchivedTicketsModal"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Archivierte Tracker">
<i class="fas fa-archive"></i>
</a>
</div>
<div class="col">
<a type="button"
class="btn btn-dark text-light bottom-menu-item"
data-toggle="modal"
data-target="#settingsModal"
data-bs-toggle="tooltip"
data-bs-placement="left"
title="Einstellungen">
<i class="fas fa-sliders-h"></i>
</a>
</div>
</div>
</div>
</div>
</div> </div>
<script src="https://kit.fontawesome.com/b54a4cceff.js" crossorigin="anonymous"></script> <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="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js"></script>
<script src="https://unpkg.com/vue@next"></script> <script src="https://unpkg.com/vue@next"></script>

13
js/app.js
Unescape View File

@ -25,9 +25,20 @@ const TimeTrack = {
setInterval(() => { setInterval(() => {
vue.$forceUpdate(); vue.$forceUpdate();
}, 1000 * 60) }, 1000 * 60);
vue.loadTooltips();
setInterval(() => {
vue.loadTooltips();
}, 5000);
}, },
methods: { methods: {
loadTooltips() {
let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
let tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
},
loadStorage() { loadStorage() {
let storedTickets = JSON.parse(localStorage.getItem('tickets')); let storedTickets = JSON.parse(localStorage.getItem('tickets'));
this.tickets = storedTickets == null ? [] : storedTickets; this.tickets = storedTickets == null ? [] : storedTickets;