ebta-workflow-prod 1.1.3 → 4.0.2

package/src/elements/Timeline.tsx

@@ -0,0 +1,104 @@
+import * as React from "react";
+import { FormElementProps, FormElementRegistration } from "@vertigis/workflow";
+import { Timeline as MainTimeLine, Text } from '@mantine/core';
+import { MantineProvider } from '@mantine/core';
+
+
+/**
+ * The generic type argument provided to `FormElementProps<T>` controls the type
+ * of `props.value` and `props.setValue(value)`. If your element doesn't need a
+ * `value`, you can omit the type argument.
+ *
+ * You can also declare additional public properties of your element by adding
+ * properties to this interface. The properties will be managed by the Workflow
+ * runtime, and passed in as `props`. You can update the properties by using
+ * `props.setProperty(key, value)`.
+ */
+
+interface TimelineItem {
+    title: string;
+    description: string;
+    time: string;
+    lineVariant?: "dashed" | "solid";
+}
+
+interface TimelineProps extends FormElementProps<string> {
+    itemDetails: TimelineItem[];
+    iconSize: number,
+    lineWidth: number;
+    active: number,
+    color: string,
+    reverseActive: boolean,
+}
+
+/**
+ * A Workflow element built using React.
+ * @displayName Timeline
+ * @description Timeline
+ * @param props The props that will be provided by the Workflow runtime.
+ */
+function Timeline(props: TimelineProps): React.ReactElement {
+    const { itemDetails,iconSize,lineWidth,active,color,reverseActive } = props;
+    iconSize * 0.6
+    return (
+        <MantineProvider>
+            <MainTimeLine active={active} bulletSize={iconSize} lineWidth={lineWidth} color={color} reverseActive={reverseActive}>
+
+                {itemDetails.map((item, index) => {
+                    
+                    return (
+                    
+                    <MainTimeLine.Item
+                        key={index}
+                        title={item.title}
+                        lineVariant={item.lineVariant}
+                    >
+                        
+                        {item.description ? <Text c="dimmed" size="sm">{item.description}</Text> : undefined}
+                        {item.time ? <Text size="xs" mt={4}>{item.time}</Text> : undefined}
+                        
+                    </MainTimeLine.Item>
+                )})}
+            </MainTimeLine>
+
+        </MantineProvider>
+    );
+}
+
+const TimelineElementRegistration: FormElementRegistration<TimelineProps> = {
+    component: Timeline,
+    getInitialProperties: () => ({
+        value: "Hello World",
+        lineWidth: 1,
+        iconSize: 40,
+        active: 2,
+        color:'var(--buttonIcon)',
+        reverseActive: true,
+        itemDetails: [
+            {
+                title: "New branch",
+                description: "You've created new branch fix-notifications from master",
+                time: "2 hours ago",
+            },
+            {
+                title: "Commits",
+                description: "You've pushed 23 commits to fix-notifications branch",
+                time: "52 minutes ago",
+            },
+            {
+                title: "Pull request",
+                description: "You've submitted a pull request Fix incorrect notification message (#187)",
+                time: "34 minutes ago",
+                lineVariant: "dashed",
+            },
+            {
+                title: "Code review",
+                description: "Robert Gluesticker left a code review on your pull request",
+                time: "12 minutes ago",
+            },
+        ],
+    }),
+    id: "Timeline",
+};
+
+export default TimelineElementRegistration;

package/src/elements/ToggleButtonGroup.tsx

@@ -0,0 +1,129 @@
+import * as React from 'react';
+import { FormElementProps, FormElementRegistration } from "@vertigis/workflow";
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import Tooltip from '@mui/material/Tooltip';
+import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
+import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
+import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
+import FormatAlignJustifyIcon from '@mui/icons-material/FormatAlignJustify';
+
+interface ToggleButtonGroupOption {
+    value: string;
+    label: string;
+    icon: React.ReactElement | string;
+    disabled?: boolean;
+    tooltip?: string;
+}
+
+interface MuiToggleButtonGroupProps extends FormElementProps<string | string[]> {
+    options: ToggleButtonGroupOption[];
+}
+
+
+
+
+const renderIcon = (icon: React.ReactElement | string) => {
+    if (typeof icon === 'string') {
+        return <img src={icon} alt="" style={{ width: 24, height: 24 }} />;
+    }
+    return icon;
+};
+
+const renderTooltipButton = (option: ToggleButtonGroupOption) => {
+    const button = (
+        <Tooltip title={option.tooltip || option.label}>
+        <ToggleButton 
+            value={option.value} 
+            aria-label={option.label}
+            disabled={option.disabled}
+        >
+            {renderIcon(option.icon)}
+        </ToggleButton>
+        </Tooltip>
+    );
+
+    return button}
+/**
+ * A Workflow element for single choice toggle buttons with tooltips.
+ * @displayName Mui Single Toggle Button
+ * @description Version 1.4 - Single choice toggle button group with tooltips
+ * @param props The props that will be provided by the Workflow runtime.
+ */
+function MuiSingleToggleButtonGroup(props: MuiToggleButtonGroupProps): React.ReactElement {
+    const { setValue, value, options } = props;
+
+    const handleChange = (
+        event: React.MouseEvent<HTMLElement>,
+        newValue: string | null,
+    ) => {
+        setValue(newValue || "");
+    };
+
+    return (
+        <ToggleButtonGroup
+            value={value}
+            exclusive
+            onChange={handleChange}
+            aria-label="single toggle button group"
+        >
+            {options.map(renderTooltipButton)}
+        </ToggleButtonGroup>
+    );
+}
+
+/**
+ * A Workflow element for multiple choice toggle buttons with tooltips.
+ * @displayName Mui Multiple Toggle Button
+ * @description Version 1.2 - Multiple choice toggle button group with tooltips
+ * @param props The props that will be provided by the Workflow runtime.
+ */
+function MuiMultipleToggleButtonGroup(props: MuiToggleButtonGroupProps): React.ReactElement {
+    const { setValue, value, options } = props;
+
+    const handleChange = (
+        event: React.MouseEvent<HTMLElement>,
+        newValue: string[],
+    ) => {
+        setValue(newValue);
+    };
+
+    return (
+        <ToggleButtonGroup
+            value={value}
+            onChange={handleChange}
+            aria-label="multiple toggle button group"
+        >
+            {options.map(renderTooltipButton)}
+        </ToggleButtonGroup>
+    );
+}
+
+const MuiSingleToggleButtonGroupElementRegistration: FormElementRegistration<MuiToggleButtonGroupProps> = {
+    component: MuiSingleToggleButtonGroup,
+    getInitialProperties: () => ({
+        value: "",
+        options: [
+            { value: "left", label: "Left Aligned", icon: <FormatAlignLeftIcon />, tooltip: "Align Left" },
+            { value: "center", label: "Centered", icon: <FormatAlignCenterIcon />, tooltip: "Align Center" },
+            { value: "right", label: "Right Aligned", icon: <FormatAlignRightIcon />, tooltip: "Align Right" },
+            { value: "justify", label: "Justified", icon: <FormatAlignJustifyIcon />, disabled: true, tooltip: "Justify" },
+        ],
+    }),
+    id: "MuiSingleToggleButtonGroup",
+};
+
+const MuiMultipleToggleButtonGroupElementRegistration: FormElementRegistration<MuiToggleButtonGroupProps> = {
+    component: MuiMultipleToggleButtonGroup,
+    getInitialProperties: () => ({
+        value: [],
+        options: [
+            { value: "bold", label: "Bold", icon: <FormatAlignLeftIcon />, tooltip: "Bold" },
+            { value: "italic", label: "Italic", icon: <FormatAlignCenterIcon />, tooltip: "Italic" },
+            { value: "underline", label: "Underline", icon: <FormatAlignRightIcon />, tooltip: "Underline" },
+        ],
+    }),
+    id: "MuiMultipleToggleButtonGroup",
+};
+
+export { MuiSingleToggleButtonGroupElementRegistration, MuiMultipleToggleButtonGroupElementRegistration };

package/src/elements/Viewer360.tsx

@@ -0,0 +1,71 @@
+import * as React from "react";
+import { FormElementProps, FormElementRegistration } from "@vertigis/workflow";
+import { Pannellum } from "pannellum-react-update";
+import "pannellum-react-update/lib/pannellum/css/img/background.svg";
+import "pannellum-react-update/lib/pannellum/css/img/compass.svg";
+import "pannellum-react-update/lib/pannellum/css/img/grab.svg";
+import "pannellum-react-update/lib/pannellum/css/img/grabbing.svg";
+import "pannellum-react-update/lib/pannellum/css/img/sprites.svg";
+
+/**
+ * The generic type argument provided to `FormElementProps<T>` controls the type
+ * of `props.value` and `props.setValue(value)`. If your element doesn't need a
+ * `value`, you can omit the type argument.
+ *
+ * You can also declare additional public properties of your element by adding
+ * properties to this interface. The properties will be managed by the Workflow
+ * runtime, and passed in as `props`. You can update the properties by using
+ * `props.setProperty(key, value)`.
+ */
+interface Viewer360Props extends FormElementProps<string> {
+    value: string //url of image
+    pitch: number; //pitch of the image
+    yaw: number; //yaw of the image
+    hfov: number; //horizontal field of view
+    minHfov: number; //minimum horizontal field of view
+    haov: number; //horizontal angle of view
+    vaov: number; //vertical angle of view
+    setting?: {
+        width?: string;
+        height?: string;
+    };
+}
+
+/**
+ * A Workflow element built using React.
+ * @displayName Viewer360
+ * @description 360 viewer for propeller imagery.
+ * @param props The props that will be provided by the Workflow runtime.
+ */
+function Viewer360(props: Viewer360Props): React.ReactElement {
+    const { setting, value , pitch ,yaw, hfov, minHfov , haov, vaov, raiseEvent } = props;
+    console.log("rendering 360VIEWER")
+    return (
+        <>
+            <Pannellum
+                width={setting?.width || "100%"}
+                height={setting?.height || "auto"}
+                image={value}
+                pitch={pitch || -20}
+                yaw={yaw || 120}
+                hfov={hfov || 110}
+                haov={haov || 360}
+                vaov={vaov || 180}
+                minHfov={minHfov || 10}
+                autoLoad
+                onLoad={() => {
+                    raiseEvent("loaded" as any, value);
+                    console.log("panorama loaded");
+                }}
+            ></Pannellum>
+        </>
+    );
+}
+
+const Viewer360ElementRegistration: FormElementRegistration<Viewer360Props> = {
+    component: Viewer360,
+    getInitialProperties: () => ({}),
+    id: "Viewer360",
+};
+
+export default Viewer360ElementRegistration;

package/src/elements/modules/AttributeFilterEasyComp.tsx

@@ -0,0 +1,253 @@
+import * as React from "react";
+import { styled } from '@mui/material/styles';
+import InputBase from '@mui/material/InputBase';
+import Badge, { BadgeProps } from '@mui/material/Badge';
+import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip';
+import { createTheme } from "@mui/material/styles";
+import {
+    Unstable_NumberInput as BaseNumberInput,
+    NumberInputProps,
+    numberInputClasses,
+} from '@mui/base/Unstable_NumberInput';
+
+const Search =styled('div')(({ theme }) => ({
+    position: 'relative',
+    borderRadius: theme.shape.borderRadius,
+    backgroundColor: 'var(--alertGrayForeground)',
+    marginRight: theme.spacing(2),
+    marginLeft: 0,
+    width: '100%',
+    [theme.breakpoints.up('sm')]: {
+        marginLeft: theme.spacing(3),
+        width: 'auto',
+    },
+}))
+
+
+
+const SearchIconWrapper = 
+    styled('div')(({ theme }) => ({
+    padding: theme.spacing(0, 2),
+    height: '100%',
+    position: 'absolute',
+    pointerEvents: 'none',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+}))
+
+
+const StyledInputBase =
+     styled(InputBase)(({ theme }) => ({
+    color: 'inherit',
+    '& .MuiInputBase-input': {
+        padding: theme.spacing(1, 1, 1, 0),
+        paddingLeft: `calc(1em + ${theme.spacing(4)})`,
+        transition: theme.transitions.create('width'),
+        width: '100%',
+        [theme.breakpoints.up('md')]: {
+            width: '100%',
+        },
+    },
+ 
+
+}))
+
+const StyledBadge =
+styled(Badge)<BadgeProps>(({ theme }) => ({
+    '& .MuiBadge-badge': {
+      backgroundColor:'var(--alertAmberBackground)',
+        right: 5,
+        top: 0,
+        border: `2px solid ${theme.palette.background.paper}`,
+        padding: '0 4px',
+    },
+}))
+
+
+
+const grey = {
+    50: '#F3F6F9',
+    100: '#E5EAF2',
+    200: '#DAE2ED',
+    300: '#C7D0DD',
+    400: '#B0B8C4',
+    500: '#9DA8B7',
+    600: '#6B7A90',
+    700: '#434D5B',
+    800: '#303740',
+    900: '#1C2025',
+};
+
+
+
+const StyledButton =  styled('button')(
+    ({ theme }) => `
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: center;
+    align-items: center;
+    appearance: none;
+    padding: 0;
+    width: 19px;
+    height: 19px;
+    font-family: system-ui, sans-serif;
+    font-size: 0.875rem;
+    line-height: 1;
+    box-sizing: border-box;
+    background: var(--accentIconForeground) !important;
+    border: 0;
+    color: var(--accentIconBorder);
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 120ms;
+  
+    &:hover {
+      cursor: pointer;
+      color: #FFF;
+      background: var(--accentIconForeground) !important;
+      border-color: var(--accentIconBorder) !important;
+    }
+  
+    &.${numberInputClasses.incrementButton} {
+      grid-column: 2/3;
+      grid-row: 1/2;
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+      border: 1px solid;
+      border-bottom: 0;
+      border-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+      background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+      color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+  
+      &:hover {
+        cursor: pointer;
+        color: #FFF;
+        background: var(--accentIconForeground) !important;
+        border-color: var(--accentIconBorder);
+      }
+    }
+  
+    &.${numberInputClasses.decrementButton} {
+      grid-column: 2/3;
+      grid-row: 2/3;
+      border-bottom-left-radius: 4px;
+      border-bottom-right-radius: 4px;
+      border: 1px solid;
+      border-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+      background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+      color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+    }
+  
+    & .arrow {
+      transform: translateY(-1px);
+    }
+  `,
+)
+
+ 
+
+
+  const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
+    <Tooltip {...props} classes={{ popper: className }} />
+))(({ theme }) => ({
+    [`& .${tooltipClasses.tooltip}`]: {
+        boxShadow: theme.shadows[1],
+        fontSize: 15,
+    },
+}));
+
+const defaultTheme = createTheme({
+    components: {
+        MuiListItemText: {
+            styleOverrides: {
+                secondary: {
+                    color: 'inherit',
+                },
+            },
+        },
+    },
+
+    typography: {
+        fontSize: 18
+    },
+});
+
+const CustomNumberInput =React.forwardRef(function CustomNumberInputfunction(
+    props: NumberInputProps,
+    ref: React.ForwardedRef<HTMLDivElement>,
+) {
+    return (
+        <BaseNumberInput
+            slots={{
+                root: StyledInputRoot,
+                input: StyledInputElement,
+                incrementButton: StyledButton,
+                decrementButton: StyledButton,
+            }}
+            slotProps={{
+                incrementButton: {
+                    children: '▴',
+                },
+                decrementButton: {
+                    children: '▾',
+                },
+            }}
+            {...props}
+            ref={ref}
+        />
+    );
+})
+
+  const StyledInputElement = styled('input')(
+    () => `
+    font-size: 0.875rem;
+    font-family: inherit;
+    font-weight: 400;
+    line-height: 1.5;
+    grid-column: 1/2;
+    grid-row: 1/3;
+    color: var(--buttonBorderHover);
+    background: inherit;
+    border: none;
+    border-radius: inherit;
+    padding: 8px 12px;
+    outline: 0;
+  `,
+  );
+
+  const StyledInputRoot: React.ElementType = styled('div')(
+    ({ theme }) => `
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-weight: 400;
+    border-radius: 8px;
+    color: var(--accentIconBorder) ;
+    background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+    border: 1px solid var(--accentIconBorder);
+    box-shadow: 0 2px 4px ${
+      theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
+    };
+    display: grid;
+    grid-template-columns: 1fr 19px;
+    grid-template-rows: 1fr 1fr;
+    overflow: hidden;
+    column-gap: 8px;
+    padding: 4px;
+  
+      &.focused {
+        border-color: var(--accentIconForeground)};
+        box-shadow: 0 0 0 3px var(--buttonBackgroundHover);
+  
+        & button:hover {
+          background: var(--accentIconForeground) !important;
+        }
+  
+        /* firefox */
+        &:focus-visible {
+          outline: 0;
+      }
+  }
+    `,
+  );
+
+export default {Search,SearchIconWrapper,StyledInputBase,StyledBadge,StyledInputRoot,StyledInputElement,StyledButton,CustomNumberInput,defaultTheme,LightTooltip}

package/src/index.ts

@@ -0,0 +1,43 @@
+// Activities will be re-exported from this file.
+
+
+export { default as Base64ToFileActivity } from "./activities/Base64ToFile";
+export { default as GetvGISDetailsActivity } from "./activities/GetvGISDetails";
+export { default as LineChartMuiRegistration } from "./elements/LineChartMui";
+export { default as GetElementByDataLayoutIDActivity } from "./activities/GetElementByDataLayoutID";
+export { default as HeaderwithHelpElementRegistration } from "./elements/HeaderwithHelp";
+export { default as ItemSearcherElementRegistration } from "./elements/ItemSearcher";
+export { default as GetSesionStorageActivity } from "./activities/GetSesionStorage";
+export { default as SetSessionStorageActivity } from "./activities/SetSessionStorage";
+export { default as GetUserTokenActivity } from "./activities/GetUserToken";
+export { default as PDFMapGeneratorActivity } from "./activities/PDFMapGenerator";
+export { default as LegendCreatorActivity } from "./activities/LegendCreator";
+export { default as RequestCheckerActivity } from "./activities/RequestChecker"
+export { default as DropDownMenuElementRegistration } from "./elements/DropDownMenu";
+export { default as HTMLextractorActivity } from "./activities/HTMLextractor";
+export { default as AttributeFilterElementRegistration } from "./elements/AttributeFilter"
+export { default as ItemSearcher_V2DEVRegistration } from "./elements/ItemSearcher_v2";
+export { default as Viewer360Registration } from "./elements/Viewer360";
+export { default as TableRadioGroupElementRegistration } from "./elements/TableRadioGoup";
+export { MuiSingleToggleButtonGroupElementRegistration, MuiMultipleToggleButtonGroupElementRegistration } from "./elements/ToggleButtonGroup";
+
+// Elements
+export { default as CsColorPickerRegistration } from "./elements/CsColorPicker";
+export { default as CircularSliderElementRegistration } from "./elements/CircularSlider";
+export { default as SingleAutoCompleteCSRegistration } from "./elements/SingleAutoCompleteCS";
+export { default as MultipleAutoCompleteCSRegistration } from "./elements/MultipleAutoCompleteCS";
+export { default as TimelineRegistration } from "./elements/Timeline";
+export { default as MenueBarRegistration } from "./elements/MenueBar";
+
+
+// Activities
+export { default as AppendObjectsActivity } from "./activities/AppendObjects";
+export { default as MergeObjectsActivity } from "./activities/MergeObjects";
+export { default as CreateGraphicLayerActivity } from "./activities/CreateGraphicLayer";
+export { default as SliceLineActivity } from "./activities/SliceLine";
+export { default as GetTaskStatusActivity } from "./activities/GetTaskStatus";
+export { default as DrapGeometryActivity } from "./activities/DrapGeometry";
+
+export { default as SampleActivity } from "./activities/Sample";
+
+export { default as SampleInputRegistration } from "./elements/SampleInput";

package/src/main.ts

@@ -0,0 +1,15 @@
+import * as index from "./index";
+
+let mainResult: Promise<any> | undefined;
+
+export async function main(): Promise<any> {
+    if (mainResult) {
+        return mainResult;
+    }
+
+    // If you need to do activity pack initialization logic
+    // that can happen here.
+
+    mainResult = Promise.resolve(index);
+    return mainResult;
+}

package/src/styles/imageSlider.css

@@ -0,0 +1,34 @@
+/* styles.css */
+
+.image-slider {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.imgStyle {
+  height: 100%;
+  width: auto;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.spanStyle {
+  position: absolute;
+  bottom: 20px;
+  left: 20px;
+  background: #efefef;
+  color: #000000;
+  padding: 10px;
+  border-radius: 5px;
+}
+
+.divStyle {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+    "extends": "@vertigis/workflow-sdk/config/tsconfig.json",
+    "compilerOptions": {
+        "target": "es5",
+        "baseUrl": ".",
+        "suppressImplicitAnyIndexErrors": false,
+        "paths": {
+            "@arcgis/core/*": ["node_modules/@arcgis/core/*"]
+        }
+    },
+    "include": ["src", "../ebta-workflow-public/src/activities/MergeObjects.ts", "../ebta-workflow-public/src/activities/CreateGraphicLayer.ts"]
+}

package/uuid.js

@@ -0,0 +1,7 @@
+"use strict";
+
+// This is used to keep track of your unique project id.
+// Do not modify.
+const uuid = "7b4cac50-7743-4eda-9a3c-ecb51b6ea64e";
+
+module.exports = uuid;