Merge pull request #4 from fedyna-k/PMPR-2

Adding cards for modules and creating mobility module
2025-01-15 15:45:51 +01:00
parent 55cf175181 8cee593d33
commit b715ec86b6
8 changed files with 84 additions and 4 deletions
@@ -2,6 +2,7 @@
 // This file SHOULD be checked into source version control.
 // This file is automatically updated during development when running `dev.ts`.

+import * as $_apps_mobility_index from "./routes/(apps)/mobility/index.tsx";
 import * as $_apps_notes_index from "./routes/(apps)/notes/index.tsx";
 import * as $_404 from "./routes/_404.tsx";
 import * as $_app from "./routes/_app.tsx";
@@ -17,6 +18,7 @@ import type { Manifest } from "$fresh/server.ts";

 const manifest = {
  routes: {
+    "./routes/(apps)/mobility/index.tsx": $_apps_mobility_index,
    "./routes/(apps)/notes/index.tsx": $_apps_notes_index,
    "./routes/_404.tsx": $_404,
    "./routes/_app.tsx": $_app,
@@ -0,0 +1,16 @@
+import { AppProperties } from "../(_islands)/AppNavigator.tsx";
+
+type ModuleCardProps = {
+  module: AppProperties;
+};
+
+export default function ModuleCard({ module }: ModuleCardProps) {
+  return (
+    <div className="module-card">
+      <a href={`/${module.name}`}>
+        <span className="material-symbols-outlined">{module.icon}</span>
+        <p>{module.name}</p>
+      </a>
+    </div>
+  );
+}
@@ -1,6 +1,7 @@
 export interface AppProperties {
  name: string;
  icon: string;
+  hint: string;
 }

 type AppNavigatorProps = {
@@ -0,0 +1,9 @@
+import { AppProperties } from "../../../(_islands)/AppNavigator.tsx";
+
+const properties: AppProperties = {
+  name: "PolyMobility",
+  icon: "flight_takeoff",
+  hint: "Gestionnaire de mobilité"
+};
+
+export default properties;
@@ -0,0 +1,12 @@
+type ModulesProps = Record<string | number | symbol, never>;
+
+export default function Modules(_props: ModulesProps) {
+  return (
+    <>
+      <h2>All PolyMPR modules</h2>
+      <nav>
+        
+      </nav>
+    </>
+  );
+}
@@ -2,7 +2,8 @@ import { AppProperties } from "../../../(_islands)/AppNavigator.tsx";

 const properties: AppProperties = {
  name: "PolyNotes",
-  icon: "school"
+  icon: "school",
+  hint: "Gestionnaire de note"
 };

 export default properties;
@@ -18,7 +18,7 @@ export default async function App(
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>PolyMPR</title>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap" />
-        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=school" />
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
        <link rel="stylesheet" href="/styles/main.css" />
      </head>
      <body f-client-nav>
@@ -1,10 +1,49 @@
-import { FreshContext } from "$fresh/server.ts";
+import { FreshContext, Handlers } from "$fresh/server.ts";
+import ModuleCard from "./(_components)/ModuleCard.tsx";
+import { AppProperties } from "./(_islands)/AppNavigator.tsx";
+
+export const handler: Handlers = {
+  async GET(_request, context) {
+    const apps: Record<string, AppProperties> = {};
+
+    for await (const appDir of Deno.readDir("routes/(apps)")) {
+      try {
+        const properties: AppProperties = (await import(
+          `./(apps)/${appDir.name}/(_props)/props.ts`
+        )).default;
+        apps[appDir.name] = properties;
+      } catch (error) {
+        console.error(`Couldn't import app "${appDir.name}": ${error}`);
+      }
+    }
+
+    return context.render(apps);
+  },
+};

 // deno-lint-ignore require-await
-export default async function Home(_request: Request, _context: FreshContext) {
+export default async function Home(_request: Request, context: FreshContext) {
+  const apps: Record<string, AppProperties> = context.data;
+  console.log("Context data:", context.data);
+
+  if (!apps) {
+    return (
+      <>
+        <h2>Welcome to PolyMPR!</h2>
+        <p>No modules available.</p>
+      </>
+    );
+  }
+
  return (
    <>
      <h2>Welcome to PolyMPR!</h2>
+      <h3>Module list</h3>
+      <div className="module-list">
+        {Object.entries(apps).map(([key, module]) => (
+          <ModuleCard key={key} module={module} />
+        ))}
+      </div>
    </>
  );
 }