From 6a8d959301376638f4e37f9ab7d105abfe636513 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sybren=20A=2E=20St=C3=BCvel?= <sybren@blender.org>
Date: Fri, 20 May 2022 14:35:19 +0200
Subject: [PATCH] Web: show task log in footer popover

Styling of the "tab buttons" in the footer popover still needs work. The
currently selected task's log updates are shown, though.
---
 web/app/src/assets/base.css                   | 10 +++-
 web/app/src/components/footer/FooterPopup.vue | 12 +++--
 web/app/src/components/footer/TaskLog.vue     | 49 +++++++++++++++++++
 3 files changed, 66 insertions(+), 5 deletions(-)
 create mode 100644 web/app/src/components/footer/TaskLog.vue

diff --git a/web/app/src/assets/base.css b/web/app/src/assets/base.css
index c2c02512..9331946f 100644
--- a/web/app/src/assets/base.css
+++ b/web/app/src/assets/base.css
@@ -403,9 +403,15 @@ section.footer-popup header h3 {
   margin: 0 auto 0 0;
 }
 
-section.footer-popup button {
-  float: right;
+section.footer-popup button.footer-tab {
+  border: none;
+  margin-right: 2rem;
 }
+section.footer-popup button.footer-tab.active-tab {
+  color: var(--color-accent-text);
+  background-color: var(--color-accent-background);
+}
+
 section.footer-popup .tabulator-tableholder {
   /* Force a visible scroll bar, so that the notification history table always
    * has the same available width. Without this, Tabulator won't properly act on
diff --git a/web/app/src/components/footer/FooterPopup.vue b/web/app/src/components/footer/FooterPopup.vue
index 3cb3d19f..259ffdd6 100644
--- a/web/app/src/components/footer/FooterPopup.vue
+++ b/web/app/src/components/footer/FooterPopup.vue
@@ -1,17 +1,23 @@
 <script setup>
+import { ref } from 'vue'
 import NotificationList from './NotificationList.vue'
+import TaskLog from './TaskLog.vue'
 import ConnectionStatus from '@/components/ConnectionStatus.vue'
 
 const emit = defineEmits(['clickClose'])
+
+const currentTab = ref('NotificationList')
+const tabs = { NotificationList, TaskLog }
 </script>
 
 <template>
   <section class="footer-popup">
     <header>
-      <h3 class="sub-title">Notifications</h3>
+      <button :class='["footer-tab", {"active-tab": currentTab == "NotificationList"}]' @click="currentTab = 'NotificationList'">Notifications</button>
+      <button :class='["footer-tab", {"active-tab": currentTab == "TaskLog"}]' @click="currentTab = 'TaskLog'">Task Log</button>
       <connection-status />
-      <button class='close' @click="emit('clickClose')">X</button>
+      <button class='close' @click="emit('clickClose')" title="Close Pop-over">X</button>
     </header>
-    <notification-list />
+    <component :is="tabs[currentTab]" class="tab"></component>
   </section>
 </template>
diff --git a/web/app/src/components/footer/TaskLog.vue b/web/app/src/components/footer/TaskLog.vue
new file mode 100644
index 00000000..2c245bfb
--- /dev/null
+++ b/web/app/src/components/footer/TaskLog.vue
@@ -0,0 +1,49 @@
+<script setup>
+import { onMounted } from 'vue'
+import { TabulatorFull as Tabulator } from 'tabulator-tables';
+import { useTaskLog } from '@/stores/tasklog'
+import * as datetime from "@/datetime";
+
+const taskLog = useTaskLog();
+
+const tabOptions = {
+  columns: [
+    {
+      title: 'Log Lines',
+      field: 'line',
+      sorter: 'string',
+      widthGrow: 100,
+      resizable: true,
+    },
+  ],
+  headerVisible: false,
+  layout: "fitDataStretch",
+  resizableColumnFit: true,
+  height: "calc(20vh - 3rem)", // Must be set in order for the virtual DOM to function correctly.
+  data: taskLog.history,
+  placeholder: "Task log will appear here",
+  selectable: false,
+};
+
+let tabulator = null;
+onMounted(() => {
+  tabulator = new Tabulator('#task_log_list', tabOptions);
+  tabulator.on("tableBuilt", _scrollToBottom);
+  tabulator.on("tableBuilt", _subscribeToPinia);
+});
+
+function _scrollToBottom() {
+  if (taskLog.empty) return;
+  tabulator.scrollToRow(taskLog.lastID, "bottom", false);
+}
+function _subscribeToPinia() {
+  taskLog.$subscribe(() => {
+    tabulator.setData(taskLog.history)
+      .then(_scrollToBottom)
+  })
+}
+</script>
+
+<template>
+    <div id="task_log_list"></div>
+</template>