From 4e6b1f2f788246f389584334419a3d0ad860bf77 Mon Sep 17 00:00:00 2001
From: stingl <o.stingl@vemap.com>
Date: Mon, 6 Sep 2021 17:50:29 +0200
Subject: [PATCH] WIP board

---
 css/app.css                  |  14 +++-
 index.html                   | 144 ++++++++++++++++++++++++++++++++++-
 js/app.js                    |  73 +++++++++++++++++-
 js/components/ticket-card.js |  67 ++++++++++++++++
 todos.md                     |   1 +
 5 files changed, 295 insertions(+), 4 deletions(-)
 create mode 100644 js/components/ticket-card.js
 create mode 100644 todos.md

diff --git a/css/app.css b/css/app.css
index 031ff19..d56d468 100644
--- a/css/app.css
+++ b/css/app.css
@@ -154,4 +154,16 @@ nav, .card {
 
 .switch-portal-button {
     margin-bottom: 0.5em;
-}
\ No newline at end of file
+}
+
+.col-board-inner {
+    border-right:  1px solid grey;
+}
+
+#board-view h5 {
+    text-align: center;
+    text-transform: uppercase;
+    color: dimgrey;
+    line-height: 0.7em;
+    word-spacing: 1px;
+}
diff --git a/index.html b/index.html
index 1ad19b5..9216eec 100644
--- a/index.html
+++ b/index.html
@@ -24,14 +24,16 @@
                         <i class="far fa-pause-circle"></i>
                         <i class="far fa-stop-circle" @click="stopTracking(worktimeTracker)"></i>
                     </template>
-                    <a href="javascript:" @click="startTracking(worktimeTracker)" v-else>
+                    <template v-else>
+                    <a href="javascript:" @click="startTracking(worktimeTracker)">
                         <i class="far fa-play-circle"></i>
                     </a>
+                    </template>
                 </div>
                 <h5 class="brand-title">Timetrack</h5>
             </a>
         </nav>
-        <div class="row">
+        <div class="row" v-if="view === 'trackers'">
             <div class="col-md-12">
                 <div class="row">
                     <template v-for="(ticket, ticketIndex) in tickets">
@@ -101,6 +103,144 @@
                 </div>
             </div>
         </div>
+        <div class="row" v-if="view === 'board'" id="board-view">
+            <div class="col-4 col-board-inner">
+                <h5>Todo</h5>
+                <template v-for="(ticket, ticketIndex) in tickets">
+                    <tracker-card></tracker-card>
+                </template>
+            </div>
+            <div class="col-4 col-board-inner">
+                <h5>On hold</h5>
+                <template v-for="(ticket, ticketIndex) in tickets">
+                    <div class="card bg-gradient-secondary" v-if="ticket.status === 'onhold'">
+                        <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>
+                                            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 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>
+
+                                <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>
+
+                                    <div class="col-md-12">
+                                        <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>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </div>
+            <div class="col-4">
+                <h5>Work in progress</h5>
+                <template v-for="(ticket, ticketIndex) in tickets">
+                    <div class="card bg-gradient-secondary" v-if="ticket.status === 'wip'">
+                        <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>
+                                            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 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>
+
+                                <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>
+
+                                    <div class="col-md-12">
+                                        <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>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </div>
+        </div>
     </div>
 
     <!-- Tickets Modal -->
diff --git a/js/app.js b/js/app.js
index 2e2de7a..ab477a2 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1,6 +1,7 @@
 const TimeTrack = {
     data() {
         return {
+            view: 'board',
             theme: 'quartz',
             themes: null,
             dashboardLogo: 'assets/img/logo.png',
@@ -127,6 +128,8 @@ const TimeTrack = {
                 this.stopTrackingTicket();
             }
 
+            ticket.status = 'wip';
+
             ticket.trackingStarted = moment();
             ticket.tracking = true;
 
@@ -461,4 +464,72 @@ function playSound(sound, extension = null) {
     audio.play();
 }
 
-Vue.createApp(TimeTrack).mount('#root');
+const TimeTrackApp = Vue.createApp(TimeTrack).mount('#root');
+
+TimeTrackApp.component('tracker-card', {
+  data: function () {
+    return {
+      count: 0
+    }
+  },
+  props: ['tracker'],
+  template: '<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>' + 
+                                            '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 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>' +
+ +
+                                '<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-if="ticket.tracking">' + 
+                                        '<button type="button" class="btn btn-danger ticket-action-button"' + 
+                                                '@click="stopTracking(ticket)">' + 
+                                            '<i class="far fa-stop-circle"></i>' + 
+                                        '</button>' + 
+                                    '</div>' + 
+
+                                    '<div class="col-md-12">' + 
+                                        '<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>' + 
+                            '</div>' + 
+                        '</div>' + 
+                    '</div>'
+});
diff --git a/js/components/ticket-card.js b/js/components/ticket-card.js
new file mode 100644
index 0000000..5f38e89
--- /dev/null
+++ b/js/components/ticket-card.js
@@ -0,0 +1,67 @@
+Vue.component('tracker-card', {
+  data: function () {
+    return {
+      count: 0
+    }
+  },
+  props: ['tracker'],
+  template: '<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>' + 
+                                            '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 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>' +
+ +
+                                '<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>' + 
+
+                                    '<div class="col-md-12">' + 
+                                        '<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>' + 
+                            '</div>' + 
+                        '</div>' + 
+                    '</div>'
+});
\ No newline at end of file
diff --git a/todos.md b/todos.md
new file mode 100644
index 0000000..d100bb3
--- /dev/null
+++ b/todos.md
@@ -0,0 +1 @@
+- [] board
\ No newline at end of file