ran prettier
This commit is contained in:
parent
e7eeccd09e
commit
5f11126acd
|
|
@ -1,44 +1,53 @@
|
|||
<script lang="ts">
|
||||
let { replace_slot, accept, file, notExpand } = $props<{
|
||||
replace_slot?: boolean,
|
||||
accept?: string,
|
||||
file?: File,
|
||||
notExpand?: boolean
|
||||
}>();
|
||||
let { replace_slot, accept, file, notExpand } = $props<{
|
||||
replace_slot?: boolean;
|
||||
accept?: string;
|
||||
file?: File;
|
||||
notExpand?: boolean;
|
||||
}>();
|
||||
|
||||
let fileInput: HTMLInputElement;
|
||||
let fileInput: HTMLInputElement;
|
||||
|
||||
let fileData: string | undefined = $state(undefined);
|
||||
let fileData: string | undefined = $state(undefined);
|
||||
|
||||
function onChange(e: Event & {currentTarget: HTMLInputElement}) {
|
||||
if (!e.currentTarget.files) {
|
||||
return;
|
||||
}
|
||||
function onChange(e: Event & { currentTarget: HTMLInputElement }) {
|
||||
if (!e.currentTarget.files) {
|
||||
return;
|
||||
}
|
||||
|
||||
file = e.currentTarget.files[0];
|
||||
|
||||
const fileReader = new FileReader();
|
||||
fileReader.onloadend = () => {
|
||||
fileData = String(fileReader.result);
|
||||
//elm.classList.add("adapt");
|
||||
}
|
||||
fileReader.readAsDataURL(file)
|
||||
}
|
||||
file = e.currentTarget.files[0];
|
||||
|
||||
const fileReader = new FileReader();
|
||||
fileReader.onloadend = () => {
|
||||
fileData = String(fileReader.result);
|
||||
//elm.classList.add("adapt");
|
||||
};
|
||||
fileReader.readAsDataURL(file);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="icon-holder">
|
||||
<button class="icon" class:adapt={replace_slot && file && !notExpand} on:click={() => fileInput.click()}>
|
||||
{#if replace_slot && file}
|
||||
<slot name="replaced" file={file}>
|
||||
<img src={fileData} alt="" />
|
||||
<slot name="replaced-name">
|
||||
Image Uploaded
|
||||
</slot>
|
||||
</slot>
|
||||
{:else}
|
||||
<slot></slot>
|
||||
{/if}
|
||||
</button>
|
||||
<input id="file" name="file" type="file" required accept={accept} bind:this={fileInput} on:change={onChange} />
|
||||
<button
|
||||
class="icon"
|
||||
class:adapt={replace_slot && file && !notExpand}
|
||||
on:click={() => fileInput.click()}
|
||||
>
|
||||
{#if replace_slot && file}
|
||||
<slot name="replaced" {file}>
|
||||
<img src={fileData} alt="" />
|
||||
<slot name="replaced-name">Image Uploaded</slot>
|
||||
</slot>
|
||||
{:else}
|
||||
<slot />
|
||||
{/if}
|
||||
</button>
|
||||
<input
|
||||
id="file"
|
||||
name="file"
|
||||
type="file"
|
||||
required
|
||||
{accept}
|
||||
bind:this={fileInput}
|
||||
on:change={onChange}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -14,10 +14,10 @@
|
|||
|
||||
let timeout: number | undefined = undefined;
|
||||
|
||||
export function clear() {
|
||||
if (timeout) clearTimeout(timeout);
|
||||
message = undefined;
|
||||
}
|
||||
export function clear() {
|
||||
if (timeout) clearTimeout(timeout);
|
||||
message = undefined;
|
||||
}
|
||||
|
||||
export function display(
|
||||
msg: string,
|
||||
|
|
|
|||
|
|
@ -1,73 +1,71 @@
|
|||
<script lang="ts">
|
||||
let {active, nobox} = $props<{active?: string, nobox?: boolean}>();
|
||||
|
||||
function setActive(name: string) {
|
||||
return () => active = name;
|
||||
}
|
||||
let { active, nobox } = $props<{ active?: string; nobox?: boolean }>();
|
||||
|
||||
function isActive(name: string) {
|
||||
return name == active;
|
||||
}
|
||||
function setActive(name: string) {
|
||||
return () => (active = name);
|
||||
}
|
||||
|
||||
function isActive(name: string) {
|
||||
return name == active;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="tabs" class:nobox>
|
||||
<div class="tab-buttons">
|
||||
<slot name="buttons" {setActive} {isActive} />
|
||||
</div>
|
||||
<slot {isActive} {active} />
|
||||
<div class="tab-buttons">
|
||||
<slot name="buttons" {setActive} {isActive} />
|
||||
</div>
|
||||
<slot {isActive} {active} />
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.tabs {
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
box-shadow: 0 2px 8px 1px #66666655;
|
||||
gap: 0 5px;
|
||||
.tabs {
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
box-shadow: 0 2px 8px 1px #66666655;
|
||||
gap: 0 5px;
|
||||
|
||||
.tab-buttons {
|
||||
display: flex;
|
||||
overflow-x: scroll;
|
||||
width: 100%;
|
||||
.tab-buttons {
|
||||
display: flex;
|
||||
overflow-x: scroll;
|
||||
width: 100%;
|
||||
|
||||
:global(.buttons) {
|
||||
width: 100%;
|
||||
}
|
||||
:global(.buttons) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:global(.tab) {
|
||||
padding: 5px;
|
||||
background: var(--light-grey);
|
||||
border-radius: 5px 5px 0 0;
|
||||
box-shadow: none;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
:global(.tab) {
|
||||
padding: 5px;
|
||||
background: var(--light-grey);
|
||||
border-radius: 5px 5px 0 0;
|
||||
box-shadow: none;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
:global(.tab.selected) {
|
||||
box-shadow: inset 0 2px 8px 1px #66666655;
|
||||
}
|
||||
}
|
||||
:global(.tab.selected) {
|
||||
box-shadow: inset 0 2px 8px 1px #66666655;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.content) {
|
||||
display: none;
|
||||
padding: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
:global(.content) {
|
||||
display: none;
|
||||
padding: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:global(.content.selected) {
|
||||
display: block;
|
||||
box-shadow: 0 2px 2px 1px #66666655;
|
||||
}
|
||||
:global(.content.selected) {
|
||||
display: block;
|
||||
box-shadow: 0 2px 2px 1px #66666655;
|
||||
}
|
||||
|
||||
&.nobox {
|
||||
box-shadow: none;
|
||||
overflow: visible;
|
||||
&.nobox {
|
||||
box-shadow: none;
|
||||
overflow: visible;
|
||||
|
||||
|
||||
:global(.content.selected) {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
:global(.content.selected) {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import { page } from '$app/stores';
|
||||
import Page404 from './Page404.svelte';
|
||||
</script>
|
||||
|
||||
{#if $page.error}
|
||||
{#if $page.status == 404}
|
||||
<Page404 />
|
||||
{:else}
|
||||
<h1>
|
||||
{$page.status}
|
||||
</h1>
|
||||
<h2>
|
||||
{$page.error.message}
|
||||
</h2>
|
||||
{/if}
|
||||
{#if $page.status == 404}
|
||||
<Page404 />
|
||||
{:else}
|
||||
<h1>
|
||||
{$page.status}
|
||||
</h1>
|
||||
<h2>
|
||||
{$page.error.message}
|
||||
</h2>
|
||||
{/if}
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script lang="ts">
|
||||
import '../styles/fonts.css';
|
||||
import '../styles/app.css';
|
||||
import NavBar from "../NavBar.svelte";
|
||||
import NavBar from '../NavBar.svelte';
|
||||
</script>
|
||||
|
||||
<NavBar />
|
||||
|
|
|
|||
|
|
@ -1,54 +1,46 @@
|
|||
<script lang="ts">
|
||||
let { message, goBackLink } = $props<{message?: string, goBackLink?: string}>();
|
||||
let { message, goBackLink } = $props<{ message?: string; goBackLink?: string }>();
|
||||
</script>
|
||||
|
||||
<div class="page404">
|
||||
<div>
|
||||
<h1>
|
||||
404
|
||||
</h1>
|
||||
{#if message}
|
||||
<h2>
|
||||
{message}
|
||||
</h2>
|
||||
{#if goBackLink}
|
||||
<div class="description">
|
||||
<a href={goBackLink}>
|
||||
👈 Go back
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
{:else}
|
||||
<h2>
|
||||
Page Not found
|
||||
</h2>
|
||||
<div class="description">
|
||||
The page you were looking for does not exist
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div>
|
||||
<h1>404</h1>
|
||||
{#if message}
|
||||
<h2>
|
||||
{message}
|
||||
</h2>
|
||||
{#if goBackLink}
|
||||
<div class="description">
|
||||
<a href={goBackLink}> 👈 Go back </a>
|
||||
</div>
|
||||
{/if}
|
||||
{:else}
|
||||
<h2>Page Not found</h2>
|
||||
<div class="description">The page you were looking for does not exist</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.page404 {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
height: calc(100vh - 60px);
|
||||
text-align: center;
|
||||
.page404 {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
height: calc(100vh - 60px);
|
||||
text-align: center;
|
||||
|
||||
h1 {
|
||||
font-size: 10em;
|
||||
margin: 0;
|
||||
}
|
||||
h1 {
|
||||
font-size: 10em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 5em;
|
||||
margin: 0;
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
h2 {
|
||||
font-size: 5em;
|
||||
margin: 0;
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
|
||||
div.description {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
div.description {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,55 +1,55 @@
|
|||
import { goto } from "$app/navigation";
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
type User = {
|
||||
token: string,
|
||||
id: string,
|
||||
user_type: number,
|
||||
username: string,
|
||||
email: string,
|
||||
token: string;
|
||||
id: string;
|
||||
user_type: number;
|
||||
username: string;
|
||||
email: string;
|
||||
};
|
||||
|
||||
export function createUserStore() {
|
||||
let user = $state<User | undefined>(undefined);
|
||||
let user = $state<User | undefined>(undefined);
|
||||
|
||||
function getValue() {
|
||||
if (user == undefined) {
|
||||
let storage = localStorage.getItem('user');
|
||||
if (storage) {
|
||||
try {
|
||||
user = JSON.parse(storage);
|
||||
} catch {
|
||||
user = undefined;
|
||||
}
|
||||
}
|
||||
}
|
||||
return user;
|
||||
}
|
||||
function getValue() {
|
||||
if (user == undefined) {
|
||||
let storage = localStorage.getItem('user');
|
||||
if (storage) {
|
||||
try {
|
||||
user = JSON.parse(storage);
|
||||
} catch {
|
||||
user = undefined;
|
||||
}
|
||||
}
|
||||
}
|
||||
return user;
|
||||
}
|
||||
|
||||
return {
|
||||
get user() {
|
||||
return getValue();
|
||||
},
|
||||
set user(value: User | undefined) {
|
||||
if (value) {
|
||||
localStorage.setItem('user', JSON.stringify(value));
|
||||
} else {
|
||||
localStorage.removeItem('user');
|
||||
}
|
||||
user = value;
|
||||
},
|
||||
checkUser(pathOnFail: string, level?: number) {
|
||||
if (user && user.level > (level ?? 2) ) {
|
||||
goto(pathOnFail);
|
||||
return true;
|
||||
}
|
||||
return {
|
||||
get user() {
|
||||
return getValue();
|
||||
},
|
||||
set user(value: User | undefined) {
|
||||
if (value) {
|
||||
localStorage.setItem('user', JSON.stringify(value));
|
||||
} else {
|
||||
localStorage.removeItem('user');
|
||||
}
|
||||
user = value;
|
||||
},
|
||||
checkUser(pathOnFail: string, level?: number) {
|
||||
if (user && user.level > (level ?? 2)) {
|
||||
goto(pathOnFail);
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
isLogin() {
|
||||
if (getValue()) return true;
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
isLogin() {
|
||||
if (getValue()) return true;
|
||||
return false;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export const userStore = createUserStore();
|
||||
|
|
|
|||
|
|
@ -1,83 +1,77 @@
|
|||
<script lang="ts">
|
||||
import { post } from 'src/lib/requests.svelte';
|
||||
import 'src/styles/forms.css';
|
||||
import 'src/styles/forms.css';
|
||||
import { userStore } from '../UserStore.svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
let submitted = $state(false);
|
||||
|
||||
let loginData = $state({
|
||||
email: '',
|
||||
password: '',
|
||||
});
|
||||
let submitted = $state(false);
|
||||
|
||||
let errorMessage = $state("");
|
||||
let loginData = $state({
|
||||
email: '',
|
||||
password: ''
|
||||
});
|
||||
|
||||
async function onSubmit() {
|
||||
submitted = true;
|
||||
errorMessage = "";
|
||||
|
||||
try {
|
||||
const req = await post('login', loginData);
|
||||
userStore.user = req;
|
||||
goto("/");
|
||||
} catch (e) {
|
||||
loginData.password = "";
|
||||
if (e instanceof Response) {
|
||||
errorMessage = await e.json();
|
||||
} else {
|
||||
errorMessage = "Server could not perform login";
|
||||
}
|
||||
}
|
||||
}
|
||||
let errorMessage = $state('');
|
||||
|
||||
async function onSubmit() {
|
||||
submitted = true;
|
||||
errorMessage = '';
|
||||
|
||||
try {
|
||||
const req = await post('login', loginData);
|
||||
userStore.user = req;
|
||||
goto('/');
|
||||
} catch (e) {
|
||||
loginData.password = '';
|
||||
if (e instanceof Response) {
|
||||
errorMessage = await e.json();
|
||||
} else {
|
||||
errorMessage = 'Server could not perform login';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title> Login </title>
|
||||
<title>Login</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="login-page">
|
||||
<div>
|
||||
<h1>
|
||||
Login
|
||||
</h1>
|
||||
<form on:submit|preventDefault={onSubmit} class:submitted >
|
||||
<fieldset>
|
||||
<label for="email">Email</label>
|
||||
<input type="email" required name="email" bind:value={loginData.email} />
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label for="password">Password</label>
|
||||
<input required name="password" type="password" bind:value={loginData.password} />
|
||||
{#if errorMessage}
|
||||
<span class="form-msg error">
|
||||
{errorMessage}
|
||||
<!--Either the password or the email are incorrect-->
|
||||
</span>
|
||||
{/if}
|
||||
</fieldset>
|
||||
<button>
|
||||
Login
|
||||
</button>
|
||||
<div class="spacer"></div>
|
||||
<a class="simple-link text-center w100 spacer" href="/register">
|
||||
Register
|
||||
</a>
|
||||
</form>
|
||||
</div>
|
||||
<div>
|
||||
<h1>Login</h1>
|
||||
<form on:submit|preventDefault={onSubmit} class:submitted>
|
||||
<fieldset>
|
||||
<label for="email">Email</label>
|
||||
<input type="email" required name="email" bind:value={loginData.email} />
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label for="password">Password</label>
|
||||
<input required name="password" type="password" bind:value={loginData.password} />
|
||||
{#if errorMessage}
|
||||
<span class="form-msg error">
|
||||
{errorMessage}
|
||||
<!--Either the password or the email are incorrect-->
|
||||
</span>
|
||||
{/if}
|
||||
</fieldset>
|
||||
<button> Login </button>
|
||||
<div class="spacer"></div>
|
||||
<a class="simple-link text-center w100 spacer" href="/register"> Register </a>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
/* Login Page */
|
||||
.login-page {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
margin-bottom: 40px;
|
||||
& > div {
|
||||
width: 40vw;
|
||||
}
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
/* Login Page */
|
||||
.login-page {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
margin-bottom: 40px;
|
||||
& > div {
|
||||
width: 40vw;
|
||||
}
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import { userStore } from "../UserStore.svelte";
|
||||
import { goto } from "$app/navigation";
|
||||
import { onMount } from 'svelte';
|
||||
import { userStore } from '../UserStore.svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
onMount(() => {
|
||||
userStore.user = undefined;
|
||||
goto('/');
|
||||
});
|
||||
onMount(() => {
|
||||
userStore.user = undefined;
|
||||
goto('/');
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,105 +1,94 @@
|
|||
<script lang="ts">
|
||||
import MessageSimple from "src/lib/MessageSimple.svelte";
|
||||
import { onMount } from "svelte";
|
||||
import { get } from '$lib/requests.svelte'
|
||||
import MessageSimple from 'src/lib/MessageSimple.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import { get } from '$lib/requests.svelte';
|
||||
|
||||
let list = $state<{
|
||||
name: string,
|
||||
id: string,
|
||||
}[]>([]);
|
||||
let list = $state<
|
||||
{
|
||||
name: string;
|
||||
id: string;
|
||||
}[]
|
||||
>([]);
|
||||
|
||||
let message: MessageSimple;
|
||||
let message: MessageSimple;
|
||||
|
||||
onMount(async () => {
|
||||
try {
|
||||
list = await get("models");
|
||||
} catch (e) {
|
||||
if (e instanceof Response) {
|
||||
message.display(await e.json())
|
||||
} else {
|
||||
message.display("Could not request list of models");
|
||||
}
|
||||
}
|
||||
});
|
||||
onMount(async () => {
|
||||
try {
|
||||
list = await get('models');
|
||||
} catch (e) {
|
||||
if (e instanceof Response) {
|
||||
message.display(await e.json());
|
||||
} else {
|
||||
message.display('Could not request list of models');
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>
|
||||
Models
|
||||
</title>
|
||||
<title>Models</title>
|
||||
</svelte:head>
|
||||
|
||||
<main>
|
||||
<MessageSimple bind:this={message} />
|
||||
{#if list.length > 0}
|
||||
<div class="list-header">
|
||||
<h2>My Models</h2>
|
||||
<div class="expand"></div>
|
||||
<a class="button" href="/models/add">
|
||||
New
|
||||
</a>
|
||||
</div>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Name
|
||||
</th>
|
||||
<th>
|
||||
<!-- Open Button -->
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each list as item}
|
||||
<tr>
|
||||
<td>
|
||||
{item.name}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<a class="button simple" href="/models/edit?id={item.id}">
|
||||
Edit
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{:else}
|
||||
<h2 class="text-center">
|
||||
You don't have any models
|
||||
</h2>
|
||||
<div class="text-center">
|
||||
<a class="button padded" href="/models/add">
|
||||
Create a new model
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
<MessageSimple bind:this={message} />
|
||||
{#if list.length > 0}
|
||||
<div class="list-header">
|
||||
<h2>My Models</h2>
|
||||
<div class="expand"></div>
|
||||
<a class="button" href="/models/add"> New </a>
|
||||
</div>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th> Name </th>
|
||||
<th>
|
||||
<!-- Open Button -->
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each list as item}
|
||||
<tr>
|
||||
<td>
|
||||
{item.name}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<a class="button simple" href="/models/edit?id={item.id}"> Edit </a>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{:else}
|
||||
<h2 class="text-center">You don't have any models</h2>
|
||||
<div class="text-center">
|
||||
<a class="button padded" href="/models/add"> Create a new model </a>
|
||||
</div>
|
||||
{/if}
|
||||
</main>
|
||||
|
||||
<style lang="scss">
|
||||
main {
|
||||
padding: 20px 15vw;
|
||||
}
|
||||
.list-header {
|
||||
display: flex;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
main {
|
||||
padding: 20px 15vw;
|
||||
}
|
||||
.list-header {
|
||||
display: flex;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.list-header h2 {
|
||||
margin: 0;
|
||||
padding: 10px 5px;
|
||||
}
|
||||
.list-header h2 {
|
||||
margin: 0;
|
||||
padding: 10px 5px;
|
||||
}
|
||||
|
||||
.list-header .expand {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.list-header .button,
|
||||
.list-header button {
|
||||
padding: 10px 10px;
|
||||
height: calc(100% - 20px);
|
||||
margin-top: 5px;
|
||||
}
|
||||
.list-header .expand {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.list-header .button,
|
||||
.list-header button {
|
||||
padding: 10px 10px;
|
||||
height: calc(100% - 20px);
|
||||
margin-top: 5px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,101 +1,91 @@
|
|||
<script lang="ts">
|
||||
import FileUpload from "src/lib/FileUpload.svelte";
|
||||
import MessageSimple from "src/lib/MessageSimple.svelte";
|
||||
import { postFormData } from "src/lib/requests.svelte";
|
||||
import {goto} from '$app/navigation';
|
||||
import FileUpload from 'src/lib/FileUpload.svelte';
|
||||
import MessageSimple from 'src/lib/MessageSimple.svelte';
|
||||
import { postFormData } from 'src/lib/requests.svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
import "src/styles/forms.css";
|
||||
import 'src/styles/forms.css';
|
||||
|
||||
let submitted = $state(false);
|
||||
let submitted = $state(false);
|
||||
|
||||
let message: MessageSimple;
|
||||
let message: MessageSimple;
|
||||
|
||||
let buttonClicked: Promise<void> = $state(Promise.resolve());
|
||||
let buttonClicked: Promise<void> = $state(Promise.resolve());
|
||||
|
||||
let data = $state<{
|
||||
name: string,
|
||||
file?: File,
|
||||
}>({
|
||||
name: '',
|
||||
file: undefined,
|
||||
});
|
||||
let data = $state<{
|
||||
name: string;
|
||||
file?: File;
|
||||
}>({
|
||||
name: '',
|
||||
file: undefined
|
||||
});
|
||||
|
||||
async function onSubmit() {
|
||||
message.display("");
|
||||
buttonClicked = new Promise<void>(() => {});
|
||||
async function onSubmit() {
|
||||
message.display('');
|
||||
buttonClicked = new Promise<void>(() => {});
|
||||
|
||||
if (!data.file || !data.name) return;
|
||||
|
||||
let formData = new FormData();
|
||||
formData.append("name", data.name);
|
||||
formData.append("file", data.file, 'base-image.png')
|
||||
|
||||
try {
|
||||
let id = await postFormData('models/add', formData);
|
||||
goto(`/models/edit?id=${id}`)
|
||||
} catch (e) {
|
||||
if (e instanceof Response) {
|
||||
message.display(await e.json())
|
||||
} else {
|
||||
message.display("Was not able to create model")
|
||||
}
|
||||
}
|
||||
if (!data.file || !data.name) return;
|
||||
|
||||
buttonClicked = Promise.resolve();
|
||||
}
|
||||
let formData = new FormData();
|
||||
formData.append('name', data.name);
|
||||
formData.append('file', data.file, 'base-image.png');
|
||||
|
||||
try {
|
||||
let id = await postFormData('models/add', formData);
|
||||
goto(`/models/edit?id=${id}`);
|
||||
} catch (e) {
|
||||
if (e instanceof Response) {
|
||||
message.display(await e.json());
|
||||
} else {
|
||||
message.display('Was not able to create model');
|
||||
}
|
||||
}
|
||||
|
||||
buttonClicked = Promise.resolve();
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Create new Model</title>
|
||||
<title>Create new Model</title>
|
||||
</svelte:head>
|
||||
|
||||
<main>
|
||||
<h1>
|
||||
Create new Model
|
||||
</h1>
|
||||
<form class:submitted on:submit|preventDefault={onSubmit}>
|
||||
<fieldset>
|
||||
<label for="name">Name</label>
|
||||
<input id="name" name="name" required bind:value={data.name} />
|
||||
<!--{{if .NameFoundError}}
|
||||
<h1>Create new Model</h1>
|
||||
<form class:submitted on:submit|preventDefault={onSubmit}>
|
||||
<fieldset>
|
||||
<label for="name">Name</label>
|
||||
<input id="name" name="name" required bind:value={data.name} />
|
||||
<!--{{if .NameFoundError}}
|
||||
<span class="form-msg error">
|
||||
You already have a model with that name.
|
||||
</span>
|
||||
{{end}}-->
|
||||
</fieldset>
|
||||
<fieldset class="file-upload" >
|
||||
<label for="file">Base image</label>
|
||||
<div class="form-msg">
|
||||
Please provide a base image.<br/>
|
||||
This image is a sample of the images that you are going to classfiy.
|
||||
</div>
|
||||
<FileUpload replace_slot bind:file={data.file} >
|
||||
<img src="/imgs/upload-icon.png" alt="" />
|
||||
<span>
|
||||
Upload image
|
||||
</span>
|
||||
<div slot="replaced-name">
|
||||
<span>
|
||||
Image selected
|
||||
</span>
|
||||
</div>
|
||||
</FileUpload>
|
||||
</fieldset>
|
||||
<MessageSimple bind:this={message} />
|
||||
{#await buttonClicked}
|
||||
<div class="text-center">
|
||||
File Uploading
|
||||
</div>
|
||||
{:then}
|
||||
<button>
|
||||
Create
|
||||
</button>
|
||||
{/await}
|
||||
</form>
|
||||
</fieldset>
|
||||
<fieldset class="file-upload">
|
||||
<label for="file">Base image</label>
|
||||
<div class="form-msg">
|
||||
Please provide a base image.<br />
|
||||
This image is a sample of the images that you are going to classfiy.
|
||||
</div>
|
||||
<FileUpload replace_slot bind:file={data.file}>
|
||||
<img src="/imgs/upload-icon.png" alt="" />
|
||||
<span> Upload image </span>
|
||||
<div slot="replaced-name">
|
||||
<span> Image selected </span>
|
||||
</div>
|
||||
</FileUpload>
|
||||
</fieldset>
|
||||
<MessageSimple bind:this={message} />
|
||||
{#await buttonClicked}
|
||||
<div class="text-center">File Uploading</div>
|
||||
{:then}
|
||||
<button> Create </button>
|
||||
{/await}
|
||||
</form>
|
||||
</main>
|
||||
|
||||
<style lang="scss">
|
||||
main {
|
||||
padding: 20px 15vw;
|
||||
}
|
||||
main {
|
||||
padding: 20px 15vw;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@
|
|||
import 'src/styles/forms.css';
|
||||
|
||||
let model: Promise<Model> = $state(new Promise(() => {}));
|
||||
let _model: Model | undefined = $state(undefined);
|
||||
let _model: Model | undefined = $state(undefined);
|
||||
let definitions: Promise<Definitions[]> = $state(new Promise(() => {}));
|
||||
|
||||
let id: string | undefined = $state();
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
}
|
||||
|
||||
model = Promise.resolve(temp_model);
|
||||
_model = temp_model;
|
||||
_model = temp_model;
|
||||
} catch (e) {
|
||||
if (e instanceof Response) {
|
||||
model = Promise.reject(await e.json());
|
||||
|
|
@ -160,10 +160,10 @@
|
|||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
{#if _model}
|
||||
<ModelDataPage model={_model} on:reload={getModel} active={isActive('model-data')} />
|
||||
<TasksDataPage model={_model} active={isActive('tasks')} />
|
||||
{/if}
|
||||
{#if _model}
|
||||
<ModelDataPage model={_model} on:reload={getModel} active={isActive('model-data')} />
|
||||
<TasksDataPage model={_model} active={isActive('tasks')} />
|
||||
{/if}
|
||||
<div class="content" class:selected={isActive('model')}>
|
||||
{#await model}
|
||||
Loading
|
||||
|
|
|
|||
|
|
@ -23,21 +23,21 @@
|
|||
</div>
|
||||
|
||||
<style>
|
||||
.model-card {
|
||||
h1 {
|
||||
margin: 0;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.model-card {
|
||||
h1 {
|
||||
margin: 0;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
img {
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.second-line {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
}
|
||||
.second-line {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,41 +1,39 @@
|
|||
<script lang="ts">
|
||||
import MessageSimple from 'src/lib/MessageSimple.svelte';
|
||||
import type { Model } from './+page.svelte';
|
||||
import { rdelete } from '$lib/requests.svelte'
|
||||
import MessageSimple from 'src/lib/MessageSimple.svelte';
|
||||
import type { Model } from './+page.svelte';
|
||||
import { rdelete } from '$lib/requests.svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
let { model } = $props<{ model: Model }>();
|
||||
let name: string = $state("");
|
||||
let submmited: boolean = $state(false);
|
||||
|
||||
let messageSimple: MessageSimple;
|
||||
let { model } = $props<{ model: Model }>();
|
||||
let name: string = $state('');
|
||||
let submmited: boolean = $state(false);
|
||||
|
||||
async function deleteModel() {
|
||||
submmited = true;
|
||||
messageSimple.display("");
|
||||
let messageSimple: MessageSimple;
|
||||
|
||||
try {
|
||||
await rdelete("models/delete", {id: model.id, name});
|
||||
goto("/models");
|
||||
} catch (e) {
|
||||
if (e instanceof Response) {
|
||||
messageSimple.display(await e.json());
|
||||
} else {
|
||||
messageSimple.display("Could not delete the model");
|
||||
}
|
||||
}
|
||||
}
|
||||
async function deleteModel() {
|
||||
submmited = true;
|
||||
messageSimple.display('');
|
||||
|
||||
try {
|
||||
await rdelete('models/delete', { id: model.id, name });
|
||||
goto('/models');
|
||||
} catch (e) {
|
||||
if (e instanceof Response) {
|
||||
messageSimple.display(await e.json());
|
||||
} else {
|
||||
messageSimple.display('Could not delete the model');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<form on:submit|preventDefault={deleteModel} class:submmited>
|
||||
<fieldset>
|
||||
<label for="name">
|
||||
To delete this model please type "{model.name}":
|
||||
</label>
|
||||
<input name="name" id="name" required bind:value={name} />
|
||||
</fieldset>
|
||||
<MessageSimple bind:this={messageSimple} />
|
||||
<button class="danger">
|
||||
Delete
|
||||
</button>
|
||||
<fieldset>
|
||||
<label for="name">
|
||||
To delete this model please type "{model.name}":
|
||||
</label>
|
||||
<input name="name" id="name" required bind:value={name} />
|
||||
</fieldset>
|
||||
<MessageSimple bind:this={messageSimple} />
|
||||
<button class="danger"> Delete </button>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -1,45 +1,42 @@
|
|||
<script lang="ts">
|
||||
import { rdelete } from "src/lib/requests.svelte";
|
||||
import type { Model } from "./+page.svelte";
|
||||
import MessageSimple from "src/lib/MessageSimple.svelte";
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import { rdelete } from 'src/lib/requests.svelte';
|
||||
import type { Model } from './+page.svelte';
|
||||
import MessageSimple from 'src/lib/MessageSimple.svelte';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
let message: MessageSimple;
|
||||
let message: MessageSimple;
|
||||
|
||||
let { model, expand } = $props<{model: Model, expand?: boolean}>();
|
||||
let { model, expand } = $props<{ model: Model; expand?: boolean }>();
|
||||
|
||||
const dispatch = createEventDispatcher<{reload: void}>();
|
||||
const dispatch = createEventDispatcher<{ reload: void }>();
|
||||
|
||||
async function deleteZip() {
|
||||
message.clear();
|
||||
async function deleteZip() {
|
||||
message.clear();
|
||||
|
||||
try {
|
||||
await rdelete("models/data/delete-zip-file", { id: model.id });
|
||||
dispatch('reload');
|
||||
} catch (e) {
|
||||
if (e instanceof Response) {
|
||||
message.display(await e.json());
|
||||
} else {
|
||||
message.display("Could not delete the zip file");
|
||||
}
|
||||
}
|
||||
}
|
||||
try {
|
||||
await rdelete('models/data/delete-zip-file', { id: model.id });
|
||||
dispatch('reload');
|
||||
} catch (e) {
|
||||
if (e instanceof Response) {
|
||||
message.display(await e.json());
|
||||
} else {
|
||||
message.display('Could not delete the zip file');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<form on:submit|preventDefault={deleteZip}>
|
||||
{#if expand}
|
||||
Failed to proccess the zip file.<br/>
|
||||
Delete file and upload a correct version do add more classes.<br/>
|
||||
<br/>
|
||||
{:else}
|
||||
Failed to proccess the zip file.<br/>
|
||||
Delete file and proccess again.<br/>
|
||||
<br/>
|
||||
{/if}
|
||||
<div class="spacer" ></div>
|
||||
<MessageSimple bind:this={message} />
|
||||
<button class="danger">
|
||||
Delete Zip File
|
||||
</button>
|
||||
{#if expand}
|
||||
Failed to proccess the zip file.<br />
|
||||
Delete file and upload a correct version do add more classes.<br />
|
||||
<br />
|
||||
{:else}
|
||||
Failed to proccess the zip file.<br />
|
||||
Delete file and proccess again.<br />
|
||||
<br />
|
||||
{/if}
|
||||
<div class="spacer"></div>
|
||||
<MessageSimple bind:this={message} />
|
||||
<button class="danger"> Delete Zip File </button>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -1,48 +1,46 @@
|
|||
<script lang="ts">
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import type { Model } from "./+page.svelte";
|
||||
import ModelData from "./ModelData.svelte";
|
||||
import { post } from "src/lib/requests.svelte";
|
||||
import ModelDataPageStatsGraph from "./ModelDataPageStatsGraph.svelte";
|
||||
import type { ModelStats } from "./types";
|
||||
import DeleteZip from "./DeleteZip.svelte";
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import type { Model } from './+page.svelte';
|
||||
import ModelData from './ModelData.svelte';
|
||||
import { post } from 'src/lib/requests.svelte';
|
||||
import ModelDataPageStatsGraph from './ModelDataPageStatsGraph.svelte';
|
||||
import type { ModelStats } from './types';
|
||||
import DeleteZip from './DeleteZip.svelte';
|
||||
|
||||
let { model, active } = $props<{model: Model, active?: boolean}>()
|
||||
|
||||
const dispatch = createEventDispatcher<{ reload: void }>();
|
||||
let { model, active } = $props<{ model: Model; active?: boolean }>();
|
||||
|
||||
$effect(() => {
|
||||
if (active)
|
||||
getData();
|
||||
});
|
||||
const dispatch = createEventDispatcher<{ reload: void }>();
|
||||
|
||||
let stats: ModelStats | undefined = $state();
|
||||
$effect(() => {
|
||||
if (active) getData();
|
||||
});
|
||||
|
||||
async function getData() {
|
||||
if (!model) return;
|
||||
try {
|
||||
stats = await post(`models/class/stats`, { id: model.id });
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
}
|
||||
let stats: ModelStats | undefined = $state();
|
||||
|
||||
async function getData() {
|
||||
if (!model) return;
|
||||
try {
|
||||
stats = await post(`models/class/stats`, { id: model.id });
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="content" class:selected={active}>
|
||||
|
||||
{#if stats}
|
||||
<ModelDataPageStatsGraph data={stats} />
|
||||
{/if}
|
||||
{#if stats}
|
||||
<ModelDataPageStatsGraph data={stats} />
|
||||
{/if}
|
||||
|
||||
{#if [-6, -2].includes(model.status)}
|
||||
<DeleteZip {model} on:reload={() => dispatch('reload')} expand />
|
||||
{/if}
|
||||
|
||||
{#if [-6, -2].includes(model.status)}
|
||||
<DeleteZip model={model} on:reload={() => dispatch('reload')} expand />
|
||||
{/if}
|
||||
|
||||
<ModelData model={model} on:reload={() => {
|
||||
getData();
|
||||
dispatch('reload');
|
||||
}} />
|
||||
<ModelData
|
||||
{model}
|
||||
on:reload={() => {
|
||||
getData();
|
||||
dispatch('reload');
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
$effect(() => {
|
||||
if (data && ctx) {
|
||||
if (chart) {
|
||||
console.log("update")
|
||||
console.log('update');
|
||||
chart.data = {
|
||||
labels: data.map((a) => a.name),
|
||||
datasets: [
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
};
|
||||
chart.update('resize');
|
||||
} else {
|
||||
console.log("create")
|
||||
console.log('create');
|
||||
chart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
|
|
|
|||
|
|
@ -113,9 +113,7 @@
|
|||
{:else}
|
||||
<form class:submitted on:submit|preventDefault={submitRetrain}>
|
||||
{#if has_data}
|
||||
<h2>
|
||||
This model has new classes and can be expanded
|
||||
</h2>
|
||||
<h2>This model has new classes and can be expanded</h2>
|
||||
{#if number_of_invalid_images > 0}
|
||||
<p class="danger">
|
||||
There are images {number_of_invalid_images} that were loaded that do not have the correct format.DeleteZip
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
export type ModelStats = Array<{
|
||||
name: string,
|
||||
training: number,
|
||||
testing: number,
|
||||
}>
|
||||
name: string;
|
||||
training: number;
|
||||
testing: number;
|
||||
}>;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user