Added many new usecases and and a way to show vid os within workflows

2022-05-26 01:03:08 +02:00
parent 0b71fbf232
commit 9e3e86f1b0
7 changed files with 234 additions and 58 deletions
@@ -349,6 +349,7 @@ const AngularWorkflow = (defaultprops) => {
  const [executionModalView, setExecutionModalView] = React.useState(0);
  const [executionData, setExecutionData] = React.useState({});
  const [appsLoaded, setAppsLoaded] = React.useState(false);
+  const [showVideo, setShowVideo] = React.useState("");

  const [lastSaved, setLastSaved] = React.useState(true);

@@ -1851,6 +1852,9 @@ const AngularWorkflow = (defaultprops) => {
 			}
 		}

+		// Unselecting all
+		//cy.elements().unselect()
+
 		//if (nodedata.app_name === undefined && nodedata.source === undefined) {
 		//  return;
 		//}
@@ -5882,6 +5886,7 @@ const AngularWorkflow = (defaultprops) => {

  const getNextActionName = (appName) => {
    var highest = "";
+
    const allitems = workflow.actions.concat(workflow.triggers);
    for (var key in allitems) {
      const item = allitems[key];
@@ -5900,6 +5905,8 @@ const AngularWorkflow = (defaultprops) => {
      }
    }

+		appName = appName.replaceAll(" ", "_")
+
    if (highest) {
      return appName + "_" + (parseInt(highest) + 1);
    } else {
@@ -5923,11 +5930,8 @@ const AngularWorkflow = (defaultprops) => {

 		if (workflow.actions !== undefined && workflow.actions !== null) {
 			const foundInfo = workflow.actions.find(ac => ac.id === selectedAction.id)
-			console.log("aigo: ", foundInfo)
 		}

-		console.log("PRe: ", selectedAction)
-
    // Does this one find the wrong one?
    //var newSelectedAction = JSON.parse(JSON.stringify(selectedAction))
    var newSelectedAction = selectedAction
@@ -5940,7 +5944,6 @@ const AngularWorkflow = (defaultprops) => {

 		// Simmple action swap autocompleter
 		if (selectedAction.parameters !== undefined && newSelectedAction.parameters !== undefined && selectedAction.id === newSelectedAction.id) {
-			console.log("OLD: ", selectedAction, "NEW: ", newSelectedAction)
 			for (var paramkey in selectedAction.parameters) {
 				const param = selectedAction.parameters[paramkey];

@@ -5981,14 +5984,12 @@ const AngularWorkflow = (defaultprops) => {
        newSelectedAction.fillGradient.length > 0
      ) {
        newSelectedAction.fillstyle = "linear-gradient";
-        console.log("GRADIENT!: ", newSelectedAction);
      } else {
        newSelectedAction.iconBackground = iconInfo.iconBackgroundColor;
      }

      const foundnode = cy.getElementById(newSelectedAction.id);
      if (foundnode !== null && foundnode !== undefined) {
-        console.log("UPDATING NODE!");
        foundnode.data(newSelectedAction);
      }
    }
@@ -10890,6 +10891,7 @@ const AngularWorkflow = (defaultprops) => {

 			defaultReturn = <ParsedAction
 				id="rightside_subactions"
+				setShowVideo={setShowVideo}
 				isCloud={isCloud}
 				getParents={getParents}
 				actionDelayChange={actionDelayChange}
@@ -11152,7 +11154,7 @@ const AngularWorkflow = (defaultprops) => {
 								frameBorder={false}
 								webkitallowFullscreen={true}
 								mozallowFullscreen={true}
-								allowFullscreen={true}
+								allowFullScreen={true}
 								style={{
 									"top": 0, 
 									"left": 0,
@@ -11170,7 +11172,7 @@ const AngularWorkflow = (defaultprops) => {
 									frameBorder={false}
 									webkitallowFullscreen={true}
 									mozallowFullscreen={true}
-									allowFullscreen={true}
+									allowFullScreen={true}
 									style={{
 										"top": 0, 
 										"left": 0,
@@ -13883,6 +13885,39 @@ const parsedExecutionArgument = () => {
        {codePopoutModal}
        {configureWorkflowModal}
 				{editWorkflowModal}
+
+				{showVideo !== undefined && showVideo.length > 0 ? 
+					<div style={{borderRadius: theme.palette.borderRadius, zIndex: 12501, position: "fixed", left: 40, bottom: 150, width: 300,}}>
+      			<IconButton
+      			  style={{
+      			    zIndex: 12502,
+      			    position: "absolute",
+      			    top: 6,
+      			    right: 6,
+      			    color: "white",
+      			  }}
+      			  onClick={() => {
+      			    setShowVideo("")
+      			  }}
+      			>
+      			  <CloseIcon />
+      			</IconButton>
+						<iframe 
+							src={showVideo}
+							frameBorder={false}
+							webkitallowFullscreen={true}
+							mozallowFullscreen={true}
+							allowFullScreen={true}
+							style={{
+								"top": 0, 
+								"left": 0,
+								"maxWidth": 300,
+								"minWidth": 300,
+							}}
+						/>
+					</div>
+				: null}
+
        <TextField
          id="copy_element_shuffle"
          value={to_be_copied}
@@ -98,6 +98,13 @@ export const GetParsedPaths = (inputdata, basekey) => {
        name: "Node",
        autocomplete: `${basekey.replaceAll(" ", "_")}`,
      });
+
+      //parsedValues.push({
+      //  type: "value",
+      //  name: `${basekey} length`,
+      //  autocomplete: `{{ ${basekey.replaceAll(" ", "_")} | size }}`,
+      //});
+
      parsedValues.push({
        type: "list",
        name: `${splitkey}list`,
@@ -120,6 +127,13 @@ export const GetParsedPaths = (inputdata, basekey) => {
          name: basekeyname,
          autocomplete: `${basekey}.${key.replaceAll(" ", "_")}`,
        });
+
+        //parsedValues.push({
+        //  type: "value",
+        //  name: `${basekeyname} length`,
+        //  autocomplete: "{{ "+`${basekey}.${key.replaceAll(" ", "_")} | size }}`,
+        //});
+
        parsedValues.push({
          type: "list",
          name: `${basekeyname}${splitkey}list`,
@@ -327,7 +327,7 @@ const UsecaseListComponent = ({keys, isCloud, globalUrl, frameworkData, isLogged
 											//navigate(curpath + newitem)
 										}
 									}}>
-										<Paper style={{padding: "30px 30px 30px 30px", minHeight: 75, cursor: !selectedItem ? "pointer" : "default", border: itemBorder, backgroundColor: backgroundColor,}} onClick={() => {
+										<Paper style={{padding: 25, minHeight: 75, cursor: !selectedItem ? "pointer" : "default", border: itemBorder, backgroundColor: backgroundColor,}} onClick={() => {
 										}}>
 											{!selectedItem ? 
 												<div style={{textAlign: "left", position: "relative",}}>
@@ -606,9 +606,12 @@ const UsecaseListComponent = ({keys, isCloud, globalUrl, frameworkData, isLogged
 																	<Typography variant="body1" color="textSecondary">
 																		{subcase.description}
 																	</Typography>
-																	<Typography variant="body1" style={{marginTop: 15, marginBottom: 10, }}>
-																		Select relevant workflows
-																	</Typography>
+
+																	{workflows !== undefined && workflows !== null && workflows.length > 0 ?
+																		<Typography variant="body1" style={{marginTop: 15, marginBottom: 10, }}>
+																			Select relevant workflows
+																		</Typography>
+																	: null}

 																	{workflows !== undefined && workflows !== null && workflows.length > 0 ?
 																		<Autocomplete
@@ -761,7 +764,50 @@ const UsecaseListComponent = ({keys, isCloud, globalUrl, frameworkData, isLogged
 																			</Typography>
 																		</div>
 																	*/}
-																	<div style={{marginTop: 35}}>
+
+																	{subcase.extra_buttons !== undefined && subcase.extra_buttons !== null && subcase.extra_buttons.length > 0 ?
+																		<div style={{marginTop: 25, }}>
+																			<Typography variant="body1" style={{marginTop: 0,}} onClick={() => {}}>
+																				Examples
+																			</Typography>
+																			<div style={{display: "flex"}}>
+																				{subcase.extra_buttons.map((subdata, index) => {
+																					var highlight = false
+																					var baseTypeInfo = subcase.type !== undefined ? subcase.type : "communication"
+																					if (frameworkData !== undefined && frameworkData !== null) {
+																						if (frameworkData[baseTypeInfo] !== undefined && frameworkData[baseTypeInfo] !== null && subdata.app !== undefined && subdata.app !== null) {
+																							if (frameworkData[baseTypeInfo].name.toLowerCase().replaceAll("_", " ") === subdata.app.toLowerCase().replaceAll("_", " ")) {
+																								highlight = true
+																							}
+																						}
+																					}
+
+																					var marginTop = 6
+																					if (subdata.name.includes(" ") && subdata.name.length > 10) {
+																						marginTop = 0
+																					}
+
+																					return (
+																						<a 
+																							key={index}
+																							href={subdata.link}
+																							rel="noopener noreferrer"
+																							target="_blank"
+																							style={{ textDecoration: "none", color: "rgba(255,255,255,0.7)", marginRight: 5, }}
+																						>
+																							<div style={{width: 160, display: "flex", borderRadius: theme.palette.borderRadius, cursor: "pointer", border: highlight ? "2px solid #f86a3e" : "1px solid rgba(255,255,255,0.7)", backgroundColor: theme.palette.inputColor, padding: "0px 0px 15px 15px", overflow: "hidden",}}>
+																								<img src={subdata.image} style={{width: 40, height: 40, borderRadius: theme.palette.borderRadius, marginTop: 15, }} />
+																								<Typography variant="body1" style={{lineHeight: "95%", marginLeft: 12, marginTop: marginTop === 0 ? 19 : 25, maxHeight: 34, }}>
+																									{subdata.name}
+																								</Typography>
+																							</div>
+																						</a>
+																					)
+																				})}
+																			</div>
+																		</div>
+																	: null}
+																	<div style={{marginTop: 20}}>
 																		<a
 																			href={`https://shuffler.io/search?tab=workflows&q=${subcase.name}`}
 																			rel="noopener noreferrer"
@@ -769,7 +815,7 @@ const UsecaseListComponent = ({keys, isCloud, globalUrl, frameworkData, isLogged
 																			style={{ textDecoration: "none", color: "white", marginRight: 5, }}
 																		>
 																			<Typography variant="body1" style={{marginTop: 15, cursor: "pointer",}} onClick={() => {}}>
-																				See Public Workflows <OpenInNewIcon style={{marginTop: 5, marginLeft: 15, }}/>
+																				See other Public Workflows for {} <OpenInNewIcon style={{marginTop: 5, marginLeft: 15, }}/>
 																			</Typography>
 																			{/*
 																			<div>
@@ -780,43 +826,11 @@ const UsecaseListComponent = ({keys, isCloud, globalUrl, frameworkData, isLogged
 																			*/}
 																		</a>
 																	</div>
-
-
-																	<div style={{display: "flex"}}>
-																		{subcase.extra_buttons !== undefined && subcase.extra_buttons !== null && subcase.extra_buttons.length > 0 ?
-																			subcase.extra_buttons.map((subdata, index) => {
-																				var highlight = false
-																				var baseTypeInfo = subcase.type !== undefined ? subcase.type : "communication"
-																				if (frameworkData[baseTypeInfo] !== undefined && frameworkData[baseTypeInfo] !== null && subdata.app !== undefined && subdata.app !== null) {
-																					if (frameworkData[baseTypeInfo].name.toLowerCase().replaceAll("_", " ") === subdata.app.toLowerCase().replaceAll("_", " ")) {
-																						highlight = true
-																					}
-																				}
-
-																				return (
-																					<a 
-																						key={index}
-																						href={subdata.link}
-																						rel="noopener noreferrer"
-																						target="_blank"
-                  													style={{ textDecoration: "none", color: "rgba(255,255,255,0.7)", marginRight: 5, }}
-																					>
-																						<div style={{width: 140, display: "flex", borderRadius: theme.palette.borderRadius, cursor: "pointer", border: highlight ? "2px solid #f86a3e" : "1px solid rgba(255,255,255,0.7)", backgroundColor: theme.palette.inputColor, padding: 15, }}>
-																							<img src={subdata.image} style={{width: 40, height: 40, }} />
-																							<Typography variant="body1" style={{marginLeft: 15, marginTop: 6,}}>
-																								{subdata.name}
-																							</Typography>
-																						</div>
-																					</a>
-																				)
-																		})
-																		: null}
-																		</div>
 																</div>
 															}
 															<div style={{
-																	height: 400, 
-																	width: 400, 
+																	height: 350, 
+																	width: 350, 
 																	borderRadius: theme.palette.borderRadius,
 																	border: "1px solid rgba(255,255,255,0.3)",
 																}}>
@@ -828,7 +842,7 @@ const UsecaseListComponent = ({keys, isCloud, globalUrl, frameworkData, isLogged
 																	isLoaded={true}
 																	isLoggedIn={true}
 																	globalUrl={globalUrl}
-																	size={0.7}
+																	size={0.6}
 																/>
 															</div>
 														</div>
@@ -3242,6 +3242,11 @@ const Workflows = (props) => {
 							</Zoom>

              {filteredWorkflows.map((data, index) => {
+								// Shouldn't be a part of this list
+								if (data.public === true) {
+									return null
+								}
+
  							if (firstLoad) {
 									workflowDelay += 75
 								} else {