New local front deployment + new args

lib/widgets/forms/data_forms.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:oc_front/models/search.dart';
+import 'package:oc_front/widgets/forms/web_reference_forms.dart';
 
 class DataFormsWidget extends StatefulWidget {
   DataItem item;
@@ -10,64 +11,9 @@ class DataFormsWidget extends StatefulWidget {
 }
 class DataFormsWidgetState extends State<DataFormsWidget> {
   @override Widget build(BuildContext context) {
+    print(widget.item.serialize());
     return Column( children: [
-      Tooltip( message: "protocols",
-        child: Container(
-                              margin: const EdgeInsets.only(left: 10),
-                              width: 45, height: 25,
-                              child: TextFormField( textAlign: TextAlign.center,
-                              initialValue: widget.item.protocols.join(","),
-                              onChanged: (value) { 
-                                widget.item.protocols = value.split(",");
-                              },
-                              style: const TextStyle(fontSize: 12),
-                              decoration: const InputDecoration(
-                                fillColor: Colors.white,
-                                filled: true,
-                                labelText: "protocols",
-                                labelStyle: TextStyle(fontSize: 10),
-                                border: OutlineInputBorder(),
-                                contentPadding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
-                              ),
-                          ))),
-      Tooltip( message: "datatype",
-        child: Container(
-                              margin: const EdgeInsets.only(left: 10),
-                              width: 45, height: 25,
-                              child: TextFormField( textAlign: TextAlign.center,
-                              initialValue: widget.item.dataType,
-                              onChanged: (value) { 
-                                widget.item.dataType = value;
-                              },
-                              style: const TextStyle(fontSize: 12),
-                              decoration: const InputDecoration(
-                                fillColor: Colors.white,
-                                filled: true,
-                                labelText: "datatype",
-                                labelStyle: TextStyle(fontSize: 10),
-                                border: OutlineInputBorder(),
-                                contentPadding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
-                              ),
-                          ))),
-      Tooltip( message: "example",
-        child: Container(
-                              margin: const EdgeInsets.only(left: 10),
-                              width: 45, height: 25,
-                              child: TextFormField( textAlign: TextAlign.center,
-                              initialValue: widget.item.exemple,
-                              onChanged: (value) { 
-                                widget.item.exemple = value;
-                              },
-                              style: const TextStyle(fontSize: 12),
-                              decoration: const InputDecoration(
-                                fillColor: Colors.white,
-                                filled: true,
-                                labelText: "example",
-                                labelStyle: TextStyle(fontSize: 10),
-                                border: OutlineInputBorder(),
-                                contentPadding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
-                              ),
-                          )))
+      WebReferenceFormsWidget(item: widget.item),
     ]);
   }
 }

lib/widgets/forms/processing_forms.dart

@@ -1,136 +1,142 @@
 import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
 import 'package:flutter_flow_chart/flutter_flow_chart.dart';
 import 'package:oc_front/models/search.dart';
+import 'package:oc_front/models/workflow.dart';
 import 'package:oc_front/pages/workflow.dart';
+import 'package:oc_front/widgets/forms/sub_keys_forms.dart';
+import 'package:oc_front/widgets/forms/sub_expose_forms.dart';
+import 'package:oc_front/widgets/forms/sub_map_forms.dart';
+import 'package:oc_front/widgets/inputs/sub_text_input.dart';
 
 Map<String, Map<String, AbstractItem>> proxyWfItem = {};
-
+// ADD EXPOSE
 class ProcessingFormsWidget extends StatefulWidget {
-  AbstractItem item;
+  String elementID;
+  ProcessingItem item;
   Dashboard dash;
-  ProcessingFormsWidget ({ super.key, required this.item, required this.dash });
+  ProcessingFormsWidget ({ super.key, required this.item, required this.dash, required this.elementID });
   @override ProcessingFormsWidgetState createState() => ProcessingFormsWidgetState();
 }
 class ProcessingFormsWidgetState extends State<ProcessingFormsWidget> {
+  Widget getInputAndOutputVariableForms() {
+    var inList = widget.dash.GetArrowByElementID(widget.elementID, true);
+    var outList = widget.dash.GetArrowByElementID(widget.elementID, false);
+    List<Widget> res = [];
+    List<GraphItem> inItems = [];
+    List<GraphItem> outItems = [];
+    for (var inItem in inList) {
+      var element = widget.dash.getElement(inItem.fromID.substring(0,36));
+      if (element == null) { continue; }
+      var g = GraphItem();
+      g.fromDashboard(element.serialize());
+      inItems.add(g);
+    }
+    for (var outItem in outList) {
+      var element = widget.dash.getElement(outItem.toID.substring(0,36));
+      if (element == null) { continue; }
+      var g = GraphItem();
+      g.fromDashboard(element.serialize());
+      outItems.add(g);
+    }
+    if (inItems.isNotEmpty) {
+      res.add(SubKeysMapFormsWidget(dash: widget.dash, isInput: true, item: widget.item, elementID: widget.elementID, 
+        categoryKey: "container", varKey: "env", graphItems: inItems));
+    }
+    if (outItems.isNotEmpty) {
+      res.add(SubKeysMapFormsWidget(dash: widget.dash, isInput: false, item: widget.item, elementID: widget.elementID, 
+        categoryKey: "container", varKey: "env", graphItems: outItems));
+    }
+    return Column( children: res );
+  }
+
   @override Widget build(BuildContext context) {
-    List<Widget> children = [];
+    List<Widget> categories = [];
     var l = widget.item.model?.model?.keys ?? [];
     for (var child in l) {
-      if (widget.item.model!.model![child]!.type != "string") { continue; }
-      children.add(
-        Tooltip( message: child,
-          child: Container( margin: EdgeInsets.only(top: children.isEmpty ? 0 : 15),
-                                width: 200, height: 30,
-                                child: TextFormField( textAlign: TextAlign.start,
-                                initialValue: widget.item.model?.model?[child]?.value,
-                                onChanged: (value) { 
-                                  widget.item.model ?? Model();
-                                  Future.delayed(const Duration(seconds: 2), () {
-                                    if (widget.item.model!.model?[child]?.value == value) {
-                                       dash.save!(dash.id);
-                                    }
-                                  });
-                                  widget.item.model?.model?[child]?.value = value;
-                                },
-                                style: const TextStyle(fontSize: 12),
-                                decoration: InputDecoration(
-                                  hintText: "enter $child...",
-                                  fillColor: Colors.white,
-                                  filled: true,
-                                  labelText: child,
-                                  alignLabelWithHint: false,
-                                  errorStyle: const TextStyle(fontSize: 0),
-                                  hintStyle: const TextStyle(fontSize: 10),
-                                  labelStyle: const TextStyle(fontSize: 10),
-                                  floatingLabelBehavior: FloatingLabelBehavior.always,
-                                  enabledBorder: const OutlineInputBorder(borderSide: BorderSide(color: Colors.grey)),
-                                  border: const OutlineInputBorder(borderSide: BorderSide(color: Colors.grey)),
-                                  contentPadding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
-                                ),
-                            )))
-      );
+      var sub = widget.item.model!.model![child]!;
+      List<Widget> children = [];
+      for (var st in sub.keys) {  
+        if (sub[st]!.type?.contains("map") ?? false) {
+          children.add(
+            SubMapFormsWidget(dash: dash, empty: children.isEmpty, item: widget.item, 
+                          elementID: widget.elementID, categoryKey: child, varKey: st)
+          );
+        } else if (sub[st]!.type == "string") {
+          children.add(SubTextInputWidget(subkey: st, initialValue: widget.item.getVariable([child, st], widget.item.serialize()), 
+            width: 200, empty: children.isEmpty, change: (value) { 
+              widget.item.model ?? Model();
+              Future.delayed(const Duration(seconds: 2), () {
+                if (widget.item.getVariable([child, st], widget.item.serialize()) == value) {
+                  dash.save!(dash.id);
+                }
+              });
+              var el = dash.getElement(widget.elementID);
+              widget.item = widget.item.deserialize(widget.item.setVariable([child, st], value, widget.item.serialize())) as dynamic;
+              el!.element = widget.item as dynamic;
+            })
+          );
+        }  
+      }
+      categories.add(Container(
+          padding: const EdgeInsets.all(10),
+          width: 250,
+          child: Column( 
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              Text("<${child.toUpperCase()}>", style: const TextStyle(fontSize: 13, fontWeight: FontWeight.bold), textAlign: TextAlign.center),
+              Padding(padding: const EdgeInsets.only(bottom: 10), child: SubTextInputWidget(subkey: "image", width: 200, empty: false, change: (value) {}, 
+                initialValue: widget.item.container?.image, readOnly: true,)),
+              ...children,
+              getInputAndOutputVariableForms(),
+            ],)
+        ));
     }
-    if (widget.dash.scheduler["mode"] != null && widget.dash.scheduler["mode"] == 1) {
-      children.add(
-        Tooltip( message: "hostname",
-          child: Container( margin: EdgeInsets.only(top: children.isEmpty ? 0 : 15),
-                                width: 200, height: 30,
-                                child: TextFormField( textAlign: TextAlign.start,
-                                onChanged: (value) { 
-                                  widget.item.model ?? Model();
-                                  Future.delayed(const Duration(seconds: 2), () {
-                                    if (widget.item.model!.model?["hostname"]?.value == value) {
-                                       dash.save!(dash.id);
-                                    }
-                                  });
-                                  widget.item.model?.model?["hostname"]?.value = value;
-                                },
-                                style: const TextStyle(fontSize: 12),
-                                decoration: const InputDecoration(
-                                  hintText: "enter hostname...",
-                                  fillColor: Colors.white,
-                                  filled: true,
-                                  labelText: "hostname",
-                                  alignLabelWithHint: false,
-                                  errorStyle: TextStyle(fontSize: 0),
-                                  hintStyle: TextStyle(fontSize: 10),
-                                  labelStyle: TextStyle(fontSize: 10),
-                                  floatingLabelBehavior: FloatingLabelBehavior.always,
-                                  enabledBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.grey)),
-                                  border: OutlineInputBorder(borderSide: BorderSide(color: Colors.grey)),
-                                  contentPadding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
-                                ),
-                            )))
-      );
-      children.add(
-        Tooltip( message: "port",
-          child: Container( margin: EdgeInsets.only(top: children.isEmpty ? 0 : 15),
-                                width: 200, height: 50,
-                                child: TextFormField( textAlign: TextAlign.start,
-                                onChanged: (value) { 
-                                  widget.item.model ?? Model();
-                                  Future.delayed(const Duration(seconds: 2), () {
-                                    if (widget.item.model!.model?["port"]?.value == value) {
-                                       dash.save!(dash.id);
-                                    }
-                                  });
-                                  try {
-                                    widget.item.model?.model?["port"]?.value = int.parse(value);
-                                  } catch (e) { /**/ }
-                                },
-                                keyboardType: TextInputType.number,
-
-                                inputFormatters: <TextInputFormatter>[
-                                  FilteringTextInputFormatter.digitsOnly
-                                ], // Only numbers can be entered
-                                maxLength: 4,
-                                style: const TextStyle(fontSize: 12),
-                                decoration: const InputDecoration(
-                                  hintText: "enter port...",
-                                  fillColor: Colors.white,
-                                  filled: true,
-                                  labelText: "port",
-                                  alignLabelWithHint: false,
-                                  errorStyle: TextStyle(fontSize: 0),
-                                  hintStyle: TextStyle(fontSize: 10),
-                                  labelStyle: TextStyle(fontSize: 10),
-                                  floatingLabelBehavior: FloatingLabelBehavior.always,
-                                  enabledBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.grey)),
-                                  border: OutlineInputBorder(borderSide: BorderSide(color: Colors.grey)),
-                                  contentPadding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
-                                ),
-                            )))
-      );
+    // EXPOSE 
+    categories.add(Container(
+          padding: const EdgeInsets.all(10),
+          width: 250,
+          decoration: const BoxDecoration(border: Border(top: BorderSide(color: Colors.grey, width: 1))),
+          child: Column( 
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              const Padding(padding: EdgeInsets.only(bottom: 5), child: Text("<EXPOSE>", 
+                style: TextStyle(fontSize: 13, fontWeight: FontWeight.bold), textAlign: TextAlign.center)),
+              Row( children: [
+                InkWell( onTap: () {
+                    widget.item.expose.add(Expose());
+                    var el = dash.getElement(widget.elementID);
+                    el!.element = widget.item as dynamic;
+                    setState(() {});
+                  }, child:
+                  Container( margin: const EdgeInsets.only(left: 15, top: 5),
+                    decoration: BoxDecoration(borderRadius: BorderRadius.circular(5), border: Border.all(color: Colors.grey, width: 1)),
+                    width: 150, height: 30,
+                    child: const Row( mainAxisAlignment: MainAxisAlignment.center,
+                      children: [ Padding( padding: EdgeInsets.only(right: 5), child: Icon(Icons.add)), Text("add exposure")]),
+                  )
+                ),
+                InkWell( onTap: () {
+                  if (widget.item.expose.isEmpty) { return; }
+                    widget.item.expose = widget.item.expose.sublist(0, widget.item.expose.length - 1);
+                    var el = dash.getElement(widget.elementID);
+                    el!.element = widget.item as dynamic;
+                    setState(() {});
+                  }, child:
+                  Container( margin: const EdgeInsets.only(left: 5, right: 10, top: 5),
+                    decoration: BoxDecoration(borderRadius: BorderRadius.circular(5), border: Border.all(color: Colors.grey, width: 1)),
+                    width: 45, height: 30,
+                    child: const Row( mainAxisAlignment: MainAxisAlignment.center,
+                      children: [ Icon(Icons.delete, color: Colors.black) ]),
+                  )
+                )
+              ]),
+            ],)
+        ));
+    for (var expose in widget.item.expose) {
+      categories.add(SubExposeFormsWidget( width: 200, dash: dash, empty: categories.isEmpty, 
+      item: expose, elementID: widget.elementID));
     }
-    return Column( children: [
-      Container( padding: const EdgeInsets.all(10), width: 250, height: 60, margin: const EdgeInsets.only(bottom: 15),
-        decoration: const BoxDecoration(border: Border(bottom: BorderSide(color: Colors.grey, width: 1))),
-        child: const Column( mainAxisAlignment: MainAxisAlignment.center, children: [
-          Text("ELEMENT INFO", style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold), textAlign: TextAlign.center),
-          Text("<general>", style: TextStyle(fontSize: 12), textAlign: TextAlign.center),
-      ])),
-      ...children
-    ]);
+    return SizedBox( height: MediaQuery.of(context).size.height - 330, child: SingleChildScrollView( child: Column( 
+      children: categories )) );
   }
 }

lib/widgets/forms/scheduler_forms.dart

@@ -24,6 +24,61 @@ class SchedulerFormsWidget extends StatefulWidget {
 }
 class SchedulerFormsWidgetState extends State<SchedulerFormsWidget> {
   CheckService check = CheckService();
+  void save(List<GlobalKey<FormFieldState>> formKeys) {
+    dash.scheduleActive = !dash.scheduleActive;
+    for (var k in formKeys) {
+      if (k.currentState != null) {
+        if (!k.currentState!.validate()) {
+          dash.scheduleActive = !dash.scheduleActive;
+          return;
+        } else { k.currentState!.save();}
+      }
+    }
+    DateTime now = DateTime.now().add(const Duration(minutes: 1));
+    if (dash.scheduler["start"] == null || DateTime.parse(dash.scheduler["start"]!).isBefore(now)) {
+      dash.scheduler["start"] = now.toUtc().toIso8601String();
+      if (dash.scheduler["end"] != null) {
+        dash.scheduler["end"] = now.add(const Duration(minutes: 1)).toUtc().toIso8601String();
+      }
+    }
+    print(widget.item.id);
+    widget.item.save!(widget.item.id);
+  }
+  void checkBooking(List<GlobalKey<FormFieldState>> formKeys, void Function(List<GlobalKey<FormFieldState>> )? f){
+    if (widget.item.scheduler["start"] == null) {
+      DateTime now = DateTime.now().add(const Duration(minutes: 5));
+      widget.item.scheduler["start"] = now.toUtc().toIso8601String();
+    }
+    var s = DateTime.parse(widget.item.scheduler["start"]).toUtc().toIso8601String();
+    var e = "";
+    if (widget.item.scheduler["end"] == null) {
+      e = DateTime.parse(widget.item.scheduler["start"]).add(const Duration(seconds: 5)).toUtc().toIso8601String();
+    } else {
+      e = DateTime.parse(widget.item.scheduler["end"]).toUtc().toIso8601String();
+    }
+    check.search(context, [widget.item.id ?? "", s.substring(0, 19), e.substring(0, 19)], {}).then(
+      (v) {
+        if (v.data == null) { return; }
+        widget.booking = v.data!.is_available;
+        print(v.data!.is_available);
+        if (v.data!.is_available) {
+          print(f);
+          if (f != null) { f(formKeys); 
+          } else {
+            showAlertBanner( context, () {}, 
+              const InfoAlertBannerChild(text: "no booking found at this date"),// <-- Put any widget here you want!
+              alertBannerLocation:  AlertBannerLocation.bottom,);
+          } 
+        } else {
+          showAlertBanner( context, () {}, 
+          const AlertAlertBannerChild(text: "booking found at this date"),// <-- Put any widget here you want!
+           alertBannerLocation:  AlertBannerLocation.bottom,);
+        }
+        setState(() {});
+      }
+    );
+  }
+
   @override Widget build(BuildContext context) {
     try {
       if (widget.item.scheduler["mode"] == null) { widget.item.scheduler["mode"] = 1; }
@@ -87,7 +142,7 @@ class SchedulerFormsWidgetState extends State<SchedulerFormsWidget> {
           width: 140, 
           initialValue: widget.item.scheduler["mode"] == 1, 
           activeColor: Colors.green, inactiveColor: Colors.green,
-          activeChild: const Text("service", style: TextStyle(color: Colors.white)), 
+          activeChild: const Text("simple task", style: TextStyle(color: Colors.white)), 
             inactiveChild: const Text("cron task", style: TextStyle(color: Colors.white)),  
           borderRadius:  const BorderRadius.all(Radius.circular(15)), height: 30.0, disabledOpacity: 0.5,
           onChanged: (value) { 
@@ -372,34 +427,7 @@ class SchedulerFormsWidgetState extends State<SchedulerFormsWidget> {
       Tooltip( message: "check booking",
                               child: InkWell( mouseCursor: SystemMouseCursors.click, 
                               onTap: () {
-                                if (dash.scheduleActive) { return; }
-                                if (dash.scheduler["start"] == null ) {
-                                  DateTime now = DateTime.now().add(const Duration(minutes: 5));
-                                  dash.scheduler["start"] = now.toUtc().toIso8601String();
-                                }
-                                var s = DateTime.parse(dash.scheduler["start"]).toUtc().toIso8601String();
-                                var e = "";
-                                if (dash.scheduler["end"] == null) {
-                                  e = DateTime.parse(dash.scheduler["start"]).add(const Duration(seconds: 5)).toUtc().toIso8601String();
-                                } else {
-                                  e = DateTime.parse(dash.scheduler["end"]).toUtc().toIso8601String();
-                                }
-                                check.search(context, [widget.item.id ?? "", s.substring(0, 19), e.substring(0, 19)], {}).then(
-                                  (v) {
-                                    if (v.data == null) { return; }
-                                    widget.booking = v.data!.is_available;
-                                    if (v.data!.is_available) {
-                                      showAlertBanner( context, () {}, 
-                                      const InfoAlertBannerChild(text: "no booking found at this date"),// <-- Put any widget here you want!
-                                       alertBannerLocation:  AlertBannerLocation.bottom,);
-                                    } else {
-                                      showAlertBanner( context, () {}, 
-                                      const AlertAlertBannerChild(text: "booking found at this date"),// <-- Put any widget here you want!
-                                       alertBannerLocation:  AlertBannerLocation.bottom,);
-                                    }
-                                    setState(() {});
-                                  }
-                                );
+                                checkBooking(formKeys, null);
                               }, child: Container( margin: const EdgeInsets.only(bottom: 5),
                                 decoration: BoxDecoration(borderRadius: BorderRadius.circular(5), 
                                   border: Border.all(color: widget.booking == null && !dash.scheduleActive ? Colors.black :  (widget.booking == true || dash.scheduleActive  ? Colors.green : Colors.red), width: 1)),
@@ -412,23 +440,7 @@ class SchedulerFormsWidgetState extends State<SchedulerFormsWidget> {
       Tooltip( message: dash.scheduleActive ? "unbook" : "book",
                               child: InkWell( mouseCursor: SystemMouseCursors.click, 
                               onTap: () {
-                                dash.scheduleActive = !dash.scheduleActive;
-                                for (var k in formKeys) {
-                                  if (k.currentState != null) {
-                                    if (!k.currentState!.validate()) {
-                                      return;
-                                    } else { k.currentState!.save();}
-                                  }
-                                }
-                                DateTime now = DateTime.now().add(const Duration(minutes: 1));
-                                if (dash.scheduler["start"] == null || DateTime.parse(dash.scheduler["start"]!).isBefore(now)) {
-                                  dash.scheduler["start"] = now.toUtc().toIso8601String();
-                                  if (dash.scheduler["end"] != null) {
-                                    dash.scheduler["end"] = now.add(const Duration(minutes: 1)).toUtc().toIso8601String();
-                                  }
-                                }
-                                widget.item.save!(widget.item.id);
-                                setState(() {   });
+                                dash.scheduleActive ? setState(() {  save(formKeys); }) : checkBooking(formKeys,  save);
                               }, child: Container( margin: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
                                 decoration: BoxDecoration(borderRadius: BorderRadius.circular(5), 
                                   border: Border.all(color: dash.scheduleActive ? Colors.green : Colors.black)),

lib/widgets/forms/storage_forms.dart

@@ -0,0 +1,18 @@
+import 'package:flutter/material.dart';
+import 'package:oc_front/models/search.dart';
+import 'package:oc_front/widgets/forms/web_reference_forms.dart';
+
+class StorageFormsWidget extends StatefulWidget {
+  StorageItem item;
+  String purpose = ""; 
+  Function validate = () {};
+  StorageFormsWidget ({ super.key, required this.item });
+  @override StorageFormsWidgetState createState() => StorageFormsWidgetState();
+}
+class StorageFormsWidgetState extends State<StorageFormsWidget> {
+  @override Widget build(BuildContext context) {
+    return Column( children: [
+      WebReferenceFormsWidget(item: widget.item),
+    ]);
+  }
+}

lib/widgets/forms/sub_expose_forms.dart

@@ -0,0 +1,63 @@
+
+import 'package:flutter/material.dart';
+import 'package:flutter_flow_chart/flutter_flow_chart.dart';
+import 'package:oc_front/models/search.dart';
+import 'package:oc_front/widgets/inputs/sub_text_input.dart';
+
+class SubExposeFormsWidget extends StatefulWidget {
+  Expose item;
+  Dashboard dash; 
+  String elementID = "";
+  double width = 200;
+  bool empty = false;
+  SubExposeFormsWidget ({ super.key, required this.dash, 
+    this.empty = false, required this.item, required this.elementID, required this.width });
+  @override SubExposeFormsWidgetState createState() => SubExposeFormsWidgetState();
+}
+class SubExposeFormsWidgetState extends State<SubExposeFormsWidget> {
+  @override Widget build(BuildContext context) {
+    return Column( children : [
+      Container( margin: const EdgeInsets.only(left: 10, right: 10, top: 5),
+                  decoration: BoxDecoration(border: Border.all(color: Colors.grey, width: 1)),
+                  width: 250
+        ),
+        SubTextInputWidget(subkey: "reference port", initialValue: widget.item.port != null ? '${widget.item.port}' : null, 
+        width: widget.width, empty: widget.empty, change: (value) { 
+                  try {
+                    widget.item.port = int.parse(value);
+                    Future.delayed(const Duration(seconds: 2), () {
+                      if (widget.item.port == int.parse(value) && int.parse(value) != 0) {
+                        widget.dash.save!(widget.dash.id);
+                      }
+                    });
+                  } catch (e) {  widget.item.port = null; }
+                  var el = widget.dash.getElement(widget.elementID);
+                  el!.element = widget.item as dynamic;
+                }),
+        SubTextInputWidget(subkey: "PAT", initialValue: widget.item.PAT != null ? '${widget.item.PAT}' : null, 
+        width: widget.width, empty: widget.empty, change: (value) { 
+                  try {
+                    widget.item.PAT = int.parse(value);
+                    Future.delayed(const Duration(seconds: 2), () {
+                      if (widget.item.PAT == int.parse(value) && int.parse(value) != 0) {
+                        widget.dash.save!(widget.dash.id);
+                      }
+                    });
+                  } catch (e) { widget.item.PAT = null;  }
+                  var el = widget.dash.getElement(widget.elementID);
+                  el!.element = widget.item as dynamic;
+                }),
+        SubTextInputWidget(subkey: "reverse path", initialValue: widget.item.PAT != null ? '${widget.item.PAT}' : null, 
+        width: widget.width, empty: widget.empty, change: (value) { 
+                  try {
+                    widget.item.path = value;
+                    Future.delayed(const Duration(seconds: 2), () {
+                      if (widget.item.path == value) {  widget.dash.save!(widget.dash.id); }
+                    });
+                  } catch (e) { widget.item.path = null;  }
+                  var el = widget.dash.getElement(widget.elementID);
+                  el!.element = widget.item as dynamic;
+                }),
+    ]); 
+  }
+}

lib/widgets/forms/sub_keys_forms.dart

@@ -0,0 +1,61 @@
+
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+import 'package:flutter_flow_chart/flutter_flow_chart.dart';
+import 'package:oc_front/models/workflow.dart';
+import 'package:oc_front/widgets/inputs/sub_text_input.dart';
+
+class SubKeysMapFormsWidget extends StatefulWidget {
+  FlowData item;
+  Dashboard dash; 
+  String varKey = "";
+  bool empty = false;
+  bool isInput = true;
+  String elementID = "";
+  String categoryKey = "";
+  List<GraphItem> graphItems = [];
+  SubKeysMapFormsWidget({ super.key, required this.dash, required this.isInput,
+    this.empty = false, required this.item, required this.elementID, required this.graphItems,
+    required this.categoryKey, required this.varKey });
+  @override SubKeysMapFormsWidgetState createState() => SubKeysMapFormsWidgetState();
+}
+class SubKeysMapFormsWidgetState extends State<SubKeysMapFormsWidget> {
+
+  @override Widget build(BuildContext context) {
+    List<Widget> children = [];
+
+    bool save = false;
+    for (var graphItem in widget.graphItems) {
+      int count = 0;
+      var el = graphItem.getElement();
+      if (el == null || el.model == null) { continue; }
+      for ( var r in el.model!.refs.keys) {
+        var env = widget.item.getVariable(["container", "env"], widget.item.serialize());
+        if (env == null && env is Map<String, dynamic>) { continue; }
+        var n = "${el.topic.toUpperCase()}_${el.getName().toUpperCase().replaceAll(" ", "_")}_${r.toUpperCase()}_$count";
+        if (env[n] == null) {
+          save = true;
+        }
+        env[n]= "{{ ${ widget.isInput ? "in" : "out" }_${graphItem.id}_$r }}";
+        widget.item.setVariable(["container", "env"], env, el.serialize());
+        children.add( Padding(padding: const EdgeInsets.only(bottom: 10), 
+          child: SubTextInputWidget(subkey: n, width: 200, empty: false, change: (value) {}, initialValue: n, readOnly: true, noLabel: true)));
+        count++;
+      }
+    }
+    if (save) {
+      widget.dash.save!(widget.dash.id);
+    }
+    if (children.isEmpty) {
+      return Container();
+    }
+    return Column( children : [
+      Container(width: 250, padding: const EdgeInsets.only(top: 10, bottom: 10),
+        decoration: const BoxDecoration(border: Border(bottom: BorderSide(color: Colors.grey, width: 1)))),
+      Padding( padding: const EdgeInsets.only(top: 10),
+        child: Text("<${widget.isInput ? "INPUT ENV VARIABLE" : "OUTPUT ENV VARIABLE"}>", style: const TextStyle(fontSize: 13, fontWeight: FontWeight.bold), 
+                    textAlign: TextAlign.center)),
+      Column( children: children),
+    ]); 
+  }
+}

lib/widgets/forms/sub_map_forms.dart

@@ -0,0 +1,113 @@
+
+import 'package:flutter/material.dart';
+import 'package:flutter_flow_chart/flutter_flow_chart.dart';
+import 'package:oc_front/widgets/inputs/sub_text_input.dart';
+
+class MapForm {
+  String key = "";
+  String value = "";
+  MapForm({ required this.key, required this.value });
+}
+
+class SubMapFormsWidget extends StatefulWidget {
+  String categoryKey = "";
+  String varKey = "";
+  String elementID = "";
+  FlowData item;
+  Dashboard dash; 
+  bool empty = false;
+  List<MapForm> forms = [];
+  SubMapFormsWidget ({ super.key, required this.dash, 
+    this.empty = false, required this.item, required this.elementID,
+    required this.categoryKey, required this.varKey });
+  @override SubMapFormsWidgetState createState() => SubMapFormsWidgetState();
+}
+class SubMapFormsWidgetState extends State<SubMapFormsWidget> {
+
+  Map<String, dynamic> toMap() {
+    Map<String, dynamic> m = {};
+    for (var form in widget.forms) {
+      m[form.key] = form.value;
+    }
+    return m;
+  }
+
+  @override Widget build(BuildContext context) {
+    Map<String, dynamic>? m = widget.item.getVariable([widget.categoryKey, widget.varKey], widget.item.serialize());
+    var l = [widget.categoryKey, widget.varKey];
+    List<Widget> children = [];
+    List<String> empty = [];
+    widget.forms = [];
+    var i = 0;
+    for (var key in (m?.keys.toList() ?? empty)) {
+      if (((m![key] as String?)?.contains('{{') ?? false)) {
+        continue;
+      }
+      widget.forms.add(MapForm(key: key, value: m[key]));
+      children.add(Padding( padding: const EdgeInsets.symmetric(horizontal: 15), child: Row( children: [
+        SubTextInputWidget(subkey: "key", initialValue: key, width: 91, empty: widget.empty, 
+          change: (value) { 
+            setState(() {
+              widget.forms[i].key = value;
+              Future.delayed(const Duration(seconds: 2), () {
+                widget.dash.save!(widget.dash.id);
+            });
+            var el = widget.dash.getElement(widget.elementID);
+            widget.item = widget.item.deserialize(widget.item.setVariable(l, toMap(), widget.item.serialize())) as dynamic;
+            el!.element = widget.item as dynamic;
+          });
+        }),
+        const Padding(padding: EdgeInsets.only(left: 5, right: 5, top: 15), child: Text("=", textAlign: TextAlign.center,)),
+        SubTextInputWidget(subkey: "value", initialValue: widget.forms[i].value, width: 90.8, empty: widget.empty, 
+          change: (value) { 
+            Future.delayed(const Duration(seconds: 2), () {
+                widget.dash.save!(widget.dash.id);
+            });
+            widget.forms[i].value = value;
+            var el = widget.dash.getElement(widget.elementID);
+            widget.item = widget.item.deserialize(
+              widget.item.setVariable(l, toMap(), widget.item.serialize())) as dynamic;
+            el!.element = widget.item as dynamic;
+        }),     
+      ])));
+      i++;
+    }
+    return Column( children : [
+      Container(width: 250, padding: const EdgeInsets.only(top: 10),
+        decoration: const BoxDecoration(border: Border(bottom: BorderSide(color: Colors.grey, width: 1))),),
+      Row( children: [
+              InkWell( onTap: () {
+                  widget.forms.add(MapForm(key: "", value: ""));
+                  var el = widget.dash.getElement(widget.elementID);
+                  widget.item = widget.item.deserialize(
+                    widget.item.setVariable(l, toMap(), widget.item.serialize())) as dynamic;
+                  el!.element = widget.item as dynamic;
+                  setState(() {});
+                }, child: Container( margin: const EdgeInsets.only(left: 15, top: 10),
+                    decoration: BoxDecoration(borderRadius: BorderRadius.circular(5), border: Border.all(color: Colors.grey, width: 1)),
+                    width: 150, height: 30,
+                    child: Row( mainAxisAlignment: MainAxisAlignment.center,
+                      children: [ const Padding( padding: EdgeInsets.only(right: 5), child: Icon(Icons.add)), Text("add ${widget.varKey} vars")]),
+                  ),  
+              ),
+              InkWell( onTap: () {
+                      if (widget.forms.isEmpty) { return;}
+                      widget.forms.sublist(0, widget.forms.length - 1);
+                      widget.item = widget.item.deserialize(
+                        widget.item.setVariable(l, toMap(), widget.item.serialize())) as dynamic;
+                      var el = widget.dash.getElement(widget.elementID);
+                      el!.element = widget.item as dynamic;
+                      setState(() { widget.dash.save!(widget.dash.id); });
+                    }, child:
+                    Container( margin: const EdgeInsets.only(left: 5, right: 10, top: 10),
+                      decoration: BoxDecoration(borderRadius: BorderRadius.circular(5), border: Border.all(color: Colors.grey, width: 1)),
+                      width: 45, height: 30,
+                      child: const Row( mainAxisAlignment: MainAxisAlignment.center,
+                        children: [ Icon( Icons.delete, color: Colors.black ) ]),
+                    )
+                  ), 
+            ]),
+      ...children
+    ]); 
+  }
+}

lib/widgets/forms/web_reference_forms.dart

@@ -0,0 +1,23 @@
+import 'package:flutter/material.dart';
+import 'package:oc_front/widgets/inputs/sub_text_input.dart';
+
+class WebReferenceFormsWidget extends StatefulWidget {
+  dynamic item;
+  WebReferenceFormsWidget ({ super.key, required this.item });
+  @override WebReferenceFormsWidgetState createState() => WebReferenceFormsWidgetState();
+}
+class WebReferenceFormsWidgetState extends State<WebReferenceFormsWidget> {
+  @override Widget build(BuildContext context) {
+    return Column( children: [
+      SubTextInputWidget(subkey: "path", width: 200, empty: false, change: (value) { 
+        widget.item.protocols = value.split(",");
+      }, initialValue: widget.item.path, readOnly: true,),
+      SubTextInputWidget(subkey: "protocol", width: 200, empty: false, change: (value) { 
+        widget.item.protocols = value.split(",");
+      }, initialValue: widget.item.protocol, readOnly: true,),
+      SubTextInputWidget(subkey: "type", width: 200, empty: false, change: (value) { 
+        widget.item.protocols = value.split(",");
+      }, initialValue: widget.item.type, readOnly: true,),
+    ]);
+  }
+}