ENHANCEMENT: better use of svelte

This commit is contained in:
Jeroen De Meerleer 2023-03-19 10:33:34 +01:00
parent f9bfc4b281
commit 986b97d143
Signed by: JeroenED
GPG Key ID: 28CCCB8F62BFADD6
6 changed files with 140 additions and 133 deletions

View File

@ -1,88 +1,9 @@
<div class="container h-full mx-auto flex justify-center items-center flex-col">
<h1 class="my-3">Blackbird Chess</h1>
<script>
import { goto } from '$app/navigation';
import { onMount } from 'svelte';
onMount(async () => {
goto("/login");
});
{#if message.visible}
<aside class="alert variant-filled-error">
<!-- Icon -->
<div><i class="text-2xl icon icon-exclamation-triangle"></i></div>
<!-- Message -->
<p class="alert-message">{message.text}</p>
<!-- Actions -->
<div class="alert-actions">
<i on:click={closeWarning} class="icon icon-close"></i>
</div>
</aside>
{/if}
<form name="login-server" class="flex flex-col">
<label class="label my-3">
<span>Please select the server to login:</span>
<input
type="url"
name="server"
id="login-server-url"
class="input"
bind:value={serverurl}>
</label>
<button type="button" id="login-server-submit" class="btn variant-filled-primary my-3" on:click={handleSelectServer}>Submit</button>
</form>
</div>
<style lang="scss">
</style>
<script lang="js">
import { urls, server } from "../stores.js";
import {goto} from "$app/navigation";
let message = {
visible: false,
text: '',
class: 'error'
};
var serverurl = '';
function handleSelectServer() {
if(!isValidHttpUrl(serverurl)) {
serverurl = 'https://' + serverurl;
if(!isValidHttpUrl(serverurl)) {
return unavailableServer('This server is not a Blackbird Chess Server')
}
}
console.log("Selected server: " + serverurl);
fetch(serverurl + urls.capabilities)
.then((response) => {
if (!response.ok) return unavailableServer('This server is not a Blackbird Chess Server')
return response.json()
})
.then((data) => {
if(!data.login) return unavailableServer('This server is unavailable for login currently');
server.update(n => serverurl);
goto('/login')
})
.catch((error) => {
return unavailableServer('This server is not a Blackbird Chess Server')
});
}
function isValidHttpUrl(string) {
let url;
try {
url = new URL(string);
} catch (_) {
return false;
}
return url.protocol === "http:" || url.protocol === "https:";
}
function unavailableServer(error) {
console.log(error);
message.text = error;
message.class = 'error'
message.visible = true;
}
function closeWarning() {
message.visible = false;
}
</script>

View File

@ -1,11 +0,0 @@
<script lang="ts">
import '../../app.pcss';
// The ordering of these imports is critical to your app working properly
import '@skeletonlabs/skeleton/themes/theme-skeleton.css';
// If you have source.organizeImports set to true in VSCode, then it will auto change this ordering
import '@skeletonlabs/skeleton/styles/all.css';
// Most of your app wide CSS should be put in this file
import '../../app.pcss';
</script>
<slot />

View File

@ -1,7 +1,6 @@
<div class="container h-full mx-auto flex justify-center items-center flex-col">
<h1 class="my-3">Blackbird Chess</h1>
{#if message.visible}
<aside class="alert variant-filled-error">
<!-- Icon -->
@ -15,17 +14,7 @@
</aside>
{/if}
<form name="login-server" class="flex flex-col">
<label class="label my-3">
<span>Username:</span>
<input type="email" name="email" id="login-email" class="input" bind:value={email}>
</label>
<label class="label my-3">
<span>Password:</span>
<input type="password" name="password" id="login-password" class="input" bind:value={email}>
</label>
<button type="button" id="login-server-submit" class="btn variant-filled-primary my-3" on:click={handleLogin}>Submit</button>
</form>
<Server on:message={showMessage}/>
</div>
<style lang="scss">
@ -33,39 +22,29 @@
</style>
<script lang="js">
import { urls, server } from "../../stores.js";
import { goto } from '$app/navigation';
import { onMount } from 'svelte';
import { urls, serverurl } from "../../stores.js";
import login from './Login.svelte'
import Server from './Server.svelte'
let message = {
visible: false,
text: '',
class: 'error'
};
var email = '';
var password = '';
var serverurl
var myserver
server.subscribe(value => {
serverurl = value;
serverurl.subscribe(value => {
myserver = value;
});
onMount(async () => {
if(serverurl == null) {
goto('/')
}
});
function handleLogin() {
unavailableServer('To be implemented')
}
function unavailableServer(error) {
console.log(error);
message.text = error;
message.class = 'error'
message.visible = true;
}
function closeWarning() {
message.visible = false;
}
function showMessage(error) {
console.log(error);
message.text = error.detail.text;
message.class = 'error'
message.visible = true;
}
</script>

View File

@ -0,0 +1,60 @@
<div class="container h-full mx-auto flex justify-center items-center flex-col">
<h1 class="my-3">Blackbird Chess</h1>
{#if message.visible}
<aside class="alert variant-filled-error">
<!-- Icon -->
<div><i class="text-2xl icon icon-exclamation-triangle"></i></div>
<!-- Message -->
<p class="alert-message">{message.text}</p>
<!-- Actions -->
<div class="alert-actions">
<i on:click={closeWarning} class="icon icon-close"></i>
</div>
</aside>
{/if}
<form name="login-server" class="flex flex-col">
<label class="label my-3">
<span>Username:</span>
<input type="email" name="email" id="login-email" class="input" bind:value={email}>
</label>
<label class="label my-3">
<span>Password:</span>
<input type="password" name="password" id="login-password" class="input" bind:value={email}>
</label>
<button type="button" id="login-server-submit" class="btn variant-filled-primary my-3" on:click={handleLogin}>Submit</button>
</form>
</div>
<style lang="scss">
</style>
<script lang="js">
import { urls, serverurl } from "../../stores.js";
import { goto } from '$app/navigation';
import { onMount } from 'svelte';
let message = {
visible: false,
text: '',
class: 'error'
};
var email = '';
var password = '';
var bbcserver
bbcserver.subscribe(value => {
bbcserver = value;
});
onMount(async () => {
if(serverurl == null) {
goto('/')
}
});
function handleLogin() {
unavailableServer('To be implemented')
}
</script>

View File

@ -0,0 +1,58 @@
<form name="login-server" class="flex flex-col">
<label class="label my-3">
<span>Please select the server to login:</span>
<input
type="url"
name="server"
id="login-server-url"
class="input"
bind:value={server}>
</label>
<button type="button" id="login-server-submit" class="btn variant-filled-primary my-3" on:click={handleSelectServer}>Submit</button>
</form>
<style lang="scss">
</style>
<script lang="js">
import { urls, serverurl } from "../../stores.js";
import { createEventDispatcher } from 'svelte';
import { goto } from "$app/navigation";
const dispatch = createEventDispatcher();
var server = '';
function handleSelectServer() {
if(!isValidHttpUrl(server)) {
server = 'https://' + server;
if(!isValidHttpUrl(server)) {
return dispatch('message', {text: 'This server is not a Blackbird Chess server'})
}
}
console.log("Selected server: " + server);
fetch(server + urls.capabilities)
.then((response) => {
if (!response.ok) return dispatch('message', {text: 'This server is not a Blackbird Chess server'})
return response.json()
})
.then((data) => {
if(!data.login) return dispatch('message', {text: 'This server is unavailable for login currently'})
serverurl.update(n => server);
goto('/login')
})
.catch((error) => {
return dispatch('message', {text: 'This server is not a Blackbird Chess server'})
});
}
function isValidHttpUrl(string) {
let url;
try {
url = new URL(string);
} catch (_) {
return false;
}
return url.protocol === "http:" || url.protocol === "https:";
}
</script>

View File

@ -5,4 +5,4 @@ export const urls = {
login: "/login"
}
export const server = writable(null);
export const serverurl = writable(null);