mirror of
https://github.com/artegoser/AnoPaper.git
synced 2024-11-05 20:43:57 +03:00
feat: sync
This commit is contained in:
parent
ac79495f83
commit
6af0bfacb2
11 changed files with 94 additions and 17 deletions
12
index.js
12
index.js
|
@ -41,6 +41,18 @@ io.on("connection", (socket) => {
|
|||
socket.join(room);
|
||||
socket.to(room).emit("roomJoined");
|
||||
});
|
||||
|
||||
socket.on("leaveRoom", () => {
|
||||
for (let room of rooms) {
|
||||
if (socket.id != room) {
|
||||
socket.leave(room);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
socket.on("broadcastSync", ({ data, room }) => {
|
||||
socket.to(room).emit("broadcastSync", data);
|
||||
});
|
||||
});
|
||||
|
||||
app.use(bodyParser.json());
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
function CheckBox(props) {
|
||||
return (
|
||||
<div className={`form-check m-5 ${props.className}`}>
|
||||
<div className={`m-5 ${props.className}`}>
|
||||
<input
|
||||
className="form-check-input appearance-none h-3 w-6 duration-500 checked:bg-blue-600 checked:border-blue-600 pr-3 border border-gray-300 rounded-lg mr-1 checked:shadow-lg checked:shadow-blue-600 transition ease-out cursor-pointer"
|
||||
className="appearance-none h-3 w-6 duration-500 checked:bg-blue-600 checked:border-blue-600 pr-3 border border-gray-300 rounded-lg mr-1 checked:shadow-lg checked:shadow-blue-600 transition ease-out cursor-pointer"
|
||||
type="checkbox"
|
||||
id={props.id}
|
||||
defaultChecked={props.checked}
|
||||
|
@ -11,7 +11,7 @@ function CheckBox(props) {
|
|||
/>
|
||||
<label
|
||||
title={props.title}
|
||||
className="form-check-label inline-block cursor-pointer"
|
||||
className="inline-block cursor-pointer"
|
||||
htmlFor={props.id}
|
||||
>
|
||||
{props.label}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import { Configuration, OpenAIApi } from "openai";
|
||||
|
||||
async function Complete(setText) {
|
||||
async function Complete(setText, textUpdate) {
|
||||
document.body.style.cursor = "wait";
|
||||
|
||||
let initText = localStorage.getItem("NoteText");
|
||||
|
@ -25,6 +25,10 @@ async function Complete(setText) {
|
|||
localStorage.setItem("NoteText", totalText);
|
||||
setText(totalText);
|
||||
|
||||
if (settings.CollabEdit === true) {
|
||||
textUpdate(totalText, true);
|
||||
}
|
||||
|
||||
document.body.style.cursor = "default";
|
||||
}
|
||||
|
||||
|
|
|
@ -9,9 +9,8 @@ function SettingsCheckBox({ label, title, className, settingName, onClick }) {
|
|||
checked={settings[settingName]}
|
||||
className={className}
|
||||
onClick={(e) => {
|
||||
window.settings[settingName] = e.target.checked;
|
||||
localStorage.setObj("settings", window.settings);
|
||||
onClick && onClick(e);
|
||||
!!settingName && setSetting(settingName, e.target.checked);
|
||||
!!onClick && onClick(e);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
@ -39,15 +38,19 @@ function SettingsTextInput({
|
|||
autoComplete="new-password"
|
||||
defaultValue={window.settings[settingName]}
|
||||
onChange={(e) => {
|
||||
window.settings[settingName] = e.target.value;
|
||||
localStorage.setObj("settings", window.settings);
|
||||
onChange && onChange(e);
|
||||
!!settingName && setSetting(settingName, e.target.value);
|
||||
!!onChange && onChange(e);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function setSetting(settingName, value) {
|
||||
window.settings[settingName] = value;
|
||||
localStorage.setObj("settings", window.settings);
|
||||
}
|
||||
|
||||
function SettingsSelectInput({
|
||||
label,
|
||||
className,
|
||||
|
@ -64,9 +67,8 @@ function SettingsSelectInput({
|
|||
className={`${inputStyle} ${settingsAddInput} m-2 ${className}`}
|
||||
defaultValue={window.settings[settingName]}
|
||||
onChange={(e) => {
|
||||
window.settings[settingName] = e.target.value;
|
||||
localStorage.setObj("settings", window.settings);
|
||||
onChange && onChange(e);
|
||||
!!settingName && setSetting(settingName, e.target.value);
|
||||
!!onChange && onChange(e);
|
||||
}}
|
||||
>
|
||||
{options.map((option) => (
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import { io } from "socket.io-client";
|
||||
import { reRenderPage } from "./utils";
|
||||
|
||||
const socket = io();
|
||||
|
||||
|
@ -8,14 +9,24 @@ function onConnect() {
|
|||
|
||||
function onDisconnect() {
|
||||
console.log("Socket disconnected, local mode only");
|
||||
window.alreadyConnected = false;
|
||||
}
|
||||
|
||||
function onFooEvent() {
|
||||
console.log("bar");
|
||||
}
|
||||
|
||||
function onSync({ settings, Notes, NoteText, NoteName }) {
|
||||
localStorage.setItem("Notes", Notes);
|
||||
localStorage.setItem("NoteText", NoteText);
|
||||
localStorage.setItem("NoteName", NoteName);
|
||||
localStorage.setItem("settings", settings);
|
||||
reRenderPage();
|
||||
}
|
||||
|
||||
socket.on("connect", onConnect);
|
||||
socket.on("disconnect", onDisconnect);
|
||||
socket.on("foo", onFooEvent);
|
||||
socket.on("broadcastSync", onSync);
|
||||
|
||||
export default socket;
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
let inputStyle =
|
||||
"form-control block px-3 py-1.5 text-base font-normal text-gray-700 dark:text-white bg-white dark:bg-zinc-900 bg-clip-padding border border-solid border-gray-300 rounded-lg transition ease-in-out focus:border-blue-600 focus:outline-none";
|
||||
"block px-3 py-1.5 text-base font-normal text-gray-700 dark:text-white bg-white dark:bg-zinc-900 bg-clip-padding border border-solid border-gray-300 rounded-lg transition ease-in-out focus:border-blue-600 focus:outline-none";
|
||||
let settingsAddInput = "w-full lg:w-1/4";
|
||||
|
||||
export { inputStyle, settingsAddInput };
|
||||
|
|
|
@ -64,7 +64,7 @@
|
|||
}
|
||||
|
||||
.md table {
|
||||
@apply w-1/2;
|
||||
@apply w-full lg:w-1/2;
|
||||
border-style: hidden;
|
||||
}
|
||||
|
||||
|
|
|
@ -45,7 +45,11 @@ let en = {
|
|||
AdditionalFeatures: "Additional features",
|
||||
CollabEdit: "Collaborative editing",
|
||||
Password: "Password",
|
||||
SyncPassword: "Sync password",
|
||||
CollabEditPassword: "Password for collaborative editing",
|
||||
BroadcastSync: "Getting notes, settings from another device",
|
||||
SyncAll: "Send data to all devices",
|
||||
Sync: "Sync",
|
||||
};
|
||||
|
||||
export default en;
|
||||
|
|
|
@ -47,6 +47,10 @@ let ru = {
|
|||
CollabEdit: "Совместное редактирование",
|
||||
Password: "Пароль",
|
||||
CollabEditPassword: "Пароль для совместного редактирования",
|
||||
SyncPassword: "Пароль для синхронизации",
|
||||
BroadcastSync: "Получение заметок, настроек с другого устройства",
|
||||
SyncAll: "Отправить данные",
|
||||
Sync: "Синхронизация",
|
||||
};
|
||||
|
||||
export default ru;
|
||||
|
|
|
@ -209,7 +209,7 @@ function CreateNote() {
|
|||
className="m-1"
|
||||
w="w-full"
|
||||
onClick={() => {
|
||||
Complete(setText);
|
||||
Complete(setText, textUpdate);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
|
|
@ -6,6 +6,8 @@ import {
|
|||
} from "../components/settingsInputs";
|
||||
import { reRenderPage } from "../components/utils";
|
||||
import Locales from "../localisation/main";
|
||||
import { ButtonWithIcon } from "../components/button";
|
||||
import { ChevronDoubleRightIcon } from "@heroicons/react/24/outline";
|
||||
|
||||
function Settings() {
|
||||
return (
|
||||
|
@ -58,12 +60,50 @@ function Settings() {
|
|||
placeholder={locals.Password}
|
||||
label={locals.CollabEditPassword}
|
||||
settingName="CollabEditPassword"
|
||||
onChange={(e) => {
|
||||
onChange={() => {
|
||||
window.alreadyConnected = false;
|
||||
}}
|
||||
/>
|
||||
</SettingsSection>
|
||||
|
||||
<SettingsSection name={locals.Sync}>
|
||||
<SettingsCheckBox
|
||||
label={locals.BroadcastSync}
|
||||
onChange={(e) => {
|
||||
if (e.target.checked) {
|
||||
socket.emit("joinRoom", settings.syncPassword);
|
||||
} else {
|
||||
socket.emit("leaveRoom");
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
<SettingsTextInput
|
||||
placeholder={locals.Password}
|
||||
label={locals.SyncPassword}
|
||||
secret
|
||||
settingName="SyncPassword"
|
||||
/>
|
||||
|
||||
<ButtonWithIcon
|
||||
icon={ChevronDoubleRightIcon}
|
||||
text={locals.SyncAll}
|
||||
className="m-1"
|
||||
w="w-full lg:w-96"
|
||||
onClick={() => {
|
||||
socket.emit("broadcastSync", {
|
||||
data: {
|
||||
settings: localStorage.getItem("settings"),
|
||||
Notes: localStorage.getItem("Notes"),
|
||||
NoteText: localStorage.getItem("NoteText"),
|
||||
NoteName: localStorage.getItem("NoteName"),
|
||||
},
|
||||
room: settings.syncPassword,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</SettingsSection>
|
||||
|
||||
<SettingsSection name={locals.Interface}>
|
||||
<SettingsSelectInput
|
||||
label={locals.Language}
|
||||
|
|
Loading…
Reference in a new issue