🚧 #80 Wizards Flash and Read view

rucko24 · Nov 20, 2024 · 122e546 · 122e546
1 parent b2d80f6
commit 122e546
Show file tree

Hide file tree

Showing 20 changed files with 165 additions and 663 deletions.
diff --git a/...generated/jar-resources/images/custom-images/read-flash-and-download-button.png b/...generated/jar-resources/images/custom-images/read-flash-and-download-button.png
diff --git a/...rontend/generated/jar-resources/images/custom-images/read-flash-permissions.gif b/...rontend/generated/jar-resources/images/custom-images/read-flash-permissions.gif
diff --git a/src/main/java/com/esp/espflow/util/console/OutPutConsole.java b/src/main/java/com/esp/espflow/util/console/OutPutConsole.java
@@ -77,9 +77,8 @@ private void getConsole() {
 
         xterm.getXTerm().setId("id-for-xterm");
         xterm.getXTerm().addClassName("xterm");
-//        preserveStateAddon.writeln("esptool terminal!");
-//        preserveStateAddon.setPrompt("root@esptool $ ");
-//        preserveStateAddon.writePrompt();
+        getStyle().set("scrollbar-width", "thin");
+
         xterm.setPrompt("root@esptool $ ");
         xterm.writePrompt();
         xterm.getXTerm().getElement().setProperty("readonly", Boolean.TRUE);
@@ -88,14 +87,9 @@ private void getConsole() {
         xterm.getXTerm().setCopySelection(true);
 
         xterm.setCursorStyle(ITerminalOptions.CursorStyle.UNDERLINE);
-        //xterm.setUseSystemClipboard(UseSystemClipboard.READWRITE);
-
-        //xterm.addThemeVariants(TextAreaVariant.LUMO_SMALL);
 
-        //xterm.getStyle().set(OVERFLOW_Y, AUTO);
         xterm.getXTerm().getElement().setAttribute("title", "output");
         xterm.getXTerm().getStyle().set(BOX_SHADOW_PROPERTY, BOX_SHADOW_VALUE);
-        //xterm.addClassName("child-text-area-console");
         xterm.focus();
         xterm.getXTerm().fit();
 
@@ -106,7 +100,7 @@ private void getConsole() {
 
         super.add(divTextArea);
         super.setWidthFull();
-        //TODO FIXME esto afecta al la consola en la parte de Read Flash
+
         super.addClassNames(Display.FLEX, Left.SMALL, Bottom.SMALL);
         super.getStyle().set(OVERFLOW_Y, HIDDEN);
         super.addClassName("h3-text-area-div");

diff --git a/src/main/java/com/esp/espflow/views/MainLayout.java b/src/main/java/com/esp/espflow/views/MainLayout.java
@@ -11,6 +11,9 @@
 import com.infraleap.animatecss.Animated;
 import com.vaadin.flow.component.AttachEvent;
 import com.vaadin.flow.component.DetachEvent;
+import com.vaadin.flow.component.Key;
+import com.vaadin.flow.component.KeyModifier;
+import com.vaadin.flow.component.Shortcuts;
 import com.vaadin.flow.component.UI;
 import com.vaadin.flow.component.UIDetachedException;
 import com.vaadin.flow.component.applayout.AppLayout;
@@ -283,6 +286,16 @@ private Footer createFooter() {
             });
             sigOutItem.addComponentAsFirst(SvgFactory.createIconFromSvg("signout.svg", "20px", null));
 
+            Shortcuts.addShortcutListener(userName, e -> {
+                settingsDialogView.open();
+                getUI().ifPresent(ui -> {
+                    ui.access(() -> {
+                        ui.setChildComponentModal(settingsDialogView, false);
+                    });
+                });
+            }, Key.KEY_S, KeyModifier.CONTROL, KeyModifier.ALT);
+
+
             layout.add(userMenu, settingsDialogView);
         } else {
             Anchor loginLink = new Anchor("login", "Sign in");

diff --git a/...esp/ChangeSerialPortPermissionDialog.java → ...log/ChangeSerialPortPermissionDialog.java b/...esp/ChangeSerialPortPermissionDialog.java → ...log/ChangeSerialPortPermissionDialog.java
@@ -1,4 +1,4 @@
-package com.esp.espflow.views.flashesp;
+package com.esp.espflow.views.dialog;
 
 import com.esp.espflow.entity.ChangePasswordRecordBinder;
 import com.esp.espflow.exceptions.CanNotBeReadDeviceException;
@@ -7,6 +7,7 @@
 import com.esp.espflow.util.GetOsName;
 import com.esp.espflow.util.ProcessCommandsInternals;
 import com.esp.espflow.util.svgfactory.SvgFactory;
+import com.esp.espflow.views.flashesp.DivHeaderPorts;
 import com.vaadin.flow.component.Key;
 import com.vaadin.flow.component.button.Button;
 import com.vaadin.flow.component.button.ButtonVariant;
@@ -155,7 +156,7 @@ private VerticalLayout createContent() {
 
         final Binder<ChangePasswordRecordBinder> binder = new Binder<>();
         binder.forField(copyComboBox)
-                        .withValidator(item -> item != null && !item.isEmpty(), "Invalid port")
+                .withValidator(item -> item != null && !item.isEmpty(), "Invalid port")
                 .bind(ChangePasswordRecordBinder::port, (key, value) -> {});
         binder.forField(passwordField)
                 .withValidator(item -> item != null && !item.isEmpty(), "Invalid password")

diff --git a/src/main/java/com/esp/espflow/views/flashesp/DivHeaderPorts.java b/src/main/java/com/esp/espflow/views/flashesp/DivHeaderPorts.java
@@ -7,6 +7,7 @@
 import com.esp.espflow.util.GetOsName;
 import com.esp.espflow.util.ResponsiveHeaderDiv;
 import com.esp.espflow.util.svgfactory.SvgFactory;
+import com.esp.espflow.views.dialog.ChangeSerialPortPermissionDialog;
 import com.infraleap.animatecss.Animated;
 import com.infraleap.animatecss.Animated.Animation;
 import com.vaadin.flow.component.AttachEvent;

diff --git a/src/main/java/com/esp/espflow/views/flashesp/FlashEspView.java b/src/main/java/com/esp/espflow/views/flashesp/FlashEspView.java
@@ -13,6 +13,7 @@
 import com.esp.espflow.util.console.OutPutConsole;
 import com.esp.espflow.util.svgfactory.SvgFactory;
 import com.esp.espflow.views.MainLayout;
+import com.esp.espflow.views.flashesp.wizards.WizardFlashEspDialog;
 import com.infraleap.animatecss.Animated;
 import com.infraleap.animatecss.Animated.Animation;
 import com.vaadin.flow.component.AttachEvent;
@@ -147,6 +148,7 @@ private SplitLayout getSplitLayout() {
                 divRowFlashMode, divRowEraseFlash, divRowUploaderFlash,
                 buttonFlash);
         contentForPrimary.addClassName("vertical-parent");
+        contentForPrimary.getStyle().set("scrollbar-width","thin");
         splitLayout.addToPrimary(contentForPrimary);
         /*
          * Secondary section

diff --git a/...InitialInformationFlashEspViewDialog.java → ...InitialInformationFlashEspViewDialog.java b/...InitialInformationFlashEspViewDialog.java → ...InitialInformationFlashEspViewDialog.java
@@ -1,4 +1,4 @@
-package com.esp.espflow.views.flashesp;
+package com.esp.espflow.views.flashesp.wizards;
 
 import com.esp.espflow.util.svgfactory.SvgFactory;
 import com.vaadin.flow.component.Component;

diff --git a/.../views/flashesp/WizardFlashEspDialog.java → ...lashesp/wizards/WizardFlashEspDialog.java b/.../views/flashesp/WizardFlashEspDialog.java → ...lashesp/wizards/WizardFlashEspDialog.java
@@ -1,4 +1,4 @@
-package com.esp.espflow.views.flashesp;
+package com.esp.espflow.views.flashesp.wizards;
 
 import com.esp.espflow.entity.dto.WizardEspDto;
 import com.esp.espflow.service.respository.impl.WizardEspService;
@@ -466,6 +466,7 @@ private Component createFlashIdContent() {
 
         final Scroller scroller = new Scroller(layout);
         scroller.setScrollDirection(ScrollDirection.VERTICAL);
+        scroller.getStyle().set("scrollbar-width", "thin");
 
         return scroller;
     }
@@ -509,6 +510,7 @@ private Component createWriteFlashContent() {
 
         final Scroller scroller = new Scroller(layout);
         scroller.setScrollDirection(ScrollDirection.VERTICAL);
+        scroller.getStyle().set("scrollbar-width", "thin");
 
         return scroller;
     }

diff --git a/src/main/java/com/esp/espflow/views/readflash/ReadFlashView.java b/src/main/java/com/esp/espflow/views/readflash/ReadFlashView.java
@@ -16,7 +16,8 @@
 import com.esp.espflow.util.console.OutPutConsole;
 import com.esp.espflow.util.svgfactory.SvgFactory;
 import com.esp.espflow.views.MainLayout;
-import com.esp.espflow.views.flashesp.ChangeSerialPortPermissionDialog;
+import com.esp.espflow.views.dialog.ChangeSerialPortPermissionDialog;
+import com.esp.espflow.views.readflash.wizard.WizardReadFlashView;
 import com.infraleap.animatecss.Animated;
 import com.infraleap.animatecss.Animated.Animation;
 import com.vaadin.componentfactory.ToggleButton;
@@ -134,9 +135,8 @@ public class ReadFlashView extends Div implements ResponsiveHeaderDiv, BeforeEnt
      */
     private final Sinks.Many<EspMessageListItemEvent> publishMessageListItem;
     /*
-     * Show initial information
+     * Show initial wizard
      */
-    private final InitialInformationReadFlashViewDialog initialInformationReadFlashViewDialog;
     private final WizardReadFlashView wizardReadFlashView;
     /*
      * To save the status of the wizards

diff --git a/...nitialInformationReadFlashViewDialog.java → ...ash/wizard/StepRefreshDevicesContent.java b/...nitialInformationReadFlashViewDialog.java → ...ash/wizard/StepRefreshDevicesContent.java
@@ -1,61 +1,48 @@
-package com.esp.espflow.views.readflash;
+package com.esp.espflow.views.readflash.wizard;
 
 import com.esp.espflow.util.svgfactory.SvgFactory;
 import com.vaadin.flow.component.Component;
-import com.vaadin.flow.component.button.Button;
-import com.vaadin.flow.component.button.ButtonVariant;
-import com.vaadin.flow.component.dialog.Dialog;
 import com.vaadin.flow.component.html.Anchor;
 import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.component.html.H3;
 import com.vaadin.flow.component.html.ListItem;
 import com.vaadin.flow.component.html.Paragraph;
+import com.vaadin.flow.component.html.Span;
 import com.vaadin.flow.component.html.UnorderedList;
 import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
+import com.vaadin.flow.component.orderedlayout.VerticalLayout;
 import com.vaadin.flow.component.shared.Tooltip;
-import com.vaadin.flow.spring.annotation.SpringComponent;
-import com.vaadin.flow.spring.annotation.UIScope;
 import com.vaadin.flow.theme.lumo.LumoUtility;
 import lombok.extern.log4j.Log4j2;
 
 import static com.esp.espflow.util.EspFlowConstants.FREE_BSD_ICON;
 import static com.esp.espflow.util.EspFlowConstants.INNER_HTML;
 import static com.esp.espflow.util.EspFlowConstants.LINUX_ICON;
 import static com.esp.espflow.util.EspFlowConstants.MACOS_ICON;
-import static com.esp.espflow.util.EspFlowConstants.OK;
 import static com.esp.espflow.util.EspFlowConstants.WINDOWS_ICON;
 
 /**
  * @author rub`n
  */
 @Log4j2
-@UIScope
-@SpringComponent
-public class InitialInformationReadFlashViewDialog extends Dialog {
+public class StepRefreshDevicesContent extends VerticalLayout {
 
     private static final String TARGET_BLANK = "_blank";
 
     private final Div content = new Div();
     private final H3 overView = new H3("Overview");
     private final H3 someFeatures = new H3("Some of the features:");
 
-    public InitialInformationReadFlashViewDialog() {
-        super.setModal(true);
+    public StepRefreshDevicesContent() {
 
         content.addClassNames(LumoUtility.Display.FLEX, LumoUtility.FlexDirection.COLUMN);
-        content.setWidth("500px");
 
         var paragraphOverView = paragraphOverView();
         var listItemsWithFeatures = createListItemsWithFeatures();
 
         content.add(overView, paragraphOverView, someFeatures, listItemsWithFeatures);
         super.add(content);
 
-        final Button buttonOk = new Button(OK, (event -> super.close()));
-        buttonOk.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
-
-        super.getFooter().add(buttonOk);
-
     }
 
     private Paragraph paragraphOverView() {
@@ -65,15 +52,18 @@ private Paragraph paragraphOverView() {
                 " creating a Slide configured with device information read. <br> We can also read the firmware and save it, " +
                 "to read it we must specify the memory area or read it fully, all the reading process will be shown" +
                 " in the output console.");
+        paragraphOverView.addClassNames(LumoUtility.FontSize.SMALL, LumoUtility.TextColor.SECONDARY);
         return paragraphOverView;
     }
 
     private UnorderedList createListItemsWithFeatures() {
         final UnorderedList unorderedList = new UnorderedList();
 
         final ListItem flashIdItem = new ListItem(createFlashIdAnchor());
-        final ListItem writeIdItem = new ListItem(createReadFlashAnchor());
-        unorderedList.add(flashIdItem, writeIdItem);
+        final ListItem readFlashItem = new ListItem(createReadFlashAnchor());
+        final ListItem changePortPermissions = new ListItem(createChangePermissionsOnPortItem());
+        unorderedList.add(flashIdItem, readFlashItem, changePortPermissions);
+        unorderedList.addClassNames(LumoUtility.FontSize.SMALL, LumoUtility.TextColor.SECONDARY);
 
         return unorderedList;
     }
@@ -91,11 +81,21 @@ private Component createReadFlashAnchor() {
         final Anchor flashId = new Anchor("https://docs.espressif.com/projects/esptool/en/latest/esp8266/esptool/basic-commands.html?highlight=version#read-flash-contents-read-flash");
         flashId.getElement().setProperty(INNER_HTML, "<strong>read_flash</strong>");
         flashId.setTarget(TARGET_BLANK);
-        final Div divSpan = new Div(flashId);
+        return new Div(flashId);
+    }
+
+    private Component createChangePermissionsOnPortItem() {
+        final Span span = new Span("Change of permissions on the serial port.");
+        Tooltip.forComponent(span).setText("Change of permissions on the serial port.");
+
+        final Div divSpan = new Div(span);
+        divSpan.addClassNames(LumoUtility.Display.INLINE_GRID,
+                LumoUtility.TextOverflow.ELLIPSIS,
+                LumoUtility.Whitespace.PRE_WRAP);
 
         final HorizontalLayout row = new HorizontalLayout();
         var svgIconWin = SvgFactory.createIconFromSvg(WINDOWS_ICON, "20px", null);
-        Tooltip.forComponent(svgIconWin).setText("Windows");
+        Tooltip.forComponent(svgIconWin).setText("Not compatible with Windows");
         var svgIconLinux = SvgFactory.createIconFromSvg(LINUX_ICON, "20px", null);
         Tooltip.forComponent(svgIconLinux).setText("Linux");
         var svgIconMac = SvgFactory.createIconFromSvg(MACOS_ICON, "20px", null);
@@ -104,7 +104,7 @@ private Component createReadFlashAnchor() {
         Tooltip.forComponent(svgIconFreeBSD).setText("FreeBSD");
         var divIcons = new Div(svgIconWin, svgIconLinux, svgIconMac, svgIconFreeBSD);
         row.add(divSpan, divIcons);
-
+        row.setAlignSelf(Alignment.START, divIcons);
         return row;
     }