98 строки
2.6 KiB
JavaScript
98 строки
2.6 KiB
JavaScript
// class Menu {
|
|
// #application;
|
|
// #root;
|
|
// #items;
|
|
//
|
|
// constructor(application) {
|
|
// this.#application = application;
|
|
// this.#root = document.querySelector('#menu');
|
|
// this.#items = this.#root.querySelectorAll('input[data-page]');
|
|
// this.#items.forEach(item => {
|
|
// item.addEventListener('click', () => this.#application.open(item.dataset.page));
|
|
// });
|
|
// };
|
|
//
|
|
// setActive(pageId) {
|
|
// this.#items.forEach(item => item.classList.remove('active'));
|
|
// this.#items.forEach(item => item.dataset.page === pageId ? item.classList.add('active') : null);
|
|
// };
|
|
// }
|
|
//
|
|
// class Application {
|
|
// static DEFAULT_PAGE = 'dashboard';
|
|
//
|
|
// #inputContainer;
|
|
// #outputContainer;
|
|
// #menu;
|
|
// #pageId;
|
|
//
|
|
// constructor() {
|
|
// this.#inputContainer = document.querySelector('#input');
|
|
// this.#outputContainer = document.querySelector('#output');
|
|
// this.#menu = new Menu(this);
|
|
// };
|
|
//
|
|
// open(pageId) {
|
|
// this.#pageId = pageId;
|
|
// document.querySelectorAll('#input [data-page]').forEach(page => page.classList.remove('active'));
|
|
// document.querySelector(`#input [data-page="${pageId}"]`).classList.add('active');
|
|
// document.querySelectorAll('#output [data-page]').forEach(page => page.classList.remove('active'));
|
|
// this.#menu.setActive(pageId);
|
|
// };
|
|
// }
|
|
|
|
// const mutableStateOf = {
|
|
// _value: null,
|
|
// constructor(value) {
|
|
// this._value = value
|
|
// },
|
|
// get value() {
|
|
// return this._value
|
|
// },
|
|
// set value(value) {
|
|
// this._value = value
|
|
// }
|
|
// }
|
|
|
|
const connectWebSocket = (url) => {
|
|
const ws = new WebSocket(url)
|
|
|
|
ws.onopen = () => {
|
|
|
|
}
|
|
|
|
ws.onmessage = (event) => {
|
|
const data = JSON.parse(event.data)
|
|
document.querySelectorAll(`#${data.id}`).forEach(element => element.toggleAttribute('selected', data.value))
|
|
}
|
|
|
|
ws.onclose = () => {
|
|
|
|
}
|
|
|
|
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'))
|
|
})
|