RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-09 10:34:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

rewrite to new models

Browse Source
This commit is contained in:
srgooglo 2022-02-22 20:22:41 +01:00
parent 6e614f77a1
commit cde6557611
108 changed files with 5235 additions and 1774 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
packages/app/.config.js
View File

@ -1,16 +1,17 @@
const path = require('path')
const path = require("path")
const aliases = {
'~/': `${path.resolve(__dirname, 'src')}/`,
"~/": `${path.resolve(__dirname, "src")}/`,
"__": __dirname,
"@src": path.resolve(__dirname, 'src'),
schemas: path.resolve(__dirname, 'constants'),
config: path.join(__dirname, 'config'),
extensions: path.resolve(__dirname, 'src/extensions'),
pages: path.join(__dirname, 'src/pages'),
theme: path.join(__dirname, 'src/theme'),
components: path.join(__dirname, 'src/components'),
models: path.join(__dirname, 'src/models'),
"@src": path.resolve(__dirname, "src"),
schemas: path.resolve(__dirname, "constants"),
config: path.join(__dirname, "config"),
extensions: path.resolve(__dirname, "src/extensions"),
pages: path.join(__dirname, "src/pages"),
theme: path.join(__dirname, "src/theme"),
components: path.join(__dirname, "src/components"),
models: path.join(__dirname, "src/models"),
utils: path.join(__dirname, "src/utils"),
}
module.exports = (config = {}) => {
@ -22,12 +23,14 @@ module.exports = (config = {}) => {
}
config.resolve.alias = aliases
config.server.port = 8000
config.server.port = process.env.listenPort ?? 8000
config.server.host = "0.0.0.0"
config.server.fs = {
allow: [".."]
}
config.envDir = path.join(__dirname, "environments")
config.css = {
preprocessorOptions: {
less: {

7
packages/app/capacitor.config.json
View File

@ -3,10 +3,5 @@
"appName": "Comty",
"bundledWebRuntime": true,
"overrideUserAgent": "capacitor",
"webDir": "dist",
"server": {
"hostname": "192.168.0.5:8000",
"iosScheme": "http",
"androidScheme": "http"
}
"webDir": "dist"
}

121
packages/app/package.json
View File

@ -5,64 +5,79 @@
"scripts": {
"dev": "vite",
"dev:ssr": "vite-ssr",
"dev:evite": "evite dev",
"build": "cross-env NODE_ENV=production vite build",
"sync": "capacitor sync ios && capacitor sync android",
"build": "cross-env NODE_ENV=production vite build && yarn sync",
"build:dist": "cross-env NODE_ENV=production vite build",
"build:preview": "cross-env NODE_ENV=preview vite build && yarn sync",
"build:ssr": "cross-env NODE_ENV=production vite-ssr build && ./scripts/move-dist.sh",
"preview": "vite preview",
"capacitor": "capacitor"
},
"peerDependencies": {
"react": "^16.8.6"
},
"dependencies": {
"@ant-design/icons": "^4.7.0",
"@corenode/utils": "^0.28.26",
"@react-pdf/renderer": "^1.6.17",
"antd": "^4.17.4",
"chart.js": "^3.5.1",
"classnames": "^2.3.1",
"dicebar_lib": "^1.0.0",
"enquire-js": "^0.2.1",
"evite-react-lib": "^0.9.0",
"faye": "^1.4.0",
"feather-reactjs": "^2.0.13",
"fuse.js": "^6.4.6",
"hls.js": "^1.0.12",
"howler": "^2.2.3",
"i18next": "^20.3.5",
"js-cookie": "^2.2.1",
"less": "^4.1.2",
"linebridge": "^0.8.4",
"moment": "^2.29.1",
"@ant-design/icons": "4.7.0",
"@capacitor/android": "^3.4.0",
"@capacitor/haptics": "^1.1.4",
"@capacitor/push-notifications": "^1.0.9",
"@capacitor/status-bar": "1.0.7",
"@capacitor/storage": "1.2.4",
"@corenode/utils": "0.28.26",
"@emotion/css": "11.0.0",
"@foxify/events": "2.0.1",
"@loadable/component": "5.15.2",
"antd": "4.18.6",
"antd-mobile": "^5.0.0-rc.17",
"chart.js": "3.7.0",
"classnames": "2.3.1",
"evite": "0.9.5",
"faye": "1.4.0",
"feather-reactjs": "2.0.13",
"fuse.js": "6.5.3",
"global": "4.4.0",
"history": "5.2.0",
"hls.js": "^1.1.5",
"howler": "2.2.3",
"i18next": "21.6.6",
"js-cookie": "3.0.1",
"jwt-decode": "3.1.2",
"less": "4.1.2",
"linebridge": "0.10.13",
"moment": "2.29.1",
"mpegts.js": "^1.6.10",
"plyr": "^3.6.9",
"qrcode": "^1.4.4",
"@foxify/events": "^2.0.1",
"@loadable/component": "^5.15.0",
"history": "^5.0.1",
"jwt-decode": "^3.1.2",
"react": "^17.0.2",
"react-helmet": "^6.1.0",
"react-beautiful-dnd": "^13.1.0",
"react-chartjs-2": "^3.2.0",
"react-color": "^2.19.3",
"react-contexify": "^5.0.0",
"react-dom": "^17.0.2",
"react-draggable": "^4.4.3",
"react-helmet-async": "^1.0.9",
"react-i18next": "^11.11.4",
"react-icons": "^4.3.1",
"react-json-view": "^1.21.3",
"react-qr-reader": "^2.2.1",
"react-reveal": "^1.2.2",
"react-rnd": "^10.3.5",
"react-router": "^5.2.0",
"react-router-config": "^5.1.1",
"react-router-dom": "^5.2.0",
"socket.io-client": "^4.2.0",
"vite-ssr": "^0.14.3"
"nprogress": "^0.2.0",
"plyr": "^3.6.12",
"prop-types": "^15.8.1",
"qrcode": "1.5.0",
"react": "17.0.2",
"react-beautiful-dnd": "13.1.0",
"react-chartjs-2": "4.0.1",
"react-color": "2.19.3",
"react-contexify": "5.0.0",
"react-dom": "17.0.2",
"react-draggable": "4.4.4",
"react-helmet": "6.1.0",
"react-i18next": "11.15.3",
"react-icons": "4.3.1",
"react-intersection-observer": "8.33.1",
"react-json-view": "1.21.3",
"react-lazy-load-image-component": "^1.5.1",
"react-motion": "0.5.2",
"react-reveal": "1.2.2",
"react-rnd": "10.3.5",
"react-router": "6.2.1",
"react-router-config": "5.1.1",
"react-router-dom": "6.2.1",
"store": "^2.0.12",
"styled-components": "^5.3.3",
"vite-ssr": "0.15.0"
},
"devDependencies": {
"@capacitor/cli": "^3.2.2",
"@capacitor/core": "^3.2.2",
"@capacitor/ios": "^3.0.2",
"@capacitor/cli": "3.2.2",
"@capacitor/core": "3.2.2",
"@capacitor/ios": "3.0.2",
"@capacitor/project": "1.0.28",
"@types/jest": "^26.0.24",
"@types/node": "^16.4.10",
"@types/react": "^17.0.15",
@ -71,11 +86,11 @@
"@types/react-router-dom": "^5.1.8",
"@typescript-eslint/eslint-plugin": "^4.29.0",
"@vitejs/plugin-react-refresh": "^1.3.6",
"corenode": "^0.28.26",
"corenode": "0.28.26",
"cross-env": "^7.0.3",
"evite": "^0.8.8",
"express": "^4.17.1",
"typescript": "^4.3.5",
"vite": "^2.7.1",
"vite": "2.7.13",
"vite-plugin-pages": "0.12.x"
}
}

412
packages/app/src/App.jsx
View File

@ -1,4 +1,13 @@
// Patch global prototypes
Array.prototype.findAndUpdateObject = function (discriminator, obj) {
let index = this.findIndex(item => item[discriminator] === obj[discriminator])
if (index !== -1) {
this[index] = obj
}
return index
}
Array.prototype.move = function (from, to) {
this.splice(to, 0, this.splice(from, 1)[0])
return this
@ -10,19 +19,45 @@ String.prototype.toTitleCase = function () {
})
}
Promise.tasked = function (promises) {
return new Promise(async (resolve, reject) => {
let rejected = false
for await (let promise of promises) {
if (rejected) {
return
}
try {
await promise()
} catch (error) {
rejected = true
return reject(error)
}
}
if (!rejected) {
return resolve()
}
})
}
import React from "react"
import { CreateEviteApp, BindPropsProvider } from "evite-react-lib"
import { CreateEviteApp, BindPropsProvider } from "evite"
import { Helmet } from "react-helmet"
import * as antd from "antd"
import { ActionSheet, Toast } from "antd-mobile"
import { StatusBar, Style } from "@capacitor/status-bar"
import { Translation } from "react-i18next"
import { Session, User, SidebarController, SettingsController } from "models"
import { API, Render, Splash, Theme, Sound } from "extensions"
import { Session, User } from "models"
import { API, SettingsController, Render, Splash, Theme, Sound, Notifications, i18n } from "extensions"
import config from "config"
import { NotFound, RenderError, Settings } from "components"
import Layout from "./layout"
import { NotFound, RenderError, Crash, Settings, Navigation } from "components"
import { Icons } from "components/Icons"
import Layout from "./layout"
import "theme/index.less"
const SplashExtension = Splash.extension({
@ -39,118 +74,115 @@ const SplashExtension = Splash.extension({
},
})
class ThrowCrash {
constructor(message, description) {
this.message = message
this.description = description
antd.notification.error({
message: "Fatal error",
description: message,
})
window.app.eventBus.emit("crash", this.message, this.description)
}
}
const __renderTest = () => {
const [position, setPosition] = React.useState(0)
// create a 300ms interval to move randomly inside window screen
React.useEffect(() => {
setInterval(() => {
const x = Math.random() * window.innerWidth
const y = Math.random() * window.innerHeight
setPosition({ x, y })
}, 50)
}, [])
// clear interval when component unmount
React.useEffect(() => {
return () => {
clearInterval()
}
}, [])
return <div style={{ top: position.y, left: position.x }} className="__render_box_test" />
}
class App {
static initialize() {
this.configuration = {
settings: new SettingsController(),
sidebar: new SidebarController(),
}
window.app.version = config.package.version
this.eventBus = this.contexts.main.eventBus
this.mainSocket = this.contexts.app.WSInterface.sockets.main
this.loadingMessage = false
this.isAppCapacitor = () => navigator.userAgent === "capacitor"
}
this.eventBus.on("app_loading", async () => {
await this.setState({ initialized: false })
this.eventBus.emit("splash_show")
})
this.eventBus.on("app_ready", async () => {
await this.setState({ initialized: true })
this.eventBus.emit("splash_close")
})
this.eventBus.on("reinitializeSession", async () => {
await this.__SessionInit()
})
this.eventBus.on("reinitializeUser", async () => {
await this.__UserInit()
})
this.eventBus.on("forceToLogin", () => {
if (window.location.pathname !== "/login") {
this.beforeLoginLocation = window.location.pathname
}
window.app.setLocation("/login")
})
this.eventBus.on("new_session", async () => {
static eventsHandlers = {
"new_session": async function () {
await this.flushState()
await this.initialization()
if (window.location.pathname == "/login") {
window.app.setLocation(this.beforeLoginLocation ?? "/main")
this.beforeLoginLocation = null
}
})
this.eventBus.on("destroyed_session", async () => {
},
"destroyed_session": async function () {
await this.flushState()
this.eventBus.emit("forceToLogin")
})
this.eventBus.on("invalid_session", (error) => {
},
"forceToLogin": function () {
if (window.location.pathname !== "/login") {
this.sessionController.forgetLocalSession()
this.beforeLoginLocation = window.location.pathname
}
window.app.setLocation("/login")
},
"invalid_session": async function (error) {
await this.sessionController.forgetLocalSession()
await this.flushState()
if (window.location.pathname !== "/login") {
this.eventBus.emit("forceToLogin")
antd.notification.open({
message: "Invalid Session",
description: error,
message: <Translation>
{(t) => t("Invalid Session")}
</Translation>,
description: <Translation>
{(t) => t(error)}
</Translation>,
icon: <Icons.MdOutlineAccessTimeFilled />,
})
this.eventBus.emit("forceToLogin")
}
})
this.eventBus.on("cleanAll", () => {
},
"clearAllOverlays": function () {
window.app.DrawerController.closeAll()
})
},
"websocket_connected": function () {
if (this.wsReconnecting) {
this.wsReconnectingTry = 0
this.wsReconnecting = false
this.initialization()
this.eventBus.on("crash", (message, error) => {
console.debug("[App] crash detecting, returning crash...")
setTimeout(() => {
Toast.show({
icon: "success",
content: "Connected",
})
}, 500)
}
},
"websocket_connection_error": function () {
if (!this.wsReconnecting) {
this.latencyWarning = null
this.wsReconnectingTry = 0
this.wsReconnecting = true
this.setState({ crash: { message, error } })
this.contexts.app.SoundEngine.play("crash")
})
Toast.show({
icon: "loading",
content: "Connecting...",
duration: 0,
})
}
this.wsReconnectingTry = this.wsReconnectingTry + 1
if (this.wsReconnectingTry > 3) {
window.location.reload()
}
},
"websocket_latency_too_high": function () {
if (!this.latencyWarning) {
this.latencyWarning = true
Toast.show({
icon: "loading",
content: "Slow connection...",
duration: 0,
})
}
},
"websocket_latency_normal": function () {
if (this.latencyWarning) {
this.latencyWarning = null
Toast.show({
icon: "success",
content: "Connection restored",
})
}
}
}
static windowContext() {
return {
// TODO: Open with popup controller instead drawer controller
openNavigationMenu: () => window.app.DrawerController.open("navigation", Navigation),
openSettings: (goTo) => {
window.app.DrawerController.open("settings", Settings, {
props: {
@ -167,8 +199,35 @@ class App {
goToAccount: (username) => {
return window.app.setLocation(`/account`, { username })
},
configuration: this.configuration,
getSettings: (...args) => this.contexts.app.configuration?.settings?.get(...args),
setStatusBarStyleDark: async () => {
if (!this.isAppCapacitor()) {
console.warn("[App] setStatusBarStyleDark is only available on capacitor")
return false
}
return await StatusBar.setStyle({ style: Style.Dark })
},
setStatusBarStyleLight: async () => {
if (!this.isAppCapacitor()) {
console.warn("[App] setStatusBarStyleLight is not supported on this platform")
return false
}
return await StatusBar.setStyle({ style: Style.Light })
},
hideStatusBar: async () => {
if (!this.isAppCapacitor()) {
console.warn("[App] hideStatusBar is not supported on this platform")
return false
}
return await StatusBar.hide()
},
showStatusBar: async () => {
if (!this.isAppCapacitor()) {
console.warn("[App] showStatusBar is not supported on this platform")
return false
}
return await StatusBar.show()
},
isAppCapacitor: this.isAppCapacitor,
}
}
@ -177,7 +236,6 @@ class App {
renderRef: this.renderRef,
sessionController: this.sessionController,
userController: this.userController,
configuration: this.configuration,
}
}
@ -188,100 +246,129 @@ class App {
RenderError: (props) => {
return <RenderError {...props} />
},
Crash: Crash,
initialization: () => {
return <Splash.SplashComponent logo={config.logo.alt} />
}
}
sessionController = new Session()
userController = new User()
state = {
// app
initialized: false,
crash: false,
// app session
session: null,
data: null,
user: null,
}
flushState = async () => {
await this.setState({ session: null, data: null })
await this.setState({ session: null, user: null })
}
componentDidMount = async () => {
this.eventBus.emit("app_loading")
if (this.isAppCapacitor()) {
window.addEventListener("statusTap", () => {
this.eventBus.emit("statusTap")
})
StatusBar.setOverlaysWebView({ overlay: true })
window.app.hideStatusBar()
}
this.eventBus.emit("render_initialization")
await this.contexts.app.initializeDefaultBridge()
await this.initialization()
this.eventBus.emit("app_ready")
this.eventBus.emit("render_initialization_done")
}
initialization = async () => {
try {
await this.__SessionInit()
await this.__UserInit()
} catch (error) {
throw new ThrowCrash(error.message, error.description)
}
console.debug(`[App] Initializing app`)
const initializationTasks = [
async () => {
try {
await this.contexts.app.attachAPIConnection()
} catch (error) {
throw {
cause: "Cannot connect to API",
details: error.message,
}
}
},
async () => {
try {
await this.__SessionInit()
} catch (error) {
throw {
cause: "Cannot initialize session",
details: error.message,
}
}
},
async () => {
try {
await this.__UserInit()
} catch (error) {
throw {
cause: "Cannot initialize user data",
details: error.message,
}
}
},
async () => {
try {
await this.__WSInit()
} catch (error) {
throw {
cause: "Cannot connect to WebSocket",
details: error.message,
}
}
},
]
await Promise.tasked(initializationTasks).catch((reason) => {
console.error(`[App] Initialization failed: ${reason.cause}`)
window.app.eventBus.emit("crash", reason.cause, reason.details)
})
}
__SessionInit = async () => {
if (typeof Session.token === "undefined") {
const token = await Session.token
if (!token || token == null) {
window.app.eventBus.emit("forceToLogin")
} else {
this.session = await this.sessionController.getTokenInfo().catch((error) => {
window.app.eventBus.emit("invalid_session", error)
})
if (!this.session.valid) {
// try to regenerate
//const regeneration = await this.sessionController.regenerateToken()
//console.log(regeneration)
window.app.eventBus.emit("invalid_session", this.session.error)
}
}
this.setState({ session: this.session })
}
__UserInit = async () => {
if (!this.session || !this.session.valid) {
return false
}
try {
this.user = await User.data
this.setState({ user: this.user })
} catch (error) {
console.error(error)
this.eventBus.emit("crash", "Cannot initialize user data", error)
const session = await this.sessionController.getCurrentSession().catch((error) => {
console.error(`[App] Cannot get current session: ${error.message}`)
return false
})
await this.setState({ session })
}
__WSInit = async () => {
if (!this.state.session) {
return false
}
const token = await Session.token
await this.contexts.app.attachWSConnection()
this.mainSocket.emit("authenticate", token)
}
__UserInit = async () => {
if (!this.state.session) {
return false
}
const user = await User.data()
await this.setState({ user })
}
render() {
if (!this.state.initialized) {
return null
}
if (this.state.crash) {
return <div className="app_crash">
<div className="header">
<Icons.MdOutlineError />
<h1>Crash</h1>
</div>
<h2>{this.state.crash.message}</h2>
<pre>{this.state.crash.error}</pre>
<div className="actions">
<antd.Button onClick={() => window.location.reload()}>Reload</antd.Button>
</div>
</div>
}
return (
<React.Fragment>
<Helmet>
@ -303,5 +390,14 @@ class App {
}
export default CreateEviteApp(App, {
extensions: [Sound.extension, Render.extension, Theme.extension, API, SplashExtension],
extensions: [
SettingsController,
i18n.extension,
Sound.extension,
Notifications.extension,
API,
Render.extension,
Theme.extension,
SplashExtension,
],
})

108
packages/app/src/components/AboutApp/index.jsx
View File

@ -1,72 +1,80 @@
import React from "react"
import ReactDOM from "react-dom"
import * as antd from "antd"
import { Card, Mask } from "antd-mobile"
import { Icons } from "components/Icons"
import { DiReact } from "react-icons/di"
import config from "config"
import "./index.less"
export class AboutCard extends React.Component {
state = {
visible: true,
export const AboutCard = (props) => {
const [visible, setVisible] = React.useState(false)
React.useEffect(() => {
setVisible(true)
}, [])
const close = () => {
setVisible(false)
setTimeout(() => {
props.onClose()
}, 150)
}
onClose = () => {
this.setState({ visible: false })
const isProduction = import.meta.env.PROD
const isWSMainConnected = window.app.ws.mainSocketConnected
const WSMainOrigin = app.ws.sockets.main.io.uri
if (typeof this.props.onClose === "function") {
this.props.onClose()
}
}
render() {
const eviteNamespace = window.__evite ?? {}
const appConfig = config.app ?? {}
const isDevMode = eviteNamespace?.env?.NODE_ENV !== "production"
return (
<antd.Modal
destroyOnClose
onCancel={this.onClose}
visible={this.state.visible}
centered
footer={false}
width="80%"
>
<div className="about_app_wrapper">
<div className="about_app_header">
<div>
<img src={config.logo.alt} />
return <Mask visible={visible} onMaskClick={() => close()}>
<div className="aboutApp_wrapper">
<Card
bodyClassName="aboutApp_card"
headerClassName="aboutApp_card_header"
title={
<div className="content">
<div className="branding">
<h2>{config.app.siteName}</h2>
<span>{config.author}</span>
</div>
<div>
<h1>{appConfig.siteName}</h1>
<div>
<antd.Tag>
<Icons.Tag />v{eviteNamespace?.projectVersion ?? " experimental"}
</antd.Tag>
{eviteNamespace.eviteVersion &&
<antd.Tag color="geekblue">eVite v{eviteNamespace?.eviteVersion}</antd.Tag>}
{eviteNamespace.version?.node && <antd.Tag color="green">
<Icons.Hexagon /> v{eviteNamespace?.versions?.node}
</antd.Tag>}
<antd.Tag color={isDevMode ? "magenta" : "green"}>
{isDevMode ? <Icons.Triangle /> : <Icons.CheckCircle />}
{isDevMode ? "development" : "stable"}
</antd.Tag>
</div>
<antd.Tag><Icons.Tag />v{window.app.version ?? "experimental"}</antd.Tag>
<antd.Tag color={isProduction ? "green" : "magenta"}>
{isProduction ? <Icons.CheckCircle /> : <Icons.Triangle />}
{String(import.meta.env.MODE)}
</antd.Tag>
</div>
</div>
<div className="about_app_info"></div>
}
>
<div className="group">
<h3><Icons.Globe />Server information</h3>
<div>
<antd.Tag color={isWSMainConnected ? "green" : "red"}><Icons.Cpu />{WSMainOrigin}</antd.Tag>
</div>
</div>
</antd.Modal>
)
}
<div className="group">
<h3><Icons.GitMerge />Versions</h3>
<div>
<antd.Tag color="#ffec3d">eVite v{window.__eviteVersion ?? "experimental"}</antd.Tag>
<antd.Tag color="#61DBFB"><DiReact /> v{React.version ?? "experimental"}</antd.Tag>
</div>
</div>
</Card>
</div>
</Mask >
}
export function openModal() {
const component = document.createElement("div")
document.body.appendChild(component)
ReactDOM.render(<AboutCard />, component)
}
const onClose = () => {
ReactDOM.unmountComponentAtNode(component)
document.body.removeChild(component)
}
ReactDOM.render(<AboutCard onClose={onClose} />, component)
}

89
packages/app/src/components/AboutApp/index.less
View File

@ -1,36 +1,75 @@
.about_app_wrapper {
.aboutApp_wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
.about_app_header {
width: 100%;
.aboutApp_card {
height: fit-content;
width: 80vw;
display: flex;
flex-direction: row;
align-items: baseline;
margin: 20px 20px 80px 20px;
img {
height: fit-content;
width: 200px;
max-height: 200px;
max-width: 200px;
svg {
margin: 0;
}
h1 {
font-size: 55px;
.ant-tag {
display: inline-flex;
align-items: center;
}
> div {
padding-right: 50px;
}
}
.about_app_info {
.group {
width: 100%;
display: inline-flex;
flex-direction: column;
justify-content: center;
> div {
display: inline-flex;
margin-left: 10px;
}
margin-bottom: 10px;
}
}
.aboutApp_card_header {
.adm-card-header-title {
width: 100%;
}
.content {
width: 100%;
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
h1,h2,h3 {
margin: 0;
}
.branding {
display: flex;
flex-direction: column;
h1,h2,h3 {
height: fit-content;
line-height: 24px;
}
span {
height: fit-content;
color: var(--background-color-contrast);
font-size: 10px;
}
}
}
}

18
packages/app/src/components/ActionsBar/index.jsx
View File

@ -5,8 +5,22 @@ import "./index.less"
export default (props) => {
const { children } = props
return <div style={props.style} className={classnames("actionsBar_card", [props.mode])}>
<div style={props.wrapperStyle} className="actionsBar_flexWrapper">
return <div
style={{
...props.style,
padding: props.padding,
}}
className={classnames(
"actionsBar",
[props.mode],
{["transparent"]: props.type === "transparent"},
{["spaced"]: props.spaced},
)}
>
<div
style={props.wrapperStyle}
className="wrapper"
>
{children}
</div>
</div>

53
packages/app/src/components/ActionsBar/index.less
View File

@ -1,6 +1,7 @@
@actionsBar_height: fit-content;
.actionsBar_card {
.actionsBar {
--ignore-dragger: true;
display: inline-block;
white-space: nowrap;
@ -15,7 +16,9 @@
border-radius: 8px;
background-color: #0c0c0c15;
backdrop-filter: blur(10px);
--webkit-backdrop-filter: blur(10px);
transition: all 200ms ease-in-out;
@ -28,6 +31,28 @@
z-index: 0;
}
.wrapper {
display: flex;
flex-direction: row;
align-items: center;
height: 100%;
transition: all 200ms ease-in-out;
> div {
margin: 0 5px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
--ignore-dragger: true;
span {
height: fit-content;
}
}
}
&.float {
z-index: 1000;
position: sticky;
@ -56,20 +81,20 @@
width: 100%;
margin-bottom: 10px;
}
}
.actionsBar_flexWrapper {
display: flex;
flex-direction: row;
align-items: center;
&.transparent {
background-color: transparent;
border: none;
backdrop-filter: none;
--webkit-backdrop-filter: none;
}
height: 100%;
transition: all 200ms ease-in-out;
> div {
margin: 0 5px;
display: flex;
flex-direction: column;
align-items: center;
&.spaced {
.wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
}
}

258
packages/app/src/components/AddableSelectList/index.jsx Normal file
View File

@ -0,0 +1,258 @@
import React from "react"
import * as antd from "antd"
import { PullToRefresh } from "antd-mobile"
import { Icons } from "components/Icons"
import { SelectableList, SwipeItem, Skeleton } from "components"
import { debounce } from "lodash"
import fuse from "fuse.js"
import "./index.less"
const statusRecord = {
pulling: "Slide down to refresh",
canRelease: "Release",
refreshing: <Icons.LoadingOutlined spin />,
complete: <Icons.Check />,
}
export const AddableSelectListSelector = (props = {}) => {
const [loading, setLoading] = React.useState(true)
const [data, setData] = React.useState([])
const [searchValue, setSearchValue] = React.useState(null)
React.useEffect(async () => {
await fetchData()
}, [])
const fetchData = async () => {
setLoading(true)
if (typeof props.loadData === "function") {
const result = await props.loadData()
setData(result)
}
setLoading(false)
}
const search = (value) => {
if (typeof value !== "string") {
if (typeof value.target?.value === "string") {
value = value.target.value
}
}
if (value === "") {
return setSearchValue(null)
}
const searcher = new fuse(data, {
includeScore: true,
keys: [...(props.searcherKeys ?? []), "_id", "name"],
})
const result = searcher.search(value)
return setSearchValue(result.map((entry) => {
return entry.item
}))
}
const debouncedSearch = debounce((value) => search(value), props.debounceSearchWait ?? 500)
const onSearch = (keyword) => {
if (typeof keyword !== "string") {
keyword = keyword.target.value
}
if (keyword === "" && searchValue) {
return setSearchValue(null)
}
debouncedSearch(keyword)
}
const isExcludedId = (id) => {
if (!props.excludedSelectedKeys) {
return false
}
if (props.excludedIds) {
return props.excludedIds.includes(id)
}
return false
}
const findData = (id) => {
return data.find((item) => {
return item._id === id
})
}
if (loading) {
return <Skeleton />
}
return <div className="addableSelectListSelector">
<div className="header">
<div>
<antd.Input.Search
placeholder={props.searchPlaceholder ?? "Search"}
onSearch={onSearch}
onChange={onSearch}
allowClear
/>
</div>
</div>
<PullToRefresh
renderText={status => {
return <div>{statusRecord[status]}</div>
}}
onRefresh={fetchData}
>
<SelectableList
overrideSelectionEnabled
items={searchValue ?? data}
actions={[
<div call="onDone" key="done">
Done
</div>
]}
events={{
onDone: (ctx, keys) => props.handleDone(keys, keys.map((key) => findData(key))),
}}
disabledKeys={props.excludedIds}
renderItem={(item) => {
return <div disabled={isExcludedId(item._id)} className="item">
<div><antd.Avatar shape="square" src={item.image} /></div>
<div><h1>{item.label}</h1></div>
</div>
}}
/>
</PullToRefresh>
</div>
}
export const AddableSelectListItem = (props) => {
const { item, actions, onClick, onDelete } = props
const handleClick = () => {
if (typeof onClick === "function") {
onClick(item)
}
}
const handleDelete = () => {
if (typeof onDelete === "function") {
onDelete(item)
}
}
return <SwipeItem
onDelete={handleDelete}
>
<antd.List.Item
key={item._id}
className="item"
>
<antd.List.Item.Meta
avatar={<antd.Avatar src={item.image} />}
title={item.label}
/>
</antd.List.Item>
</SwipeItem>
}
//@evite-components#OperatorsAssignments*mobile/desktop
export default class AddableSelectList extends React.Component {
state = {
selectedKeys: [],
selectedItems: [],
}
onClickAdd = async () => {
window.app.DrawerController.open("AddableSelectListSelector", AddableSelectListSelector, {
onDone: async (ctx, keys, data) => {
if (keys.length <= 0) {
ctx.close()
return false
}
let { selectedKeys, selectedItems } = this.state
selectedKeys = [...selectedKeys, ...keys]
selectedItems = [...selectedItems, ...data]
await this.setState({ selectedKeys: selectedKeys, selectedItems: selectedItems })
if (typeof this.props.onSelectItem === "function") {
await this.props.onSelectItem(keys)
}
ctx.close()
},
componentProps: {
loadData: this.props.loadData,
searcherKeys: this.props.searcherKeys,
debounceSearchWait: this.props.debounceSearchWait,
excludedIds: this.state.selectedKeys,
excludedSelectedKeys: this.props.excludedSelectedKeys,
},
})
}
onClickItem = async (item) => {
if (typeof this.props.onClickItem === "function") {
await this.props.onClickItem(item)
}
}
onDeleteItem = async (item) => {
if (typeof this.props.onDeleteItem === "function") {
await this.props.onDeleteItem(item)
}
const { selectedKeys, selectedItems } = this.state
const newSelectedKeys = selectedKeys.filter((key) => {
return key !== item._id
})
const newSelectedItems = selectedItems.filter((_item) => {
return _item._id !== item._id
})
this.setState({ selectedKeys: newSelectedKeys, selectedItems: newSelectedItems })
}
render() {
return <div className="addableSelectList">
<div>
<antd.List
dataSource={this.state.selectedItems}
renderItem={(item) => {
return <AddableSelectListItem
item={item}
actions={this.props.actions}
onClick={() => this.onClickItem(item)}
onDelete={() => { this.onDeleteItem(item) }}
/>
}}
/>
</div>
<div className="actions">
<div key="add">
<antd.Button
icon={<Icons.Plus />}
shape="round"
onClick={this.onClickAdd}
>
Add
</antd.Button>
</div>
</div>
</div>
}
}

45
packages/app/src/components/AddableSelectList/index.less Normal file
View File

@ -0,0 +1,45 @@
.addableSelectListSelector {
> div {
margin-bottom: 10px;
}
.item {
h1 {
margin: 0;
}
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
> div {
margin-right: 10px;
}
}
}
.addableSelectList {
#delete {
border-radius: 4px;
}
.item {
background-color: var(--background-color-primary);
}
.actions {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
> div {
margin-right: 6px;
}
}
> div {
margin-bottom: 10px;
}
}

204
packages/app/src/components/AdminTools/UserDataManager/index.jsx Normal file
View File

@ -0,0 +1,204 @@
import React from "react"
import * as antd from "antd"
import debounce from "lodash/debounce"
import { Translation } from "react-i18next"
import { ActionsBar } from "components"
import { Icons } from "components/Icons"
import "./index.less"
export const EditAccountField = ({ id, component, props, header, handleChange, delay, defaultValue, allowEmpty }) => {
const [currentValue, setCurrentValue] = React.useState(defaultValue)
const [emittedValue, setEmittedValue] = React.useState(null)
const debouncedHandleChange = React.useCallback(
debounce((value) => handleChange({ id, value }), delay ?? 300),
[],
)
const handleDiscard = (event) => {
if (typeof event !== "undefined") {
event.target.blur()
}
setCurrentValue(defaultValue)
handleChange({ id, value: defaultValue })
}
React.useEffect(() => {
debouncedHandleChange(currentValue)
}, [emittedValue])
const onChange = (event) => {
event.persist()
let { value } = event.target
if (typeof value === "string") {
if (value.length === 0) {
// if is not allowed to be empty, discard modifications
if (!allowEmpty) {
return handleDiscard(event)
}
}
}
setCurrentValue(value)
setEmittedValue(value)
}
const handleKeyDown = (event) => {
if (event.keyCode === 27) {
// "escape" pressed, reset to default value
handleDiscard(event)
}
}
const RenderComponent = component
return (
<div key={id} className="edit_account_field">
{header ? header : null}
<RenderComponent {...props} value={currentValue} id={id} onChange={onChange} onKeyDown={handleKeyDown} />
</div>
)
}
export default class UserDataManager extends React.Component {
state = {
data: this.props.user,
changes: [],
loading: false,
}
api = window.app.request
componentDidMount = async () => {
if (!this.props.user && this.props.userId) {
// TODO: Fetch from API
}
}
handleSave = async () => {
if (!Array.isArray(this.state.changes)) {
antd.message.error("Something went wrong")
console.error("Changes should be an array")
return false
}
await this.setState({ loading: true })
const update = {}
this.state.changes.forEach((change) => {
update[change.id] = change.value
})
const result = await this.api.post.updateUser({ _id: this.state.data._id, update }).catch((err) => {
antd.message.error(err.message)
console.error(err)
return false
})
await this.setState({ changes: [], loading: false })
if (typeof this.props.onSave === "function") {
await this.props.onSave(this.state.changes)
}
if (result) {
if (typeof this.props.handleDone === "function") {
this.props.handleDone(result)
}
}
}
handleChange = (event) => {
const { id, value } = event
let changes = [...this.state.changes]
changes = changes.filter((change) => change.id !== id)
if (this.state.data[id] !== value) {
changes.push({ id, value })
}
this.setState({ changes })
}
render() {
return (
<div className="edit_account">
<div className="edit_account_wrapper">
<div className="edit_account_category">
<h2>
<Icons.User /> Account information
</h2>
<EditAccountField
id="username"
defaultValue={this.state.data.username}
header={
<div>
<Icons.Tag /> Username
</div>
}
component={antd.Input}
props={{
placeholder: "Username",
disabled: true,
}}
handleChange={this.handleChange}
/>
<EditAccountField
id="fullName"
defaultValue={this.state.data.fullName}
header={
<div>
<Icons.User /> Name
</div>
}
component={antd.Input}
props={{
placeholder: "Your full name",
}}
handleChange={this.handleChange}
/>
<EditAccountField
id="email"
defaultValue={this.state.data.email}
header={
<div>
<Icons.Mail /> Email
</div>
}
component={antd.Input}
props={{
placeholder: "Your email address",
type: "email",
}}
handleChange={this.handleChange}
/>
</div>
</div>
<ActionsBar spaced>
<div>
{this.state.changes.length} <Translation>
{(t) => t("Changes")}
</Translation>
</div>
<div>
<antd.Button
type="primary"
loading={this.state.loading}
disabled={this.state.loading}
onClick={this.handleSave}
>
<Translation>
{(t) => t("Save")}
</Translation>
</antd.Button>
</div>
</ActionsBar>
</div>
)
}
}

1
packages/app/src/pages/account/components/editor/index.less → packages/app/src/components/AdminTools/UserDataManager/index.less
View File

@ -23,6 +23,7 @@
padding: 20px 0 20px 0;
background-color: rgba(221, 221, 221, 0.5);
backdrop-filter: blur(2px);
--webkit-backdrop-filter: blur(2px);
border-radius: 18px 18px 0 0;
transition: all 0.3s ease-in-out;

140
packages/app/src/components/AdminTools/UserRolesManager/index.jsx Normal file
View File

@ -0,0 +1,140 @@
import React from "react"
import * as antd from "antd"
import { ActionsBar, UserSelector, Skeleton } from "components"
import { Icons } from "components/Icons"
import "./index.less"
export default class UserRolesManager extends React.Component {
state = {
users: null,
roles: null,
}
api = window.app.request
componentDidMount = async () => {
await this.fetchRoles()
if (typeof this.props.id !== "undefined") {
const ids = Array.isArray(this.props.id) ? this.props.id : [this.props.id]
await this.fetchUsersData(ids)
}
}
fetchRoles = async () => {
const result = await this.api.get.roles().catch((err) => {
antd.message.error(err)
console.error(err)
return false
})
if (result) {
this.setState({ roles: result })
}
}
fetchUsersData = async (users) => {
const result = await this.api.get.users(undefined, { _id: users }).catch((err) => {
antd.message.error(err)
console.error(err)
return false
})
if (result) {
this.setState({
users: result.map((data) => {
return {
_id: data._id,
username: data.username,
roles: data.roles,
}
})
})
}
}
handleSelectUser = async (users) => {
this.fetchUsersData(users)
}
handleRoleChange = (userId, role, to) => {
let updatedUsers = this.state.users.map((user) => {
if (user._id === userId) {
if (to == true) {
user.roles.push(role)
} else {
user.roles = user.roles.filter((r) => r !== role)
}
}
return user
})
this.setState({ users: updatedUsers })
}
handleSubmit = async () => {
const update = this.state.users.map((data) => {
return {
_id: data._id,
roles: data.roles,
}
})
const result = await this.api.post.updateUserRoles({ update }).catch((err) => {
antd.message.error(err)
console.error(err)
return false
})
if (result) {
this.props.handleDone(result)
if (typeof this.props.close === "function") {
this.props.close()
}
}
}
renderItem = (item) => {
return <div className="grantRoles_user">
<h2>
<Icons.User /> {item.username}
</h2>
<div className="roles">
{this.state.roles.map((role) => {
return <antd.Checkbox
key={role.name}
checked={item.roles.includes(role.name)}
onChange={(to) => this.handleRoleChange(item._id, role.name, to.target.checked)}
>
{role.name}
</antd.Checkbox>
})}
</div>
</div>
}
render() {
const { users } = this.state
if (!users) {
return <UserSelector handleDone={this.handleSelectUser} />
}
return <div>
{users.map((data) => {
return this.renderItem(data)
})}
<ActionsBar>
<div>
<antd.Button icon={<Icons.Save />} onClick={() => this.handleSubmit()}>
Submit
</antd.Button>
</div>
</ActionsBar>
</div>
}
}

19
packages/app/src/components/AdminTools/UserRolesManager/index.less Normal file
View File

@ -0,0 +1,19 @@
.grantRoles_user {
display: flex;
flex-direction: column;
.roles {
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
padding: 10px;
border-radius: 8px;
background-color: var(--background-color-accent);
}
> div {
margin-bottom: 10px;
}
}

41
packages/app/src/components/AdminTools/index.js Normal file
View File

@ -0,0 +1,41 @@
import UserDataManager from "./UserDataManager"
import UserRolesManager from "./UserRolesManager"
export { UserDataManager, UserRolesManager }
export const open = {
dataManager: (user) => {
return new Promise((resolve, reject) => {
window.app.DrawerController.open("UserDataManager", UserDataManager, {
componentProps: {
user: user,
},
onDone: (ctx, value) => {
resolve(value)
ctx.close()
},
onFail: (ctx, value) => {
reject(value)
ctx.close()
}
})
})
},
rolesManager: (id) => {
return new Promise((resolve, reject) => {
window.app.DrawerController.open("UserRolesManager", UserRolesManager, {
componentProps: {
id: id,
},
onDone: (ctx, value) => {
resolve(value)
ctx.close()
},
onFail: (ctx, value) => {
reject(value)
ctx.close()
}
})
})
}
}

1
packages/app/src/components/AppSearcher/index.jsx
View File

@ -32,7 +32,6 @@ export default class AppSearcher extends React.Component {
let results = []
// get results
console.log(value)
results.push({ id: value, title: value })
// storage results

15
packages/app/src/components/AppSearcher/index.less
View File

@ -2,6 +2,7 @@
.search_bar {
user-select: none;
--webkit-user-select: none;
height: fit-content;
border: 0;
@ -9,16 +10,16 @@
vertical-align: middle !important;
.ant-input {
background-color: var(--background-color-accent)!important;
border-color: var(--background-color-accent)!important;
color: var(--background-color-contrast)!important;
background-color: var(--background-color-accent) !important;
border-color: var(--background-color-accent) !important;
color: var(--background-color-contrast) !important;
}
.ant-input-group {
display: flex;
align-items: center;
justify-content: center;
height: fit-content;
align-items: center;
justify-content: center;
height: fit-content;
}
.ant-input-group-addon {
@ -27,7 +28,7 @@
}
.ant-btn {
background-color: var(--background-color-primary)!important;
background-color: var(--background-color-primary) !important;
border: 0 !important;
}
}

23
packages/app/src/components/Crash/index.jsx Normal file
View File

@ -0,0 +1,23 @@
import React from "react"
import { Result, Button } from "antd"
export default (props) => {
const { crash } = props
return <div className="app_crash_wrapper">
<Result
status="error"
title="Crash"
subTitle={crash.message}
extra={[
<Button type="primary" key="reload" onClick={() => window.location.reload()}>
Reload app
</Button>
]}
>
<div>
<code>{crash.error}</code>
</div>
</Result>
</div>
}

15
packages/app/src/components/DraggableDrawer/helpers.js Normal file
View File

@ -0,0 +1,15 @@
export function isDirectionTop(direction) {
return direction === "top";
}
export function isDirectionBottom(direction) {
return direction === "bottom";
}
export function isDirectionLeft(direction) {
return direction === "left";
}
export function isDirectionRight(direction) {
return direction === "right";
}

442
packages/app/src/components/DraggableDrawer/index.jsx Normal file
View File

@ -0,0 +1,442 @@
// © Jack Hanford https://github.com/hanford/react-drag-drawer
import React, { Component } from "react";
import { Motion, spring, presets } from "react-motion";
import PropTypes from "prop-types";
import document from "global/document";
import Observer from "react-intersection-observer";
import { css } from "@emotion/css";
import { createPortal } from "react-dom";
import {
isDirectionBottom,
isDirectionTop,
isDirectionLeft,
isDirectionRight,
} from "./helpers.js"
export default class Drawer extends Component {
static propTypes = {
open: PropTypes.bool.isRequired,
children: PropTypes.oneOfType([
PropTypes.object,
PropTypes.array,
PropTypes.element
]),
onRequestClose: PropTypes.func,
onDrag: PropTypes.func,
onOpen: PropTypes.func,
inViewportChange: PropTypes.func,
allowClose: PropTypes.bool,
notifyWillClose: PropTypes.func,
direction: PropTypes.string,
modalElementClass: PropTypes.oneOfType([
PropTypes.object,
PropTypes.string
]),
containerOpacity: PropTypes.number,
containerElementClass: PropTypes.string,
getContainerRef: PropTypes.func,
getModalRef: PropTypes.func
}
static defaultProps = {
notifyWillClose: () => { },
onOpen: () => { },
onDrag: () => { },
inViewportChange: () => { },
onRequestClose: () => { },
getContainerRef: () => { },
getModalRef: () => { },
containerOpacity: 0.6,
direction: "bottom",
parentElement: document.body,
allowClose: true,
dontApplyListeners: false,
containerElementClass: "",
modalElementClass: ""
}
state = {
ignore: false,
onRange: false,
open: this.props.open,
thumb: 0,
start: 0,
position: 0,
touching: false,
listenersAttached: false
}
DRAGGER_HEIGHT_SIZE = 100
MAX_NEGATIVE_SCROLL = 5
SCROLL_TO_CLOSE = 475
ALLOW_DRAWER_TRANSFORM = true
componentDidUpdate(prevProps, nextState) {
// in the process of closing the drawer
if (!this.props.open && prevProps.open) {
this.removeListeners()
setTimeout(this.setState({ open: false }), 300)
}
if (this.drawer) {
this.getNegativeScroll(this.drawer)
}
// in the process of opening the drawer
if (this.props.open && !prevProps.open) {
this.props.onOpen()
this.setState({ open: true })
}
}
componentWillUnmount() {
this.removeListeners()
}
attachListeners = drawer => {
const { dontApplyListeners, getModalRef, direction } = this.props
const { listenersAttached } = this.state
// only attach listeners once as this function gets called every re-render
if (!drawer || listenersAttached || dontApplyListeners) return
this.drawer = drawer
getModalRef(drawer)
this.drawer.addEventListener("touchend", this.release)
this.drawer.addEventListener("touchmove", this.drag)
this.drawer.addEventListener("touchstart", this.tap)
let position = 0
if (isDirectionRight(direction)) {
position = drawer.scrollWidth
}
this.setState({ listenersAttached: true, position }, () => {
setTimeout(() => {
// trigger reflow so webkit browsers calculate height properly 😔
// https://bugs.webkit.org/show_bug.cgi?id=184905
this.drawer.style.display = "none"
void this.drawer.offsetHeight
this.drawer.style.display = ""
}, 300)
})
}
isThumbInDraggerRange = (event) => {
return (event.touches[0].clientY - this.drawer.getBoundingClientRect().top) < this.DRAGGER_HEIGHT_SIZE
}
removeListeners = () => {
if (!this.drawer) {
return false
}
this.drawer.removeEventListener("touchend", this.release)
this.drawer.removeEventListener("touchmove", this.drag)
this.drawer.removeEventListener("touchstart", this.tap)
this.setState({ listenersAttached: false })
}
tap = event => {
const { pageY, pageX } = event.touches[0]
const shouldIgnored = Boolean(event.target.getAttribute("ignore-dragger") || (window.getComputedStyle(event.target).getPropertyValue("--ignore-dragger") !== ""))
const start = isDirectionBottom(this.props.direction) || isDirectionTop(this.props.direction) ? pageY : pageX
// reset NEW_POSITION and MOVING_POSITION
this.NEW_POSITION = 0
this.MOVING_POSITION = 0
this.setState({ ignore: shouldIgnored, onRange: this.isThumbInDraggerRange(event), thumb: start, start: start, touching: true })
}
drag = event => {
if (this.state.ignore) {
return false
}
const { direction } = this.props
const { thumb, position } = this.state
const { pageY, pageX } = event.touches[0]
const movingPosition = isDirectionBottom(direction) || isDirectionTop(direction) ? pageY : pageX
const delta = movingPosition - thumb
const newPosition = isDirectionBottom(direction) ? position + delta : position - delta
if (newPosition > 0 && this.ALLOW_DRAWER_TRANSFORM) {
// stop android's pull to refresh behavior
event.preventDefault()
this.props.onDrag({ newPosition })
// we set this, so we can access it in shouldWeCloseDrawer. Since setState is async, we're not guranteed we'll have the
// value in time
this.MOVING_POSITION = movingPosition
this.NEW_POSITION = newPosition
let positionThreshold = 0
if (isDirectionRight(direction)) {
positionThreshold = this.drawer.scrollWidth
}
if (newPosition < positionThreshold && this.shouldWeCloseDrawer()) {
this.props.notifyWillClose(true)
} else {
this.props.notifyWillClose(false)
}
// not at the bottom
if (this.NEGATIVE_SCROLL < newPosition) {
this.setState({
thumb: movingPosition,
position:
positionThreshold > 0
? Math.min(newPosition, positionThreshold)
: newPosition
})
}
}
}
release = (event) => {
const { direction } = this.props
this.setState({ touching: false })
if (this.shouldWeCloseDrawer() && this.state.onRange) {
this.props.onRequestClose(this)
} else {
let newPosition = 0
if (isDirectionRight(direction)) {
newPosition = this.drawer.scrollWidth
}
this.setState({ position: newPosition })
}
}
getNegativeScroll = (element) => {
const { direction } = this.props
const size = this.getElementSize()
if (isDirectionBottom(direction) || isDirectionTop(direction)) {
this.NEGATIVE_SCROLL = size - element.scrollHeight - this.MAX_NEGATIVE_SCROLL
} else {
this.NEGATIVE_SCROLL = size - element.scrollWidth - this.MAX_NEGATIVE_SCROLL
}
}
hideDrawer = () => {
const { allowClose, direction } = this.props
let defaultPosition = 0
if (isDirectionRight(direction)) {
defaultPosition = this.drawer.scrollWidth
}
if (allowClose === false) {
// if we aren't going to allow close, let's animate back to the default position
return this.setState({
position: defaultPosition,
thumb: 0,
touching: false
})
}
this.setState({
open: false,
position: defaultPosition,
touching: false
})
// cleanup
this.removeListeners()
}
shouldWeCloseDrawer = () => {
const { start: touchStart } = this.state
const { direction } = this.props
let initialPosition = 0
if (isDirectionRight(direction)) {
initialPosition = this.drawer.scrollWidth
}
if (this.MOVING_POSITION === initialPosition) return false
if (isDirectionRight(direction)) {
return (
this.NEW_POSITION < initialPosition &&
this.MOVING_POSITION - touchStart > this.SCROLL_TO_CLOSE
)
} else if (isDirectionLeft(direction)) {
return (
this.NEW_POSITION >= initialPosition &&
touchStart - this.MOVING_POSITION > this.SCROLL_TO_CLOSE
)
} else if (isDirectionTop(direction)) {
return (
this.NEW_POSITION >= initialPosition &&
touchStart - this.MOVING_POSITION > this.SCROLL_TO_CLOSE
)
} else {
return (
this.NEW_POSITION >= initialPosition &&
this.MOVING_POSITION - touchStart > this.SCROLL_TO_CLOSE
)
}
}
getDrawerTransform = (value) => {
const { direction } = this.props
if (isDirectionBottom(direction)) {
return { transform: `translate3d(0, ${value}px, 0)` }
} else if (isDirectionTop(direction)) {
return { transform: `translate3d(0, -${value}px, 0)` }
} else if (isDirectionLeft(direction)) {
return { transform: `translate3d(-${Math.abs(value)}px, 0, 0)` }
} else if (isDirectionRight(direction)) {
return { transform: `translate3d(${value}px, 0, 0)` }
}
}
getElementSize = () => {
return isDirectionBottom(this.props.direction) || isDirectionTop(this.props.direction) ? window.innerHeight : window.innerWidth
}
getPosition(hiddenPosition) {
const { position } = this.state
const { direction } = this.props
if (isDirectionRight(direction)) {
return hiddenPosition - position
} else {
return position
}
}
inViewportChange = (inView) => {
this.props.inViewportChange(inView)
this.ALLOW_DRAWER_TRANSFORM = inView
}
preventDefault = (event) => event.preventDefault()
stopPropagation = (event) => event.stopPropagation()
render() {
const {
containerElementClass,
containerOpacity,
dontApplyListeners,
id,
getContainerRef,
getModalRef,
direction
} = this.props
const open = this.state.open && this.props.open
// If drawer isn't open or in the process of opening/closing, then remove it from the DOM
// also, if we're not client side we need to return early because createPortal is only
// a clientside method
// if ((!this.state.open && !this.props.open)) {
// return null
// }
const { touching } = this.state
const springPreset = isDirectionLeft(direction) ? { damping: 17, stiffness: 120 } : { damping: 20, stiffness: 300 }
const animationSpring = touching ? springPreset : presets.stiff
const hiddenPosition = this.getElementSize()
const position = this.getPosition(hiddenPosition)
// Style object for the container element
let containerStyle = {
backgroundColor: `rgba(55, 56, 56, ${open ? containerOpacity : 0})`
}
// If direction is right, we set the overflowX property to 'hidden' to hide the x scrollbar during
// the sliding animation
if (isDirectionRight(direction)) {
containerStyle = {
...containerStyle,
overflowX: "hidden"
}
}
return createPortal(
<Motion
style={{
translate: spring(open ? position : hiddenPosition, animationSpring)
}}
defaultStyle={{
translate: hiddenPosition
}}
>
{({ translate }) => {
return (
<div
id={id}
style={containerStyle}
onClick={this.props.onRequestClose}
className={`${Container} ${containerElementClass} `}
ref={getContainerRef}
>
<Observer
className={HaveWeScrolled}
onChange={this.inViewportChange}
/>
<div
onClick={this.stopPropagation}
style={this.getDrawerTransform(translate)}
ref={this.attachListeners}
className={this.props.modalElementClass || ""}
>
{this.props.children}
</div>
</div>
)
}}
</Motion>,
this.props.parentElement
)
}
}
const Container = css`
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
flex-shrink: 0;
align-items: center;
z-index: 11;
transition: background-color 0.2s linear;
overflow-y: auto;
overscroll-behavior: none;
`
const HaveWeScrolled = css`
position: absolute;
top: 0;
height: 1px;
width: 100%;
`

90
packages/app/src/components/ImageUploader/index.jsx Normal file
View File

@ -0,0 +1,90 @@
import React from "react"
import { Icons } from "components/Icons"
import * as antd from "antd"
import { getBase64 } from "utils"
export default class ImageUploader extends React.Component {
state = {
previewVisible: false,
previewImage: "",
previewTitle: "",
fileList: [],
urlList: [],
}
api = window.app.request
handleChange = ({ fileList }) => {
this.setState({ fileList })
if (typeof this.props.onChange === "function") {
this.props.onChange(fileList)
}
}
handleCancel = () => this.setState({ previewVisible: false })
handlePreview = async file => {
if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj)
}
this.setState({
previewImage: file.url || file.preview,
previewVisible: true,
previewTitle: file.name || file.url.substring(file.url.lastIndexOf("/") + 1),
})
}
handleUploadRequest = async (req) => {
if (typeof this.props.onUpload === "function") {
this.props.onUpload(req)
} else {
const payloadData = new FormData()
payloadData.append(req.file.name, req.file)
const result = await this.api.post.upload(payloadData).catch(() => {
req.onError("Error uploading image")
return false
})
if (result) {
req.onSuccess()
await this.setState({ urlList: [...this.state.urlList, ...result.urls] })
}
if (typeof this.props.onUploadDone === "function") {
await this.props.onUploadDone(this.state.urlList)
}
return result.urls
}
}
render() {
const uploadButton = (<div>
<Icons.Plus />
<div style={{ marginTop: 8 }}>Upload</div>
</div>)
return <div>
<antd.Upload
listType="picture-card"
fileList={this.state.fileList}
onPreview={this.handlePreview}
onChange={this.handleChange}
customRequest={this.handleUploadRequest}
>
{this.state.fileList.length >= 8 ? null : uploadButton}
</antd.Upload>
<antd.Modal
visible={this.state.previewVisible}
title={this.state.previewTitle}
footer={null}
onCancel={this.handleCancel}
>
<img style={{ width: "100%" }} src={this.state.previewImage} />
</antd.Modal>
</div>
}
}

54
packages/app/src/components/ImageViewer/index.jsx Normal file
View File

@ -0,0 +1,54 @@
import React from "react"
import { Swiper } from "antd-mobile"
import { LazyLoadImage } from "react-lazy-load-image-component"
import classnames from "classnames"
import "react-lazy-load-image-component/src/effects/blur.css"
import "./index.less"
const ImageViewer = (props) => {
React.useEffect(() => {
if (!Array.isArray(props.src)) {
props.src = [props.src]
}
}, [])
const openViewer = () => {
if (props.extended) {
return false
}
window.app.DrawerController.open("ImageViewer", ImageViewer, {
componentProps: {
src: props.src,
extended: true
}
})
}
return <div className={classnames("ImageViewer", { ["extended"]: props.extended })}>
<Swiper>
{props.src.map((image) => {
return <Swiper.Item
onClick={() => {
openViewer(image)
}}
>
<LazyLoadImage
src={image}
effect="blur"
wrapperClassName="image-wrapper"
onClick={() => {
openViewer()
}}
onError={(e) => {
e.target.src = "/broken-image.svg"
}}
/>
</Swiper.Item>
})}
</Swiper>
</div>
}
export default ImageViewer

31
packages/app/src/components/ImageViewer/index.less Normal file
View File

@ -0,0 +1,31 @@
.ImageViewer {
--ignore-dragger: true;
width: 100%;
.image-wrapper {
width: 100%;
img {
border-radius: 8px;
--ignore-dragger: true;
width: 100%;
max-height: 25vh;
object-fit: cover;
border-radius: 5px;
}
}
&.extended {
height: 100%;
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
img {
max-height: 100vh;
height: 100%;
object-fit: fill;
}
}
}

76
packages/app/src/components/Navigation/index.jsx Normal file
View File

@ -0,0 +1,76 @@
import React from "react"
import { Translation } from "react-i18next"
import Items from "schemas/routes.json"
import { Icons, createIconRender } from "components/Icons"
import "./index.less"
export default class NavigationMenu extends React.Component {
onClick = (id) => {
window.app.setLocation(`/${id}`)
this.props.close()
}
generateMenus = (items) => {
// group items it has children to a new array and the rest to a general array
items = items.reduce((acc, item) => {
if (item.children) {
acc.push(item)
} else {
acc[0].children.push(item)
}
return acc
}, [{
id: "general",
title: "General",
icon: "Home",
children: []
}])
return items.map((group) => {
return <div key={group.id} className="group">
<h2>
{Icons[group.icon] && createIconRender(group.icon)}
<Translation>
{(t) => t(group.title)}
</Translation>
</h2>
<div className="items">
{
group.children.map((item) => {
return this.renderItem(item)
})
}
</div>
</div>
})
}
renderItem = (item, index) => {
return <div
key={item.id}
id={item.id}
onClick={() => this.onClick(item.id)}
className="item"
>
<div className="icon">
{Icons[item.icon] && createIconRender(item.icon)}
</div>
<div className="name">
<h1>
<Translation>
{(t) => t(item.title ?? item.id)}
</Translation>
</h1>
</div>
</div>
}
render() {
return <div className="navigation">
{this.generateMenus(Items)}
</div>
}
}

81
packages/app/src/components/Navigation/index.less Normal file
View File

@ -0,0 +1,81 @@
@buttonSize: 26vw;
@buttonBorderRadius: 8px;
.navigation {
display: inline-flex;
flex-direction: column;
width: 100%;
overflow: hidden;
.group {
display: inline-flex;
flex-direction: column;
.items {
display: flex;
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
.item {
--ignore-dragger: true;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
margin: 10px 0;
width: @buttonSize;
min-width: @buttonSize;
height: @buttonSize;
min-height: @buttonSize;
border-radius: @buttonBorderRadius;
background-color: var(--background-color-accent);
transition: all 80ms ease-in-out;
.icon {
svg {
margin: 0 !important;
font-size: 2rem;
}
}
.name {
width: 100%;
word-break: break-all;
text-overflow: ellipsis;
text-align: center;
color: var(--background-color-contrast);
padding-top: 10px;
h1 {
word-break: break-all;
width: 100%;
font-size: 1.1rem;
margin: 0!important;
}
}
}
.item:active {
background-color: var(--background-color-primary);
color: var(--background-color-contrast);
transform: scale(0.9);
}
}
> div {
margin-bottom: 20px;
}
}
}

24
packages/app/src/components/PostCard/index.jsx Normal file
View File

@ -0,0 +1,24 @@
import React from "react"
import * as antd from "antd"
import "./index.less"
export default class PostCard extends React.Component {
render() {
return <div className="postCard">
<div className="userInfo">
<div>
<antd.Avatar src={this.props.data.user.avatar} />
</div>
<div className="userName">
<h1>
@{this.props.data.user.username}
</h1>
</div>
</div>
<div className="content">
{this.props.data.message}
</div>
</div>
}
}

45
packages/app/src/components/PostCard/index.less Normal file
View File

@ -0,0 +1,45 @@
.postCard {
display: inline-flex;
flex-direction: column;
width: 100%;
max-width: 40vw;
padding: 17px;
background-color: var(--background-color-accent);
border-radius: 8px;
.userInfo {
display: inline-flex;
flex-direction: row;
align-items: center;
margin-bottom: 15px;
h1 {
margin: 0;
font-family: "DM Mono", monospace;
}
> div {
margin-right: 10px;
}
}
.content {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
background-color: var(--background-color-primary);
padding: 10px;
border-radius: 8px;
font-size: 14px;
font-family: "Poppins", sans-serif;
overflow: hidden;
word-break: break-all;
}
}

2
packages/app/src/components/RenderError/index.jsx
View File

@ -44,7 +44,7 @@ export default (props) => {
<Result
status="error"
title="Render Error"
subTitle="It seems that the application is having problems displaying this page, we have detected some unrecoverable errors due to a bug. (This error will be automatically reported to the developers to find a solution as soon as possible)"
subTitle="It seems that the application is having problems displaying this page, we have detected some unrecoverable errors due to a bug. (This error should be automatically reported to the developers to find a solution as soon as possible)"
extra={[
<Button type="primary" key="gomain" onClick={onClickGoMain}>
Go Main

24
packages/app/src/components/RenderWindow/index.less
View File

@ -13,7 +13,9 @@
&.translucid {
border: unset;
background-color: rgba(0, 0, 0, 0.2);
backdrop-filter: blur(10px);
--webkit-backdrop-filter: blur(10px);
filter: drop-shadow(8px 8px 10px rgba(0, 0, 0, 0.5));
}
}
@ -29,21 +31,21 @@
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
justify-content: space-between;
> div {
margin: 0 5px;
line-height: 0;
}
margin: 0 5px;
line-height: 0;
}
.title {
margin-left: 20px;
margin-left: 20px;
color: #fff - @topbar_background;
color: #fff - @topbar_background;
font-size: 13px;
font-style: italic;
font-family: "JetBrains Mono", monospace;
font-size: 13px;
font-style: italic;
font-family: "JetBrains Mono", monospace;
}
.actions {
@ -80,10 +82,12 @@
height: calc(100% - @topbar_height);
width: 100%;
overflow: overlay;
overflow: overlay;
user-select: text !important;
--webkit-user-select: text !important;
> div {
user-select: text !important;
--webkit-user-select: text !important;
}
}

32
packages/app/src/components/SearchButton/index.jsx Normal file
View File

@ -0,0 +1,32 @@
import React from "react"
import { SearchBar } from "antd-mobile"
import classnames from "classnames"
import "./index.less"
export default (props) => {
const searchBoxRef = React.useRef(null)
const [open, setOpen] = React.useState()
const openSearchBox = (to) => {
to = to ?? !open
setOpen(to)
if (to) {
searchBoxRef.current?.focus()
}
}
return <div
onClick={() => openSearchBox(true)}
className="searchButton">
<SearchBar
ref={searchBoxRef}
className={classnames("searchBox", { ["open"]: open })}
onSearch={props.onSearch}
onChange={props.onChange}
onFocus={() => openSearchBox(true)}
onBlur={() => openSearchBox(false)}
/>
</div>
}

18
packages/app/src/components/SearchButton/index.less Normal file
View File

@ -0,0 +1,18 @@
.searchButton {
.searchBox {
.adm-search-bar-input {
transition: all 150ms ease-in-out;
width: 0px;
}
&.open {
.adm-search-bar-input {
width: 20vw;
}
}
}
svg {
margin: 0;
}
}

391
packages/app/src/components/SelectableList/index.jsx
View File

@ -1,13 +1,113 @@
import React from "react"
import { Icons } from "components/Icons"
import { List, Button } from "antd"
import * as antd from "antd"
import { Button } from "antd"
import classnames from "classnames"
import _ from "lodash"
import { Translation } from "react-i18next"
import { Icons, createIconRender } from "components/Icons"
import { ActionsBar, } from "components"
import { useLongPress, Haptics } from "utils"
import "./index.less"
const ListItem = React.memo((props) => {
let { item } = props
if (!item.key) {
item.key = item._id ?? item.id
}
const doubleClickSpeed = 400
let delayedClick = null
let clickedOnce = null
const handleOnceClick = () => {
clickedOnce = null
if (typeof props.onClickItem === "function") {
return props.onClickItem(item.key)
}
}
const handleDoubleClick = () => {
if (typeof props.onDoubleClickItem === "function") {
return props.onDoubleClickItem(item.key)
}
}
const handleLongPress = () => {
if (typeof props.onLongPressItem === "function") {
return props.onLongPressItem(item.key)
}
}
const renderChildren = props.renderChildren(item)
const isDisabled = renderChildren.props.disabled
return React.createElement("div", {
id: item.key,
key: item.key,
disabled: isDisabled,
className: classnames("selectableList_item", {
["selected"]: props.selected,
["disabled"]: isDisabled,
}),
onDoubleClick: () => {
if (isDisabled) {
return false
}
handleDoubleClick()
},
...useLongPress(
// onLongPress
() => {
if (isDisabled) {
return false
}
if (props.onlyClickSelection) {
return false
}
handleLongPress()
},
// onClick
() => {
if (isDisabled) {
return false
}
if (props.onlyClickSelection) {
return handleOnceClick()
}
if (!delayedClick) {
delayedClick = _.debounce(handleOnceClick, doubleClickSpeed)
}
if (clickedOnce) {
delayedClick.cancel()
clickedOnce = false
handleDoubleClick()
} else {
clickedOnce = true
delayedClick()
}
},
{
shouldPreventDefault: true,
delay: props.longPressDelay ?? 300,
}
),
}, renderChildren)
})
export default class SelectableList extends React.Component {
state = {
selectedKeys: [],
selectionEnabled: false,
}
componentDidMount() {
@ -18,16 +118,52 @@ export default class SelectableList extends React.Component {
}
}
componentDidUpdate(prevProps, prevState) {
if (prevState.selectionEnabled !== this.state.selectionEnabled) {
if (this.state.selectionEnabled) {
this.handleFeedbackEvent("selectionStart")
} else {
this.handleFeedbackEvent("selectionEnd")
}
}
}
handleFeedbackEvent = (event) => {
if (typeof Haptics[event] === "function") {
return Haptics[event]()
}
}
isKeySelected = (key) => {
return this.state.selectedKeys.includes(key)
}
isAllSelected = () => {
return this.state.selectedKeys.length === this.props.items.length
}
selectAll = () => {
if (this.props.items.length > 0) {
let updatedSelectedKeys = [...this.props.items.map((item) => item.key ?? item.id ?? item._id)]
if (typeof this.props.disabledKeys !== "undefined") {
updatedSelectedKeys = updatedSelectedKeys.filter((key) => {
return !this.props.disabledKeys.includes(key)
})
}
this.handleFeedbackEvent("selectionChanged")
this.setState({
selectedKeys: [...this.props.items.map((item) => item.key ?? item.id ?? item._id)],
selectionEnabled: true,
selectedKeys: updatedSelectedKeys,
})
}
}
unselectAll = () => {
this.setState({
selectionEnabled: false,
selectedKeys: [],
})
}
@ -35,12 +171,18 @@ export default class SelectableList extends React.Component {
selectKey = (key) => {
let list = this.state.selectedKeys ?? []
list.push(key)
this.handleFeedbackEvent("selectionChanged")
return this.setState({ selectedKeys: list })
}
unselectKey = (key) => {
let list = this.state.selectedKeys ?? []
list = list.filter((_key) => key !== _key)
this.handleFeedbackEvent("selectionChanged")
return this.setState({ selectedKeys: list })
}
@ -48,7 +190,6 @@ export default class SelectableList extends React.Component {
if (typeof this.props.onDone === "function") {
this.props.onDone(this.state.selectedKeys)
}
this.unselectAll()
}
@ -56,17 +197,37 @@ export default class SelectableList extends React.Component {
if (typeof this.props.onDiscard === "function") {
this.props.onDiscard(this.state.selectedKeys)
}
this.unselectAll()
}
componentDidUpdate(prevProps, prevState) {
if (typeof this.props.selectionEnabled !== "undefined") {
if (!Boolean(this.props.selectionEnabled) && this.state.selectedKeys.length > 0) {
this.setState({
selectedKeys: [],
})
onDoubleClickItem = (key) => {
if (typeof this.props.onDoubleClick === "function") {
this.props.onDoubleClick(key)
}
}
onClickItem = (key) => {
if (this.props.overrideSelectionEnabled || this.state.selectionEnabled) {
if (this.isKeySelected(key)) {
this.unselectKey(key)
} else {
this.selectKey(key)
}
} else {
if (typeof this.props.onClickItem === "function") {
this.props.onClickItem(key)
}
}
}
onLongPressItem = (key) => {
if (this.props.overrideSelectionEnabled) {
return false
}
if (!this.state.selectionEnabled) {
this.selectKey(key)
this.setState({ selectionEnabled: true })
}
}
@ -75,31 +236,34 @@ export default class SelectableList extends React.Component {
return (
<div key={action.key}>
<Button
type={action.props.type}
shape={action.props.shape}
size={action.props.size}
style={{
...action.props.style,
}}
onClick={() => {
if (typeof this.props.events === "undefined") {
console.error("No events provided to SelectableList")
return false
}
if (typeof action.onClick === "function") {
action.onClick(this.state.selectedKeys)
}
if (typeof this.props[action.props.call] !== "undefined") {
if (typeof this.props[action.props.call] === "function") {
let data = this.state.selectedKeys // by default send selectedKeys
if (typeof action.props.sendData === "string") {
switch (action.props.sendData) {
case "keys": {
data = this.state.selectedKeys
}
default: {
data = this.state.selectedKeys
}
}
}
this.props[action.props.call](data)
}
if (typeof this.props.events[action.props.call] === "function") {
this.props.events[action.props.call]({
onDone: this.onDone,
onDiscard: this.onDiscard,
onCancel: this.onCancel,
selectKey: this.selectKey,
unselectKey: this.unselectKey,
selectAll: this.selectAll,
unselectAll: this.unselectAll,
isKeySelected: this.isKeySelected,
isAllSelected: this.isAllSelected,
}, this.state.selectedKeys)
}
}}
>
@ -110,124 +274,87 @@ export default class SelectableList extends React.Component {
})
}
renderActions = () => {
if (this.props.actionsDisabled) {
return null
}
return <div className={classnames("selectableList_bottomActions", { ["mobile"]: window.isMobile && !this.props.ignoreMobileActions })}>
<div key="discard">
<Button
shape="round"
onClick={this.onDiscard}
{...this.props.onDiscardProps}
>
{this.props.onDiscardRender ?? <Icons.X />}
Discard
</Button>
</div>
{Array.isArray(this.props.actions) && this.renderProvidedActions()}
</div>
getLongPressDelay = () => {
return window.app.settings.get("selection_longPress_timeout")
}
isKeySelected = (key) => {
return this.state.selectedKeys.includes(key)
}
renderItems = (data) => {
return data.length > 0 ? data.map((item, index) => {
item.key = item.key ?? item.id ?? item._id
renderItem = (item) => {
if (item.children) {
return <div className="selectableList_group">
{item.label}
<div className="selectableList_subItems">
{item.children.map((subItem) => {
return this.renderItem(subItem)
})}
if (item.children && Array.isArray(item.children)) {
return <div className="selectableList_group">
<h1>
{React.isValidElement(item.icon) ? item.icon : Icons[item.icon] && createIconRender(item.icon)}
<Translation>
{t => t(item.label)}
</Translation>
</h1>
<div className="selectableList_subItems">
{this.renderItems(item.children)}
</div>
</div>
</div>
}
const renderChildren = this.props.renderItem(item)
const _key = item.key ?? item.id ?? item._id ?? renderChildren.key
const selectionMethod = ["onClick", "onDoubleClick"].includes(this.props.selectionMethod) ? this.props.selectionMethod : "onClick"
const isSelected = this.isKeySelected(_key)
const isDisabled = renderChildren.props.disabled
const isNotSelectable = renderChildren.props.notSelectable
let renderProps = {
disabled: isDisabled,
children: renderChildren,
className: classnames("selectableList_item", {
["selected"]: isSelected && !isNotSelectable,
["disabled"]: isDisabled && !isNotSelectable,
}),
[selectionMethod]: () => {
if (isDisabled && isNotSelectable) {
return false
}
if (typeof this.props.selectionEnabled !== "undefined") {
if (!Boolean(this.props.selectionEnabled)) {
return false
}
}
if (isSelected) {
this.unselectKey(_key)
} else {
this.selectKey(_key)
}
}
}
if (selectionMethod == "onDoubleClick") {
renderProps.onClick = () => {
if (this.state.selectedKeys.length > 0) {
if (isSelected) {
this.unselectKey(_key)
}
}
}
}
let selected = this.isKeySelected(item.key)
return <div key={_key} {...renderProps} />
return <ListItem
item={item}
selected={selected}
longPressDelay={this.getLongPressDelay()}
onClickItem={this.onClickItem}
onDoubleClickItem={this.onDoubleClickItem}
onLongPressItem={this.onLongPressItem}
renderChildren={this.props.renderItem}
onlyClickSelection={this.props.onlyClickSelection || this.state.selectionEnabled}
/>
}) : <antd.Empty image={antd.Empty.PRESENTED_IMAGE_SIMPLE} />
}
render() {
const { borderer, grid, header, loadMore, locale, pagination, rowKey, size, split, itemLayout, loading } = this.props
const listProps = {
borderer,
grid,
header,
loadMore,
locale,
pagination,
rowKey,
size,
split,
itemLayout,
loading,
if (!this.props.overrideSelectionEnabled && this.state.selectionEnabled && this.state.selectedKeys.length === 0) {
this.setState({ selectionEnabled: false })
this.unselectAll()
}
if (this.state.selectedKeys.length === 0) {
if (window.isMobile && !this.props.ignoreMobileActions) {
window.app.BottomBarController.clear()
}
} else {
if (window.isMobile && !this.props.ignoreMobileActions) {
window.app.BottomBarController.render(this.renderActions())
}
}
const isAllSelected = this.isAllSelected()
let items = this.renderItems(this.props.items)
return <div className={classnames("selectableList", { ["selectionEnabled"]: this.props.selectionEnabled })}>
<List
{...listProps}
dataSource={this.props.items}
renderItem={this.renderItem}
/>
<div className="selectableList_bottomActions_wrapper">
{this.props.ignoreMobileActions && this.renderActions()}
return <div className={classnames("selectableList", { ["selectionEnabled"]: this.props.overrideSelectionEnabled ?? this.state.selectionEnabled })}>
<div className="selectableList_content">
{items}
</div>
{this.props.items.length > 0 && (this.props.overrideSelectionEnabled || this.state.selectionEnabled) && !this.props.actionsDisabled &&
<ActionsBar mode="float">
<div key="discard">
<Button
shape="round"
onClick={this.onDiscard}
{...this.props.onDiscardProps}
>
{this.props.onDiscardRender ?? <Icons.X />}
<Translation>
{(t) => t("Discard")}
</Translation>
</Button>
</div>
{this.props.bulkSelectionAction &&
<div key="allSelection">
<Button
shape="round"
onClick={() => isAllSelected ? this.unselectAll() : this.selectAll()}
>
<Translation>
{(t) => t(isAllSelected ? "Unselect all" : "Select all")}
</Translation>
</Button>
</div>}
{Array.isArray(this.props.actions) && this.renderProvidedActions()}
</ActionsBar>
}
</div>
}
}

156
packages/app/src/components/SelectableList/index.less
View File

@ -2,24 +2,70 @@
@selectableList_item_borderColor_normal: rgba(51, 51, 51, 0.3);
.selectableList {
&.selectionEnabled {
.selectableList_content {
.selectableList_item {
cursor: pointer;
--ignore-dragger: true;
display: inline-flex;
overflow-x: overlay;
border: rgba(51, 51, 51, 0.3) 1px solid;
border-radius: 8px;
margin-bottom: 12px;
align-items: center;
h1 {
user-select: none;
user-select: none;
--webkit-user-select: none;
width: 100%;
height: fit-content;
border: @selectableList_item_borderColor_normal 1px solid;
border-radius: 4px;
margin-bottom: 6px;
padding: 7px;
transition: all 150ms ease-in-out;
&.selected {
background-color: #f5f5f5;
transform: scale(0.98);
margin-bottom: 3px;
}
h3 {
user-select: none;
&.disabled {
opacity: 0.5;
pointer-events: none;
}
::-webkit-scrollbar {
position: absolute;
display: none;
width: 0;
height: 0;
z-index: 0;
}
}
.selectableList_item:hover {
box-shadow: 2px 2px 8px 0px rgba(51, 51, 51, 0.5);
border: @selectableList_item_borderColor_active 1px solid;
.selectableList_item:active {
background-color: #f5f5f5;
transform: scale(0.98);
margin-bottom: 3px;
}
}
&.selectionEnabled {
.selectableList_content {
.selectableList_item {
cursor: pointer;
border: rgba(51, 51, 51, 0.3) 1px solid;
border-radius: 8px;
margin-bottom: 12px;
h1, h3 {
user-select: none;
--webkit-user-select: none;
}
}
}
}
}
@ -31,90 +77,6 @@
.selectableList_subItems {
margin-left: 10px;
}
margin-bottom: 10px;
}
.selectableList_item {
display: inline-flex;
overflow-x: overlay;
align-items: center;
user-select: none;
width: 100%;
height: fit-content;
border: @selectableList_item_borderColor_normal 1px solid;
border-radius: 4px;
margin-bottom: 6px;
padding: 7px;
transition: all 150ms ease-in-out;
&.selected {
background-color: #f5f5f5;
transform: translate(10px, 0);
}
&.disabled {
opacity: 0.5;
pointer-events: none;
}
::-webkit-scrollbar {
position: absolute;
display: none;
width: 0;
height: 0;
z-index: 0;
}
}
.selectableList_bottomActions_wrapper {
position: sticky;
z-index: 300;
left: 0;
bottom: 0;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.selectableList_bottomActions {
width: fit-content;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px;
border: 1px solid #e0e0e0;
border-radius: 8px;
background-color: #0c0c0c15;
backdrop-filter: blur(10px);
transition: all 200ms ease-in-out;
> div {
margin: 0 5px;
}
&.mobile {
background-color: transparent;
backdrop-filter: none;
width: 100%;
padding: 0;
border: none;
}
}

8
packages/app/src/components/ServerStatus/index.jsx
View File

@ -3,7 +3,7 @@ import * as antd from "antd"
import { Icons } from "components/Icons"
export default () => {
const [connected, setConnected] = React.useState(window.app.ws.connected ?? false)
const [connected, setConnected] = React.useState(window.app.ws.mainSocketConnected ?? false)
window.app.eventBus.on("websocket_connected", (status) => {
setConnected(true)
@ -22,12 +22,6 @@ export default () => {
}
return <div>
<div key="http">
<Icons.Database /> {window.app?.api?.origin ?? "unavailable"}
</div>
<div key="websocket">
<Icons.Cpu /> {window.app?.ws?.io?.uri ?? "unavailable"}
</div>
<div key="health">
<Icons.Activity /> <antd.Tag color={getColor()}>
{connected ? "Connected" : "Disconnected"}

74
packages/app/src/components/Sessions/index.jsx
View File

@ -1,74 +0,0 @@
import React from "react"
import * as antd from "antd"
import { Icons } from "components/icons"
import "./index.less"
export default class Sessions extends React.Component {
renderSessions = () => {
const data = this.props.sessions
return data.map((session) => {
const header = (
<div className="session_header">
<div>
<Icons.Key />
</div>
<div>{session._id}</div>
<div>{this.props.current === session.uuid ? <antd.Tag>Current</antd.Tag> : ""}</div>
</div>
)
const renderDate = () => {
const dateNumber = Number(session.date)
if (dateNumber) {
return new Date(dateNumber).toString()
}
return session.date
}
return (
<antd.Collapse.Panel header={header} key={session._id} className="session_entry">
<div className="session_entry_info">
{session.allowRegenerate && (
<div style={{ color: "orange" }}>
<Icons.AlertTriangle />
This token can be regenerated
</div>
)}
<div>
<Icons.Clock />
{renderDate()}
</div>
<div>
<Icons.Navigation />
{session.location}
</div>
<div>
<Icons.Map />
{session.geo}
</div>
</div>
</antd.Collapse.Panel>
)
})
}
render() {
if (Array.isArray(this.props.sessions)) {
return (
<div className="sessions_wrapper">
<h1>
All Sessions
</h1>
<antd.Collapse bordered={false} accordion>
{this.renderSessions()}
</antd.Collapse>
</div>
)
}
return <div></div>
}
}

35
packages/app/src/components/Sessions/index.less
View File

@ -1,35 +0,0 @@
.sessions_wrapper {
.ant-collapse-borderless{
background-color: transparent!important;
}
}
.session_entry {
display: flex;
flex-direction: column;
background: transparent;
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ccc!important;
border-radius: 12px!important;
.session_entry_info{
> div {
padding: 4px 40px;
}
}
.ant-collapse-header {
display: flex;
align-items: center;
}
}
.session_header{
display: flex;
flex-direction: row;
> div {
padding: 0 10px;
}
}

81
packages/app/src/components/Settings/index.jsx
View File

@ -1,10 +1,11 @@
import React from "react"
import { Icons } from "components/icons"
import { SliderPicker } from "react-color"
import * as antd from "antd"
import config from "config"
import { SliderPicker } from "react-color"
import { Translation } from "react-i18next"
import settingList from "schemas/settingsList.json"
import config from "config"
import { Icons } from "components/Icons"
import settingList from "schemas/settings"
import groupsDecorator from "schemas/settingsGroupsDecorator.json"
import { AboutApp } from ".."
@ -24,37 +25,36 @@ const ItemTypes = {
export default class SettingsMenu extends React.Component {
state = {
settings: window.app.configuration.settings.get() ?? {},
settings: window.app.settings.get() ?? {},
}
handleEvent = (event, item, to) => {
const id = item.id
if (typeof id === "undefined") {
console.error("SettingsMenu: Cannot update, item has no id")
handleUpdate = (item, update) => {
if (typeof item.id === "undefined") {
console.error("[Settings] Cannot handle update, item has no id")
return false
}
const currentValue = window.app.configuration.settings.get(id) ?? null
const currentValue = window.app.settings.get(item.id)
// by default we set the opposite value to the current value
if (typeof to === "undefined") {
to = !currentValue
}
if (typeof item.updateValueKey === "string") {
to = { [item.updateValueKey]: to }
if (typeof update === "undefined") {
update = !currentValue
}
if (typeof item.emitEvent === "string") {
window.app.eventBus.emit(item.emitEvent, { event, to })
let emissionPayload = update
if (typeof item.emissionValueUpdate === "function") {
emissionPayload = item.emissionValueUpdate(emissionPayload)
}
window.app.eventBus.emit(item.emitEvent, emissionPayload)
}
if (!item.noStorage) {
window.app.configuration.settings.change(id, to)
window.app.settings.set(item.id, update)
}
this.setState({ settings: { ...this.state.settings, [id]: to } })
this.setState({ settings: { ...this.state.settings, [item.id]: update } })
}
renderItem = (item) => {
@ -77,18 +77,24 @@ export default class SettingsMenu extends React.Component {
item.props.onChange = (color) => {
item.props.color = color.hex
}
item.props.onChangeComplete = (color, event) => {
this.handleEvent(event, item, color.hex)
item.props.onChangeComplete = (color) => {
this.handleUpdate(item, color.hex)
}
break
}
case "switch": {
item.props.checked = this.state.settings[item.id]
item.props.onClick = (event) => this.handleEvent(event, item)
item.props.onClick = (event) => this.handleUpdate(item, event)
break
}
case "select": {
item.props.onChange = (event) => this.handleEvent(event, item)
item.props.onChange = (value) => this.handleUpdate(item, value)
item.props.defaultValue = this.state.settings[item.id]
break
}
case "slider":{
item.props.defaultValue = this.state.settings[item.id]
item.props.onAfterChange = (value) => this.handleUpdate(item, value)
break
}
default: {
@ -96,20 +102,29 @@ export default class SettingsMenu extends React.Component {
item.props.children = item.title ?? item.id
}
item.props.value = this.state.settings[item.id]
item.props.onClick = (event) => this.handleEvent(event, item)
item.props.onClick = (event) => this.handleUpdate(item, event)
break
}
}
// TODO: Support async children
// if (typeof item.children === "function") {
// }
return (
<div key={item.id} className="settingItem">
<div className="header">
<div>
<h4>
{Icons[item.icon] ? React.createElement(Icons[item.icon]) : null}
{item.title ?? item.id}
<Translation>{
t => t(item.title ?? item.id)
}</Translation>
</h4>
<p>{item.description}</p>
<p> <Translation>{
t => t(item.description)
}</Translation></p>
</div>
<div>
{item.experimental && <antd.Tag> Experimental </antd.Tag>}
@ -130,7 +145,9 @@ export default class SettingsMenu extends React.Component {
<div key={key} className="group">
<h1>
{fromDecoratorIcon ? React.createElement(Icons[fromDecoratorIcon]) : null}
{fromDecoratorTitle ?? key}
<Translation>{
t => t(fromDecoratorTitle ?? key)
}</Translation>
</h1>
<div className="content">
{group.map((item) => this.renderItem(item))}
@ -166,7 +183,7 @@ export default class SettingsMenu extends React.Component {
<div>{config.app?.siteName}</div>
<div>
<antd.Tag>
<Icons.Tag />v{window.__evite?.projectVersion}
<Icons.Tag />v{window.app.version}
</antd.Tag>
</div>
<div>
@ -178,7 +195,9 @@ export default class SettingsMenu extends React.Component {
</div>
<div>
<antd.Button type="link" onClick={() => AboutApp.openModal()}>
About
<Translation>
{t => t("about")}
</Translation>
</antd.Button>
</div>
</div>

1
packages/app/src/components/Settings/index.less
View File

@ -44,6 +44,7 @@
}
.component {
--ignore-dragger: true;
padding: 0 20px;
}
}

15
packages/app/src/components/Skeleton/index.jsx Normal file
View File

@ -0,0 +1,15 @@
import React from "react"
import { Skeleton } from "antd"
import { LoadingOutlined } from "@ant-design/icons"
import "./index.less"
export default () => {
return <div className="skeleton">
<div className="indicator">
<LoadingOutlined spin />
<h3>Loading...</h3>
</div>
<Skeleton active />
</div>
}

22
packages/app/src/components/Skeleton/index.less Normal file
View File

@ -0,0 +1,22 @@
.skeleton {
svg {
margin: 0 !important;
}
h3 {
margin: 0;
margin-left: 10px;
color: var(--background-color-contrast);
}
.indicator {
color: var(--background-color-contrast);
display: flex;
flex-direction: row;
align-items: center;
}
background-color: var(--background-color-accent);
border-radius: 8px;
padding: 10px;
}

244
packages/app/src/components/StepsForm/index.jsx Normal file
View File

@ -0,0 +1,244 @@
import React from "react"
import * as antd from "antd"
import loadable from "@loadable/component"
import { Translation } from "react-i18next"
import { Icons, createIconRender } from "components/Icons"
import { ActionsBar } from "components"
import "./index.less"
export default class StepsForm extends React.Component {
state = {
steps: [...(this.props.steps ?? []), ...(this.props.children ?? [])],
step: 0,
values: {},
canNext: true,
renderStep: null,
}
api = window.app.request
componentDidMount = async () => {
if (this.props.defaultValues) {
await this.setState({ values: this.props.defaultValues })
}
await this.handleNext(0)
}
next = (to) => {
if (!this.state.canNext) {
return antd.message.error("Please complete the step.")
}
return this.handleNext(to)
}
prev = () => this.handlePrev()
handleNext = (to) => {
const index = to ?? (this.state.step + 1)
this.setState({ step: index, renderStep: this.renderStep(index) })
}
handlePrev = () => {
this.handleNext(this.state.step - 1)
}
handleError = (error) => {
this.setState({ submitting: false, submittingError: error })
}
handleUpdate = (key, value) => {
this.setState({ values: { ...this.state.values, [key]: value } }, () => {
if (typeof this.props.onChange === "function") {
this.props.onChange(this.state.values)
}
})
}
handleValidation = (result) => {
this.setState({ canNext: result })
}
canSubmit = () => {
if (typeof this.props.canSubmit === "function") {
return this.props.canSubmit(this.state.values)
}
return true
}
onSubmit = async () => {
if (!this.state.canNext) {
console.warn("Cannot submit form, validation failed")
return false
}
if (typeof this.props.onSubmit === "function") {
this.setState({ submitting: true, submittingError: null })
await this.props.onSubmit(this.state.values).catch((error) => {
console.error(error)
this.handleError(error)
})
}
}
renderStep = (stepIndex) => {
const step = this.state.steps[stepIndex]
let content = step.content
let value = this.state.values[step.key]
if (typeof step.key === "undefined") {
console.error("[StepsForm] step.key is required")
return null
}
if (typeof step.required !== "undefined" && step.required) {
this.handleValidation(Boolean(value && value.length > 0))
} else {
this.setState({ canNext: true })
}
if (typeof step.stateValidation === "function") {
const validationResult = step.stateValidation(value)
this.handleValidation(validationResult)
}
const componentProps = {
handleUpdate: (to) => {
value = to
if (typeof step.onUpdateValue === "function") {
value = step.onUpdateValue(value, to)
}
let validationResult = true
if (typeof step.stateValidation === "function") {
validationResult = step.stateValidation(to)
}
if (typeof step.required !== "undefined" && step.required) {
validationResult = Boolean(to && to.length > 0)
}
this.handleUpdate(step.key, to)
this.handleValidation(validationResult)
},
handleError: (error) => {
if (typeof props.handleError === "function") {
this.handleError(error)
}
},
onPressEnter: () => this.next(),
value: value,
}
if (typeof step.content === "function") {
content = loadable(async () => {
try {
const component = React.createElement(step.content, componentProps)
return () => component
} catch (error) {
console.log(error)
antd.notification.error({
message: "Error",
description: "Error loading step content",
})
return () => <div>
<Icons.XCircle /> Error
</div>
}
}, {
fallback: <div>Loading...</div>,
})
}
return React.createElement(React.memo(content), componentProps)
}
render() {
if (this.state.steps.length === 0) {
return null
}
const steps = this.state.steps
const current = steps[this.state.step]
return (
<div className="steps_form">
<div className="steps_form steps">
<antd.Steps responsive={false} direction="horizontal" className="steps_form steps header" size="small" current={this.state.step}>
{steps.map(item => (
<antd.Steps.Step key={item.title} />
))}
</antd.Steps>
<div className="steps_form steps step">
<div className="title">
<h1>{current.icon && createIconRender(current.icon)}
<Translation>
{t => t(current.title)}
</Translation>
</h1>
<antd.Tag color={current.required ? "volcano" : "default"}>
<Translation>
{t => t(current.required ? "Required" : "Optional")}
</Translation>
</antd.Tag>
</div>
{current.description && <div className="description">
<Translation>
{t => t(current.description)}
</Translation>
</div>}
{this.state.renderStep}
</div>
</div>
{this.state.submittingError && (
<div style={{ color: "#f5222d" }}>
<Translation>
{t => t(String(this.state.submittingError))}
</Translation>
</div>
)}
<ActionsBar mode="float">
{this.state.step > 0 && (
<antd.Button style={{ margin: "0 8px" }} onClick={() => this.prev()}>
<Icons.ChevronLeft />
<Translation>
{t => t("Previous")}
</Translation>
</antd.Button>
)}
{this.state.step < steps.length - 1 && (
<antd.Button disabled={!this.state.canNext} type="primary" onClick={() => this.next()}>
<Icons.ChevronRight />
<Translation>
{t => t("Next")}
</Translation>
</antd.Button>
)}
{this.state.step === steps.length - 1 && (
<antd.Button disabled={!this.state.canNext || this.state.submitting || !this.canSubmit()} type="primary" onClick={this.onSubmit}>
{this.state.submitting && <Icons.LoadingOutlined spin />}
<Translation>
{t => t("Done")}
</Translation>
</antd.Button>
)}
</ActionsBar>
</div>
)
}
}

91
packages/app/src/components/StepsForm/index.less Normal file
View File

@ -0,0 +1,91 @@
.steps_form {
.ant-steps-icon {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
svg {
margin: 0;
}
}
.steps {
display: flex;
flex-direction: column;
width: 100%;
.header {
//position: fixed;
width: 100%;
height: fit-content;
flex-direction: row;
}
.ant-select {
width: 100%;
}
.step {
padding: 0 10px;
display: inline-flex;
flex-direction: column;
width: 100%;
height: 100%;
align-items: flex-start;
h1 {
margin: 0;
}
.title {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
}
.description {
color: var(--background-color-contrast);
}
.content {
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
.ant-list {
width: 100%;
}
}
.actions {
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: center;
> div {
margin-right: 10px;
}
}
> div {
margin-bottom: 0;
}
}
> div {
margin-bottom: 20px;
}
}
}

176
packages/app/src/components/SwipeItem/index.jsx Normal file
View File

@ -0,0 +1,176 @@
import React from "react"
import PropTypes from "prop-types"
import { cursorPosition } from "utils"
import { Container, Delete, Content } from "./styles"
class SwipeToDelete extends React.Component {
state = {
touching: null,
translate: 0,
deleting: false,
}
componentDidMount() {
// to get ref dimensions
this.forceUpdate()
}
onMouseDown = (e) => {
if (this.props.disabled) return
if (this.state.touching) return
this.startTouchPosition = cursorPosition(e)
this.initTranslate = this.state.translate
this.setState({ touching: true }, () => {
this.addEventListenerToMoveAndUp()
})
}
addEventListenerToMoveAndUp = (remove = false) => {
if (remove) {
window.removeEventListener("mousemove", this.onMouseMove)
window.removeEventListener("touchmove", this.onMouseMove)
window.removeEventListener("mouseup", this.onMouseUp)
window.removeEventListener("touchend", this.onMouseUp)
} else {
window.addEventListener("mousemove", this.onMouseMove)
window.addEventListener("touchmove", this.onMouseMove)
window.addEventListener("mouseup", this.onMouseUp)
window.addEventListener("touchend", this.onMouseUp)
}
}
onMouseMove = (e) => {
const { rtl } = this.props
if (!this.state.touching) {
return cursorPosition(e)
}
if (
(!rtl && cursorPosition(e) > this.startTouchPosition - this.initTranslate)
|| (rtl && cursorPosition(e) < this.startTouchPosition - this.initTranslate)
) {
this.setState({ translate: 0 })
return
}
this.setState({ translate: cursorPosition(e) - this.startTouchPosition + this.initTranslate })
}
onMouseUp = () => {
this.startTouchPosition = null
const { deleteWidth, rtl } = this.props
const newState = {
touching: false
}
const acceptableMove = -deleteWidth * 0.7
const showDelete = (rtl ? -1 : 1) * this.state.translate < acceptableMove
const notShowDelete = (rtl ? -1 : 1) * this.state.translate >= acceptableMove
const deleteWithoutConfirm = (rtl ? 1 : -1) * this.state.translate >= this.deleteWithoutConfirmThreshold
if (deleteWithoutConfirm) {
newState.translate = -this.containerWidth
}
if (notShowDelete) {
newState.translate = 0
}
if (showDelete && !deleteWithoutConfirm) {
newState.translate = (rtl ? 1 : -1) * deleteWidth
}
this.setState(newState, () => {
if (deleteWithoutConfirm) {
this.onDeleteClick()
}
})
this.addEventListenerToMoveAndUp(true)
}
onDeleteClick = () => {
const { transitionDuration, onDelete } = this.props
this.setState({ deleting: true }, () => {
window.setTimeout(() => {
onDelete()
}, transitionDuration)
})
}
componentWillUnmount() {
this.addEventListenerToMoveAndUp(true)
}
render() {
const { translate, touching, deleting } = this.state
const { deleteWidth, transitionDuration, deleteText, deleteComponent, deleteColor, height, rtl } = this.props
const cssParams = { deleteWidth, transitionDuration, deleteColor, heightProp: height, rtl }
const shiftDelete = -translate >= this.deleteWithoutConfirmThreshold
return (
<Container
ignore-dragger
id="delete-container"
deleting={deleting}
{...cssParams}
ref={c => {
if (c) {
this.container = c
this.containerWidth = c.getBoundingClientRect().width
this.deleteWithoutConfirmThreshold = this.containerWidth * 0.75
}
}}
>
<Delete
ignore-dragger
id="delete"
buttonMargin={shiftDelete ? this.containerWidth + translate : this.containerWidth - deleteWidth}
{...cssParams}
>
<button id="delete-button" onClick={this.onDeleteClick}>{deleteComponent ? deleteComponent : deleteText}</button>
</Delete>
<Content
{...cssParams}
ignore-dragger
id="delete-content"
deleting={deleting}
onMouseDown={this.onMouseDown}
onTouchStart={this.onMouseDown}
translate={translate}
transition={!touching}
>
{this.props.children}
</Content>
</Container>
)
}
}
SwipeToDelete.propTypes = {
onDelete: PropTypes.func.isRequired,
height: PropTypes.number.isRequired,
transitionDuration: PropTypes.number,
deleteWidth: PropTypes.number,
deleteColor: PropTypes.string,
deleteText: PropTypes.string,
deleteComponent: PropTypes.node,
disabled: PropTypes.bool,
rtl: PropTypes.bool,
}
SwipeToDelete.defaultProps = {
transitionDuration: 250,
deleteWidth: 75,
deleteColor: "rgba(252, 58, 48, 1.00)",
deleteText: "Delete",
disabled: false,
rtl: false,
}
export default SwipeToDelete

55
packages/app/src/components/SwipeItem/styles.js Normal file
View File

@ -0,0 +1,55 @@
import styled, { css } from "styled-components"
export const deletingCss = css`
transition: all ${({ transitionDuration }) => transitionDuration}ms ease-out;
max-height: 0;
* {
outline: none;
}
`
export const Container = styled.div`
height: ${({ heightProp }) => heightProp}px;
max-height: ${({ heightProp }) => heightProp + 10}px;
width: auto;
position: relative;
box-sizing: border-box;
${props => props.deleting && deletingCss}
*, *:before, *:after {
box-sizing: border-box;
}
overflow: hidden;
`
export const Content = styled.div`
height: 100%;
width: auto;
position: relative;
transform: ${props => props.deleting && 'scale(0)'} translateX(${({ translate, rtl }) => (rtl ? 1 : 1) * translate}px);
${props => props.transition && `transition: transform ${props.transitionDuration}ms ease-out`}
`
export const Delete = styled.div`
position: absolute;
right: 0;
height: 100%;
width: 100%;
top: 0;
background: ${({ deleteColor }) => deleteColor};
font-weight: 400;
display: inline-flex;
justify-content: flex-start;
align-items: center;
button {
width: ${({ deleteWidth }) => deleteWidth}px;
transition: margin ${({ transitionDuration }) => transitionDuration}ms ease-in-out;
${({ buttonMargin, rtl }) => `margin-${rtl ? 'right' : 'left'}: ${buttonMargin}px`};
text-align: center;
height: 100%;
background: transparent;
border: none;
color: white;
font-size: 1rem;
cursor: pointer;
}
`

86
packages/app/src/components/UserRegister/index.jsx Normal file
View File

@ -0,0 +1,86 @@
import React from "react"
import * as antd from "antd"
import { StepsForm } from "components"
import "./index.less"
const steps = [
{
key: "username",
title: "Step 1",
icon: "User",
description: "Enter the username for the account",
required: true,
content: (props) => {
return <div className="workorder_creator steps step content">
<antd.Input
autocorrect="off"
autocapitalize="none"
onPressEnter={props.onPressEnter}
placeholder="@newuser"
onChange={(e) => {
props.handleUpdate(e.target.value)
}}
/>
</div>
},
},
{
key: "password",
title: "Step 2",
icon: "Key",
description: "Enter a password for the account",
required: true,
content: (props) => {
return <div className="workorder_creator steps step content">
<antd.Input.Password
autocorrect="off"
autocapitalize="none"
onPressEnter={props.onPressEnter}
placeholder="Password"
onChange={(e) => {
props.handleUpdate(e.target.value)
}}
/>
</div>
},
},
{
key: "email",
title: "Step 3",
icon: "Mail",
description: "Enter a email for the account",
required: true,
content: (props) => {
return <div className="workorder_creator steps step content">
<antd.Input
onPressEnter={props.onPressEnter}
placeholder="Email"
onChange={(e) => {
props.handleUpdate(e.target.value)
}}
/>
</div>
},
},
]
export default (props) => {
const api = window.app.request
const onSubmit = async (values) => {
const result = await api.post.register(values).catch((err) => {
console.log(err)
return false
})
if (result) {
props.close()
}
}
return <StepsForm
steps={steps}
onSubmit={onSubmit}
/>
}

0
packages/app/src/components/UserRegister/index.less Normal file
View File

30
packages/app/src/components/UserSelector/index.jsx
View File

@ -1,7 +1,7 @@
import React from "react"
import * as antd from "antd"
import { Icons } from "components/Icons"
import { SelectableList } from "components"
import { Translation } from "react-i18next"
import { SelectableList, Skeleton } from "components"
import { debounce } from "lodash"
import fuse from "fuse.js"
@ -43,13 +43,9 @@ export default class UserSelector extends React.Component {
}
renderItem = (item) => {
return <div disabled={this.isExcludedId(item._id)} className="users_selector item">
<div>
<antd.Avatar shape="square" src={item.avatar} />
</div>
<div>
<h1>{item.fullName ?? item.username}</h1>
</div>
return <div disabled={this.isExcludedId(item._id)} className="user" >
<div><antd.Avatar shape="square" src={item.avatar} /></div>
<div><h1>{item.fullName ?? item.username}</h1></div>
</div>
}
@ -90,7 +86,7 @@ export default class UserSelector extends React.Component {
render() {
if (this.state.loading) {
return <antd.Skeleton active />
return <Skeleton />
}
return <div className="users_selector">
@ -105,15 +101,21 @@ export default class UserSelector extends React.Component {
</div>
</div>
<SelectableList
ignoreMobileActions
onlyClickSelection
overrideSelectionEnabled
bulkSelectionAction
items={this.state.searchValue ?? this.state.data}
renderItem={this.renderItem}
actions={[
<div call="onDone" key="done">
Done
<div type="primary" call="onDone" key="done">
<Translation>
{t => t("Done")}
</Translation>
</div>
]}
onDone={(keys) => this.props.handleDone(keys)}
events={{
onDone: (ctx, keys) => this.props.handleDone(keys),
}}
/>
</div>
}

2
packages/app/src/components/UserSelector/index.less
View File

@ -3,7 +3,7 @@
margin-bottom: 10px;
}
.item {
.user {
display: flex;
flex-direction: row;
align-items: center;

2
packages/app/src/components/formGenerator/index.jsx
View File

@ -296,7 +296,7 @@ export default class FormGenerator extends React.Component {
if (typeof element.options !== "undefined" && !element.renderItem) {
if (!Array.isArray(element.options)) {
console.warn(
`Invalid options data type, expecting Array > recived ${typeof element.options}`,
`Invalid options data type, expecting Array > received ${typeof element.options}`,
)
return null
}

17
packages/app/src/components/index.js
View File

@ -3,8 +3,6 @@ export { default as Settings } from "./Settings"
export { default as NotFound } from "./NotFound"
export { default as AppSearcher } from "./AppSearcher"
export { default as RenderError } from "./RenderError"
export { default as Sessions } from "./Sessions"
export { default as ActionsBar } from "./ActionsBar"
export { default as SelectableList } from "./SelectableList"
export { default as ObjectInspector } from "./ObjectInspector"
@ -12,7 +10,20 @@ export { default as ServerStatus } from "./ServerStatus"
export { default as ModifierTag } from "./ModifierTag"
export { default as UserSelector } from "./UserSelector"
export { default as Clock } from "./Clock"
export { default as ScheduledProgress } from "./ScheduledProgress"
export { default as StepsForm } from "./StepsForm"
export { default as DraggableDrawer } from "./DraggableDrawer"
export { default as AddableSelectList } from "./AddableSelectList"
export { default as SwipeItem } from "./SwipeItem"
export { default as Crash } from "./Crash"
export { default as SearchButton } from "./SearchButton"
export { default as UserRegister } from "./UserRegister"
export { default as Skeleton } from "./Skeleton"
export { default as Navigation } from "./Navigation"
export { default as ImageUploader } from "./ImageUploader"
export { default as ImageViewer } from "./ImageViewer"
export { default as PostCard } from "./PostCard"
export * as AdminTools from "./AdminTools"
export * as AboutApp from "./AboutApp"
export * as Window from "./RenderWindow"

179
packages/app/src/extensions/api/index.js
View File

@ -1,39 +1,141 @@
import config from 'config'
import { Bridge } from "linebridge/client"
import config from "config"
import { Bridge } from "linebridge/dist/client"
import { Session } from "models"
import io from "socket.io-client"
class WSInterface {
constructor(params = {}) {
this.params = params
this.manager = new io.Manager(this.params.origin, {
autoConnect: true,
transports: ["websocket"],
...this.params.managerOptions,
})
this.sockets = {}
this.register("/", "main")
}
register = (socket, as) => {
if (typeof socket !== "string") {
console.error("socket must be string")
return false
}
socket = this.manager.socket(socket)
return this.sockets[as ?? socket] = socket
}
}
export default {
key: "apiBridge",
expose: [
{
mutateContext: {
async initializeDefaultBridge() {
this.apiBridge = await this.createBridge()
this.ws = io(config.ws.address, { transports: ["websocket"] })
initialization: [
async (app, main) => {
app.apiBridge = await app.createApiBridge()
this.ws.on("connect", (...context) => {
window.app.eventBus.emit("websocket_connected", ...context)
app.WSInterface = app.apiBridge.wsInterface
app.WSInterface.request = app.WSRequest
app.WSInterface.listen = app.handleWSListener
app.WSSockets = app.WSInterface.sockets
app.WSInterface.mainSocketConnected = false
app.WSSockets.main.on("authenticated", () => {
console.debug("[WS] Authenticated")
})
app.WSSockets.main.on("authenticateFailed", (error) => {
console.error("[WS] Authenticate Failed", error)
})
this.ws.on("disconnect", (...context) => {
app.WSSockets.main.on("connect", () => {
window.app.eventBus.emit("websocket_connected")
app.WSInterface.mainSocketConnected = true
})
app.WSSockets.main.on("disconnect", (...context) => {
window.app.eventBus.emit("websocket_disconnected", ...context)
app.WSInterface.mainSocketConnected = false
})
this.ws.on("connect_error", (...context) => {
app.WSSockets.main.on("connect_error", (...context) => {
window.app.eventBus.emit("websocket_connection_error", ...context)
app.WSInterface.mainSocketConnected = false
})
window.app.ws = this.ws
window.app.api = this.apiBridge
window.app.request = this.apiBridge.endpoints
},
createBridge: async () => {
const getSessionContext = () => {
const obj = {}
const token = Session.token
window.app.api = app.apiBridge
window.app.ws = app.WSInterface
if (typeof token !== "undefined") {
window.app.request = app.apiBridge.endpoints
window.app.wsRequest = app.apiBridge.wsEndpoints
},
],
mutateContext: {
async attachWSConnection() {
if (!this.WSInterface.sockets.main.connected) {
await this.WSInterface.sockets.main.connect()
}
let startTime = null
let latency = null
let latencyWarning = false
let pingInterval = setInterval(() => {
if (!this.WSInterface.mainSocketConnected) {
return clearTimeout(pingInterval)
}
startTime = Date.now()
this.WSInterface.sockets.main.emit("ping")
}, 2000)
this.WSInterface.sockets.main.on("pong", () => {
latency = Date.now() - startTime
if (latency > 800 && this.WSInterface.mainSocketConnected) {
latencyWarning = true
console.error("[WS] Latency is too high > 800ms", latency)
window.app.eventBus.emit("websocket_latency_too_high", latency)
} else if (latencyWarning && this.WSInterface.mainSocketConnected) {
latencyWarning = false
window.app.eventBus.emit("websocket_latency_normal", latency)
}
})
},
async attachAPIConnection() {
await this.apiBridge.initialize()
},
handleWSListener: (to, fn) => {
if (typeof to === "undefined") {
console.error("handleWSListener: to must be defined")
return false
}
if (typeof fn !== "function") {
console.error("handleWSListener: fn must be function")
return false
}
let ns = "main"
let event = null
if (typeof to === "string") {
event = to
} else if (typeof to === "object") {
ns = to.ns
event = to.event
}
return window.app.ws.sockets[ns].on(event, async (...context) => {
return await fn(...context)
})
},
createApiBridge: async () => {
const getSessionContext = async () => {
const obj = {}
const token = await Session.token
if (token) {
// append token to context
obj.headers = {
Authorization: `Bearer ${token ?? null}`,
}
@ -42,20 +144,43 @@ export default {
return obj
}
const handleResponse = async (data) => {
if (data.headers?.regenerated_token) {
Session.token = data.headers.regenerated_token
console.debug("[REGENERATION] New token generated")
}
if (data instanceof Error) {
if (data.response.status === 401) {
window.app.eventBus.emit("invalid_session")
}
}
}
const bridge = new Bridge({
origin: config.api.address,
onRequestContext: getSessionContext,
})
await bridge.initialize().catch((err) => {
throw {
message: "Failed to connect with API",
description: err.message,
}
wsOrigin: config.ws.address,
wsOptions: {
autoConnect: false,
},
onRequest: getSessionContext,
onResponse: handleResponse,
})
return bridge
},
WSRequest: (socket = "main", channel, ...args) => {
return new Promise(async (resolve, reject) => {
const request = await window.app.ws.sockets[socket].emit(channel, ...args)
request.on("responseError", (...errors) => {
return reject(...errors)
})
request.on("response", (...responses) => {
return resolve(...responses)
})
})
}
},
},
],

68
packages/app/src/extensions/haptics/index.js Normal file
View File

@ -0,0 +1,68 @@
import Evite from "evite"
import { Haptics, ImpactStyle } from "@capacitor/haptics"
// This is a temporal workaround to make the extension work with the new evite extension system.
export default class HapticExtensionV2 extends Evite.Extension {
static id = "hapticsEngine"
static compatible = ["mobile"]
static extendsWith = ["SettingsController"]
statement = {
test: "macarronie",
}
initialization = [
async (app, main) => {
console.log(this.statement.test)
}
]
debug = {
testVibrate: () => {
},
testSelectionStart: () => {
},
testSelectionChanged: () => {
},
testSelectionEnd: () => {
},
}
public = {
vibrate: async function () {
const enabled = this.extended.SettingsController.get("haptic_feedback")
if (enabled) {
await Haptics.vibrate()
}
},
selectionStart: async function () {
const enabled = this.extended.SettingsController.get("haptic_feedback")
if (enabled) {
await Haptics.selectionStart()
}
},
selectionChanged: async function () {
const enabled = this.extended.SettingsController.get("haptic_feedback")
if (enabled) {
await Haptics.selectionChanged()
}
},
selectionEnd: async function () {
const enabled = this.extended.SettingsController.get("haptic_feedback")
if (enabled) {
await Haptics.selectionEnd()
}
},
}
}

78
packages/app/src/extensions/i18n/index.js Normal file
View File

@ -0,0 +1,78 @@
import config from "config"
import i18n from "i18next"
import { initReactI18next } from "react-i18next"
export const SUPPORTED_LANGUAGES = config.i18n?.languages ?? {}
export const SUPPORTED_LOCALES = SUPPORTED_LANGUAGES.map((l) => l.locale)
export const DEFAULT_LOCALE = config.i18n?.defaultLocale
export function extractLocaleFromPath(path = "") {
const [_, maybeLocale] = path.split("/")
return SUPPORTED_LOCALES.includes(maybeLocale) ? maybeLocale : DEFAULT_LOCALE
}
const messageImports = import.meta.glob("./translations/*.json")
export const extension = {
key: "i18n",
expose: [
{
initialization: [
async (app, main) => {
let locale = app.settingsController.get("language") ?? DEFAULT_LOCALE
if (!SUPPORTED_LOCALES.includes(locale)) {
locale = DEFAULT_LOCALE
}
const messages = await app.importLocale(locale)
i18n
.use(initReactI18next) // passes i18n down to react-i18next
.init({
// debug: true,
resources: {
[locale]: { translation: messages.default || messages },
},
lng: locale,
//fallbackLng: DEFAULT_LOCALE,
interpolation: {
escapeValue: false, // react already safes from xss
},
})
main.eventBus.on("changeLanguage", (locale) => {
app.loadAsyncLanguage(locale)
})
},
],
mutateContext: {
importLocale: async (locale) => {
const [, importLocale] =
Object.entries(messageImports).find(([key]) =>
key.includes(`/${locale}.`)
) || []
return importLocale && importLocale()
},
loadAsyncLanguage: async function (locale) {
locale = locale ?? DEFAULT_LOCALE
try {
const result = await this.importLocale(locale)
if (result) {
i18n.addResourceBundle(locale, "translation", result.default || result)
i18n.changeLanguage(locale)
}
} catch (error) {
console.error(error)
}
}
},
},
],
}
export default extension

103
packages/app/src/extensions/i18n/translations/en.json Normal file
View File

@ -0,0 +1,103 @@
{
"main_welcome": "Welcome back,",
"assigned_for_you": "Assigned for you",
"no_assigned_workorders": "No assigned workorders",
"new": "New",
"close": "Close",
"done": "Done",
"edit": "Edit",
"save": "Save",
"cancel": "Cancel",
"delete": "Delete",
"import": "Import",
"export": "Export",
"refresh": "Refresh",
"reload": "Reload",
"search": "Search",
"status": "Status",
"type": "Type",
"about": "About",
"current": "Current",
"statistics": "Statistics",
"name": "Name",
"username": "Username",
"email": "Email",
"password": "Password",
"sessions": "Sessions",
"compact_view": "Compact view",
"sign_in": "Sign in",
"sign_out": "Sign out",
"sign_up": "Sign up",
"all_sessions": "All sessions",
"destroy_all_sessions": "Destroy all sessions",
"account_info": "Account info",
"password_confirmation": "Password confirmation",
"new_product": "New product",
"description": "Description",
"describe_something": "Describe something",
"operations": "Operations",
"select_operation": "Select operation",
"select_operations": "Select operations",
"tasks": "Tasks",
"select_task": "Select task",
"select_tasks": "Select tasks",
"add_task": "Add task",
"add_tasks": "Add tasks",
"location": "Location",
"select_location": "Select location",
"select_locations": "Select locations",
"add_location": "Add location",
"add_locations": "Add locations",
"materials": "Materials",
"select_material": "Select material",
"select_materials": "Select materials",
"add_material": "Add material",
"add_materials": "Add materials",
"quantity": "Quantity",
"select_quantity": "Select quantity",
"select_quantities": "Select quantities",
"add_quantity": "Add quantity",
"add_quantities": "Add quantities",
"units": "Units",
"select_unit": "Select unit",
"select_units": "Select units",
"add_unit": "Add unit",
"add_units": "Add units",
"suppliers": "Suppliers",
"select_supplier": "Select supplier",
"select_suppliers": "Select suppliers",
"add_supplier": "Add supplier",
"add_suppliers": "Add suppliers",
"customers": "Customers",
"select_customer": "Select customer",
"select_customers": "Select customers",
"add_customer": "Add customer",
"add_customers": "Add customers",
"employees": "Employees",
"select_employee": "Select employee",
"select_employees": "Select employees",
"add_employee": "Add employee",
"add_employees": "Add employees",
"equipment": "Equipment",
"select_equipment": "Select equipment",
"select": "Select",
"variants": "Variants",
"select_variant": "Select variant",
"select_variants": "Select variants",
"settins_group_general": "General",
"settings_general_language": "Language",
"settings_general_language_description": "Choose language for using in application.",
"settings_general_sidebarAutoCollapse": "Sidebar auto collapse",
"settings_general_sidebarAutoCollapse_description": "Collapse sidebar when loose focus.",
"settings_group_aspect": "Aspect",
"settings_aspect_reduceAnimations": "Reduce animations",
"settings_aspect_reduceAnimations_description": "Reduce animation of the application.",
"settings_aspect_darkMode": "Dark mode",
"settings_aspect_darkMode_description": "Enable dark mode for the application.",
"settings_aspect_primaryColor": "Primary color",
"settings_aspect_primaryColor_description": "Change primary color of the application.",
"settings_aspect_resetTheme": "Reset theme",
"settings_aspect_resetTheme_description": "Reset theme to default."
}

214
packages/app/src/extensions/i18n/translations/es.json Normal file
View File

@ -0,0 +1,214 @@
{
"Dashboard": "Inicio",
"main_welcome": "Bienvenido,",
"assigned_for_you": "Asignado para usted",
"no_assigned_workorders": "No hay trabajos asignados",
"Start": "Iniciar",
"End": "Finalizar",
"Stop": "Parar",
"Started": "Iniciado",
"started": "iniciado",
"Ended": "Finalizado",
"ended": "finalizado",
"Expired": "Expirado",
"expired": "expirado",
"Stopped": "Parado",
"stopped": "parado",
"Pending": "Pendiente",
"pending": "pendiente",
"Finished": "Finalizado",
"finished": "terminado",
"Cancelled": "Cancelado",
"cancelled": "cancelado",
"Assigned": "Asignado",
"assigned": "asignado",
"Ready": "Listo",
"ready": "listo",
"No description": "Sin descripción",
"All": "Todos",
"all": "todos",
"or": "o",
"Browse": "Buscar",
"Create new": "Crear nuevo",
"New": "Nuevo",
"Close": "Cerrar",
"Done": "Listo",
"Next": "Siguiente",
"Previous": "Anterior",
"Schedule": "Plazo",
"Edit": "Modificar",
"Save": "Guardar",
"Cancel": "Cancelar",
"Delete": "Eliminar",
"State": "Estado",
"Modify": "Modificar",
"modify": "modificar",
"Notifications": "Notificaciones",
"Notification": "Notificación",
"Haptic": "Vibración",
"Haptic Feedback": "Vibración de respuesta",
"Enable haptic feedback on touch events.": "Habilitar vibración de respuesta cuando exista un evento de toque.",
"Selection press delay": "Retraso de presión de selección",
"Set the delay before the selection trigger is activated.": "Establecer el retraso antes de que el disparador de selección sea activado.",
"Force Mobile Mode": "Forzar modo móvil",
"Force the application to run in mobile mode.": "Forzar la aplicación a ejecutarse en modo móvil.",
"Manage operators": "Administrar operadores",
"Manage users": "Administrar usuarios",
"Manage groups": "Administrar grupos",
"Manage workflows": "Administrar flujos de trabajo",
"Manage roles": "Administrar roles",
"Manage permissions": "Administrar permisos",
"Disable": "Deshabilitar",
"Disabled": "Deshabilitado",
"Discard": "Descartar",
"Unselect all": "Deseleccionar todo",
"Select all": "Seleccionar todo",
"Add commit": "Añadir registro",
"Commit": "Registrar",
"Commits": "Registros",
"Assistant mode": "Modo asistente",
"View finished": "Ver terminados",
"View pending": "Ver pendientes",
"View assigned": "Ver asignados",
"View ready": "Ver listos",
"View cancelled": "Ver cancelados",
"View all": "Ver todos",
"View": "Ver",
"Mark produced quantity": "Marcar cantidad producida",
"Mark remaining amount": "Marcar cantidad restante",
"Quantity": "Cantidad",
"Quantity produced": "Cantidad producida",
"Quantity left": "Cantidad restante",
"Production target": "Objectivo de producción",
"Section": "Sección",
"Sections": "Secciones",
"Workshift": "Turno",
"workshift": "turno",
"Workshifts": "Turnos",
"workshifts": "turnos",
"Operation": "Operación",
"Operations": "Operaciones",
"Stock Target": "Stock objetivo",
"Vault item": "Artículo de bóveda",
"Stock item": "Artículo de stock",
"Vault": "Bóveda",
"Phase": "Fase",
"Variants": "Variantes",
"Variant": "Variante",
"Description": "Descripción",
"Task": "Tarea",
"Tasks": "Tareas",
"Product": "Producto",
"Products": "Productos",
"Operator": "Operador",
"Operators": "Operadores",
"Workload": "Carga de trabajo",
"workload": "carga de trabajo",
"Workloads": "Cargas de trabajo",
"workloads": "cargas de trabajo",
"Workorder": "Orden de trabajo",
"workorder": "orden de trabajo",
"Workorders": "Ordenes de trabajo",
"workorders": "ordenes de trabajo",
"Workpart": "Parte de trabajo",
"workpart": "parte de trabajo",
"Workparts": "Partes de trabajo",
"workparts": "parte de trabajo",
"Payload": "Carga",
"payload": "carga",
"Payloads": "Cargas",
"payloads": "carga",
"Commit all": "Registrar todo",
"Mark quantity": "Marcar cantidad",
"Mark": "Marcar",
"Marked": "Marcado",
"Marked quantity": "Cantidad marcada",
"Marked amount": "Cantidad marcada",
"Marked amount left": "Cantidad restante marcada",
"Marked amount produced": "Cantidad producida marcada",
"Marked amount remaining": "Cantidad restante marcada",
"Marked amount target": "Cantidad objetivo marcada",
"Marked amount stock": "Cantidad stock marcada",
"Notifications Sound": "Sonido de notificación",
"Play a sound when a notification is received.": "Reproducir un sonido cuando se recibe una notificación.",
"Vibration": "Vibración",
"Vibrate the device when a notification is received.": "Vibrar el dispositivo cuando se recibe una notificación.",
"Sound Volume": "Volumen de sonido",
"Set the volume of the sound when a notification is received.": "Establecer el volumen del sonido cuando se recibe una notificación.",
"Workorder Notifications": "Notificaciones de orden de trabajo",
"Display in-app notifications for workorders updates.": "Mostrar notificaciones para las actualizaciones de las ordenes de trabajo.",
"Accounts": "Cuentas",
"Import": "Importar",
"Export": "Exportar",
"Refresh": "Actualizar",
"Reload": "Recargar",
"Required": "Requerido",
"Optional": "Opcional",
"Search": "Buscar",
"Status": "Estado",
"Type": "Tipo",
"About": "Acerca de",
"Current": "Actual",
"Statistics": "Estadísticas",
"Name": "Nombre",
"Users": "Usuarios",
"Username": "Nombre de usuario",
"Settings": "Configuración",
"Email": "Correo electrónico",
"Password": "Contraseña",
"Sessions": "Sesiones",
"Compact view": "Vista compacta",
"Add to catalog": "Añadir al catálogo",
"Fabric": "Fabric",
"Press and hold for 2 seconds to toogle running": "Pulse y mantenga pulsado durante 2 segundos para alternar el funcionamiento",
"Production quantity already has been reached": "La cantidad de producción ya ha sido alcanzada",
"Production quantity is not enough": "La cantidad de producción no es suficiente",
"Are you sure you want to commit for this workpart?": "¿Está seguro de que desea consolidar esta parte de trabajo?",
"Are you sure you want to commit all quantity left?": "¿Está seguro de que desea consolidar toda la cantidad restante?",
"This will commit all quantity left and finish the production for this workload.": "Esto consolidará toda la cantidad restante y terminará la producción para esta carga de trabajo.",
"Are you sure you want to commit for this workorder?": "¿Está seguro de que desea consolidar esta orden de trabajo?",
"Enter the name or a reference for the workorder.": "Introduzca el nombre o una referencia para la orden de trabajo.",
"Select the section where the workorder will be deployed.": "Seleccione la sección donde se desplegará la orden de trabajo.",
"Select the schedule for the workorder.": "Seleccione el plazo para la orden de trabajo.",
"Assign the operators for the workorder.": "Asigne los operadores para la orden de trabajo.",
"Define the payloads for the workorder.": "Defina las cargas para la orden de trabajo.",
"Define the workloads for the workorder.": "Defina las cargas de trabajo para la orden de trabajo.",
"Leaving process running on background, dont forget to stop it when you are done": "Dejando el proceso en ejecución en segundo plano, no olvide detenerlo cuando haya terminado",
"Task remains opened, dont forget to stop it when you are done": "La tarea permanece abierta, no olvide detenerla cuando haya terminado",
"Select a option": "Seleccione una opción",
"Set the quantity produced": "Marque la cantidad producida",
"Experimental": "Experimental",
"New workorder assigned": "Nueva orden de trabajo asignada",
"Check the new list of workorder": "Compruebe la nueva lista de ordenes de trabajo",
"Do you want to delete these items?": "¿Desea eliminar estos elementos?",
"This action cannot be undone, and will permanently delete the selected items.": "Esta acción no se puede deshacer, y eliminará permanentemente los elementos seleccionados.",
"Assigned operators": "Operadores asignados",
"Assigments": "Asignaciones",
"Working Tasks": "Tareas en ejecución",
"You are not working on any task": "No estás trabajando en ninguna tarea",
"Update": "Actualizar",
"Update status": "Actualizar estado",
"Archived": "Archivado",
"archived": "archivado",
"Archive": "Archivar",
"archive": "archivar",
"General": "General",
"Sidebar": "Barra lateral",
"Aspect": "Aspecto",
"Language": "Idioma",
"Choose a language for the application": "Elige un idioma para la aplicación.",
"Edit Sidebar": "Editar barra lateral",
"Auto Collapse": "Auto colapsar",
"Collapse the sidebar when loose focus": "Colapsar la barra lateral cuando pierda el foco.",
"Reduce animation": "Reducir animación",
"Primary color": "Color primario",
"Change primary color of the application.": "Cambia el color primario de la aplicación.",
"Dark mode": "Modo oscuro",
"Images": "Imágenes",
"Add others": "Añadir otros",
"Export tokens": "Exportar bonos de trabajo",
"Description of the task. It should be a general description of the product. Do not include information that may vary. e.g. 'The product is a white shirt with a elastic red collar, size M'": "Descripción de la tarea. Debe ser una descripción general del producto. No incluya información que pueda variar. Por ejemplo, 'El producto es una camisa blanca con un collar de color rojo, tamaño M'",
"Define variants for this item. Only the types of variations that may exist of a product should be included. e.g. Size, Color, Material, etc.": "Defina las variantes para este artículo. Sólo deben incluirse los tipos de variaciones que pueden existir de un producto. Por ejemplo, Tamaño, Color, Material, etc.",
"Append some images to describe this item.": "Agregue algunas imágenes para describir este artículo."
}

14
packages/app/src/extensions/index.js
View File

@ -1,5 +1,9 @@
export * as Render from './render'
export * as Splash from './splash'
export * as Sound from './sound'
export * as Theme from './theme'
export { default as API } from './api'
export * as Render from "./render"
export * as Splash from "./splash"
export * as Sound from "./sound"
export * as Theme from "./theme"
export * as i18n from "./i18n"
export * as Notifications from "./notifications"
export { default as SettingsController } from "./settings"
export { default as API } from "./api"

86
packages/app/src/extensions/notifications/index.jsx Normal file
View File

@ -0,0 +1,86 @@
import React from "react"
import { notification as Notf } from "antd"
import { Icons } from "components/Icons"
import { Translation } from "react-i18next"
import { Haptics, ImpactStyle } from "@capacitor/haptics"
class NotificationController {
getSoundVolume = () => {
return (window.app.settings.get("notifications_sound_volume") ?? 50) / 100
}
new = (notification, options = {}) => {
this.notify(notification, options)
this.playHaptic(options)
this.playAudio(options)
}
notify = (notification, options = {}) => {
if (typeof notification === "string") {
notification = {
title: "New notification",
description: notification
}
}
Notf.open({
message: <Translation>
{(t) => t(notification.title)}
</Translation>,
description: <Translation>
{(t) => t(notification.description)}
</Translation>,
duration: notification.duration ?? 4,
icon: React.isValidElement(notification.icon) ? notification.icon : (Icons[notification.icon] ?? <Icons.Bell />),
})
}
playHaptic = async (options = {}) => {
const vibrationEnabled = options.vibrationEnabled ?? window.app.settings.get("notifications_vibrate")
if (vibrationEnabled) {
await Haptics.vibrate()
}
}
playAudio = (options = {}) => {
const soundEnabled = options.soundEnabled ?? window.app.settings.get("notifications_sound")
const soundVolume = options.soundVolume ? options.soundVolume / 100 : this.getSoundVolume()
if (soundEnabled) {
window.app.SoundEngine.play("notification", {
volume: soundVolume,
})
}
}
}
const extension = {
key: "notification",
expose: [
{
initialization: [
async (app, main) => {
app.NotificationController = new NotificationController()
main.eventBus.on("changeNotificationsSoundVolume", (value) => {
app.NotificationController.playAudio({ soundVolume: value })
})
main.eventBus.on("changeNotificationsVibrate", (value) => {
app.NotificationController.playHaptic({
vibrationEnabled: value,
})
})
main.setToWindowContext("notifications", app.NotificationController)
},
],
},
],
}
export {
extension,
NotificationController,
}
export default extension

122
packages/app/src/extensions/render/index.jsx
View File

@ -1,9 +1,10 @@
import React from "react"
import loadable from "@loadable/component"
import { EvitePureComponent } from "evite"
import routes from "virtual:generated-pages"
import progressBar from "nprogress"
import NotFound from "./statics/404"
import NotFoundRender from "./statics/404"
import CrashRender from "./statics/crash"
export const ConnectWithApp = (component) => {
return window.app.bindContexts(component)
@ -35,67 +36,100 @@ export function GetRoutesComponentMap() {
}, {})
}
export class RouteRender extends React.Component {
// class PageStatement {
// constructor() {
// this.state = {}
// }
// getProxy() {
// }
// }
export class RouteRender extends EvitePureComponent {
state = {
renderInitialization: true,
renderComponent: null,
renderError: null,
//pageStatement: new PageStatement(),
routes: GetRoutesComponentMap() ?? {},
error: null,
crash: null,
}
lastLocation = null
handleBusEvents = {
"render_initialization": () => {
this.setState({ renderInitialization: true })
},
"render_initialization_done": () => {
this.setState({ renderInitialization: false })
},
"crash": (message, error) => {
this.setState({ crash: { message, error } })
},
"locationChange": (event) => {
this.loadRender()
},
}
componentDidMount() {
window.app.eventBus.on("locationChange", (event) => {
console.debug("[App] LocationChange, forcing update render...")
this._ismounted = true
this._loadBusEvents()
this.loadRender()
}
// render controller needs an better method for update render, this is a temporary solution
// FIXME: this event is called multiple times. we need to debug them methods
if (typeof this.forceUpdate === "function") {
this.forceUpdate()
}
})
componentWillUnmount() {
this._ismounted = false
this._unloadBusEvents()
}
loadRender = (path) => {
if (!this._ismounted) {
console.warn("RouteRender is not mounted, skipping render load")
return false
}
let componentModule = this.state.routes[path ?? this.props.path ?? window.location.pathname] ?? this.props.staticRenders?.NotFound ?? NotFoundRender
// TODO: in a future use, we can use `pageStatement` class for managing statement
window.app.pageStatement = Object.freeze(componentModule.pageStatement) ?? Object.freeze({})
return this.setState({ renderComponent: componentModule })
}
componentDidCatch(info, stack) {
this.setState({ error: { info, stack } })
this.setState({ renderError: { info, stack } })
}
// shouldComponentUpdate(nextProps, nextState) {
// if (this.lastLocation.pathname !== window.location.pathname) {
// return true
// }
// return false
// }
render() {
this.lastLocation = window.location
if (this.state.crash) {
const StaticCrashRender = this.props.staticRenders?.Crash ?? CrashRender
let path = this.props.path ?? window.location.pathname
let componentModule = this.state.routes[path] ?? this.props.staticRenders.NotFound ?? NotFound
console.debug(`[RouteRender] Rendering ${path}`)
if (this.state.error) {
if (this.props.staticRenders?.RenderError) {
return React.createElement(this.props.staticRenders?.RenderError, { error: this.state.error })
}
return JSON.stringify(this.state.error)
return <StaticCrashRender crash={this.state.crash} />
}
return React.createElement(ConnectWithApp(componentModule), this.props)
if (this.state.renderError) {
if (this.props.staticRenders?.RenderError) {
return React.createElement(this.props.staticRenders?.RenderError, { error: this.state.renderError })
}
return JSON.stringify(this.state.renderError)
}
if (this.state.renderInitialization) {
const StaticInitializationRender = this.props.staticRenders?.initialization ?? null
return <StaticInitializationRender />
}
if (!this.state.renderComponent) {
return null
}
return React.createElement(ConnectWithApp(this.state.renderComponent), this.props)
}
}
export const LazyRouteRender = (props) => {
const component = loadable(async () => {
// TODO: Support evite async component initializations
return RouteRender
})
return React.createElement(component)
}
export const extension = {
key: "customRender",
expose: [

15
packages/app/src/extensions/render/statics/crash/index.jsx Normal file
View File

@ -0,0 +1,15 @@
import React from "react"
import "./index.less"
export default (props) => {
return <div className="app_crash">
<div className="header">
<h1>Crash</h1>
</div>
<h2>{props.crash.message}</h2>
<pre>{props.crash.error}</pre>
<div className="actions">
<button onClick={() => window.location.reload()}>Reload</button>
</div>
</div>
}

27
packages/app/src/extensions/render/statics/crash/index.less Normal file
View File

@ -0,0 +1,27 @@
.app_crash {
position: absolute;
z-index: 9999;
top: 0;
right: 0;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.header {
display: flex;
text-align: center;
flex-direction: column;
justify-content: center;
svg {
width: 100px;
height: 100px;
}
}
}

66
packages/app/src/extensions/settings/index.js Normal file
View File

@ -0,0 +1,66 @@
import store from "store"
import defaultSettings from "schemas/defaultSettings.json"
class SettingsController {
constructor() {
this.storeKey = "app_settings"
this.settings = store.get(this.storeKey) ?? {}
this._setDefaultUndefined()
}
_setDefaultUndefined = () => {
Object.keys(defaultSettings).forEach((key) => {
const value = defaultSettings[key]
// Only set default if value is undefined
if (typeof this.settings[key] === "undefined") {
this.settings[key] = value
}
})
}
defaults = (key) => {
if (typeof key === "undefined") {
return defaultSettings
}
return defaultSettings[key]
}
is = (key, value) => {
return this.settings[key] === value
}
set = (key, value) => {
this.settings[key] = value
store.set(this.storeKey, this.settings)
window.app.eventBus.emit("setting_update", { key, value })
return this.settings
}
get = (key) => {
if (typeof key === "undefined") {
return this.settings
}
return this.settings[key]
}
}
export default {
key: "settings",
expose: [
{
initialization: [
(app, main) => {
app.settingsController = new SettingsController()
window.app.settings = app.settingsController
}
]
},
]
}

12
packages/app/src/extensions/sound/index.js
View File

@ -17,19 +17,22 @@ export class SoundEngine {
Object.keys(soundPack).forEach((key) => {
const src = soundPack[key]
soundPack[key] = new Howl({
src: [src]
soundPack[key] = (options) => new Howl({
volume: window.app.settings.get("generalAudioVolume") ?? 0.5,
...options,
src: [src],
})
})
return soundPack
}
play = (name) => {
play = (name, options) => {
if (this.sounds[name]) {
this.sounds[name].play()
return this.sounds[name](options).play()
} else {
console.error(`Sound ${name} not found.`)
return false
}
}
}
@ -41,6 +44,7 @@ export const extension = {
initialization: [
async (app, main) => {
app.SoundEngine = new SoundEngine()
main.setToWindowContext("SoundEngine", app.SoundEngine)
await app.SoundEngine.initialize()
}
]

3
packages/app/src/extensions/splash/index.less
View File

@ -1,8 +1,9 @@
.splash_wrapper {
overflow: hidden;
background-color: rgba(240, 242, 245, 0.8);
//background-color: rgba(240, 242, 245, 0.8);
backdrop-filter: blur(10px);
--webkit-backdrop-filter: blur(10px);
width: 100%;
height: 100%;

15
packages/app/src/extensions/theme/index.jsx
View File

@ -138,21 +138,16 @@ export const extension = {
async (app, main) => {
app.ThemeController = new ThemeController()
main.eventBus.on("darkMode", (payload) => {
if (payload.to) {
main.eventBus.on("darkMode", (value) => {
if (value) {
app.ThemeController.applyVariant("dark")
} else {
app.ThemeController.applyVariant("light")
}
})
main.eventBus.on("modifyTheme", (payload) => {
if (payload.to) {
app.ThemeController.update(payload.to)
app.ThemeController.setModifications(app.ThemeController.mutation)
} else {
app.ThemeController.update(payload)
app.ThemeController.setModifications(app.ThemeController.mutation)
}
main.eventBus.on("modifyTheme", (value) => {
app.ThemeController.update(value)
app.ThemeController.setModifications(app.ThemeController.mutation)
})
main.eventBus.on("resetTheme", () => {
app.ThemeController.resetDefault()

57
packages/app/src/i18n/index.js
View File

@ -1,57 +0,0 @@
import { DEFAULT_LOCALE, SUPPORTED_LOCALES } from './locales'
import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
export {
DEFAULT_LOCALE,
SUPPORTED_LOCALES,
SUPPORTED_LANGUAGES,
extractLocaleFromPath,
} from './locales'
// This is a dynamic import so not all languages are bundled in frontend.
// For YAML format, install `@rollup/plugin-yaml`.
const messageImports = import.meta.glob('./translations/*.json')
function importLocale(locale) {
const [, importLocale] =
Object.entries(messageImports).find(([key]) =>
key.includes(`/${locale}.`)
) || []
return importLocale && importLocale()
}
export async function loadAsyncLanguage(i18n, locale = DEFAULT_LOCALE) {
try {
const result = await importLocale(locale)
if (result) {
i18n.addResourceBundle(locale, 'translation', result.default || result)
i18n.changeLanguage(locale)
}
} catch (error) {
console.error(error)
}
}
export async function installI18n(locale = '') {
locale = SUPPORTED_LOCALES.includes(locale) ? locale : DEFAULT_LOCALE
const messages = await importLocale(locale)
i18n
.use(initReactI18next) // passes i18n down to react-i18next
.init({
// debug: true,
resources: {
// @ts-ignore
[locale]: { translation: messages.default || messages },
},
lng: locale,
fallbackLng: DEFAULT_LOCALE,
interpolation: {
escapeValue: false, // react already safes from xss
},
})
}
export default i18n

18
packages/app/src/i18n/locales.js
View File

@ -1,18 +0,0 @@
export const SUPPORTED_LANGUAGES = [
{
locale: 'en',
name: 'English',
default: true,
},
]
export const SUPPORTED_LOCALES = SUPPORTED_LANGUAGES.map((l) => l.locale)
export const DEFAULT_LANGUAGE = SUPPORTED_LANGUAGES.find((l) => l.default)
export const DEFAULT_LOCALE = DEFAULT_LANGUAGE?.locale
export function extractLocaleFromPath(path = '') {
const [_, maybeLocale] = path.split('/')
return SUPPORTED_LOCALES.includes(maybeLocale) ? maybeLocale : DEFAULT_LOCALE
}

88
packages/app/src/i18n/translations/en.json
View File

@ -1,88 +0,0 @@
{
"main": {
"welcome": "Welcome back, {{username}}",
"assigned_for_you": "Assigned for you",
},
"generics": {
"new": "New",
"close": "Close",
"done": "Done",
"edit": "Edit",
"select": "Select",
"save": "Save",
"cancel": "Cancel",
"delete": "Delete",
"import": "Import",
"export": "Export",
"refresh": "Refresh",
"reload": "Reload",
"search": "Search",
"status": "Status",
"type": "Type",
"about": "About",
"current": "Current",
"statistics": "Statistics",
"name": "Name",
"username": "Username",
"email": "Email",
"password": "Password",
"sessions": "Sessions",
"compact_view": "Compact view",
"about_us": "About us",
"sign_in": "Sign in",
"sign_out": "Sign out",
"sign_up": "Sign up",
"all_sessions": "All sessions",
"destroy_all_sessions": "Destroy all sessions",
"account_info": "Account information",
"password_confirmation": "Password confirmation",
},
"fabric": {
"new_product": "New product",
"description": "Description",
"describe_something": "Describe something...",
"operations": "Operations",
"select_operation": "Select operation",
"select_operations": "Select operations...",
"tasks": "Tasks",
"select_task": "Select task",
"select_tasks": "Select tasks...",
"add_task": "Add task",
"add_tasks": "Add tasks",
"location": "Location",
"select_location": "Select location",
"select_locations": "Select locations...",
"add_location": "Add location",
"add_locations": "Add locations",
"variants": "Variants",
"select_variant": "Select variant",
"select_variants": "Select variants..."
},
"settings": {
"general": {
"groupLabel": "General",
"language": "Language",
"persistentSession:": "Save session",
"persistentSession_description": "The application will save the session and no expire it."
},
"sidebar": {
"groupLabel": "Sidebar",
"edit": "Edit sidebar",
"edit_description": "Edit the sidebar to add or remove items.",
"edit_button": "Edit",
"autoCollapse": "Auto collapse",
"autoCollapse_description": "Collapse the sidebar when loose focus"
},
"aspect": {
"groupLabel": "Aspect",
"reduceAnimation": "Reduce animation",
"reduceAnimation_description": "Reduce the animation of the application.",
"darkMode": "Dark mode",
"darkMode_description": "Enable dark mode for the application.",
"primaryColor": "Primary color",
"primaryColor_description": "Change the primary color of the application.",
"resetTheme": "Reset theme",
"resetTheme_description": "Reset the theme to the default."
}
},
}

167
packages/app/src/layout/bottombar/index.jsx
View File

@ -1,16 +1,45 @@
import React from "react"
import { Motion, spring } from "react-motion"
import { EviteComponent } from "evite"
import * as antd from "antd"
import { createIconRender } from "components/Icons"
import classnames from "classnames"
import "./index.less"
export default class BottomBar extends React.Component {
export default class BottomBar extends EviteComponent {
state = {
render: null
allowed: true,
show: false,
visible: false,
creatorActionsVisible: false,
render: null,
isManager: false,
}
handleBusEvents = {
"render_initialization": () => {
this.toogle(false)
},
"render_initialization_done": () => {
if (this.isAllowed()) {
this.toogle(true)
}
},
"crash": () => {
this.toogle(false)
},
"locationChange": () => {
this.toogle(this.isAllowed())
}
}
componentDidMount = () => {
this._loadBusEvents()
window.app.BottomBarController = {
toogleVisible: this.toogle,
isVisible: () => this.state.visible,
render: (fragment) => {
this.setState({ render: fragment })
},
@ -20,6 +49,35 @@ export default class BottomBar extends React.Component {
}
}
componentWillUnmount = () => {
this._unloadBusEvents()
delete window.app.BottomBarController
}
isAllowed() {
return app.pageStatement?.bottomBarAllowed !== "undefined" && app.pageStatement?.bottomBarAllowed !== false
}
toogle = (to) => {
if (!window.isMobile) {
to = false
} else {
to = to ?? !this.state.visible
}
if (!to) {
this.setState({ show: to }, () => {
setTimeout(() => {
this.setState({ visible: to })
}, 500)
})
} else {
this.setState({ visible: to }, () => {
this.setState({ show: to })
})
}
}
onClickItemId = (id) => {
window.app.setLocation(`/${id}`)
}
@ -31,38 +89,81 @@ export default class BottomBar extends React.Component {
</div>
}
return <div className="bottomBar">
<div className="items">
<div onClick={() => window.app.openFabric()} key="fabric" id="fabric" className="item">
<div className="icon">
{createIconRender("PlusCircle")}
if (!this.state.visible) {
return null
}
return <Motion style={{ y: spring(this.state.show ? 0 : 300) }}>
{({ y }) => <div
className="bottomBar"
style={{
WebkitTransform: `translate3d(0, ${y}px, 0)`,
transform: `translate3d(0, ${y}px, 0)`,
}}
>
<div className="items">
<div
key="main"
id="main"
className="item"
onClick={() => window.app.goMain()}
>
<div className="icon">
{createIconRender("Home")}
</div>
</div>
<div
key="nav"
id="nav"
className="item"
onClick={() => window.app.openNavigationMenu()}
>
<div className="icon">
{createIconRender("Navigation")}
</div>
</div>
<div
key="createNew"
id="createNew"
className={classnames("item", ["primary"])}
onClick={() => window.app.openCreateNew()}
>
<div className="icon">
{createIconRender("PlusCircle")}
</div>
</div>
<div
key="settings"
id="settings"
className="item"
onClick={() => window.app.openSettings()}
>
<div className="icon">
{createIconRender("Settings")}
</div>
</div>
{this.props.user ? <div
key="account"
id="account"
className="item"
onClick={() => window.app.goToAccount()}
>
<div className="icon">
<antd.Avatar shape="square" src={this.props.user?.avatar} />
</div>
</div> : <div
key="login"
id="login"
onClick={() => this.onClickItemId("login")}
className="item"
>
<div className="icon">
{createIconRender("LogIn")}
</div>
</div>}
</div>
<div onClick={() => window.app.goMain()} key="main" id="main" className="item">
<div className="icon">
{createIconRender("Home")}
</div>
</div>
<div onClick={() => this.onClickItemId("nav")} key="nav" id="nav" className="item">
<div className="icon">
{createIconRender("Navigation")}
</div>
</div>
<div onClick={() => window.app.openSettings()} key="settings" id="settings" className="item">
<div className="icon">
{createIconRender("Settings")}
</div>
</div>
{this.props.user ? <div onClick={() => window.app.goToAccount()} key="account" id="account" className="item">
<div className="icon">
<antd.Avatar src={this.props.user?.avatar} />
</div>
</div> : <div onClick={() => this.onClickItemId("login")} className="item">
<div key="login" id="login" className="icon">
{createIconRender("LogIn")}
</div>
</div>}
</div>
</div>
</div>}
</Motion>
}
}

58
packages/app/src/layout/bottombar/index.less
View File

@ -1,4 +1,5 @@
@bottomBar_height: 80px;
@bottomBar_iconSize: 24px;
.bottomBar {
position: sticky;
@ -8,6 +9,10 @@
bottom: 0;
width: 100vw;
min-width: 100vw;
max-width: 100vw;
overflow: hidden;
display: flex;
flex-direction: row;
@ -23,22 +28,33 @@
padding: 10px;
.items {
display: inline-block;
white-space: nowrap;
overflow-x: overlay;
display: inline-flex;
align-items: center;
justify-content: center;
//white-space: nowrap;
//overflow-x: overlay;
height: 100%;
> div {
display: inline-block;
height: 100%;
margin: 0 17px;
}
width: 100vw;
.item {
display: inline-flex;
height: 100%;
align-items: center;
justify-content: center;
transition: all 150ms ease-in;
width: 20vw;
min-width: 20vw;
max-width: 20vw;
.icon {
border-radius: 360px;
height: 100%;
width: fit-content;
display: flex;
flex-direction: column;
@ -47,6 +63,28 @@
color: var(--background-color-contrast);
font-size: 2rem;
padding: 12px;
transition: all 70ms ease-in-out;
svg{
margin: 0!important;
}
}
&.primary {
.icon {
color: var(--background-color-primary);
background-color: var(--primaryColor);
}
}
}
.item:active {
.icon {
background-color: var(--background-color-primary);
color: var(--background-color-contrast);
transform: scale(0.9);
}
}
}

69
packages/app/src/layout/drawer/index.jsx
View File

@ -1,8 +1,6 @@
import React from "react"
import * as antd from "antd"
import classnames from "classnames"
import { DraggableDrawer } from "components"
import EventEmitter from "@foxify/events"
import { Icons } from "components/Icons"
import "./index.less"
@ -104,13 +102,9 @@ export class Drawer extends React.Component {
options = this.props.options ?? {}
events = new EventEmitter()
state = {
locked: this.options.locked ?? false,
visible: false,
visible: true,
}
unlock = () => this.setState({ locked: false })
lock = () => this.setState({ locked: true })
componentDidMount = async () => {
if (typeof this.props.controller === "undefined") {
throw new Error(`Cannot mount an drawer without an controller`)
@ -118,30 +112,23 @@ export class Drawer extends React.Component {
if (typeof this.props.children === "undefined") {
throw new Error(`Empty component`)
}
if (this.props.children) {
this.setState({ visible: true })
}
}
onClose = () => {
if (typeof this.options.props?.closable !== "undefined" && !this.options.props?.closable) {
return false
}
this.close()
toogleVisibility = (to) => {
this.setState({ visible: to ?? !this.state.visible })
}
close = (context) => {
if (typeof this.options.onClose === "function") {
this.options.onClose(...context)
}
this.setState({ visible: false })
this.unlock()
close = () => {
this.toogleVisibility(false)
this.events.emit("beforeClose")
setTimeout(() => {
if (typeof this.options.onClose === "function") {
this.options.onClose()
}
this.props.controller.destroy(this.props.id)
}, 400)
}, 500)
}
sendEvent = (...context) => {
@ -162,14 +149,13 @@ export class Drawer extends React.Component {
render() {
const drawerProps = {
destroyOnClose: true,
bodyStyle: { padding: 0 },
...this.options.props,
ref: this.props.ref,
closable: false,
key: this.props.id,
onClose: this.onClose,
visible: this.state.visible,
onRequestClose: this.close,
open: this.state.visible,
containerElementClass: "drawer",
modalElementClass: "body",
}
const componentProps = {
...this.options.componentProps,
@ -179,25 +165,8 @@ export class Drawer extends React.Component {
handleFail: this.handleFail,
}
if (window.isMobile) {
drawerProps.height = "100%"
drawerProps.placement = "bottom"
}
return (
<antd.Drawer className={classnames("drawer", { ["mobile"]: window.isMobile })} {...drawerProps}>
{!this.props.headerDisabled && <div className="pageTitle">
<antd.PageHeader
onBack={this.onClose}
title={this.props.title ?? "Close"}
backIcon={this.props.backIcon ?? <Icons.X />}
subTitle={this.props.subtitle}
/>
</div>}
<div className="body">
{React.createElement(this.props.children, componentProps)}
</div>
</antd.Drawer>
)
return <DraggableDrawer {...drawerProps}>
{React.createElement(this.props.children, componentProps)}
</DraggableDrawer>
}
}

64
packages/app/src/layout/drawer/index.less
View File

@ -1,52 +1,26 @@
@import "theme/vars.less";
.drawer {
height: 100vh;
max-height: 100vh;
.pageTitle {
position: sticky;
background-color: var(--background-color-primary);
top: 0;
z-index: 100;
height: @app_header_height;
padding: 10px 20px;
.ant-page-header{
height: 100%;
padding: 0;
}
.ant-page-header-heading{
height: 100%;
margin: 0!important;
}
.ant-page-header-heading-left {
height: 100%;
margin: 0!important;
}
}
.body {
z-index: 99;
position: absolute;
top: 50px;
position: relative;
padding: 20px 30px;
height: 100vh - @app_header_height;
padding: 30px 10px 10px 10px;
background-color: var(--background-color-primary);
width: 100%;
max-width: 700px;
min-height: 100%;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
&.mobile {
.body {
padding: 20px 15px;
}
.body::before{
content: "";
background-color: var(--background-color-contrast);
width: 100px;
height: 8px;
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
border-radius: 8px;
}
}
.ant-drawer-content,
.ant-drawer-wrapper-body,
.ant-drawer-body {
height: 100vh;
max-height: 100vh;
}
}

18
packages/app/src/layout/header/index.jsx
View File

@ -28,28 +28,12 @@ export default class Header extends React.Component {
window.app["HeaderController"] = this.HeaderController
}
onClickCreate = () => {
window.app.openFabric()
}
onClickHome = () => {
window.app.goMain()
}
render() {
return (
<antd.Layout.Header className={classnames(`app_header`, { ["hidden"]: !window.isMobile && !this.state.visible })}>
{window.isMobile && <div>
<antd.Button
onClick={this.onClickHome}
type="primary"
shape="circle"
icon={<Icons.Home style={{ margin: 0 }} />}
/>
</div>}
<div>
<antd.Button
onClick={this.onClickCreate}
onClick={window.app.openCreateNew}
type="primary"
shape="circle"
icon={<Icons.Plus style={{ margin: 0 }} />}

3
packages/app/src/layout/header/index.less
View File

@ -2,7 +2,8 @@
.app_header {
user-select: none;
--webkit-user-select: none;
display: flex;
flex-direction: row;
align-items: center;

42
packages/app/src/layout/index.jsx
View File

@ -1,13 +1,12 @@
import React from "react"
import classnames from "classnames"
import * as antd from 'antd'
import { enquireScreen, unenquireScreen } from 'enquire-js'
import Sidebar from './sidebar'
import Header from './header'
import Drawer from './drawer'
import Sidedrawer from './sidedrawer'
import BottomBar from "./bottombar"
import BottomBar from "./bottomBar"
const LayoutRenders = {
mobile: (props) => {
@ -43,7 +42,6 @@ const LayoutRenders = {
export default class Layout extends React.Component {
state = {
layoutType: "default",
isMobile: false,
isOnTransition: false,
}
@ -58,35 +56,29 @@ export default class Layout extends React.Component {
}
componentDidMount() {
this.enquireHandler = enquireScreen(mobile => {
const { isMobile } = this.state
if (isMobile !== mobile) {
window.isMobile = mobile
this.setState({
isMobile: mobile,
})
}
if (mobile) {
window.app.eventBus.emit("mobile_mode")
this.setLayout("mobile")
} else {
window.app.eventBus.emit("desktop_mode")
this.setLayout("default")
}
})
window.app.eventBus.on("transitionStart", () => {
this.setState({ isOnTransition: true })
})
window.app.eventBus.on("transitionDone", () => {
this.setState({ isOnTransition: false })
})
}
componentWillUnmount() {
unenquireScreen(this.enquireHandler)
if (window.app.settings.get("forceMobileMode") || window.app.isAppCapacitor() || Math.min(window.screen.width, window.screen.height) < 768 || navigator.userAgent.indexOf("Mobi") > -1) {
window.isMobile = true
this.setLayout("mobile")
} else {
window.isMobile = false
}
window.app.eventBus.on("forceMobileMode", (to) => {
if (to) {
window.isMobile = true
this.setLayout("mobile")
} else {
window.isMobile = false
this.setLayout("default")
}
})
}
render() {

23
packages/app/src/layout/sidebar/components/editor/index.jsx
View File

@ -1,14 +1,13 @@
import React from "react"
import { Button } from "antd"
import { ActionsBar } from "components"
import { Icons, createIconRender } from "components/icons"
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"
import Selector from "../selector"
import { ActionsBar } from "components"
import { Icons, createIconRender } from "components/Icons"
import sidebarItems from "schemas/routes.json"
import defaultSidebarKeys from "schemas/defaultSidebar.json"
import { sidebarKeys as defaultSidebarKeys } from "schemas/defaultSettings"
import Selector from "../selector"
import "./index.less"
const allItemsMap = [...sidebarItems].map((item, index) => {
@ -47,7 +46,7 @@ export default class SidebarEditor extends React.Component {
}
loadItems = () => {
const storagedKeys = window.app.configuration.sidebar.get() ?? defaultSidebarKeys
const storagedKeys = window.app.settings.get("sidebarKeys") ?? defaultSidebarKeys
const active = []
const lockedIndex = []
@ -65,7 +64,7 @@ export default class SidebarEditor extends React.Component {
}
onSave = () => {
window.app.configuration.sidebar._push(this.state.items)
window.app.settings.set("sidebarKeys", this.state.items)
window.app.SidebarController.toogleEdit(false)
}
@ -74,7 +73,7 @@ export default class SidebarEditor extends React.Component {
}
onSetDefaults = () => {
window.app.configuration.sidebar._push(defaultSidebarKeys)
window.app.settings.set("sidebarKeys", defaultSidebarKeys)
this.loadItems()
}
@ -136,7 +135,7 @@ export default class SidebarEditor extends React.Component {
if (update.includes(key)) {
return false
}
update.push(key)
})
@ -164,8 +163,8 @@ export default class SidebarEditor extends React.Component {
background: component.locked
? "rgba(145, 145, 145, 0.2)"
: isDragging
? "rgba(145, 145, 145, 0.5)"
: "transparent",
? "rgba(145, 145, 145, 0.5)"
: "transparent",
...draggableStyle,
})
@ -244,7 +243,7 @@ export default class SidebarEditor extends React.Component {
Done
</Button>
</div>
<div>
<Button onClick={this.onDiscard} icon={<Icons.XCircle />} >Cancel</Button>
</div>

2
packages/app/src/layout/sidebar/components/selector/index.jsx
View File

@ -8,7 +8,7 @@ import sidebarItems from "schemas/routes.json"
import "./index.less"
const getStoragedKeys = () => {
return window.app.configuration.sidebar.get()
return window.app.settings.get("sidebarKeys") ?? []
}
const getAllItems = () => {

38
packages/app/src/layout/sidebar/index.jsx
View File

@ -1,14 +1,14 @@
import React from "react"
import { Icons, createIconRender } from "components/Icons"
import { Layout, Menu, Avatar } from "antd"
import { SidebarEditor } from "./components"
import config from "config"
import sidebarItems from "schemas/routes.json"
import defaultSidebarItems from "schemas/defaultSidebar.json"
import classnames from "classnames"
import config from "config"
import { Icons, createIconRender } from "components/Icons"
import { sidebarKeys as defaultSidebarItems } from "schemas/defaultSettings"
import sidebarItems from "schemas/routes.json"
import { Translation } from "react-i18next"
import { SidebarEditor } from "./components"
import "./index.less"
const { Sider } = Layout
@ -27,7 +27,7 @@ export default class Sidebar extends React.Component {
editMode: false,
visible: true,
loading: true,
collapsed: window.app.configuration.settings.get("collapseOnLooseFocus") ?? false,
collapsed: window.app.settings.get("collapseOnLooseFocus") ?? false,
pathResolve: {},
menus: {},
extraItems: {
@ -57,7 +57,7 @@ export default class Sidebar extends React.Component {
}
getStoragedKeys = () => {
return window.app.configuration?.sidebar.get()
return window.app.settings.get("sidebarKeys")
}
appendItem = (item = {}) => {
@ -108,7 +108,7 @@ export default class Sidebar extends React.Component {
keys = keys.move(index, item.index)
//update index
window.app.configuration.sidebar._push(keys)
window.app.settings.set("sidebarKeys", keys)
}
}
})
@ -165,7 +165,11 @@ export default class Sidebar extends React.Component {
<Menu.SubMenu
key={item.id}
icon={handleRenderIcon(item.icon)}
title={<span>{item.title}</span>}
title={<span>
<Translation>
{t => t(item.title)}
</Translation>
</span>}
{...item.props}
>
{this.renderMenuItems(item.children)}
@ -175,7 +179,9 @@ export default class Sidebar extends React.Component {
return (
<Menu.Item key={item.id} icon={handleRenderIcon(item.icon)} {...item.props}>
{item.title ?? item.id}
<Translation>
{t => t(item.title ?? item.id)}
</Translation>
</Menu.Item>
)
})
@ -203,7 +209,7 @@ export default class Sidebar extends React.Component {
}
if (to) {
window.app.eventBus.emit("cleanAll")
window.app.eventBus.emit("clearAllOverlays")
} else {
if (this.itemsMap !== this.getStoragedKeys()) {
this.loadSidebarItems()
@ -214,7 +220,7 @@ export default class Sidebar extends React.Component {
}
toogleCollapse = (to) => {
if (window.app.configuration?.settings.is("collapseOnLooseFocus", true) && !this.state.editMode) {
if (window.app.settings.is("collapseOnLooseFocus", true) && !this.state.editMode) {
this.setState({ collapsed: to ?? !this.state.collapsed })
} else {
this.setState({ collapsed: false })
@ -290,7 +296,9 @@ export default class Sidebar extends React.Component {
<div key="bottom" className="app_sidebar_bottom">
<Menu selectable={false} mode="inline" theme={this.props.theme} onClick={this.handleClick}>
<Menu.Item key="settings" icon={<Icons.Settings />}>
Settings
<Translation>
{t => t("Settings")}
</Translation>
</Menu.Item>
<Menu.Item key="account">

6
packages/app/src/layout/sidebar/index.less
View File

@ -34,6 +34,8 @@
background-color: transparent !important;
user-select: none;
--webkit-user-select: none;
transition: all 150ms ease-in-out;
height: 100%;
display: flex;
@ -65,6 +67,7 @@
background-color: transparent !important;
user-select: none;
--webkit-user-select: none;
display: flex;
flex-direction: column;
@ -75,6 +78,7 @@
.app_sidebar_header_logo {
user-select: none;
--webkit-user-select: none;
display: flex;
align-items: center;
@ -82,6 +86,7 @@
img {
user-select: none;
--webkit-user-select: none;
width: 80%;
max-height: 80px;
@ -107,6 +112,7 @@
background: transparent !important;
background-color: transparent !important;
backdrop-filter: blur(10px);
--webkit-backdrop-filter: blur(10px);
width: 100%;
height: fit-content;

6
packages/app/src/models/index.js
View File

@ -1,4 +1,2 @@
export { default as Session } from './session'
export { default as User } from './user'
export { default as SidebarController } from './sidebar'
export { default as SettingsController } from './settings'
export { default as Session } from "./session"
export { default as User } from "./user"

61
packages/app/src/models/session/index.js
View File

@ -1,32 +1,44 @@
import cookies from 'js-cookie'
import cookies from "js-cookie"
import jwt_decode from "jwt-decode"
import config from 'config'
import config from "config"
import { Storage } from '@capacitor/storage'
export default class Session {
static get bridge() {
return window.app?.request
}
static capStorage = async (method, value) => {
const res = await Storage[method]({ key: this.tokenKey, value })
return res.value
}
static tokenKey = config.app?.storage?.token ?? "token"
static get token() {
if (navigator.userAgent === "capacitor") {
// FIXME: sorry about that
return sessionStorage.getItem(this.tokenKey)
if (window.app.isAppCapacitor()) {
return this.capStorage("get")
}
return cookies.get(this.tokenKey)
}
static set token(token) {
if (navigator.userAgent === "capacitor") {
// FIXME: sorry about that
return sessionStorage.setItem(this.tokenKey, token)
if (window.app.isAppCapacitor()) {
return this.capStorage("set", token)
}
return cookies.set(this.tokenKey, token)
}
static get decodedToken() {
return this.token && jwt_decode(this.token)
static async delToken() {
if (window.app.isAppCapacitor()) {
return this.capStorage("remove")
}
return cookies.remove(Session.tokenKey)
}
static async decodedToken() {
const token = await this.token
return token && jwt_decode(token)
}
//* BASIC HANDLERS
@ -34,18 +46,17 @@ export default class Session {
const body = {
username: window.btoa(payload.username),
password: window.btoa(payload.password),
allowRegenerate: payload.allowRegenerate
}
return this.generateNewToken(body, (err, res) => {
if (typeof callback === 'function') {
if (typeof callback === "function") {
callback(err, res)
}
if (!err || res.status === 200) {
let token = res.data
if (typeof token === 'object') {
if (typeof token === "object") {
token = token.token
}
@ -66,28 +77,28 @@ export default class Session {
parseData: false
})
if (typeof callback === 'function') {
if (typeof callback === "function") {
callback(request.error, request.response)
}
return request
}
regenerateToken = async () => {
return await Session.bridge.post.regenerate()
}
//* GETTERS
getAllSessions = async () => {
return await Session.bridge.get.sessions()
}
getTokenInfo = async () => {
const session = Session.token
const session = await Session.token
return await Session.bridge.post.validateSession({ session })
}
getCurrentSession = async () => {
return await Session.bridge.get.currentSession()
}
isCurrentTokenValid = async () => {
const health = await this.getTokenInfo()
@ -95,15 +106,11 @@ export default class Session {
}
forgetLocalSession = () => {
if (navigator.userAgent === "capacitor") {
// FIXME: sorry about that
return sessionStorage.removeItem(Session.tokenKey)
}
return cookies.remove(Session.tokenKey)
return Session.delToken()
}
destroyAllSessions = async () => {
const session = Session.decodedToken
const session = await Session.decodedToken()
if (!session) {
return false
@ -117,8 +124,8 @@ export default class Session {
}
destroyCurrentSession = async () => {
const token = Session.token
const session = Session.decodedToken
const token = await Session.token
const session = await Session.decodedToken()
if (!session || !token) {
return false

60
packages/app/src/models/settings/index.js
View File

@ -1,60 +0,0 @@
import store from 'store'
import { objectToArrayMap } from '@corenode/utils'
import defaultKeys from "schemas/defaultSettings.json"
class SettingsController {
constructor() {
this.storeKey = "app_settings"
this.defaultSettings = defaultKeys
this.settings = store.get(this.storeKey) ?? {}
objectToArrayMap(this.defaultSettings).forEach((entry) => {
if (typeof this.settings[entry.key] === "undefined") {
this.settings[entry.key] = entry.value
}
})
return this
}
_pull() {
this.settings = { ...this.settings, ...store.get(this.storeKey) }
}
_push(update) {
if (typeof update !== "undefined") {
this.settings = { ...this.settings, ...update }
}
store.set(this.storeKey, this.settings)
}
is = (key, value) => {
return this.settings[key] === value ? true : false
}
change = (key, to) => {
let value = to ?? !this.settings[key] ?? true
this.set(key, value)
window.app.eventBus.emit("changeSetting", { key, value, to })
return this.settings
}
set = (key, value) => {
this.settings[key] = value
store.set(this.storeKey, this.settings)
return this.settings
}
get = (key) => {
if (typeof key === "undefined") {
return this.settings
}
return this.settings[key]
}
}
export default SettingsController

46
packages/app/src/models/sidebar/index.js
View File

@ -1,46 +0,0 @@
import store from 'store'
import defaultKeys from 'schemas/defaultSidebar.json'
class SidebarController {
constructor() {
this.storeKey = "app_sidebar"
this.defaults = defaultKeys
this.data = store.get(this.storeKey) ?? this.defaults
return this
}
_pull = () => {
this.data = [...this.data, ...store.get(this.storeKey)]
}
_push = (update) => {
if (typeof update !== "undefined") {
this.data = update
}
store.set(this.storeKey, this.data)
}
set = (value) => {
this.data.push(value)
this._push()
return this.data
}
all = () => {
let objs = []
this.data.forEach((entry) => {
objs.push(entry)
})
return objs
}
get = () => {
return this.data
}
}
export default SidebarController

42
packages/app/src/models/user/index.js
View File

@ -1,12 +1,12 @@
import Session from '../session'
import Session from "../session"
export default class User {
static get bridge() {
return window.app?.request
}
static get data() {
const token = Session.decodedToken
static async data() {
const token = await Session.decodedToken()
if (!token || !User.bridge) {
return false
@ -15,24 +15,44 @@ export default class User {
return User.bridge.get.user(undefined, { username: token.username, _id: token.user_id })
}
static get roles() {
const token = Session.decodedToken
static async roles() {
const token = await Session.decodedToken()
if (!token || !User.bridge) {
return false
}
return User.bridge.get.roles({ username: token.username })
return User.bridge.get.userRoles(undefined, { username: token.username })
}
getAssignedWorkloads = async () => {
const token = Session.decodedToken
static async hasRole(role) {
const roles = await User.roles()
if (!roles) {
return false
}
return Array.isArray(roles) && roles.includes(role)
}
static async selfUserId() {
const token = await Session.decodedToken()
if (!token) {
return false
}
return token.user_id
}
getAssignedWorkorders = async () => {
const token = await Session.decodedToken()
if (!token || !User.bridge) {
return false
}
return User.bridge.get.workloads({ username: token.username })
return User.bridge.get.workorders({ username: token.username })
}
getData = async (payload, callback) => {
@ -48,12 +68,12 @@ export default class User {
}
hasAdmin = async () => {
const roles = await User.roles
const roles = await User.roles()
if (!roles) {
return false
}
return Array.isArray(roles) && roles.includes("admin")
}
}

181
packages/app/src/pages/account/components/editor/index.jsx
View File

@ -1,181 +0,0 @@
import React from "react"
import debounce from "lodash/debounce"
import { Icons } from "components/Icons"
import classnames from "classnames"
import * as antd from "antd"
import "./index.less"
export const EditAccountField = ({ id, component, props, header, handleChange, delay, defaultValue, allowEmpty }) => {
const [currentValue, setCurrentValue] = React.useState(defaultValue)
const [emittedValue, setEmittedValue] = React.useState(null)
const debouncedHandleChange = React.useCallback(
debounce((value) => handleChange({ id, value }), delay ?? 300),
[],
)
const handleDiscard = (event) => {
if (typeof event !== "undefined") {
event.target.blur()
}
setCurrentValue(defaultValue)
handleChange({ id, value: defaultValue })
}
React.useEffect(() => {
debouncedHandleChange(currentValue)
}, [emittedValue])
const onChange = (event) => {
event.persist()
let { value } = event.target
if (typeof value === "string") {
if (value.length === 0) {
// if is not allowed to be empty, discard modifications
if (!allowEmpty) {
return handleDiscard(event)
}
}
}
setCurrentValue(value)
setEmittedValue(value)
}
const handleKeyDown = (event) => {
if (event.keyCode === 27) {
// "escape" pressed, reset to default value
handleDiscard(event)
}
}
window.app.eventBus.on("discardAllChanges", () => {
setCurrentValue(defaultValue)
})
const RenderComponent = component
return (
<div key={id} className="edit_account_field">
{header ? header : null}
<RenderComponent {...props} value={currentValue} id={id} onChange={onChange} onKeyDown={handleKeyDown} />
</div>
)
}
export default class EditAccount extends React.Component {
state = {
values: this.props.user ?? {},
changes: [],
loading: false,
}
toogleLoading = (to) => {
this.setState({ loading: to ?? !this.state.loading })
}
onSaveDone = (error, data) => {
this.setState({ changes: [] })
this.toogleLoading(false)
}
onSave = () => {
this.props.onSave(this.state.changes, this.onSaveDone)
}
discardAll = () => {
window.app.eventBus.emit("discardAllChanges")
this.setState({ changes: [] }) // clean changes after emit, cause controller wont handle changes
}
handleChange = (event) => {
const { id, value } = event
let changes = [...this.state.changes]
changes = changes.filter((change) => change.id !== id)
if (this.state.values[id] !== value) {
// changes detected
changes.push({ id, value })
}
this.setState({ changes })
}
renderActions = () => {
return (
<div className={classnames("edit_account_actions", { ["show"]: this.state.changes.length > 0 })}>
<div className="edit_account_actions_indicator">
{this.state.loading && <Icons.LoadingOutlined style={{ marginRight: "20px" }} />}
{this.state.changes.length} Changes
</div>
<div>
<antd.Button disabled={this.state.loading} type="primary" onClick={this.onSave}>
Save
</antd.Button>
</div>
<div>
<antd.Button disabled={this.state.loading} onClick={this.discardAll}>
Discard all
</antd.Button>
</div>
</div>
)
}
render() {
const { username, fullName, email } = this.state.values
return (
<div className="edit_account">
{this.renderActions()}
<div className="edit_account_wrapper">
<div className="edit_account_category">
<h2>
<Icons.User /> Account information
</h2>
<EditAccountField
id="username"
defaultValue={username}
header={
<div>
<Icons.Tag /> Username
</div>
}
component={antd.Input}
props={{ placeholder: "Username", disabled: true }}
handleChange={this.handleChange}
/>
<EditAccountField
id="fullName"
defaultValue={fullName}
header={
<div>
<Icons.User /> Name
</div>
}
component={antd.Input}
props={{ placeholder: "Your full name" }}
handleChange={this.handleChange}
/>
<EditAccountField
id="email"
defaultValue={email}
header={
<div>
<Icons.Mail /> Email
</div>
}
component={antd.Input}
props={{ placeholder: "Your email address", type: "email" }}
handleChange={this.handleChange}
/>
</div>
</div>
</div>
)
}
}

1
packages/app/src/pages/account/components/index.js
View File

@ -1,3 +1,2 @@
export { default as AccountEditor } from './editor'
export { default as SessionsView } from './sessionsView'
export { default as StatisticsView } from './statisticsView'

94
packages/app/src/pages/account/components/sessionsView/index.jsx
View File

@ -1,8 +1,73 @@
import React from "react"
import * as antd from "antd"
import { Sessions } from "components"
import { Skeleton } from "components"
import { Icons } from "components/Icons"
import { Session } from "models"
import "./index.less"
const SessionsList = (props) => {
const sessions = props.sessions.map((session) => {
const header = (
<div className="session_header">
<div>
<Icons.Key />
</div>
<div>{session.session_uuid}</div>
<div>{props.current === session.session_uuid ? <antd.Tag>Current</antd.Tag> : ""}</div>
</div>
)
const renderDate = () => {
const dateNumber = Number(session.date)
if (dateNumber) {
return new Date(dateNumber).toString()
}
return session.date
}
return (
<antd.Collapse.Panel header={header} key={session.session_uuid} className="session_entry">
<div className="session_entry_info">
<div>
<Icons.Clock />
{renderDate()}
</div>
<div>
<Icons.Navigation />
{session.location}
</div>
</div>
</antd.Collapse.Panel>
)
})
if (!props.sessions || !Array.isArray(props.sessions)) {
return <div>
<antd.Empty>
Cannot find any valid sessions
</antd.Empty>
</div>
}
return <div className="sessions_wrapper">
<antd.Collapse bordered={false} accordion>
{sessions}
</antd.Collapse>
</div>
}
export default class SessionsView extends React.Component {
state = {
currentSessionUUID: null,
}
componentDidMount = async () => {
const currentSession = await Session.decodedToken()
this.setState({ currentSessionUUID: currentSession?.session_uuid })
}
signOutAll = () => {
antd.Modal.warning({
title: "Caution",
@ -20,20 +85,29 @@ export default class SessionsView extends React.Component {
}
render() {
const { sessions, decodedToken } = this.props
const { sessions } = this.props
if (!sessions) {
return <antd.Skeleton active />
return <Skeleton />
}
return (
<div className="session_wrapper">
<Sessions current={decodedToken?.uuid} sessions={this.props.sessions} />
{sessions && (
<antd.Button onClick={this.signOutAll} type="danger">
Destroy all sessions
</antd.Button>
)}
<div className="sessions_wrapper">
<div className="header">
<div>
<h1><Icons.Key /> All Sessions</h1>
</div>
<div>
{sessions && (
<antd.Button onClick={this.signOutAll} type="danger">
Destroy all sessions
</antd.Button>
)}
</div>
</div>
<div>
<SessionsList current={this.state.currentSessionUUID} sessions={this.props.sessions} />
</div>
</div>
)
}

52
packages/app/src/pages/account/components/sessionsView/index.less Normal file
View File

@ -0,0 +1,52 @@
.sessions_wrapper {
.ant-collapse-borderless {
background-color: transparent !important;
}
.header {
h1,
h2,
h3 {
margin: 0;
}
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
> div {
margin-bottom: 10px;
}
}
.session_entry {
display: flex;
flex-direction: column;
background: transparent;
margin-bottom: 10px;
border: 1px solid #ccc !important;
border-radius: 12px !important;
.session_entry_info {
> div {
padding: 4px 40px;
}
}
.ant-collapse-header {
display: flex;
align-items: center;
}
}
.session_header {
display: flex;
flex-direction: row;
> div {
padding: 0 10px;
}
}

129
packages/app/src/pages/account/index.jsx
View File

@ -1,14 +1,15 @@
import React from "react"
import * as antd from "antd"
import { Translation } from "react-i18next"
import { Icons } from "components/Icons"
import { Skeleton, ActionsBar, AdminTools } from "components"
import { Session, User } from "models"
import { AccountEditor, SessionsView, StatisticsView } from "./components"
import { Session } from "models"
import { SessionsView, StatisticsView } from "./components"
import "./index.less"
const SelfViewComponents = {
sessionsView: SessionsView,
statisticsView: StatisticsView,
@ -62,6 +63,7 @@ export default class Account extends React.Component {
static bindApp = ["userController", "sessionController"]
state = {
hasManager: false,
isSelf: false,
user: null,
sessions: null
@ -70,7 +72,7 @@ export default class Account extends React.Component {
api = window.app.request
componentDidMount = async () => {
const token = Session.decodedToken
const token = await Session.decodedToken()
const location = window.app.history.location
const query = new URLSearchParams(location.search)
@ -86,88 +88,84 @@ export default class Account extends React.Component {
state.user = await this.props.contexts.app.userController.getData({ username: requestedUser })
}
state.hasManager = await User.hasRole("manager")
state.hasAdmin = await User.hasRole("admin")
this.setState(state)
}
handleUpdateUserData = async (changes, callback) => {
const update = {}
if (Array.isArray(changes)) {
changes.forEach((change) => {
update[change.id] = change.value
})
}
await this.api.put
.selfUser(update)
.then((data) => {
callback(false, data)
})
.catch((err) => {
callback(true, err)
})
window.app.eventBus.emit("reinitializeUser")
}
handleSignOutAll = () => {
return this.props.contexts.app.sessionController.destroyAllSessions()
}
openUserEdit = () => {
window.app.DrawerController.open("editAccount", AccountEditor, {
props: {
keyboard: false,
width: "45%",
bodyStyle: {
overflow: "hidden",
},
},
componentProps: {
onSave: this.handleUpdateUserData,
user: this.state.user,
},
})
openUserEdit = async () => {
const result = await AdminTools.open.dataManager(this.state.user)
if (result) {
this.setState({ user: result })
}
}
renderSelfActions = () => {
if (this.state.isSelf) {
return (
<div onClick={this.openUserEdit}>
<antd.Button>Edit</antd.Button>
</div>
)
}
return null
openRolesManager = async () => {
await AdminTools.open.rolesManager(this.state.user._id)
}
render() {
const user = this.state.user
if (!user) {
return <antd.Skeleton active />
return <Skeleton />
}
return (
<div className="account_wrapper">
<div className="account_card">
<img src={user.avatar} />
<div style={{ margin: "0 15px" }}>
{Boolean(user.fullName) ?
<>
<h1>{user.fullName}</h1>
<span>@{user.username}#{user._id}</span>
</> :
<>
<h1>@{user.username}</h1>
<span>#{user._id}</span>
</>
}
<div className="card">
<div className="header">
<img src={user.avatar} />
<div style={{ margin: "0 15px" }}>
{Boolean(user.fullName) ?
<>
<h1>{user.fullName}</h1>
<span>@{user.username}#{user._id}</span>
</> :
<>
<h1>@{user.username}</h1>
<span>#{user._id}</span>
</>
}
</div>
</div>
<div className="extension">
<div className="rolesList">
{user.roles.map((role, index) => {
return <antd.Tag>{role}</antd.Tag>
})}
</div>
</div>
{this.state.isSelf && this.renderSelfActions()}
</div>
{(this.state.isSelf || this.state.hasManager) && <ActionsBar spaced padding="8px">
<antd.Button
icon={<Icons.Edit />}
shape="round"
onClick={this.openUserEdit}
>
<Translation>
{(t) => <>{t("Edit")}</>}
</Translation>
</antd.Button>
{this.state.hasAdmin && <antd.Button
icon={<Icons.Link />}
shape="round"
onClick={this.openRolesManager}
>
<Translation>
{(t) => <>{t("Manage roles")}</>}
</Translation>
</antd.Button>}
</ActionsBar>}
{this.state.isSelf && (
<SelfView
components={SelfViewComponents}
@ -175,7 +173,6 @@ export default class Account extends React.Component {
componentProps={{
sessions: this.state.sessions,
user: this.state.user,
decodedToken: Session.decodedToken,
handleSignOutAll: this.handleSignOutAll,
}}
/>

79
packages/app/src/pages/account/index.less
View File

@ -1,30 +1,61 @@
.account_wrapper{
> div {
margin-bottom: 10px;
}
}
@borderColor: #33333396;
@borderRadius: 12px;
.account_card{
display: flex;
font-family: 'Roboto Mono', monospace;
.account_wrapper {
.card {
display: flex;
flex-direction: column;
align-items: center;
.header {
position: relative;
display: inline-flex;
align-items: center;
padding: 12px;
color: #333;
border: 1px solid #33333396;
border-radius: 12px;
z-index: 15;
width: 100%;
padding: 12px;
img {
width: 70px;
height: 70px;
}
font-family: "Roboto Mono", monospace;
color: #333;
border: 1px solid @borderColor;
border-radius: @borderRadius;
word-break: break-all;
img {
width: 70px;
height: 70px;
}
h1 {
margin: 0;
font-size: 35px;
span {
font-size: 12px;
}
}
}
.extension {
position: relative;
display: inline-flex;
top: -10px;
width: 100%;
padding: 19px 10px 10px 10px;
border-top: 0;
border-right: 0;
border-style: solid;
border-width: 1px;
border-color: transparent @borderColor @borderColor @borderColor;
border-radius: 0 0 @borderRadius @borderRadius;
}
}
h1 {
margin: 0;
font-size: 35px;
span {
font-size: 12px;
}
}
> div {
margin-bottom: 10px;
}
}

9
packages/app/src/pages/changelogs/index.jsx Normal file
View File

@ -0,0 +1,9 @@
import React from "react"
export default () => {
// TODO: Fetch API Release notes
return <div>
<h1>Changelog</h1>
</div>
}

68
packages/app/src/pages/explore/index.jsx Normal file
View File

@ -0,0 +1,68 @@
import React from "react"
import * as antd from "antd"
import { PostCard } from "components"
import "./index.less"
export default class PostsExplorer extends React.Component {
state = {
loading: true,
posts: [],
}
api = window.app.request
componentDidMount = async () => {
this.toogleLoading(true)
await this.fetchPosts()
window.app.ws.listen(`new.post`, (data) => {
this.addPost(data)
})
this.toogleLoading(false)
}
toogleLoading = (to) => {
this.setState({ loading: to ?? !this.state.loading })
}
addPost = (post) => {
this.setState({
posts: [post, ...this.state.posts],
})
}
fetchPosts = async () => {
const posts = await this.api.get.feed().catch(error => {
console.error(error)
antd.message.error(error)
return false
})
if (posts) {
console.log(posts)
this.setState({ posts })
}
}
renderPosts = (posts) => {
if (!Array.isArray(posts)) {
antd.message.error("Failed to render posts")
return null
}
return posts.map((post) => {
return <PostCard data={post} />
})
}
render() {
return <div className="explore">
{this.state.loading ? <antd.Skeleton active /> : this.renderPosts(this.state.posts)}
</div>
}
}

11
packages/app/src/pages/explore/index.less Normal file
View File

@ -0,0 +1,11 @@
.explore {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
> div {
margin-bottom: 15px;
}
}

34
packages/app/src/pages/licenses/index.jsx Normal file
View File

@ -0,0 +1,34 @@
import React from "react"
import config from "config"
import "./index.less"
export default () => {
const [licenses, setLicenses] = React.useState([])
const loadLicenses = async () => {
const deps = Object.entries(config.package.dependencies).reduce((acc, [name, version]) => {
acc.push({
name,
version,
})
return acc
}, [])
setLicenses(deps)
}
React.useEffect(() => {
loadLicenses()
}, [])
return <div className="tpd_list">
{licenses.map((license) => {
return <div className="item">
<h3>{license.name}</h3>
<p>{license.version}</p>
</div>
})}
</div>
}

9
packages/app/src/pages/licenses/index.less Normal file
View File

@ -0,0 +1,9 @@
.tpd_list {
display: inline-flex;
flex-direction: column;
overflow-y: scroll!important;
.item {
}
}

40
packages/app/src/pages/login/index.jsx
View File

@ -1,8 +1,9 @@
import React from 'react'
import config from "config"
import React from "react"
import * as antd from "antd"
import { FormGenerator } from 'components'
import { Icons } from 'components/Icons'
import { FormGenerator } from "components"
import { Icons } from "components/Icons"
import config from "config"
import "./index.less"
@ -13,7 +14,11 @@ const formInstance = [
component: "Input",
icon: "User",
placeholder: "Username",
props: null
props: {
autocorrect: "off",
autocapitalize: "none",
className: "login-form-username",
},
},
item: {
hasFeedback: true,
@ -23,7 +28,6 @@ const formInstance = [
message: 'Please input your Username!',
},
],
props: null
}
},
{
@ -59,22 +63,15 @@ const formInstance = [
}
}
},
{
id: "allowRegenerate",
withValidation: false,
element: {
component: "Checkbox",
props: {
children: "Not expire",
defaultChecked: false,
}
}
}
]
export default class Login extends React.Component {
static bindApp = ["sessionController"]
static pageStatement = {
bottomBarAllowed: false
}
handleFinish = async (values, ctx) => {
ctx.toogleValidation(true)
@ -111,11 +108,14 @@ export default class Login extends React.Component {
}
componentDidMount() {
if (window.app.SidebarController.isVisible()) {
const sidebarVisible = window.app.SidebarController.isVisible()
const headerVisible = window.app.HeaderController.isVisible()
if (sidebarVisible) {
window.app.SidebarController.toogleVisible(false)
}
if (window.app.HeaderController.isVisible()) {
if (headerVisible) {
window.app.HeaderController.toogleVisible(false)
}
}
@ -123,7 +123,7 @@ export default class Login extends React.Component {
render() {
return (
<div className="app_login">
{this.props.session?.valid && <div className="session_available">
{this.props.session && <div className="session_available">
<h3><Icons.AlertCircle /> You already have a valid session.</h3>
<div className="session_card">
@{this.props.session.username}

9
packages/app/src/pages/login/index.less
View File

@ -19,6 +19,15 @@
justify-content: center;
}
.login-form-username {
font-size: 20px!important;
input {
padding: 20px!important;
font-size: 20px!important;
}
}
.session_available {
width: fit-content;
height: fit-content;

52
packages/app/src/pages/main/index.jsx
View File

@ -1,14 +1,15 @@
import React from "react"
import * as antd from "antd"
import { AppSearcher, ServerStatus, Clock } from "components"
import { Icons } from "components/Icons"
import { AppSearcher, ServerStatus, Clock, } from "components"
import { Translation } from "react-i18next"
import "./index.less"
// TODO: Customizable main menu
export default class Main extends React.Component {
api = window.app.request
componentDidMount() {
componentDidMount = async () => {
if (!window.isMobile && window.app?.HeaderController?.isVisible()) {
window.app.HeaderController.toogleVisible(false)
}
@ -25,27 +26,32 @@ export default class Main extends React.Component {
return (
<div className="dashboard">
<div className="top">
<div className="header_title">
<div>
<antd.Avatar shape="square" src={user.avatar} size={window.isMobile ? undefined : 120} />
</div>
<div>
<div>
<Clock />
</div>
<div>
<h1>Welcome back, {user.fullName ?? user.username ?? "Guest"}</h1>
</div>
{!window.isMobile && <div>
<ServerStatus />
</div>}
</div>
<div className="header">
<div>
<antd.Avatar
shape="square"
src={user.avatar}
size={window.isMobile ? undefined : 120}
/>
</div>
<div>
<div>
<Clock />
</div>
<div>
<Translation>{
(t) => <h1>{t("main_welcome")} {user.fullName ?? user.username ?? "Guest"}</h1>
}</Translation>
</div>
{!window.isMobile && <div>
<ServerStatus />
</div>}
</div>
{!window.isMobile && <div>
<AppSearcher />
</div>}
</div>
{!window.isMobile && <div>
<AppSearcher />
</div>}
</div>
)
}

51
packages/app/src/pages/main/index.less
View File

@ -1,52 +1,51 @@
.dashboard {
padding: 20px;
width: 100%;
height: 100%;
h1 {
font-size: 28px;
margin: 0;
}
.top {
width: 100%;
> div {
margin-bottom: 20px;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
> div {
margin-right: 20px;
}
}
> div {
margin-bottom: 20px;
}
.content {
> div {
margin-left: 20px;
}
}
.assigned {
.quick_actions {
display: flex;
flex-wrap: wrap;
> div {
margin-left: 20px;
margin: 6px 10px;
}
}
.widgets {
display: flex;
flex-direction: column;
.widget {
//background-color: var(--background-color-accent);
//padding: 10px;
}
> div {
margin-bottom: 20px;
}
}
}
.header_title {
display: flex;
> div {
margin-right: 20px;
}
}
.quick_actions {
display: flex;
flex-wrap: wrap;
> div {
margin: 6px 10px;
}
}

49
packages/app/src/pages/streams/index.jsx
View File

@ -1,52 +1,55 @@
import React from 'react'
import axios from "axios"
import * as antd from "antd"
import { SelectableList } from "components"
// http://192.168.1.144:8080/live/srgooglo_ff.m3u8
const streamsApi = "http://media.ragestudio.net/api"
const bridge = axios.create({
baseURL: streamsApi,
auth: {
username: "admin",
password: "sharedpass1414"
}
})
import { SelectableList, ActionsBar } from "components"
export default class Streams extends React.Component {
state = {
list: {},
list: [],
}
api = window.app.request
componentDidMount = async () => {
await this.updateStreamsList()
}
updateStreamsList = async () => {
const streams = ((await bridge.get("/streams")).data).live
const streams = await this.api.get.streams().catch(error => {
console.error(error)
antd.message.error(error)
return false
})
this.setState({ list: streams })
}
componentDidMount = async () => {
this.updateStreamsList()
}
onClickItem = (item) => {
window.app.setLocation(`/streams/viewer?key=${item}`)
}
renderListItem = (key) => {
const streaming = this.state.list[key]
console.log(streaming)
return <div key={streaming.publisher.clientId} onClick={() => this.onClickItem(key)}>
<h1>@{streaming.publisher.stream} #{streaming.publisher.clientId}</h1>
renderListItem = (stream) => {
stream.StreamPath = stream.StreamPath.replace(/^\/live\//, "")
return <div key={stream.id} onClick={() => this.onClickItem(stream.StreamPath)}>
<h1>@{stream.StreamPath} #{stream.id}</h1>
</div>
}
render() {
return <div>
<h1>Streams</h1>
<ActionsBar mode="float">
<div>
<antd.Button onClick={this.updateStreamsList}>Refresh</antd.Button>
</div>
</ActionsBar>
<div>
<SelectableList
selectionEnabled={false}
renderItem={this.renderListItem}
items={Object.keys(this.state.list)}
items={this.state.list}
/>
</div>
</div>

3
packages/app/src/theme/fonts.css
View File

@ -7,4 +7,5 @@
@import url("https://fonts.googleapis.com/css?family=Manrope:300,400,500,600,700&display=swap&subset=latin-ext");
@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;1,300;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;1,300;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap');

Some files were not shown because too many files have changed in this diff Show More