Exhibit tiles

.gitignore

@@ -25,3 +25,4 @@ yarn-error.log
 *.bash_history
 ToDos.md
 /log
+gcm-linux_amd64.2.5.1.deb

resources/js/Components/ApplicationLogo.vue

@@ -35,7 +35,7 @@ const imageAltTwo = 'Beschreibung des zweiten Bildes'; // Alternativer Text für
 	align-items: center;
 	border: 0px solid #ccc; /* Optional: Rahmen um Container */
 	padding: 0px; /* Optional: Abstand innerhalb des Containers */
-	max-width: 290%; /* Container passt sich der Breite des Viewports an */
+	max-width: 20%; /* Container passt sich der Breite des Viewports an */
 	position: relative;
 }
 /* Bild-Stile */
@@ -48,23 +48,23 @@ const imageAltTwo = 'Beschreibung des zweiten Bildes'; // Alternativer Text für
 	background-color: #f9f9f9; /* Beispiel: individueller Hintergrund */
 	position: relative;
 	height: 110%;
-	left: -220%;
+	left: 20%;
 }
 .image-one {
 	width: 5rem;
-	max-width: 260rem; /* Individuelle Breite für Bild 1 */
+	max-width: 20rem; /* Individuelle Breite für Bild 1 */
 	height: auto;
 }
 /* Spezifische Anpassungen für Bild 2 */
 .image-container-two {
 	background-color: #e0e0e0; /* Beispiel: individueller Hintergrund */
 	position: relative;
 	height: 132%;
-	left: -131.4%;
+	right: -310%;
 }
 .image-two {
 	width: 16rem;
-	max-width: 260rem; /* Individuelle Breite für Bild 2 */
+	max-width: 12rem; /* Individuelle Breite für Bild 2 */
 	height: auto;
 }
 </style>

resources/js/Components/Control/ExportButton.vue

@@ -0,0 +1,51 @@
+
+<template>
+    <div class="card flex justify-center">
+        <Toast />
+        <ExportButton label="Exportiere QR-Code ..." @click="save" :model="items" />
+    </div>
+</template>
+
+<script setup>
+import { useToast } from "primevue/usetoast";
+import ExportButton from 'primevue/splitbutton';
+const toast = useToast();
+
+
+const items = [
+    {
+        label: 'Exportiere QR-Code1',
+        command: () => {
+            toast.add({ severity: 'success', summary: 'Exportiere QR-Code1', detail: 'Qr-Code1 Export erfolgreich', life: 3000 });
+            // url:;
+        }
+    },
+    {
+        label: 'Exportier QR-Code2',
+        command: () => {
+            toast.add({ severity: 'success', summary: 'Exportier QR-Code2', detail: 'Qr-Code2 Export erfolgreich', life: 3000 });
+            // url:;
+        }
+    },
+    {
+    separator: true
+    },
+    {
+        label: 'Exportiere Barcode',
+        command: () => {
+            toast.add({ severity: 'success', summary: 'Exportiere Barcode', detail: 'export Barcode', life:3000 });
+            // url:;
+        }
+
+    },
+
+];
+
+const save = () => {
+    toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+};
+
+
+</script>
+
+

resources/js/Components/Control/PrimaryButton.vue

@@ -1,7 +1,10 @@
 <template>
     <button
-        class="inline-flex items-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-xs font-semibold uppercase tracking-widest text-white transition duration-150 ease-in-out hover:bg-gray-700 focus:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 active:bg-gray-900 dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-white dark:focus:bg-white dark:focus:ring-offset-gray-800 dark:active:bg-gray-300"
-    >
+        class="inline-flex items-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-xs font-semibold uppercase tracking-widest text-white transition duration-150 ease-in-out hover:bg-gray-700 focus:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 active:bg-gray-900 dark:bg-gray-200 dark:text-gray-800
+        dark:hover:bg-white dark:focus:bg-white
+        dark:focus:ring-offset-gray-800
+        dark:active:bg-gray-300"
+        >
         <slot />
     </button>
-</template>
+</template>

resources/js/Components/Exhibit/ExhibitTile.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { route } from 'ziggy-js';
 import { IExhibitOverviewExhibitTileInitPageProps } from '@/types/page_props/exhibit_overview';
+import Block from 'quill/blots/block';
 
 // (interne) Attribute der Komponente
 const props = defineProps<{
@@ -14,17 +15,17 @@ if (exhibit.title_image) {
 
 <template>
 	<a :href="route('exhibit.details', exhibit.id)">
-		<div class="exhibit-tile flex justify-between">
-			<div class="w-48 h-28 flex">
-				<img v-if="exhibit.title_image" 
+		<div class="exhibit-tile flex justify-between" style="align-items: center;">
+			<div class="w-52 h-32 flex">
+				<img v-if="exhibit.title_image"
 					:src="route('ajax.image.get_thumbnail', { image_id: exhibit.title_image.id })"
 				>
 			</div>
 			<div class="flex flex-col pl-4">
-				<p style="font-size: x-large;">{{exhibit.name, exhibit.inventory_number}}</p>
-				<p>{{ "Baujahr: " + exhibit.year_of_manufacture }}</p>
-				<p>{{ "Hersteller: " + exhibit.manufacturer }}</p>
-				<p>{{ "Standort: " + exhibit.location_name, exhibit.place_name }}</p>
+				<p class="truncate w-72" style="font-size: larger;">{{exhibit.name + " (" + exhibit.inventory_number + ")" }}</p>
+				<p class="truncate w-72"> {{ "Baujahr: " + exhibit.year_of_manufacture }}</p>
+				<p class="truncate w-72"> {{ "Hersteller: " + exhibit.manufacturer }}</p>
+				<p class="truncate w-72"> {{ "Standort: " + exhibit.location_name + " - " + exhibit.place_name}}</p>
 			</div>
 		</div>
 	</a>

resources/js/Components/Exhibit/Image.vue

@@ -72,7 +72,7 @@ const props = defineProps<{
 	width: 32rem;
 	height: 18rem;
 	border: 0.2rem dashed;
-	border-color: black;
+	border-color: rgb(0, 0, 0);
 	display: flex;
 	justify-content: center;
 	align-items: center;

resources/js/Layouts/AuthenticatedLayout.vue

@@ -20,7 +20,7 @@ const props = withDefaults(defineProps<{
 				<!-- Page Heading -->
 				<header class="bg-white h-fit min-h-16 shadow dark:bg-gray-800" v-if="$slots.header">
 					<div class="pl-4 items-center flex">
-						<slot name="header" />
+						<slot name="header"/>					
 					</div>
 				</header>
 			</div>

resources/js/Layouts/GuestLayout.vue

@@ -17,10 +17,14 @@ import MEIK_HeadLine from '@/Components/MEIK_HeadLine.vue';
 			class="mt-6 w-full overflow-hidden bg-white px-6 py-4 shadow-md sm:max-w-md sm:rounded-lg dark:bg-gray-400"
 		>
 			<slot />
-		</div>
 
-		<div>
-			<ApplicationLogo class="h-20 w-20 fill-current text-blue-500" />
+			<div
+			class="mt-2 w-full overflow-hidden bg-white px-6 py-4 shadow sm:max-w-md sm:rounded-lg dark:bg-gray-400"	
+			>
+				<ApplicationLogo class="h-20 w-20 fill-current text-blue-500" />
+			</div>
 		</div>
+
+
 	</div>
 </template>

resources/js/Pages/Auth/Login.vue

@@ -78,21 +78,22 @@ const submit = () => {
             </div>
 
             <div class="mt-4 flex items-center justify-end">
-                <Link
+                    <Link
                     v-if="canResetPassword"
                     :href="route('password.request')"
                     class="rounded-md text-sm text-gray-600 underline hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:text-gray-400 dark:hover:text-gray-100 dark:focus:ring-offset-gray-800"
-                >
+                    >
                     Forgot your password?
                 </Link>
 
-                <PrimaryButton
+                    <PrimaryButton
                     class="ms-4"
                     :class="{ 'opacity-25': form.processing }"
                     :disabled="form.processing"
-                >
+                    >
                     Log in
                 </PrimaryButton>
+
 
             </div>
         </form>

resources/js/Pages/Exhibit/Exhibit.vue

@@ -11,6 +11,8 @@ import Breadcrumb from 'primevue/breadcrumb';
 import { IExhibitInitPageProps } from '@/types/page_props/exhibit';
 import InputField from '@/Components/Form/InputField.vue';
 import Form from '@/Components/Form/Form.vue';
+import ExportButton from '@/Components/Control/ExportButton.vue';
+
 // versch. Interface für typsicheres Programmieren
 
 // Argumente an die Seite (siehe Controller)
@@ -131,6 +133,7 @@ async function save_metadata(event: MouseEvent) {
 		button_save_metadata_is_loading.value = false;
 	}
 }
+
 </script>
 
 <template>
@@ -155,18 +158,28 @@ async function save_metadata(event: MouseEvent) {
 				<Button v-else :loading="button_save_metadata_is_loading" type='button' @click="save_metadata"
 					label='Metadaten speichern' />
 			</Form>
-			<div class="images-form">
-				<a v-if="form.title_image"
-					:href="route('exhibit.images.details', { exhibit_id: exhibit_id })"
-				>
-					<img v-if="form.title_image_id" class="title-image"
-						:src="route('ajax.image.get_file', { image_id: form.title_image_id })">
+
+
+			<div class="images-form flex flex-col items-start p-4">
+
+				<!-- Button oben rechts -->
+				<ExportButton class="bg-blue-500 text-white rounded" />
+				<a :href="route('exhibit.images.details', { exhibit_id: exhibit_id })">
+					<img
+						v-if="form.title_image"
+						class="title-image"
+						:src="route('ajax.image.get_image', { image_id: form.title_image.id })"
+					>
 				</a>
+
+
 			</div>
 		</div>
 		<FreeTextFields v-if="exhibit_id !== undefined" :init_props="form.val.free_texts" :exhibit_id="exhibit_id" />
 	</AuthenticatedLayout>
 </template>
+
+
 <style lang="css" scoped>
 .upper-forms {
 	display: flex;

resources/js/app.ts

@@ -49,8 +49,8 @@ createInertiaApp({
 		app.use(DialogService);
 
 		app.mount(el);
-	},
-	progress: {
-		color: '#4B5563',
-	},
-});
+		},
+		progress: {
+			color: '#4B5563',
+		},
+	});