initial commit

src/layouts/admin/AdminLayout.astro

@@ -0,0 +1,125 @@
+---
+import '@assets/admin_layout.css';
+import BaseLayout from '../BaseLayout.astro';
+import { ClientRouter } from 'astro:transitions';
+import { Icon } from 'astro-icon/components';
+import { BASE_PATH } from 'astro:env/client';
+import Popup from '@components/popup/Popup.svelte';
+import ConfirmPopup from '@components/popup/ConfirmPopup.svelte';
+import { Session } from '@util/session.ts';
+
+interface Props {
+  title: string;
+}
+
+const { title } = Astro.props;
+
+const session = Session.sessionFromCookies(Astro.cookies);
+
+const preTabs = [
+  {
+    href: `${BASE_PATH}`,
+    name: 'Varo Startseite',
+    icon: 'heroicons:computer-desktop-20-solid'
+  }
+];
+const adminTabs = [
+  {
+    href: `${BASE_PATH}/admin/users`,
+    name: 'Registrierte Nutzer',
+    icon: 'heroicons:user',
+    enabled: session?.permissions.users
+  },
+  {
+    href: `${BASE_PATH}/admin/teams`,
+    name: 'Teams',
+    icon: 'heroicons:users',
+    enabled: session?.permissions.users
+  },
+  {
+    href: `${BASE_PATH}/admin/reports`,
+    name: 'Reports',
+    icon: 'heroicons:flag',
+    enabled: session?.permissions.reports
+  },
+  {
+    href: `${BASE_PATH}/admin/feedback`,
+    name: 'Feedback',
+    icon: 'heroicons:book-open',
+    enabled: session?.permissions.feedback
+  },
+  {
+    href: `${BASE_PATH}/admin/admins`,
+    name: 'Website Admins',
+    icon: 'heroicons:code-bracket-16-solid',
+    enabled: session?.permissions.admin
+  },
+  {
+    href: `${BASE_PATH}/admin/settings`,
+    name: 'Einstellungen',
+    icon: 'heroicons:adjustments-horizontal',
+    enabled: session?.permissions.settings
+  }
+];
+---
+
+<BaseLayout title={title}>
+  <ClientRouter />
+  <div class="flex flex-row max-h-[100vh]">
+    <ul class="menu bg-base-200 w-64 h-[100vh] flex">
+      {
+        preTabs.map((tab) => (
+          <li>
+            <a href={tab.href}>
+              <Icon name={tab.icon} />
+              <span>{tab.name}</span>
+            </a>
+          </li>
+        ))
+      }
+      <div class="divider mx-1 my-1"></div>
+      {
+        adminTabs.map((tab) => (
+          <li>
+            <a href={tab.href}>
+              <Icon name={tab.icon} />
+              <span>{tab.name}</span>
+            </a>
+          </li>
+        ))
+      }
+      {
+        Astro.slots.has('actions') && (
+          <fieldset class="fieldset bg-base-300 border-base-100 rounded-box border p-2 -ml-1.5 -mr-1.5 mt-auto">
+            <slot name="actions" />
+          </fieldset>
+        )
+      }
+      <li class:list={[Astro.slots.has('actions') ? null : 'mt-auto']}>
+        <button id="logout">
+          <Icon name="heroicons:arrow-left-end-on-rectangle" />
+          <span>Ausloggen</span>
+        </button>
+      </li>
+    </ul>
+    <div class="w-full overflow-scroll relative">
+      <slot />
+    </div>
+  </div>
+</BaseLayout>
+
+<Popup client:idle />
+<ConfirmPopup client:idle />
+
+<script>
+  import { actions } from 'astro:actions';
+  import { BASE_PATH } from 'astro:env/client';
+
+  document.addEventListener('astro:page-load', () => {
+    const logout = document.getElementById('logout') as HTMLButtonElement;
+    logout.addEventListener('click', async () => {
+      await actions.session.logout();
+      window.location.href = `${BASE_PATH}/admin/login`;
+    });
+  });
+</script>