Added icon of unread event for navigation link

public/mix-manifest.json

@@ -1,4 +1,4 @@
 {
- "/js/app.js": "/js/app.js?id=d9665350d2c3bf6b9310",
- "/css/app.css": "/css/app.css?id=969d7a3eb881fda81ff9"
+ "/js/app.js": "/js/app.js?id=a233399d480c8eef1def",
+ "/css/app.css": "/css/app.css?id=8c9859941fe3684d3c5c"
 }

resources/js/Components/Layout/Sidebar/Left.vue

@@ -9,6 +9,7 @@
  class="left-sidebar__link"
  >
  <span v-html="link.icon"></span>
+ <span v-show="link.supIcon" class="left-sidebar__supIcon"/>
  </Link>
  </nav>
 
@@ -23,6 +24,8 @@
 import WsConnectionIcon from "@/Components/UI/WsConnectionIcon";
 import {Link} from '@inertiajs/inertia-vue3'
 import Logout from "./Logout";
+import {useStore} from "vuex";
+import {computed} from "vue";
 
 export default {
  components: {Logout, Link, WsConnectionIcon},
@@ -32,26 +35,30 @@ export default {
  {
  href: route('events'),
  title: 'Events',
- state: (url) => this.$page.url == url,
- icon: '<svg class="fill-current" viewBox="0 0 24 24" xmlns="http:https://www.w3.org/2000/svg"><path d="m19 1h-14a5.006 5.006 0 0 0 -5 5v12a5.006 5.006 0 0 0 5 5h14a5.006 5.006 0 0 0 5-5v-12a5.006 5.006 0 0 0 -5-5zm-14 2h14a3 3 0 0 1 3 3v1h-20v-1a3 3 0 0 1 3-3zm14 18h-14a3 3 0 0 1 -3-3v-9h20v9a3 3 0 0 1 -3 3zm0-8a1 1 0 0 1 -1 1h-12a1 1 0 0 1 0-2h12a1 1 0 0 1 1 1zm-4 4a1 1 0 0 1 -1 1h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 1 1zm-12-12a1 1 0 1 1 1 1 1 1 0 0 1 -1-1zm3 0a1 1 0 1 1 1 1 1 1 0 0 1 -1-1zm3 0a1 1 0 1 1 1 1 1 1 0 0 1 -1-1z"/></svg>'
+ state: (url) => this.$page.url === url,
+ icon: '<svg class="fill-current" viewBox="0 0 24 24" xmlns="http:https://www.w3.org/2000/svg"><path d="m19 1h-14a5.006 5.006 0 0 0 -5 5v12a5.006 5.006 0 0 0 5 5h14a5.006 5.006 0 0 0 5-5v-12a5.006 5.006 0 0 0 -5-5zm-14 2h14a3 3 0 0 1 3 3v1h-20v-1a3 3 0 0 1 3-3zm14 18h-14a3 3 0 0 1 -3-3v-9h20v9a3 3 0 0 1 -3 3zm0-8a1 1 0 0 1 -1 1h-12a1 1 0 0 1 0-2h12a1 1 0 0 1 1 1zm-4 4a1 1 0 0 1 -1 1h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 1 1zm-12-12a1 1 0 1 1 1 1 1 1 0 0 1 -1-1zm3 0a1 1 0 1 1 1 1 1 1 0 0 1 -1-1zm3 0a1 1 0 1 1 1 1 1 1 0 0 1 -1-1z"/></svg>',
+ supIcon: computed(() => this.unReadEvents.length > 0),
  },
  {
  href: route('events.type', 'smtp'),
  title: 'SMTP mails',
  state: (url) => this.$page.url.startsWith(url),
- icon: '<svg class="fill-current" xmlns="http:https://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19,1H5A5.006,5.006,0,0,0,0,6V18a5.006,5.006,0,0,0,5,5H19a5.006,5.006,0,0,0,5-5V6A5.006,5.006,0,0,0,19,1ZM5,3H19a3,3,0,0,1,2.78,1.887l-7.658,7.659a3.007,3.007,0,0,1-4.244,0L2.22,4.887A3,3,0,0,1,5,3ZM19,21H5a3,3,0,0,1-3-3V7.5L8.464,13.96a5.007,5.007,0,0,0,7.072,0L22,7.5V18A3,3,0,0,1,19,21Z"/></svg>'
+ icon: '<svg class="fill-current" xmlns="http:https://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19,1H5A5.006,5.006,0,0,0,0,6V18a5.006,5.006,0,0,0,5,5H19a5.006,5.006,0,0,0,5-5V6A5.006,5.006,0,0,0,19,1ZM5,3H19a3,3,0,0,1,2.78,1.887l-7.658,7.659a3.007,3.007,0,0,1-4.244,0L2.22,4.887A3,3,0,0,1,5,3ZM19,21H5a3,3,0,0,1-3-3V7.5L8.464,13.96a5.007,5.007,0,0,0,7.072,0L22,7.5V18A3,3,0,0,1,19,21Z"/></svg>',
+ supIcon: computed(() => this.unReadEvents.filter(i => i === 'smtp').length > 0),
  },
  {
  href: route('events.type', 'sentry'),
  title: 'Sentry logs',
  state: (url) => this.$page.url.startsWith(url),
- icon: '<svg class="fill-current" xmlns="http:https://www.w3.org/2000/svg" viewBox="0 0 24 22"><path d="M23.6 18c.5 1 .5 2 .1 2.7-.5.8-1.3 1.3-2.4 1.3h-2a19 19 0 0 0 0-2.5h1.3c.3 0 .6-.3.6-.6l-.1-.3-8.6-15.2A.6.6 0 0 0 12 3a.6.6 0 0 0-.5.3L10 5.8A18.9 18.9 0 0 1 17.4 22h-6.6a12.6 12.6 0 0 0 0-2.5 12 12 0 0 0-4-7.7l-1 1.6A10.1 10.1 0 0 1 9 22H2.7c-1 0-2-.5-2.4-1.3-.4-.8-.4-1.8.1-2.7l1.3-2.3c.7.4 1.4 1 2 1.6l-.8 1.3a.6.6 0 0 0 0 .5.6.6 0 0 0 .3.4h3.2a7.6 7.6 0 0 0-3.8-5.4l3.4-6 2 1.5c2.9 2.4 4.8 5.9 5.2 9.9H15a16.4 16.4 0 0 0-8.1-13l2.8-5C10.3.5 11.1 0 12 0c.9 0 1.7.6 2.3 1.5L23.6 18Z"/></svg>'
+ icon: '<svg class="fill-current" xmlns="http:https://www.w3.org/2000/svg" viewBox="0 0 24 22"><path d="M23.6 18c.5 1 .5 2 .1 2.7-.5.8-1.3 1.3-2.4 1.3h-2a19 19 0 0 0 0-2.5h1.3c.3 0 .6-.3.6-.6l-.1-.3-8.6-15.2A.6.6 0 0 0 12 3a.6.6 0 0 0-.5.3L10 5.8A18.9 18.9 0 0 1 17.4 22h-6.6a12.6 12.6 0 0 0 0-2.5 12 12 0 0 0-4-7.7l-1 1.6A10.1 10.1 0 0 1 9 22H2.7c-1 0-2-.5-2.4-1.3-.4-.8-.4-1.8.1-2.7l1.3-2.3c.7.4 1.4 1 2 1.6l-.8 1.3a.6.6 0 0 0 0 .5.6.6 0 0 0 .3.4h3.2a7.6 7.6 0 0 0-3.8-5.4l3.4-6 2 1.5c2.9 2.4 4.8 5.9 5.2 9.9H15a16.4 16.4 0 0 0-8.1-13l2.8-5C10.3.5 11.1 0 12 0c.9 0 1.7.6 2.3 1.5L23.6 18Z"/></svg>',
+ supIcon: computed(() => this.unReadEvents.filter(i => i === 'sentry').length > 0),
  },
  {
  href: route('events.type', 'inspector'),
  title: 'Inspector logs',
  state: (url) => this.$page.url.startsWith(url),
- icon: '<svg class="fill-current" xmlns="http:https://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 3H5a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3ZM5 1a5 5 0 0 0-5 5v12a5 5 0 0 0 5 5h14a5 5 0 0 0 5-5V6a5 5 0 0 0-5-5H5Z" /><path fill-rule="evenodd" clip-rule="evenodd" d="M7 12c0-.6.4-1 1-1h10a1 1 0 1 1 0 2H8a1 1 0 0 1-1-1Z" /><path fill-rule="evenodd" clip-rule="evenodd" d="M5 8c0-.6.4-1 1-1h10a1 1 0 1 1 0 2H6a1 1 0 0 1-1-1ZM5 16c0-.6.4-1 1-1h10a1 1 0 1 1 0 2H6a1 1 0 0 1-1-1Z"/></svg>'
+ icon: '<svg class="fill-current" xmlns="http:https://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 3H5a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3ZM5 1a5 5 0 0 0-5 5v12a5 5 0 0 0 5 5h14a5 5 0 0 0 5-5V6a5 5 0 0 0-5-5H5Z" /><path fill-rule="evenodd" clip-rule="evenodd" d="M7 12c0-.6.4-1 1-1h10a1 1 0 1 1 0 2H8a1 1 0 0 1-1-1Z" /><path fill-rule="evenodd" clip-rule="evenodd" d="M5 8c0-.6.4-1 1-1h10a1 1 0 1 1 0 2H6a1 1 0 0 1-1-1ZM5 16c0-.6.4-1 1-1h10a1 1 0 1 1 0 2H6a1 1 0 0 1-1-1Z"/></svg>',
+ supIcon: computed(() => this.unReadEvents.filter(i => i === 'inspector').length > 0),
  },
  {
  href: route('terminal'),
@@ -72,7 +79,33 @@ export default {
  isActive(link) {
  const url = new URL(link.href)
  return link.state.bind(this)(url.pathname)
+ },
+ changeUnreadEvents() {
+ if(this.$page.url === '/') {
+ this.store.commit('clearUnreadEvents')
+ }
+ if (this.$page.props?.events?.data[0]) {
+ this.store.commit('deleteUnreadEvent', this.$page.props.events.data[0].type)
+ }
  }
+ },
+ setup() {
+ const store = useStore();
+ const totalEvents = computed(() => store.getters.totalEvents);
+ const unReadEvents = computed(() => store.getters.getUnreadEvents)
+
+ return {
+ store, totalEvents, unReadEvents
+ }
+ },
+ watch: {
+ totalEvents() {
+ this.changeUnreadEvents();
+ },
+ },
+ mounted() {
+ this.changeUnreadEvents();
  }
+
 }
 </script>

resources/js/EventFactory.js

@@ -45,7 +45,7 @@ export default {
  } else if (event instanceof InspectorEvent) {
  store.commit('inspector/pushEvent', event)
  }
-
+ store.commit('pushUnreadEvent', event.app)
  store.commit('pushEvent', event)
  }).listen(`${namespace}\\EventWasDeleted`, e => {
  store.commit('deleteEvent', e.payload.uuid)

resources/js/store.js

@@ -79,7 +79,7 @@ const smtp = {
  if (state.events.find(e => event.uuid == e.uuid)) {
  return
  }
-
+ 
  state.events.unshift(event)
  },
  openEvent(state, event) {
@@ -165,6 +165,7 @@ export const store = createStore({
  selectedLabels: [],
  selectedColors: [],
  events: {},
+ unReadEvents: [],
  }
  },
  getters: {
@@ -177,6 +178,9 @@ export const store = createStore({
 
  return screens
  },
+ getUnreadEvents:(state) => {
+ return state.unReadEvents;
+ },
  eventByUuid: (state) => (uuid) => {
  return state.events[state.currentScreen].find(event => event.uuid == uuid)
  },
@@ -297,6 +301,15 @@ export const store = createStore({
  state.events[screen] = []
  }
  },
+ pushUnreadEvent(state, type) {
+ state.unReadEvents.push(type)
+ },
+ deleteUnreadEvent(state, type) {
+ state.unReadEvents = state.unReadEvents.filter(e =>e !== type)
+ },
+ clearUnreadEvents(state) {
+ state.unReadEvents = []
+ },
  pushEvent(state, event) {
  if (!event) {
  return;

resources/scss/components/layouts/left-sidebar.scss

@@ -6,7 +6,7 @@
  }
 
  &__link {
- @apply text-blue-500 p-3 md:p-4 lg:p-5 block hover:bg-blue-500 hover:text-white;
+ @apply text-blue-500 p-3 md:p-4 lg:p-5 block hover:bg-blue-500 hover:text-white relative;
 
  &.active {
  @apply bg-blue-700 text-blue-200;
@@ -16,4 +16,8 @@
  &__info {
  @apply divide-y divide-gray-300;
  }
+
+ &__supIcon {
+ @apply absolute top-2 w-2 h-2 bg-red-600 right-2 rounded-full transition transition-all duration-300;
+ }
 }