Init.
This commit is contained in:
@@ -0,0 +1,23 @@
|
||||
<script setup lang="ts">
|
||||
import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
import App from './app.vue'
|
||||
|
||||
const pinia = createPinia()
|
||||
const app = createApp(App)
|
||||
|
||||
app.use(pinia)
|
||||
app.mount('#app')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-app>
|
||||
<NuxtLayout>
|
||||
<NuxtPage />
|
||||
</NuxtLayout>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,19 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-footer
|
||||
:app="true"
|
||||
:rounded="true"
|
||||
color="red"
|
||||
>
|
||||
<div class="px-4 py-2 bg-black text-center w-100">
|
||||
{{ new Date().getFullYear() }} — <strong>Vuetify</strong>
|
||||
</div>
|
||||
</v-footer>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,23 @@
|
||||
<script setup lang="ts">
|
||||
import Notifications from "~/components/notification/notifications.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-app-bar
|
||||
density="compact"
|
||||
:elevation="1"
|
||||
>
|
||||
<v-app-bar-title>Label Editor</v-app-bar-title>
|
||||
|
||||
<v-divider
|
||||
:vertical="true"
|
||||
/>
|
||||
|
||||
<Notifications/>
|
||||
|
||||
</v-app-bar>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,47 @@
|
||||
<script setup lang="ts">
|
||||
import {useLabelEditorStore} from "~/store/labelEditorStore";
|
||||
|
||||
let store = useLabelEditorStore();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="notificationContainer">
|
||||
<v-slide-y-reverse-transition
|
||||
:group="true"
|
||||
>
|
||||
<div
|
||||
v-for="notificationMessage in store.notificationQueue"
|
||||
:key="notificationMessage.id"
|
||||
>
|
||||
<v-alert
|
||||
v-if="notificationMessage.error"
|
||||
:closable="true"
|
||||
type="error"
|
||||
>
|
||||
{{ notificationMessage.message }}
|
||||
</v-alert>
|
||||
|
||||
<v-alert
|
||||
v-else
|
||||
:closable="true"
|
||||
type="success"
|
||||
>
|
||||
{{ notificationMessage.message }}
|
||||
</v-alert>
|
||||
</div>
|
||||
|
||||
</v-slide-y-reverse-transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.notificationContainer {
|
||||
position: fixed;
|
||||
bottom: 75px;
|
||||
right: 10px;
|
||||
display: grid;
|
||||
grid-gap: 0.5em;
|
||||
width: 300px;
|
||||
z-index: 99;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,140 @@
|
||||
<script setup lang="ts">
|
||||
import type {Ref} from "vue";
|
||||
import {useLabelEditorStore} from "~/store/labelEditorStore";
|
||||
import type {NotificationMessage} from "~/types/notificationMessage";
|
||||
|
||||
let store = useLabelEditorStore();
|
||||
|
||||
let dialog: Ref<boolean> = ref<boolean>(false);
|
||||
|
||||
let pageCount: Ref<number> = ref<number>(1);
|
||||
let page: Ref<number> = ref<number>(1);
|
||||
|
||||
let notifications: Ref<NotificationMessage[]> = ref<NotificationMessage[]>([]);
|
||||
let notificationPages: Ref<NotificationMessage[][]> = ref<NotificationMessage[][]>([]);
|
||||
|
||||
const pageItemCount = 25;
|
||||
|
||||
watch(dialog, async (oldDialog) => {
|
||||
loadNotifications();
|
||||
})
|
||||
|
||||
function loadNotifications() {
|
||||
notifications.value = store.getNotifications();
|
||||
const length = notifications.value.length;
|
||||
pageCount.value = Math.ceil(length / pageItemCount);
|
||||
|
||||
for (let i = 0; i < pageCount.value; i++) {
|
||||
notificationPages.value[i] = notifications.value.slice((i * pageItemCount), ((i + 1) * pageItemCount));
|
||||
}
|
||||
}
|
||||
|
||||
function clear() {
|
||||
store.clearNotifications();
|
||||
loadNotifications();
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-dialog
|
||||
v-model="dialog"
|
||||
:scrollable="true"
|
||||
width="800"
|
||||
max-height="750"
|
||||
>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn
|
||||
:flat="true"
|
||||
v-bind="props"
|
||||
>
|
||||
<v-icon>mdi-bell</v-icon>
|
||||
<v-tooltip
|
||||
activator="parent"
|
||||
location="bottom"
|
||||
>
|
||||
Benachrichtigungen
|
||||
</v-tooltip>
|
||||
</v-btn>
|
||||
</template>
|
||||
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
<v-icon size="small">
|
||||
mdi-bell
|
||||
</v-icon>
|
||||
|
||||
Benachrichtigungen
|
||||
</v-card-title>
|
||||
|
||||
<v-divider/>
|
||||
|
||||
<v-card-text>
|
||||
<div
|
||||
v-for="notification in notificationPages[page - 1]"
|
||||
:key="notification.id"
|
||||
>
|
||||
<v-row no-gutters>
|
||||
<v-col cols="2">
|
||||
<v-sheet>
|
||||
<v-icon v-if="notification.error" color="red">mdi-alert-circle-outline</v-icon>
|
||||
<v-icon v-else color="green">mdi-check</v-icon>
|
||||
|
||||
{{ notification.error ? 'Fehler' : 'Okay' }}
|
||||
</v-sheet>
|
||||
</v-col>
|
||||
<v-col cols="3">
|
||||
<v-sheet>
|
||||
{{ notification.dateTime }}
|
||||
</v-sheet>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<v-sheet>
|
||||
{{ notification.message }}
|
||||
</v-sheet>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</v-card-text>
|
||||
|
||||
<v-divider/>
|
||||
|
||||
<v-pagination
|
||||
v-model="page"
|
||||
:length="pageCount"
|
||||
></v-pagination>
|
||||
|
||||
<v-divider/>
|
||||
|
||||
<v-card-actions>
|
||||
<v-btn
|
||||
variant="text"
|
||||
@click="clear();"
|
||||
>
|
||||
<v-icon>mdi-delete</v-icon>
|
||||
<v-tooltip
|
||||
activator="parent"
|
||||
location="right"
|
||||
>
|
||||
Benachrichtigungen löschen
|
||||
</v-tooltip>
|
||||
</v-btn>
|
||||
|
||||
<v-spacer/>
|
||||
|
||||
<v-divider :vertical="true"/>
|
||||
|
||||
<v-btn
|
||||
variant="text"
|
||||
@click="dialog = false"
|
||||
>
|
||||
Schließen
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,32 @@
|
||||
<script lang="ts">
|
||||
|
||||
import CustomHeader from "~/components/layout/customHeader.vue";
|
||||
import CustomFooter from "~/components/layout/customFooter.vue";
|
||||
|
||||
export default {
|
||||
name: 'DefaultLayout',
|
||||
components: {CustomFooter, CustomHeader},
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-layout>
|
||||
|
||||
<CustomHeader/>
|
||||
|
||||
<v-main>
|
||||
<slot/>
|
||||
</v-main>
|
||||
|
||||
<NotificationBaseComponent/>
|
||||
|
||||
<CustomFooter/>
|
||||
|
||||
</v-layout>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,13 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-card>
|
||||
<v-card-title>Test Index</v-card-title>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,12 @@
|
||||
// import this after install `@mdi/font` package
|
||||
import '@mdi/font/css/materialdesignicons.css'
|
||||
|
||||
import 'vuetify/styles'
|
||||
import { createVuetify } from 'vuetify'
|
||||
|
||||
export default defineNuxtPlugin((app) => {
|
||||
const vuetify = createVuetify({
|
||||
// ... your configuration
|
||||
})
|
||||
app.vueApp.use(vuetify)
|
||||
})
|
||||
@@ -0,0 +1,128 @@
|
||||
import {defineStore} from "pinia";
|
||||
import type {Entity} from "~/types/entity";
|
||||
import {NotificationMessage} from "~/types/notificationMessage";
|
||||
import type {RuntimeConfig} from "nuxt/schema";
|
||||
|
||||
interface State {
|
||||
config: RuntimeConfig,
|
||||
|
||||
// Notification
|
||||
notifications: NotificationMessage[],
|
||||
notificationQueue: NotificationMessage[],
|
||||
|
||||
// Entity
|
||||
entity: Entity | null,
|
||||
}
|
||||
|
||||
export const useLabelEditorStore = defineStore('label_editor_store', {
|
||||
state: (): State => ({
|
||||
config: useRuntimeConfig(),
|
||||
|
||||
// Notification
|
||||
notifications: [],
|
||||
notificationQueue: [],
|
||||
|
||||
// Entity
|
||||
entity: null,
|
||||
}),
|
||||
actions: {
|
||||
// Notification
|
||||
addNotification(error: boolean, message: string) {
|
||||
const notification: NotificationMessage = new NotificationMessage(error, message);
|
||||
|
||||
if (import.meta.client) {
|
||||
const localStoreNotification = localStorage.getItem("label_editor_notifications");
|
||||
|
||||
if (localStoreNotification != null) {
|
||||
this.notifications = JSON.parse(localStoreNotification);
|
||||
}
|
||||
}
|
||||
|
||||
this.notificationQueue.push(notification);
|
||||
this.notifications.push(notification);
|
||||
|
||||
if (import.meta.client) {
|
||||
localStorage.setItem('label_editor_notifications', JSON.stringify(this.notifications));
|
||||
}
|
||||
|
||||
if (notification.error) {
|
||||
setTimeout(() => this.removeNotification(notification.id), 5000);
|
||||
} else {
|
||||
setTimeout(() => this.removeNotification(notification.id), 2000);
|
||||
}
|
||||
},
|
||||
|
||||
removeNotification(id: string) {
|
||||
const index = this.notificationQueue.findIndex(notification => notification.id == id);
|
||||
|
||||
if (index > -1) {
|
||||
this.notificationQueue.splice(index, 1);
|
||||
}
|
||||
},
|
||||
|
||||
getNotifications(): NotificationMessage[] {
|
||||
let oldNotifications: NotificationMessage[] = [];
|
||||
|
||||
if (import.meta.client) {
|
||||
const localStoreNotification = localStorage.getItem("label_editor_notifications");
|
||||
|
||||
if (localStoreNotification != null) {
|
||||
oldNotifications = JSON.parse(localStoreNotification);
|
||||
|
||||
oldNotifications.reverse();
|
||||
return oldNotifications;
|
||||
}
|
||||
}
|
||||
|
||||
return [];
|
||||
},
|
||||
|
||||
clearNotifications() {
|
||||
this.notifications = [];
|
||||
|
||||
if (import.meta.client) {
|
||||
localStorage.setItem('label_editor_notifications', JSON.stringify(this.notifications));
|
||||
}
|
||||
|
||||
this.addNotification(false, "Benachrichtigungen gelöscht")
|
||||
},
|
||||
|
||||
|
||||
// Entity
|
||||
async loadEntity(entityID: number) {
|
||||
try {
|
||||
const entity: Entity = await $fetch<Entity>(this.config.public.url + '/entity/' + entityID, {
|
||||
method: 'GET',
|
||||
});
|
||||
|
||||
this.entity = entity;
|
||||
this.addNotification(false, 'Artikel geladen: ' + this.entity.name);
|
||||
} catch {
|
||||
this.entity = null;
|
||||
this.addNotification(true, 'Fehler beim laden des Artikel. ID:' + entityID);
|
||||
}
|
||||
},
|
||||
|
||||
async updateEntity(entity: Entity) {
|
||||
if (this.entity != null) {
|
||||
try {
|
||||
const entity: Entity = await $fetch<Entity>(this.config.public.url + '/entity/update', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(this.entity),
|
||||
});
|
||||
|
||||
this.entity = entity;
|
||||
this.addNotification(false, 'Artikel "' + this.entity.name + '" aktualisiert');
|
||||
} catch {
|
||||
this.addNotification(true, 'Fehler beim aktualisieren des Artikel: ' + this.entity.name);
|
||||
}
|
||||
} else {
|
||||
this.addNotification(true, 'Es ist kein Artikel ausgewählt');
|
||||
}
|
||||
},
|
||||
|
||||
clearEntity() {
|
||||
this.entity = null;
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,26 @@
|
||||
import type {Variant} from "~/types/variant";
|
||||
|
||||
export class Entity {
|
||||
readonly id: number;
|
||||
name: string;
|
||||
bio: boolean;
|
||||
origin: string;
|
||||
description: string;
|
||||
ingredients: string;
|
||||
variants: Array<Variant>;
|
||||
|
||||
constructor(id: number, name: string, bio: boolean, origin: string, description: string, ingredients: string, variants: Array<Variant> | null) {
|
||||
this.id = id;
|
||||
this.name = name;
|
||||
this.bio = bio;
|
||||
this.origin = origin;
|
||||
this.description = description;
|
||||
this.ingredients = ingredients;
|
||||
|
||||
if (variants == null) {
|
||||
this.variants = [];
|
||||
} else {
|
||||
this.variants = variants;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
export class NotificationMessage {
|
||||
id: string;
|
||||
dateTime: string;
|
||||
error: boolean;
|
||||
message: string;
|
||||
|
||||
constructor(error: boolean, message: string) {
|
||||
let dateTime = new Date();
|
||||
|
||||
this.id = crypto.randomUUID();
|
||||
this.dateTime = dateTime.getUTCHours().toString().padStart(2, '0') + ':' + dateTime.getUTCMinutes().toString().padStart(2, '0') + " - " + dateTime.getUTCDate().toString().padStart(2, '0')+ '.' + dateTime.getUTCMonth().toString().padStart(2, '0') + '.' + dateTime.getFullYear();
|
||||
this.error = error;
|
||||
this.message = message;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
export class Variant {
|
||||
readonly id: number;
|
||||
weight: string;
|
||||
ean: string;
|
||||
name: string | null;
|
||||
description: string | null;
|
||||
ingredients: string | null;
|
||||
|
||||
constructor(id: number, weight: string, ean: string, name: string|null, description:string|null, ingredients: string|null) {
|
||||
this.id = id;
|
||||
this.weight = weight;
|
||||
this.ean = ean;
|
||||
this.name = name;
|
||||
this.description = description;
|
||||
this.ingredients = ingredients;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user