feat: implementts add widget

Author: raduwen

src/components/IFrameWidget/editor.tsx

@@ -195,6 +195,14 @@ class IFrameWidgetEditor extends Component<Props, IFrameWidgetProps> {
       </div>
     );
   }
+
+  public static defaultProps: IFrameWidgetProps = {
+    url: "",
+    retry_time: 10,
+    retry_count: 3,
+    width: 640,
+    height: 480,
+  };
 }
 
 export { IFrameWidgetEditor };

src/components/TextWidget/editor.tsx

@@ -41,17 +41,18 @@ class Color {
   }
 
   // from #rrggbb
-  static fromRGBCode(rgb: string): Color {
-    return new Color(
+  static fromRGBCode?(rgb: string): Color {
+    return rgb ? new Color(
       parseInt(rgb.substr(1,2), 16),
       parseInt(rgb.substr(3,2), 16),
       parseInt(rgb.substr(5,2), 16),
       1,
-    );
+    ) : new Color(0, 0, 0, 1);
   }
 
   // from rgba(r,g,b,a)
-  static fromRGBA(rgba: string): Color {
+  static fromRGBA(rgba?: string): Color {
+    if (!rgba) return new Color(0, 0, 0, 1);
     const match = rgba.match(/rgba\((\d+),(\d+),(\d+),(\d(\.\d+)?)\)/);
     return new Color(
       parseInt(match[1]),
@@ -342,6 +343,12 @@ class TextWidgetEditor extends Component<Props, TextWidgetProps> {
       </div>
     );
   }
+
+  public static defaultProps: TextWidgetProps = {
+    text: "",
+    hidden: false,
+    autoHidden: true,
+  }
 }
 
 export { TextWidgetEditor };

src/components/TimeWidget/editor.tsx

@@ -89,6 +89,11 @@ class TimeWidgetEditor extends Component<Props, TimeWidgetProps> {
       </div>
     );
   }
+
+  public static defaultProps: TimeWidgetProps = {
+    size: 24,
+    hidden: false,
+  };
 }
 
 export { TimeWidgetEditor };

src/pages/admin/index.tsx

@@ -1,16 +1,32 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, MouseEvent } from 'react';
+import styled from 'styled-components';
 import {
   CssBaseline,
   Container,
   Box,
   AppBar,
   Toolbar,
+  Menu,
+  MenuItem,
   Typography,
   Button,
+  IconButton,
+  FormControl,
+  InputLabel,
+  TextField,
+  Select,
+  Backdrop,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Fade,
 } from '@mui/material';
 import { makeStyles } from '@mui/styles'
+import AddIcon from '@mui/icons-material/Add';
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
 import { User } from '@firebase/auth';
-import { ref, onValue, DataSnapshot } from '@firebase/database';
+import { ref, set, onValue, DataSnapshot } from '@firebase/database';
 
 import { AuthProvider } from '@/lib/AuthProvider';
 import { auth, db } from '@/lib/firebase';
@@ -72,11 +88,86 @@ const Widgets = () => {
       }
     </div>
   );
-}
+};
+
+const AddWidgetModel = ({ open, onClose }: { open: boolean, onClose: () => void }) => {
+  const [widgetId, setWidgetId] = useState("");
+  const [widgetType, setWidgetType] = useState("text");
+
+  const FormGroup = styled.div`
+    display: flex;
+    margin-bottom: 1rem;
+    & > div {
+      flex-grow: 1;
+      margin-left: 0.25rem;
+    }
+  `;
+
+  const style = {
+    display: 'flex',
+    flexDirection: 'column',
+    position: 'absolute' as 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: 640,
+    bgcolor: 'background.paper',
+    border: '1px solid #ddd',
+    borderRadius: '4px',
+    boxShadow: 24,
+    pt: 4,
+    px: 4,
+    pb: 3,
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+    >
+      <DialogTitle>Add Widget</DialogTitle>
+      <DialogContent>
+        <FormGroup>
+          <FormControl variant="standard">
+            <TextField autoFocus fullWidth label="ID" value={widgetId} variant="standard" onChange={(e) => { setWidgetId(e.target.value); }}/>
+          </FormControl>
+        </FormGroup>
+
+        <FormGroup>
+          <FormControl variant="standard">
+            <InputLabel id="widget-type-label">Widget</InputLabel>
+            <Select
+              labelId="widget-type-label"
+              id="widget-type"
+              value={widgetType}
+              label="Widget"
+              onChange={(e) => { setWidgetType(e.target.value); }}
+            >
+              <MenuItem value={"text"}>Text</MenuItem>
+              <MenuItem value={"time"}>Time</MenuItem>
+              <MenuItem value={"iframe"}>IFrame</MenuItem>
+            </Select>
+          </FormControl>
+        </FormGroup>
+      </DialogContent>
+      <DialogActions>
+        <Button color="primary" variant="contained" onClick={() => {
+          set(ref(db, `/widgets/${widgetId}`), {
+            name: widgetType,
+            props: Editors[widgetType].defaultProps
+          });
+        }}>Add</Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
 
 const AdminIndexPage = () => {
   const classes = useStyles();
   const [currentUser, setCurrentUser] = useState<User | null>(null);
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+  const [addWidgetModalOpened, setAddWidgetModalOpened] = useState(false);
+  const isUserMenuOpen = Boolean(anchorEl);
 
   useEffect(() => {
     auth.onAuthStateChanged((user) => {
@@ -85,13 +176,22 @@ const AdminIndexPage = () => {
   });
 
   const signout = async () => {
+    setAnchorEl(null);
     try {
       await auth.signOut();
     } catch (err) {
       alert(err.message);
     }
   };
 
+  const userMenuId = 'user-menu';
+  const handleUserMenuOpen = (event: MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleUserMenuClose = () => {
+    setAnchorEl(null);
+  };
+
   return currentUser !== null ? (
     <AuthProvider>
       <CssBaseline />
@@ -101,12 +201,42 @@ const AdminIndexPage = () => {
             <Typography variant="h6" className={classes.title}>
               Admin
             </Typography>
-            <Typography>{currentUser.email}</Typography>
-            <Button color="inherit" onClick={signout}>
-              Logout
-            </Button>
+            <Box sx={{ flexGrow: 1 }} />
+            <Box sx={{ display: { xs: 'none', md: 'flex' } }}>
+              <IconButton
+                size="large"
+                color="inherit"
+                onClick={()=>{setAddWidgetModalOpened(true);}}
+              >
+                <AddIcon />
+              </IconButton>
+              <IconButton
+                size="large"
+                color="inherit"
+                edge="end"
+                aria-controls={userMenuId}
+                aria-haspopup="true"
+                onClick={handleUserMenuOpen}
+               >
+                <AccountCircleIcon />
+              </IconButton>
+            </Box>
           </Toolbar>
         </AppBar>
+        <Menu
+          id={userMenuId}
+          anchorEl={anchorEl}
+          open={isUserMenuOpen}
+          onClose={handleUserMenuClose}
+        >
+          <MenuItem color="inherit" onClick={signout}>Logout</MenuItem>
+        </Menu>
+        <AddWidgetModel
+          open={addWidgetModalOpened}
+          onClose={() => {
+            setAddWidgetModalOpened(false);
+          }}
+        />
 
         <Container className={classes.content}>
           <Box my={4}>