Предприняты попытки разработки модуля синхронизации данных

2024-08-15 15:32:28 +03:00 · 2024-08-15 15:32:28 +03:00 · bfa44a1793
--- a/static/scripts/vendor.js
+++ b/static/scripts/vendor.js
@ -54,44 +54,58 @@
 //     }
 // }

-const connectWebSocket = (url) => {
-    const ws = new WebSocket(url)
+const syncUrl = new URL('https://cit.csasq.ru/ws/sync')

-    ws.onopen = () => {
+const SyncDataType = {
+    TEXT: 0,
+    BOOLEAN: 1,
+}

-    }
+const enableSync = (url) => {
+    let ws = new WebSocket(url)
+
+    document
+        .querySelectorAll('md-outlined-text-field[data-sync]')
+        .forEach(element => element.addEventListener('input', () => {
+            const data = JSON.stringify({
+                id: element.id,
+                type: SyncDataType.TEXT,
+                value: element.value,
+            })
+            ws.send(data)
+        }))
+
+    document
+        .querySelectorAll('md-switch[data-sync]')
+        .forEach(element => element.addEventListener('change', () => {
+            const data = JSON.stringify({
+                id: element.id,
+                type: SyncDataType.BOOLEAN,
+                value: !element.hasAttribute('selected'),
+            })
+            ws.send(data)
+        }))

    ws.onmessage = (event) => {
        const data = JSON.parse(event.data)
-        document.querySelectorAll(`#${data.id}`).forEach(element => element.toggleAttribute('selected', data.value))
+        const elements = document.querySelectorAll(`#${data.id}`)
+
+        switch (data.type) {
+            case SyncDataType.TEXT:
+                elements.forEach(element => element.value = data.value)
+                break
+
+            case SyncDataType.BOOLEAN:
+                elements.forEach(element => element.toggleAttribute('selected', data.value))
+                break
+        }
    }

-    ws.onclose = () => {
+    ws.onclose = () => () => ws = new WebSocket(url)

+    ws.onerror = () => {
+        console.log('ws_error')
    }
-
-    return ws
 }

-const wsUrl = new URL(location)
-wsUrl.protocol = 'wss'
-wsUrl.pathname = '/ws'
-const ws = connectWebSocket(wsUrl)
-
-function getSwitch(id) {
-    const element = document.createElement('md-switch')
-    element.id = id
-    element.onclick = (event) => {
-        event.preventDefault()
-        const data = JSON.stringify({
-            id: id,
-            value: !event.currentTarget.hasAttribute('selected'),
-        })
-        ws.send(data)
-    }
-    return element
-}
-
-document.addEventListener('DOMContentLoaded', () => {
-    document.body.querySelector('main').append(getSwitch('qwerty'))
-})
+document.addEventListener('DOMContentLoaded', () => enableSync(syncUrl))
--- a/templates/main.jinja2
+++ b/templates/main.jinja2
@ -41,11 +41,8 @@
    </head>
    <body>
        <main>
-            <md-outlined-text-field label="Favorite color"></md-outlined-text-field>
-            <md-switch id="qwerty"></md-switch>
-            <md-switch id="qwerty"></md-switch>
-            <md-switch id="qwerty"></md-switch>
-            <md-switch id="qwerty"></md-switch>
+            <md-outlined-text-field id="text" label="Favorite color" data-sync></md-outlined-text-field>
+            <md-switch id="switch" data-sync></md-switch>
        </main>
        <nav class="md-typescale-body-small">
            <ul>
--- a/web/main.py
+++ b/web/main.py
@ -73,7 +73,7 @@ async def _():


@app.websocket(
-    path='/ws',
+    path='/ws/sync',
 )
 async def _(
        websocket: WebSocket,