From 9b84d93cac88b30c4f12e25e9e197a0dcfb78c8a Mon Sep 17 00:00:00 2001 From: Rolands Date: Sat, 31 Dec 2022 11:00:32 +0200 Subject: [PATCH] full stack framework demo done --- demos/full-stack_framework/src/app.scss | 1 + .../full-stack_framework/src/hooks.server.ts | 14 +-- .../full-stack_framework/src/lib/bloom.svelte | 3 +- .../src/lib/button.svelte | 6 +- demos/full-stack_framework/src/lib/nav.svelte | 9 +- .../src/routes/+page.svelte | 90 ++++++++++++++----- 6 files changed, 89 insertions(+), 34 deletions(-) diff --git a/demos/full-stack_framework/src/app.scss b/demos/full-stack_framework/src/app.scss index f60936b..62c4304 100644 --- a/demos/full-stack_framework/src/app.scss +++ b/demos/full-stack_framework/src/app.scss @@ -6,6 +6,7 @@ html, body{ width: 100vw; height: 100vh; + // background-color: black; background: radial-gradient(50% 50% at 50% 50%, #07071D 0%, #07070C 100%); color: $light; color-scheme: dark; diff --git a/demos/full-stack_framework/src/hooks.server.ts b/demos/full-stack_framework/src/hooks.server.ts index d6a6649..8e7fca7 100644 --- a/demos/full-stack_framework/src/hooks.server.ts +++ b/demos/full-stack_framework/src/hooks.server.ts @@ -29,14 +29,14 @@ try{ const socserv = new SocioServer({ port: ws_port }, QueryWrap as QueryFunction, { verbose: true, secure: socsec }); done(`Created SocioServer on port`, ws_port); - // socserv.RegisterProp('color', '#ffffff', (curr_val: PropValue, new_val: PropValue):boolean => { - // if(typeof new_val != 'string' || new_val.length != 7) return false; - // if (!new_val.match(/^#[0-9a-f]{6}/mi)) return false; - // //...more checks. + socserv.RegisterProp('color', '#ffffff', (curr_val: PropValue, new_val: PropValue):boolean => { + if(typeof new_val != 'string' || new_val.length != 7) return false; + if (!new_val.match(/^#[0-9a-f]{6}/mi)) return false; + //...more checks. - // //success, so assign - // return socserv.SetPropVal('color', new_val); - // }) + //success, so assign + return socserv.SetPropVal('color', new_val); + }) }catch(e){ soft_error(e); } diff --git a/demos/full-stack_framework/src/lib/bloom.svelte b/demos/full-stack_framework/src/lib/bloom.svelte index c732382..28f4cf3 100644 --- a/demos/full-stack_framework/src/lib/bloom.svelte +++ b/demos/full-stack_framework/src/lib/bloom.svelte @@ -13,6 +13,7 @@ .bloom_wrap{ --b: #{$bloom}; position: relative; + z-index: 0; } .tb{--b:#{$bloom_thin};} .bloom{ @@ -22,6 +23,6 @@ position: absolute; left: 0; top: 0; - filter: brightness(0.6) blur(var(--b)); + filter: brightness(0.3) blur(var(--b)); } \ No newline at end of file diff --git a/demos/full-stack_framework/src/lib/button.svelte b/demos/full-stack_framework/src/lib/button.svelte index 9150c9c..8da8b5a 100644 --- a/demos/full-stack_framework/src/lib/button.svelte +++ b/demos/full-stack_framework/src/lib/button.svelte @@ -1,12 +1,12 @@ - + diff --git a/demos/full-stack_framework/src/lib/nav.svelte b/demos/full-stack_framework/src/lib/nav.svelte index 86ee549..1908065 100644 --- a/demos/full-stack_framework/src/lib/nav.svelte +++ b/demos/full-stack_framework/src/lib/nav.svelte @@ -4,8 +4,8 @@ \ No newline at end of file diff --git a/demos/full-stack_framework/src/routes/+page.svelte b/demos/full-stack_framework/src/routes/+page.svelte index 0e84eb5..94deae1 100644 --- a/demos/full-stack_framework/src/routes/+page.svelte +++ b/demos/full-stack_framework/src/routes/+page.svelte @@ -15,17 +15,20 @@ let ready = false, user_count = 0; let users: {userid:number, name:string, num:number}[] = []; let insert_fields = {name:'Bob', num:42}; + let color_prop = '#ffffff'; onMount(async () => { ready = await sc.ready(); const user_count_id = sc.subscribe({ sql: "SELECT COUNT(*) AS RES FROM users WHERE name = :name;--socio", params: { name: 'John' } }, (res) => { // log(res); - user_count = res[0].RES //res is whatever object your particular DB interface lib returns from a raw query + user_count = res[0].RES as number //res is whatever object your particular DB interface lib returns from a raw query }) const users_id = sc.subscribe({ sql: "SELECT * FROM users;--socio"}, (res) => { // log(res) - users = res //res is whatever object your particular DB interface lib returns from a raw query + users = res as {userid:number, name:string, num:number}[] //res is whatever object your particular DB interface lib returns from a raw query }) + + sc.subscribeProp('color', (c) => color_prop = c as string) }) @@ -35,22 +38,31 @@ {#if ready}
client ID: {sc.client_id}
-
single sql query:
+
single sql query:

SELECT 42+69 AS RESULT; =

{#await sc.query('SELECT 42+69 AS RESULT;--socio')} - + {:then res}

{res[0].RESULT}

{/await}
-
subscribed sql query:
-

SELECT COUNT(*) FROM users WHERE name = :name (John); = {user_count}

+
subscribed sql query:
+ +

SELECT COUNT(*) FROM users WHERE name = :name (John); = + {#if user_count} + {user_count} + {:else} + + {/if} +

- +
@@ -61,13 +73,26 @@ {#each users as u (u.userid)}

{u.userid}

-

|

+

|

{u.name}

-

|

+

|

{u.num}

{/each}
+ +
+
subscribed server prop:
+ + + + + +
+

{color_prop}

+
+ +
{:else} {/if} @@ -81,7 +106,7 @@ .acc1{color: $acc1;} .acc2{color: $acc2;} - .dark_text{color: $gray3;} + .darker_text{color: $gray3;} .darker_text{color: $gray2;} .bold{font-weight: 700;} .thin{font-weight: 300;} @@ -111,19 +136,19 @@ width: 100%; display: flex; gap:$pad; + } - input{ - flex-grow:1; - min-width: 0px; + input{ + flex-grow:1; + min-width: 0px; - font-size: 24px; - font-weight: 700; - background: transparent; - color: $acc1; - border: 1px solid $acc1; - padding: $pad_small; - outline: none; - } + font-size: 24px; + font-weight: 700; + background: transparent; + color: $acc1; + border: 1px solid $acc1; + padding: $pad_small; + outline: none; } .users{ @@ -144,4 +169,27 @@ justify-content: space-between; } } + + .color{ + display: flex; + align-items: center; + gap: $pad; + + .color_box{ + min-width: 100px; + height: 49px; + padding: $gap; + background-color: var(--c); + display: flex; + align-items: center; + justify-content: center; + + transition: $trans; + + h4{ + color: white; + mix-blend-mode: difference; + } + } + } \ No newline at end of file