fix: public modules (#800)

* fix: public modules

* debug

* Revert "debug"

This reverts commit d31a935.

* fix: public modules

* fix: typo

* fix: text color

app/Http/Controllers/Api/ApiController.php

@@ -311,7 +311,7 @@ public function scoreSystemState(): JsonResponse
      * Return the current state of the countdown.
      * The state is structured like this:
      *   {
-     *     "state": string; // setup, running, stopped
+     *     "state": string; // setup, idle, running, stopped
      *     "direction": string; // up, down
      *     "time": {
      *       "seconds": number;

app/Http/Controllers/DashboardAdminCountdownController.php

@@ -21,6 +21,15 @@ public function index(): Response
         if (! $state) {
             $state = new State;
             $state->key = 'countdown';
+            $state->value = json_encode([
+                'state' => 'setup',
+                'time' => [
+                    'seconds' => 0,
+                    'minutes' => 0,
+                    'hours' => 0,
+                ],
+                'direction' => 'up',
+            ]);
         }
 
         return Inertia::render('Dashboard/Admin/Countdown/Index', [

docker-compose.sail.yaml

@@ -39,7 +39,7 @@ services:
             POSTGRES_PASSWORD: '${DB_PASSWORD:-secret}'
         volumes:
             - 'sail-pgsql:/var/lib/postgresql/data'
-            - './vendor/laravel/sail/database/pgsql/create-testing-database.sql:/docker-entrypoint-initdb.d/10-create-testing-database.sql'
+            #- './vendor/laravel/sail/database/pgsql/create-testing-database.sql:/docker-entrypoint-initdb.d/10-create-testing-database.sql'
         networks:
             - sail
         healthcheck:

resources/js/layouts/DisplayLayout.vue

@@ -1,9 +1,21 @@
 <template>
   <div
-    class="flex h-screen flex-col overflow-hidden bg-slate-950 bg-[url('/images/layout/display/background.jpg')] bg-cover"
+    :class="[
+      'flex h-screen flex-col overflow-hidden bg-cover',
+      backgroundClass,
+    ]"
   >
     <div class="flex-grow">
       <slot />
     </div>
   </div>
 </template>
+
+<script setup lang="ts">
+const useKeyableBackground =
+  new URLSearchParams(window.location.search).get("backgroundKeyable") ===
+  "true";
+const backgroundClass = useKeyableBackground
+  ? "bg-green-500"
+  : 'bg-slate-950 bg-[url("/images/layout/display/background.jpg")]';
+</script>

resources/js/pages/Dashboard/Admin/Countdown/Display.vue

@@ -88,7 +88,11 @@ const fetchCountdownState = async () => {
 
   isFetchingCountdown.value = true;
 
-  const response = await fetch("/api/countdown/state", {
+  const apiPath = window.location.pathname.startsWith("/public")
+    ? "/public/api/countdown/state"
+    : "/api/countdown/state";
+
+  const response = await fetch(apiPath, {
     method: "GET",
     credentials: "include",
     headers: {

resources/js/pages/Dashboard/Admin/Countdown/Index.vue

@@ -7,7 +7,9 @@
         <UiH2>Aktionen</UiH2>
 
         <FormRow>
-          <div>Aktueller Zustand: {{ state.state }}</div>
+          <div class="text-gray-900 dark:text-gray-100">
+            Aktueller Zustand: {{ state.state }}
+          </div>
         </FormRow>
 
         <FormRow>
@@ -48,7 +50,7 @@
               <UiH2>Einstellungen</UiH2>
             </FormRow>
             <FormRow>
-              <div>
+              <div class="text-gray-900 dark:text-gray-100">
                 Wenn der Countdown in Richtung "Aufwärts" zählt, wird die
                 festgelegte Zeit als Maximum gewertet. Wenn der Countdown in
                 Richtung "Abwärts" zählt, wird die festgelegte Zeit als
@@ -129,11 +131,6 @@ const { state } = defineProps({
   },
 });
 
-console.log("got state");
-console.log(state);
-console.log(state.time);
-console.log("---");
-
 const form = ref<{
   seconds: number;
   minutes: number;
@@ -162,10 +159,6 @@ const updateTimeAndSubmit = () => {
 };
 
 const submitCountdownHandler = async () => {
-  console.log("send state");
-  console.log(state);
-  console.log(state.time);
-  console.log("---");
   const response = await fetch("/dashboard/admin/countdown", {
     method: "POST",
     credentials: "include",

resources/js/pages/Dashboard/Admin/RandomGenerator/Display.vue

@@ -122,7 +122,11 @@ const fetchRandomGeneratorState = async () => {
 
   isFetchingRandomGenerator.value = true;
 
-  const response = await fetch("/api/random-generator/state", {
+  const apiPath = window.location.pathname.startsWith("/public")
+    ? "/public/api/random-generator/state"
+    : "/api/random-generator/state";
+
+  const response = await fetch(apiPath, {
     method: "GET",
     credentials: "include",
     headers: {

resources/js/pages/Dashboard/Admin/ScoreSystem/Display.vue

@@ -63,7 +63,11 @@ const fetchScoreSystemState = async () => {
 
   isFetchingScoreSystem.value = true;
 
-  const response = await fetch("/api/score-system/state", {
+  const apiPath = window.location.pathname.startsWith("/public")
+    ? "/public/api/score-system/state"
+    : "/api/score-system/state";
+
+  const response = await fetch(apiPath, {
     method: "GET",
     credentials: "include",
     headers: {
@@ -78,7 +82,6 @@ const fetchScoreSystemState = async () => {
       JSON.stringify(scoreSystemState.value.teams) !==
       JSON.stringify(data.teams)
     ) {
-      console.log("Score System State Updated!");
       isRunningSound.value = true;
       setTimeout(() => {
         isRunningSound.value = false;

resources/js/types/auto-imports.d.ts

@@ -3,6 +3,7 @@
 // @ts-nocheck
 // noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
+// biome-ignore lint: disable
 export {}
 declare global {
   const useAppEventType: (typeof import("../composables/useAppEventType"))["default"];

routes/web.php

@@ -108,20 +108,24 @@
     Route::get('{slug?}', [DashboardController::class, 'cmsPage'])->where('slug', '.*');
 });
 
-//public routes without authentication
+// public routes without authentication
 Route::prefix('public')->group(function () {
     Route::middleware(ActivePublicModule::class . ':randomGenerator')->group(function () {
-        Route::get('/random-generator', [DashboardAdminRandomGeneratorController::class, 'display'])->name('dashboard.admin.randomGenerator.display');
+        Route::get('/random-generator', [DashboardAdminRandomGeneratorController::class, 'display'])->name('public.randomGenerator');
+        Route::get('/api/random-generator/state', [ApiController::class, 'randomGeneratorState'])->name('public.api.randomGeneratorState');
     });
 
     Route::middleware(ActivePublicModule::class . ':scoreSystem')->group(function () {
-        Route::get('/score-system', [DashboardAdminScoreSystemController::class, 'display'])->name('dashboard.admin.scoreSystem.display');
+        Route::get('/score-system', [DashboardAdminScoreSystemController::class, 'display'])->name('public.scoreSystem');
+        Route::get('/api/score-system/state', [ApiController::class, 'scoreSystemState'])->name('public.api.scoreSystemState');
     });
 
     Route::middleware(ActivePublicModule::class . ':countdown')->group(function () {
-        Route::get('/countdown', [DashboardAdminCountdownController::class, 'display'])->name('dashboard.admin.countdown.display');
+        Route::get('/countdown', [DashboardAdminCountdownController::class, 'display'])->name('public.countdown');
+        Route::get('/api/countdown/state', [ApiController::class, 'countdownState'])->name('public.api.countdownState');
     });
 });
+
 // api routes with authentication
 Route::prefix('api')->middleware(Authenticate::class)->group(function () {
     Route::middleware(IsLoggedInTutor::class)->group(function () {

vite.config.js

@@ -5,6 +5,14 @@ import Components from "unplugin-vue-components/vite";
 import AutoImport from "unplugin-auto-import/vite";
 
 export default defineConfig({
+  build: {
+    target: "esnext",
+  },
+  optimizeDeps: {
+    esbuildOptions: {
+      target: "esnext",
+    },
+  },
   resolve: {
     alias: {
       "@": "/resources/js",
@@ -43,7 +51,7 @@ export default defineConfig({
   define: {
     __PACKAGE_NAME__: JSON.stringify(process.env.npm_package_name),
     __PACKAGE_REPOSITORY_URL__: JSON.stringify(
-      "https://github.com/fsr5-fhaachen/portals/"
+      "https://github.com/fsr5-fhaachen/portals/",
     ),
   },
 });