From 55fbd3069933ca6da07c30f65bb728ac3d965a5b Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Thu, 3 Dec 2020 00:32:33 +0100
Subject: [PATCH] Add notification UI component

---
 src/csui/NotificationUi.vue | 130 ++++++++++++++++++++++++++++++++++++
 1 file changed, 130 insertions(+)
 create mode 100644 src/csui/NotificationUi.vue

diff --git a/src/csui/NotificationUi.vue b/src/csui/NotificationUi.vue
new file mode 100644
index 0000000..4f32f8c
--- /dev/null
+++ b/src/csui/NotificationUi.vue
@@ -0,0 +1,130 @@
+<template>
+  <div v-if="showNotification" class="root-window flex flex-column overflow-hidden">
+    <div class="notification-popup flex flex-row">
+      <div v-if="notificationIcon" class="flex-nogrow flex-noshrink notification-icon">
+        <Icon
+          class="flex-nogrow flex-noshrink"
+          :icon="notificationIcon"
+          @click="closeNotification()"
+        >
+        </Icon>
+      </div>
+      <div class="notification-context flex-grow flex-shrink flex flex-column">
+        <div
+          class="notification-text"
+          v-html="notificationText"
+        >
+        </div>
+        <div 
+          v-if="notificationActions"
+          class="action-buttons flex flex-row"
+        >
+          <div 
+            v-for="action of notificationActions"
+            :key="action"
+            @click="action.command"
+          >
+            <Icon v-if="action.icon" :icon="action.icon"></Icon>{{action.label}}
+          </div>
+        </div>
+      </div>
+      <div class="notification-icon">
+        <Icon
+          class="flex-nogrow flex-noshrink"
+          icon="x"
+          @click="closeNotification()"
+        >
+        </Icon>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Icon from '../common/components/Icon';
+
+export default {
+  components: {
+    Icon,
+  },
+  data() {
+    return {
+      // notificationIcon: null,
+      // notificationText: null,
+      // notificationActions: null,
+      // showNotification: false,
+      notificationTimeout: null,
+      notificationIcon: "exclamation-triangle",
+      notificationText: "this is a test notification <b>with some html for bold measure</b>",
+      notificationActions: null,
+      showNotification: true,
+    }
+  },
+  ...mapState([
+    'notificationConfig'
+  ]),
+  watch: {
+    /**
+     * Sets new notification config. Currently, we can only show one notification at a time.
+     * 
+     * We expect a config object like this:
+     * {
+     *    timeout: number  — how long we'll be displaying the notification. If empty, 10s. -1: until user dismisses it
+     *    icon: string     — what icon we're gonna show. We're using bootstrap icons. Can be empty.
+     *    text:            — notification text. Supports HTML.
+     *    notificationActions: [
+     *      {
+     *        command: function that gets executed upon clicking the button.
+     *        label: label of the button
+     *        icon: icon of the button
+     *      }
+     *    ]
+     * }
+     */
+    notificationConfig(newConfig) {
+      if (newConfig) {
+        this.notificationText = newConfig.text;
+        this.notificationActions = newConfig.notificationActions;
+        this.notificationIcon = newConfig.icon;
+
+        this.showNotification = true;
+
+        if (newConfig.timeout !== -1) {
+          this.notificationTimeout = setTimeout(() => this.closeNotification(), newConfig.timeout ?? 10000);
+        }
+      }
+    }
+  },
+  methods: {
+    closeNotification() {
+      clearTimeout(this.notificationTimeout);
+
+      this.showNotification = false;
+      this.notificationIcon = null;
+      this.notificationText = null;
+      this.notificationActions = null;
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.root-window {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.notification-popup {
+  position: absolute;
+  z-index: 99999999;
+  background-color: rgba(0,0,0,0.88);
+  top: 2rem;
+  left: 2rem;
+  width: 15rem;
+  color: #fff;
+}
+.notification-icon {
+  font-size: 3rem;
+}
+</style>
\ No newline at end of file