Fixed hybrid issues

2020-11-15 16:28:20 +01:00
parent 8abd1584aa
commit 3f98f986e7
8 changed files with 369 additions and 152 deletions
@@ -74,7 +74,8 @@ var baseAppPath = "/home/frikky/git/shaffuru/tmp/apps"
 var baseDockerName = "frikky/shuffle"

 //var syncUrl = "http://192.168.102.54:5002"
-var syncUrl = "http://localhost:5002"
+//var syncUrl = "http://localhost:5002"
+var syncUrl = "https://shuffler.io"

 var dbclient *datastore.Client

@@ -69,14 +69,18 @@ type ExecutionRequest struct {

 type SyncFeatures struct {
 	Webhook            SyncData `json:"webhook" datastore:"webhook"`
-	Schedule       SyncData `json:"schedule" datastore:"schedule"`
+	Schedules          SyncData `json:"schedules" datastore:"schedules"`
 	UserInput          SyncData `json:"user_input" datastore:"user_input"`
+	SendMail           SyncData `json:"send_mail" datastore:"send_mail"`
+	SendSms            SyncData `json:"send_sms" datastore:"send_sms"`
 	EmailTrigger       SyncData `json:"email_trigger" datastore:"email_trigger"`
+	AppExecutions      SyncData `json:"app_executions" datastore:"app_executions"`
+	WorkflowExecutions SyncData `json:"workflow_executions" datastore:"workflow_executions"`
 	Apps               SyncData `json:"apps" datastore:"apps"`
 	Workflows          SyncData `json:"workflows" datastore:"workflows"`
-	Schedules      SyncData `json:"schedules" datastore:"schedules"`
 	Autocomplete       SyncData `json:"autocomplete" datastore:"autocomplete"`
 	Authentication     SyncData `json:"authentication" datastore:"authentication"`
+	Schedule           SyncData `json:"schedule" datastore:"schedule"`
 }

 type SyncData struct {
@@ -1836,6 +1840,7 @@ func saveWorkflow(resp http.ResponseWriter, request *http.Request) {
 			}

 			// FIXME: This is not the right time to send them, BUT it's well served for testing. Save -> send email / sms
+			_ = triggerInformation
 			if strings.Contains(triggerType, "email") {
 				if email == "test@test.com" {
 					log.Printf("Email isn't specified during save.")
@@ -100,7 +100,7 @@ const App = (message, props) => {
 				//console.log(responseJson.success)
 				setUserData(responseJson)
 				setIsLoggedIn(true)
-				console.log("Cookies: ", cookies)
+				//console.log("Cookies: ", cookies)

 				// Updating cookie every request
 				for (var key in responseJson["cookies"]) {
@@ -0,0 +1,8 @@
+import { createBrowserHistory } from 'history';
+
+var localExport 
+if (typeof window !== 'undefined') {
+	localExport = createBrowserHistory({forceRefresh: true});
+}
+
+export default localExport
@@ -75,6 +75,9 @@ const Admin = (props) => {
 	const [users, setUsers] = React.useState([]);
 	const [organizations, setOrganizations] = React.useState([]);
 	const [orgSyncResponse, setOrgSyncResponse] = React.useState("");
+	const [userSettings, setUserSettings] = React.useState({});
+	const [orgName, setOrgName] = React.useState("");
+	const [orgDescription, setOrgDescription] = React.useState("");

 	const [environments, setEnvironments] = React.useState([]);
 	const [authentication, setAuthentication] = React.useState([]);
@@ -86,6 +89,7 @@ const Admin = (props) => {
 	const [selectedAuthenticationModalOpen, setSelectedAuthenticationModalOpen] = React.useState(false)
 	const [showArchived, setShowArchived] = React.useState(false)

+	const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io" 
 	const getApps = () => {
 		fetch(globalUrl+"/api/v1/workflows/apps", {
    	  method: 'GET',
@@ -275,7 +279,7 @@ const Admin = (props) => {
 			style={{ width: 150, height: 55, flex: 1 }}
 			variant="contained"
 			color="primary"
-			onClick={() => handleEditOrg(selectedOrganization.name, selectedOrganization.description, selectedOrganization.id, selectedOrganization.image)}
+			onClick={() => handleEditOrg(orgName, orgDescription, selectedOrganization.id, selectedOrganization.image)}
 		>
 			Save Changes	
 		</Button>
@@ -303,7 +307,7 @@ const Admin = (props) => {
 			.then(response =>
 				response.json().then(responseJson => {
 					if (responseJson["success"] === false) {
-						alert.error("Failed updating org")
+						alert.error("Failed updating org: ", responseJson.reason)
 					} else {
 						alert.success("Successfully edited org!")
 						setSelectedUserModalOpen(false)
@@ -386,8 +390,13 @@ const Admin = (props) => {
 				'Content-Type': 'application/json',
 			},
 		})
-		.then(response =>
-			response.json().then(responseJson => {
+		.then(response => {
+			if (response.status === 401) {
+			}
+
+			return response.json()
+		})
+		.then(responseJson => {
 			if (responseJson["success"] === false) {
 				alert.error("Failed getting org: ", responseJson.readon)
 			} else {
@@ -405,18 +414,20 @@ const Admin = (props) => {
 					},
 				}

+
+				// FIXME: Set up features
 				Object.keys(responseJson.sync_features).map(function(key, index) {
 					//console.log(responseJson.sync_features[key])
 				})

-
+				setOrgName(responseJson.name)
+				setOrgDescription(responseJson.description)
 				if (responseJson.image !== undefined && responseJson.image !== null && responseJson.image.length > 0) {
 					setFileBase64(responseJson.image)
 				}
 				setOrganizationFeatures(lists)
 			}
-			}),
-		)
+		})
 		.catch(error => {
 			console.log("Error getting org: ", error)
 			alert.error("Error getting current organization")
@@ -629,7 +640,7 @@ const Admin = (props) => {
 			})
 			.then((responseJson) => {
 				if (responseJson.success) {
-					console.log(responseJson.data)
+					//console.log(responseJson.data)
 					setAuthentication(responseJson.data)
 				} else {
 					alert.error("Failed getting authentications")
@@ -715,9 +726,38 @@ const Admin = (props) => {
 			});
 	}

+	const getSettings = () => {
+		fetch(globalUrl+"/api/v1/getsettings", {
+			method: 'GET',
+			headers: {
+				'Content-Type': 'application/json',
+				'Accept': 'application/json',
+			},
+				credentials: "include",
+			})
+		.then((response) => {
+			if (response.status !== 200) {
+				console.log("Status not 200 when getting settings :O!")
+			}
+
+			return response.json()
+		})
+    .then((responseJson) => {
+			setUserSettings(responseJson)
+    })
+		.catch(error => {
+    		console.log(error)
+		});
+	}
+
+
 	if (firstRequest) {
 		setFirstRequest(false)
+		if (!isCloud) {
 			getUsers()
+		} else {
+			getSettings()
+		}

 		const views = {
 			"organization": 0,
@@ -737,7 +777,7 @@ const Admin = (props) => {
 	}

 	if (selectedOrganization.id === undefined && userdata !== undefined && userdata.active_org !== undefined) {
-		//setSelectedOrganization(userdata.active_org)
+		setSelectedOrganization(userdata.active_org)
 		handleGetOrg(userdata.active_org.id)
 	}

@@ -1120,8 +1160,51 @@ const Admin = (props) => {
 	var imageData = file.length > 0 ? file : fileBase64 
 	imageData = imageData === undefined || imageData.length === 0 ? defaultImage : imageData

+	const cancelSubscriptions = (subscription_id) => {
+		console.log(selectedOrganization)
+		const data = {
+			"subscription_id": subscription_id,
+			"action": "cancel",
+			"org_id": selectedOrganization.id,
+		}
+
+
+		const url = globalUrl + `/api/v1/orgs/${selectedOrganization.id}`;
+		fetch(url, {
+			mode: 'cors',
+			method: 'POST',
+			body: JSON.stringify(data),
+			credentials: 'include',
+			crossDomain: true,
+			withCredentials: true,
+			headers: {
+				'Content-Type': 'application/json; charset=utf-8',
+			},
+		})
+		.then(function(response) {
+			if (response.status !== 200) {
+				console.log("Error in response")
+			}
+
+			handleGetOrg(selectedOrganization.id) 
+			return response.json();
+		}).then(function(responseJson) {	
+			if (responseJson.success !== undefined && responseJson.success) {
+				alert.success("Successfully stopped subscription!")
+
+
+			} else {
+				alert.error("Failed stopping subscription. Please contact us.")
+			}
+		})
+		.catch(function(error) {
+			console.log("Error: ", error)
+			alert.error("Failed stopping subscription. Please contact us.")
+		})
+	}
+
 	const imageInfo = <img src={imageData} alt="Click to upload an image (174x174)" id="logo" style={{maxWidth: 174, maxHeight: 174, minWidth: 174, minHeight: 174, objectFit: "contain",}} />
-	const organizationView = curTab === 0 ?
+	const organizationView = curTab === 0 && selectedOrganization.id !== undefined ?
 		<div>
 			<div style={{ marginTop: 20, marginBottom: 20, }}>
 				<h2 style={{ display: "inline", }}>Organization overview</h2>
@@ -1130,10 +1213,11 @@ const Admin = (props) => {
 				</span>
 			</div>
 				{selectedOrganization.id === undefined ? 
-					null : 
+					<div style={{height: 250}}/>
+					: 
 					<div>
 						<div style={{color: "white", flex: "1", display: "flex", flexDirection: "row"}}>
-						 	<Tooltip title="Click to edit the app's image" placement="bottom">
+						 	<Tooltip title="Click to edit the app's image - 174x174" placement="bottom">
 								<div style={{flex: "1", margin: "10px 25px 10px 0px", border: imageData !== undefined && imageData.length > 0 ? null : "1px solid #f85a3e", cursor: "pointer", backgroundColor: imageData !== undefined && imageData.length > 0 ? null : theme.palette.inputColor, maxWidth: 174, maxHeight: 174}} onClick={() => {upload.click()}}>
 									<input hidden type="file" ref={(ref) => upload = ref} onChange={editHeaderImage} />
 									{imageInfo}
@@ -1151,7 +1235,7 @@ const Admin = (props) => {
 								  id="standard-required"
 									margin="normal"
 									variant="outlined"
-									defaultValue={selectedOrganization.name}
+									value={orgName}
      	 					onChange={e => {
 										const invalid = ["#", ":", "."]
 										for (var key in invalid) {
@@ -1166,8 +1250,7 @@ const Admin = (props) => {
 											return
 										}

-										selectedOrganization.name = e.target.value
-										setSelectedOrganization(selectedOrganization)
+										setOrgName(e.target.value)
 									}}
 									color="primary"
 									InputProps={{
@@ -1193,10 +1276,9 @@ const Admin = (props) => {
 										margin="normal"
 										variant="outlined"
 										placeholder="A description for the service"
-										defaultValue={selectedOrganization.description}
+										value={orgDescription}
 										onChange={e => {
-											selectedOrganization.description = e.target.value
-											setSelectedOrganization(selectedOrganization)
+											setOrgDescription(e.target.value)
 										}}
 										InputProps={{
 											classes: {
@@ -1214,9 +1296,49 @@ const Admin = (props) => {
 							</div>
 						</div>
 					<Divider style={{ marginTop: 20, marginBottom: 20, backgroundColor: theme.palette.inputColor }} />
-					<HandlePayment />
 						<Typography variant="h6" style={{marginBottom: "10px", color: "white"}}>Cloud syncronization</Typography>
 							What does <a href="https://shuffler.io/docs/hybrid#cloud_sync" target="_blank" style={{textDecoration: "none", color: "#f85a3e"}}>cloud sync</a> do? Cloud syncronization is a way of getting more out of Shuffle. Shuffle will <b>ALWAYS</b> make every option open source, but features relying on other users can't be done without a collaborative approach.
+
+					{isCloud ? 
+						<div style={{marginTop: 15, display: "flex"}}>
+							<div style={{flex: 1}}>
+								<Typography style={{}}>
+									Currently syncronizing: {selectedOrganization.cloud_sync_active === true ? "True" : "False"}
+								</Typography>
+								{selectedOrganization.cloud_sync_active ? 
+									<Typography style={{}}>
+										Syncronization interval: {selectedOrganization.sync_config.interval === 0 ? "60" : selectedOrganization.sync_config.interval}
+									</Typography>
+									: 
+									null
+								}
+								<Typography style={{whiteSpace: "nowrap", marginTop: 25, marginRight: 10}}>
+									Your Apikey 
+								</Typography>
+								<TextField
+									color="primary"
+									style={{backgroundColor: theme.palette.inputColor, }}
+									InputProps={{
+										style: {
+											height: "50px",
+											color: "white",
+											fontSize: "1em",
+										},
+									}}
+									required
+									fullWidth={true}
+									disabled={true}
+									autoComplete="cloud apikey"
+									id="apikey_field"
+									margin="normal"
+									placeholder="Cloud Apikey"
+									variant="outlined"
+									defaultValue={userSettings.apikey}
+								/>
+							</div>
+						</div>
+					:
+					<div>
 							<div style={{display: "flex", marginBottom: 20, }}>
 								<TextField
 									color="primary"
@@ -1270,9 +1392,14 @@ const Admin = (props) => {
 							})}
 						</Grid>
 						*/}
-					<Typography style={{marginTop: 40}}>Cloud sync features</Typography>
+						</div>
+					}
+					<Typography style={{marginTop: 40, marginLeft: 10, marginBottom: 5,}}>Cloud sync features</Typography>
 					<Grid container style={{width: "100%", marginBottom: 15, }}>
 						{Object.keys(selectedOrganization.sync_features).map(function(key, index) {
+							if (key === "schedule") {
+								return null
+							}

 							//<GridItem key={index} data={data} />
 							const item = selectedOrganization.sync_features[key]
@@ -1290,8 +1417,51 @@ const Admin = (props) => {
 							)
 						})}
 					</Grid>
+					<Divider style={{ marginTop: 20, marginBottom: 20, backgroundColor: theme.palette.inputColor }} />
+					{isCloud && selectedOrganization.subscriptions !== null && selectedOrganization.subscriptions.length > 0 ? 
+						<div style={{marginTop: 30, marginBottom: 20}}>
+							<Typography style={{marginTop: 40, marginLeft: 10, marginBottom: 5,}}>
+								Your subscription{selectedOrganization.subscriptions.length > 1 ? "s" : ""}
+							</Typography>
+							<Grid container spacing={3} style={{marginTop: 15}}>
+								{selectedOrganization.subscriptions.reverse().map((sub, index) => {
+									return (
+										<Grid item key={index} xs={4}>
+											<Card elevation={6} style={{backgroundColor: theme.palette.inputColor, color: "white", padding: 25, textAlign: "left",}}>
+													<b>Type</b>: {sub.level}<div/>
+													<b>Recurrence</b>: {sub.recurrence}<div/>
+													{sub.active ? 
+														<div>
+															<b>Started</b>: {new Date(sub.startdate*1000).toISOString()}<div/>
+															<Button variant="outlined" color="primary" style={{marginTop: 15}} onClick={() => {
+																cancelSubscriptions(sub.reference) 
+															}}>
+																Cancel subscription
+															</Button>
+														</div>
+														: 
+														<div>
+															<b>Cancelled</b>: {new Date(sub.cancellationdate*1000).toISOString()}<div/>
+															<Typography color="textSecondary">
+																<b>Status</b>: Deactivated
+															</Typography>
 														</div>
 													}
+											</Card>
+										</Grid>
+									)
+							})}
+						</Grid>
+							<Divider style={{ marginTop: 20, backgroundColor: theme.palette.inputColor }} />
+						</div>
+						: null
+					}
+				</div>
+				}
+
+					<div style={{backgroundColor: "#1f2023", paddingTop: 25,}}>
+						<HandlePayment stripeKey={props.stripeKey} userdata={userdata} globalUrl={globalUrl} {...props} />
+					</div>
 			</div>
 		: null

@@ -1508,7 +1678,11 @@ const Admin = (props) => {
 			<List>
 				<ListItem>
 					<ListItemText
-						primary="Interval (seconds)"
+						primary="Interval"
+						style={{maxWidth: 200}}
+					/>
+					<ListItemText
+						primary="Environment"
 						style={{maxWidth: 200}}
 					/>
 					<ListItemText
@@ -1526,6 +1700,10 @@ const Admin = (props) => {
 								style={{maxWidth: 200}}
 								primary={schedule.seconds}
 							/>
+							<ListItemText
+								style={{maxWidth: 200}}
+								primary={schedule.environment}
+							/>
 							<ListItemText
 								primary={schedule.argument}
 								style={{maxWidth: 400, overflow: "hidden"}}
@@ -1933,7 +2111,9 @@ const Admin = (props) => {
 		// primary={environment.Registered ? "true" : "false"}

 	const setConfig = (event, newValue) => {
-		if (newValue === 2) {
+		if (newValue === 1) {
+			getUsers()
+		} else if (newValue === 2) {
 			getAppAuthentication()
 		} else if (newValue === 3) {
 			getEnvironments()
@@ -1980,10 +2160,10 @@ const Admin = (props) => {
 					aria-label="disabled tabs example"
 				>
 					<Tab label=<span><BusinessIcon style={iconStyle} /> Organization</span>/>
-					<Tab label=<span><AccessibilityNewIcon style={iconStyle} />Users</span> />
-					<Tab label=<span><LockIcon style={iconStyle} />App Authentication</span>/>
-					<Tab label=<span><EcoIcon style={iconStyle} />Environments</span>/>
-					<Tab label=<span><ScheduleIcon style={iconStyle} />Schedules</span> />
+					{isCloud ? null : <Tab label=<span><AccessibilityNewIcon style={iconStyle} />Users</span> />}
+					{isCloud ? null : <Tab label=<span><LockIcon style={iconStyle} />App Authentication</span>/>}
+					{isCloud ? null : <Tab label=<span><EcoIcon style={iconStyle} />Environments</span>/>}
+					{isCloud ? null : <Tab label=<span><ScheduleIcon style={iconStyle} />Schedules</span> />}
 					{window.location.protocol == "http:" && window.location.port === "3000" ? <Tab label=<span><CloudIcon style={iconStyle} /> Hybrid</span>/> : null}
 					{window.location.protocol == "http:" && window.location.port === "3000" ? <Tab label=<span><BusinessIcon style={iconStyle} /> Organizations</span>/> : null}
 					{window.location.protocol === "http:" && window.location.port === "3000" ? <Tab label=<span><LockIcon style={iconStyle} />Categories</span>/> : null}
@@ -137,6 +137,7 @@ const Apps = (props) => {

 	const [isDropzone, setIsDropzone] = React.useState(false);
 	const upload = React.useRef(null);
+	const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io" ? true : false

 	const { start, stop } = useInterval({
 	  	duration: 5000,
@@ -592,7 +593,7 @@ const Apps = (props) => {
 					</div>
 				</div>
 				{activateButton}
-				{(props.userdata.role === "admin" || props.userdata.id === selectedApp.owner) || !selectedApp.generated ? 
+				{(props.userdata !== undefined && (props.userdata.role === "admin" || props.userdata.id === selectedApp.owner) || !selectedApp.generated) ? 
 					<div>
 						{downloadButton}
 						{editButton}
@@ -618,7 +619,7 @@ const Apps = (props) => {
 						})}
 					</div>
 				: null}
-				{props.userdata.id === selectedApp.owner ? 
+				{props.userdata !== undefined && props.userdata.id === selectedApp.owner ? 
 					<div style={{marginTop: 15}}>
 						{/*<p><b>ID:</b> {selectedApp.id}</p>*/}
 						<b style={{marginRight: 15}}>Sharing:</b> 
@@ -794,7 +795,7 @@ const Apps = (props) => {
 	}

 	const uploadFile = (e) => {
-		const isDropzone = e.dataTransfer?.files.length > 0;
+		const isDropzone = e.dataTransfer === undefined ? false : e.dataTransfer.files.length > 0;
 		const files = isDropzone ? e.dataTransfer.files : e.target.files;
 		
    const reader = new FileReader();
@@ -846,10 +847,12 @@ const Apps = (props) => {
 				</div>
 				<Divider style={{marginBottom: 10, marginTop: 10, height: "100%", width: 1, backgroundColor: dividerColor}}/>
 				<div style={{flex: 1, marginLeft: 10, marginRight: 10}}>
-					<div style={{display: "flex"}}>
+					<div style={{display: "flex", minHeight: 84.81}}>
 						<div style={{flex: 1}}>
 							<h2>Your apps ({apps.length+searchableApps.length})</h2> 
 						</div>
+						{isCloud ? null : 
+						<span>
 							<Tooltip title={"Reload apps locally"} style={{marginTop: "28px", width: "100%"}} aria-label={"Upload"}>
 								<Button
 									variant="outlined"
@@ -877,6 +880,8 @@ const Apps = (props) => {
 									<CloudDownloadIcon />
 								</Button>
 							</Tooltip>
+						</span>
+					}
 					</div>
 					<TextField
 						style={{backgroundColor: inputColor}} 
@@ -0,0 +1,9 @@
+import React from 'react';
+
+const HandlePayment = () => {
+	return (
+		null
+	)
+}
+
+export default HandlePayment