fb/app.craft.vin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added sites with some example content

Browse Source
This commit is contained in:
Felix Baumgärtner 2024-01-13 23:33:04 +01:00
parent 531c771ce9
commit 6e50ed875e
10 changed files with 169 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/routes/(dashboard)/+layout.svelte Normal file
View File

@ -0,0 +1 @@
<slot />

7
src/routes/(dashboard)/+page.svelte Normal file
View File

@ -0,0 +1,7 @@
<style lang="postcss">
/* :global(html) {
background-color: theme(colors.gray.300);
} */
</style>

12
src/routes/(sites)/+layout.svelte Normal file
View File

@ -0,0 +1,12 @@
<main>
<slot />
</main>
<style lang="postcss">
/* :global(html) {
background-color: theme(colors.gray.300);
} */
main {
@apply p-8;
}
</style>

56
src/routes/(sites)/control/+page.svelte Normal file
View File

@ -0,0 +1,56 @@
<script>
import { browser } from '$app/environment';
</script>
<h1 class="text-6xl font-bold">
Control
</h1>
<div class="relative aspect-square mt-4">
<div id="joystick" style="height: 300px;"></div>
<div class="circle">
<div class="circle-outer"></div>
<div class="circle-middle"></div>
<div class="circle-inner"></div>
</div>
</div>
{#if browser}
<script>
var joystick = nipplejs.create({
zone: document.getElementById('joystick'),
mode: 'static',
position: {left: '50%', top: '50%'},
color: '#1a1a1a',
restOpacity: 0,
size: 200,
});
</script>
{/if}
<style>
.circle > div {
@apply absolute aspect-square;
border-color: theme('colors.gray.300');
border-width: 1.5px;
border-radius: 50%;
}
.circle-outer {
top: 10%;
left: 10%;
height: 80%;
width: 80%;
}
.circle-middle {
top: 22.5%;
left: 22.5%;
height: 55%;
width: 55%;
}
.circle-inner {
top: 35%;
left: 35%;
height: 30%;
width: 30%;
}
</style>

55
src/routes/(sites)/devices/+page.svelte Normal file
View File

@ -0,0 +1,55 @@
<script>
import deviceImage from "./fts_first-render_minified.png";
var online = true;
var devicesList = ["AGV device #1", "AGV device #2", "AGV device #3"];
</script>
<h1 class="text-6xl font-bold">
Devices
</h1>
{#each devicesList as device}
<article class="card mb-6 p-4 relative ring-0 bg-surface-50 bg-opacity-50">
<img class="mb-2 px-4 py-14" src="{deviceImage}" alt="Device preview">
<div class="flex justify-between items-center">
<h2 class="text-2xl">{device}</h2>
<div class="flex gap-2">
<button type="button" class="btn-icon variant-filled-warning">
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512">
<!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.-->
<path d="M36.4 360.9L13.4 439 1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1L73 498.6l78.1-23c12.4-3.6 23.7-9.9 33.4-18.4c1.4-1.2 2.7-2.5 4-3.8L492.7 149.3c21.9-21.9 24.6-55.6 8.2-80.5c-2.3-3.5-5.1-6.9-8.2-10L453.3 19.3c-25-25-65.5-25-90.5 0L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4zm46 13.5c1.7-5.6 4.5-10.8 8.4-15.2c.6-.6 1.1-1.2 1.7-1.8L321 129 383 191 154.6 419.5c-4.7 4.7-10.6 8.2-17 10.1l-23.4 6.9L59.4 452.6l16.1-54.8 6.9-23.4z"/>
</svg>
</button>
<button type="button" class="btn-icon variant-filled-error">
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512">
<!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path d="M170.5 51.6L151.5 80h145l-19-28.4c-1.5-2.2-4-3.6-6.7-3.6H177.1c-2.7 0-5.2 1.3-6.7 3.6zm147-26.6L354.2 80H368h48 8c13.3 0 24 10.7 24 24s-10.7 24-24 24h-8V432c0 44.2-35.8 80-80 80H112c-44.2 0-80-35.8-80-80V128H24c-13.3 0-24-10.7-24-24S10.7 80 24 80h8H80 93.8l36.7-55.1C140.9 9.4 158.4 0 177.1 0h93.7c18.7 0 36.2 9.4 46.6 24.9zM80 128V432c0 17.7 14.3 32 32 32H336c17.7 0 32-14.3 32-32V128H80zm80 64V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16z"/>
</svg>
</button>
</div>
</div>
{#if online}
<div class="badge variant-glass-surface absolute top-4 right-4">
<div class="w-2 h-2 rounded-full bg-success-500"></div>
<span>Online</span>
</div>
{:else}
<div class="badge variant-glass-surface absolute top-4 right-4">
<div class="w-2 h-2 rounded-full bg-error-500"></div>
<span>Offline</span>
</div>
{/if}
</article>
{/each}
<button type="button" class="btn btn-lg variant-filled-primary w-full">
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" class="w-5 h-5" viewBox="0 0 512 512">
<!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.-->
<path d="M16 288c-11.4-19.8-11.4-44.2 0-64L108.3 64.2c11.4-19.8 32.6-32 55.4-32H348.3c22.9 0 44 12.2 55.4 32L496 224c11.4 19.8 11.4 44.2 0 64L403.7 447.8c-11.4 19.8-32.6 32-55.4 32H163.7c-22.9 0-44-12.2-55.4-32L16 288zm27.7-48c-5.7 9.9-5.7 22.1 0 32L136 431.8c5.7 9.9 16.3 16 27.7 16H348.3c11.4 0 22-6.1 27.7-16L468.3 272c5.7-9.9 5.7-22.1 0-32L376 80.2c-5.7-9.9-16.3-16-27.7-16l-184.6 0c-11.4 0-22 6.1-27.7 16L43.7 240zM240 352V272H160c-8.8 0-16-7.2-16-16s7.2-16 16-16h80V160c0-8.8 7.2-16 16-16s16 7.2 16 16v80h80c8.8 0 16 7.2 16 16s-7.2 16-16 16H272v80c0 8.8-7.2 16-16 16s-16-7.2-16-16z"/>
</svg>
<span>Add new device</span>
</button>
<!-- <style lang="postcss">
svg {
@apply fill-gray-950;
}
</style> -->

BIN
src/routes/(sites)/devices/fts_first-render_minified.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

3
src/routes/(sites)/help/+page.svelte Normal file
View File

@ -0,0 +1,3 @@
<h1 class="text-6xl font-bold">
Help
</h1>

15
src/routes/(sites)/settings/+page.svelte Normal file
View File

@ -0,0 +1,15 @@
<h1 class="text-6xl font-bold">
Settings
</h1>
<p>
Onboarding neu starten
</p>
<p>
Dark Mode
</p>
<p>
Language
</p>
<p>
Reset
</p>

22
src/routes/+layout.svelte
View File

@ -1,8 +1,24 @@
<script>
import "../app.css";
import "../app.pcss";
import Map from "../components/Map.svelte";
import Navigation from "../components/Navigation.svelte";
import { page } from '$app/stores';
var mapVisible = false;
$: $page.url.pathname == '/' || $page.url.pathname == '/control' ? mapVisible = true : mapVisible = false;
</script>
<slot />
<div class="pb-28">
<slot></slot>
<Navigation />
<div class="{mapVisible == true ? " block" : "hidden"}">
<Map></Map>
</div>
</div>
<Navigation></Navigation>
<style lang="postcss">
/* :global(html) {
background-color: theme(colors.gray.300);
} */
</style>

9
src/routes/+page.svelte
View File

@ -1,9 +0,0 @@
<h1 class="text-6xl font-bold underline">
Hello world!
</h1>
<style lang="postcss">
:global(html) {
background-color: theme(colors.gray.100);
}
</style>