adam
/
bodytrack
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

yay got stuff working

webclient
Adam Veldhousen 2021-04-22 01:35:01 -05:00
parent 72f31aff63
commit 1660c8ec32
Signed by: adam
GPG Key ID: 6DB29003C6DD1E4B
7 changed files with 1753 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1714
webclient/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

9
webclient/src/App.svelte
View File

@ -1,6 +1,7 @@
<script> <script>
import { initClient, query, operationStore } from '@urql/svelte'; import { initClient, query, operationStore } from '@urql/svelte';
import ExerciseCard from './components/ExerciseCard.svelte'; import ExerciseCard from './components/ExerciseCard.svelte';
import Button from './components/Button.svelte';
initClient({ initClient({
url: 'http://localhost:8080/v1/graphql', url: 'http://localhost:8080/v1/graphql',
@ -14,11 +15,15 @@
muscletarget muscletarget
tutoriallink tutoriallink
} }
}`); }`, {}, {requestPolicy: 'cache-first'});
query(exdata); query(exdata);
</script> </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} {#if $exdata.fetching}
<p>Loading...</p> <p>Loading...</p>
{:else if $exdata.error} {:else if $exdata.error}

15
webclient/src/components/Button.svelte Normal file
View File

@ -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>

24
webclient/src/components/ExerciseCard.svelte
View File

@ -1,15 +1,17 @@
<script> <script>
export let exercise; export let exercise;
console.log(exercise);
</script>
<a href="{exercise.tutoriallink}" target="_blank"> let instructions = exercise.instructions.replaceAll('\\n', '<br>');
<article> console.log(instructions);
<header>{exercise.name}</header> </script>
<section> <article id="{exercise.name}" class="bg-gray-100 rounded-l p-8 animate-">
<p>target: <span>{exercise.muscletarget}</span></p> <header class="text-lg my-1">
<p>{exercise.instructions}</p> <a class="underline hover:text-gray-600 visited:text-gray-700" href="{exercise.tutoriallink}" target="_blank">
</section> <h2>{exercise.name}</h2>
<!-- svelte-ignore a11y-media-has-caption -->
</article>
</a> </a>
</header>
<section class="text-sm">
<p>Targets: <span class="bold">{exercise.muscletarget}</span></p>
<p class="pt-2">{@html instructions}</p>
</section>
</article>

2
webclient/src/components/Nav.svelte Normal file
View File

@ -0,0 +1,2 @@
<nav>
</nav>

1
webclient/src/global.pcss
View File

@ -1,3 +1,4 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;

2
webclient/src/index.html
View File

@ -8,7 +8,7 @@
<link rel="stylesheet" href="./global.pcss" /> <link rel="stylesheet" href="./global.pcss" />
</head> </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> <script defer src="./main.js"></script>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
</body> </body>