Compare commits

...

3 Commits

Author SHA1 Message Date
2aa5331036
🔨 Add counter to message viewer 2022-10-26 12:06:29 +02:00
11493aa6f5
🔨 Add loading to webdav config form 2022-10-26 11:41:42 +02:00
a2b9007520
🔨 Add message id + refresh messages 2022-10-26 11:41:08 +02:00
12 changed files with 93 additions and 37 deletions

View File

@ -1,3 +1,4 @@
import { randomUUID } from "crypto";
import { DateTime } from "luxon";
import { Message, MessageType } from "../types/message.js";
@ -8,6 +9,7 @@ class MessageManager {
public addMessage(type: MessageType, message: string, detail?: string, isImportant = false) {
this.messages.push({
id: randomUUID(),
message: message,
type: type,
time: DateTime.now(),

View File

@ -9,6 +9,7 @@ export enum MessageType {
export interface Message {
id: string;
time: DateTime;
type: MessageType;
message: string;

View File

@ -19,7 +19,7 @@
"pinia": "^2.0.23",
"roboto-fontface": "*",
"vue": "^3.2.40",
"vuetify": "3.0.0-beta.14",
"vuetify": "3.0.0-beta.15",
"webfontloader": "^1.0.0"
},
"devDependencies": {

View File

@ -24,7 +24,7 @@ specifiers:
vite-plugin-vuetify: ^1.0.0-alpha.12
vue: ^3.2.40
vue-tsc: 1.0.7
vuetify: 3.0.0-beta.14
vuetify: 3.0.0-beta.15
webfontloader: ^1.0.0
dependencies:
@ -36,7 +36,7 @@ dependencies:
pinia: 2.0.23_rg374xhldfcyvjtaj3qktyfz5y
roboto-fontface: 0.10.0
vue: 3.2.40
vuetify: 3.0.0-beta.14_vdkwhj2kz5kpysy3rwb432nm3y
vuetify: 3.0.0-beta.15_vdkwhj2kz5kpysy3rwb432nm3y
webfontloader: 1.6.28
devDependencies:
@ -53,7 +53,7 @@ devDependencies:
prettier: 2.7.1
typescript: 4.7.4
vite: 3.1.7
vite-plugin-vuetify: 1.0.0-alpha.17_jvcjrjiyr77axku57qj2zhmwla
vite-plugin-vuetify: 1.0.0-alpha.17_g64smqxqrz57uhsly7clskj5fy
vue-tsc: 1.0.7_typescript@4.7.4
packages:
@ -482,7 +482,7 @@ packages:
'@types/node': 16.11.65
dev: true
/@vuetify/loader-shared/1.6.0_ufv4csfzemzfiqpf5bhlrg5qhm:
/@vuetify/loader-shared/1.6.0_l2xw63bflzffxrhpro723k3mhy:
resolution: {integrity: sha512-mRvswe5SIecagmKkL1c0UQx5V9ACKLyEGegOOe5vC3ccFH8rMbyI4AVZaAKm/EnGXKirWJ1umL8RQFcGd+C0tw==}
peerDependencies:
vue: ^3.0.0
@ -491,7 +491,7 @@ packages:
find-cache-dir: 3.3.2
upath: 2.0.1
vue: 3.2.40
vuetify: 3.0.0-beta.14_vdkwhj2kz5kpysy3rwb432nm3y
vuetify: 3.0.0-beta.15_vdkwhj2kz5kpysy3rwb432nm3y
/acorn-jsx/5.3.2_acorn@8.8.0:
resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
@ -2150,18 +2150,18 @@ packages:
spdx-expression-parse: 3.0.1
dev: true
/vite-plugin-vuetify/1.0.0-alpha.17_jvcjrjiyr77axku57qj2zhmwla:
/vite-plugin-vuetify/1.0.0-alpha.17_g64smqxqrz57uhsly7clskj5fy:
resolution: {integrity: sha512-lP4vG+Z3LnIEjI8nSE8/MJwDRQK5OnS2i4zHDu36yyD4E7wmPKyIkWJdkfBIsx/O+PU7dGc/3MeLARgr+RErEQ==}
engines: {node: '>=12'}
peerDependencies:
vite: ^2.7.0 || ^3.0.0
vuetify: ^3.0.0-beta.4
dependencies:
'@vuetify/loader-shared': 1.6.0_ufv4csfzemzfiqpf5bhlrg5qhm
'@vuetify/loader-shared': 1.6.0_l2xw63bflzffxrhpro723k3mhy
debug: 4.3.4
upath: 2.0.1
vite: 3.1.7
vuetify: 3.0.0-beta.14_vdkwhj2kz5kpysy3rwb432nm3y
vuetify: 3.0.0-beta.15_vdkwhj2kz5kpysy3rwb432nm3y
transitivePeerDependencies:
- supports-color
- vue
@ -2252,8 +2252,8 @@ packages:
'@vue/server-renderer': 3.2.40_vue@3.2.40
'@vue/shared': 3.2.40
/vuetify/3.0.0-beta.14_vdkwhj2kz5kpysy3rwb432nm3y:
resolution: {integrity: sha512-7UX2rAcMPGdJ0SGAK+wUvlJTHR0KasYILhg7dV9hLyv9SfaTX4tbOQnSQVf4mXzdFB+5jDyaTs+bOYMVeoqXYg==}
/vuetify/3.0.0-beta.15_vdkwhj2kz5kpysy3rwb432nm3y:
resolution: {integrity: sha512-Tw4StO4JJxwzN7RIAJ+nBVTaftlk3TqfqCtMLwJY/SO/ciVru+sHtahOpXIbp8B43d/DIRql3mfnrz1ooTSXtQ==}
engines: {node: ^12.20 || >=14.13}
peerDependencies:
vite-plugin-vuetify: ^1.0.0-alpha.12
@ -2268,7 +2268,7 @@ packages:
webpack-plugin-vuetify:
optional: true
dependencies:
vite-plugin-vuetify: 1.0.0-alpha.17_jvcjrjiyr77axku57qj2zhmwla
vite-plugin-vuetify: 1.0.0-alpha.17_g64smqxqrz57uhsly7clskj5fy
vue: 3.2.40
/webfontloader/1.6.28:

View File

@ -1,10 +1,9 @@
<template>
<v-app>
<v-main>
<navbar-component></navbar-component>
<message-bar></message-bar>
<webdav-settings-menu></webdav-settings-menu>
</v-main>
<navbar-component></navbar-component>
<message-bar></message-bar>
<webdav-settings-menu></webdav-settings-menu>
<v-main> </v-main>
</v-app>
</template>

View File

@ -9,7 +9,7 @@
<v-divider></v-divider>
<v-responsive max-height="350px" class="overflow-y-auto">
<v-list class="py-0">
<template v-for="(item, index) in messages" :key="item.message">
<template v-for="(item, index) in messages" :key="item.id">
<v-divider v-if="index != 0"></v-divider>
<v-list-item :class="{ 'bg-brown-darken-4': !item.viewed }">
<v-list-item-title>
@ -67,15 +67,22 @@
<script setup lang="ts">
import { getMessages } from "@/services/messageService";
import { MessageType, type Message } from "@/types/messages";
import { useMessageStore } from "@/stores/message";
import { MessageType } from "@/types/messages";
import { DateTime } from "luxon";
import { ref } from "vue";
import { storeToRefs } from "pinia";
import { onBeforeUnmount, ref } from "vue";
const messages = ref<Message[]>([]);
const messagesStore = useMessageStore();
const { messages } = storeToRefs(messagesStore);
getMessages().then((values) => {
messages.value = values;
});
const interval = setInterval(refreshMessages, 1000);
function refreshMessages() {
getMessages().then((values) => {
messages.value = values;
});
}
function getMessageColor(messageType: MessageType) {
switch (messageType) {
@ -132,6 +139,10 @@ function getTimeDelta(time: string) {
} as any);
}
}
const show = ref<boolean[]>([]);
refreshMessages();
onBeforeUnmount(() => {
clearInterval(interval);
});
</script>

View File

@ -9,8 +9,10 @@
</div>
</v-app-bar-title>
<v-spacer></v-spacer>
<v-btn icon id="message-btn">
<v-icon>mdi-bell</v-icon>
<v-btn icon id="message-btn" >
<v-badge color="error" :content="countUnreadMessages">
<v-icon :class="{ shake: haveUnreadMessages }">mdi-bell</v-icon>
</v-badge>
</v-btn>
<v-menu width="210px">
<template v-slot:activator="{ props }">
@ -36,9 +38,13 @@
<script setup lang="ts">
import { useDialogStatusStore } from "@/stores/dialogStatus";
import { useMessageStore } from "@/stores/message";
import { storeToRefs } from "pinia";
import logoUrl from "../assets/logo.svg";
const dialogStatusStore = useDialogStatusStore();
const messagesStore = useMessageStore();
const { haveUnreadMessages, countUnreadMessages } = storeToRefs(messagesStore);
</script>
<style scoped>
.shake {

View File

@ -11,6 +11,8 @@
hide-details="auto"
v-model="data.url"
:error-messages="errors.url"
:loading="loading"
color="orange"
></v-text-field>
</v-col>
</v-row>
@ -24,6 +26,8 @@
hide-details="auto"
v-model="data.webdavEndpoint.type"
:error-messages="errors.type"
:loading="loading"
color="orange"
>
</v-select>
</v-col>
@ -39,19 +43,22 @@
hide-details="auto"
v-model="data.webdavEndpoint.customEndpoint"
:error-messages="errors.customEndpoint"
:loading="loading"
color="orange"
></v-text-field>
</v-col>
</v-row>
<v-row>
<v-col class="d-flex align-content-end">
<v-switch
color="warning"
label="Allow Self Signed Certificate"
v-model="data.allowSelfSignedCerts"
hide-details="auto"
density="compact"
inset
:error-messages="errors.allowSelfSignedCerts"
:loading="loading"
color="orange"
></v-switch>
</v-col>
</v-row>
@ -83,6 +90,8 @@
hide-details="auto"
v-model="data.username"
:error-messages="errors.username"
:loading="loading"
color="orange"
>
</v-text-field>
</v-col>
@ -97,6 +106,8 @@
hide-details="auto"
v-model="data.password"
:error-messages="errors.password"
:loading="loading"
color="orange"
></v-text-field>
</v-col>
</v-row>
@ -114,6 +125,8 @@
hide-details="auto"
v-model="data.backupDir"
:error-messages="errors.backupDir"
:loading="loading"
color="orange"
></v-text-field>
</v-col>
</v-row>
@ -131,6 +144,8 @@ import {
import { ref } from "vue";
import { HTTPError } from "ky";
const loading = ref(true);
const items = [
{
title: "Nextcloud",
@ -167,13 +182,16 @@ const emit = defineEmits<{
(e: "success"): void;
(e: "fail"): void;
(e: "loaded"): void;
(e: "loading"): void;
}>();
function save() {
loading.value = true;
clearErrors();
saveWebdavConfig(data.value)
.then(() => {
emit("success");
loading.value = false;
})
.catch(async (reason) => {
if (reason instanceof HTTPError) {
@ -186,6 +204,7 @@ function save() {
}
}
emit("fail");
loading.value = false;
});
}
@ -196,10 +215,11 @@ function clearErrors() {
}
function loadData() {
console.log("ok");
emit("loading");
getWebdavConfig().then((value) => {
data.value = value;
emit("loaded");
loading.value = false;
});
}

View File

@ -15,6 +15,7 @@
@fail="saving = false"
@success="dialogStatusStore.webdav = false"
@loaded="loading = false"
@loading="loading = true"
></webdav-settings-form>
</v-card-text>
<v-divider></v-divider>

View File

@ -1,8 +0,0 @@
import { ref } from "vue";
import { defineStore } from "pinia";
import type { Message } from "@/types/messages";
export const useMessageStore = defineStore("message", () => {
const messages = ref<Message[]>([]);
return { messages };
});

View File

@ -0,0 +1,23 @@
import { computed, ref } from "vue";
import { defineStore } from "pinia";
import type { Message } from "@/types/messages";
export const useMessageStore = defineStore("message", () => {
const messages = ref<Message[]>([]);
const countUnreadMessages = computed(() => {
return messages.value.filter((value) => !value.viewed).length;
});
const haveUnreadMessages = computed(() => {
let unread = false;
for (const mess of messages.value) {
if (!mess.viewed) {
unread = true;
break;
}
}
return unread;
});
return { messages, countUnreadMessages, haveUnreadMessages };
});

View File

@ -8,6 +8,7 @@ export enum MessageType {
}
export interface Message {
id: string;
time: string;
type: MessageType;
message: string;