ershisan99/flashcards-admin-bot
1
0
Fork 0
mirror of https://github.com/ershisan99/flashcards-admin-bot.git synced 2025-12-24 20:59:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

add basic functionality for frontend, json db

Browse Source
This commit is contained in:
andres
2024-05-25 15:05:18 +02:00
parent d2763be27b
commit 7d55082f4d
44 changed files with 4146 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
front/src/app.css Normal file
View File

@@ -0,0 +1,78 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 72.2% 50.6%;
--destructive-foreground: 210 40% 98%;
--ring: 222.2 84% 4.9%;
--radius: 0.5rem;
}
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
--ring: hsl(212.7,26.8%,83.9);
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}

13
front/src/app.d.ts vendored Normal file
View File

@@ -0,0 +1,13 @@
// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
namespace App {
// interface Error {}
// interface Locals {}
// interface PageData {}
// interface PageState {}
// interface Platform {}
}
}
export {};

13
front/src/app.html Normal file
View File

@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en" class="dark">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>

25
front/src/lib/components/ui/button/button.svelte Normal file
View File

@@ -0,0 +1,25 @@
<script lang="ts">
import { Button as ButtonPrimitive } from "bits-ui";
import { type Events, type Props, buttonVariants } from "./index.js";
import { cn } from "$lib/utils.js";
type $$Props = Props;
type $$Events = Events;
let className: $$Props["class"] = undefined;
export let variant: $$Props["variant"] = "default";
export let size: $$Props["size"] = "default";
export let builders: $$Props["builders"] = [];
export { className as class };
</script>
<ButtonPrimitive.Root
{builders}
class={cn(buttonVariants({ variant, size, className }))}
type="button"
{...$$restProps}
on:click
on:keydown
>
<slot />
</ButtonPrimitive.Root>

49
front/src/lib/components/ui/button/index.ts Normal file
View File

@@ -0,0 +1,49 @@
import { type VariantProps, tv } from "tailwind-variants";
import type { Button as ButtonPrimitive } from "bits-ui";
import Root from "./button.svelte";
const buttonVariants = tv({
base: "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
outline:
"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline",
},
size: {
default: "h-10 px-4 py-2",
sm: "h-9 rounded-md px-3",
lg: "h-11 rounded-md px-8",
icon: "h-10 w-10",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
});
type Variant = VariantProps<typeof buttonVariants>["variant"];
type Size = VariantProps<typeof buttonVariants>["size"];
type Props = ButtonPrimitive.Props & {
variant?: Variant;
size?: Size;
};
type Events = ButtonPrimitive.Events;
export {
Root,
type Props,
type Events,
//
Root as Button,
type Props as ButtonProps,
type Events as ButtonEvents,
buttonVariants,
};

28
front/src/lib/components/ui/table/index.ts Normal file
View File

@@ -0,0 +1,28 @@
import Root from "./table.svelte";
import Body from "./table-body.svelte";
import Caption from "./table-caption.svelte";
import Cell from "./table-cell.svelte";
import Footer from "./table-footer.svelte";
import Head from "./table-head.svelte";
import Header from "./table-header.svelte";
import Row from "./table-row.svelte";
export {
Root,
Body,
Caption,
Cell,
Footer,
Head,
Header,
Row,
//
Root as Table,
Body as TableBody,
Caption as TableCaption,
Cell as TableCell,
Footer as TableFooter,
Head as TableHead,
Header as TableHeader,
Row as TableRow,
};

13
front/src/lib/components/ui/table/table-body.svelte Normal file
View File

@@ -0,0 +1,13 @@
<script lang="ts">
import type { HTMLAttributes } from "svelte/elements";
import { cn } from "$lib/utils.js";
type $$Props = HTMLAttributes<HTMLTableSectionElement>;
let className: $$Props["class"] = undefined;
export { className as class };
</script>
<tbody class={cn("[&_tr:last-child]:border-0", className)} {...$$restProps}>
<slot />
</tbody>

13
front/src/lib/components/ui/table/table-caption.svelte Normal file
View File

@@ -0,0 +1,13 @@
<script lang="ts">
import type { HTMLAttributes } from "svelte/elements";
import { cn } from "$lib/utils.js";
type $$Props = HTMLAttributes<HTMLTableCaptionElement>;
let className: $$Props["class"] = undefined;
export { className as class };
</script>
<caption class={cn("mt-4 text-sm text-muted-foreground", className)} {...$$restProps}>
<slot />
</caption>

18
front/src/lib/components/ui/table/table-cell.svelte Normal file
View File

@@ -0,0 +1,18 @@
<script lang="ts">
import type { HTMLTdAttributes } from "svelte/elements";
import { cn } from "$lib/utils.js";
type $$Props = HTMLTdAttributes;
let className: $$Props["class"] = undefined;
export { className as class };
</script>
<td
class={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
{...$$restProps}
on:click
on:keydown
>
<slot />
</td>

13
front/src/lib/components/ui/table/table-footer.svelte Normal file
View File

@@ -0,0 +1,13 @@
<script lang="ts">
import type { HTMLAttributes } from "svelte/elements";
import { cn } from "$lib/utils.js";
type $$Props = HTMLAttributes<HTMLTableSectionElement>;
let className: $$Props["class"] = undefined;
export { className as class };
</script>
<tfoot class={cn("bg-primary font-medium text-primary-foreground", className)} {...$$restProps}>
<slot />
</tfoot>

19
front/src/lib/components/ui/table/table-head.svelte Normal file
View File

@@ -0,0 +1,19 @@
<script lang="ts">
import type { HTMLThAttributes } from "svelte/elements";
import { cn } from "$lib/utils.js";
type $$Props = HTMLThAttributes;
let className: $$Props["class"] = undefined;
export { className as class };
</script>
<th
class={cn(
"h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
className
)}
{...$$restProps}
>
<slot />
</th>

14
front/src/lib/components/ui/table/table-header.svelte Normal file
View File

@@ -0,0 +1,14 @@
<script lang="ts">
import type { HTMLAttributes } from "svelte/elements";
import { cn } from "$lib/utils.js";
type $$Props = HTMLAttributes<HTMLTableSectionElement>;
let className: $$Props["class"] = undefined;
export { className as class };
</script>
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<thead class={cn("[&_tr]:border-b", className)} {...$$restProps} on:click on:keydown>
<slot />
</thead>

23
front/src/lib/components/ui/table/table-row.svelte Normal file
View File

@@ -0,0 +1,23 @@
<script lang="ts">
import type { HTMLAttributes } from "svelte/elements";
import { cn } from "$lib/utils.js";
type $$Props = HTMLAttributes<HTMLTableRowElement> & {
"data-state"?: unknown;
};
let className: $$Props["class"] = undefined;
export { className as class };
</script>
<tr
class={cn(
"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
className
)}
{...$$restProps}
on:click
on:keydown
>
<slot />
</tr>

15
front/src/lib/components/ui/table/table.svelte Normal file
View File

@@ -0,0 +1,15 @@
<script lang="ts">
import type { HTMLTableAttributes } from "svelte/elements";
import { cn } from "$lib/utils.js";
type $$Props = HTMLTableAttributes;
let className: $$Props["class"] = undefined;
export { className as class };
</script>
<div class="relative w-full overflow-auto">
<table class={cn("w-full caption-bottom text-sm", className)} {...$$restProps}>
<slot />
</table>
</div>

1
front/src/lib/index.ts Normal file
View File

@@ -0,0 +1 @@
// place files you want to import through the `$lib` alias in this folder.

62
front/src/lib/utils.ts Normal file
View File

@@ -0,0 +1,62 @@
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
import { cubicOut } from "svelte/easing";
import type { TransitionConfig } from "svelte/transition";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
type FlyAndScaleParams = {
y?: number;
x?: number;
start?: number;
duration?: number;
};
export const flyAndScale = (
node: Element,
params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 }
): TransitionConfig => {
const style = getComputedStyle(node);
const transform = style.transform === "none" ? "" : style.transform;
const scaleConversion = (
valueA: number,
scaleA: [number, number],
scaleB: [number, number]
) => {
const [minA, maxA] = scaleA;
const [minB, maxB] = scaleB;
const percentage = (valueA - minA) / (maxA - minA);
const valueB = percentage * (maxB - minB) + minB;
return valueB;
};
const styleToString = (
style: Record<string, number | string | undefined>
): string => {
return Object.keys(style).reduce((str, key) => {
if (style[key] === undefined) return str;
return str + `${key}:${style[key]};`;
}, "");
};
return {
duration: params.duration ?? 200,
delay: 0,
css: (t) => {
const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);
return styleToString({
transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
opacity: t
});
},
easing: cubicOut
};
};

7
front/src/routes/+layout.svelte Normal file
View File

@@ -0,0 +1,7 @@
<script lang="ts">
import '../app.css';
</script>
<main class="container mt-10">
<slot></slot>
</main>

30
front/src/routes/+page.server.ts Normal file
View File

@@ -0,0 +1,30 @@
export async function load() {
return (await fetch('http://localhost:3000').then((res) => res.json() as Promise<Data>)) as Data;
}
export const actions = {
prepareDb: async () => {
await fetch('http://localhost:3000/prepare-db');
},
generateGroups: async () => {
await fetch('http://localhost:3000/generate-groups');
},
fillPreregistered: async () => {
await fetch('http://localhost:3000/fill-preregistered');
}
};
export type UserData = {
name: string;
availableTime: { from: number; to: number | null };
tgUsername: string;
userId: string;
chatId: string;
};
export type Data = {
rawData: Record<string, UserData>;
groups: UserData[][];
};

80
front/src/routes/+page.svelte Normal file
View File

@@ -0,0 +1,80 @@
<script lang="ts">
import type { Data } from './+page.server';
export let data: Data;
import {
Table,
TableBody,
TableCell,
TableHead,
TableRow,
TableHeader
} from '$lib/components/ui/table';
import { Button } from '$lib/components/ui/button';
</script>
<div class="w-full">
<h1 class="mb-4 text-3xl font-bold">Группы</h1>
<div class="mb-4 flex items-center gap-6">
<form method="POST" action="?/prepareDb">
<Button type="submit">Подготовить базу данных</Button>
</form>
<form method="POST" action="?/fillPreregistered">
<Button type="submit">Добавить предрегистрированных пользователей</Button>
</form>
<form method="POST" action="?/generateGroups">
<Button type="submit">Сгенерировать группы</Button>
</form>
<form>
<Button>Отправить информацию в Telegram</Button>
</form>
</div>
{#if Object.keys(data.rawData).length}
<div class="mb-4">
<Table>
<TableHeader>
<TableRow>
<TableHead>Имя</TableHead>
<TableHead>Время</TableHead>
<TableHead>Telegram</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{#each Object.entries(data.rawData) as [_, user]}
<TableRow>
<TableCell>{user.name}</TableCell>
<TableCell style="width: 200px"
>{user.availableTime.from} - {user.availableTime.to}</TableCell
>
<TableCell style="width: 200px">{user.tgUsername}</TableCell>
</TableRow>
{/each}
</TableBody>
</Table>
</div>
{/if}
<div class="space-y-10">
{#each data.groups as group}
<Table>
<TableHeader>
<TableRow>
<TableHead>Имя</TableHead>
<TableHead>Время</TableHead>
<TableHead>Telegram</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{#each group as el}
<TableRow>
<TableCell>{el.name}</TableCell>
<TableCell style="width: 200px"
>{el.availableTime.from} - {el.availableTime.to}</TableCell
>
<TableCell style="width: 200px">{el.tgUsername}</TableCell>
</TableRow>
{/each}
</TableBody>
</Table>
{/each}
</div>
</div>