Started creating introduction screen

2020-08-26 20:02:46 +02:00
parent f61f59981c
commit 0fc9c78385
8 changed files with 380 additions and 21 deletions
@@ -0,0 +1,217 @@
+import React, { useEffect, useState } from 'react';
+import { useTheme } from '@material-ui/core/styles';
+
+import Grid from '@material-ui/core/Grid';
+import Card from '@material-ui/core/Card';
+import CardActionArea from '@material-ui/core/CardActionArea';
+import CardContent from '@material-ui/core/CardContent';
+import CardHeader from '@material-ui/core/CardHeader';
+import Typography from '@material-ui/core/Typography';
+import Button from '@material-ui/core/Button';
+
+const Workflows = (props) => {
+  const { globalUrl, isLoggedIn, isLoaded, } = props
+	const theme = useTheme();
+	const [curView, setCurView] = useState(0);
+	const [firstrequest, setFirstrequest] = useState(true)
+	const [selectedItems, setSelectedItems] = useState([])
+
+	const viewdata1 = [
+		{
+			"title": "General",
+			"content": "Learn about our ticketing solutions",
+			"subitems": [
+				{
+					"name": "Search",
+					"subtitle": "Search for anything, anywhere",
+				},
+				{
+					"name": "Message",
+					"subtitle": "Read and send messages",
+				},
+				{
+					"name": "Parse emails",
+					"subtitle": "what",
+				},
+			],
+		},
+		{
+			"title": "Ticketing",
+			"subitems": [
+				{
+					"name": "Search",
+					"subtitle": "Search for anything, anywhere",
+				},
+				{
+					"name": "Message",
+					"subtitle": "Read and send messages",
+				},
+				{
+					"name": "Parse emails",
+					"subtitle": "what",
+				},
+			],
+		},
+		{
+			"title": "Threat intel",
+			"subitems": [
+				{
+					"name": "Search",
+					"subtitle": "Search for anything, anywhere",
+				},
+				{
+					"name": "Message",
+					"subtitle": "Read and send messages",
+				},
+				{
+					"name": "Parse emails",
+					"subtitle": "what",
+				},
+			],
+		},
+	]
+
+	if (firstrequest) {
+		setFirstrequest(false)
+		if (props.match.params.key) {
+			console.log("PROPS: ", props.match.params.key)
+			const viewitem = viewdata1.find(item => item.title.toLowerCase() === props.match.params.key.toLowerCase())
+			if (viewitem !== undefined && viewitem !== null) {
+				setCurView(1)
+				//setSelectedItem(viewitem)
+			}
+		}
+	}
+
+	
+
+	const cardContentStyle = {
+		height: "100%", 
+		width: "100%", 
+		padding: 40,
+	}
+
+	const outerGridView = {
+		width: "100%",
+		marginTop: 15,
+	}
+
+	const paperStyle = {
+			height: 300, 
+			color: "white",
+			backgroundColor: theme.palette.surfaceColor,
+			color: "white",
+			cursor: "pointer",
+			display: "flex",
+			textAlign: "center",
+	}
+
+	const HandleSelection = (data) => {
+		const [selected, setSelected] = useState(false);
+
+		var baseStyle = JSON.parse(JSON.stringify(paperStyle))
+		if (selected) {
+			baseStyle.backgroundColor = "white"
+			baseStyle.color = "black"
+		}
+
+		return (
+			<Grid item xs={4} onClick={() => {
+				console.log(selectedItems)
+				if (selected) {
+					const index = selectedItems.findIndex(item => item.title === data.title)
+					if (index >= 0) {
+						selectedItems.splice(index, 1)
+						setSelectedItems(selectedItems)
+					}
+				} else {
+					selectedItems.push(data)
+					setSelectedItems(selectedItems)
+				}
+
+				setSelected(!selected)
+				
+				//setCurView(1)
+				//setSelectedItem(data)
+				//window.location.pathname += "/"+data.title.toLowerCase()
+			}}>
+				<Card style={baseStyle}>
+					<CardActionArea style={cardContentStyle}>	
+						<CardContent>	
+							<Typography variant="h4">
+								{data.title}
+							</Typography>
+						</CardContent>	
+					</CardActionArea>	
+				</Card>
+			</Grid>
+		)
+	}
+
+	const view1 = curView === 0 ? 
+		<div>
+			<Typography variant="h4">
+				What are you interested in?	
+			</Typography>
+			<Grid container style={outerGridView} spacing={3}>
+				{viewdata1.map(data => {
+					return (
+						HandleSelection(data)	
+					)
+				})}
+			</Grid>
+			{/*
+			<Button variant="contained" color="primary" style={{height: 50, width: 300, margin: "auto",}} onClick={() => {
+				setCurView(1)
+			}}>
+				Continue
+			</Button>
+			*/}
+		</div>
+	: null
+
+	const view2 = curView === 1 ? 
+		<div>
+			<Typography variant="h4">
+				Step 2.
+			</Typography>
+			{/*
+			<Grid container style={outerGridView} spacing={3}>
+				{selectedItem.subitems === undefined ? null : 
+					selectedItem.subitems.map(data => {
+					return (
+						<Grid item xs={4}>
+							<Card style={paperStyle}>
+								<CardActionArea style={cardContentStyle}>	
+									<CardContent>	
+										<Typography variant="h4">
+											{data.name}
+										</Typography>
+										<Typography variant="body1" style={{marginTop: 10}}>
+											{data.subtitle}
+										</Typography>
+									</CardContent>	
+								</CardActionArea>	
+							</Card>
+						</Grid>
+					)
+				})}
+			</Grid>
+			*/}
+		</div>
+	: null
+
+	const baseView = 
+		<div style={{maxWidth: 1024, margin: "auto", paddingTop: 50,}}>
+			{view1}
+			{view2}
+		</div>
+
+	return (
+		<div>
+			{baseView}
+		</div>
+	)
+}
+
+export default Workflows