marker/shuffle-cracked
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added check for all available variables in code editor

Browse Source
This commit is contained in:
frikky
2022-05-23 02:31:26 +02:00
parent 642605ccec
commit b51294fc2d
4 changed files with 213 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docker-compose.yml
+2 -2
View File
@@ -1,7 +1,7 @@
version: '3' version: '3'
services: services:
frontend: frontend:
build: ./frontend #build: ./frontend
image: ghcr.io/frikky/shuffle-frontend:nightly image: ghcr.io/frikky/shuffle-frontend:nightly
container_name: shuffle-frontend container_name: shuffle-frontend
hostname: shuffle-frontend hostname: shuffle-frontend
@@ -16,7 +16,7 @@ services:
depends_on: depends_on:
- backend - backend
backend: backend:
build: ./backend #build: ./backend
image: ghcr.io/frikky/shuffle-backend:nightly image: ghcr.io/frikky/shuffle-backend:nightly
container_name: shuffle-backend container_name: shuffle-backend
hostname: ${BACKEND_HOSTNAME} hostname: ${BACKEND_HOSTNAME}
frontend/src/components/Header.js
+1 -1
View File
@@ -856,7 +856,7 @@ const Header = (props) => {
position: "fixed", position: "fixed",
minHeight: 60, minHeight: 60,
top: 0, top: 0,
zIndex: 10000, //zIndex: 10000,
backgroundColor: "inherit", backgroundColor: "inherit",
}} }}
> >
frontend/src/components/ParsedAction.jsx
+90 -91
View File
@@ -448,7 +448,8 @@ const ParsedAction = (props) => {
highlight: "shuffle_cache", highlight: "shuffle_cache",
autocomplete: "shuffle_cache", autocomplete: "shuffle_cache",
example: "", example: "",
}); })
if ( if (
workflow.workflow_variables !== null && workflow.workflow_variables !== null &&
workflow.workflow_variables !== undefined && workflow.workflow_variables !== undefined &&
@@ -489,6 +490,7 @@ const ParsedAction = (props) => {
// Loops parent nodes' old results to fix autocomplete // Loops parent nodes' old results to fix autocomplete
if (getParents !== undefined) { if (getParents !== undefined) {
var parents = getParents(selectedAction); var parents = getParents(selectedAction);
if (parents.length > 1) { if (parents.length > 1) {
for (var key in parents) { for (var key in parents) {
const item = parents[key]; const item = parents[key];
@@ -544,6 +546,7 @@ const ParsedAction = (props) => {
autocomplete: itemlabelComplete, autocomplete: itemlabelComplete,
example: exampledata, example: exampledata,
}; };
actionlist.push(actionvalue); actionlist.push(actionvalue);
} }
} }
@@ -1441,7 +1444,7 @@ const ParsedAction = (props) => {
} }
*/ */
console.log("Clicked field: ", clickedFieldId) //console.log("Clicked field: ", clickedFieldId)
if (setScrollConfig !== undefined && scrollConfig !== null && scrollConfig !== undefined && scrollConfig.selected !== clickedFieldId) { if (setScrollConfig !== undefined && scrollConfig !== null && scrollConfig !== undefined && scrollConfig.selected !== clickedFieldId) {
scrollConfig.selected = clickedFieldId scrollConfig.selected = clickedFieldId
setScrollConfig(scrollConfig) setScrollConfig(scrollConfig)
@@ -1851,114 +1854,110 @@ const ParsedAction = (props) => {
} }
const coverColor = "#82ccc3" const coverColor = "#82ccc3"
//menuPosition.left -= 50
//menuPosition.top -= 250
console.log(menuPosition)
return parsedPaths.length > 0 ? ( return parsedPaths.length > 0 ? (
<NestedMenuItem <NestedMenuItem
key={innerdata.name} key={innerdata.name}
label={ label={
<div style={{ display: "flex" }}> <div style={{ display: "flex", marginLeft: 0, }}>
{icon} {innerdata.name} {icon} {innerdata.name}
</div> </div>
} }
parentMenuOpen={!!menuPosition} parentMenuOpen={!!menuPosition}
style={{ style={{
backgroundColor: theme.palette.inputColor,
color: "white", color: "white",
minWidth: 250, minWidth: 250,
maxWidth: 250, maxWidth: 250,
maxHeight: 650, maxHeight: 50,
scrollX: "", overflow: "hidden",
}} }}
//PaperProps={{
// style: {
// maxHeight: 400,
// width: 250,
// }
//}}
onClick={() => { onClick={() => {
console.log("CLICKED: ", innerdata); console.log("CLICKED: ", innerdata);
console.log(innerdata.example) console.log(innerdata.example)
handleItemClick([innerdata]); handleItemClick([innerdata]);
}} }}
> >
<MenuItem <Paper style={{minHeight: 500, maxHeight: 500, minWidth: 275, maxWidth: 275, position: "fixed", top: menuPosition.top-200, left: menuPosition.left-455, padding: "10px 0px 10px 10px", backgroundColor: theme.palette.inputColor, overflow: "hidden", overflowY: "auto", border: "1px solid rgba(255,255,255,0.3)",}}>
key={innerdata.name} <MenuItem
style={{ key={innerdata.name}
backgroundColor: theme.palette.inputColor, style={{
marginLeft: 15, backgroundColor: theme.palette.inputColor,
color: "white", marginLeft: 15,
minWidth: 250, color: "white",
maxWidth: 250, minWidth: 250,
padding: 0, maxWidth: 250,
position: "relative", padding: 0,
}} position: "relative",
value={innerdata} }}
onMouseOver={() => { value={innerdata}
//console.log("HOVER: ", pathdata); onMouseOver={() => {
}} //console.log("HOVER: ", pathdata);
onClick={() => { }}
handleItemClick([innerdata]); onClick={() => {
}} handleItemClick([innerdata]);
> }}
<Typography variant="h6" style={{paddingBottom: 5}}> >
{innerdata.name} <Typography variant="h6" style={{paddingBottom: 5}}>
</Typography> {innerdata.name}
</MenuItem> </Typography>
{parsedPaths.map((pathdata, index) => { </MenuItem>
// FIXME: Should be recursive in here {parsedPaths.map((pathdata, index) => {
//<VpnKeyIcon style={iconStyle} /> // FIXME: Should be recursive in here
const icon = //<VpnKeyIcon style={iconStyle} />
pathdata.type === "value" ? ( const icon =
<span style={{marginLeft: 9, }} /> pathdata.type === "value" ? (
) : pathdata.type === "list" ? ( <span style={{marginLeft: 9, }} />
<FormatListNumberedIcon style={{marginLeft: 9, marginRight: 10, }} /> ) : pathdata.type === "list" ? (
) : ( <FormatListNumberedIcon style={{marginLeft: 9, marginRight: 10, }} />
<CircleIcon style={{marginLeft: 9, marginRight: 10, color: coverColor}}/> ) : (
); <CircleIcon style={{marginLeft: 9, marginRight: 10, color: coverColor}}/>
//<ExpandMoreIcon style={iconStyle} /> );
//<ExpandMoreIcon style={iconStyle} />
console.log("Path: ", pathdata) const indentation_count = (pathdata.name.match(/\./g) || []).length+1
const indentation_count = (pathdata.name.match(/\./g) || []).length+1 const baseIndent = <div style={{marginLeft: 20, height: 30, width: 1, backgroundColor: coverColor,}} />
const baseIndent = <div style={{marginLeft: 20, height: 30, width: 1, backgroundColor: coverColor,}} /> //const boxPadding = pathdata.type === "object" ? "10px 0px 0px 0px" : 0
//const boxPadding = pathdata.type === "object" ? "10px 0px 0px 0px" : 0 const boxPadding = 0
const boxPadding = 0 const namesplit = pathdata.name.split(".")
const namesplit = pathdata.name.split(".") const newname = namesplit[namesplit.length-1]
const newname = namesplit[namesplit.length-1] return (
console.log(newname) <MenuItem
return ( key={pathdata.name}
<MenuItem style={{
key={pathdata.name} backgroundColor: theme.palette.inputColor,
style={{ color: "white",
backgroundColor: theme.palette.inputColor, minWidth: 250,
color: "white", maxWidth: 250,
minWidth: 250, padding: boxPadding,
maxWidth: 250, }}
padding: boxPadding, value={pathdata}
}} onMouseOver={() => {
value={pathdata} //console.log("HOVER: ", pathdata);
onMouseOver={() => { }}
//console.log("HOVER: ", pathdata); onClick={() => {
}} handleItemClick([innerdata, pathdata]);
onClick={() => { }}
handleItemClick([innerdata, pathdata]); >
}} <Tooltip
> color="primary"
<Tooltip title={`Ex. value: ${pathdata.value}`}
color="primary" placement="left"
title={`Ex. value: ${pathdata.value}`} >
placement="left" <div style={{ display: "flex", height: 30, }}>
> {Array(indentation_count).fill().map((subdata, subindex) => {
<div style={{ display: "flex", height: 30, }}> return (
{Array(indentation_count).fill().map((subdata, subindex) => { baseIndent
return ( )
baseIndent })}
) {icon} {newname}
})} </div>
{icon} {newname} </Tooltip>
</div> </MenuItem>
</Tooltip> );
</MenuItem> })}
); </Paper>
})}
</NestedMenuItem> </NestedMenuItem>
) : ( ) : (
<MenuItem <MenuItem
@@ -1968,7 +1967,7 @@ const ParsedAction = (props) => {
color: "white", color: "white",
minWidth: 250, minWidth: 250,
maxWidth: 250, maxWidth: 250,
marginRight: 250, marginRight: 0,
}} }}
value={innerdata} value={innerdata}
onMouseOver={() => handleMouseover()} onMouseOver={() => handleMouseover()}
frontend/src/components/ShuffleCodeEditor.jsx
+120 -100
View File
@@ -16,6 +16,7 @@ import {
import Checkbox from '@mui/material/Checkbox'; import Checkbox from '@mui/material/Checkbox';
import { orange } from '@mui/material/colors'; import { orange } from '@mui/material/colors';
import { isMobile } from "react-device-detect" import { isMobile } from "react-device-detect"
import { GetParsedPaths } from "../views/Apps.jsx";
import { import {
FullscreenExit as FullscreenExitIcon, FullscreenExit as FullscreenExitIcon,
@@ -39,7 +40,12 @@ import { padding, textAlign } from '@mui/system';
const liquidFilters = [ const liquidFilters = [
{"name": "Size", "value": "size", "example": ""}, {"name": "Size", "value": "size", "example": ""},
{"name": "Date", "value": "date", "example": `{{ "now" | date: "%s" }}`}, {"name": "Date", "value": `date: "%Y%M%d"`, "example": `{{ "now" | date: "%s" }}`},
]
const mathFilters = [
{"name": "Plus", "value": "plus: 1", "example": `{{ "1" | plus: 1 }}`},
{"name": "Minus", "value": "minus: 1", "example": `{{ "1" | minus: 1 }}`},
] ]
const CodeEditor = (props) => { const CodeEditor = (props) => {
@@ -60,63 +66,37 @@ const CodeEditor = (props) => {
const [currentLocation, setCurrentLocation] = React.useState([]); const [currentLocation, setCurrentLocation] = React.useState([]);
const [currentVariable, setCurrentVariable] = React.useState(""); const [currentVariable, setCurrentVariable] = React.useState("");
const [anchorEl, setAnchorEl] = React.useState(null); const [anchorEl, setAnchorEl] = React.useState(null);
const [anchorEl2, setAnchorEl2] = React.useState(null);
const [mainVariables, setMainVariables] = React.useState([]);
const [availableVariables, setAvailableVariables] = React.useState([]);
const liquidOpen = Boolean(anchorEl); const liquidOpen = Boolean(anchorEl);
const mathOpen = Boolean(anchorEl2);
// useEffect(() => {
// console.log(currentLocation)
// }, [currentLocation])
// const [allVariable, setAllVariable] = React.useState([]); useEffect(() => {
var allVariable = [] var allVariables = []
var mainVariables = [] var tmpVariables = []
// console.log(actionlist.length) for(var i=0; i < actionlist.length; i++){
for(var i=0; i<actionlist.length; i++){ allVariables.push('$'+actionlist[i].autocomplete.toLowerCase())
allVariable.push('$'+actionlist[i].autocomplete.toLowerCase()) tmpVariables.push('$'+actionlist[i].autocomplete.toLowerCase())
mainVariables.push('$'+actionlist[i].autocomplete.toLowerCase())
// console.log(actionlist[i]) var parsedPaths = []
// for(var j=0; j<actionlist[i].example.length; j++){ if (typeof actionlist[i].example === "object") {
// console.log(j) parsedPaths = GetParsedPaths(actionlist[i].example, "");
// allVariable.push('$'+actionlist[i].example[j].toLowerCase().substring(0, 25)) }
// }
for(let key in actionlist[i].example){ for (var key in parsedPaths) {
// console.log(key) const fullpath = "$"+actionlist[i].autocomplete.toLowerCase()+parsedPaths[key].autocomplete
allVariable.push('$'+actionlist[i].autocomplete.toLowerCase()+'.'+key) if (!allVariables.includes(fullpath)) {
allVariables.push(fullpath)
}
}
} }
}
// {actionlist.map((data, index) => { setAvailableVariables(allVariables)
// console.log(data) setMainVariables(tmpVariables)
// console.log(actionlist.length) }, [])
// console.log(data.autocomplete)
// allVariable.push('$'+data.autocomplete.substring(0, 25))
// return (
// <div
// style={{
// // textOverflow: 'ellipsis'
// }}
// >
// <button
// onClick={() => {
// replaceVariables(data.autocomplete)
// // console.log(currentCharacter, currentLine)
// }}
// style={{
// backgroundColor: 'transparent',
// color: 'white',
// border: 'none',
// padding: 7.5,
// cursor: 'pointer',
// width: '100%',
// textAlign: 'left'
// }}
// >
// ${data.autocomplete.substring(0, 25)}
// {Object.keys(data.example).forEach(key => key)}
// </button>
// </div>
// )
// })}
const autoFormat = (input) => { const autoFormat = (input) => {
if (validation !== true) { if (validation !== true) {
@@ -134,7 +114,7 @@ const CodeEditor = (props) => {
} }
} }
function findIndex(line, loc) { const findIndex = (line, loc) => {
// var temp_arr = [] // var temp_arr = []
// for(var i=0; i<string.length; i++) { // for(var i=0; i<string.length; i++) {
// if (string[i] === "$") temp_arr.push(i); // if (string[i] === "$") temp_arr.push(i);
@@ -189,14 +169,15 @@ const CodeEditor = (props) => {
if(loc === variable_ranges[occ][occ1]){ if(loc === variable_ranges[occ][occ1]){
popup = true popup = true
setCurrentLocation([line, dollar_occurences[occ]]) setCurrentLocation([line, dollar_occurences[occ]])
console.log("Current Location : "+dollar_occurences[occ])
try{ try{
setCurrentVariable(variable_occurences[occ]) setCurrentVariable(variable_occurences[occ])
console.log("Current Variable : "+variable_occurences[occ])
} catch (e) { } catch (e) {
// setCurrentVariable("") // setCurrentVariable("")
// console.log("Current Variable : Nothing") // console.log("Current Variable : Nothing")
} }
occ = Infinity occ = Infinity
break break
} }
@@ -210,7 +191,7 @@ const CodeEditor = (props) => {
// console.log(dollar_occurences) // console.log(dollar_occurences)
} }
function highlight_variables(value){ const highlight_variables = (value) => {
// value.markText({line:0, ch:2}, {line:0, ch:8}, {"css": "background-color: #f85a3e; border-radius: 4px; color: white"}) // value.markText({line:0, ch:2}, {line:0, ch:8}, {"css": "background-color: #f85a3e; border-radius: 4px; color: white"})
// value.markText({line:0, ch:13}, {line:0, ch:15}, {"css": "background-color: #f85a3e; border-radius: 4px; color: white"}) // value.markText({line:0, ch:13}, {line:0, ch:15}, {"css": "background-color: #f85a3e; border-radius: 4px; color: white"})
// value.markText({line:0, ch:19}, {line:0, ch:26}, {"css": "background-color: #f85a3e; border-radius: 4px; color: white"}) // value.markText({line:0, ch:19}, {line:0, ch:26}, {"css": "background-color: #f85a3e; border-radius: 4px; color: white"})
@@ -230,7 +211,7 @@ const CodeEditor = (props) => {
// console.log(code_variables_loc) // console.log(code_variables_loc)
var code_lines = localcodedata.split('\n') var code_lines = localcodedata.split('\n')
for (var i = 0; i<code_lines.length; i++){ for (var i = 0; i < code_lines.length; i++){
var current_code_line = code_lines[i] var current_code_line = code_lines[i]
// console.log(current_code_line) // console.log(current_code_line)
@@ -254,7 +235,7 @@ const CodeEditor = (props) => {
dollar_occurence.push(ch) dollar_occurence.push(ch)
} }
} }
console.log(dollar_occurence) //console.log(dollar_occurence)
var dollar_occurence_len = [] var dollar_occurence_len = []
try{ try{
@@ -262,14 +243,15 @@ const CodeEditor = (props) => {
dollar_occurence_len.push(variable_occurence[occ].length) dollar_occurence_len.push(variable_occurence[occ].length)
} }
} catch (e) {} } catch (e) {}
console.log(dollar_occurence_len)
//console.log(dollar_occurence_len)
try{ try{
// console.log(variable_occurence) // console.log(variable_occurence)
for (var occ = 0; occ<variable_occurence.length; occ++){ for (var occ = 0; occ < variable_occurence.length; occ++){
// value.markText({line:i, ch:dollar_occurence[occ]}, {line:i, ch:dollar_occurence_len[occ]+dollar_occurence[occ]}, {"css": "background-color: #8b8e26; border-radius: 4px; color: white"}) // value.markText({line:i, ch:dollar_occurence[occ]}, {line:i, ch:dollar_occurence_len[occ]+dollar_occurence[occ]}, {"css": "background-color: #8b8e26; border-radius: 4px; color: white"})
// var correctVariable = actionlist.find(action => action.autocomplete.toLowerCase() === variable_occurence[occ].slice(1,).toLowerCase()) // var correctVariable = actionlist.find(action => action.autocomplete.toLowerCase() === variable_occurence[occ].slice(1,).toLowerCase())
var correctVariable = allVariable.includes(variable_occurence[occ].toLowerCase()) var correctVariable = availableVariables.includes(variable_occurence[occ].toLowerCase())
// console.log(actionlist) // console.log(actionlist)
if(!correctVariable) { if(!correctVariable) {
value.markText({line:i, ch:dollar_occurence[occ]}, {line:i, ch:dollar_occurence_len[occ]+dollar_occurence[occ]}, {"css": "background-color: rgb(248, 106, 62, 0.9); padding-top: 2px; padding-bottom: 2px; color: white"}) value.markText({line:i, ch:dollar_occurence[occ]}, {line:i, ch:dollar_occurence_len[occ]+dollar_occurence[occ]}, {"css": "background-color: rgb(248, 106, 62, 0.9); padding-top: 2px; padding-bottom: 2px; color: white"})
@@ -299,7 +281,7 @@ const CodeEditor = (props) => {
// return "" // return ""
// } // }
function replaceVariables(swapVariable){ const replaceVariables = (swapVariable) => {
// var updatedCode = localcodedata.slice(0,index) + "$" + str + localcodedata.slice(index+currentVariable.length+1,) // var updatedCode = localcodedata.slice(0,index) + "$" + str + localcodedata.slice(index+currentVariable.length+1,)
// setlocalcodedata(updatedCode) // setlocalcodedata(updatedCode)
// setEditorPopupOpen(false) // setEditorPopupOpen(false)
@@ -321,7 +303,7 @@ const CodeEditor = (props) => {
setlocalcodedata(updatedCode) setlocalcodedata(updatedCode)
} }
function expectedOutput(input) { const expectedOutput = (input) => {
const found = input.match(/[$]{1}([a-zA-Z0-9_-]+\.?){1}([a-zA-Z0-9#_-]+\.?){0,}/g) const found = input.match(/[$]{1}([a-zA-Z0-9_-]+\.?){1}([a-zA-Z0-9#_-]+\.?){0,}/g)
//console.log(found) //console.log(found)
@@ -359,8 +341,9 @@ const CodeEditor = (props) => {
return return
} }
setlocalcodedata(localcodedata+" "+item.value) setlocalcodedata(localcodedata+" | "+item.value+" }}")
setAnchorEl(null) setAnchorEl(null)
setAnchorEl2(null)
} }
return ( return (
@@ -425,41 +408,78 @@ const CodeEditor = (props) => {
</div> </div>
</div> </div>
<Button <div style={{display: "flex"}}>
id="basic-button" <Button
aria-haspopup="true" id="basic-button"
aria-controls={liquidOpen ? 'basic-menu' : undefined} aria-haspopup="true"
aria-expanded={liquidOpen ? 'true' : undefined} aria-controls={liquidOpen ? 'basic-menu' : undefined}
style={{ aria-expanded={liquidOpen ? 'true' : undefined}
textTransform: "none", variant="outlined"
width: 200, style={{
marginLeft: 200, textTransform: "none",
}} width: 100,
onClick={(event) => { }}
setAnchorEl(event.currentTarget); onClick={(event) => {
}} setAnchorEl(event.currentTarget);
> }}
Liquid >
</Button> Filters
<Menu </Button>
id="basic-menu" <Menu
anchorEl={anchorEl} id="basic-menu"
open={liquidOpen} anchorEl={anchorEl}
onClose={() => { open={liquidOpen}
setAnchorEl(null); onClose={() => {
}} setAnchorEl(null);
MenuListProps={{ }}
'aria-labelledby': 'basic-button', MenuListProps={{
}} 'aria-labelledby': 'basic-button',
> }}
{liquidFilters.map((item, index) => { >
return ( {liquidFilters.map((item, index) => {
<MenuItem onClick={() => { return (
handleClick(item) <MenuItem onClick={() => {
}}>{item.name}</MenuItem> handleClick(item)
) }}>{item.name}</MenuItem>
})} )
</Menu> })}
</Menu>
<Button
id="basic-button"
aria-haspopup="true"
aria-controls={mathOpen ? 'basic-menu' : undefined}
aria-expanded={mathOpen ? 'true' : undefined}
variant="outlined"
style={{
textTransform: "none",
width: 100,
}}
onClick={(event) => {
setAnchorEl2(event.currentTarget);
}}
>
Math
</Button>
<Menu
id="basic-menu"
anchorEl={anchorEl2}
open={mathOpen}
onClose={() => {
setAnchorEl2(null);
}}
MenuListProps={{
'aria-labelledby': 'basic-button',
}}
>
{mathFilters.map((item, index) => {
return (
<MenuItem onClick={() => {
handleClick(item)
}}>{item.name}</MenuItem>
)
})}
</Menu>
</div>
<span style={{ <span style={{
border: `2px solid ${theme.palette.inputColor}`, border: `2px solid ${theme.palette.inputColor}`,
borderRadius: theme.palette.borderRadius, borderRadius: theme.palette.borderRadius,