From cabf60aa5902eddb0e8fb3263645567a29923a8b Mon Sep 17 00:00:00 2001
From: Michael Mayer <michael@liquidbytes.net>
Date: Tue, 3 Dec 2019 14:50:52 +0100
Subject: [PATCH] Frontend: Show placeholder if logs are empty

Signed-off-by: Michael Mayer <michael@liquidbytes.net>
---
 frontend/src/common/log.js           | 12 +++++++++++-
 frontend/src/css/app.css             |  3 ++-
 frontend/src/pages/settings/logs.vue |  3 +++
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/frontend/src/common/log.js b/frontend/src/common/log.js
index c8dd5c45a..49f76584b 100644
--- a/frontend/src/common/log.js
+++ b/frontend/src/common/log.js
@@ -2,7 +2,17 @@ import Event from "pubsub-js";
 
 class Log {
     constructor() {
-        this.logs = [];
+        this.created = new Date;
+        this.logs = [
+            /* EXAMPLE LOG MESSAGE
+            {
+                "msg": "waiting for events",
+                "level": "debug",
+                "time": this.created.toISOString(),
+            },
+            */
+        ];
+
         this.logId = 0;
 
         Event.subscribe("log", this.onLog.bind(this));
diff --git a/frontend/src/css/app.css b/frontend/src/css/app.css
index 04f0410fa..d454bd79f 100644
--- a/frontend/src/css/app.css
+++ b/frontend/src/css/app.css
@@ -71,7 +71,8 @@ main {
     color: white;
 }
 
-#photoprism .p-log-message {
+#photoprism .p-log-empty,
+#photoprism .p-log-message{
     display: block;
     text-align: left;
     font-size: 1em;
diff --git a/frontend/src/pages/settings/logs.vue b/frontend/src/pages/settings/logs.vue
index ee0cd3a1e..2fb0c52f8 100644
--- a/frontend/src/pages/settings/logs.vue
+++ b/frontend/src/pages/settings/logs.vue
@@ -2,6 +2,9 @@
     <v-container fluid fill-height class="pa-0 ma-0 p-tab p-tab-logs">
         <v-layout row wrap fill-height class="pa-0 ma-2">
             <v-flex grow xs12 class="pa-2 terminal elevation-2 p-logs">
+                <p v-if="logs.length === 0" class="p-log-empty">
+                    Nothing to see here yet. Be patient.
+                </p>
                 <p v-for="(log, index) in logs" :key="index.id" class="p-log-message" :class="'p-log-' + log.level">
                     {{ log.time | luxon:format('yyyy-LL-dd hh:mm:ss') }} {{ level(log) }} <span>{{ log.msg }}</span>
                 </p>