pankosmia-rcl 0.0.1 → 0.0.2

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "pankosmia-rcl",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "private": false,
   "homepage": "/clients/core-client-rcl",
-  "main": "build/pankosmia-rcl.es.js",
+  "main": "src/rcl",
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",

package/src/App.jsx

@@ -0,0 +1,38 @@
+import { useEffect, useState, useCallback } from 'react';
+import { Box } from "@mui/material";
+import { InternetSwitchDemo } from './componentDemos';
+import DialogExampleDemo from './componentDemos/DialogExampleDemo';
+import Demos from './demoHelpers/Demos';
+import Demo from './demoHelpers/Demo';
+import DrawerDemo from './componentDemos/DrawerDemo';
+
+function App() {
+  const [maxWindowHeight, setMaxWindowHeight] = useState(window.innerHeight - 64);
+  const handleWindowResize = useCallback(event => {
+    setMaxWindowHeight(window.innerHeight - 64);
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener('resize', handleWindowResize);
+    return () => {
+      window.removeEventListener('resize', handleWindowResize);
+    };
+  }, [handleWindowResize]);
+
+  return <Box sx={{ maxHeight: maxWindowHeight }}>
+    <Demos>
+      <Demo title="InternetSwitch">
+        <InternetSwitchDemo />
+      </Demo>
+      <Demo title="Dialog">
+        <DialogExampleDemo />
+      </Demo>
+      <Demo title="Drawer">
+        <DrawerDemo />
+      </Demo>
+    </Demos>
+  </Box>
+
+}
+
+export default App;

package/src/componentDemos/DialogExampleDemo.jsx

@@ -0,0 +1,16 @@
+import { useState } from "react";
+import PanDialog from "../rcl/PanDialog";
+import { Button } from "@mui/material";
+
+export default function DialogExampleDemo() {
+    const [openDialog, setOpenDialog] = useState(null);
+    const contentOpenDialog = Boolean(openDialog)
+
+    return <>
+        <Button onClick={(event) => {
+            setOpenDialog(event.target)
+        }}> open dialog </Button>
+        <PanDialog open={contentOpenDialog} closeFn={() => setOpenDialog(false)} >test</PanDialog>
+    </>
+
+}

package/src/componentDemos/DrawerDemo.jsx

@@ -0,0 +1,72 @@
+import DrawerComponent from '../rcl/DrawerComponent';
+import {useContext, useState, useEffect, useRef} from "react";
+import {debugContext, getJson} from "pithekos-lib";
+
+
+function DrawerDemo() {
+
+    const {debugRef} = useContext(debugContext);
+    const [drawerIsOpen, setDrawerIsOpen] = useState(false);
+    const [menuItems, setMenuItems] = useState([]);
+    const [showAdvanced, setShowAdvanced] = useState(true);
+    const [drawerWidth, setDrawerWidth] = useState('auto');
+    const [widthLocked, setWidthLocked] = useState(false);
+    const measurementRef = useRef(null);
+
+    useEffect(() => {
+        let timeoutId;
+        if (drawerIsOpen && !widthLocked) {
+          timeoutId = setTimeout(() => {
+            if (measurementRef.current) {
+              const width = measurementRef.current.clientWidth;
+              
+              if (width > 0) {
+                setDrawerWidth(`${width}px`); 
+                setWidthLocked(true);
+              }
+            }
+          }, 50);
+          return () => clearTimeout(timeoutId);
+        }
+      }, [drawerIsOpen, widthLocked]);
+
+    useEffect(
+        () => {
+            const doFetch = async () => {
+                const fetched = await getJson("/list-clients", debugRef.current);
+                if (fetched.ok) {
+                    setMenuItems(
+                        fetched.json.filter(
+                            i => !i.exclude_from_menu && (debugRef.current || !i.requires.debug)
+                        )
+                    );
+                }
+            };
+            doFetch().then();
+        },
+        [debugRef.current]
+    );
+
+    const toggleDebug = (ev) => {
+        getJson(`/debug/${debugRef.current ? "disable" : "enable"}`)
+            .then(
+                () => {
+                    ev.stopPropagation();
+                    ev.preventDefault();
+                }
+            );
+    };
+
+    return <DrawerComponent
+            drawerIsOpen={drawerIsOpen}
+            setDrawerIsOpen={setDrawerIsOpen}
+            menuItems={menuItems}
+            toggleDebug={toggleDebug}
+            showAdvanced={showAdvanced}
+            setShowAdvanced={setShowAdvanced}
+            drawerWidth={drawerWidth}
+            measurementRef={measurementRef}
+        />
+}
+
+export default DrawerDemo;

package/src/componentDemos/InternetSwitchDemo.jsx

@@ -0,0 +1,34 @@
+import InternetSwitch from '../rcl/InternetSwitch';
+import {useContext, useState} from "react";
+import {debugContext, netContext, postEmptyJson} from "pithekos-lib";
+
+function InternetSwitchDemo() {
+
+    const [internetDialogOpen, setInternetDialogOpen] = useState(false);
+    const {enabledRef} = useContext(netContext);
+    const {debugRef} = useContext(debugContext);
+
+    const disableInternet = () => {
+        postEmptyJson('/net/disable', debugRef.current)
+    };
+
+    const enableInternet = () => {
+        postEmptyJson('/net/enable', debugRef.current)
+    };
+    const handleInternetToggleClick = () => {
+        if (!enabledRef.current) {
+            setInternetDialogOpen(true);
+        } else {
+            disableInternet();
+        }
+    };
+
+    return <InternetSwitch
+            enableInternet={enableInternet}
+            handleInternetToggleClick={handleInternetToggleClick}
+            internetDialogOpen={internetDialogOpen}
+            setInternetDialogOpen={setInternetDialogOpen}
+        />
+}
+
+export default InternetSwitchDemo;

package/src/componentDemos/index.js

@@ -0,0 +1,3 @@
+import InternetSwitchDemo from "./InternetSwitchDemo";
+
+export {InternetSwitchDemo};

package/src/demoHelpers/Demo.jsx

@@ -0,0 +1,10 @@
+import { Grid2 } from "@mui/material";
+
+export default function Demo({children,title}) {
+    
+    return <Grid2 size={12} item sx={{ p: 2 }}>
+        <h1>{title}</h1>
+        {children}
+    </Grid2>
+}
+

package/src/demoHelpers/Demos.jsx

@@ -0,0 +1,9 @@
+import { Grid2 } from "@mui/material";
+
+export default function Demos({children}) {
+    
+    return <Grid2 container spacing={2}>
+        {children}
+    </Grid2>
+}
+

package/src/index.css

@@ -0,0 +1,15 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  overflow: hidden;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

package/src/index.jsx

@@ -0,0 +1,15 @@
+import {createRoot} from "react-dom/client";
+import {SpSpa} from "pithekos-lib";
+import App from "./App";
+import './index.css';
+
+createRoot(document.getElementById("root"))
+    .render(
+        <SpSpa
+            requireNet={false}
+            titleKey="pages:core-client-rcl:title"
+            currentId="core-client-rcl"
+        >
+            <App/>
+        </SpSpa>
+    );

package/src/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

package/src/rcl/DrawerComponent.jsx

@@ -0,0 +1,128 @@
+import React, {useContext} from 'react';
+import {
+    Box,
+    Drawer,
+    Stack,
+    IconButton,
+    List,
+    ListItem,
+    ListItemButton, ListItemText,
+    Switch,
+    Collapse
+} from "@mui/material";
+import MenuIcon from "@mui/icons-material/Menu";
+import ExpandLess from '@mui/icons-material/ExpandLess';
+import ExpandMore from '@mui/icons-material/ExpandMore';
+
+import {i18nContext, netContext, debugContext, doI18n} from "pithekos-lib";
+
+
+export default function DrawerComponent({drawerIsOpen, setDrawerIsOpen, menuItems, toggleDebug, showAdvanced, setShowAdvanced, drawerWidth, measurementRef }) {
+
+    const {i18nRef} = useContext(i18nContext);
+    const {enabledRef} = useContext(netContext);
+    const {debugRef} = useContext(debugContext);
+
+    return (
+        <Box sx={{m: 0, mr: 2}}>
+            <IconButton onClick={e => setDrawerIsOpen(true)}>
+                <MenuIcon />
+            </IconButton>
+            <Drawer
+                open={drawerIsOpen} 
+                onClose={() => setDrawerIsOpen(false)} 
+                slotProps={{ paper: { sx: { width: drawerWidth, overflow: 'hidden' } } }}
+            >
+                <Box sx={{width: "100%", minHeight: '98vh', m: 0, p: 0}} role="presentation">                         
+                    <List sx={{ height: '100%', width: '100%' }}>
+                        <Stack
+                            direction="column"
+                            spacing={0}
+                            sx={{
+                                height: '100%',
+                                width: '100%',
+                                justifyContent: "space-between",
+                                alignItems: "flex-start",
+                            }}
+                        > 
+                            <Box sx={{width: '100%'}}>
+                                {
+                                    menuItems
+                                    .map(
+                                        (mi, n) => /* mi.id === currentId ?
+                                            <ListItem key={n} disablePadding onClick={() => setDrawerIsOpen(false)}>
+                                                <ListItemButton selected={true} >
+                                                    <ListItemText
+                                                        primary={doI18n(`pages:${mi.id}:title`, i18nRef.current)}/>
+                                                </ListItemButton>
+                                            </ListItem> : */
+                                            <ListItem key={n} disablePadding>
+                                                <ListItemButton
+                                                    disabled={mi.requires.net && !enabledRef.current}
+                                                    onClick={() => {
+                                                        window.location.href = mi.url
+                                                    }}
+                                                >
+                                                    <ListItemText
+                                                        primary={doI18n(`pages:${mi.id}:title`, i18nRef.current)}/>
+                                                </ListItemButton>
+                                            </ListItem>
+                                    )
+                                }
+                            </Box>
+                            <Box>
+                                <ListItem disablePadding >
+                                    <ListItemButton 
+                                        /* selected={currentId.includes("settings")}  */
+                                        onClick={ () => { window.location.href = "/clients/settings" }} 
+                                    >
+                                        <ListItemText primary={doI18n("pages:core-settings:title", i18nRef.current)}/>
+                                    </ListItemButton> 
+                                </ListItem>
+                                <ListItem sx={{width: drawerWidth}} disablePadding>
+                                    <ListItemButton onClick={() => setShowAdvanced(a => !a)}>
+                                        <ListItemText primary={doI18n(`components:header:advanced`, i18nRef.current)} />
+                                        {showAdvanced ? <ExpandLess /> : <ExpandMore />}
+                                    </ListItemButton>
+                                </ListItem>
+                                <Collapse in={showAdvanced} timeout="auto" unmountOnExit>
+                                    <List component="div" disablePadding>
+                                        <ListItemButton onClick={toggleDebug} sx={{ pl:4 }}>
+                                            <ListItemText primary={doI18n(`components:header:experimental_mode`, i18nRef.current)} />
+                                            <Switch
+                                                edge="end"
+                                                onChange={toggleDebug}
+                                                checked={debugRef.current}
+                                            />
+                                        </ListItemButton>
+                                    </List>
+                                </Collapse>
+                                <Box
+                                    ref={measurementRef}
+                                    sx={{
+                                        visibility: 'hidden', 
+                                        position: 'absolute', 
+                                        whiteSpace: 'nowrap',
+                                        top: 0,
+                                        left: 0,
+                                    }}
+                                >
+                                    <List component="div" disablePadding>
+                                        <ListItemButton onClick={toggleDebug} sx={{ pl:4 }}>
+                                            <ListItemText primary={doI18n(`components:header:experimental_mode`, i18nRef.current)} />
+                                            <Switch
+                                                edge="end"
+                                                onChange={toggleDebug}
+                                                checked={debugRef.current}
+                                            />
+                                        </ListItemButton>
+                                    </List>
+                                </Box>
+                            </Box>
+                        </Stack>
+                    </List>
+                </Box>
+            </Drawer>
+        </Box>
+    )
+}

package/src/rcl/InternetSwitch.jsx

@@ -0,0 +1,63 @@
+import React, {useContext} from 'react';
+import {
+    Box, Button,
+    Chip,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogContentText,
+    DialogTitle,
+    Typography
+} from "@mui/material";
+import AirplanemodeInactiveOutlinedIcon from '@mui/icons-material/AirplanemodeInactiveOutlined';
+import AirplanemodeActiveOutlinedIcon from '@mui/icons-material/AirplanemodeActiveOutlined';
+import {i18nContext, netContext, doI18n} from "pithekos-lib";
+
+
+export default function InternetSwitch({enableInternet, handleInternetToggleClick, internetDialogOpen, setInternetDialogOpen}) {
+
+    const {i18nRef} = useContext(i18nContext);
+    const {enabledRef} = useContext(netContext);
+
+    const handleClose = () => {
+        setInternetDialogOpen(false);
+    };
+
+    return (
+        <Box>
+            <Chip
+                icon={enabledRef.current ? <AirplanemodeInactiveOutlinedIcon /> : <AirplanemodeActiveOutlinedIcon />}
+                label={doI18n("components:header:offline_mode", i18nRef.current)}
+                onClick={handleInternetToggleClick}
+                color={enabledRef.current ? "appbar-chip-inactive" : "secondary"}
+                variant="Filled"
+            />
+            <Dialog
+                open={internetDialogOpen}
+                onClose={handleClose}
+                slotProps={{
+                    paper: {
+                        component: 'form',
+
+                    },
+                }}
+            >
+                <DialogTitle><b>{doI18n("components:header:internet_question_label", i18nRef.current)}</b></DialogTitle>
+                <DialogContent>
+                    <DialogContentText>
+                        <Typography>
+                            {doI18n("components:header:internet_question", i18nRef.current)}tra la la
+                        </Typography>
+                    </DialogContentText>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={handleClose}>{doI18n("components:header:cancel", i18nRef.current)}</Button>
+                    <Button onClick={() => {
+                        enableInternet();
+                        handleClose();
+                    }}>{doI18n("components:header:accept", i18nRef.current)}</Button>
+                </DialogActions>
+            </Dialog>
+        </Box>
+    )
+}

package/src/rcl/PanDialog.jsx

@@ -0,0 +1,31 @@
+import { AppBar, Dialog, Toolbar, Typography } from "@mui/material";
+import { i18nContext, doI18n } from "pithekos-lib";
+import { useContext } from "react";
+import PanDialogActions from "./PanDialogActions";
+import PanDialogContent from "./PanDialogContent";
+
+export default function PanDialog({ open, closeFn,children,createButtonDisabled=false }) {
+    const { i18nRef } = useContext(i18nContext);
+    return <Dialog
+        open={open}
+        onClose={closeFn}
+        slotProps={{
+            paper: {
+                component: 'form',
+            },
+        }}
+    >
+        <AppBar color='secondary' sx={{ position: 'relative', borderTopLeftRadius: 4, borderTopRightRadius: 4 }}>
+            <Toolbar>
+                <Typography variant="h6" component="div">
+                    {doI18n("pages:content:restore_content", i18nRef.current)}
+                </Typography>
+
+            </Toolbar>
+        </AppBar>
+        <PanDialogContent>
+            {children}
+        </PanDialogContent>
+        <PanDialogActions closeFn={closeFn} createButtonDisabled={createButtonDisabled} />
+    </Dialog>;
+}

package/src/rcl/PanDialogActions.jsx

@@ -0,0 +1,11 @@
+import { DialogActions } from "@mui/material";
+import PanDialogButton from "./PanDialogButton";
+
+export default function PanDialogActions ({closeFn,createButtonDisabled}) {
+    return <>
+        <DialogActions>
+           <PanDialogButton closeFn={closeFn} createButtonDisabled={createButtonDisabled}/>
+        </DialogActions>
+    </>
+
+}

package/src/rcl/PanDialogButton.jsx

@@ -0,0 +1,20 @@
+import { Button } from "@mui/material";
+import { i18nContext, doI18n } from "pithekos-lib";
+import { useContext } from "react";
+
+export default function PanDialogButton ({closeFn,createButtonDisabled}) {
+    const { i18nRef } = useContext(i18nContext);
+    return <>
+        <Button onClick={closeFn}>
+            {doI18n("pages:content:cancel", i18nRef.current)}
+        </Button>
+        <Button
+            variant='contained'
+            color="primary"
+            onClick={() => {
+                closeFn();
+            }}
+            disabled={createButtonDisabled}
+        >{doI18n("pages:content:accept", i18nRef.current)}</Button>
+    </>
+}

package/src/rcl/PanDialogContent.jsx

@@ -0,0 +1,13 @@
+import { DialogContent, DialogContentText, Typography } from "@mui/material";
+import { i18nContext, doI18n } from "pithekos-lib";
+import { useContext } from "react";
+export default function PanDialogContent({children}) {
+    const { i18nRef } = useContext(i18nContext);
+    return <>
+        <DialogContent>
+            <DialogContentText>
+                {children}
+            </DialogContentText>
+        </DialogContent>
+    </>
+}

package/src/rcl/PanDialogDefault.jsx

@@ -0,0 +1,16 @@
+import { AppBar, Dialog, Toolbar, Typography } from "@mui/material";
+import { i18nContext, doI18n } from "pithekos-lib";
+import { useContext } from "react";
+import PanDialogActions from "./PanDialogActions";
+import PanDialogContent from "./PanDialogContent";
+import PanDialog from "./PanDialog";
+
+export default function PanDialogDefault({ open, closeFn,children,createButtonDisabled=false }) {
+    
+    return <PanDialog>
+        <PanDialogContent>
+            {children}
+        </PanDialogContent>
+        <PanDialogActions closeFn={closeFn} createButtonDisabled={createButtonDisabled} />
+    </PanDialog>;
+}

package/src/rcl/index.js

@@ -0,0 +1,11 @@
+import InternetSwitch from './InternetSwitch';
+import PanDialog from './PanDialog';
+import DrawerComponent from "./DrawerComponent";
+
+const exports = {
+    InternetSwitch,
+    PanDialog,
+    DrawerComponent
+};
+
+export default exports;