From 7bdce37fd3f18e2712e18c4e2c64cac69af0aca1 Mon Sep 17 00:00:00 2001 From: Jakob Stendahl Date: Sun, 19 Sep 2021 19:43:11 +0200 Subject: :boom: Introduce new UI based on svelte, and rewrite a lot of the node app and the NeoRuntime --- src_frontend/App.svelte | 110 ++++++++ src_frontend/ComponentLib/Button/Button.svelte | 80 ++++++ .../ComponentLib/Button/FloatingButton.svelte | 104 ++++++++ src_frontend/ComponentLib/FloatingSelect.svelte | 45 ++++ src_frontend/ComponentLib/Input.svelte | 14 + src_frontend/ComponentLib/PrettyVar.svelte | 16 ++ src_frontend/ComponentLib/RoundRange.svelte | 169 ++++++++++++ .../Components/Dialogs/ConfirmActionDialog.svelte | 59 ++++ src_frontend/Components/Editor/Controls.svelte | 83 ++++++ src_frontend/Components/Editor/Editor.svelte | 296 +++++++++++++++++++++ src_frontend/Components/Editor/Output.svelte | 54 ++++ src_frontend/Components/Editor/Pane.svelte | 41 +++ src_frontend/Components/Editor/TopBar.svelte | 62 +++++ src_frontend/Components/LEDConfig/LEDConfig.svelte | 204 ++++++++++++++ .../Components/LEDConfig/MatrixSegment.svelte | 57 ++++ src_frontend/Components/LEDConfig/Segment.svelte | 38 +++ src_frontend/Components/Logs/Logs.svelte | 10 + .../Components/MainControls/ControlColors.svelte | 107 ++++++++ .../MainControls/ControlComponents.svelte | 139 ++++++++++ .../Components/MainControls/ControlOthers.svelte | 36 +++ src_frontend/Components/MainMenu.svelte | 80 ++++++ src_frontend/Components/ModeList/Mode.svelte | 57 ++++ src_frontend/Components/ModeList/ModeList.svelte | 64 +++++ .../Components/ModeList/NewModeDialog.svelte | 153 +++++++++++ src_frontend/Components/NotImplemented.svelte | 7 + src_frontend/Components/Notifs/Notif.svelte | 126 +++++++++ .../Components/Notifs/NotifsWrapper.svelte | 33 +++ .../Components/Settings/CreateEditUser.svelte | 93 +++++++ .../Components/Settings/InstanceName.svelte | 36 +++ src_frontend/Components/Settings/SSLCert.svelte | 57 ++++ src_frontend/Components/Settings/Settings.svelte | 25 ++ src_frontend/Components/Settings/System.svelte | 34 +++ src_frontend/Components/Settings/Users.svelte | 93 +++++++ src_frontend/Components/Settings/Version.svelte | 60 +++++ src_frontend/layout/Desktop.svelte | 48 ++++ src_frontend/layout/Drawer.svelte | 38 +++ src_frontend/layout/Phone.svelte | 50 ++++ src_frontend/main.js | 7 + src_frontend/routes/EditorRoute.svelte | 9 + src_frontend/routes/LoginRoute.svelte | 106 ++++++++ src_frontend/routes/MainRoute.svelte | 61 +++++ src_frontend/routes/UnknownRoute.svelte | 21 ++ src_frontend/routes/WidgetRoute.svelte | 130 +++++++++ src_frontend/stores/notifs.js | 24 ++ src_frontend/stores/socketStore.js | 112 ++++++++ 45 files changed, 3248 insertions(+) create mode 100644 src_frontend/App.svelte create mode 100644 src_frontend/ComponentLib/Button/Button.svelte create mode 100644 src_frontend/ComponentLib/Button/FloatingButton.svelte create mode 100644 src_frontend/ComponentLib/FloatingSelect.svelte create mode 100644 src_frontend/ComponentLib/Input.svelte create mode 100644 src_frontend/ComponentLib/PrettyVar.svelte create mode 100644 src_frontend/ComponentLib/RoundRange.svelte create mode 100644 src_frontend/Components/Dialogs/ConfirmActionDialog.svelte create mode 100644 src_frontend/Components/Editor/Controls.svelte create mode 100644 src_frontend/Components/Editor/Editor.svelte create mode 100644 src_frontend/Components/Editor/Output.svelte create mode 100644 src_frontend/Components/Editor/Pane.svelte create mode 100644 src_frontend/Components/Editor/TopBar.svelte create mode 100644 src_frontend/Components/LEDConfig/LEDConfig.svelte create mode 100644 src_frontend/Components/LEDConfig/MatrixSegment.svelte create mode 100644 src_frontend/Components/LEDConfig/Segment.svelte create mode 100644 src_frontend/Components/Logs/Logs.svelte create mode 100644 src_frontend/Components/MainControls/ControlColors.svelte create mode 100644 src_frontend/Components/MainControls/ControlComponents.svelte create mode 100644 src_frontend/Components/MainControls/ControlOthers.svelte create mode 100644 src_frontend/Components/MainMenu.svelte create mode 100644 src_frontend/Components/ModeList/Mode.svelte create mode 100644 src_frontend/Components/ModeList/ModeList.svelte create mode 100644 src_frontend/Components/ModeList/NewModeDialog.svelte create mode 100644 src_frontend/Components/NotImplemented.svelte create mode 100644 src_frontend/Components/Notifs/Notif.svelte create mode 100644 src_frontend/Components/Notifs/NotifsWrapper.svelte create mode 100644 src_frontend/Components/Settings/CreateEditUser.svelte create mode 100644 src_frontend/Components/Settings/InstanceName.svelte create mode 100644 src_frontend/Components/Settings/SSLCert.svelte create mode 100644 src_frontend/Components/Settings/Settings.svelte create mode 100644 src_frontend/Components/Settings/System.svelte create mode 100644 src_frontend/Components/Settings/Users.svelte create mode 100644 src_frontend/Components/Settings/Version.svelte create mode 100644 src_frontend/layout/Desktop.svelte create mode 100644 src_frontend/layout/Drawer.svelte create mode 100644 src_frontend/layout/Phone.svelte create mode 100644 src_frontend/main.js create mode 100644 src_frontend/routes/EditorRoute.svelte create mode 100644 src_frontend/routes/LoginRoute.svelte create mode 100644 src_frontend/routes/MainRoute.svelte create mode 100644 src_frontend/routes/UnknownRoute.svelte create mode 100644 src_frontend/routes/WidgetRoute.svelte create mode 100644 src_frontend/stores/notifs.js create mode 100644 src_frontend/stores/socketStore.js (limited to 'src_frontend') diff --git a/src_frontend/App.svelte b/src_frontend/App.svelte new file mode 100644 index 0000000..e95f316 --- /dev/null +++ b/src_frontend/App.svelte @@ -0,0 +1,110 @@ + + + + +{#if $connected} + +{:else if $reconnecting} +
+
+
Lost connection to server, attempting to reconnect...
+
+{:else} +
+
+
No server connection, attempting to connect...
+
+{/if} \ No newline at end of file diff --git a/src_frontend/ComponentLib/Button/Button.svelte b/src_frontend/ComponentLib/Button/Button.svelte new file mode 100644 index 0000000..3943ecf --- /dev/null +++ b/src_frontend/ComponentLib/Button/Button.svelte @@ -0,0 +1,80 @@ + + + + + \ No newline at end of file diff --git a/src_frontend/ComponentLib/Button/FloatingButton.svelte b/src_frontend/ComponentLib/Button/FloatingButton.svelte new file mode 100644 index 0000000..123debc --- /dev/null +++ b/src_frontend/ComponentLib/Button/FloatingButton.svelte @@ -0,0 +1,104 @@ + + + + +
+ + {#if label != null} + {label} + {/if} +
\ No newline at end of file diff --git a/src_frontend/ComponentLib/FloatingSelect.svelte b/src_frontend/ComponentLib/FloatingSelect.svelte new file mode 100644 index 0000000..0d71ca7 --- /dev/null +++ b/src_frontend/ComponentLib/FloatingSelect.svelte @@ -0,0 +1,45 @@ + + + + + + \ No newline at end of file diff --git a/src_frontend/ComponentLib/Input.svelte b/src_frontend/ComponentLib/Input.svelte new file mode 100644 index 0000000..ecbaefb --- /dev/null +++ b/src_frontend/ComponentLib/Input.svelte @@ -0,0 +1,14 @@ + + + + +
+ +
\ No newline at end of file diff --git a/src_frontend/ComponentLib/PrettyVar.svelte b/src_frontend/ComponentLib/PrettyVar.svelte new file mode 100644 index 0000000..68f082f --- /dev/null +++ b/src_frontend/ComponentLib/PrettyVar.svelte @@ -0,0 +1,16 @@ + + +{prettyVarText} diff --git a/src_frontend/ComponentLib/RoundRange.svelte b/src_frontend/ComponentLib/RoundRange.svelte new file mode 100644 index 0000000..42c4d57 --- /dev/null +++ b/src_frontend/ComponentLib/RoundRange.svelte @@ -0,0 +1,169 @@ + + + + + + + + + + + + {value}% + \ No newline at end of file diff --git a/src_frontend/Components/Dialogs/ConfirmActionDialog.svelte b/src_frontend/Components/Dialogs/ConfirmActionDialog.svelte new file mode 100644 index 0000000..185c743 --- /dev/null +++ b/src_frontend/Components/Dialogs/ConfirmActionDialog.svelte @@ -0,0 +1,59 @@ + + + + + + +

{title}

+

{text}

+
+
+
+
+ \ No newline at end of file diff --git a/src_frontend/Components/Editor/Controls.svelte b/src_frontend/Components/Editor/Controls.svelte new file mode 100644 index 0000000..302aa7a --- /dev/null +++ b/src_frontend/Components/Editor/Controls.svelte @@ -0,0 +1,83 @@ + + + + +
+
+ + +
+
+ +
+ + {brightnessValue} +
+
+ + {#each Object.entries(variables) as [name, value]} +
+ + +
+ {/each} +
\ No newline at end of file diff --git a/src_frontend/Components/Editor/Editor.svelte b/src_frontend/Components/Editor/Editor.svelte new file mode 100644 index 0000000..b63ee9b --- /dev/null +++ b/src_frontend/Components/Editor/Editor.svelte @@ -0,0 +1,296 @@ + + + + + + +
+
+ + +
+ +
+ + + + +
+ +
+ +
+ + + +
+
diff --git a/src_frontend/Components/Editor/Output.svelte b/src_frontend/Components/Editor/Output.svelte new file mode 100644 index 0000000..dcd5995 --- /dev/null +++ b/src_frontend/Components/Editor/Output.svelte @@ -0,0 +1,54 @@ + + + + +
+ 
+        {@html htmlCode}
+
+
\ No newline at end of file diff --git a/src_frontend/Components/Editor/Pane.svelte b/src_frontend/Components/Editor/Pane.svelte new file mode 100644 index 0000000..143c569 --- /dev/null +++ b/src_frontend/Components/Editor/Pane.svelte @@ -0,0 +1,41 @@ + + + + +
+
+

{header}

+
+
+ +
+
\ No newline at end of file diff --git a/src_frontend/Components/Editor/TopBar.svelte b/src_frontend/Components/Editor/TopBar.svelte new file mode 100644 index 0000000..c74adf0 --- /dev/null +++ b/src_frontend/Components/Editor/TopBar.svelte @@ -0,0 +1,62 @@ + + + + +
+
+
+ + + {#if hasChange} + (not saved) + {/if} + +
+
+ {#if procIsRunning} + + + {:else} + + {/if} +
+
\ No newline at end of file diff --git a/src_frontend/Components/LEDConfig/LEDConfig.svelte b/src_frontend/Components/LEDConfig/LEDConfig.svelte new file mode 100644 index 0000000..2cf9aa2 --- /dev/null +++ b/src_frontend/Components/LEDConfig/LEDConfig.svelte @@ -0,0 +1,204 @@ + + + + +
+

Segments

+

Here you are defining the "segments" of your light-display. Use this to split the strip in stairs, blocks or any other configuration. Normally you would define a segment, for each cut you have made in the strip. But you could do other things to get fancy results. Each segment will be represented in the "matrix", by the number just below the number. Each segment should have it's own box below.

+ +
+ {#each segments as segment, i} +
+ +
+ {/each} + + +
+ +

Matrix

+

Here you are defining your matrix. A matrix is really nothing more than a 2-dimentional array, or a list of lists. This is not a mathematical array, meaning each "row" can have different lengths. Use this to stitch your segments together. Each "box" should contain the number of the segment it is representing. By pressing the double-arrows on the box, you can "invert" a segment. This means counting from the other end. Use this if you have the segments in a snake-layout.

+ +
+ {#each matrix as row, i} +
+ {#each row as cell} +
+ +
+ {/each} + + +
+ {/each} + + +
+ +

Advanced

+
+ + + + + + + + + + + + + + + +
+
\ No newline at end of file diff --git a/src_frontend/Components/LEDConfig/MatrixSegment.svelte b/src_frontend/Components/LEDConfig/MatrixSegment.svelte new file mode 100644 index 0000000..c2c1934 --- /dev/null +++ b/src_frontend/Components/LEDConfig/MatrixSegment.svelte @@ -0,0 +1,57 @@ + + + + +
+ + +
\ No newline at end of file diff --git a/src_frontend/Components/LEDConfig/Segment.svelte b/src_frontend/Components/LEDConfig/Segment.svelte new file mode 100644 index 0000000..3b71451 --- /dev/null +++ b/src_frontend/Components/LEDConfig/Segment.svelte @@ -0,0 +1,38 @@ + + + + +
+ + {id} +
\ No newline at end of file diff --git a/src_frontend/Components/Logs/Logs.svelte b/src_frontend/Components/Logs/Logs.svelte new file mode 100644 index 0000000..a7256ae --- /dev/null +++ b/src_frontend/Components/Logs/Logs.svelte @@ -0,0 +1,10 @@ + + + +
+ +
\ No newline at end of file diff --git a/src_frontend/Components/MainControls/ControlColors.svelte b/src_frontend/Components/MainControls/ControlColors.svelte new file mode 100644 index 0000000..5d21cc0 --- /dev/null +++ b/src_frontend/Components/MainControls/ControlColors.svelte @@ -0,0 +1,107 @@ + + + + +
+
+
+ {#each Object.keys(colorVariables) as colorVar} + + + + {/each} +
+
\ No newline at end of file diff --git a/src_frontend/Components/MainControls/ControlComponents.svelte b/src_frontend/Components/MainControls/ControlComponents.svelte new file mode 100644 index 0000000..5f6d165 --- /dev/null +++ b/src_frontend/Components/MainControls/ControlComponents.svelte @@ -0,0 +1,139 @@ + + + + +
+

{name}

+ + +
+ +
+ + {#each Object.entries(allModes) as [modePath, modes]} + + {#each modes as mode} + + {/each} + + {/each} + +
+
+ + {#if Object.keys(colorVariables).length > 0} + + {/if} + +
\ No newline at end of file diff --git a/src_frontend/Components/MainControls/ControlOthers.svelte b/src_frontend/Components/MainControls/ControlOthers.svelte new file mode 100644 index 0000000..862a4f5 --- /dev/null +++ b/src_frontend/Components/MainControls/ControlOthers.svelte @@ -0,0 +1,36 @@ + + + + +
+ {#each variables as variable} + + {#if variable.type == "range"} + + {:else} + + {/if} + {/each} +
\ No newline at end of file diff --git a/src_frontend/Components/MainMenu.svelte b/src_frontend/Components/MainMenu.svelte new file mode 100644 index 0000000..7de36a5 --- /dev/null +++ b/src_frontend/Components/MainMenu.svelte @@ -0,0 +1,80 @@ + + + + +
+ {#each Object.entries(menuItems) as [id, menuItem]} + {#if menuItem.type == "item"} + {menuItem.name} + {:else if menuItem.type == "abslink"} + {menuItem.name} + {:else if menuItem.type == "seperator"} +
+ {/if} + {/each} +
\ No newline at end of file diff --git a/src_frontend/Components/ModeList/Mode.svelte b/src_frontend/Components/ModeList/Mode.svelte new file mode 100644 index 0000000..67752c2 --- /dev/null +++ b/src_frontend/Components/ModeList/Mode.svelte @@ -0,0 +1,57 @@ + + + + +
+ {id} +
+ + + + + + +
+
\ No newline at end of file diff --git a/src_frontend/Components/ModeList/ModeList.svelte b/src_frontend/Components/ModeList/ModeList.svelte new file mode 100644 index 0000000..8bac3f9 --- /dev/null +++ b/src_frontend/Components/ModeList/ModeList.svelte @@ -0,0 +1,64 @@ + + + + +
+

Modes

+
+ {#each userModes as mode} +
+ +
+ {/each} +
+ +
+ + + + + +
+
\ No newline at end of file diff --git a/src_frontend/Components/ModeList/NewModeDialog.svelte b/src_frontend/Components/ModeList/NewModeDialog.svelte new file mode 100644 index 0000000..539e3ef --- /dev/null +++ b/src_frontend/Components/ModeList/NewModeDialog.svelte @@ -0,0 +1,153 @@ + + + + + + + +
+ { activeTab = 0; }} class="far fa-file"> + { activeTab = 1; }} class="far fa-clone"> +
+ +
+
+ {#if [0, 1].includes(activeTab)} +
+ + + {#if activeTab == 1} + + + {/if} +
+ {/if} +
+
+
+
+
+ + \ No newline at end of file diff --git a/src_frontend/Components/NotImplemented.svelte b/src_frontend/Components/NotImplemented.svelte new file mode 100644 index 0000000..a3f385a --- /dev/null +++ b/src_frontend/Components/NotImplemented.svelte @@ -0,0 +1,7 @@ + + +
+ Sorry, this functionality is not implemented yet... +
\ No newline at end of file diff --git a/src_frontend/Components/Notifs/Notif.svelte b/src_frontend/Components/Notifs/Notif.svelte new file mode 100644 index 0000000..c8ef807 --- /dev/null +++ b/src_frontend/Components/Notifs/Notif.svelte @@ -0,0 +1,126 @@ + + + + +
+
+ {#if title} +

{title}

+ {/if} +

{text}

+
+
+ removeNotif(nid)}>× +
+
\ No newline at end of file diff --git a/src_frontend/Components/Notifs/NotifsWrapper.svelte b/src_frontend/Components/Notifs/NotifsWrapper.svelte new file mode 100644 index 0000000..e68e2e2 --- /dev/null +++ b/src_frontend/Components/Notifs/NotifsWrapper.svelte @@ -0,0 +1,33 @@ + + + + +
+{#each $notifs as notification (notification.id)} + +{/each} +
\ No newline at end of file diff --git a/src_frontend/Components/Settings/CreateEditUser.svelte b/src_frontend/Components/Settings/CreateEditUser.svelte new file mode 100644 index 0000000..ca87336 --- /dev/null +++ b/src_frontend/Components/Settings/CreateEditUser.svelte @@ -0,0 +1,93 @@ + + + + + + +
+

+ {#if newUser} + Create user + {:else} + Edit user + {/if} +

+ + + + +
+
+
+ {#if newUser} +
+ {:else} +
+ {/if} +
+ + \ No newline at end of file diff --git a/src_frontend/Components/Settings/InstanceName.svelte b/src_frontend/Components/Settings/InstanceName.svelte new file mode 100644 index 0000000..6d1892a --- /dev/null +++ b/src_frontend/Components/Settings/InstanceName.svelte @@ -0,0 +1,36 @@ + + + + +
+

Name

+ +
diff --git a/src_frontend/Components/Settings/SSLCert.svelte b/src_frontend/Components/Settings/SSLCert.svelte new file mode 100644 index 0000000..adb3649 --- /dev/null +++ b/src_frontend/Components/Settings/SSLCert.svelte @@ -0,0 +1,57 @@ + + + + +
+

SSL Certificate

+

{isValid ? "VALID" : "INVALID"} (for {validTime} days)

+

CN {CN}

+ + + +
Generate new cerificate
+ + + +
diff --git a/src_frontend/Components/Settings/Settings.svelte b/src_frontend/Components/Settings/Settings.svelte new file mode 100644 index 0000000..b95f1ac --- /dev/null +++ b/src_frontend/Components/Settings/Settings.svelte @@ -0,0 +1,25 @@ + + + + +
+ + + + + +
\ No newline at end of file diff --git a/src_frontend/Components/Settings/System.svelte b/src_frontend/Components/Settings/System.svelte new file mode 100644 index 0000000..1af4531 --- /dev/null +++ b/src_frontend/Components/Settings/System.svelte @@ -0,0 +1,34 @@ + + + + +
+

System restart

+ + +
Restart system
+ + + + +
Restart service
+ + +
\ No newline at end of file diff --git a/src_frontend/Components/Settings/Users.svelte b/src_frontend/Components/Settings/Users.svelte new file mode 100644 index 0000000..7e68c3a --- /dev/null +++ b/src_frontend/Components/Settings/Users.svelte @@ -0,0 +1,93 @@ + + + + +
+

Users

+
    + {#each usersList as _user} +
  • + {_user} +
    + {#if $user?.username != _user} + {deleteUser(_user)}}> + + + + + {/if} + + + + + +
    +
    • + {/each} +
+ + +
Create new user
+ + +
\ No newline at end of file diff --git a/src_frontend/Components/Settings/Version.svelte b/src_frontend/Components/Settings/Version.svelte new file mode 100644 index 0000000..29d04ae --- /dev/null +++ b/src_frontend/Components/Settings/Version.svelte @@ -0,0 +1,60 @@ + + + + +
+

Version

+

Current version

+

Current branch

+ {#if newVer != version} +

Version available.

+ {/if} +
+ Check for updates +
+
\ No newline at end of file diff --git a/src_frontend/layout/Desktop.svelte b/src_frontend/layout/Desktop.svelte new file mode 100644 index 0000000..e90a4a2 --- /dev/null +++ b/src_frontend/layout/Desktop.svelte @@ -0,0 +1,48 @@ + + + + + +
+ +
+
+ +
+
\ No newline at end of file diff --git a/src_frontend/layout/Drawer.svelte b/src_frontend/layout/Drawer.svelte new file mode 100644 index 0000000..abf41fd --- /dev/null +++ b/src_frontend/layout/Drawer.svelte @@ -0,0 +1,38 @@ + + + + +
+ +
\ No newline at end of file diff --git a/src_frontend/layout/Phone.svelte b/src_frontend/layout/Phone.svelte new file mode 100644 index 0000000..dc8d69a --- /dev/null +++ b/src_frontend/layout/Phone.svelte @@ -0,0 +1,50 @@ + + + + + +
+
+
+
Luxcena NEO
+
+
+ + + + + +
\ No newline at end of file diff --git a/src_frontend/main.js b/src_frontend/main.js new file mode 100644 index 0000000..4c473fa --- /dev/null +++ b/src_frontend/main.js @@ -0,0 +1,7 @@ +import App from './App.svelte'; + +const app = new App({ + target: document.body +}); + +export default app; \ No newline at end of file diff --git a/src_frontend/routes/EditorRoute.svelte b/src_frontend/routes/EditorRoute.svelte new file mode 100644 index 0000000..283f8db --- /dev/null +++ b/src_frontend/routes/EditorRoute.svelte @@ -0,0 +1,9 @@ + + + + \ No newline at end of file diff --git a/src_frontend/routes/LoginRoute.svelte b/src_frontend/routes/LoginRoute.svelte new file mode 100644 index 0000000..1f9ef45 --- /dev/null +++ b/src_frontend/routes/LoginRoute.svelte @@ -0,0 +1,106 @@ + + + + +
+ +
\ No newline at end of file diff --git a/src_frontend/routes/MainRoute.svelte b/src_frontend/routes/MainRoute.svelte new file mode 100644 index 0000000..30a689c --- /dev/null +++ b/src_frontend/routes/MainRoute.svelte @@ -0,0 +1,61 @@ + + + + + diff --git a/src_frontend/routes/UnknownRoute.svelte b/src_frontend/routes/UnknownRoute.svelte new file mode 100644 index 0000000..eb649dd --- /dev/null +++ b/src_frontend/routes/UnknownRoute.svelte @@ -0,0 +1,21 @@ + + + + +
+
+ Unknown path ({params.wild})... +
+
\ No newline at end of file diff --git a/src_frontend/routes/WidgetRoute.svelte b/src_frontend/routes/WidgetRoute.svelte new file mode 100644 index 0000000..a3bbbe7 --- /dev/null +++ b/src_frontend/routes/WidgetRoute.svelte @@ -0,0 +1,130 @@ + + + + +
+
+ {instanceName} +
+
+ +
+
+ +
+
\ No newline at end of file diff --git a/src_frontend/stores/notifs.js b/src_frontend/stores/notifs.js new file mode 100644 index 0000000..f117f18 --- /dev/null +++ b/src_frontend/stores/notifs.js @@ -0,0 +1,24 @@ +import { writable } from "svelte/store"; +import { nanoid } from 'nanoid' + +export const notifs = writable([]); + +export function notif(notification) { + let _notif = { + id: nanoid(), + timeout: 10000, + ...notification + } + notifs.update(_notifs => { + setTimeout(() => { + removeNotif(_notif.id) + }, _notif.timeout); + return [..._notifs, _notif]; + }); +} + +export function removeNotif(notifId) { + notifs.update(_notifs => { + return _notifs.filter(n => n.id !== notifId); + }); +} diff --git a/src_frontend/stores/socketStore.js b/src_frontend/stores/socketStore.js new file mode 100644 index 0000000..d87a075 --- /dev/null +++ b/src_frontend/stores/socketStore.js @@ -0,0 +1,112 @@ +import { writable, derived, get } from "svelte/store"; +import { replace } from "svelte-spa-router"; +import { io } from 'socket.io-client'; +import {location, querystring} from 'svelte-spa-router' + +export const openSocket = io("/open"); +export let openSocketConnected = writable(false); +export let openSocketReconnecting = writable(false); + +openSocket.on("connect", () => { + openSocketConnected.set(true); +}); +openSocket.on("disconnect", () => { + openSocketConnected.set(false); +}); +openSocket.io.on("reconnect_attempt", () => { + openSocketReconnecting.set(true); +}); +openSocket.io.on("reconnect", () => { + openSocketReconnecting.set(false); +}); + +export const authorizedSocket = io("/authed", {auth: {token: "te"}}); +export let authorizedSocketConnected = writable(false); +export let authorizedSocketReconnecting = writable(false); +export let authorizedSocketConnectError = writable(false); +export const user = writable({}); + +authorizedSocket.on("connect_error", (err) => { + authorizedSocketConnectError.set(true); + authorizedSocketReconnecting.set(false); + if ((err.message == "not authorized") && + get(authorizedSocketNeeded) && + (get(location) != "/login")) { + replace(`/login?ref=${get(location)}&${get(querystring)}`); + authorizedSocketConnected.set(false); + } +}); +authorizedSocket.on("connect", () => { + authorizedSocketConnected.set(true); + authorizedSocketConnectError.set(false); + if (get(location) == "/login") { + let searchParams = new URLSearchParams(get(querystring)) + if (searchParams.has("ref")) { + let path = searchParams.get("ref"); + searchParams.delete("ref"); + let params = ""; + if (searchParams.values().length > 0) { + params = "?" + searchParams.toString(); + } + replace(`${path}${params}`); + } else { + replace(`/`); + } + } +}); +authorizedSocket.on("disconnect", () => { + authorizedSocketConnected.set(false); +}); +authorizedSocket.io.on("reconnect_attempt", () => { + authorizedSocketReconnecting.set(true); +}); +authorizedSocket.io.on("reconnect", () => { + authorizedSocketReconnecting.set(false); +}); +authorizedSocket.on("user", (userObj) => { + user.set(userObj); +}); + + +let storedSessionToken = localStorage.getItem("sessionToken"); +export const isAuthenticating = writable(storedSessionToken != undefined); +export const sessionToken = writable(storedSessionToken); +function connectAuthorizedSocket() { + authorizedSocket.auth.token = get(sessionToken); + authorizedSocket.disconnect().connect(); +} +sessionToken.subscribe((token) => localStorage.setItem("sessionToken", token)); +sessionToken.subscribe(() => connectAuthorizedSocket()); + +export const authorizedSocketNeeded = writable(false); +authorizedSocketNeeded.subscribe((value) => { + if (value) { connectAuthorizedSocket(); } +}); + +export function authenticate(username, password, callback) { + openSocket.emit("authenticate:user", username, password, (res) => { + if (res.success) { + sessionToken.set(res.token); + } else if (res.reason != "Invalid username/password") { + console.log(res); + } + callback(res.success); + }); +} + +export const connected = writable(false); +export const reconnecting = writable(false); +function connectedStateChange() { + // console.log(`${get(openSocketConnected)} ${get(authorizedSocketConnectError)} ${get(authorizedSocketReconnecting)}`); + connected.set(get(openSocketConnected) + && (get(authorizedSocketConnectError) + || get(authorizedSocketConnected))); + reconnecting.set(get(openSocketReconnecting) + && (get(authorizedSocketConnectError) + || get(authorizedSocketReconnecting))); +} +openSocketConnected.subscribe(connectedStateChange); +openSocketReconnecting.subscribe(connectedStateChange); +authorizedSocketConnected.subscribe(connectedStateChange); +authorizedSocketReconnecting.subscribe(connectedStateChange); +authorizedSocketConnectError.subscribe(connectedStateChange); -- cgit v1.2.3