Skip to content

Commit

Permalink
Merge branch 'dev' into fix-new-matched-aliases-population
Browse files Browse the repository at this point in the history
  • Loading branch information
felix-lipski authored Jul 11, 2024
2 parents bbe291f + 790e68a commit 7fd95d6
Show file tree
Hide file tree
Showing 21 changed files with 177 additions and 131 deletions.
2 changes: 1 addition & 1 deletion admin/src/app.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!doctype html>
<html lang="en">
<html lang="en" class="dark">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
Expand Down
2 changes: 1 addition & 1 deletion admin/src/lib/ScreenCard.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,6 @@
<Heading tag="h2" class="px-8 py-4 text-gray-900 dark:text-white">{header}</Heading>
{/if}
<!-- remember to keep a space after the class string -->
<div class={"mx-4 rounded-lg bg-white p-8 md:mx-8 dark:bg-gray-800 " + $$props.class}>
<div class={"bg-primary-50 mx-4 rounded-lg p-8 md:mx-8 dark:bg-gray-800 " + $$props.class}>
<slot />
</div>
2 changes: 1 addition & 1 deletion admin/src/lib/Tooltip.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
<Popover
placement="right-end"
triggeredBy={`#${id}`}
class="w-72 bg-white text-sm font-light text-gray-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400"
class="w-72 max-w-[50vw] bg-white text-sm font-light text-gray-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400"
>
<slot />
<!-- <div class="p-3 space-y-2">
Expand Down
6 changes: 3 additions & 3 deletions admin/src/lib/navbar/Navbar.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@
import { Navbar, NavHamburger, NavBrand } from "flowbite-svelte";
import logo_dark from "$lib/assets/logo-dark.png";
import logo_light from "$lib/assets/logo-light.png";
let isThemeDark = true;
export let hideSidebar: boolean;
const toggleSidebar = () => {
hideSidebar = !hideSidebar;
};
export let isThemeDark: boolean;
</script>

<Navbar class="sticky top-0 z-10 shadow-md md:hidden">
<Navbar class="bg-primary-50 sticky top-0 z-10 shadow-md md:hidden dark:bg-gray-800">
<NavHamburger on:click={() => toggleSidebar()} class="absolute my-auto" />
<NavBrand href="/" class=" mx-auto mb-4 w-32">
{#if isThemeDark}
Expand Down
61 changes: 21 additions & 40 deletions admin/src/lib/scripts/darkMode.ts
Original file line number Diff line number Diff line change
@@ -1,54 +1,35 @@
import { browser } from "$app/environment";

export const toggleDarkMode = () => {
const root = document.documentElement; // Get the :root element
if (localStorage.getItem("color-theme")) {
if (localStorage.getItem("color-theme") === "light") {
root.classList.remove("light");
root.classList.add("dark");
root.style.setProperty("color-scheme", "dark");
localStorage.setItem("color-theme", "dark");
if (browser) {
if (!getTheme()) initTheme();
if (getTheme() === "dark") {
localStorage.setItem("theme", "light");
} else {
root.classList.remove("dark");
root.classList.add("light");
root.style.setProperty("color-scheme", "light");
localStorage.setItem("color-theme", "light");
localStorage.setItem("theme", "dark");
}
reloadTheme();
}
};

// if NOT set via local storage previously
} else {
if (root.classList.contains("dark") || root.style.getPropertyValue("color-scheme") === "dark") {
root.classList.remove("dark");
root.style.setProperty("color-scheme", "light");
root.classList.add("light");
localStorage.setItem("color-theme", "light");
} else {
root.classList.add("dark");
root.style.setProperty("color-scheme", "dark");
localStorage.setItem("color-theme", "dark");
}
export const initTheme = () => {
if (!getTheme()) {
window.matchMedia("(prefers-color-scheme: dark)").matches
? localStorage.setItem("theme", "dark")
: localStorage.setItem("theme", "light");
}
};

export const initializeDarkMode = () => {
export const reloadTheme = () => {
if (!browser) return;
const root = document.documentElement; // Get the :root element
if (
localStorage.getItem("color-theme") === "dark" ||
(!("color-theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)
) {
root.classList.add("dark");
root.style.setProperty("color-scheme", "dark");
if (!getTheme()) {
initTheme();
}
if (getTheme() === "dark") {
document.documentElement.classList.add("dark");
} else {
root.classList.remove("dark");
root.style.setProperty("color-scheme", "light");
document.documentElement.classList.remove("dark");
}
};

export const getIsThemeDark = () => {
return (
localStorage.getItem("color-theme") === "dark" ||
document.documentElement.style.getPropertyValue("color-scheme") === "dark" ||
document.documentElement.classList.contains("dark")
);
};
export const getTheme = () => localStorage.getItem("theme");
46 changes: 25 additions & 21 deletions admin/src/lib/sidebar/Sidebar.svelte
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script lang="ts">
import { page } from "$app/stores";
import { getIsThemeDark, toggleDarkMode } from "$lib/scripts/darkMode";
import { reloadTheme, toggleDarkMode } from "$lib/scripts/darkMode";
import {
Sidebar,
SidebarDropdownItem,
Expand Down Expand Up @@ -29,10 +29,9 @@
import { goto } from "$app/navigation";
import { onMount } from "svelte";
import { genericGet } from "$lib/genericGet";
import { browser } from "$app/environment";
export let supabase: any;
let isThemeDark: boolean = true;
$: activeUrl = $page.url.pathname;
$: lowQuantityNotifications =
lowQuantityProductRecords &&
Expand All @@ -51,23 +50,24 @@
let isNotificationCenterModalOpen = false;
export let lowQuantityProductRecords: LowQuantityProductRecords[] = [];
export let isThemeDark: boolean;
onMount(() => {
if (browser) {
isThemeDark = getIsThemeDark();
}
genericGet(supabase.from("low_quantity_product_records_view").select("*"), (x) => {
lowQuantityProductRecords = x as LowQuantityProductRecords[];
});
});
const handleLogout = (event: MouseEvent) => {
const handleLogout = async (event: MouseEvent) => {
event.stopPropagation();
event.preventDefault();
goto("/auth", { replaceState: true });
supabase.auth.signOut();
OneSignal.logout();
goto("/auth", { replaceState: true });
};
const activeClass =
"flex items-center p-2 text-base font-normal text-gray-900 bg-primary-100 dark:bg-gray-700 rounded-lg dark:text-white";
const nonActiveClass =
"flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-primary-200 dark:hover:bg-primary-800";
export let hideSidebar: boolean;
function toggleSidebar() {
hideSidebar = !hideSidebar;
Expand All @@ -76,7 +76,9 @@

<Sidebar
{activeUrl}
class="absolute top-0 z-10 flex h-screen min-h-fit w-72 min-w-[18rem] flex-col justify-between overflow-auto bg-gray-200 px-4 md:sticky md:flex dark:bg-gray-800"
{activeClass}
{nonActiveClass}
class="bg-primary-50 z-10 flex min-h-screen w-72 min-w-[18rem] flex-col justify-between px-4 md:sticky md:top-0 md:flex md:h-max dark:bg-gray-800"
>
<div>
<NotificationCenterModal
Expand All @@ -88,7 +90,7 @@
{:else}
<img src={logo_light} class="mb-8 mt-8 hidden md:inline-block" alt="InvTrack logo" />
{/if}
<SidebarWrapper class="flex flex-col bg-gray-200 dark:bg-gray-800 ">
<SidebarWrapper class="bg-primary-50 flex flex-col dark:bg-gray-800 ">
<SidebarGroup>
<SidebarItem
label="Powiadomienia"
Expand All @@ -113,65 +115,67 @@
<SidebarItem label="Podsumowanie" href="/" on:click={() => toggleSidebar()}>
<svelte:fragment slot="icon">
<HomeSolid
active={activeUrl === "/"}
class="h-6 w-6 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
/>
</svelte:fragment>
</SidebarItem>
<SidebarItem label="Pracownicy" href="/workers" on:click={() => toggleSidebar()}>
<svelte:fragment slot="icon">
<UsersSolid
active={activeUrl === "/workers"}
class="h-6 w-6 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
/>
</svelte:fragment>
</SidebarItem>
<SidebarItem label="Inwentaryzacje" href="/inventories" on:click={() => toggleSidebar()}>
<svelte:fragment slot="icon">
<ListSolid
active={activeUrl === "/inventories"}
class="h-6 w-6 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
/>
</svelte:fragment>
</SidebarItem>
<SidebarItem label="Produkty" href="/products" on:click={() => toggleSidebar()}>
<svelte:fragment slot="icon">
<BriefcaseSolid
active={activeUrl === "/products"}
class="h-6 w-6 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
/></svelte:fragment
>
</SidebarItem>
<SidebarItem label="Recepturownik" href="/recipes" on:click={() => toggleSidebar()}>
<svelte:fragment slot="icon">
<InboxFullSolid
active={activeUrl === "/recipes"}
class="h-6 w-6 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
/></svelte:fragment
>
</SidebarItem>
</SidebarGroup>
<SidebarGroup border>
<SidebarDropdownWrapper label="Twoje konto">
<SidebarDropdownWrapper
label="Twoje konto"
class="hover:bg-primary-200 dark:hover:bg-primary-800"
>
<svelte:fragment slot="icon">
<UsersSolid
class="h-6 w-6 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
class="h-6 w-6 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
/>
</svelte:fragment>
<SidebarDropdownItem label="Wyloguj" on:click={handleLogout} />
<SidebarDropdownItem
label="Wyloguj"
on:click={handleLogout}
class="hover:bg-red-300 dark:hover:bg-red-800"
/>
</SidebarDropdownWrapper>
</SidebarGroup>
</SidebarWrapper>
</div>
<div>
<SidebarWrapper class="mb-4 bg-gray-200 dark:bg-gray-800" border>
<SidebarWrapper class="bg-primary-50 mb-4 dark:bg-gray-800" border>
<SidebarGroup class="flex flex-col">
<h3 class="w-full rounded-lg text-base font-normal text-gray-900 dark:text-white">
Zmień motyw
</h3>
<div class="flex flex-row">
<SunSolid class="mr-2 h-6 w-6 text-gray-500 dark:text-gray-400" />
<Toggle checked={isThemeDark} on:click={toggleDarkMode} />
<Toggle bind:checked={isThemeDark} on:click={toggleDarkMode} />
<MoonSolid class="h-6 w-6 text-gray-500 dark:text-gray-400" />
</div>
</SidebarGroup>
Expand Down
32 changes: 24 additions & 8 deletions admin/src/routes/(authenticated)/+layout.svelte
Original file line number Diff line number Diff line change
@@ -1,35 +1,51 @@
<script lang="ts">
import { goto } from "$app/navigation";
import Navbar from "$lib/navbar/Navbar.svelte";
import { getTheme } from "$lib/scripts/darkMode.js";
import Sidebar from "$lib/sidebar/Sidebar.svelte";
import { Drawer } from "flowbite-svelte";
import { onMount } from "svelte";
import { sineIn } from "svelte/easing";
export let data;
let { supabase } = data;
$: ({ supabase } = data);
$: if (!data.session) {
goto("/auth", { replaceState: true });
}
let hideSidebar: boolean = true;
let transitionParams = {
x: -320,
duration: 200,
easing: sineIn,
};
let screenWidth: number;
let isThemeDark: boolean;
onMount(() => {
screenWidth = window.innerWidth;
isThemeDark = getTheme() === "dark";
});
</script>

<svelte:window bind:innerWidth={screenWidth} />

<div class="flex flex-col">
<Navbar bind:hideSidebar />
<div class="flex flex-row">
<div class="flex h-fit min-h-screen flex-col">
<Navbar bind:hideSidebar bind:isThemeDark />
<div class="dark:bg-primary-900 flex h-fit min-h-screen flex-row bg-white">
{#if screenWidth > 768}
<Sidebar {supabase} bind:hideSidebar />
<Sidebar {supabase} bind:hideSidebar bind:isThemeDark />
{:else}
<Drawer bind:hidden={hideSidebar} {transitionParams} transitionType="fly">
<Sidebar {supabase} bind:hideSidebar />
<Drawer
bind:hidden={hideSidebar}
{transitionParams}
transitionType="fly"
class="m-0 w-72 p-0"
>
<Sidebar {supabase} bind:hideSidebar bind:isThemeDark />
</Drawer>
{/if}
<main class="dark:bg-primary-900 w-fit overflow-auto bg-white">
<main class="dark:bg-primary-900 w-full overflow-auto bg-white mb-16">
<slot />
</main>
</div>
Expand Down
30 changes: 15 additions & 15 deletions admin/src/routes/(authenticated)/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -110,18 +110,18 @@
<main class="flex flex-col">
<ScreenCard header="Podsumowanie" class="relative w-fit overflow-y-auto p-8 pt-0">
<div class="flex justify-between pt-8">
<PaginationItem class="mb-4 bg-gray-200 " on:click={handlePrev}>
<PaginationItem class="hover:bg-primary-200 mb-4 " on:click={handlePrev}>
<ArrowLeftSolid class="h-5 w-5" />
<Heading tag="h6" class="ml-4 ">Poprzedni</Heading>
</PaginationItem>
<PaginationItem class="mb-4 bg-gray-200 " on:click={handleNext}>
<PaginationItem class="hover:bg-primary-200 mb-4" on:click={handleNext}>
<Heading tag="h6" class="mr-4">Następny</Heading>
<ArrowRightSolid class="h-5 w-5" />
</PaginationItem>
</div>
{#if records}
<Table divClass="relative" class="border-separate">
<TableHead class="bg-gray-200" theadClass="sticky top-0 bg-gray-200">
<Table shadow>
<TableHead class="bg-primary-100 normal-case dark:bg-gray-600 ">
<TableHeadCell />
{#each records as record}
<TableHeadCell class="place-items-center border-l"
Expand Down Expand Up @@ -149,16 +149,16 @@
{/if}
</Table>
{/if}
<Button
class="mt-4 h-12 self-end text-lg font-bold"
color="primary"
on:click={() => downloadCsv()}
>
{#if loadingCsv}
<Spinner size="8" color="white" />
{:else}
Eksportuj dane
{/if}
</Button>
</ScreenCard>
<Button
class="mx-8 mt-4 h-12 w-[10.75rem] self-end text-lg font-bold"
color="primary"
on:click={() => downloadCsv()}
>
{#if loadingCsv}
<Spinner size="8" color="white" />
{:else}
Eksportuj dane
{/if}
</Button>
</main>
Loading

0 comments on commit 7fd95d6

Please sign in to comment.