mirror of
https://github.com/Rolands-Laucis/Socio.git
synced 2026-05-15 14:15:57 -06:00
full stack framework demo done
This commit is contained in:
Rolands
parent
b873ec6f02
commit
9b84d93cac
6 changed files with 89 additions and 34 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,12 +1,12 @@
|
|||
<script lang="ts">
|
||||
import Bloom from "./bloom.svelte";
|
||||
|
||||
export let name:string, num:number = 0, style:string;
|
||||
export let style:string='';
|
||||
</script>
|
||||
|
||||
<Bloom style="--b:6px;">
|
||||
<Bloom>
|
||||
<button on:click {style}>
|
||||
INSERT INTO users (name, num) VALUES("<span class="acc1">{name}</span>", <span class="acc1">{num || 0}</span>);
|
||||
<slot></slot>
|
||||
</button>
|
||||
</Bloom>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@
|
|||
|
||||
<nav>
|
||||
<h1>Socio</h1>
|
||||
<Bloom tb><a href="https://github.com/Rolands-Laucis/Socio" target="_blank">github</a></Bloom>
|
||||
<Bloom tb><a href="https://www.npmjs.com/package/socio" target="_blank">npm</a></Bloom>
|
||||
<Bloom style="--b:6px;"><a href="https://github.com/Rolands-Laucis/Socio" target="_blank">github</a></Bloom>
|
||||
<Bloom style="--b:6px;"><a href="https://www.npmjs.com/package/socio" target="_blank">npm</a></Bloom>
|
||||
</nav>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
@ -17,5 +17,10 @@
|
|||
|
||||
a{
|
||||
color: $acc2;
|
||||
font-weight: 400;
|
||||
|
||||
&:hover{
|
||||
text-underline-offset: 4px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -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)
|
||||
})
|
||||
</script>
|
||||
|
||||
|
|
@ -35,22 +38,31 @@
|
|||
{#if ready}
|
||||
<h6 class="darker_text">client ID: {sc.client_id}</h6>
|
||||
<div class="horiz">
|
||||
<h6 class="dark_text bold">single sql query:</h6>
|
||||
<h6 class="darker_text bold">single sql query:</h6>
|
||||
<h4>SELECT 42+69 AS RESULT; = </h4>
|
||||
{#await sc.query('SELECT 42+69 AS RESULT;--socio')}
|
||||
<Bloom style="--b:4px;"><Spinner style="--h:24px;--t:6px;"></Spinner></Bloom>
|
||||
<Bloom><Spinner style="--h:24px;--t:6px;"></Spinner></Bloom>
|
||||
{:then res}
|
||||
<h4 class="bold">{res[0].RESULT}</h4>
|
||||
{/await}
|
||||
</div>
|
||||
|
||||
<div class="horiz">
|
||||
<h6 class="dark_text bold">subscribed sql query:</h6>
|
||||
<h4>SELECT COUNT(*) FROM users WHERE name = :name <span class="h5 dark_text bold">(John)</span>; = <span class="bold">{user_count}</span></h4>
|
||||
<h6 class="darker_text bold">subscribed sql query:</h6>
|
||||
|
||||
<h4>SELECT COUNT(*) FROM users WHERE name = :name <span class="h5 darker_text bold">(John)</span>; =
|
||||
{#if user_count}
|
||||
<span class="bold">{user_count}</span>
|
||||
{:else}
|
||||
<Bloom><Spinner style="--h:24px;--t:6px;"></Spinner></Bloom>
|
||||
{/if}
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<div class="insert">
|
||||
<Button style="width:100%;" on:click={async () => await sc.query("INSERT INTO users (name, num) VALUES(:name, :num);--socio", insert_fields)} name={insert_fields.name} num={insert_fields.num}></Button>
|
||||
<Button style="width:100%;" on:click={async () => await sc.query("INSERT INTO users (name, num) VALUES(:name, :num);--socio", insert_fields)}>
|
||||
INSERT INTO users (name, num) VALUES("<span class="acc1 bold">{insert_fields.name}</span>", <span class="acc1 bold">{insert_fields.num || 0}</span>);
|
||||
</Button>
|
||||
<div class="inputs">
|
||||
<input type="text" bind:value={insert_fields.name}>
|
||||
<input type="number" min="0" bind:value={insert_fields.num}>
|
||||
|
|
@ -61,13 +73,26 @@
|
|||
{#each users as u (u.userid)}
|
||||
<div class="user" transition:slide>
|
||||
<h4>{u.userid}</h4>
|
||||
<h4 class="acc1">|</h4>
|
||||
<Bloom><h4 class="acc1">|</h4></Bloom>
|
||||
<h4>{u.name}</h4>
|
||||
<h4 class="acc2">|</h4>
|
||||
<Bloom><h4 class="acc2">|</h4></Bloom>
|
||||
<h4>{u.num}</h4>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="color">
|
||||
<h6 class="darker_text bold">subscribed server prop:</h6>
|
||||
<Bloom>
|
||||
<Button on:click={async () => await sc.setProp('color',color_prop)}>SET</Button>
|
||||
</Bloom>
|
||||
<input type="text" maxlength="7" bind:value={color_prop}>
|
||||
<Bloom>
|
||||
<div class="color_box" style="--c:{color_prop};">
|
||||
<h4>{color_prop}</h4>
|
||||
</div>
|
||||
</Bloom>
|
||||
</div>
|
||||
{:else}
|
||||
<Bloom style="--b:4px;"><Spinner style="--h:64px;--t:10px;"></Spinner></Bloom>
|
||||
{/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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue