✨ Add alert

site/src/components/alert/index.vue

@@ -0,0 +1,3 @@
+<template src="./template.html"></template>
+<script src="./script.js"></script>
+<style src="./style.styl" lang="stylus" scoped></style>

site/src/components/alert/script.js

@@ -0,0 +1,12 @@
+export default
+{
+    name: 'alert',
+
+    methods:
+    {
+        onAlertClick()
+        {
+            this.$store.commit('setPendingAlert')
+        }
+    }
+}

site/src/components/alert/style.styl

@@ -0,0 +1,4 @@
+.alert
+    position fixed
+    bottom 0
+    right 30px

site/src/components/alert/template.html

@@ -0,0 +1,3 @@
+<a href="#" class="alert" @click.prevent="onAlertClick">
+    /!\
+</a>

site/src/components/chat/style.styl

@@ -1,7 +1,7 @@
 .chat
     position fixed
     bottom 0
-    right 20px
+    right 90px
 
 .header
     cursor pointer

site/src/components/connexion/script.js

@@ -19,6 +19,11 @@ export default
         pendingMessage()
         {
             return this.$store.state.chat.pendingMessage
+        },
+
+        pendingAlert()
+        {
+            return this.$store.state.chat.pendingAlert
         }
     },
 
@@ -26,7 +31,8 @@ export default
     {
         project: 'onProjectChange',
         pendingUser: 'onPendingUser',
-        pendingMessage: 'onPendingMessage'
+        pendingMessage: 'onPendingMessage',
+        pendingAlert: 'onPendingAlert'
     },
 
     created()
@@ -119,6 +125,14 @@ export default
             {
                 this.chatSocket.emit('message', value)
             }
+        },
+
+        onPendingAlert(value)
+        {
+            if(value)
+            {
+                this.chatSocket.emit('alert')
+            }
         }
     }
 }

site/src/components/project/script.js

@@ -1,6 +1,7 @@
 import FilesTree from '@/components/files-tree'
 import File from '@/components/file'
 import Chat from '@/components/chat'
+import Alert from '@/components/alert'
 
 export default
 {
@@ -10,7 +11,8 @@ export default
     {
         FilesTree,
         File,
-        Chat
+        Chat,
+        Alert
     },
 
     computed:

site/src/components/project/template.html

@@ -4,4 +4,5 @@
     <files-tree></files-tree>
     <file v-if="file" :content="file.data"></file>
     <chat></chat>
+    <alert></alert>
 </div>

site/src/store/modules/chat.js

@@ -4,7 +4,8 @@ export default {
         user: null,
         pendingUser: null,
         messages: [],
-        pendingMessage: null
+        pendingMessage: null,
+        pendingAlert: null
     },
 
     mutations:
@@ -32,6 +33,12 @@ export default {
         setPendingMessage(state, data)
         {
             state.pendingMessage = data
+        },
+
+        setPendingAlert(state)
+        {
+            const date = new Date()
+            state.pendingAlert = { date }
         }
     }
 }