add notifications

4 files changed, 130 insertions, 4 deletions

diff --git a/src/components/FileOperationsTable.vue b/src/components/FileOperationsTable.vue
index a5f6715..a4db953 100644
--- a/src/components/FileOperationsTable.vue
+++ b/src/components/FileOperationsTable.vue
@@ -2,8 +2,9 @@
     <vaadin-grid theme="row-dividers" column-reordering-allowed multi-sort :items.prop="fileOperations">
         <vaadin-grid-selection-column auto-select frozen></vaadin-grid-selection-column>
         <vaadin-grid-column width="5em" flex-grow="0" id="status" header="Status"></vaadin-grid-column>
+        <vaadin-grid-column width="9em" flex-grow="0" id="operation" header="" class="operation"></vaadin-grid-column>
         <vaadin-grid-sort-column width="9em" path="originalName" header="Name"></vaadin-grid-sort-column>
-        <vaadin-grid-sort-column width="9em" path="timestamp" id="time" header="Geändert"></vaadin-grid-sort-column>
+        <vaadin-grid-sort-column width="9em" path="timestamp" id="time" header="File changed"></vaadin-grid-sort-column>
     </vaadin-grid>
 </template>
 
@@ -76,6 +77,49 @@ export default {
             root.innerHTML = '';
             root.appendChild(localTime);
         }
+
+        document.querySelector('#operation').renderer = (root, grid, rowData) => {
+            switch (rowData.item.command) {
+                case 1:
+                    if (rowData.item.type == 'file') {
+                        root.innerHTML = 'File deleted';
+                    } else {
+                        root.innerHTML = 'Folder deleted';
+                    }
+                    break;
+                case 2:
+                    if (rowData.item.type == 'file') {
+                        root.innerHTML = 'File renamed';
+                    } else {
+                        root.innerHTML = 'Folder renamed';
+                    }
+                    break;
+                case 3:
+                    if (rowData.item.type == 'file') {
+                        root.innerHTML = 'File written';
+                    } else {
+                        root.innerHTML = 'Folder written';
+                    }
+                    break;
+                case 4:
+                    if (rowData.item.type == 'file') {
+                        root.innerHTML = 'File read';
+                    } else {
+                        root.innerHTML = 'Folder read';
+                    }
+                    break;
+                case 5:
+                    if (rowData.item.type == 'file') {
+                        root.innerHTML = 'File created';
+                    } else {
+                        root.innerHTML = 'Folder created';
+                    }
+                    break;
+                default:
+                    root.innerHTML = 'No information';
+                    break;
+            }
+        }
     }
 }
 </script>
@@ -84,4 +128,7 @@ export default {
     vaadin-grid {
         border: none;
     }
+    .operation {
+        color: #878787 !important;
+    }
 </style>
\ No newline at end of file
diff --git a/src/components/Notification.vue b/src/components/Notification.vue
new file mode 100644
index 0000000..edc8095
--- /dev/null
+++ b/src/components/Notification.vue
@@ -0,0 +1,50 @@
+<template>
+	<div class="notification" v-show="visible">
+		{{ text }} <iron-icon icon="clear" @click="onClickCloseButton"></iron-icon>
+	</div>
+</template>
+
+<script>
+import '@polymer/iron-icon/iron-icon.js';
+import '@polymer/iron-icons/iron-icons.js';
+import '../webcomponents/ransomware-icons'
+
+export default {
+	name: 'Notification',
+
+	props: {
+		text: {
+			type: String,
+			default: '',
+			required: true
+        },
+        visible: {
+            type: Boolean, default: false
+        }
+    },
+    methods: {
+		onClickCloseButton: function() {
+			this.$emit('on-close');
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+    .notification {
+        background-color: #E7E7E7;
+        color: #000;
+        font-size: 16px;
+        font-weight: bold;
+        width: 60%;
+        height: 60px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0px 10px 0px 10px !important;
+        margin: 20px 0px 20px 0px;
+        iron-icon {
+            cursor: pointer;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/views/History.vue b/src/views/History.vue
index 18bd197..6e6d2f1 100644
--- a/src/views/History.vue
+++ b/src/views/History.vue
@@ -5,6 +5,9 @@
 				<paper-spinner active></paper-spinner>
 			</div>
 			<div class="page">
+                <div class="notification-wrapper">
+                    <Notification text="Test Notification" @on-close="visible = false" :visible="visible"></Notification>
+                </div>
                 <Header header="History">
                     <RecoverAction id="recover" label="Recover selected files" v-on:recover="onRecover" primary></RecoverAction>
                 </Header>
@@ -19,6 +22,7 @@ import '@polymer/paper-spinner/paper-spinner.js';
 import '@polymer/iron-pages/iron-pages.js';
 import FileOperationsTable from '../components/FileOperationsTable'
 import Header from '../components/Header'
+import Notification from '../components/Notification'
 import RecoverAction from '../components/RecoverAction'
 import AppContent from 'nextcloud-vue/dist/Components/AppContent'
 
@@ -28,12 +32,19 @@ export default {
 		AppContent,
         FileOperationsTable,
         Header,
-        RecoverAction
+        RecoverAction,
+        Notification
+    },
+    props: {
+        visible: {
+            type: Boolean, default: false
+        }
     },
     data() {
         return {
             fileOperations: [],
-            page: 0
+            page: 0,
+            visibile: true
         };
     },
     mounted() {
@@ -120,4 +131,8 @@ export default {
 		height: 90vh;
 		justify-content: center;
 	}
+    .notification-wrapper {
+        display: flex;
+        justify-content: center;
+    }
 </style>
\ No newline at end of file
diff --git a/src/views/Recover.vue b/src/views/Recover.vue
index 51aa6ca..07a99b7 100644
--- a/src/views/Recover.vue
+++ b/src/views/Recover.vue
@@ -5,6 +5,9 @@
 				<paper-spinner active></paper-spinner>
 			</div>
 			<div class="page">
+                <div class="notification-wrapper">
+                    <Notification text="Test Notification" @on-close="visible = false" :visible="visible"></Notification>
+                </div>
                 <Header header="Recover">
                     <RecoverAction v-if="detected" id="recover" label="Recover" v-on:recover="onRecover" primary></RecoverAction>
                 </Header>
@@ -24,6 +27,7 @@ import '@polymer/iron-pages/iron-pages.js';
 import '@polymer/iron-icon/iron-icon.js';
 import '@polymer/iron-icons/iron-icons.js';
 import FileOperationsTable from '../components/FileOperationsTable'
+import Notification from '../components/Notification'
 import Header from '../components/Header'
 import RecoverAction from '../components/RecoverAction'
 import AppContent from 'nextcloud-vue/dist/Components/AppContent'
@@ -34,7 +38,13 @@ export default {
 		AppContent,
         FileOperationsTable,
         Header,
-        RecoverAction
+        RecoverAction,
+        Notification
+    },
+    props: {
+        visible: {
+            type: Boolean, default: false
+        }
     },
     data() {
         return {
@@ -150,4 +160,8 @@ export default {
 		height: 90vh;
 		justify-content: center;
 	}
+    .notification-wrapper {
+        display: flex;
+        justify-content: center;
+    }
 </style>
\ No newline at end of file