multiple changes

This commit is contained in:
srgooglo 2020-10-22 18:50:58 +02:00
parent 030027b2a1
commit 20faeea409
12 changed files with 281 additions and 104 deletions

View File

@ -46,7 +46,11 @@ module.exports = {
{
name: 'public',
include: [/.*/]
}
},
{
name: 'splash',
include: [/\/splash/]
},
],
// Default Behaviors

View File

@ -28,7 +28,7 @@ const Card_Component = (props: Card_Component_props) => {
Card_Component.defaultProps = {
style: null,
type: null,
children: <h2>Empty</h2>
children: <h3>Empty</h3>
}
export default Card_Component

View File

@ -54,7 +54,7 @@ export default class ListedMenu extends React.Component{
const OptionTitle = () => {
if (this.state.renderOptionTitle) {
return <div>
<h2>{titlesArray[this.state.selectKey].icon || null}{titlesArray[this.state.selectKey].title || null}</h2>
<h3>{titlesArray[this.state.selectKey].icon || null}{titlesArray[this.state.selectKey].title || null}</h3>
</div>
}
return null
@ -103,9 +103,9 @@ export default class ListedMenu extends React.Component{
return (
<div style={this.props.wrapperStyle ?? null} className={classnames(styles.main, {[styles.horizontal]: isMode("horizontal") })}>
<div className={styles.menuList}>
<h2>
<h3>
{this.props.icon ?? null} {this.props.title ?? "Menu"}
</h2>
</h3>
<Menu
mode={this.state.mode}
selectedKeys={[selectKey]}

View File

@ -54,18 +54,6 @@ const contextMenuList = [
core.createScreenshotFromElement(document.getElementById(e.id))
}
}
},
{
key: "require_test",
title: "Require Test => DEV",
icon: <Icons.Cloud />,
params: {
onClick: (e) => {
console.log('Heeeey you developeeer')
},
keepOnClick: true,
require: "dev"
}
}
]

View File

@ -12,10 +12,11 @@ const stateCodes = {
export default class SocketConnection {
ioConn: any
state: { connAttemps: number; registeredNamespaces: any; connectionState: any; listeners: any; latency: any; }
state: { connAttemps: number; registeredNamespaces: any; connectionState: any; listeners: any; latency: any; namespace: any; }
props: any
opts: any
dispatcher: any;
namespaceConnector: (namespace: any) => void
constructor(props: any) {
if (!props) {
@ -25,6 +26,7 @@ export default class SocketConnection {
this.dispatcher = props.connector
this.state = {
namespace: "/",
latency: 0,
listeners: {},
connectionState: "init",
@ -34,6 +36,7 @@ export default class SocketConnection {
this.opts = {
hostname: "localhost:5000",
port: "5000",
reconnection: true,
reconnectionAttempts: Number(2),
reconnectionDelay: 1000,
@ -80,73 +83,23 @@ export default class SocketConnection {
this.createConnection().then((e) => {
this.ioConn.updateConnectionState(2)
this.setConnectionListeners()
})
this.ioConn.on('connect', (event: any) => {
notify.success("You are now online")
verbosity("Connected to socket", event)
this.ioConn.updateConnectionState(1)
props.then(true) // this send an signal when the socket its successfully connected
})
this.ioConn.on("connect_error", (event: any) => {
if (this.state.connectionState !== "connecting") {
this.ioConn.updateConnectionState(2)
}
if (this.state.connAttemps >= this.opts.reconnectionAttempts) {
verbosity(['Maximun nº of attemps reached => max', this.opts.reconnectionAttempts + 1])
this.ioConn.updateConnectionState(0)
return false
}
verbosity([`Strike [${this.state.connAttemps + 1}] / ${this.opts.reconnectionAttempts + 1} !`, event])
this.state.connAttemps = this.state.connAttemps + 1
})
this.ioConn.on('reconnect', (attemptNumber: number) => {
verbosity(["Connection reconected with (", attemptNumber, ") tries"])
notify.success("You are now online")
this.ioConn.updateConnectionState(1)
})
this.ioConn.on('disconnected', () => {
notify.warn("You are offline")
this.ioConn.updateConnectionState(3)
})
this.ioConn.on('connect_timeout', () => {
notify.warn("Connection timeout")
this.ioConn.updateConnectionState(3)
})
this.ioConn.on('close', () => {
verbosity("Connection closed!")
this.ioConn.updateConnectionState(0)
})
this.ioConn.on('error', (event: any) => {
notify.error(event)
})
this.ioConn.on('updateState', (event: any) => {
this.ioConn.updateState(event)
})
if (typeof (this.ioConn.io.opts.pingInterval) !== "undefined") {
if (typeof (this.ioConn.io.opts.pingInterval) == "number") {
setInterval(() => {
this.ioConn.emit('latency', Date.now(), (startTime) => {
const latency = Date.now() - startTime
this.ioConn.updateState({ latency })
})
}, this.ioConn.io.opts.pingInterval)
}
}
}
createConnection() {
createConnection(namespace) {
const getNamespace = () => {
console.log(this.opts.hostname)
if (typeof (namespace) !== "undefined") {
return namespace
}
return this.opts.hostname
}
return new Promise((resolve) => {
this.ioConn = io(this.opts.hostname, this.opts)
console.log(getNamespace())
this.ioConn = io(getNamespace(), this.opts)
this.ioConn.updateState = (payload) => {
this.state = { ...this.state, ...payload }
@ -202,4 +155,61 @@ export default class SocketConnection {
})
}
setConnectionListeners() {
this.ioConn.on('connect', (event: any) => {
notify.success("You are now online")
verbosity("Connected to socket", event)
this.ioConn.updateConnectionState(1)
})
this.ioConn.on("connect_error", (event: any) => {
if (this.state.connectionState !== "connecting") {
this.ioConn.updateConnectionState(2)
}
if (this.state.connAttemps >= this.opts.reconnectionAttempts) {
verbosity(['Maximun nº of attemps reached => max', this.opts.reconnectionAttempts + 1])
this.ioConn.updateConnectionState(0)
return false
}
verbosity([`Strike [${this.state.connAttemps + 1}] / ${this.opts.reconnectionAttempts + 1} !`, event])
this.state.connAttemps = this.state.connAttemps + 1
})
this.ioConn.on('reconnect', (attemptNumber: number) => {
verbosity(["Connection reconected with (", attemptNumber, ") tries"])
notify.success("You are now online")
this.ioConn.updateConnectionState(1)
})
this.ioConn.on('disconnect', (event) => {
verbosity([`Disconnected from socket >`, event])
notify.warn("You are offline")
this.ioConn.updateConnectionState(3)
})
this.ioConn.on('connect_timeout', () => {
notify.warn("Connection timeout")
this.ioConn.updateConnectionState(3)
})
this.ioConn.on('error', (event: any) => {
verbosity([`New error from socket >`, event])
})
this.ioConn.on('updateState', (event: any) => {
this.ioConn.updateState(event)
})
if (typeof (this.ioConn.io.opts.pingInterval) !== "undefined") {
if (typeof (this.ioConn.io.opts.pingInterval) == "number") {
setInterval(() => {
this.ioConn.emit('latency', Date.now(), (startTime) => {
const latency = Date.now() - startTime
this.ioConn.updateState({ latency })
})
}, this.ioConn.io.opts.pingInterval)
}
}
}
}

17
src/layouts/LoadLayout.js Normal file
View File

@ -0,0 +1,17 @@
import React from 'react'
import verbosity from 'core/libs/verbosity'
import handle from 'core/libs/errorhandler'
import { notify } from 'core/libs/appInterface'
import settings from 'core/libs/settings'
import endpoints from 'config/endpoints'
import { v3_model } from 'core/libs'
export default class LoadLayout extends React.Component{
render(){
return(
<div>
</div>
)
}
}

View File

@ -1,14 +1,9 @@
import React from 'react'
import store from 'store'
import {
PageTransition,
} from 'components'
import { enquireScreen, unenquireScreen } from 'enquire-js'
import classnames from 'classnames'
import * as antd from 'antd'
import * as Icons from 'components/Icons'
import styles from './PublicLayout.less'
@ -42,7 +37,6 @@ export default class PublicLayout extends React.Component {
render() {
const { children } = this.props
const { isMobile } = this.state
return (
<React.Fragment>
<antd.Layout>

View File

@ -129,9 +129,6 @@ export default {
},
*logout({ payload }, { call, put, select }) {
const uuid = yield select(state => state.app.session_uuid)

View File

@ -17,7 +17,8 @@ export default {
namespace: 'socket',
state: {
resolvers: null,
socket_address: "85.251.59.39:7000", //set by default
socket_address: "85.251.59.39", //set by default
socket_port: "7000",
ioConn: null,
listeners: {}
},
@ -35,11 +36,14 @@ export default {
},
*initializeSocket({ payload, then }, { select, put }) {
const state = yield select(state => state)
if (payload == null){
payload = {
hostname: state.socket.socket_address,
reconnectionAttempts: 10
}
let opt = {
hostname: `${state.socket.socket_address}:${state.socket.socket_port}`, // set stated data
port: state.socket.socket_port,
reconnectionAttempts: 10
}
if (typeof (payload) !== "undefined") {
opt = { ...opt, ...payload }
}
const handleThen = () => {
@ -51,9 +55,16 @@ export default {
yield put({
type: "handleSocket",
payload: new SocketConnection({ payload, connector: state.app.dispatcher, then: handleThen })
payload: new SocketConnection({ payload: opt, connector: state.app.dispatcher, then: handleThen })
})
},
*namespaceConnector({ namespace, then }, { select, put }) {
const state = yield select(state => state.socket)
const hostname = `${state.socket_address}:${state.socket_port}/${namespace}`
state.ioConn.disconnect()
yield put({ type: "initializeSocket", payload: { hostname } })
},
*break({ listener }, { select, put }) {
const state = yield select(state => state.socket)
state.ioConn.updateListener(listener, false)
@ -71,9 +82,8 @@ export default {
state.ioConn.emit('latency', Date.now(), (startTime) => {
const latency = Date.now() - startTime
console.log(latency)
verbosity(latency)
})
},
*floodTest({ ticks, offset }, { call, put, select }) {
const state = yield select(state => state)
@ -106,7 +116,7 @@ export default {
state.socket.ioConn._emit("floodTest", n)
tickSound.play()
}, n)
}else{
} else {
endSound.play()
}
})

View File

@ -1,24 +1,102 @@
import React from 'react'
import ReduxDebugger from 'debuggers/redux'
import * as antd from 'antd'
import { FloatComponent } from 'components'
import { connect } from 'umi'
import * as Icons from 'components/Icons'
import { __legacy__objectToArray } from 'core'
@connect((store) => (store))
export default class Index extends React.Component {
handleOpenFloat() {
FloatComponent({ children: <ReduxDebugger {...this.props} />, title: "redux debugger" })
}
handleDispatchNamespace(key) {
console.log(`Dispatching socket namespace (${key})`)
this.props.dispatch({
type: "socket/namespaceConnector",
namespace: key
})
}
render() {
const dispatch = this.props.dispatch
const { connectionState, socket_address, latency } = this.props.socket
const getListenersList = (data) => {
if (typeof (data) == "undefined" && data == null) {
return null
}
return (
__legacy__objectToArray(data).map(e => {
return (
<div key={e.key}>
<antd.Tag>{e.key} > <antd.Tag color={e.value ? "geekblue" : "orange"} >{e.value ? "Enabled" : "Disable"}</antd.Tag></antd.Tag>
</div>
)
})
)
}
const getNamespacesMonitor = (data) => {
if (typeof (data) == "undefined" && data == null) {
return null
}
return (
__legacy__objectToArray(data).map(e => {
return (
<div key={e.key} style={{ display: "flex", flexDirection: "column", justifyContent: "center", margin: "0 10px", width: "100%", height: "100%" }}>
<h4>{e.key}</h4>
<antd.Button onClick={() => { this.handleDispatchNamespace(e.key) }} > dispatch </antd.Button>
<antd.Button onClick={() => { dispatch({ type: "socket/toogleListener", listener: e.key }) }} > break </antd.Button>
</div>
)
})
)
}
return (
<div>
<button onClick={() => this.handleOpenFloat()}> open on float </button>
<ReduxDebugger />
<button onClick={() => dispatch({type: "socket/floodTest", ticks: 100 })}> start floodTest </button>
<button onClick={() => dispatch({type: "socket/toogleListener", listener: "floodTest" })}> break floodTest </button>
<button onClick={() => dispatch({type: "socket/break", listener: "floodTest" })}> fullbreak </button>
<antd.Card>
<h1><Icons.ClusterOutlined style={{ marginRight: "7px" }} /> Socket </h1>
<antd.Card>
<h3> State </h3>
<antd.Card>
<antd.Tag>{socket_address}</antd.Tag>
<antd.Tag color={connectionState == "connected" ? "green" : "volcano"} > {connectionState} </antd.Tag>
<antd.Tag color={latency > 60 ? "red" : "green"} > ~{latency}ms </antd.Tag>
</antd.Card>
</antd.Card>
<antd.Card>
<h3> Listener manager </h3>
<antd.Card>
{getListenersList(this.props.socket.listeners)}
</antd.Card>
</antd.Card>
<antd.Card>
<h3> Registered Namespaces </h3>
<antd.Card>
<div style={{ display: "flex", flexDirection: "row", backgroundColor: "#fefefe", overflow: "scroll", textAlign: "center" }}>
{getNamespacesMonitor(this.props.socket.registeredNamespaces)}
</div>
</antd.Card>
</antd.Card>
<antd.Card>
<h3> Misc </h3>
<antd.Card>
<antd.Button onClick={() => dispatch({ type: "socket/getLatency" })} > getLatency </antd.Button>
<antd.Button onClick={() => dispatch({ type: "socket/floodTest", ticks: 100 })} > start floodtest </antd.Button>
<antd.Button onClick={() => dispatch({ type: "socket/toogleListener", listener: "floodTest" })}> break floodTest </antd.Button>
<antd.Button onClick={() => dispatch({ type: "socket/break", listener: "floodTest" })}> fullbreak </antd.Button>
</antd.Card>
</antd.Card>
</antd.Card>
</div>
)
}
}
}

26
src/pages/splash/index.js Normal file
View File

@ -0,0 +1,26 @@
import React from 'react'
import * as antd from 'antd'
import { connect } from 'umi'
import './index.less'
@connect(({ app }) => ({ app }))
export default class AppSplash extends React.Component {
componentDidMount() {
setTimeout(() => {
document.querySelector(".js-logo").classList.remove("is-small")
}, 1200)
}
//c-logo__svg-item c-logo__svg-item--out
render() {
return (
<div className="c-logo js-logo is-small">
<svg className="c-logo__svg" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewBox="0 0 248.59 29.29">
<g>
<polygon className="c-logo__svg-item c-logo__svg-item--move" points="248.59 16.72 233.28 7.36 233.28 11.4 243.69 18.3 233.28 25.2 233.28 29.25 248.59 19.95 248.59 16.72" />
</g>
</svg>
</div>
)
}
}

View File

@ -0,0 +1,53 @@
.c-logo{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
&__svg{
width: 280px;
display: block;
max-width: 100%;
margin: 0px;
position: relative;
height: auto;
}
&__svg-item{
fill: #242424;
transition: all 0.3s ease-in-out 0s;
&--out{
transition: all 0.2s ease-in-out 0.2s;
opacity: 1;
visibility: visible;
.is-small &{
opacity: 0;
visibility: hidden;
transition-delay: 0s;
}
}
&--move{
transition: all 0.36s ease-in-out 0s;
.is-small &{
transform: translateX(-171px);
transition-delay: 0s;
}
}
}
}