def AddCustomerVu(props):
# enqueueSnackbar, closeSnackbar = useSnackbar()
def onAdd(event):
success = props['onClick'](event)
if success:
props.enqueueSnackbar('Successfully added the customer!',
{'variant': 'success'})
else:
props.enqueueSnackbar('There was a problem adding the customer!',
{'variant': 'error'})
return el(
'form',
None,
el(
'div',
None,
el(
TextField, {
'label': "First Name",
'type': 'text',
'name': 'fname',
'value': props['fname'],
'onChange': props['onChange']
}),
),
el(
'div',
None,
el(
TextField, {
'label': "Last Name",
'type': 'text',
'name': 'lname',
'value': props['lname'],
'onChange': props['onChange']
}),
),
el(
'div',
None,
el(
TextField, {
'label': "Amount",
'type': 'number',
'name': 'amount',
'value': props['amount'],
'onChange': props['onChange']
}),
),
el(Box, {
'display': 'flex',
'justifyContent': 'center'
}, el(Button, {'onClick': onAdd}, "Add Customer")),
)
def Link(props):
"""Internal SPA link with browser history"""
def onClick(event):
event.preventDefault()
spaRedirect(props['to'])
def onClickAlt(event):
event.preventDefault()
props['onClick']()
if props['onClick']:
return el(MuiLink, {
'href': props['to'],
'onClick': onClickAlt
}, props['children'])
else:
return el(MuiLink, {
'href': props['to'],
'onClick': onClick
}, props['children'])
def LandingPageMenu(props):
mainMenu = props['mainMenu']
mainMenuClose = props['mainMenuClose']
aboutModalOpen = props['aboutModalOpen']
ctx = useContext(UserCtx)
logout = ctx['logout']
isLoggedIn = ctx['isLoggedIn']
def handleAbout():
mainMenuClose()
aboutModalOpen()
def handleLogout():
mainMenuClose()
logout()
return el(
Fragment,
None,
el(
Menu,
{
'id': 'main-menu',
'anchorEl': mainMenu,
'keepMounted': True,
'open': bool(mainMenu),
'onClose': mainMenuClose,
},
el(MenuItem, {'onClick': handleAbout}, "About"),
el(MenuItem, {
'onClick': handleLogout,
'disabled': not isLoggedIn
}, "Logout"),
),
)
def About(props):
modalState = props['modalState']
onClose = props['onClose']
return el(Modal, {'isOpen': modalState,
'onRequestClose': onClose,
'style': modalStyles,
'ariaHideApp': False,
},
el(Flexbox, {'justifyContent': 'space-between',
'alignItems': 'center'
},
el(Typography, {'variant': 'h6', 'color': 'primary'}, "About"),
el(IconButton, {'edge': 'end',
'color': 'primary',
'onClick': onClose
}, el(CloseIcon, None)
),
),
el(Paper, {'style': {'padding': '1rem'}},
el(FlexboxCenter, {'maxWidth': '400px'},
el('img', {'src': applogo, 'width': '80%'})
),
),
el(Paper, {'style': {'padding': '0.5rem', 'marginTop': '1rem'}},
el(FlexboxCenter, None,
el(Typography, {'variant': 'h5'}, appname)
),
el(Divider, {'style': {'marginTop': '0.5rem',
'marginBottom': '0.5rem'}
}
),
el(FlexboxCenter, None,
el(Typography, {'variant': 'h5'}, f"Version: {version}")
),
)
)
def LandingPage(props):
params = dict(props['params'])
pathname = props['pathname']
show_login = params.get('login', 'hide') == 'show'
uCtx = useContext(UserCtx)
isLoggedIn = uCtx['isLoggedIn']
login = uCtx['login']
mainMenu, setMainMenu = useState(None)
aboutShow, setAboutShow = useState(False)
loginModal, setLoginModal = useState(False)
username, setUsername = useState("")
password, setPassword = useState("")
snack = useSnackbar()
def doLogin():
def _login():
login(username)
snack.enqueueSnackbar("Login succeeded!", {'variant': 'success'})
spaRedirect(redir)
def _loginFailed():
setLoginModal(True)
snack.enqueueSnackbar("Login failed, please try again",
{'variant': 'error'}
)
redir = params.get('redir', f"{pathname}{buildParams(params)}")
fetch("/api/login", _login,
data={'username': username, 'password': password},
method='POST',
onError=_loginFailed
)
setLoginModal(False)
def clearUser():
if loginModal:
setUsername("")
setPassword("")
def mainMenuOpen(event):
setMainMenu(event['currentTarget'])
def mainMenuClose():
setMainMenu(None)
def aboutModalOpen():
setAboutShow(True)
useEffect(lambda: setLoginModal(show_login), [show_login])
useEffect(clearUser, [loginModal])
return el(Container, {'maxWidth': 'md'},
el(Paper, {'style': {'padding': '1rem'}},
el(Flexbox, {'alignItems': 'center'},
el(IconButton, {'edge': 'start',
'color': 'inherit',
'onClick': mainMenuOpen
}, el(MenuIcon, None)
),
el(Typography, {'variant': 'h5'}, appname)
)
),
el(LandingPageMenu, {'mainMenu': mainMenu,
'mainMenuClose': mainMenuClose,
'aboutModalOpen': aboutModalOpen}
),
el(Paper, {'style': {'padding': '0.5rem',
'marginTop': '1rem'}
},
el(FlexboxCenter, None,
el(Typography, {'variant': 'h5'},
el(Link, {'to': '#', 'onClick': aboutModalOpen}, "About")
),
),
el(FlexboxCenter, None,
el(Typography, {'variant': 'h5'},
el(Link, {'to': '#',
'onClick': lambda: setLoginModal(True)
}, "Login")
) if not isLoggedIn else None
),
),
el(Login, {'onClose': lambda: setLoginModal(False),
'onLogin': doLogin,
'password': password,
'username': username,
'setUsername': lambda usr: setUsername(usr),
'setPassword': lambda pwd: setPassword(pwd),
'modalState': loginModal,
}
),
el(About, {'onClose': lambda: setAboutShow(False),
'modalState': aboutShow}
),
)
def App(props):
title = props['title']
pathname = props['pathname']
user, setUser = useState("")
setTitle(title)
router = {
'/': LandingPage,
}
route_is_valid = pathname in router
isLoggedIn = len(user) > 0
def login(username):
setUser(username)
def logout():
setUser("")
fetch('/api/logout', lambda: spaRedirect('/'))
def validateSession():
def validated():
def _setuser(data):
login(data['user'])
if not isLoggedIn:
fetch('/api/whoami',
_setuser,
onError=console.error,
redirect=False)
def notValidated(error):
if len(user) > 0:
setUser("")
if route_is_valid:
fetch('/api/ping', validated, onError=notValidated, redirect=False)
user_ctx = {
'user': user,
'login': login,
'logout': logout,
'isLoggedIn': isLoggedIn
}
useEffect(validateSession, [])
useEffect(lambda: ReactGA.pageview(pathname), [pathname])
if route_is_valid:
return el(
ThemeProvider, {'theme': theme},
el(
SnackbarProvider, {'maxSnack': 3},
el(UserCtx.Provider, {'value': user_ctx},
el(router[pathname], props))))
else:
console.error(f"ERROR - Bad pathname for route: {props['pathname']}")
return el('div', None, el('h1', None, "Page Not Found"),
el('p', None, f"Bad pathname: {props['pathname']}"),
el('div', None, el('a', {'href': "/"}, "Back to Home")))
def Login(props):
onClose = props['onClose']
onLogin = props['onLogin']
username = props['username']
password = props['password']
setUsername = props['setUsername']
setPassword = props['setPassword']
modalState = props['modalState']
def login(event):
event.preventDefault()
onLogin()
def handleUsernameChange(event):
target = event['target']
setUsername(target['value'])
def handlePasswordChange(event):
target = event['target']
setPassword(target['value'])
return el(
Modal, {
'isOpen': modalState,
'onRequestClose': onClose,
'style': modalStyles,
'ariaHideApp': False,
},
el(
FlexboxCenter, {'maxWidth': '300px'},
el(
Box, None,
el(
Flexbox, {
'justifyContent': 'space-between',
'alignItems': 'center'
},
el(Typography, {
'variant': 'h6',
'width': '40%',
'color': 'primary'
}, appname),
el(IconButton, {
'edge': 'end',
'color': 'primary',
'onClick': onClose
}, el(CloseIcon, None))),
el(
Paper, {
'elevation': 2,
'style': {
'padding': '1rem'
}
},
el(
'form',
{'onSubmit': login},
el(
TextField, {
'label': 'Login Name',
'variant': 'outlined',
'fullWidth': True,
'value': username,
'onChange': handleUsernameChange,
'autoFocus': True,
'placeholder': "admin"
}),
el(
TextField, {
'label': 'Password',
'variant': 'outlined',
'fullWidth': True,
'type': 'password',
'value': password,
'onChange': handlePasswordChange,
'placeholder': "123"
}),
el(
Button, {
'type': 'submit',
'fullWidth': True,
'style': {
'minWidth': '10rem',
'marginRight': '1rem',
'marginTop': '1rem'
},
}, "Login"),
)))))