Added Frontend

frontend/components/GlobalMessages.vue

@@ -0,0 +1,89 @@
+<script setup>
+
+const supabase = useSupabaseClient()
+const profileStore = useProfileStore()
+
+const globalMessages = ref([])
+
+const setup = async () => {
+  let {data} = await supabase.from("globalmessages").select("*, profiles(id)")
+
+  data = data.filter((message) => message.profiles.length === 0)
+
+  globalMessages.value = data
+
+  if(data.length > 0) {
+    messageToShow.value = data[0]
+    showMessageModal.value = true
+  }
+
+
+}
+
+
+const showMessageModal = ref(false)
+const messageToShow = ref(null)
+
+const showMessage = (message) => {
+  messageToShow.value = message
+  showMessageModal.value = true
+}
+const markMessageAsRead = async () => {
+  await supabase.from("globalmessagesseen").insert({
+    profile: profileStore.activeProfile.id,
+    message: messageToShow.value.id,
+  })
+  showMessageModal.value = false
+  setup()
+
+}
+
+
+
+
+setup()
+</script>
+
+<template>
+  <UModal v-model="showMessageModal" prevent-close>
+    <UCard>
+      <template #header>
+        <span class="font-bold">{{messageToShow.title}}</span>
+      </template>
+      <p class=" my-2" v-html="messageToShow.description"></p>
+      <UButton
+          variant="outline"
+          @click="markMessageAsRead"
+      >Gelesen</UButton>
+    </UCard>
+  </UModal>
+
+<!--  <UCard
+      v-if="globalMessages.length >0"
+      class="mt-3"
+      style="border: .75px solid #69c350"
+  >
+    <p class="font-bold">{{globalMessages[0].title}}</p>
+    <UButton
+        icon="i-heroicons-chevron-right"
+        variant="ghost"
+        @click="showMessage(globalMessages[0])"
+    />
+    <UModal v-model="showMessageModal">
+      <UCard>
+        <template #header>
+          <span class="font-bold">{{messageToShow.title}}</span>
+        </template>
+        <p class=" my-2" v-html="messageToShow.description"></p>
+        <UButton
+            variant="outline"
+            @click="markMessageAsRead"
+        >Gelesen</UButton>
+      </UCard>
+    </UModal>
+  </UCard>-->
+</template>
+
+<style scoped>
+
+</style>