Merge pull request #47 from hackclub/staging

Staging

Author: ArcaEge

.env.example

@@ -29,4 +29,6 @@ IDV_CLIENT_SECRET=changeme
 
 SENTRY_AUTH_TOKEN=changeme
 
-# AIRTABLE_TOKEN=abcxyz # optional
+# AIRTABLE_TOKEN=abcxyz # optional
+
+PRINTABLES_ALLOWED_LICENSES_ID=7,1,2,9,12,10,11 # License IDs from printables

README.md

@@ -43,6 +43,20 @@ You can also run this to get a GUI for the database:
 npm run db:studio
 ```
 
+### Printables license IDs
+
+Shipping checks licenses by ID. Grab the IDs directly from the Printables GraphQL API:
+
+```json
+{
+	"operationName": "Licenses",
+	"query": "query Licenses {\n  licenses {\n    id\n    name\n    abbreviation\n    content\n    disallowRemixing\n    freeModels\n    storeModels\n    allowedLicensesAfterRemixing {\n      id\n      __typename\n    }\n    __typename\n  }\n}",
+	"variables": {}
+}
+```
+
+Use the returned `id` values in `PRINTABLES_ALLOWED_LICENSES_ID` (comma-separated) in your `.env`.
+
 ## Deploying
 
 Create a `.env` file containing all the required credentials, look at `.env.example` for an example. If you pass in Airtable tokens, the app must be marked as `hq_official` on idv.

src/lib/components/Spinny3DPreview.svelte

@@ -20,6 +20,10 @@
 	let controls: OrbitControls | null = null;
 	let camera: THREE.PerspectiveCamera | null = null;
 	let animationId: number | null = null;
+	let isVisible: boolean = false;
+	let isModelLoaded: boolean = false;
+	let containerElement: HTMLDivElement | null = null;
+	let observer: IntersectionObserver | null = null;
 
 	function loadModel() {
 		if (!modelUrl) {
@@ -56,7 +60,7 @@
 		controls.rotateSpeed = 0.5;
 		controls.dampingFactor = 0.1;
 		controls.enableDamping = true;
-		controls.autoRotate = true;
+		controls.autoRotate = false;
 		controls.autoRotateSpeed = 4;
 		controls.update();
 
@@ -286,15 +290,93 @@
 		);
 
 		const animate = function () {
+			if (!isVisible) {
+				animationId = null;
+				return;
+			}
+
 			animationId = requestAnimationFrame(animate);
-			controls?.update();
+
+			if (controls && isVisible) {
+				controls.autoRotate = true;
+				controls.update();
+			}
+
 			renderer?.render(scene, camera!);
 			resizeCanvasToDisplaySize();
 		};
-		animate();
+
+		isModelLoaded = true;
+		if (isVisible) {
+			animate();
+		}
+	}
+
+	function startAnimation() {
+		if (animationId === null && isModelLoaded && isVisible && renderer && controls && camera) {
+			const animate = function () {
+				if (!isVisible) {
+					animationId = null;
+					return;
+				}
+
+				animationId = requestAnimationFrame(animate);
+
+				if (controls && isVisible) {
+					controls.autoRotate = true;
+					controls.update();
+				}
+
+				renderer?.render(scene, camera!);
+
+				const canvas = renderer?.domElement;
+				const width = canvas?.clientWidth;
+				const height = canvas?.clientHeight;
+				if (canvas?.width !== width || canvas?.height !== height) {
+					renderer?.setSize(width ?? 0, height ?? 0, false);
+					renderer?.setPixelRatio(window.devicePixelRatio);
+					if (camera) camera.aspect = (width ?? 1) / (height ?? 1);
+					camera?.updateProjectionMatrix();
+				}
+			};
+			animate();
+		}
+	}
+
+	function stopAnimation() {
+		if (animationId !== null) {
+			cancelAnimationFrame(animationId);
+			animationId = null;
+		}
+		if (controls) {
+			controls.autoRotate = false;
+		}
 	}
 
 	onMount(() => {
+		observer = new IntersectionObserver(
+			(entries) => {
+				entries.forEach((entry) => {
+					const wasVisible = isVisible;
+					isVisible = entry.isIntersecting;
+
+					if (isVisible && !wasVisible && isModelLoaded) {
+						startAnimation();
+					} else if (!isVisible && wasVisible) {
+						stopAnimation();
+					}
+				});
+			},
+			{
+				threshold: 0.01,
+				rootMargin: '50px'
+			}
+		);
+
+		if (containerElement) {
+			observer.observe(containerElement);
+		}
+
 		fileSizeFromUrl(modelUrl).then((size) => {
 			fileSize = size;
 
@@ -307,8 +389,11 @@
 	});
 
 	onDestroy(() => {
-		if (animationId !== null) {
-			cancelAnimationFrame(animationId);
+		stopAnimation();
+
+		if (observer) {
+			observer.disconnect();
+			observer = null;
 		}
 
 		controls?.dispose();
@@ -335,10 +420,11 @@
 		renderer = null;
 		controls = null;
 		camera = null;
+		containerElement = null;
 	});
 </script>
 
-<div class="relative h-full w-full">
+<div class="relative h-full w-full" bind:this={containerElement}>
 	{#if loadedPercent < 100}
 		<div class="center flex">
 			{#if showLoadButton}

src/routes/dashboard/admin/admin/stats/+page.server.ts

@@ -17,12 +17,12 @@ export async function load({ locals }) {
 			total: {
 				clay: sql<number>`sum(${user.clay})`,
 				brick: sql<number>`sum(${user.brick})`,
-				shopScore: sql<number>`sum(${user.shopScore})`,
+				shopScore: sql<number>`sum(${user.shopScore})`
 			},
 			average: {
 				clay: sql<number>`avg(${user.clay})`,
 				brick: sql<number>`avg(${user.brick})`,
-				shopScore: sql<number>`avg(${user.shopScore})`,
+				shopScore: sql<number>`avg(${user.shopScore})`
 			}
 		})
 		.from(user);
@@ -50,13 +50,6 @@ export async function load({ locals }) {
 		.from(project)
 		.where(eq(project.deleted, false));
 
-	const [shippedProjectCount] = await db
-		.select({
-			count: count()
-		})
-		.from(project)
-		.where(and(eq(project.deleted, false), ne(project.status, 'building')));
-
 	const [devlogs] = await db
 		.select({
 			count: count(),
@@ -66,11 +59,31 @@ export async function load({ locals }) {
 		.from(devlog)
 		.where(eq(devlog.deleted, false));
 
+	const shippedProjects = db
+		.select({
+			id: project.id,
+			timeSpent: sql<number>`COALESCE(SUM(${devlog.timeSpent}), 0)`.as('time_spent'),
+			devlogCount: sql<number>`COALESCE(COUNT(${devlog.id}), 0)`.as('devlog_count')
+		})
+		.from(project)
+		.leftJoin(devlog, and(eq(project.id, devlog.projectId), eq(devlog.deleted, false)))
+		.where(and(eq(project.deleted, false), ne(project.status, 'building')))
+		.groupBy(project.id)
+		.as('shippedProjects');
+
+	const [shippedStats] = await db.select({
+		count: count(),
+		totalTimeSpent: sql<number>`sum(${shippedProjects.timeSpent})`,
+		averageTimeSpent: sql<number>`avg(${shippedProjects.timeSpent})`,
+		totalDevlogs: sql<number>`sum(${shippedProjects.devlogCount})`,
+		averageDevlogs: sql<number>`avg(${shippedProjects.devlogCount})`,
+	}).from(shippedProjects);
+
 	return {
 		users: users,
 		project: projectCount,
 		usersWithProjects,
-		shippedProjectCount: shippedProjectCount.count,
+		shippedStats,
 		devlogs
 	};
 }

src/routes/dashboard/admin/admin/stats/+page.svelte

@@ -42,7 +42,13 @@
 					<code>{data.devlogs.count}</code>
 				</DataCard>
 				<DataCard title="Shipped projects">
-					<code>{data.shippedProjectCount}</code>
+					<code>{data.shippedStats.count}</code>
+				</DataCard>
+				<DataCard title="Shipped devlogs">
+					<code>{data.shippedStats.totalDevlogs}</code>
+				</DataCard>
+				<DataCard title="Devlogs per project">
+					<code>{Math.round(data.shippedStats.averageDevlogs * 100) / 100}</code>
 				</DataCard>
 			</div>
 			<h3 class="mt-1 text-xl font-semibold">By status</h3>
@@ -84,6 +90,12 @@
 				<DataCard title="Total">
 					{formatMinutes(data.devlogs.totalTime)}
 				</DataCard>
+				<DataCard title="Total (shipped)">
+					{formatMinutes(data.shippedStats.totalTimeSpent)}
+				</DataCard>
+				<DataCard title="Average shipped time">
+					{formatMinutes(data.shippedStats.averageTimeSpent)}
+				</DataCard>
 				<DataCard title="Average devlog time">
 					{formatMinutes(data.devlogs.timePerDevlog)}
 				</DataCard>

src/routes/dashboard/projects/[id]/ship/+page.server.ts

@@ -91,6 +91,67 @@ export const actions = {
 			});
 		}
 
+		const printablesUrlObj = new URL(printablesUrl.toString().trim());
+
+		const pathMatch = printablesUrlObj.pathname.match(/\/model\/(\d+)/);
+		const modelId = pathMatch ? pathMatch[1] : '';
+
+		const allowedLicenseIds = (env.PRINTABLES_ALLOWED_LICENSES_ID ?? '7,1,2,9,12,10,11')
+			.split(',')
+			.map((s) => s.trim())
+			.filter((s) => s.length > 0);
+		if (allowedLicenseIds.length === 0) {
+			return error(500, { message: 'license validation not configured' });
+		}
+
+		try {
+			const graphqlResponse = await fetch('https://api.printables.com/graphql/', {
+				method: 'POST',
+				headers: {
+					'content-type': 'application/json'
+				},
+				body: JSON.stringify({
+					operationName: 'PrintDetail',
+					query: `query PrintDetail($id: ID!) {
+						print(id: $id) {
+							id
+							name
+							license {
+								id
+								name
+							}
+						}
+					}`,
+					variables: { id: modelId }
+				})
+			});
+			if (!graphqlResponse.ok) {
+				return fail(400, {
+					invalid_printables_url: true
+				});
+			}
+			const graphqlData = await graphqlResponse.json();
+			const license = graphqlData?.data?.print?.license;
+
+			if (!license || !license.id) {
+				return fail(400, {
+					invalid_printables_url: true
+				});
+			}
+
+			const licenseMatch = allowedLicenseIds.some((allowed) => allowed === license.id.toString());
+
+			if (!licenseMatch) {
+				return fail(400, {
+					invalid_license: true
+				});
+			}
+		} catch {
+			return fail(400, {
+				invalid_printables_url: true
+			});
+		}
+
 		// Editor URL
 		const editorUrlExists = editorUrl && editorUrl.toString();
 		const editorUrlValid =
@@ -134,7 +195,7 @@ export const actions = {
 				'application/octet-stream',
 				'text/plain'
 			].includes(modelFile.type);
-		
+
 		if (!modelFileValid) {
 			return fail(400, {
 				invalid_model_file: true

src/routes/dashboard/projects/[id]/ship/+page.svelte

@@ -62,12 +62,16 @@
 				name="printables_url"
 				placeholder="https://www.printables.com/model/244385-flying-orpheus"
 				bind:value={printablesUrl}
-				class="themed-input-on-box active:ring-3"
+				class={`themed-input-on-box ${form?.invalid_printables_url || form?.invalid_license ? 'border-primary-500' : ''}`}
 			/>
 		</label>
-		{#if form?.invalid_printables_url}
-			<p class="text-sm">Invalid URL</p>
-		{/if}
+		<div class="mt-1 text-primary-500">
+			{#if form?.invalid_printables_url}
+				<p class="text-sm">Invalid Printables URL</p>
+			{:else if form?.invalid_license}
+				<p class="text-sm">License not allowed, see below! You don't want Orpheus chasing you, do you?</p>
+			{/if}
+		</div>
 	</div>
 
 	<div class="mt-2">
@@ -81,11 +85,11 @@
 						name="editor_url"
 						placeholder="https://cad.onshape.com/documents/14f82e23135e1e8bfe2305e0/w/28766465f00bd1d2079ae445/e/1d112b7ff9c457c1556814fd"
 						bind:value={editorUrl}
-						class="themed-input-on-box active:ring-3"
+						class="themed-input-on-box"
 					/>
 				</label>
 				{#if form?.invalid_editor_url}
-					<p class="text-sm">Invalid URL</p>
+					<p class="mt-1 text-sm">Invalid URL</p>
 				{/if}
 			</div>
 
@@ -110,7 +114,7 @@
 						>
 					</div>
 				</div>
-				<div class="mt-0.5">
+				<div class="mt-1">
 					{#if form?.invalid_editor_file}
 						<p class="text-sm">
 							Invalid file, must be under {MAX_UPLOAD_SIZE / 1024 / 1024} MiB. Provide a link instead!