[REF. #2] Add the ability to display notifications in-app.

computablefacts · Aug 19, 2024 · d34bcc0 · d34bcc0
1 parent a5e9629
commit d34bcc0
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 1 deletion.
diff --git a/app/Http/Controllers/HomeController.php b/app/Http/Controllers/HomeController.php
@@ -125,6 +125,9 @@ public function index(Request $request)
         if ($tab === 'orders') {
             $orders = YnhOrder::forUser($user);
         }
+
+        $notifications = []; // TODO : load notifications from database
+
         return view('home.index', compact(
             'tab',
             'limit',
@@ -141,7 +144,8 @@ public function index(Request $request)
             'domains',
             'applications',
             'backups',
-            'os_infos'
+            'os_infos',
+            'notifications'
         ));
     }
 }
diff --git a/public/images/icons/bell-on-1.png b/public/images/icons/bell-on-1.png
diff --git a/public/images/icons/bell-on-2.png b/public/images/icons/bell-on-2.png
diff --git a/public/images/icons/bell-on-3.png b/public/images/icons/bell-on-3.png
diff --git a/public/images/icons/bell-on.png b/public/images/icons/bell-on.png
diff --git a/resources/views/layouts/_notifications.blade.php b/resources/views/layouts/_notifications.blade.php
@@ -0,0 +1,20 @@
+<a href="#" class="outline-none" onclick="event.preventDefault();showNotifications()">
+  @if(count($notifications) === 3)
+  <img src="{{ asset('/images/icons/bell-on-3.png') }}" class="align-self-center" width="20">
+  @elseif(count($notifications) === 2)
+  <img src="{{ asset('/images/icons/bell-on-2.png') }}" class="align-self-center" width="20">
+  @elseif(count($notifications) === 1)
+  <img src="{{ asset('/images/icons/bell-on-1.png') }}" class="align-self-center" width="20">
+  @else
+  <img src="{{ asset('/images/icons/bell-on.png') }}" class="align-self-center" width="20">
+  @endif
+</a>
+<script>
+  function showNotifications() {
+    const data = @json($notifications);
+    drawer25.render = () => {
+      return 'TODO';
+    };
+    drawer25.el.show = true;
+  }
+</script>
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
@@ -30,6 +30,21 @@
     href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css"
     media="all" type="text/css" rel="stylesheet" integrity="sha256-3sPp8BkKUE7QyPSl6VfBByBroQbKxKG7tsusY2mhbVY="
     crossorigin="anonymous">
+
+  <!-- Reactjs -->
+  <script src="{{ asset('adversary_meter/src/blueprintjs/reactjs/react.production.min.js') }}"></script>
+  <script src="{{ asset('adversary_meter/src/blueprintjs/reactjs/react-dom.production.min.js') }}"></script>
+  <script src="{{ asset('adversary_meter/src/blueprintjs/reactjs/react-is.production.min.js') }}"></script>
+
+  <!-- Blueprintjs -->
+  <link href="{{ asset('adversary_meter/src/blueprintjs/normalize/normalize.css') }}" rel="stylesheet"/>
+  <link href="{{ asset('adversary_meter/src/blueprintjs/blueprintjs/blueprint-icons.css') }}" rel="stylesheet"/>
+  <link href="{{ asset('adversary_meter/src/blueprintjs/blueprintjs/blueprint.css') }}" rel="stylesheet"/>
+  <link href="{{ asset('adversary_meter/src/blueprintjs/blueprintjs/blueprint-popover2.css') }}" rel="stylesheet"/>
+  <link href="{{ asset('adversary_meter/src/blueprintjs/blueprintjs/table.css') }}" rel="stylesheet"/>
+  <link href="{{ asset('adversary_meter/src/blueprintjs/blueprintjs/blueprint-select.css') }}" rel="stylesheet"/>
+  <link href="{{ asset('adversary_meter/src/blueprintjs/blueprintjs/blueprint-datetime.css') }}" rel="stylesheet"/>
+
 </head>
 <body>
 <div id="app">
@@ -65,6 +80,11 @@
             @endif
           </li>
           @else
+          @if(isset($notifications) && count($notifications) > 0)
+          <li class="nav-item d-flex align-items-center">
+            @include('layouts._notifications')
+          </li>
+          @endif
           @if(Auth::user()->isAdmin())
           <li class="nav-item">
             <a class="nav-link" href="{{ config('konekt.app_shell.ui.url') }}" target="_blank">
@@ -133,10 +153,38 @@
     @yield('content')
   </main>
 </div>
+<div id="drawer-25"></div>
 
 <!-- Scripts -->
 @stack('alpine')
 <script src="{{ asset('js/app.js') }}"></script>
 @stack('scripts')
+<script>
+  /*
+   * Fix Blueprintjs issue.
+   *
+   * https://adambien.blog/roller/abien/entry/uncaught_referenceerror_process_is_not
+   */
+  window.process = {
+    env: {
+      NODE_ENV: 'production'
+    }
+  }
+</script>
+<script src="{{ asset('adversary_meter/src/blueprintjs/main.min.js') }}"></script>
+<script>
+
+  const drawer25 = {
+    el: new com.computablefacts.blueprintjs.MinimalDrawer(document.getElementById('drawer-25'), '25%'), render: null
+  };
+  drawer25.el.onOpen(el => {
+    // console.log(drawer);
+    const div = document.createElement('div');
+    div.innerHTML = drawer25.render ? drawer25.render() : '';
+    el.appendChild(div);
+  });
+  drawer25.el.onClose(() => drawer25.render = null);
+
+</script>
 </body>
 </html>