Commit 561324d0 authored by wycers's avatar wycers
Browse files

assignemnt - problem

parent 5fe7b761

src/lib/components/problem/ProblemCard.svelte

0 → 100644
+72 −0
Original line number Diff line number Diff line 
<script lang="ts">

	import * as Card from '$lib/components/ui/card';

	import { goto } from '$app/navigation';

	import ProblemDatetime from './ProblemDatetime.svelte';



	type Problem = {

		id: number;

		name: string;

		title: string;

		description: string;

		start: Date | null;

		end: Date | null;

	};



	export let problem: Problem;

</script>



<Card.Root

	class="transition hover:shadow-lg"

	on:click={() => {

		goto(`/problem/${problem.id}`);

	}}

>

	<Card.Header class="grid grid-cols-[1fr_110px] items-start gap-4 space-y-0">

		<div class="space-y-2">

			<Card.Title class="text-lg">{problem.title}</Card.Title>

			<!-- <Card.Description>

				{problem.description}

			</Card.Description> -->

		</div>

		<!-- <div class="flex items-center space-x-1 rounded-md bg-secondary text-secondary-foreground">

			<Button variant="secondary" class="px-3 shadow-none">

				<Star class="mr-2 h-4 w-4" />

				Star

			</Button>

			<Separator orientation="vertical" class="h-[20px]" />

			<DropdownMenu.Root>

				<DropdownMenu.Trigger asChild let:builder>

					<Button builders={[builder]} variant="secondary" class="px-2 shadow-none">

						<ChevronDown class="h-4 w-4 text-secondary-foreground" />

					</Button>

				</DropdownMenu.Trigger>

				<DropdownMenu.Content class="w-[200px]" align="end">

					<DropdownMenu.Label>Suggested Lists</DropdownMenu.Label>

					<DropdownMenu.Separator />

					<DropdownMenu.CheckboxItem checked>Future Ideas</DropdownMenu.CheckboxItem>

					<DropdownMenu.CheckboxItem>My Stack</DropdownMenu.CheckboxItem>

					<DropdownMenu.CheckboxItem>Inspiration</DropdownMenu.CheckboxItem>

					<DropdownMenu.Separator />

					<DropdownMenu.Item>

						<Plus class="mr-2 h-4 w-4" /> Create List

					</DropdownMenu.Item>

				</DropdownMenu.Content>

			</DropdownMenu.Root>

		</div> -->

	</Card.Header>

	<Card.Content>

		<!-- <div class="mb-4 h-2.5 w-full rounded-full bg-gray-200 dark:bg-gray-700">

			<div class="h-2.5 rounded-full bg-blue-600" style="width: 45%"></div>

		</div> -->

		<div class="flex justify-between space-x-4 text-sm text-muted-foreground">

			<ProblemDatetime class="flex items-center" label="Start from " date={problem.start}

			></ProblemDatetime>

			<ProblemDatetime class="flex items-center" label="End at " date={problem.end}

			></ProblemDatetime>

		</div>

	</Card.Content>

	<!-- <Separator orientation="horizontal" class="h-[1px]" /> -->

	<!-- <Card.Footer>

		<div>?</div>

	</Card.Footer> -->

</Card.Root>

src/lib/components/problem/ProblemDatetime.svelte

0 → 100644
+15 −0
Original line number Diff line number Diff line 
<script lang="ts">

	import { cn } from '$lib/utils';

	import moment from 'moment';

	import CalendarIcon from 'svelte-radix/Calendar.svelte';



	export let label: 'Start from ' | 'End at ';

	export let date: Date | null;

	let className: string | undefined | null = undefined;

	export { className as class };

</script>



<div class={cn(className)} {...$$restProps}>

	<CalendarIcon class="mx-1"></CalendarIcon>

	{label}{moment(date).local().format('lll')}

</div>

src/routes/(with-session)/(with-class)/[course]/[semester=semester]/submission/+page.svelte

+4 −0
Original line number Diff line number Diff line
@@ -15,6 +15,10 @@ 
			accessor: 'id',

			header: 'ID'

		}),

		table.column({

			accessor: 'problemId',

			header: 'Problem'

		}),

		table.column({

			accessor: 'name',

			header: 'Name'

src/routes/(with-session)/(with-class)/assignment/[assignmentId=integer]/+page.server.ts

0 → 100644
+28 −0
Original line number Diff line number Diff line 
import _ from 'lodash';

import type { PageServerLoad } from './$types';

import { db } from '$lib/server/db';

import { error } from '@sveltejs/kit';



export const load = (async ({ params }) => {

	const id = _.toNumber(params.assignmentId);

	const assignment = await db.assignment.findUnique({

		where: { id },

		include: {

			problems: {

				orderBy: {

					index: 'asc'

				}

			}

		}

	});



	if (_.isNil(assignment)) {

		error(404, {

			message: 'Not found'

		});

	}



	return {

		assignment

	};

}) satisfies PageServerLoad;

src/routes/(with-session)/(with-class)/assignment/[assignmentId=integer]/+page.svelte

+50 −317
Original line number Diff line number Diff line 
<script>

	// import Tiptap from '$lib/Tiptap.svelte';

	import CounterClockwiseClock from "svelte-radix/CounterClockwiseClock.svelte";

	import { Button } from "$lib/components/ui/button";

	import { Label } from "$lib/components/ui/label";

	import { Separator } from "$lib/components/ui/separator";

	import * as Tabs from "$lib/components/ui/tabs";

	import { Textarea } from "$lib/components/ui/textarea";

	import * as HoverCard from "$lib/components/ui/hover-card";

	import {

		CodeViewer,

		MaxLengthSelector,

		ModelSelector,

		PresetActions,

		PresetSave,

		PresetSelector,

		PresetShare,

		TemperatureSelector,

		TopPSelector,

	} from "$lib/components/assignment/edit";

	import { models, types } from "$lib/components/assignment/edit/models";

	import { presets } from "$lib/components/assignment/edit/presets";

	import MdEditor from "$lib/components/md-editor.svelte";

</script>



<MdEditor defaultValue="# Milkdown 💗 Svelte" />	

<script lang="ts">

	import SubmitCard from '$lib/components/problem/SubmitCard.svelte';

	import * as Avatar from '$lib/components/ui/avatar';

	import * as HoverCard from '$lib/components/ui/hover-card';

	import { Calendar } from 'svelte-radix';

	import type { PageData } from './$types';

	import _ from 'lodash';

	import MonacoEditor from '$lib/components/monaco/MonacoEditor.svelte';

	import Viewer from '$lib/components/file/viewer.svelte';

	import { browser, dev } from '$app/environment';

	import ProblemCard from '$lib/components/problem/ProblemCard.svelte';

	export let data: PageData;



<!-- <div class="md:hidden">

	<img

		src="/examples/playground-light.png"

		width={1280}

		height={916}

		alt="Playground"

		class="block dark:hidden"

	/>

	<img

		src="/examples/playground-dark.png"

		width={1280}

		height={916}

		alt="Playground"

		class="hidden dark:block"

	/>

</div>

<div class="hidden h-full flex-col md:flex">

	<div

		class="container flex flex-col items-start justify-between space-y-2 py-4 sm:flex-row sm:items-center sm:space-y-0 md:h-16"

	>

		<h2 class="text-lg font-semibold">Playground</h2>

		<div class="ml-auto flex w-full space-x-2 sm:justify-end">

			<PresetSelector {presets} />

			<PresetSave />

			<div class="hidden space-x-2 md:flex">

				<CodeViewer />

				<PresetShare />

			</div>

			<PresetActions />

		</div>

	</div>

	<Separator />

	<Tabs.Root value="complete" class="flex-1">

	const { assignment } = data;

</script>



		<div class="container h-full py-6">

			<div class="grid h-full items-stretch gap-6 md:grid-cols-[1fr_200px]">

				<div class="hidden flex-col space-y-4 sm:flex md:order-2">

					<div class="grid gap-2">

						<HoverCard.Root openDelay={200}>

							<HoverCard.Trigger asChild let:builder>

								<span

									class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"

									use:builder.action

									{...builder}

<div class="h-full px-4 py-6 lg:px-8">

	<div class="flex items-center justify-between space-y-2">

		<h2 class="text-3xl font-bold tracking-tight">Assignment #{assignment.id}</h2>

	</div>

	<div class="space-y-4 py-6">

		{#each assignment.problems as problem}

			<ProblemCard problem={{ ...problem }} />

		{/each}

		<div>

			<!-- <HoverCard.Root>

				Problem:

				<HoverCard.Trigger

					href={`/problem/${problem.id}`}

					target="_blank"

					rel="noreferrer noopener"

					class="rounded-sm text-blue-600 underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-8 focus-visible:outline-black dark:text-blue-500"

				>

									Mode

								</span>

					{problem.title}

				</HoverCard.Trigger>

							<HoverCard.Content class="w-[320px] text-sm" side="left">

								Choose the interface that best suits your task. You can provide: a

								simple prompt to complete, starting and ending text to insert a

								completion within, or some text with instructions to edit it.

							</HoverCard.Content>

						</HoverCard.Root>

						<Tabs.List class="grid grid-cols-3">

							<Tabs.Trigger value="complete">

								<span class="sr-only">Complete</span>

								<svg

									xmlns="http://www.w3.org/2000/svg"

									viewBox="0 0 20 20"

									fill="none"

									class="h-5 w-5"

								>

									<rect

										x="4"

										y="3"

										width="12"

										height="2"

										rx="1"

										fill="currentColor"

									/>

									<rect

										x="4"

										y="7"

										width="12"

										height="2"

										rx="1"

										fill="currentColor"

									/>

									<rect

										x="4"

										y="11"

										width="3"

										height="2"

										rx="1"

										fill="currentColor"

									/>

									<rect

										x="4"

										y="15"

										width="3"

										height="2"

										rx="1"

										fill="currentColor"

									/>

									<rect

										x="8.5"

										y="11"

										width="3"

										height="2"

										rx="1"

										fill="currentColor"

									/>

									<rect

										x="8.5"

										y="15"

										width="3"

										height="2"

										rx="1"

										fill="currentColor"

									/>

									<rect

										x="13"

										y="11"

										width="3"

										height="2"

										rx="1"

										fill="currentColor"

									/>

								</svg>

							</Tabs.Trigger>

							<Tabs.Trigger value="insert">

								<span class="sr-only">Insert</span>

								<svg

									xmlns="http://www.w3.org/2000/svg"

									viewBox="0 0 20 20"

									fill="none"

									class="h-5 w-5"

								>

									<path

										fill-rule="evenodd"

										clip-rule="evenodd"

										d="M14.491 7.769a.888.888 0 0 1 .287.648.888.888 0 0 1-.287.648l-3.916 3.667a1.013 1.013 0 0 1-.692.268c-.26 0-.509-.097-.692-.268L5.275 9.065A.886.886 0 0 1 5 8.42a.889.889 0 0 1 .287-.64c.181-.17.427-.267.683-.269.257-.002.504.09.69.258L8.903 9.87V3.917c0-.243.103-.477.287-.649.183-.171.432-.268.692-.268.26 0 .509.097.692.268a.888.888 0 0 1 .287.649V9.87l2.245-2.102c.183-.172.432-.269.692-.269.26 0 .508.097.692.269Z"

										fill="currentColor"

									/>

									<rect

										x="4"

										y="15"

										width="3"

										height="2"

										rx="1"

										fill="currentColor"

									/>

									<rect

										x="8.5"

										y="15"

										width="3"

										height="2"

										rx="1"

										fill="currentColor"

									/>

									<rect

										x="13"

										y="15"

										width="3"

										height="2"

										rx="1"

										fill="currentColor"

									/>

								</svg>

							</Tabs.Trigger>

							<Tabs.Trigger value="edit">

								<span class="sr-only">Edit</span>

								<svg

									xmlns="http://www.w3.org/2000/svg"

									viewBox="0 0 20 20"

									fill="none"

									class="h-5 w-5"

								>

									<rect

										x="4"

										y="3"

										width="12"

										height="2"

										rx="1"

										fill="currentColor"

									/>

									<rect

										x="4"

										y="7"

										width="12"

										height="2"

										rx="1"

										fill="currentColor"

									/>

									<rect

										x="4"

										y="11"

										width="3"

										height="2"

										rx="1"

										fill="currentColor"

									/>

									<rect

										x="4"

										y="15"

										width="4"

										height="2"

										rx="1"

										fill="currentColor"

									/>

									<rect

										x="8.5"

										y="11"

										width="3"

										height="2"

										rx="1"

										fill="currentColor"

									/>

									<path

										d="M17.154 11.346a1.182 1.182 0 0 0-1.671 0L11 15.829V17.5h1.671l4.483-4.483a1.182 1.182 0 0 0 0-1.671Z"

										fill="currentColor"

									/>

								</svg>

							</Tabs.Trigger>

						</Tabs.List>

				<HoverCard.Content>

					<div class="space-y-1">

						<h4 class="text-sm font-semibold">{problem.title}</h4>

						<p class="text-sm">{_.truncate(problem.description, { length: 30 })}</p>

					</div>

					<ModelSelector {types} {models} />

					<TemperatureSelector value={[0.56]} />

					<MaxLengthSelector value={[256]} />

					<TopPSelector value={[0.9]} />

				</div>

				<div class="md:order-1">

					<Tabs.Content value="complete" class="mt-0 border-0 p-0">

						<div class="flex h-full flex-col space-y-4">

							<Textarea

								placeholder="Write a tagline for an ice cream shop"

								class="min-h-[400px] flex-1 p-4 md:min-h-[700px] lg:min-h-[700px]"

							/>

							<div class="flex items-center space-x-2">

								<Button>Submit</Button>

								<Button variant="secondary">

									<span class="sr-only">Show history</span>

									<CounterClockwiseClock class="h-4 w-4" />

								</Button>

							</div>

						</div>

					</Tabs.Content>

					<Tabs.Content value="insert" class="mt-0 border-0 p-0">

						<div class="flex flex-col space-y-4">

							<div

								class="grid h-full grid-rows-2 gap-6 lg:grid-cols-2 lg:grid-rows-1"

							>

								<Textarea

									placeholder="We're writing to [inset]. Congrats from OpenAI!"

									class="h-full min-h-[300px] lg:min-h-[700px] xl:min-h-[700px]"

								/>

								<div class="rounded-md border bg-muted" />

							</div>

							<div class="flex items-center space-x-2">

								<Button>Submit</Button>

								<Button variant="secondary">

									<span class="sr-only">Show history</span>

									<CounterClockwiseClock class="h-4 w-4" />

								</Button>

							</div>

						</div>

					</Tabs.Content>

					<Tabs.Content value="edit" class="mt-0 border-0 p-0">

						<div class="flex flex-col space-y-4">

							<div class="grid h-full gap-6 lg:grid-cols-2">

								<div class="flex flex-col space-y-4">

									<div class="flex flex-1 flex-col space-y-2">

										<Label for="input">Input</Label>

										<Textarea

											id="input"

											placeholder="We is going to the market."

											class="flex-1 lg:min-h-[580px]"

										/>

									</div>

									<div class="flex flex-col space-y-2">

										<Label for="instructions">Instructions</Label>

										<Textarea

											id="instructions"

											placeholder="Fix the grammar."

										/>

									</div>

								</div>

								<div

									class="mt-[21px] min-h-[400px] rounded-md border bg-muted lg:min-h-[700px]"

								/>

				</HoverCard.Content>

			</HoverCard.Root> -->

		</div>

							<div class="flex items-center space-x-2">

								<Button>Submit</Button>

								<Button variant="secondary">

									<span class="sr-only">Show history</span>

									<CounterClockwiseClock class="h-4 w-4" />

								</Button>

		<div>

			<div class="flex items-center">

				<Calendar class="mr-2 h-4 w-4 opacity-70" />{' '}

				<span class="text-sm text-muted-foreground"> Submitted at {assignment.createdAt} </span>

			</div>

		</div>

					</Tabs.Content>

		{#if dev}

			<div>

				{JSON.stringify(data.assignment)}

			</div>

		{/if}

	</div>

</div>
 
	</Tabs.Root>

</div> -->
 
 No newline at end of file

CRA Git | Maintained and supported by SUSTech CRA and CCSE