progress

ui/src/core/extensions/array.ts

@@ -1,13 +1,3 @@
-export {};
-
-declare global {
-  interface Array<T> {
-    // @strict: The parameter is determined whether the arrays must be exactly the same in content and order of this relationship or simply follow the same requirements.
-    equals(array: Array<T>, strict: boolean): boolean;
-    lastElement(): T | undefined;
-  }
-}
-
 export const ArrayExtensions = () => {
   if ([].equals === undefined) {
     // eslint-disable-next-line no-extend-native
@@ -42,4 +32,10 @@ export const ArrayExtensions = () => {
       }
     };
   }
+  if ([].isEmpty === undefined) {
+    // eslint-disable-next-line no-extend-native
+    Array.prototype.isEmpty = function () {
+      return this.length === 0;
+    };
+  }
 };

ui/src/core/extensions/extensions.ts

@@ -1,6 +1,18 @@
 import { ArrayExtensions } from "./array";
+import { StringExtensions } from "./string";
 
-export const extensions = () =>{
-    ArrayExtensions()
+declare global {
+  interface Array<T> {
+    // @strict: The parameter is determined whether the arrays must be exactly the same in content and order of this relationship or simply follow the same requirements.
+    equals(array: Array<T>, strict: boolean): boolean;
+    lastElement(): T | undefined;
+    isEmpty(): boolean;
+  }
+  interface String {
+    isEmpty(): boolean;
+  }
 }
- 
+export const extensions = () => {
+  ArrayExtensions();
+  StringExtensions();
+};

ui/src/core/extensions/string.ts

@@ -0,0 +1,8 @@
+export const StringExtensions = () => {
+  if ("".isEmpty === undefined) {
+    // eslint-disable-next-line no-extend-native
+    String.prototype.isEmpty = function () {
+      return this.length === 0;
+    };
+  }
+};

ui/src/core/model/database_model.ts

@@ -0,0 +1,3 @@
+export interface DatabaseModel {
+  _id?: string;
+}

ui/src/core/model/trigger_model.ts

@@ -1,7 +1,8 @@
-export interface ITriggerModel {
-  _id?: string;
+import { DatabaseModel } from "./database_model";
+
+export interface ITriggerModel extends DatabaseModel {
   type: string;
-  description:string;
+  description: string;
   value: string[];
 }
 

ui/src/core/ui/header/header.tsx

@@ -25,7 +25,7 @@ export const Header: React.FunctionComponent<IHeader> = (props: IHeader) => {
           marginTop: "20px",
           marginRight: "20px",
           display: "contents",
-        }}
+        }}  
       >
         {needBackButton ? (
           <>

ui/src/core/ui/list/list.tsx

@@ -1,50 +1,82 @@
 import { Row } from "antd";
 import { ReactComponent as AddIcon } from "../../assets/icons/add.svg";
-import { observer } from "mobx-react-lite";
+import { ReactComponent as DeleteIcon } from "../../assets/icons/delete.svg";
 
-export type CallBackFunction = (a: string) => void;
+import { observer } from "mobx-react-lite";
+import { v4 } from "uuid";
+
+export type CallBackFunction = (el: ListElement, index: number) => void;
 
 export interface ListElement {
+  id?: string;
   text: string;
   color?: string;
 }
 
+export enum Icon {
+  add,
+  delete,
+}
 export interface IPropsList {
   values: ListElement[];
   headers?: string;
   onClick?: CallBackFunction;
+  icon: Icon;
 }
 
-export const List: React.FunctionComponent<IPropsList> = observer(
-  (props) => {
-    return (
-      <div>
-        {props.headers !== undefined ? <>{props.headers}</> : <></>}
-        {props.values.map((el) => {
-          return (
-            <Row
+export const List: React.FunctionComponent<IPropsList> = observer((props) => {
+  props.values.map((el) => {
+    if (el.id === undefined) {
+      el.id = v4();
+      return el
+    }
+    return el
+  });
+  return (
+    <div>
+      {props.headers !== undefined ? <>{props.headers}</> : <></>}
+      {props.values.map((el, index) => {
+        return (
+          <Row
+            style={{
+              width: "300px",
+              backgroundColor: el.color ?? "ActiveBorder",
+            }}
+          >
+            <div
               style={{
-                width: "300px",
-                backgroundColor: el.color ?? "ActiveBorder",
+                width: "-webkit-fill-available",
+                margin: "5px",
+                marginLeft: "40px",
+              }}
+            />
+
+            <div
+              style={{
+                marginLeft: "40px",
               }}
             >
-              <div
-                style={{
-                  width: "-webkit-fill-available",
-                  margin: "5px",
-                  marginLeft: "40px",
-                }}
-              />
-
-              <div
-                style={{
-                  marginLeft: "40px",
-                }}
-              >
-                {el.text}
-              </div>
-              <div style={{ flexGrow: "1" }}></div>
-              <AddIcon
+              {el.text}
+            </div>
+            <div style={{ flexGrow: "1" }}></div>
+            {props.icon === Icon.add ? (
+              <>
+                <AddIcon
+                  style={{
+                    width: "50px",
+                    cursor: "pointer",
+                    height: "50px",
+                    marginRight: "40px",
+                  }}
+                  onClick={() => {
+                    if (props.onClick !== undefined) {
+                      props.onClick(el, index);
+                    }
+                  }}
+                />
+              </>
+            ) : (
+              <DeleteIcon
                 style={{
                   width: "50px",
                   cursor: "pointer",
@@ -53,14 +85,14 @@ export const List: React.FunctionComponent<IPropsList> = observer(
                 }}
                 onClick={() => {
                   if (props.onClick !== undefined) {
-                    props.onClick(el.text);
+                    props.onClick(el, index);
                   }
                 }}
               />
-            </Row>
-          );
-        })}
-      </div>
-    );
-  }
-);
+            )}
+          </Row>
+        );
+      })}
+    </div>
+  );
+});