add example

Signed-off-by: Teo Koon Peng <[email protected]>
open-rmf · Aug 23, 2024 · 1a7bf2d · 1a7bf2d
1 parent f6d6f7c
commit 1a7bf2d
Show file tree

Hide file tree

Showing 9 changed files with 169 additions and 2 deletions.
diff --git a/packages/dashboard/examples/demo/app.css b/packages/dashboard/examples/demo/app.css
@@ -0,0 +1,8 @@
+html,
+body,
+#root {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
diff --git a/packages/dashboard/examples/demo/index.html b/packages/dashboard/examples/demo/index.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%BASE_URL%favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="Web application that provides overall visualization and control over the RMF system"
+    />
+    <link rel="shortcut icon" type="image/x-icon" href="%BASE_URL%favicon.ico" />
+    <title>RMF Dashboard</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/index.tsx"></script>
+  </body>
+</html>
diff --git a/packages/dashboard/examples/demo/index.tsx b/packages/dashboard/examples/demo/index.tsx
@@ -0,0 +1,115 @@
+import '@fontsource/roboto/300.css';
+import '@fontsource/roboto/400.css';
+import '@fontsource/roboto/500.css';
+import '@fontsource/roboto/700.css';
+import './app.css';
+
+import ReactDOM from 'react-dom/client';
+import {
+  InitialWindow,
+  LocallyPersistentWorkspace,
+  RmfDashboard,
+  Workspace,
+} from 'rmf-dashboard/components';
+import { MicroAppManifest } from 'rmf-dashboard/components/micro-app';
+import doorsApp from 'rmf-dashboard/micro-apps/doors-app';
+import liftsApp from 'rmf-dashboard/micro-apps/lifts-app';
+import createMapApp from 'rmf-dashboard/micro-apps/map-app';
+import robotMutexGroupsApp from 'rmf-dashboard/micro-apps/robot-mutex-groups-app';
+import robotsApp from 'rmf-dashboard/micro-apps/robots-app';
+import tasksApp from 'rmf-dashboard/micro-apps/tasks-app';
+import StubAuthenticator from 'rmf-dashboard/services/stub-authenticator';
+
+const mapApp = createMapApp({
+  attributionPrefix: 'Open-RMF',
+  defaultMapLevel: 'L1',
+  defaultRobotZoom: 20,
+  defaultZoom: 6,
+});
+
+const appRegistry: MicroAppManifest[] = [
+  mapApp,
+  doorsApp,
+  liftsApp,
+  robotsApp,
+  robotMutexGroupsApp,
+  tasksApp,
+];
+
+const homeWorkspace: InitialWindow[] = [
+  {
+    layout: { x: 0, y: 0, w: 12, h: 6 },
+    microApp: mapApp,
+  },
+];
+
+const robotsWorkspace: InitialWindow[] = [
+  {
+    layout: { x: 0, y: 0, w: 7, h: 4 },
+    microApp: robotsApp,
+  },
+  { layout: { x: 8, y: 0, w: 5, h: 8 }, microApp: mapApp },
+  { layout: { x: 0, y: 0, w: 7, h: 4 }, microApp: doorsApp },
+  { layout: { x: 0, y: 0, w: 7, h: 4 }, microApp: liftsApp },
+  { layout: { x: 8, y: 0, w: 5, h: 4 }, microApp: robotMutexGroupsApp },
+];
+
+const tasksWorkspace: InitialWindow[] = [
+  { layout: { x: 0, y: 0, w: 7, h: 8 }, microApp: tasksApp },
+  { layout: { x: 8, y: 0, w: 5, h: 8 }, microApp: mapApp },
+];
+
+export default function App() {
+  return (
+    <RmfDashboard
+      apiServerUrl="http://localhost:8000"
+      trajectoryServerUrl="http://localhost:8006"
+      authenticator={new StubAuthenticator()}
+      helpLink="https://osrf.github.io/ros2multirobotbook/rmf-core.html"
+      reportIssueLink="https://github.com/open-rmf/rmf-web/issues"
+      resources={{ fleets: {}, logos: { header: '/resources/defaultLogo.png' } }}
+      tasks={{
+        allowedTasks: [
+          { taskDefinitionId: 'patrol' },
+          { taskDefinitionId: 'delivery' },
+          { taskDefinitionId: 'compose-clean' },
+          { taskDefinitionId: 'custom_compose' },
+        ],
+        pickupZones: [],
+        cartIds: [],
+      }}
+      tabs={[
+        {
+          name: 'Map',
+          route: '',
+          element: <Workspace initialWindows={homeWorkspace} />,
+        },
+        {
+          name: 'Robots',
+          route: 'robots',
+          element: <Workspace initialWindows={robotsWorkspace} />,
+        },
+        {
+          name: 'Tasks',
+          route: 'tasks',
+          element: <Workspace initialWindows={tasksWorkspace} />,
+        },
+        {
+          name: 'Custom',
+          route: 'custom',
+          element: (
+            <LocallyPersistentWorkspace
+              defaultWindows={[]}
+              allowDesignMode
+              appRegistry={appRegistry}
+              storageKey="custom-workspace"
+            />
+          ),
+        },
+      ]}
+    />
+  );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+root.render(<App />);
diff --git a/packages/dashboard/examples/demo/public/favicon.ico b/packages/dashboard/examples/demo/public/favicon.ico
diff --git a/packages/dashboard/examples/demo/public/resources/defaultLogo.png b/packages/dashboard/examples/demo/public/resources/defaultLogo.png
diff --git a/packages/dashboard/examples/demo/public/robots.txt b/packages/dashboard/examples/demo/public/robots.txt
@@ -0,0 +1,2 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
diff --git a/packages/dashboard/examples/demo/public/silent-check-sso.html b/packages/dashboard/examples/demo/public/silent-check-sso.html
@@ -0,0 +1,7 @@
+<html>
+<body>
+    <script>
+        parent.postMessage(location.href, location.origin)
+    </script>
+</body>
+</html>
diff --git a/packages/dashboard/examples/demo/vite.config.ts b/packages/dashboard/examples/demo/vite.config.ts
@@ -0,0 +1,13 @@
+import react from '@vitejs/plugin-react-swc';
+import path from 'path';
+import { defineConfig } from 'vite';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      'rmf-dashboard': path.resolve(__dirname, '../../src'),
+    },
+  },
+});
diff --git a/packages/dashboard/tsconfig.app.json b/packages/dashboard/tsconfig.app.json
@@ -21,7 +21,11 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+
+    "paths": {
+      "rmf-dashboard/*": ["./src/*"]
+    }
   },
-  "include": ["src", "app-config.json"]
+  "include": ["src", "examples", "app-config.json"]
 }