├── src ├── config.js ├── assets │ ├── buldge.png │ ├── Buldgeleft.png │ ├── bulgeRight.svg │ ├── bulgeDown.svg │ ├── Close.svg │ ├── flog.svg │ ├── output.svg │ ├── Download.svg │ ├── eye.svg │ └── logo.svg ├── context │ ├── formStore.js │ ├── formReducer.js │ └── FormProvider.js ├── setupTests.js ├── App.test.js ├── components │ ├── LoaderComponent │ │ ├── LoaderComponent.module.css │ │ └── LoaderComponent.js │ ├── SlidingCardWithTabs │ │ ├── eyeComponent.js │ │ ├── SlidingCardWithTabs.module.css │ │ └── SlidingCardWithTabs.js │ ├── CardComponent │ │ ├── DescriptionCard.js │ │ ├── CardInput.js │ │ ├── ResultCardInput.js │ │ ├── Card.module.css │ │ ├── CardComponent.js │ │ └── ResultCardComponent.js │ ├── Navbar │ │ ├── Navbar.module.css │ │ └── Navbar.js │ ├── TableWithBar │ │ ├── TableWithBar.js │ │ └── TableWithBar.module.css │ └── Input │ │ ├── Input.js │ │ └── Input.module.css ├── index.css ├── reportWebVitals.js ├── utils │ ├── httpClient.js │ └── responseHelper.js ├── index.js ├── pages │ ├── ButtonSpace │ │ ├── ButtonSpace.module.css │ │ └── ButtonSpace.js │ ├── Evaluation │ │ ├── Evaluation.module.css │ │ └── Evaluation.js │ ├── AllTasks │ │ ├── AllTasks.module.css │ │ └── AllTasks.js │ ├── NameSpace │ │ ├── NameSpace.module.css │ │ └── NameSpace.js │ ├── FlowChart │ │ ├── lineStyle.js │ │ ├── FlowChart.module.css │ │ └── FlowChart.js │ └── Home │ │ ├── Home.module.css │ │ └── Home.js ├── constants.js ├── App.css ├── services │ └── RuleService.js ├── App.js └── logo.svg ├── public ├── robots.txt ├── favicon.ico ├── logo192.png ├── logo512.png ├── manifest.json └── index.html ├── .gitignore ├── package.json └── README.md /src/config.js: -------------------------------------------------------------------------------- 1 | export const CONFIG ="https://bonsai-dbrms.herokuapp.com"; -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/redis-developer/bonsai-frontend/main/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/redis-developer/bonsai-frontend/main/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/redis-developer/bonsai-frontend/main/public/logo512.png -------------------------------------------------------------------------------- /src/assets/buldge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/redis-developer/bonsai-frontend/main/src/assets/buldge.png -------------------------------------------------------------------------------- /src/assets/Buldgeleft.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/redis-developer/bonsai-frontend/main/src/assets/Buldgeleft.png -------------------------------------------------------------------------------- /src/context/formStore.js: -------------------------------------------------------------------------------- 1 | export const initialState = { 2 | 3 | form: {}, 4 | }; 5 | 6 | export const initialStateName = { 7 | 8 | name: {}, 9 | }; -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /src/components/LoaderComponent/LoaderComponent.module.css: -------------------------------------------------------------------------------- 1 | .LoaderParent { 2 | position: fixed; 3 | z-index: 40; 4 | height: 100%; 5 | width: 100%; 6 | text-align: center; 7 | align-items: center; 8 | display: flex; 9 | justify-content: center; 10 | background: rgba(0, 0, 0, 0.6); 11 | } 12 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | html{ 2 | margin: 0; 3 | padding: 0; 4 | } 5 | body { 6 | margin: 0; 7 | font-family: 'Poppins', sans-serif; 8 | -webkit-font-smoothing: antialiased; 9 | -moz-osx-font-smoothing: grayscale; 10 | background: #eeeeee 0% 0% no-repeat padding-box; 11 | overflow-x: hidden; 12 | 13 | 14 | } 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | /.env -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src/components/SlidingCardWithTabs/eyeComponent.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import eyeIcon from "../../assets/eye.svg"; 3 | import classes from './SlidingCardWithTabs.module.css'; 4 | export default function eyeComponent(item,history) { 5 | return ( 6 |
7 | { 8 | history.push(`/result?${item}`) 9 | }} /> 10 |
11 | ) 12 | } 13 | -------------------------------------------------------------------------------- /src/components/CardComponent/DescriptionCard.js: -------------------------------------------------------------------------------- 1 | import classes from './Card.module.css' 2 | import React from 'react' 3 | import {InputMax}from "../Input/Input" 4 | export default function DescriptionCard({onChange}) { 5 | return ( 6 |
7 |
8 | 9 |
10 | 11 |
12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /src/assets/bulgeRight.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/bulgeDown.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/utils/httpClient.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | import { CONFIG } from '../config'; 3 | 4 | const HEADERS = { 5 | 'Content-Type': 'application/json', 6 | }; 7 | 8 | export const HttpClient = axios.create({ 9 | baseURL: `${CONFIG}`, 10 | headers: { 11 | ...HEADERS, 12 | }, 13 | }); 14 | 15 | HttpClient.interceptors.request.use((config) => { 16 | return config; 17 | }); 18 | 19 | HttpClient.interceptors.response.use( 20 | (res) => { 21 | return Promise.resolve(res); 22 | }, 23 | (error) => { 24 | console.log(error); 25 | return Promise.reject(error); 26 | } 27 | ); 28 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /src/assets/Close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | import { BrowserRouter as Router } from "react-router-dom"; 7 | ReactDOM.render( 8 | 9 | 10 | 11 | 12 | 13 | 14 | , 15 | document.getElementById('root') 16 | ); 17 | 18 | // If you want to start measuring performance in your app, pass a function 19 | // to log results (for example: reportWebVitals(console.log)) 20 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 21 | reportWebVitals(); 22 | -------------------------------------------------------------------------------- /src/components/LoaderComponent/LoaderComponent.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock'; 3 | import classes from './LoaderComponent.module.css'; 4 | import Loader from 'react-loader-spinner'; 5 | 6 | const LoaderComponent = ({loading}) => { 7 | 8 | const targetElement = document.getElementById('root'); 9 | if (loading) { 10 | disableBodyScroll(targetElement); 11 | } else enableBodyScroll(targetElement); 12 | return loading ? ( 13 |
14 | 15 |
16 | ) : null; 17 | }; 18 | 19 | export default LoaderComponent; 20 | -------------------------------------------------------------------------------- /src/pages/ButtonSpace/ButtonSpace.module.css: -------------------------------------------------------------------------------- 1 | .ButtonSpace{ 2 | padding: 1.58vw; 3 | background: #eeeeee 0% 0% no-repeat padding-box; 4 | width: fit-content; 5 | } 6 | .container{ 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | width: 96.82vw; 11 | background: #ffffff 0% 0% no-repeat padding-box; 12 | height: 80vh; 13 | flex-direction: column; 14 | margin-top: 2vw; 15 | border-radius: 1.56vw; 16 | } 17 | .Heading{ 18 | font-size: 3vw; 19 | font-weight: 900; 20 | text-align: center; 21 | color: #0c0c18; 22 | margin-bottom: 4vw; 23 | } 24 | .ButtonContainer{ 25 | display: grid; 26 | justify-content: space-between; 27 | align-items: center; 28 | grid-template-columns: 30% 30% 30%; 29 | gap: 2vw; 30 | } -------------------------------------------------------------------------------- /src/context/formReducer.js: -------------------------------------------------------------------------------- 1 | import { SET_FORM, REMOVE_FORM} from "../constants"; 2 | 3 | export const formReducer = (state, action) => { 4 | switch (action.type) { 5 | case SET_FORM: 6 | return { 7 | ...state, 8 | form: action.payload, 9 | 10 | }; 11 | case REMOVE_FORM: 12 | return { 13 | ...state, 14 | form: {}, 15 | 16 | }; 17 | default: 18 | return state; 19 | } 20 | }; 21 | 22 | export const nameReducer = (state, action) => { 23 | switch (action.type) { 24 | case SET_FORM: 25 | return { 26 | ...state, 27 | name: action.payload, 28 | 29 | }; 30 | case REMOVE_FORM: 31 | return { 32 | ...state, 33 | name: {}, 34 | 35 | }; 36 | default: 37 | return state; 38 | } 39 | }; 40 | -------------------------------------------------------------------------------- /src/assets/flog.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | FROG 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/context/FormProvider.js: -------------------------------------------------------------------------------- 1 | import React, { createContext, useReducer } from "react"; 2 | import { initialState,initialStateName } from "./formStore"; 3 | import { formReducer,nameReducer } from "./formReducer"; 4 | 5 | export const FormContext = createContext(); 6 | 7 | export const FormProvider = ({ children }) => { 8 | const [state, dispatch] = useReducer(formReducer, initialState); 9 | return ( 10 | 11 | {children} 12 | 13 | ); 14 | }; 15 | 16 | export const NameContext = createContext(); 17 | 18 | export const NameProvider = ({ children }) => { 19 | const [state, dispatch] = useReducer(nameReducer, initialStateName); 20 | return ( 21 | 22 | {children} 23 | 24 | ); 25 | }; -------------------------------------------------------------------------------- /src/assets/output.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | OUTPUT 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/constants.js: -------------------------------------------------------------------------------- 1 | export const TYPE_OPTIONS = { 2 | "gt": [{ id: "", name: "None" },{ id: "int", name: "Integer" }], 3 | "lt": [{ id: "", name: "None" },{ id: "int", name: "Integer" }], 4 | "eq": [{ id: "", name: "None" },{ id: "int", name: "Integer" }, { id: "string", name: "String" }], 5 | "ct": [{ id: "", name: "None" },{ id: "string", name: "String" }], 6 | "":[] 7 | } 8 | 9 | 10 | export const TYPE_ENUMS={ 11 | "gt": ">", 12 | "lt": "<", 13 | "eq": "=", 14 | "ct": "Contains", 15 | } 16 | 17 | 18 | export const SET_FORM = "SET_FORM"; 19 | export const REMOVE_FORM = "REMOVE_FORM"; 20 | 21 | 22 | export const Operator_OPTIONS = { 23 | "string": [{ id: "", name: "None" },{ id: "eq", name: "=" },{ id: "ct", name: "Contains" }], 24 | "int": [{ id: "", name: "None" },{ id: "gt", name: ">" },{ id: "lt", name: "<" },{ id: "eq", name: "=" }], 25 | 26 | } -------------------------------------------------------------------------------- /src/pages/Evaluation/Evaluation.module.css: -------------------------------------------------------------------------------- 1 | .Evaluation { 2 | padding: 1.58vw; 3 | background: #eeeeee 0% 0% no-repeat padding-box; 4 | width: fit-content; 5 | } 6 | .Container{ 7 | display: flex; 8 | justify-content: flex-start; 9 | align-items: center; 10 | width: 95.82vw; 11 | background: #ffffff 0% 0% no-repeat padding-box; 12 | min-height: 72vh; 13 | height: auto; 14 | flex-direction: column; 15 | margin-top: 2vw; 16 | border-radius: 1.56vw; 17 | padding-top: 4vw; 18 | } 19 | .Heading{ 20 | font-size: 3vw; 21 | font-weight: 900; 22 | text-align: center; 23 | color: #0c0c18; 24 | margin-bottom: 4vw; 25 | } 26 | 27 | .Table{ 28 | box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; 29 | padding: 1vw; 30 | border-radius: 1.5vw; 31 | padding-bottom: 4vw; 32 | width: 50vw; 33 | } 34 | .Submit{ 35 | margin-top: 2vw; 36 | cursor: pointer; 37 | margin-bottom: 2vw; 38 | } -------------------------------------------------------------------------------- /src/components/Navbar/Navbar.module.css: -------------------------------------------------------------------------------- 1 | .Navbar { 2 | width: 96.82vw; 3 | height: 5.83vw; 4 | background: #0c0c18 0% 0% no-repeat padding-box; 5 | border-radius: 1.56vw; 6 | opacity: 1; 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | 11 | } 12 | .logo{ 13 | width: 5.05vw; 14 | height:4.427vw ; 15 | } 16 | .logo img{ 17 | width: 100%; 18 | height: 100%; 19 | } 20 | 21 | .NavbarWithLinks { 22 | width: 93.82vw; 23 | height: 5.83vw; 24 | background: #0c0c18 0% 0% no-repeat padding-box; 25 | border-radius: 1.56vw; 26 | opacity: 1; 27 | display: flex; 28 | justify-content: space-between; 29 | align-items: center; 30 | padding-left: 1.5vw; 31 | padding-right: 1.5vw; 32 | 33 | } 34 | .NavbarWithLinks a{ 35 | text-decoration: none; 36 | } 37 | 38 | .LinkContainer{ 39 | display: grid; 40 | place-items: center; 41 | grid-template-columns: repeat(3,1fr); 42 | gap: 2vw; 43 | } -------------------------------------------------------------------------------- /src/assets/Download.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/pages/AllTasks/AllTasks.module.css: -------------------------------------------------------------------------------- 1 | .AllTasks{ 2 | padding: 1.58vw; 3 | background: #eeeeee 0% 0% no-repeat padding-box; 4 | width: fit-content; 5 | 6 | } 7 | .Container{ 8 | display: flex; 9 | justify-content: flex-start; 10 | align-items: center; 11 | width: 95.82vw; 12 | background: #ffffff 0% 0% no-repeat padding-box; 13 | min-height: 72vh; 14 | height: auto; 15 | flex-direction: column; 16 | margin-top: 2vw; 17 | border-radius: 1.56vw; 18 | padding-top: 4vw; 19 | 20 | } 21 | .Heading{ 22 | font-size: 3vw; 23 | font-weight: 900; 24 | text-align: center; 25 | color: #0c0c18; 26 | margin-bottom: 4vw; 27 | } 28 | .Eye{ 29 | width: 1.5vw; 30 | height: 1.5vw; 31 | margin: auto; 32 | cursor: pointer; 33 | } 34 | .Table{ 35 | box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; 36 | padding: 1vw; 37 | border-radius: 1.5vw; 38 | padding-bottom: 4vw; 39 | margin-bottom: 4vw; 40 | width: 50vw; 41 | } -------------------------------------------------------------------------------- /src/pages/NameSpace/NameSpace.module.css: -------------------------------------------------------------------------------- 1 | .NameSpace { 2 | padding: 1.58vw; 3 | background: #eeeeee 0% 0% no-repeat padding-box; 4 | width: fit-content; 5 | } 6 | 7 | .Container { 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | width: 96.82vw; 12 | background: #ffffff 0% 0% no-repeat padding-box; 13 | height: 80vh; 14 | flex-direction: column; 15 | margin-top: 2vw; 16 | border-radius: 1.56vw; 17 | } 18 | .Heading { 19 | font-size: 2vw; 20 | font-weight: 900; 21 | text-align: center; 22 | color: #0c0c18; 23 | } 24 | 25 | .Button { 26 | width: 15.41vw; 27 | height: 3.37vw; 28 | background: #0c0c18 0% 0% no-repeat padding-box; 29 | border-radius: 1.56vw; 30 | opacity: 1; 31 | text-align: center; 32 | font-size: 2.83; 33 | font-weight: 600; 34 | letter-spacing: 0px; 35 | color: #ffffff; 36 | opacity: 1; 37 | text-transform: uppercase; 38 | align-content: center; 39 | display: flex; 40 | justify-content: center; 41 | align-items: center; 42 | cursor: pointer; 43 | } 44 | -------------------------------------------------------------------------------- /src/pages/FlowChart/lineStyle.js: -------------------------------------------------------------------------------- 1 | export const lineStyle = (start, end, lable, headSize = 0) => { 2 | return { 3 | start: start, 4 | end: end, 5 | color: "#0c0c18", 6 | headSize: headSize, 7 | label: { end: "endLabel" }, 8 | strokeWidth: 3, 9 | label: lable ? { 10 | middle: ( 11 |
14 | AND 15 |
16 | ), 17 | } : null, 18 | path: "smooth", 19 | 20 | } 21 | } 22 | 23 | export const lineStyleWitharrow = (start, end, lable, headSize = 0) => { 24 | return { 25 | start: start, 26 | end: end, 27 | color: "#0c0c18", 28 | headSize: headSize, 29 | label: { end: "endLabel" }, 30 | strokeWidth: 3, 31 | startAnchor:["bottom"], 32 | endAnchor:['top'], 33 | label: lable ? { 34 | middle: ( 35 |
38 | AND 39 |
40 | ), 41 | } : null, 42 | 43 | 44 | } 45 | } -------------------------------------------------------------------------------- /src/components/CardComponent/CardInput.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Input, DropDown, DropDownType } from "../../components/Input/Input"; 3 | import { TYPE_OPTIONS } from "../../constants" 4 | export default function CardInput({ onChange, data ,formData}) { 5 | return ( 6 | <> 7 |
8 | {" "} 9 | 15 |
16 |
17 | {" "} 18 | 25 |
26 |
27 | {" "} 28 | 35 |
36 | 37 | ); 38 | } 39 | -------------------------------------------------------------------------------- /src/components/CardComponent/ResultCardInput.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Input, DropDown, DropDownType } from "../../components/Input/Input"; 3 | import { TYPE_OPTIONS } from "../../constants" 4 | export default function ResultCardInput({ onChange, data, formData }) { 5 | return ( 6 | <> 7 |
8 | 9 | 15 |
16 |
17 | {" "} 18 | 25 |
26 |
27 | {" "} 28 | 35 |
36 | 37 | ); 38 | } 39 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | textarea:focus, 2 | input:focus, 3 | select:focus { 4 | outline: none; 5 | } 6 | 7 | .btn-blue { 8 | width: 9.84vw; 9 | height: 4.37vw; 10 | background: #0c0c18 0% 0% no-repeat padding-box; 11 | border-radius: 1.56vw; 12 | opacity: 1; 13 | text-align: center; 14 | font-size: 0.83vw; 15 | font-weight: 600; 16 | letter-spacing: 0px; 17 | color: #ffffff; 18 | opacity: 1; 19 | text-transform: uppercase; 20 | align-content: center; 21 | display: flex; 22 | justify-content: center; 23 | align-items: center; 24 | cursor: pointer; 25 | } 26 | .ButtonContainer { 27 | justify-content: center; 28 | display: flex; 29 | } 30 | .hover :hover { 31 | cursor: pointer; 32 | } 33 | .btn-blue :hover { 34 | cursor: pointer; 35 | } 36 | 37 | .btn-blue-link { 38 | width: 5.84vw; 39 | height: 2.37vw; 40 | background: #ffffff 0% 0% no-repeat padding-box; 41 | border-radius: .7vw; 42 | opacity: 1; 43 | text-align: center; 44 | font-size: 0.83vw; 45 | font-weight: 600; 46 | letter-spacing: 0px; 47 | color: #0c0c18; 48 | opacity: 1; 49 | text-transform: uppercase; 50 | align-content: center; 51 | display: flex; 52 | justify-content: center; 53 | align-items: center; 54 | cursor: pointer; 55 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hackerthon", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.11.4", 7 | "@testing-library/react": "^11.1.0", 8 | "@testing-library/user-event": "^12.1.10", 9 | "axios": "^0.21.1", 10 | "body-scroll-lock": "^3.1.5", 11 | "lodash": "^4.17.21", 12 | "react": "^17.0.2", 13 | "react-animations": "^1.0.0", 14 | "react-dom": "^17.0.2", 15 | "react-loader-spinner": "^4.0.0", 16 | "react-paginate": "^7.1.2", 17 | "react-router-dom": "^5.2.0", 18 | "react-scripts": "4.0.3", 19 | "react-xarrows": "^1.6.1", 20 | "shortid": "^2.2.16", 21 | "styled-components": "^5.2.3", 22 | "uuid": "^8.3.2", 23 | "web-vitals": "^1.0.1" 24 | }, 25 | "scripts": { 26 | "start": "react-scripts start", 27 | "build": "react-scripts build", 28 | "test": "react-scripts test", 29 | "eject": "react-scripts eject" 30 | }, 31 | "eslintConfig": { 32 | "extends": [ 33 | "react-app", 34 | "react-app/jest" 35 | ] 36 | }, 37 | "browserslist": { 38 | "production": [ 39 | ">0.2%", 40 | "not dead", 41 | "not op_mini all" 42 | ], 43 | "development": [ 44 | "last 1 chrome version", 45 | "last 1 firefox version", 46 | "last 1 safari version" 47 | ] 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /src/assets/eye.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 11 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /src/services/RuleService.js: -------------------------------------------------------------------------------- 1 | import { HttpClient } from '../utils/httpClient'; 2 | 3 | const PATH = { 4 | createRule: '/rule/', 5 | getAllRules:"/rules/", 6 | getAtrribute:"/attributes/", 7 | ruleEvaluation:"/rules_evaluation/", 8 | getRuleById:"/rule" 9 | 10 | }; 11 | 12 | const createRule = (payload, start, callback, error, next) => { 13 | start(); 14 | return HttpClient.post(`${PATH.createRule}`, payload).then(callback).catch(error).finally(next); 15 | }; 16 | const getAllRules = (namespace, start, callback, error, next) => { 17 | start(); 18 | return HttpClient.get(`${PATH.getAllRules}?namespace=${namespace}`,).then(callback).catch(error).finally(next); 19 | }; 20 | const getRuleById = (rule_id,namespace, start, callback, error, next) => { 21 | start(); 22 | return HttpClient.get(`${PATH.getRuleById}?namespace=${namespace}&rule_id=${rule_id}`,).then(callback).catch(error).finally(next); 23 | }; 24 | const getAllAtrribute = (namespace, start, callback, error, next) => { 25 | start(); 26 | return HttpClient.get(`${PATH.getAtrribute}?namespace=${namespace}`,).then(callback).catch(error).finally(next); 27 | }; 28 | const ruleEvaluation = (namespace,payload, start, callback, error, next) => { 29 | start(); 30 | return HttpClient.post(`${PATH.ruleEvaluation}?namespace=${namespace}`,payload).then(callback).catch(error).finally(next); 31 | }; 32 | 33 | 34 | 35 | export const RuleService = { 36 | createRule, 37 | getAllRules, 38 | ruleEvaluation, 39 | getAllAtrribute, 40 | getRuleById 41 | 42 | }; 43 | -------------------------------------------------------------------------------- /src/components/TableWithBar/TableWithBar.js: -------------------------------------------------------------------------------- 1 | import classes from './TableWithBar.module.css'; 2 | import React, { useState } from 'react'; 3 | import { get as LodashGet } from 'lodash'; 4 | 5 | const TableWithBar = ({ head, keys, data, totalCount, addIndex = false, }) => { 6 | 7 | return ( 8 |
9 |
10 | {totalCount>=0 &&
Total Count : {totalCount>=0 ? totalCount : null}
} 11 |
12 |
13 |
14 |
15 | 16 | 17 | {head?.map((item) => ( 18 | 19 | ))} 20 | 21 | {data?.length ? ( 22 | data.map((row, i) => ( 23 | 24 | {addIndex ? : null} 25 | {keys?.map((key) => ( 26 | 27 | ))} 28 | 29 | )) 30 | ) : ( 31 | 32 | 37 | 38 | )} 39 |
{item}
{i + 1}{typeof LodashGet(row, key) !== 'boolean' ? LodashGet(row, key) : LodashGet(row, key).toString()}
33 |
34 |
No Records To Display
35 |
36 |
40 |
41 | 42 | 43 |
44 | ); 45 | }; 46 | 47 | export default TableWithBar; 48 | -------------------------------------------------------------------------------- /src/pages/ButtonSpace/ButtonSpace.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useContext, useEffect } from 'react' 2 | import classes from "./ButtonSpace.module.css"; 3 | import { NameContext } from "../../context/FormProvider"; 4 | import Navbar from "../../components/Navbar/Navbar"; 5 | 6 | export default function ButtonSpace(props) { 7 | const { state } = useContext(NameContext) 8 | useEffect(() => { 9 | // props.setLoading(true) 10 | if(state.name.namespace===undefined){ 11 | props.history.push('/') 12 | } 13 | },[state]) 14 | return ( 15 |
16 | 17 |
18 |
19 | Namespace: {state.name && String(state.name.namespace).toLowerCase().split('_')[0]} {state.name && String(state.name.namespace).toLowerCase().split('_')[1]} 20 |
21 |
22 |
{ props.history.push("/create") }}> 23 | CREATE 24 |
25 |
{ props.history.push("/evaluation") }}> 26 | EVALUATION 27 |
28 |
{ props.history.push("/tasks") }}> 29 | ALL RULES 30 |
31 |
32 | 33 |
34 |
35 | ) 36 | } 37 | -------------------------------------------------------------------------------- /src/components/Navbar/Navbar.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import classes from "./Navbar.module.css"; 3 | import logoIcon from "../../assets/logo.svg"; 4 | import { withRouter, Link } from "react-router-dom" 5 | const Navbar = (props) => { 6 | const params = props.match.path; 7 | 8 | return ( 9 | <> 10 | { 11 | params === "/" || params === "/button" ? (
12 |
13 | logo 14 |
15 |
) : (
16 |
17 | logo 18 |
19 |
20 |
21 |
Create
22 |
23 |
24 |
Evaluation
25 |
26 |
27 |
All Rules
28 |
29 |
30 | 31 |
) 32 | } 33 | 34 | ) 35 | } 36 | 37 | export default withRouter(Navbar); 38 | -------------------------------------------------------------------------------- /src/pages/NameSpace/NameSpace.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useContext, useEffect } from 'react' 2 | import classes from "./NameSpace.module.css"; 3 | import Navbar from "../../components/Navbar/Navbar"; 4 | import { DropDownMax } from "../../components/Input/Input"; 5 | import {NameContext } from "../../context/FormProvider"; 6 | export default function NameSpace(props) { 7 | const [formData,setFormData]=useState({}); 8 | const {dispatch} = useContext(NameContext) 9 | const handleChange = (e) => { 10 | let { value, name } = e.target 11 | setFormData((prev) => { 12 | return { ...prev, [name]: value } 13 | }) 14 | } 15 | const handleClick =()=>{ 16 | dispatch({ 17 | type: "SET_FORM", 18 | payload: formData, 19 | }); 20 | if(formData.namespace){ 21 | props.history.push("/button") 22 | } 23 | } 24 | return ( 25 |
26 | 27 |
28 |
29 | Select Name Space 30 |
31 |
32 | 33 |
34 | 35 |
36 | SUBMIT 37 |
38 |
39 | 40 |
41 | ) 42 | } 43 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import Home from "./pages/Home/Home"; 2 | import FlowChart from "./pages/FlowChart/FlowChart" 3 | import "./App.css"; 4 | import { Switch, Redirect, Route } from "react-router-dom"; 5 | import { FormProvider, NameProvider } from "./context/FormProvider"; 6 | import NameSpace from "./pages/NameSpace/NameSpace"; 7 | import ButtonSpace from "./pages/ButtonSpace/ButtonSpace"; 8 | import AllTasks from "./pages/AllTasks/AllTasks"; 9 | import Evaluation from "./pages/Evaluation/Evaluation"; 10 | import LoaderComponent from "./components/LoaderComponent/LoaderComponent"; 11 | import React, { useState,useEffect } from "react" 12 | function App() { 13 | const [loading, setLoading] = useState(false) 14 | return ( 15 |
16 | 17 | 18 | 19 | 20 | 21 | ()} /> 22 | ()} /> 23 | 24 | ()} /> 25 | ()} /> 26 | ()} /> 27 | 28 | 29 | 30 |
31 | ); 32 | } 33 | 34 | export default App; 35 | -------------------------------------------------------------------------------- /src/pages/Home/Home.module.css: -------------------------------------------------------------------------------- 1 | .Home { 2 | padding: 1.58vw; 3 | background: #eeeeee 0% 0% no-repeat padding-box; 4 | /* width: 100%; 5 | height: 56.25vw; */ 6 | /* height: 59.25vw; */ 7 | width: fit-content; 8 | 9 | } 10 | .Container { 11 | padding-left: 1.9vw; 12 | padding-right: 0.9vw; 13 | display: grid; 14 | grid-template-columns: 70% 30%; 15 | grid-gap: 3.95vw; 16 | margin-top: 1.56vw; 17 | align-self: flex-start; 18 | align-content: flex-start; 19 | 20 | 21 | } 22 | .CardContainer { 23 | display: grid; 24 | grid-template-columns: 100%; 25 | grid-gap: 0px; 26 | padding: 0; 27 | margin: 0; 28 | } 29 | 30 | .Reference { 31 | width: 19.63vw; 32 | height: 45vw; 33 | background: #ffffff 0% 0% no-repeat padding-box; 34 | border-radius: 1.56vw; 35 | opacity: 1; 36 | padding: 2vw 1vw; 37 | } 38 | 39 | 40 | 41 | .Heading { 42 | text-align: center; 43 | font-size: 1.2vw; 44 | font-weight: bold; 45 | letter-spacing: 0.052vw; 46 | color: #313131; 47 | text-transform: uppercase; 48 | opacity: 1; 49 | margin-bottom: 2vw; 50 | } 51 | .SubHeading { 52 | text-align: center; 53 | font-size: 0.833vw; 54 | font-weight: normal; 55 | letter-spacing: 0px; 56 | color: #313131; 57 | opacity: 1; 58 | margin-bottom: 2vw; 59 | } 60 | .SubHeading span{ 61 | font-weight: bold; 62 | } 63 | .Left { 64 | display: flex; 65 | justify-content: center; 66 | align-items: center; 67 | flex-direction: column; 68 | padding: 0;margin: 0; 69 | align-self: flex-start 70 | } 71 | 72 | .test{ 73 | margin-top: 1.5vw; 74 | } 75 | 76 | .ResultContainer { 77 | padding-left: 2.9vw; 78 | padding-right: 0.9vw; 79 | display: grid; 80 | grid-template-columns: 70% 30%; 81 | grid-gap: 3.95vw; 82 | margin-top: 1.56vw; 83 | align-self: flex-start; 84 | align-content: flex-start; 85 | background-color:#ffffff ; 86 | } -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 21 | 22 | 31 | React App 32 | 33 | 34 | 35 |
36 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /src/components/SlidingCardWithTabs/SlidingCardWithTabs.module.css: -------------------------------------------------------------------------------- 1 | .Backdrop { 2 | position: fixed; 3 | top: 0; 4 | left: 0; 5 | width: 100vw; 6 | height: 100vh; 7 | background-color: rgb(0, 0, 0, 0.7); 8 | z-index: 1; 9 | } 10 | 11 | .Container { 12 | background: #ffffff 0% 0% no-repeat padding-box; 13 | box-shadow: 0px 1vw 2.6vw #0000000d; 14 | opacity: 1; 15 | border-radius: 1.56vw; 16 | position: fixed; 17 | width: 18.76vw; 18 | height: 90vh; 19 | z-index: 2; 20 | top: 0.5vw; 21 | right: 2vw; 22 | padding: 2vw 2.34vw; 23 | } 24 | 25 | .Buldge { 26 | position: absolute; 27 | left: -5vw; 28 | } 29 | 30 | .Buldge img { 31 | height: 7.8vw; 32 | } 33 | 34 | .CloseIcon { 35 | position: absolute; 36 | left: -3.9vw; 37 | top: 3.45vw; 38 | height: 0.9333vw; 39 | cursor: pointer; 40 | } 41 | .Heading { 42 | text-align: center; 43 | margin-bottom: 2vw; 44 | font-size: 1vw; 45 | font-weight: bold; 46 | text-transform: uppercase; 47 | } 48 | .InnerCard { 49 | width: 14.77vw; 50 | height: auto; 51 | min-height: 10.52vw; 52 | background: #f9f9f9 0% 0% no-repeat padding-box; 53 | border-radius: 1.56vw; 54 | opacity: 1; 55 | display: grid; 56 | grid-template-columns: 50% 50%; 57 | gap: 0vw; 58 | color: black; 59 | padding: 2vw; 60 | margin-top: 4vw; 61 | } 62 | .InnerCardResult { 63 | width: 14.77vw; 64 | height: auto; 65 | min-height: 10.52vw; 66 | background: #f9f9f9 0% 0% no-repeat padding-box; 67 | border-radius: 1.56vw; 68 | opacity: 1; 69 | display: grid; 70 | grid-template-columns: 33.33% 33.33% 33.33%; 71 | gap: 0.1vw; 72 | color: black; 73 | padding: 2vw; 74 | } 75 | .operatorHead{ 76 | text-align: center; 77 | font-weight: bold; 78 | font-size: .9vw; 79 | } 80 | .operator{ 81 | text-align: center; 82 | font-size: .9vw; 83 | } 84 | 85 | 86 | .Table{ 87 | width: 14.77vw; 88 | height: auto; 89 | min-height: 10.52vw; 90 | background: #f9f9f9 0% 0% no-repeat padding-box; 91 | border-radius: 1.56vw; 92 | opacity: 1; 93 | color: black; 94 | padding: 0vw 2vw; 95 | margin-bottom: 2vw; 96 | } 97 | .Eye{ 98 | width: 1.5vw; 99 | height: 1.5vw; 100 | margin: auto; 101 | cursor: pointer; 102 | } -------------------------------------------------------------------------------- /src/pages/AllTasks/AllTasks.js: -------------------------------------------------------------------------------- 1 | import classes from './AllTasks.module.css'; 2 | import React, { useState, useContext, useEffect } from 'react'; 3 | import NavBar from "../../components/Navbar/Navbar" 4 | import TableComponent from "../../components/TableWithBar/TableWithBar"; 5 | import eyeIcon from "../../assets/eye.svg"; 6 | import { FormContext, NameContext } from "../../context/FormProvider"; 7 | import { RuleService } from "../../services/RuleService" 8 | export default function AllTasks(props) { 9 | let [head, setHead] = useState(["Rule Id", "Description", "Action"]); 10 | let [keys, setKeys] = useState(["id", "rule_description", "action"]); 11 | let [data, setData] = useState([]); 12 | const { state, dispatch } = useContext(FormContext); 13 | const { state: stateName } = useContext(NameContext); 14 | const startLoader = () => { props.setLoading(true) }; 15 | const stopLoader = () => { props.setLoading(false) }; 16 | 17 | 18 | useEffect(() => { 19 | if(stateName.name.namespace===undefined){ 20 | props.history.push('/') 21 | } 22 | let namespace = stateName.name.namespace 23 | RuleService.getAllRules(namespace, startLoader, handleGetRuleSuccess, (err) => console.log(err), stopLoader) 24 | }, [stateName]); 25 | const handleGetRuleSuccess = ({ data }) => { 26 | // let resData =[...data]; 27 | 28 | let resData = data.map((item) => ({ 29 | ...item, 30 | action: eye(item) 31 | })) 32 | setData(resData) 33 | } 34 | const eye = (item) => ( 35 |
36 | { 37 | 38 | dispatch({ 39 | type: "SET_FORM", 40 | payload: item, 41 | }); 42 | props.history.push('/result') 43 | }} /> 44 |
45 | ); 46 | 47 | return ( 48 |
49 | 50 |
51 |
52 | All Rules 53 |
54 |
55 |
56 |
57 | ) 58 | } 59 | -------------------------------------------------------------------------------- /src/components/Input/Input.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import classes from "./Input.module.css"; 3 | 4 | export const Input = ({ label, name, data, onChange,type="text" }) => { 5 | return ( 6 |
7 | 8 | 9 |
10 | ) 11 | } 12 | 13 | export const DropDown = ({ data, label, name, onChange }) => { 14 | return ( 15 | <> 16 | 17 |
18 | 19 | 26 |
27 | 28 | ) 29 | } 30 | 31 | export const DropDownType = ({ data, label, name, onChange, options }) => { 32 | return ( 33 | <> 34 | 35 |
36 | 37 | 43 |
44 | 45 | ) 46 | } 47 | 48 | 49 | export const DropDownMax = ({ label, name, onChange, options }) => { 50 | return ( 51 | <> 52 | 53 |
54 | 55 | 61 |
62 | 63 | ) 64 | } 65 | 66 | export const InputMax = ({ label, name, data, onChange }) => { 67 | return ( 68 |
69 | 70 | 71 |
72 | ) 73 | } 74 | 75 | -------------------------------------------------------------------------------- /src/components/CardComponent/Card.module.css: -------------------------------------------------------------------------------- 1 | .Card { 2 | width: 63.37vw; 3 | height: auto; 4 | /* min-height: 18.697vw; */ 5 | background: #ffffff 0% 0% no-repeat padding-box; 6 | border-radius: 1.56vw; 7 | opacity: 1; 8 | display: grid; 9 | grid-template-columns: 30% 65.54%; 10 | padding-top: 1.56vw; 11 | margin-bottom: 1.56vw; 12 | margin-top: 1.56vw; 13 | gap: 0vw; 14 | } 15 | 16 | .VariableContainer { 17 | padding: 1.5vw; 18 | margin-left: 2vw; 19 | margin-top: -.4vw; 20 | } 21 | .ValueContainer { 22 | width: 42.3vw; 23 | height: auto; 24 | /* min-height: 14.58vw; */ 25 | background: #f9f9f9 0% 0% no-repeat padding-box; 26 | border-radius: 1.56vw; 27 | opacity: 1; 28 | display: flex; 29 | justify-content: center; 30 | } 31 | 32 | .InputContainer { 33 | display: grid; 34 | grid-template-columns: 33.33% 33.33% 33.33%; 35 | grid-auto-rows: auto; 36 | gap: 0.5vw; 37 | padding: 1vw; 38 | } 39 | .InputContainerResult { 40 | display: grid; 41 | grid-template-columns: 33.33% 33.33% 33.33%; 42 | grid-auto-rows: auto; 43 | gap: 0.5vw; 44 | padding: 1vw; 45 | } 46 | .operatorCard { 47 | position: absolute; 48 | /* z-index: 0; */ 49 | top: -9vw; 50 | height: 16.43vw; 51 | right: -37.8vw; 52 | /* width: 3.56vw; */ 53 | } 54 | .operatorCard img { 55 | transform: rotate(-90deg); 56 | margin: 0; 57 | padding: 0; 58 | height: 2vw; 59 | } 60 | 61 | .operatorPLus { 62 | position: absolute; 63 | right: -33vw; 64 | top: -10.5vw; 65 | font-size: 2vw; 66 | cursor: pointer; 67 | } 68 | .operatorMinus { 69 | position: absolute; 70 | right: -33vw; 71 | top: -8.5vw; 72 | font-size: 2vw; 73 | cursor: pointer; 74 | } 75 | .operatorMinus { 76 | transform: rotate(-90deg); 77 | } 78 | 79 | .InnerOperator { 80 | display: grid; 81 | grid-template-columns: 5% 5%; 82 | gap: 0.5vw; 83 | align-items: flex-start; 84 | justify-content: center; 85 | margin-bottom: 2.5vw; 86 | } 87 | .operatorplus { 88 | position: absolute; 89 | right: -32vw; 90 | top: -0.5vw; 91 | font-size: 2vw; 92 | cursor: pointer; 93 | } 94 | .operatorminus { 95 | font-size: 2vw; 96 | cursor: pointer; 97 | position: absolute; 98 | right: -34vw; 99 | top: -0.5vw; 100 | } 101 | .BulgeDown{ 102 | position: absolute; 103 | /* z-index: 0; */ 104 | top: -0.2vw; 105 | height: 16.43vw; 106 | right: -37.8vw; 107 | cursor: pointer; 108 | } 109 | .BulgeDown img{ 110 | width: auto; 111 | height: 2vw; 112 | } -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/Input/Input.module.css: -------------------------------------------------------------------------------- 1 | .Input input { 2 | width: 12.65vw; 3 | height: 2.91vw; 4 | background: #ffffff 0% 0% no-repeat padding-box; 5 | border: 0.104vw solid #e4eaf2; 6 | border-radius: 0.78vw; 7 | opacity: 1; 8 | color: #313131; 9 | margin-top: 1vw; 10 | box-sizing: border-box; 11 | padding: 0.625vw 1.04vw; 12 | margin: 0.416vw 0; 13 | } 14 | 15 | .Input select { 16 | width: 12.65vw; 17 | height: 2.91vw; 18 | background: #ffffff 0% 0% no-repeat padding-box; 19 | border: 0.104vw solid #e4eaf2; 20 | border-radius: 0.78vw; 21 | opacity: 1; 22 | color: #313131; 23 | margin-top: 1vw; 24 | box-sizing: border-box; 25 | padding: 0.625vw 1.04vw; 26 | margin: 0.416vw 0; 27 | } 28 | .Input label { 29 | text-align: left; 30 | font-size: 0.83vw; 31 | font-weight: normal; 32 | letter-spacing: 0px; 33 | color: #313131; 34 | opacity: 1; 35 | text-transform: uppercase; 36 | font-weight: 500; 37 | } 38 | .InputMax { 39 | display: flex; 40 | flex-direction: column; 41 | justify-content: center; 42 | } 43 | .InputMax select { 44 | width: 48.41vw; 45 | height: 3.91vw; 46 | background: #ffffff 0% 0% no-repeat padding-box; 47 | border: 0.104vw solid #e4eaf2; 48 | border-radius: 0.78vw; 49 | opacity: 1; 50 | color: #313131; 51 | margin-top: 1vw; 52 | box-sizing: border-box; 53 | padding: 1vw 4.04vw; 54 | margin: 1.16vw 0; 55 | font-size: 1.23vw; 56 | /* margin-top: 0vw; */ 57 | -webkit-appearance: none; 58 | -moz-appearance: none; 59 | background: transparent; 60 | background-image: url("data:image/svg+xml;utf8,"); 61 | background-repeat: no-repeat; 62 | background-position-x: 100%; 63 | background-position-y: .5vw; 64 | 65 | margin-right: 2rem; 66 | } 67 | 68 | .InputMaxAuto input { 69 | width: 56.37vw; 70 | height: 2.91vw; 71 | background: #ffffff 0% 0% no-repeat padding-box; 72 | border: 0.104vw solid #e4eaf2; 73 | border-radius: 0.78vw; 74 | opacity: 1; 75 | color: #313131; 76 | margin-top: 1vw; 77 | box-sizing: border-box; 78 | padding: 0.625vw 1.04vw; 79 | margin: 0.416vw 0; 80 | /* margin-top: 0vw; */ 81 | 82 | /* margin-right: 2rem; */ 83 | } 84 | .InputMax label { 85 | text-align: center; 86 | font-size: 1.33vw; 87 | font-weight: normal; 88 | letter-spacing: 0px; 89 | color: #313131; 90 | opacity: 1; 91 | text-transform: uppercase; 92 | font-weight: 500; 93 | } 94 | .InputMaxAuto label{ 95 | text-align: left; 96 | font-size: 0.83vw; 97 | font-weight: normal; 98 | letter-spacing: 0px; 99 | color: #313131; 100 | opacity: 1; 101 | text-transform: uppercase; 102 | font-weight: 500; 103 | } 104 | -------------------------------------------------------------------------------- /src/components/TableWithBar/TableWithBar.module.css: -------------------------------------------------------------------------------- 1 | .Totalcount { 2 | background: #f8faff 0% 0% no-repeat padding-box; 3 | border-radius: 0.78vw; 4 | text-align: center; 5 | justify-content: center; 6 | display: flex; 7 | align-items: center; 8 | font-size: 0.729vw; 9 | width: 8.64vw; 10 | height: 2.9vw; 11 | } 12 | 13 | .SearchContainer input { 14 | height: 2.9vw; 15 | width: 18vw; 16 | outline: none; 17 | padding-left: 1.3vw; 18 | font-size: 0.729vw; 19 | border: none; 20 | background: #ffffff 0% 0% no-repeat padding-box; 21 | border: 0.05vw solid #eeeeee; 22 | border-radius: 0.78vw; 23 | } 24 | 25 | .Bar { 26 | display: flex; 27 | justify-content: space-between; 28 | align-items: center; 29 | } 30 | 31 | .TableComponent table { 32 | width: 100%; 33 | border-collapse: collapse; 34 | margin-top: 2vw; 35 | } 36 | 37 | .TableComponent th { 38 | letter-spacing: 0.8px; 39 | color: #313131; 40 | text-transform: uppercase; 41 | font-size: 0.8333vw; 42 | } 43 | 44 | .TableComponent th, 45 | .TableComponent td { 46 | padding: 1.3vw 0; 47 | border-bottom: 0.05vw solid #eeeeee; 48 | } 49 | 50 | .TableComponent td { 51 | color: #313131; 52 | text-transform: capitalize; 53 | opacity: 0.7; 54 | font-size: 1.04vw; 55 | text-align: center; 56 | } 57 | 58 | .Download { 59 | height: 3vw; 60 | width: 3vw; 61 | background: #0e2d61; 62 | border-radius: 0.78vw; 63 | display: flex; 64 | align-items: center; 65 | justify-content: center; 66 | cursor: pointer; 67 | } 68 | 69 | .Download img { 70 | height: 1.2vw; 71 | width: 1.2vw; 72 | } 73 | 74 | .RightContainer { 75 | display: flex; 76 | grid-column-gap: 1vw; 77 | } 78 | 79 | .ModalContainer { 80 | height: 12.14vw; 81 | width: 24.548vw; 82 | background: #ffffff 0% 0% no-repeat padding-box; 83 | box-shadow: 0px 1vw 2.1vw #0000000d; 84 | border-radius: 1.56vw; 85 | padding: 3.38vw 5.26vw; 86 | position: relative; 87 | } 88 | 89 | .Title { 90 | font-size: 0.8333vw; 91 | letter-spacing: 0.8px; 92 | color: #313131; 93 | text-transform: uppercase; 94 | margin-bottom: 1.3vw; 95 | } 96 | 97 | .InputContainer input { 98 | background: #ffffff 0% 0% no-repeat padding-box; 99 | border: 1px solid #eeeeee; 100 | border-radius: 0.78vw; 101 | width: 19.3vw; 102 | height: 2.9vw; 103 | outline: none; 104 | font-size: 1.3vw; 105 | margin-top: 1vw; 106 | width: 100%; 107 | } 108 | 109 | .SubmitButton { 110 | background: #0e2d61 0% 0% no-repeat padding-box; 111 | border-radius: 1.56vw; 112 | width: 100%; 113 | height: 2.8vw; 114 | font-size: 1vw; 115 | color: white; 116 | display: flex; 117 | justify-content: center; 118 | align-items: center; 119 | margin-top: 1.3vw; 120 | cursor: pointer; 121 | } 122 | 123 | .Buldge { 124 | position: absolute; 125 | right: 1vw; 126 | top: -2vw; 127 | } 128 | 129 | .Buldge img { 130 | height: 3vw; 131 | } 132 | 133 | .CloseIcon { 134 | position: absolute; 135 | right: 3.7vw; 136 | top: -1.3vw; 137 | height: 1vw; 138 | width: 1.2vw; 139 | } 140 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `yarn start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 13 | 14 | The page will reload if you make edits.\ 15 | You will also see any lint errors in the console. 16 | 17 | ### `yarn test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `yarn build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `yarn eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 35 | 36 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 39 | 40 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | 48 | ### Code Splitting 49 | 50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 51 | 52 | ### Analyzing the Bundle Size 53 | 54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 55 | 56 | ### Making a Progressive Web App 57 | 58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 59 | 60 | ### Advanced Configuration 61 | 62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 63 | 64 | ### Deployment 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 67 | 68 | ### `yarn build` fails to minify 69 | 70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 71 | -------------------------------------------------------------------------------- /src/components/SlidingCardWithTabs/SlidingCardWithTabs.js: -------------------------------------------------------------------------------- 1 | import classes from "./SlidingCardWithTabs.module.css"; 2 | import React, { useEffect, useState } from "react"; 3 | import Buldge from "../../assets/Buldgeleft.png"; 4 | import CloseIcon from "../../assets/Close.svg"; 5 | import TableComponent from "../TableWithBar/TableWithBar"; 6 | import styled, { keyframes } from "styled-components"; 7 | import { slideInRight } from "react-animations"; 8 | import { TYPE_ENUMS } from "../../constants"; 9 | import eyeComponent from "./eyeComponent"; 10 | import { withRouter } from "react-router-dom"; 11 | const slideIn = keyframes`${slideInRight}`; 12 | const AnimatedCard = styled.div` 13 | animation: 0.7s ${slideIn}; 14 | `; 15 | const SlidingCardWith = ({ isOpen = true, data, type, history, handleClose }) => { 16 | const [state, setState] = useState([]); 17 | const [operatorData, setoperatorData] = useState([]); 18 | useEffect(() => { 19 | if (type && data && data?.eval_order && data?.output?.attribute_name) { 20 | let stateData = []; 21 | data.eval_order.map((item,i) => { 22 | stateData.push({ 23 | id:i+1, 24 | ruleId: item, 25 | action: eyeComponent(item, history), 26 | }); 27 | }); 28 | 29 | 30 | data?.output?.attribute_name && 31 | setoperatorData([ 32 | { 33 | attribute_name: data.output.attribute_name, 34 | operator: "=", 35 | value: data.output.value, 36 | }, 37 | ]); 38 | setState(stateData); 39 | } 40 | if (!type) { 41 | let objectData = data && data.map((item) => { 42 | return { 43 | ...item, 44 | operator: TYPE_ENUMS[item.operator] 45 | } 46 | }) 47 | setoperatorData(objectData) 48 | } 49 | }, [type, data]); 50 | 51 | return ( 52 | isOpen && ( 53 |
54 |
55 | 56 |
57 |
58 | 59 |
60 | 66 |
67 | {type &&
Rule Execution Order
} 68 | {type && data && ( 69 |
70 | 75 |
76 | )} 77 | {type &&
Output
} 78 | 79 | {type && data && ( 80 |
81 | 86 |
87 | )} 88 | {!type && ( 89 |
90 | 95 |
96 | 97 | )} 98 | 99 |
100 | ) 101 | ); 102 | }; 103 | 104 | export default withRouter(SlidingCardWith); 105 | -------------------------------------------------------------------------------- /src/pages/FlowChart/FlowChart.module.css: -------------------------------------------------------------------------------- 1 | .FlowChart { 2 | padding: 1.58vw; 3 | background: #eeeeee 0% 0% no-repeat padding-box; 4 | width: fit-content; 5 | } 6 | .Container { 7 | padding-left: 1.9vw; 8 | padding-right: 0.9vw; 9 | display: grid; 10 | grid-template-columns: 70% 30%; 11 | grid-gap: 3vw; 12 | margin-top: 1.56vw; 13 | align-self: flex-start; 14 | align-content: flex-start; 15 | } 16 | .Left { 17 | display: flex; 18 | justify-content: flex-start; 19 | align-items: center; 20 | flex-direction: column; 21 | padding-top: 4vw; 22 | padding-left: 2vw; 23 | padding-right: 2vw; 24 | margin: 0; 25 | align-self: center; 26 | background-color: #ffffff; 27 | height: 41vw; 28 | width: 60.98vw; 29 | border-radius: 1.56vw; 30 | /* margin-left: 4vw; */ 31 | } 32 | 33 | .Reference { 34 | width: 15.46vw; 35 | height: 45vw; 36 | background: #ffffff 0% 0% no-repeat padding-box; 37 | border-radius: 1.56vw; 38 | opacity: 1; 39 | padding-right: 4.16vw; 40 | padding-left: 4.16vw; 41 | 42 | display: flex; 43 | justify-content: flex-start; 44 | align-items: center; 45 | flex-direction: column; 46 | 47 | } 48 | 49 | .BoxContainer { 50 | display: grid; 51 | grid-template-columns: repeat(6, 1fr); 52 | gap: 2.5vw; 53 | } 54 | .resultBoxContainer { 55 | display: flex; 56 | align-items: center; 57 | justify-content: center; 58 | margin-top: 10vw; 59 | } 60 | .tank { 61 | position: relative; 62 | margin-top: 8.16vw; 63 | margin-left: -2vw; 64 | } 65 | .tank .middle { 66 | width: 8.25vw; 67 | height: 4.16vw; 68 | background-color: #f2f7f9; 69 | position: absolute; 70 | } 71 | 72 | .tank .top { 73 | width: 8.25vw; 74 | height: 2.6vw; 75 | background-color: #ddeaf3; 76 | -moz-border-radius: 3.12vw / 1.302vw; 77 | -webkit-border-radius: 3.12vw / 1.302vw; 78 | border-radius: 5.12vw / 1.302vw; 79 | position: absolute; 80 | top: -1.302vw; 81 | } 82 | 83 | .tank .bottom { 84 | width: 8.25vw; 85 | height: 2.6vw; 86 | background-color: #f2f7f9; 87 | -moz-border-radius: 3.12vw / 1.302vw; 88 | -webkit-border-radius: 3.12vw / 1.302vw; 89 | border-radius: 5.12vw / 1.302vw; 90 | position: absolute; 91 | top: 2.86vw; 92 | box-shadow: 0px 0px 0.52vw rgb(0, 0, 0); 93 | } 94 | .resultBox { 95 | width: 11.3vw; 96 | height: 6.25vw; 97 | background: #ddeaf3 0% 0% no-repeat padding-box; 98 | border-radius: 0.78vw; 99 | opacity: 1; 100 | text-align: center; 101 | font-size: 0.833vw; 102 | font-weight: 600; 103 | letter-spacing: 0px; 104 | color: #050505; 105 | opacity: 1; 106 | display: flex; 107 | justify-content: center; 108 | align-items: center; 109 | } 110 | .Box { 111 | width: 7.81vw; 112 | height: 5.39vw; 113 | background: #0c0c18 0% 0% no-repeat padding-box; 114 | border-radius: 0.78vw; 115 | opacity: 1; 116 | text-align: center; 117 | font-size: 0.833vw; 118 | font-weight: 600; 119 | letter-spacing: 0px; 120 | color: #ffffff; 121 | opacity: 1; 122 | display: flex; 123 | justify-content: center; 124 | align-items: center; 125 | } 126 | 127 | .If { 128 | width: 11.3vw; 129 | height: 6.25vw; 130 | background: #0c0c18 0% 0% no-repeat padding-box; 131 | border-radius: 0.78vw; 132 | opacity: 1; 133 | letter-spacing: 0px; 134 | color: #ffffff; 135 | text-transform: capitalize; 136 | opacity: 1; 137 | display: flex; 138 | justify-content: center; 139 | align-items: center; 140 | margin-bottom: 4vw; 141 | } 142 | .Heading { 143 | letter-spacing: 0px; 144 | color: #313131; 145 | text-transform: uppercase; 146 | opacity: 1; 147 | display: flex; 148 | font-size: 1.04vw; 149 | font-weight: medium ; 150 | justify-content: center; 151 | align-items: center; 152 | 153 | } 154 | .Reference >.Heading{ 155 | margin-top: 4vw; 156 | margin-bottom: 4vw; 157 | } 158 | .Left >.Heading{ 159 | margin-bottom: 4vw; 160 | } 161 | 162 | 163 | .Diagram { 164 | height: 50vw; 165 | } 166 | -------------------------------------------------------------------------------- /src/utils/responseHelper.js: -------------------------------------------------------------------------------- 1 | 2 | function makeid() { 3 | var text = ""; 4 | var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; 5 | 6 | for (let i = 0; i < 5; i++) 7 | text += possible.charAt(Math.floor(Math.random() * possible.length)); 8 | 9 | return text; 10 | } 11 | export const responseHelper = (data, FormDataResult) => { 12 | let resobj = { 13 | id: `a${makeid()}`, 14 | namespace: data['namespace'], 15 | rule_description: data['description'], 16 | predicates: [ 17 | ], 18 | result: [] 19 | 20 | , 21 | }; 22 | // console.log(data) 23 | 24 | 25 | 26 | let flagarray1 = []; 27 | for (let key in FormDataResult) { 28 | let matches = key.match(/(\d+)/); 29 | 30 | if (flagarray1.length === 0) { 31 | resobj.result.push( 32 | { 33 | attribute_name: FormDataResult[`resultVariable00`], 34 | value: FormDataResult[`resultType${matches[0]}`]==="int"? Number(FormDataResult[`resultValue${matches[0]}`]):FormDataResult[`resultValue${matches[0]}`], 35 | operator: FormDataResult[`resultOperator${matches[0]}`], 36 | type: FormDataResult[`resultType${matches[0]}`], 37 | 38 | } 39 | ) 40 | flagarray1.push(matches[0]) 41 | } else { 42 | const found = flagarray1.find((item) => item === matches[0]); 43 | if (!found) { 44 | resobj.result.push( 45 | { 46 | attribute_name: FormDataResult[`resultVariable00`], 47 | value: FormDataResult[`resultType${matches[0]}`]==="int"? Number(FormDataResult[`resultValue${matches[0]}`]):FormDataResult[`resultValue${matches[0]}`], 48 | operator: FormDataResult[`resultOperator${matches[0]}`], 49 | type: FormDataResult[`resultType${matches[0]}`], 50 | } 51 | ) 52 | flagarray1.push(matches[0]) 53 | 54 | 55 | 56 | } 57 | } 58 | 59 | } 60 | 61 | 62 | let flagarray = []; 63 | for (let key in data) { 64 | let matches = key.match(/(\d+)/); 65 | 66 | if (matches) { 67 | if (flagarray.length === 0) { 68 | resobj.predicates.push( 69 | { 70 | attribute_name: data[`variable${matches[0]}`], 71 | operator: data[`operator${matches[0]}`], 72 | value: data[`type${matches[0]}`]==="int"? Number(data[`value${matches[0]}`]):data[`value${matches[0]}`], 73 | type: data[`type${matches[0]}`], 74 | position: matches[0] 75 | } 76 | ) 77 | flagarray.push(matches[0]) 78 | } else { 79 | const found = flagarray.find((item) => item === matches[0]); 80 | if (!found) { 81 | resobj.predicates.push( 82 | { 83 | attribute_name: data[`variable${matches[0]}`], 84 | operator: data[`operator${matches[0]}`], 85 | value: data[`type${matches[0]}`]==="int"? Number(data[`value${matches[0]}`]):data[`value${matches[0]}`], 86 | type: data[`type${matches[0]}`], 87 | position: matches[0] 88 | } 89 | ) 90 | flagarray.push(matches[0]) 91 | 92 | 93 | 94 | } 95 | } 96 | } 97 | 98 | } 99 | resobj.predicates.forEach((item) => { 100 | 101 | if (!item.attribute_name) { 102 | let foundData = resobj.predicates.find((t) => t.position[0] === item.position[0]) 103 | item['attribute_name'] = foundData.attribute_name 104 | 105 | } 106 | 107 | }) 108 | resobj.predicates.forEach((item) => { 109 | 110 | delete item.position 111 | 112 | }) 113 | return resobj; 114 | }; 115 | -------------------------------------------------------------------------------- /src/components/CardComponent/CardComponent.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import classes from "./Card.module.css"; 3 | import { Input, DropDown, DropDownType } from "../../components/Input/Input"; 4 | import bulgeRight from "../../assets/bulgeRight.svg"; 5 | import bulgeDown from "../../assets/bulgeDown.svg"; 6 | import CardInput from "./CardInput"; 7 | import * as _ from "lodash"; 8 | import { TYPE_OPTIONS } from "../../constants" 9 | export default function CardComponent({ 10 | handleAddContainer, 11 | onChange, 12 | data, 13 | handleRemoveContainer, 14 | setFormData, 15 | formData, 16 | }) { 17 | const [container, setContainer] = useState([]); 18 | const [length, setLength] = useState(0); 19 | 20 | const handleAddContainerInput = () => { 21 | const array = Array.from({ length: length + 1 }, (_, i) => i + 1); 22 | setLength(length + 1); 23 | setContainer(array); 24 | }; 25 | 26 | const handleRemoveContainerInput = () => { 27 | if (length >= 0) { 28 | let keyArray = [`operator${data}${container[container.length - 1]}`,`value${data}${container[container.length - 1]}`,`type${data}${container[container.length - 1]}`]; 29 | let object = { ...formData }; 30 | let result = _.omit(object, keyArray); 31 | setFormData(result); 32 | const array = Array.from({ length: length - 1 }, (_, i) => i + 1); 33 | setLength(length - 1); 34 | setContainer(array); 35 | } 36 | }; 37 | // console.log(formData); 38 | 39 | return ( 40 | <> 41 |
42 |
43 |
44 | 51 |
52 |
53 | 54 |
55 |
56 |
57 | 58 | 64 |
65 |
66 | 67 | 75 |
76 |
77 | 78 | 85 |
86 | 87 | {container.map((item, i) => ( 88 | <> 89 | 95 | 96 | ))} 97 |
98 |
99 | 100 |
101 |
102 | 103 |
104 |
108 | + 109 |
110 |
114 | - 115 |
116 |
117 | {/*
118 | 119 |
*/} 120 |
121 |
122 |
123 | 124 |
125 |
129 | + 130 |
131 |
{ 134 | handleRemoveContainer(data, container); 135 | }} 136 | > 137 | - 138 |
139 |
140 | 141 | ); 142 | } 143 | -------------------------------------------------------------------------------- /src/components/CardComponent/ResultCardComponent.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import classes from "./Card.module.css"; 3 | import { Input, DropDown, DropDownType } from "../../components/Input/Input"; 4 | import bulgeRight from "../../assets/bulgeRight.svg"; 5 | import bulgeDown from "../../assets/bulgeDown.svg"; 6 | import ResultCardInput from "./ResultCardInput"; 7 | import * as _ from "lodash"; 8 | import { TYPE_OPTIONS } from "../../constants" 9 | export default function ResultCard({ 10 | onChange, 11 | setFormData, 12 | formData, 13 | }) { 14 | const [container, setContainer] = useState([]); 15 | const [length, setLength] = useState(0); 16 | 17 | const handleAddContainerInput = () => { 18 | const array = Array.from({ length: length + 1 }, (_, i) => i + 1); 19 | setLength(length + 1); 20 | setContainer(array); 21 | }; 22 | 23 | const handleRemoveContainerInput = () => { 24 | if (length >= 0) { 25 | let keyArray = [, `resultValue0${container[container.length - 1]}`, `resultType0${container[container.length - 1]}`, `resultOperator0${container[container.length - 1]}`]; 26 | let object = { ...formData }; 27 | let result = _.omit(object, keyArray); 28 | setFormData(result); 29 | const array = Array.from({ length: length - 1 }, (_, i) => i + 1); 30 | setLength(length - 1); 31 | setContainer(array); 32 | } 33 | }; 34 | // console.log(formData); 35 | 36 | return ( 37 | <> 38 |
39 |
40 |
41 | 47 |
48 |
49 | 50 |
51 |
52 |
53 | 54 | 60 |
61 |
62 | 63 | 70 |
71 |
72 | 73 | 79 |
80 | 81 | 82 | {container.map((item, i) => ( 83 | <> 84 | 90 | 91 | ))} 92 |
93 |
94 | 95 |
96 |
97 | 98 |
99 |
103 | + 104 |
105 |
109 | - 110 |
111 |
112 | {/*
113 | 114 |
*/} 115 |
116 | 117 | 118 | ); 119 | } 120 | -------------------------------------------------------------------------------- /src/pages/Home/Home.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useContext, useEffect } from 'react' 2 | import classes from "./Home.module.css"; 3 | import Navbar from "../../components/Navbar/Navbar"; 4 | import CardComponent from "../../components/CardComponent/CardComponent" 5 | import * as _ from "lodash"; 6 | import { responseHelper } from "../../utils/responseHelper"; 7 | import ResultCard from "../../components/CardComponent/ResultCardComponent"; 8 | import { FormContext, NameContext } from "../../context/FormProvider"; 9 | import DescriptionCard from "../../components/CardComponent/DescriptionCard"; 10 | import { RuleService } from "../../services/RuleService" 11 | const Home = (props) => { 12 | const { state, dispatch } = useContext(FormContext) 13 | const [container, setContainer] = useState([1]); 14 | const [length, setLength] = useState(1); 15 | const [formData, setFormData] = useState({}); 16 | const [FormDataResult, setFormDataResult] = useState({}); 17 | const { state: stateName } = useContext(NameContext); 18 | const startLoader = () => { props.setLoading(true) }; 19 | const stopLoader = () => { props.setLoading(false) } 20 | useEffect(() => { 21 | // props.setLoading(true) 22 | if(stateName.name.namespace===undefined){ 23 | props.history.push('/') 24 | } 25 | },[stateName]) 26 | // console.log(formData) 27 | const handleSubmit = (e) => { 28 | e.preventDefault() 29 | const responseData = responseHelper(formData, FormDataResult); 30 | RuleService.createRule(responseData, startLoader, handleCreateRuleSuccess, (err) => { console.log(err) }, stopLoader) 31 | dispatch({ 32 | type: "SET_FORM", 33 | payload: responseData, 34 | }); 35 | 36 | 37 | // console.log(responseData) 38 | } 39 | const handleCreateRuleSuccess=({data})=>{ 40 | 41 | props.history.push('/result') 42 | } 43 | const handleAddContainer = () => { 44 | const array = Array.from({ length: length + 1 }, (_, i) => i + 1) 45 | // console.log(array) 46 | setLength(length + 1); 47 | setContainer(array) 48 | } 49 | const handleRemoveContainer = (data, cardlength) => { 50 | 51 | if (length > 1) { 52 | let keyArray = [`operator${data}${0}`, `value${data}${0}`, `variable${data}${0}`, `type${data}${0}`]; 53 | cardlength.forEach((item) => { 54 | keyArray.push(`operator${data}${item}`) 55 | keyArray.push(`value${data}${item}`) 56 | keyArray.push(`type${data}${item}`) 57 | }) 58 | 59 | // console.log(keyArray) 60 | let object = { ...formData }; 61 | let result = _.omit(object, keyArray); 62 | setFormData(result) 63 | const array = Array.from({ length: length - 1 }, (_, i) => i + 1) 64 | setLength(length - 1) 65 | setContainer(array) 66 | } 67 | 68 | } 69 | const onChange = (e) => { 70 | let { value, name } = e.target 71 | setFormData((prev) => { 72 | return { ...prev, [name]: value, namespace: stateName.name.namespace } 73 | }) 74 | } 75 | const onChangeResult = (e) => { 76 | let { value, name } = e.target 77 | setFormDataResult((prev) => { 78 | return { ...prev, [name]: value, } 79 | }) 80 | } 81 | return ( 82 |
83 | 84 | 85 | 86 |
87 |
88 |
89 | 90 | { 91 | container.map((item, i) => ( 92 | <> 93 | {i >= 1 ? (
AND
) : null} 94 | 95 | 96 | 97 | 98 | 99 | )) 100 | } 101 |
Equals
102 | 103 |
SUBMIT
104 |
105 | 106 |
107 |
108 |
109 | Rule Definition includes : 110 |
111 |
112 | Predicates : a list of conditions matched against the input. 113 |
114 |
115 | Result set : list of result attributes to be returned on successful rule match 116 |
117 |
118 |
119 |
120 |
121 | ) 122 | } 123 | export default Home; -------------------------------------------------------------------------------- /src/pages/Evaluation/Evaluation.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect, useContext } from "react"; 2 | import classes from "./Evaluation.module.css"; 3 | import NavBar from "../../components/Navbar/Navbar"; 4 | import TableComponent from "../../components/TableWithBar/TableWithBar"; 5 | import { Input, DropDownType } from "../../components/Input/Input"; 6 | import { NameContext } from "../../context/FormProvider"; 7 | import { RuleService } from "../../services/RuleService"; 8 | import { Operator_OPTIONS } from "../../constants"; 9 | import SlidingCardWith from "../../components/SlidingCardWithTabs/SlidingCardWithTabs" 10 | export default function Evaluation(props) { 11 | let [head, setHead] = useState([ 12 | "S.No", 13 | "Attribute", 14 | "Type", 15 | "Operator", 16 | "Value", 17 | ]); 18 | let [keys, setKeys] = useState([ 19 | "id", 20 | "attribute_name", 21 | "type", 22 | "operator", 23 | "value", 24 | ]); 25 | let [data, setData] = useState([]); 26 | let [result, setResult] = useState({}); 27 | let [open, setOpen] = useState(false); 28 | let [formdata, setFormData] = useState({}); 29 | const { state: stateName } = useContext(NameContext); 30 | const handleClose =()=>{ 31 | setOpen(false) 32 | } 33 | const startLoader = () => { 34 | props.setLoading(true); 35 | }; 36 | const stopLoader = () => { 37 | props.setLoading(false); 38 | }; 39 | const handleChange = (e, item) => { 40 | let { value, name } = e.target; 41 | setFormData((prev) => { 42 | return { ...prev, [name]: value }; 43 | }); 44 | }; 45 | useEffect(() => { 46 | // props.setLoading(true) 47 | if (stateName.name.namespace === undefined) { 48 | props.history.push('/') 49 | } 50 | }, [stateName]) 51 | const InputColumn = (item) => ( 52 | { 55 | handleChange(e, item); 56 | }} 57 | type={item.type === "int" ? "number" : "text"} 58 | /> 59 | ); 60 | const OperatorColumn = (item) => ( 61 | <>= 62 | ); 63 | // { 67 | // handleChange(e, item); 68 | // }} 69 | // /> 70 | 71 | 72 | useEffect(() => { 73 | let namespace = stateName.name.namespace; 74 | RuleService.getAllAtrribute( 75 | namespace, 76 | startLoader, 77 | handleGetAttributeSuccess, 78 | (err) => console.log(err), 79 | stopLoader 80 | ); 81 | }, [stateName]); 82 | const handleGetAttributeSuccess = ({ data }) => { 83 | // let resData =[...data]; 84 | 85 | let resData = data.attributes.map((item, i) => ({ 86 | ...item, 87 | id: i + 1, 88 | operator: OperatorColumn(item), 89 | value: InputColumn(item), 90 | })); 91 | setData(resData); 92 | }; 93 | 94 | const handleSubmit = () => { 95 | let namespace = stateName.name.namespace; 96 | let newdata = []; 97 | data.forEach((v, i) => { 98 | const val = (typeof v === 'object') ? Object.assign({}, v) : v; 99 | newdata.push(val); 100 | }); 101 | let predicates = [] 102 | 103 | newdata.map((item) => { 104 | if (formdata[`${item.attribute_name}v`] && formdata[`${item.attribute_name}v`].length > 0) { 105 | delete item.id 106 | let obj = { 107 | ...item, 108 | operator: "eq", 109 | value: item.type === "string" ? formdata[`${item.attribute_name}v`] : Number(formdata[`${item.attribute_name}v`]), 110 | } 111 | predicates.push(obj) 112 | } 113 | 114 | }) 115 | let payload = { 116 | namespace: namespace, 117 | predicates: [ 118 | ...predicates 119 | ], 120 | }; 121 | RuleService.ruleEvaluation( 122 | namespace, 123 | payload, 124 | startLoader, 125 | handleEvaluationSuccess, 126 | (err) => console.log(err), 127 | stopLoader 128 | ); 129 | }; 130 | const handleEvaluationSuccess = ({ data }) => { 131 | 132 | setResult(data) 133 | setOpen(true) 134 | }; 135 | return ( 136 |
137 | 138 | 139 |
140 |
Evaluation
141 |
142 | 143 |
144 |
148 | SUBMIT 149 |
150 |
151 |
152 | ); 153 | } 154 | -------------------------------------------------------------------------------- /src/pages/FlowChart/FlowChart.js: -------------------------------------------------------------------------------- 1 | import React, { useContext, useState, useEffect, useRef } from 'react' 2 | import classes from "./FlowChart.module.css"; 3 | import Navbar from "../../components/Navbar/Navbar"; 4 | import SlidingCardWith from "../../components/SlidingCardWithTabs/SlidingCardWithTabs"; 5 | import { FormContext, NameContext } from "../../context/FormProvider"; 6 | import Xarrow from "react-xarrows"; 7 | import { lineStyle, lineStyleWitharrow } from "./lineStyle"; 8 | import { RuleService } from "../../services/RuleService" 9 | export default function FlowChart(props) { 10 | const { state, dispatch } = useContext(FormContext); 11 | const { state: stateName } = useContext(NameContext); 12 | const [colours, setColours] = useState([]); 13 | const [type, setType] = useState(false); 14 | const [boxes, setBoxes] = useState([]); 15 | const [lines, setLines] = useState([]); 16 | const [Data, setData] = useState([]); 17 | const startLoader = () => { props.setLoading(true) }; 18 | const stopLoader = () => { props.setLoading(false) }; 19 | const boxStyle = (data, i) => { 20 | return { id: data, x: 100 + i * 150, y: 100 } 21 | } 22 | const [show, setShow] = useState(false); 23 | const handleClose = () => { setShow(false) } 24 | useEffect(() => { 25 | // props.setLoading(true) 26 | if (stateName.name.namespace === undefined) { 27 | props.history.push('/') 28 | } 29 | }, [stateName]); 30 | 31 | useEffect(() => { 32 | let colorArray = []; 33 | state.form.predicates && state.form.predicates.map((item, i) => { 34 | let found = colorArray.find((data) => data === item.attribute_name) 35 | if (!found) { 36 | colorArray.push(item.attribute_name) 37 | } 38 | }) 39 | 40 | setColours(colorArray) 41 | 42 | }, [state]); 43 | useEffect(() => { 44 | let namespace = stateName.name.namespace; 45 | let ruleId = (props.history.location.search).split('?')[1]; 46 | 47 | if (ruleId) { 48 | 49 | RuleService.getRuleById( 50 | ruleId, 51 | namespace, 52 | startLoader, 53 | handleFetchRuleSuccess, 54 | (err) => console.log(err), 55 | stopLoader 56 | ) 57 | } 58 | }, []); 59 | const handleFetchRuleSuccess = ({ data }) => { 60 | setBoxes([]) 61 | setLines([]) 62 | dispatch({ 63 | type: "REMOVE_FORM", 64 | 65 | }); 66 | dispatch({ 67 | type: "SET_FORM", 68 | payload: data, 69 | }); 70 | } 71 | 72 | 73 | useEffect(() => { 74 | let boxesArray = [...boxes]; 75 | let lineArray = [...lines]; 76 | colours.forEach((item, i) => { 77 | let box = boxStyle(item, i); 78 | let line = colours[i + 1] && lineStyle(item, colours[i + 1], true, 0); 79 | let line1 = lineStyleWitharrow(item, "result", false, 10) 80 | boxesArray.push(box) 81 | colours[i + 1] && lineArray.push(line); 82 | lineArray.push(line1); 83 | }) 84 | setBoxes(boxesArray); 85 | setLines(lineArray); 86 | }, [colours]) 87 | 88 | const handleOpenSlider = (id) => { 89 | setType(false) 90 | let array = state.form.predicates && state.form.predicates.filter((item, i) => item.attribute_name === id) 91 | setShow(true) 92 | 93 | setData(array) 94 | 95 | } 96 | const resultHandle = () => { 97 | // setType(true) 98 | let array = state.form.result && state.form.result 99 | setShow(true) 100 | 101 | array && setData(array) 102 | } 103 | 104 | return ( 105 |
106 | 107 | 108 |
109 |
110 |
111 | FLOW CHART 112 |
113 |
114 | {boxes.map((boxItem, i) => ( 115 |
{ handleOpenSlider(boxItem.id) }}>
{String(boxItem.id).toUpperCase()}
116 | ))} 117 |
118 | { 119 | boxes.length > 0 && (
120 | {/*
121 |
122 |
123 |
124 |
*/} 125 |
{String(state.form.result && state.form.result[0].attribute_name).toUpperCase()}
126 |
) 127 | } 128 | {lines.map((line, i) => ( 129 | 130 | ))} 131 |
132 |
133 |
134 |
135 | Legends 136 |
137 |
138 |
IF
139 |
140 |
141 |
OUTPUT
142 |
143 |
144 |
145 |
146 |
147 | ) 148 | } 149 | 150 | -------------------------------------------------------------------------------- /src/assets/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | --------------------------------------------------------------------------------