yay got stuff working

3 years ago · 1660c8ec32
parent 72f31aff63
commit 1660c8ec32
7 changed files with 1753 additions and 14 deletions
--- a/webclient/package-lock.json
+++ b/webclient/package-lock.json
--- a/webclient/src/App.svelte
+++ b/webclient/src/App.svelte
@ -1,6 +1,7 @@
 <script>
  import { initClient, query, operationStore } from '@urql/svelte';
  import ExerciseCard from './components/ExerciseCard.svelte';
+  import Button from './components/Button.svelte';

  initClient({
    url: 'http://localhost:8080/v1/graphql',
@ -14,11 +15,15 @@
      muscletarget
      tutoriallink
    }
-  }`);
+  }`, {}, {requestPolicy: 'cache-first'});
+
  query(exdata);
+
 </script>

-<div class="font-inter flex flex-grow h-screen justify-center items-center">
+<div class="flex flex-col font-inter flex flex-grow justify-center items-center">
+  <h1 class="text-xl bold">Cool asf</h1>
+  <Button on:button-click={load}>Click me</Button>
  {#if $exdata.fetching}
    <p>Loading...</p>
  {:else if $exdata.error}
--- a/webclient/src/components/Button.svelte
+++ b/webclient/src/components/Button.svelte
@ -0,0 +1,15 @@
+<script>
+    import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+
+	function onClick(event) {
+		dispatch('button-click', event.detail);
+	}
+
+</script>
+
+
+<button class="bg-gray-800 py-2 px-4 rounded-md text-gray-200 hover:bg-gray-700" on:click={onClick}>
+    <slot/>
+</button>
--- a/webclient/src/components/ExerciseCard.svelte
+++ b/webclient/src/components/ExerciseCard.svelte
@ -1,15 +1,17 @@
 <script>
-  export let exercise;
-  console.log(exercise);
-</script>
+    export let exercise;

-<a href="{exercise.tutoriallink}" target="_blank">
-  <article>
-    <header>{exercise.name}</header>
-    <section>
-      <p>target: <span>{exercise.muscletarget}</span></p>
-      <p>{exercise.instructions}</p>
+    let instructions = exercise.instructions.replaceAll('\\n', '<br>');
+    console.log(instructions);
+</script>
+<article id="{exercise.name}" class="bg-gray-100 rounded-l p-8 animate-">
+    <header class="text-lg my-1">
+      <a class="underline hover:text-gray-600 visited:text-gray-700" href="{exercise.tutoriallink}" target="_blank">
+          <h2>{exercise.name}</h2>
+      </a>
+    </header>
+    <section class="text-sm">
+      <p>Targets: <span class="bold">{exercise.muscletarget}</span></p>
+      <p class="pt-2">{@html instructions}</p>
    </section>
-    <!-- svelte-ignore a11y-media-has-caption -->
  </article>
-</a>
--- a/webclient/src/components/Nav.svelte
+++ b/webclient/src/components/Nav.svelte
@ -0,0 +1,2 @@
+<nav>
+</nav>
--- a/webclient/src/global.pcss
+++ b/webclient/src/global.pcss
@ -1,3 +1,4 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+
--- a/webclient/src/index.html
+++ b/webclient/src/index.html
@ -8,7 +8,7 @@
    <link rel="stylesheet" href="./global.pcss" />
  </head>

-  <body class="font-inter bg-white antialiased text-gray-800">
+  <body class="font-inter bg-white antialiased text-gray-800 h-full">
    <script defer src="./main.js"></script>
    <noscript>You need to enable JavaScript to run this app.</noscript>
  </body>