andr3/fyp
1
0
Fork 0
Code Issues 29 Pull Requests Packages Projects 1 Releases Wiki Activity

ran prettier

Browse Source
This commit is contained in:
Andre Henriques 2024-04-14 15:22:46 +01:00
parent e7eeccd09e
commit 5f11126acd
19 changed files with 528 additions and 565 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
webpage/src/lib/FileUpload.svelte
View File

@ -1,16 +1,16 @@
<script lang="ts">
let { replace_slot, accept, file, notExpand } = $props<{
replace_slot?: boolean,
accept?: string,
file?: File,
notExpand?: boolean
replace_slot?: boolean;
accept?: string;
file?: File;
notExpand?: boolean;
}>();
let fileInput: HTMLInputElement;
let fileData: string | undefined = $state(undefined);
function onChange(e: Event & {currentTarget: HTMLInputElement}) {
function onChange(e: Event & { currentTarget: HTMLInputElement }) {
if (!e.currentTarget.files) {
return;
}
@ -21,24 +21,33 @@
fileReader.onloadend = () => {
fileData = String(fileReader.result);
//elm.classList.add("adapt");
};
fileReader.readAsDataURL(file);
}
fileReader.readAsDataURL(file)
}
</script>
<div class="icon-holder">
<button class="icon" class:adapt={replace_slot && file && !notExpand} on:click={() => fileInput.click()}>
<button
class="icon"
class:adapt={replace_slot && file && !notExpand}
on:click={() => fileInput.click()}
>
{#if replace_slot && file}
<slot name="replaced" file={file}>
<slot name="replaced" {file}>
<img src={fileData} alt="" />
<slot name="replaced-name">
Image Uploaded
</slot>
<slot name="replaced-name">Image Uploaded</slot>
</slot>
{:else}
<slot></slot>
<slot />
{/if}
</button>
<input id="file" name="file" type="file" required accept={accept} bind:this={fileInput} on:change={onChange} />
<input
id="file"
name="file"
type="file"
required
{accept}
bind:this={fileInput}
on:change={onChange}
/>
</div>

6
webpage/src/lib/Tabs.svelte
View File

@ -1,8 +1,8 @@
<script lang="ts">
let {active, nobox} = $props<{active?: string, nobox?: boolean}>();
let { active, nobox } = $props<{ active?: string; nobox?: boolean }>();
function setActive(name: string) {
return () => active = name;
return () => (active = name);
}
function isActive(name: string) {
@ -63,11 +63,9 @@
box-shadow: none;
overflow: visible;
:global(.content.selected) {
box-shadow: none;
}
}
}
</style>

2
webpage/src/routes/+layout.svelte
View File

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

18
webpage/src/routes/Page404.svelte
View File

@ -1,30 +1,22 @@
<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>
<h1>404</h1>
{#if message}
<h2>
{message}
</h2>
{#if goBackLink}
<div class="description">
<a href={goBackLink}>
👈 Go back
</a>
<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>
<h2>Page Not found</h2>
<div class="description">The page you were looking for does not exist</div>
{/if}
</div>
</div>

16
webpage/src/routes/UserStore.svelte.ts
View File

@ -1,11 +1,11 @@
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() {
@ -38,7 +38,7 @@ export function createUserStore() {
user = value;
},
checkUser(pathOnFail: string, level?: number) {
if (user && user.level > (level ?? 2) ) {
if (user && user.level > (level ?? 2)) {
goto(pathOnFail);
return true;
}
@ -49,7 +49,7 @@ export function createUserStore() {
if (getValue()) return true;
return false;
}
}
};
}
export const userStore = createUserStore();

28
webpage/src/routes/login/+page.svelte
View File

@ -8,40 +8,38 @@
let loginData = $state({
email: '',
password: '',
password: ''
});
let errorMessage = $state("");
let errorMessage = $state('');
async function onSubmit() {
submitted = true;
errorMessage = "";
errorMessage = '';
try {
const req = await post('login', loginData);
userStore.user = req;
goto("/");
goto('/');
} catch (e) {
loginData.password = "";
loginData.password = '';
if (e instanceof Response) {
errorMessage = await e.json();
} else {
errorMessage = "Server could not perform login";
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 >
<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} />
@ -56,13 +54,9 @@
</span>
{/if}
</fieldset>
<button>
Login
</button>
<button> Login </button>
<div class="spacer"></div>
<a class="simple-link text-center w100 spacer" href="/register">
Register
</a>
<a class="simple-link text-center w100 spacer" href="/register"> Register </a>
</form>
</div>
</div>

6
webpage/src/routes/logout/+page.svelte
View File

@ -1,7 +1,7 @@
<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;

47
webpage/src/routes/models/+page.svelte
View File

@ -1,32 +1,32 @@
<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;
onMount(async () => {
try {
list = await get("models");
list = await get('models');
} catch (e) {
if (e instanceof Response) {
message.display(await e.json())
message.display(await e.json());
} else {
message.display("Could not request list of models");
message.display('Could not request list of models');
}
}
});
</script>
<svelte:head>
<title>
Models
</title>
<title>Models</title>
</svelte:head>
<main>
@ -35,16 +35,12 @@
<div class="list-header">
<h2>My Models</h2>
<div class="expand"></div>
<a class="button" href="/models/add">
New
</a>
<a class="button" href="/models/add"> New </a>
</div>
<table class="table">
<thead>
<tr>
<th>
Name
</th>
<th> Name </th>
<th>
<!-- Open Button -->
</th>
@ -57,22 +53,16 @@
{item.name}
</td>
<td class="text-center">
<a class="button simple" href="/models/edit?id={item.id}">
Edit
</a>
<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>
<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>
<a class="button padded" href="/models/add"> Create a new model </a>
</div>
{/if}
</main>
@ -101,5 +91,4 @@
height: calc(100% - 20px);
margin-top: 5px;
}
</style>

54
webpage/src/routes/models/add/+page.svelte
View File

@ -1,10 +1,10 @@
<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);
@ -13,31 +13,31 @@
let buttonClicked: Promise<void> = $state(Promise.resolve());
let data = $state<{
name: string,
file?: File,
name: string;
file?: File;
}>({
name: '',
file: undefined,
file: undefined
});
async function onSubmit() {
message.display("");
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')
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}`)
goto(`/models/edit?id=${id}`);
} catch (e) {
if (e instanceof Response) {
message.display(await e.json())
message.display(await e.json());
} else {
message.display("Was not able to create model")
message.display('Was not able to create model');
}
}
@ -50,9 +50,7 @@
</svelte:head>
<main>
<h1>
Create new Model
</h1>
<h1>Create new Model</h1>
<form class:submitted on:submit|preventDefault={onSubmit}>
<fieldset>
<label for="name">Name</label>
@ -63,33 +61,25 @@
</span>
{{end}}-->
</fieldset>
<fieldset class="file-upload" >
<fieldset class="file-upload">
<label for="file">Base image</label>
<div class="form-msg">
Please provide a base image.<br/>
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} >
<FileUpload replace_slot bind:file={data.file}>
<img src="/imgs/upload-icon.png" alt="" />
<span>
Upload image
</span>
<span> Upload image </span>
<div slot="replaced-name">
<span>
Image selected
</span>
<span> Image selected </span>
</div>
</FileUpload>
</fieldset>
<MessageSimple bind:this={message} />
{#await buttonClicked}
<div class="text-center">
File Uploading
</div>
<div class="text-center">File Uploading</div>
{:then}
<button>
Create
</button>
<button> Create </button>
{/await}
</form>
</main>

16
webpage/src/routes/models/edit/DeleteModel.svelte
View File

@ -1,27 +1,27 @@
<script lang="ts">
import MessageSimple from 'src/lib/MessageSimple.svelte';
import type { Model } from './+page.svelte';
import { rdelete } from '$lib/requests.svelte'
import { rdelete } from '$lib/requests.svelte';
import { goto } from '$app/navigation';
let { model } = $props<{ model: Model }>();
let name: string = $state("");
let name: string = $state('');
let submmited: boolean = $state(false);
let messageSimple: MessageSimple;
async function deleteModel() {
submmited = true;
messageSimple.display("");
messageSimple.display('');
try {
await rdelete("models/delete", {id: model.id, name});
goto("/models");
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");
messageSimple.display('Could not delete the model');
}
}
}
@ -35,7 +35,5 @@
<input name="name" id="name" required bind:value={name} />
</fieldset>
<MessageSimple bind:this={messageSimple} />
<button class="danger">
Delete
</button>
<button class="danger"> Delete </button>
</form>

35
webpage/src/routes/models/edit/DeleteZip.svelte
View File

@ -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 { 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();
try {
await rdelete("models/data/delete-zip-file", { id: model.id });
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");
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/>
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/>
Failed to proccess the zip file.<br />
Delete file and proccess again.<br />
<br />
{/if}
<div class="spacer" ></div>
<div class="spacer"></div>
<MessageSimple bind:this={message} />
<button class="danger">
Delete Zip File
</button>
<button class="danger"> Delete Zip File </button>
</form>

32
webpage/src/routes/models/edit/ModelDataPage.svelte
View File

@ -1,19 +1,18 @@
<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}>()
let { model, active } = $props<{ model: Model; active?: boolean }>();
const dispatch = createEventDispatcher<{ reload: void }>();
$effect(() => {
if (active)
getData();
if (active) getData();
});
let stats: ModelStats | undefined = $state();
@ -26,23 +25,22 @@
return;
}
}
</script>
<div class="content" class:selected={active}>
{#if stats}
<ModelDataPageStatsGraph data={stats} />
{/if}
{#if [-6, -2].includes(model.status)}
<DeleteZip model={model} on:reload={() => dispatch('reload')} expand />
<DeleteZip {model} on:reload={() => dispatch('reload')} expand />
{/if}
<ModelData model={model} on:reload={() => {
<ModelData
{model}
on:reload={() => {
getData();
dispatch('reload');
}} />
}}
/>
</div>

4
webpage/src/routes/models/edit/ModelDataPageStatsGraph.svelte
View File

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

4
webpage/src/routes/models/edit/TrainModel.svelte
View File

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

8
webpage/src/routes/models/edit/types.ts
View File

@ -1,5 +1,5 @@
export type ModelStats = Array<{
name: string,
training: number,
testing: number,
}>
name: string;
training: number;
testing: number;
}>;