feat: Added Footer

app/Http/Controllers/BookRecommendationController.php

@@ -4,6 +4,7 @@ namespace App\Http\Controllers;
 
 use App\Models\BookRecommendation;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Artisan;
 use Illuminate\Support\Facades\Storage;
 
 class BookRecommendationController extends Controller
@@ -136,4 +137,10 @@ class BookRecommendationController extends Controller
         $bookRecommendation->delete();
         return response()->json(null, 204);
     }
+
+    public function fetchCover(Request $request)
+    {
+        Artisan::call('book:open-library-fetch-cover-art');
+        return response()->json(Artisan::output());
+    }
 }

nuxt.config.ts

@@ -1,4 +1,6 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
+import pkg from './package.json'
+
 export default defineNuxtConfig({
   srcDir: 'nuxt/',
 
@@ -76,6 +78,8 @@ export default defineNuxtConfig({
       apiBase: process.env.API_URL,
       apiPrefix: '/api/v1',
       storageBase: `${process.env.API_URL}/storage/`,
+      packageVersion: pkg.version,
+      gitHash: process.env.GIT_HASH,
       providers: {
         google: {
           name: 'Google',

nuxt/app.vue

@@ -2,9 +2,12 @@
 </script>
 
 <template>
+  <UMain>
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>
+  </UMain>
+  <Footer />
 
   <UNotifications />
 </template>

nuxt/components/Footer.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const config = useRuntimeConfig()
+</script>
+
+<template>
+  <div>
+    <UDivider />
+    <UFooter c>
+      <template #left>
+        <div class="text-xs">
+          Copyright © {{ new Date().getFullYear() }}
+        </div>
+      </template>
+      <template #center>
+        Made with ❤️ by <a class="text-primary hover:text-primary-600 ml-1" href="https://flycro.me" target="_blank">Flycro</a>
+      </template>
+      <template #right>
+        <div class="font-mono text-xs">
+          {{ config.public.packageVersion }} - {{ config.public.gitHash }}
+        </div>
+      </template>
+    </UFooter>
+  </div>
+</template>

nuxt/components/Navigation.client.vue

@@ -38,6 +38,11 @@ if (authStore.user?.roles.includes('admin')) {
         to: '/admin/votes',
         icon: 'i-heroicons-star',
       },
+      {
+        label: 'Jobs',
+        to: '/admin/jobs',
+        icon: 'i-heroicons-briefcase',
+      },
     ],
   })
 }

nuxt/components/color-picker/ColorPicker.vue

@@ -35,7 +35,7 @@ const gray = computed({
   <UPopover mode="hover" :popper="{ strategy: 'absolute' }" :ui="{ width: 'w-[156px]' }">
     <template #default="{ open }">
       <UButton color="gray" variant="ghost" square :class="[open && 'bg-gray-50 dark:bg-gray-800']" aria-label="Color picker">
-        <UIcon name="i-heroicons-swatch-20-solid" class="text-primary-500 dark:text-primary-400 size-5" />
+        <UIcon name="i-heroicons-paint-brush-20-solid" class="text-primary-500 dark:text-primary-400 size-5" />
       </UButton>
     </template>
 

nuxt/components/modal/CastVote.vue

@@ -32,7 +32,7 @@ const { refresh: onVote, status } = useFetch<any>(`vote`, {
   async onResponse({ response }) {
     if (response.ok) {
       useToast().add({
-        icon: 'i-heroicons-check-circle-20-solid',
+        icon: 'i-heroicons-check-circle',
         title: 'Abstimmung erfolgreich.',
         color: 'emerald',
       })
@@ -45,12 +45,12 @@ const { refresh: onVote, status } = useFetch<any>(`vote`, {
 </script>
 
 <template>
-  <UButton v-if="props.row.status === 'PENDING'" class="transition-150 transform-gpu hover:scale-110" icon="i-heroicons-star" size="sm" color="green" variant="solid" square :disabled="authStore.user.total_votes === 0" @click="isOpen = true" />
+  <UButton v-if="props.row.status === 'PENDING'" class="transition-150 transform-gpu hover:scale-110" icon="i-heroicons-check-circle" size="sm" color="green" variant="solid" square :disabled="authStore.user.total_votes === 0" @click="isOpen = true" />
   <UDashboardModal
     v-model="isOpen"
     title="Für Buch abstimmen"
     :description="`Bist du dir sicher das du für die Buchempfehlung &quot;${row.book_name}&quot; abstimmen möchtest?`"
-    icon="i-heroicons-star"
+    icon="i-heroicons-check-circle"
     :ui="{
       icon: { base: 'text-primary-500 dark:text-primary-400' } as any,
       footer: { base: 'ml-16' } as any,

nuxt/pages/admin/jobs.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+definePageMeta({ middleware: ['role-admin'] })
+
+const serverLogs = ref<string>('')
+
+async function runJobs(job: string) {
+  switch (job) {
+    case 'fetch_cover':
+      serverLogs.value = await $fetch('jobs/fetch-cover', { method: 'POST' })
+      break
+  }
+}
+</script>
+
+<template>
+  <div class="flex gap-4">
+    <UCard class="w-1/2">
+      <template #header>
+        <h1 class="font-sans text-3xl font-bold">
+          Server Jobs
+        </h1>
+        <UButton class="mt-4" @click="runJobs('fetch_cover')">
+          Cover Bilder anfragen
+        </UButton>
+      </template>
+    </UCard>
+    <UCard class="w-1/2">
+      <template #header>
+        <h1 class="font-sans text-3xl font-bold">
+          Server Logs
+        </h1>
+        <UTextarea v-model="serverLogs" autoresize disabled class="mt-4" />
+      </template>
+    </UCard>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package.json

@@ -1,12 +1,13 @@
 {
   "name": "laravel-nuxt",
+  "version": "0.0.4",
   "private": true,
   "type": "module",
   "scripts": {
     "serve": "cross-env PORT=3000 HOST=127.0.0.1 node .output/server/index.mjs",
-    "build": "nuxi cleanup && nuxi build",
+    "build": "GIT_HASH=`git rev-parse --short HEAD` nuxi cleanup && nuxi build",
     "cleanup": "nuxi cleanup",
-    "dev": "nuxt dev --port=3000 --host=127.0.0.1",
+    "dev": "GIT_HASH=`git rev-parse --short HEAD` nuxt dev --port=3000 --host=127.0.0.1",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",

routes/api.php

@@ -42,6 +42,8 @@ Route::prefix('api/v1')->group(function () {
         Route::post('account/update', [AccountController::class, 'update'])->name('account.update');
         Route::post('account/password', [AccountController::class, 'password'])->name('account.password');
 
+        Route::post('jobs/fetch-cover', [BookRecommendationController::class, 'fetchCover'])->name('jobs.fetch-cover');
+
         Route::middleware(['throttle:uploads'])->group(function () {
             Route::post('upload', [UploadController::class, 'image'])->name('upload.image');
         });