hippoz/waffle
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Compare commits

base: hippoz:01649150a440ff33b0491c1e547910fbfa9d45b4
Branches Tags
hippoz:master
...
compare: hippoz:304cef3c113c605be36db8cd6892ea7576a0a72a
Branches Tags
hippoz:master

3 commits
01649150a4 ... 304cef3c11

Author SHA1 Message Date
hippoz
304cef3c11
frontend: add loading screen for initially loading the js and connecting to the gateway 2022-04-17 20:23:20 +03:00
hippoz
541464cdd9
frontend+backend: fix gateway-updated channel order 2022-04-17 17:56:03 +03:00
hippoz
381f1ae454
frontend: link up channel sidebar with gateway and fix channel button layout issue 2022-04-17 04:08:40 +03:00
12 changed files with 263 additions and 60 deletions
Show stats Expand all files Collapse all files

10
frontend/public/global.css
View file

@ -39,6 +39,16 @@ body {
line-height: 1.75; line-height: 1.75;
} }
.pre--loading-screen {
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
overflow: hidden;
background-color: var(--background-color-1);
}
.h1 { .h1 {
font-size: 2.488rem; font-size: 2.488rem;
} }

1
frontend/public/index.html
View file

@ -13,5 +13,6 @@
</head> </head>
<body> <body>
<div class="pre--loading-screen" id="pre--loading-screen">heating up the crt...</div>
</body> </body>
</html> </html>

4
frontend/src/components/App.svelte
View file

@ -1,6 +1,6 @@
<script> <script>
import ChannelView from "./Main.svelte"; import Main from "./pages/main/Main.svelte";
</script> </script>
<ChannelView /> <Main />

19
frontend/src/components/Main.svelte
View file

@ -1,19 +0,0 @@
<script>
import ChannelView from "./ChannelView.svelte";
import Sidebar from "./Sidebar.svelte";
</script>
<style>
.flex-container {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: row;
}
</style>
<div class="flex-container">
<Sidebar />
<ChannelView />
</div>

6
frontend/src/components/ChannelView.svelte → frontend/src/components/pages/main/ChannelView.svelte
View file

@ -1,5 +1,7 @@
<script> <script>
import { HashIcon } from "svelte-feather-icons"; import { HashIcon } from "svelte-feather-icons";
export let channel;
</script> </script>
<style> <style>
@ -38,7 +40,7 @@
} }
.message-input { .message-input {
height: 3.4em; height: 3em;
width: 100%; width: 100%;
background-color : var(--background-color-2); background-color : var(--background-color-2);
border: none; border: none;
@ -51,7 +53,7 @@
<div class="main-container"> <div class="main-container">
<div class="top-bar"> <div class="top-bar">
<HashIcon /> <HashIcon />
<span class="h5 channel-heading">channel name</span> <span class="h5 channel-heading">{ channel.name }</span>
</div> </div>
<div class="messages-container"> <div class="messages-container">

35
frontend/src/components/pages/main/Main.svelte Normal file
View file

@ -0,0 +1,35 @@
<script>
import { gatewayStatus } from "../../../stores";
import ChannelView from "./ChannelView.svelte";
import Sidebar from "./Sidebar.svelte";
</script>
<style>
.flex-container {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: row;
}
.loading-screen {
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
overflow: hidden;
background-color: var(--background-color-1);
}
</style>
{#if $gatewayStatus.ready}
<div class="flex-container">
<Sidebar />
<ChannelView channel={{ name: "channel name" }} />
</div>
{:else}
<div class="loading-screen">
connecting...
</div>
{/if}

48
frontend/src/components/Sidebar.svelte → frontend/src/components/pages/main/Sidebar.svelte
View file

@ -1,11 +1,24 @@
<script> <script>
import { HashIcon } from "svelte-feather-icons"; import { HashIcon } from "svelte-feather-icons";
import { channels } from "../../../stores";
</script> </script>
<div class="sidebar">
{#each $channels as channel (channel.id)}
<button class="sidebar-button" >
<div>
<HashIcon />
</div>
<span>{ channel.name }</span>
</button>
{/each}
</div>
<style> <style>
.sidebar { .sidebar {
height: 100%; height: 100%;
width: 255px; width: 255px;
max-width: 255px;
padding: var(--space-sm); padding: var(--space-sm);
background-color: var(--background-color-1); background-color: var(--background-color-1);
} }
@ -13,39 +26,36 @@
.sidebar-button { .sidebar-button {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: left;
border: none; border: none;
background-color: var(--background-color-1); background-color: var(--background-color-1);
padding: var(--space-sm); padding: var(--space-sm);
margin-bottom: var(--space-xxs); margin-bottom: var(--space-xxs);
color: currentColor; color: currentColor;
font: inherit; font: inherit;
width: 100%;
border-radius: var(--radius-md); border-radius: var(--radius-md);
vertical-align: middle; width: 100%;
height: 3.4em;
text-align: center;
} }
.sidebar-button span { .sidebar-button span {
margin-left: var(--space-xxs); margin-left: var(--space-xxs);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar-button div {
display: inline;
flex-shrink: 0;
/* TODO: HACK! */
width: 24px;
height: 24px;
} }
.sidebar-button:hover { .sidebar-button:hover {
background-color: var(--background-color-2); background-color: var(--background-color-2);
} }
</style> </style>
<div class="sidebar">
<button class="sidebar-button">
<HashIcon />
<span>channel name</span>
</button>
<button class="sidebar-button">
<HashIcon />
<span>channel name</span>
</button>
<button class="sidebar-button">
<HashIcon />
<span>channel name</span>
</button>
</div>

46
frontend/src/gateway.js
View file

@ -15,15 +15,26 @@ export const GatewayPayloadType = {
MessageDelete: 122, MessageDelete: 122,
} }
export const GatewayEventType = {
...GatewayPayloadType,
Open: -5,
Close: -4
}
export default { export default {
ws: null, ws: null,
authenticated: false, authenticated: false,
open: false,
heartbeatInterval: null, heartbeatInterval: null,
user: null, user: null,
channels: null, channels: null,
reconnectDelay: 400, reconnectDelay: 400,
reconnectTimeout: null, reconnectTimeout: null,
handlers: new Map(),
init() { init() {
window.__WAFFLE_GATEWAY = this;
const token = getAuthToken(); const token = getAuthToken();
if (!token) { if (!token) {
return false; return false;
@ -33,6 +44,8 @@ export default {
if (this.reconnectTimeout) { if (this.reconnectTimeout) {
clearTimeout(this.reconnectTimeout); clearTimeout(this.reconnectTimeout);
} }
this.open = true;
this.dispatch(GatewayEventType.Open, null);
console.log("[gateway] open"); console.log("[gateway] open");
}; };
this.ws.onmessage = (event) => { this.ws.onmessage = (event) => {
@ -65,6 +78,8 @@ export default {
break; break;
} }
} }
this.dispatch(payload.t, payload.d);
}; };
this.ws.onclose = () => { this.ws.onclose = () => {
if (this.reconnectDelay < 60000) { if (this.reconnectDelay < 60000) {
@ -73,6 +88,7 @@ export default {
this.authenticated = false; this.authenticated = false;
this.user = null; this.user = null;
this.channels = null; this.channels = null;
this.open = false;
if (this.heartbeatInterval) { if (this.heartbeatInterval) {
clearInterval(this.heartbeatInterval); clearInterval(this.heartbeatInterval);
} }
@ -80,6 +96,8 @@ export default {
this.init(); this.init();
}, this.reconnectDelay); }, this.reconnectDelay);
this.dispatch(GatewayEventType.Close, null);
console.log("[gateway] close"); console.log("[gateway] close");
}; };
@ -87,5 +105,33 @@ export default {
}, },
send(data) { send(data) {
return this.ws.send(JSON.stringify(data)); return this.ws.send(JSON.stringify(data));
},
dispatch(event, payload) {
const eventHandlers = this.handlers.get(event);
if (!eventHandlers)
return;
eventHandlers.forEach((e) => {
e(payload);
});
},
subscribe(event, handler) {
if (!this.handlers.get(event)) {
this.handlers.set(event, new Set());
}
this.handlers.get(event).add(handler);
return handler; // can later be used for unsubscribe()
},
unsubscribe(event, handler) {
const eventHandlers = this.handlers.get(event);
if (!eventHandlers)
return;
eventHandlers.delete(handler);
if (eventHandlers.size < 1) {
this.handlers.delete(event);
}
} }
}; };

6
frontend/src/main.js
View file

@ -5,6 +5,12 @@ import { initStorageDefaults } from './storage';
initStorageDefaults(); initStorageDefaults();
gateway.init(); gateway.init();
// Remove loading screen
const loadingElement = document.getElementById("pre--loading-screen");
if (loadingElement) {
loadingElement.parentElement.removeChild(loadingElement);
}
const app = new App({ const app = new App({
target: document.body target: document.body
}); });

112
frontend/src/stores.js Normal file
View file

@ -0,0 +1,112 @@
import gateway, { GatewayEventType } from "./gateway";
class Store {
constructor() {
this._handlers = [];
this._didInit = false;
}
_tryInit() {
if (!this._didInit && this._init) {
this._init();
this._didInit = true;
}
}
subscribe(handler) {
this._tryInit();
const newLength = this._handlers.push(handler);
const handlerIndex = newLength - 1;
handler(this._value);
return () => {
this._handlers.splice(handlerIndex, 1);
};
}
_dispatchUpdate() {
this._handlers.forEach(e => {
e(this._value);
});
}
}
class ChannelsStore extends Store {
constructor() {
super();
this._value = [];
}
_init() {
const channels = gateway.channels;
if (channels) {
this._value = channels;
}
gateway.subscribe(GatewayEventType.Ready, ({ channels }) => {
if (channels) {
this._value = channels;
}
this._dispatchUpdate();
});
gateway.subscribe(GatewayEventType.ChannelCreate, (channel) => {
this._value.push(channel);
this._dispatchUpdate();
});
gateway.subscribe(GatewayEventType.ChannelDelete, ({ id }) => {
const index = this._value.findIndex(e => e.id === id);
if (!index)
return;
this._value.splice(index, 1);
this._dispatchUpdate();
});
gateway.subscribe(GatewayEventType.ChannelUpdate, (data) => {
const index = this._value.findIndex(e => e.id === data.id);
if (!index)
return;
if (!this._value[index])
return;
this._value[index] = data;
this._dispatchUpdate();
});
}
}
class GatewayStatusStore extends Store {
constructor() {
super();
this._value = { open: false, ready: false };
}
_init() {
this._value.open = gateway.open;
this._value.ready = gateway.authenticated;
gateway.subscribe(GatewayEventType.Open, () => {
this._value.open = true;
this._dispatchUpdate();
});
gateway.subscribe(GatewayEventType.Close, () => {
this._value.open = false;
this._value.ready = false;
this._dispatchUpdate();
});
gateway.subscribe(GatewayEventType.Ready, () => {
this._value.ready = true;
this._dispatchUpdate();
});
}
}
export const channels = new ChannelsStore();
export const gatewayStatus = new GatewayStatusStore();

2
src/gateway/index.ts
View file

@ -221,7 +221,7 @@ export default function(server: Server) {
sessions.add(ws); sessions.add(ws);
// TODO: each user should have their own list of channels that they join // TODO: each user should have their own list of channels that they join
const channels = await query("SELECT id, name, owner_id FROM channels"); const channels = await query("SELECT id, name, owner_id FROM channels ORDER BY id ASC");
clientSubscribe(ws, "*"); clientSubscribe(ws, "*");
channels.rows.forEach(c => { channels.rows.forEach(c => {

34
test.rest
View file

@ -19,65 +19,65 @@ content-type: application/json
### ###
GET http://localhost:3000/api/v1/users/self HTTP/1.1 GET http://localhost:3000/api/v1/users/self HTTP/1.1
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MiwidHlwZSI6MSwiaWF0IjoxNjQ5NzAwMTE0LCJleHAiOjE2NDk4NzI5MTR9.EOn8MBHZLCxfU5fHc0ZY2x9p3y-_RdD7X915L1B6Ftc Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwidHlwZSI6MSwiaWF0IjoxNjUwMjA1MDEwLCJleHAiOjE2NTAzNzc4MTB9.ITaXBm7zVxh_s5xrCFXM1ScVL-igGJf1Qz2l_tLZf4A
### ###
POST http://localhost:3000/api/v1/channels HTTP/1.1 POST http://localhost:3000/api/v1/channels HTTP/1.1
content-type: application/json content-type: application/json
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MiwidHlwZSI6MSwiaWF0IjoxNjQ5NzAwMTE0LCJleHAiOjE2NDk4NzI5MTR9.EOn8MBHZLCxfU5fHc0ZY2x9p3y-_RdD7X915L1B6Ftc Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwidHlwZSI6MSwiaWF0IjoxNjUwMjA1MDEwLCJleHAiOjE2NTAzNzc4MTB9.ITaXBm7zVxh_s5xrCFXM1ScVL-igGJf1Qz2l_tLZf4A
{ {
"name": "yet another channelllll" "name": "channel 4"
} }
### ###
PUT http://localhost:3000/api/v1/channels/8 HTTP/1.1 PUT http://localhost:3000/api/v1/channels/7 HTTP/1.1
content-type: application/json content-type: application/json
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MiwidHlwZSI6MSwiaWF0IjoxNjQ5NzAwMTE0LCJleHAiOjE2NDk4NzI5MTR9.EOn8MBHZLCxfU5fHc0ZY2x9p3y-_RdD7X915L1B6Ftc Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwidHlwZSI6MSwiaWF0IjoxNjUwMjA1MDEwLCJleHAiOjE2NTAzNzc4MTB9.ITaXBm7zVxh_s5xrCFXM1ScVL-igGJf1Qz2l_tLZf4A
#Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MiwidHlwZSI6MSwiaWF0IjoxNjQ5MjU5NDUwLCJleHAiOjE2NDk0MzIyNTB9.JmF9NujFZnln7A-ynNpeyayGBqmR5poAyACYV6RnSQY #Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MiwidHlwZSI6MSwiaWF0IjoxNjQ5MjU5NDUwLCJleHAiOjE2NDk0MzIyNTB9.JmF9NujFZnln7A-ynNpeyayGBqmR5poAyACYV6RnSQY
{ {
"name": "this is my channelaaaaaa" "name": "modified channel 2"
} }
### ###
DELETE http://localhost:3000/api/v1/channels/1 HTTP/1.1 DELETE http://localhost:3000/api/v1/channels/9 HTTP/1.1
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MiwidHlwZSI6MSwiaWF0IjoxNjQ5NzAwMTE0LCJleHAiOjE2NDk4NzI5MTR9.EOn8MBHZLCxfU5fHc0ZY2x9p3y-_RdD7X915L1B6Ftc Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwidHlwZSI6MSwiaWF0IjoxNjUwMjA1MDEwLCJleHAiOjE2NTAzNzc4MTB9.ITaXBm7zVxh_s5xrCFXM1ScVL-igGJf1Qz2l_tLZf4A
#Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MiwidHlwZSI6MSwiaWF0IjoxNjQ5MjU5NDUwLCJleHAiOjE2NDk0MzIyNTB9.JmF9NujFZnln7A-ynNpeyayGBqmR5poAyACYV6RnSQY #Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MiwidHlwZSI6MSwiaWF0IjoxNjQ5MjU5NDUwLCJleHAiOjE2NDk0MzIyNTB9.JmF9NujFZnln7A-ynNpeyayGBqmR5poAyACYV6RnSQY
### ###
GET http://localhost:3000/api/v1/channels/1 HTTP/1.1 GET http://localhost:3000/api/v1/channels/1 HTTP/1.1
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MiwidHlwZSI6MSwiaWF0IjoxNjQ5NzAwMTE0LCJleHAiOjE2NDk4NzI5MTR9.EOn8MBHZLCxfU5fHc0ZY2x9p3y-_RdD7X915L1B6Ftc Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwidHlwZSI6MSwiaWF0IjoxNjUwMjA1MDEwLCJleHAiOjE2NTAzNzc4MTB9.ITaXBm7zVxh_s5xrCFXM1ScVL-igGJf1Qz2l_tLZf4A
### ###
GET http://localhost:3000/api/v1/channels HTTP/1.1 GET http://localhost:3000/api/v1/channels HTTP/1.1
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MiwidHlwZSI6MSwiaWF0IjoxNjQ5NzAwMTE0LCJleHAiOjE2NDk4NzI5MTR9.EOn8MBHZLCxfU5fHc0ZY2x9p3y-_RdD7X915L1B6Ftc Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwidHlwZSI6MSwiaWF0IjoxNjUwMjA1MDEwLCJleHAiOjE2NTAzNzc4MTB9.ITaXBm7zVxh_s5xrCFXM1ScVL-igGJf1Qz2l_tLZf4A
### ###
POST http://localhost:3000/api/v1/channels/5/messages HTTP/1.1 POST http://localhost:3000/api/v1/channels/1/messages HTTP/1.1
content-type: application/json content-type: application/json
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MiwidHlwZSI6MSwiaWF0IjoxNjQ5NzAwMTE0LCJleHAiOjE2NDk4NzI5MTR9.EOn8MBHZLCxfU5fHc0ZY2x9p3y-_RdD7X915L1B6Ftc Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwidHlwZSI6MSwiaWF0IjoxNjUwMjA1MDEwLCJleHAiOjE2NTAzNzc4MTB9.ITaXBm7zVxh_s5xrCFXM1ScVL-igGJf1Qz2l_tLZf4A
{ {
"content": "i hate cheese" "content": "i love cheese"
} }
### ###
GET http://localhost:3000/api/v1/channels/5/messages HTTP/1.1 GET http://localhost:3000/api/v1/channels/5/messages HTTP/1.1
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MiwidHlwZSI6MSwiaWF0IjoxNjQ5NzAwMTE0LCJleHAiOjE2NDk4NzI5MTR9.EOn8MBHZLCxfU5fHc0ZY2x9p3y-_RdD7X915L1B6Ftc Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwidHlwZSI6MSwiaWF0IjoxNjUwMjA1MDEwLCJleHAiOjE2NTAzNzc4MTB9.ITaXBm7zVxh_s5xrCFXM1ScVL-igGJf1Qz2l_tLZf4A
### ###
PUT http://localhost:3000/api/v1/messages/3 HTTP/1.1 PUT http://localhost:3000/api/v1/messages/3 HTTP/1.1
content-type: application/json content-type: application/json
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MiwidHlwZSI6MSwiaWF0IjoxNjQ5NzAwMTE0LCJleHAiOjE2NDk4NzI5MTR9.EOn8MBHZLCxfU5fHc0ZY2x9p3y-_RdD7X915L1B6Ftc Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwidHlwZSI6MSwiaWF0IjoxNjUwMjA1MDEwLCJleHAiOjE2NTAzNzc4MTB9.ITaXBm7zVxh_s5xrCFXM1ScVL-igGJf1Qz2l_tLZf4A
{ {
"content": "hello again!" "content": "hello again!"
@ -86,9 +86,9 @@ Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MiwidHlwZSI6M
### ###
GET http://localhost:3000/api/v1/messages/3 GET http://localhost:3000/api/v1/messages/3
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MiwidHlwZSI6MSwiaWF0IjoxNjQ5NzAwMTE0LCJleHAiOjE2NDk4NzI5MTR9.EOn8MBHZLCxfU5fHc0ZY2x9p3y-_RdD7X915L1B6Ftc Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwidHlwZSI6MSwiaWF0IjoxNjUwMjA1MDEwLCJleHAiOjE2NTAzNzc4MTB9.ITaXBm7zVxh_s5xrCFXM1ScVL-igGJf1Qz2l_tLZf4A
### ###
DELETE http://localhost:3000/api/v1/messages/2 HTTP/1.1 DELETE http://localhost:3000/api/v1/messages/2 HTTP/1.1
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MiwidHlwZSI6MSwiaWF0IjoxNjQ5NzAwMTE0LCJleHAiOjE2NDk4NzI5MTR9.EOn8MBHZLCxfU5fHc0ZY2x9p3y-_RdD7X915L1B6Ftc Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwidHlwZSI6MSwiaWF0IjoxNjUwMjA1MDEwLCJleHAiOjE2NTAzNzc4MTB9.ITaXBm7zVxh_s5xrCFXM1ScVL-igGJf1Qz2l_tLZf4A