Frontend: Show placeholder if logs are empty

Signed-off-by: Michael Mayer <michael@liquidbytes.net>

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));

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;

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>