diff --git a/src/main/frontend/generated/jar-resources/images/svg-icons/usb-port-black.svg b/src/main/frontend/generated/jar-resources/images/svg-icons/usb-port-black.svg index 63c5694..7b1d007 100644 --- a/src/main/frontend/generated/jar-resources/images/svg-icons/usb-port-black.svg +++ b/src/main/frontend/generated/jar-resources/images/svg-icons/usb-port-black.svg @@ -1,7 +1,7 @@ + viewBox="0 0 512.001 512.001" xml:space="preserve"> publishMessageListItem; /* - * Show initial information + * Show initial wizard information */ - private final InitialInformationFlashEspViewDialog initialInformationFlashEspViewDialog; + private final WizardFlashEspView wizardFlashEspView; @PostConstruct public void init() { @@ -386,25 +387,18 @@ protected void onAttach(AttachEvent attachEvent) { super.onAttach(attachEvent); final UI ui = attachEvent.getUI(); this.outputConsole(ui); - //super.add(initialInformationFlashEspViewDialog); - //super.add(settingsDialogView); } + super.add(this.wizardFlashEspView); + getUI().ifPresent(ui -> { ui.getPage().fetchCurrentURL(url -> { if (Objects.nonNull(url)) { String ref = url.getRef(); if (Objects.isNull(ref)) { - //this.initialInformationFlashEspViewDialog.open(); - //this.settingsDialogViewCopy.open(); + this.wizardFlashEspView.open(); } - if (url.toString().contains("setting")) { - //Abrir los settings aqui - //final SettingsDialogView settingsDialogView = new SettingsDialogView(); - //super.add(settingsDialogView); - //settingsDialogView.open(); - } } }); }); diff --git a/src/main/java/com/esp/espflow/views/flashesp/InitialInformationFlashEspViewDialog.java b/src/main/java/com/esp/espflow/views/flashesp/InitialInformationFlashEspViewDialog.java index 76e52e6..69a0b68 100644 --- a/src/main/java/com/esp/espflow/views/flashesp/InitialInformationFlashEspViewDialog.java +++ b/src/main/java/com/esp/espflow/views/flashesp/InitialInformationFlashEspViewDialog.java @@ -26,10 +26,7 @@ /** * @author rub`n */ -@PageTitle("Step 5 - Wizard") @Log4j2 -@UIScope -@SpringComponent @RolesAllowed("ADMIN") public class InitialInformationFlashEspViewDialog extends Div { @@ -41,21 +38,14 @@ public class InitialInformationFlashEspViewDialog extends Div { private final H3 someFeatures = new H3("Some of the features:"); public InitialInformationFlashEspViewDialog() { - //super.setModal(true); 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() { diff --git a/src/main/java/com/esp/espflow/views/login/LoginView.java b/src/main/java/com/esp/espflow/views/login/LoginView.java index 06d3f3e..3863400 100644 --- a/src/main/java/com/esp/espflow/views/login/LoginView.java +++ b/src/main/java/com/esp/espflow/views/login/LoginView.java @@ -13,6 +13,8 @@ import com.vaadin.flow.router.PageTitle; import com.vaadin.flow.router.Route; +import static com.esp.espflow.util.EspFlowConstants.FRONTEND_ICON; + @PageTitle("Login") @Route(value = "login") @CssImport(value = "./login-view-background.css", themeFor = "vaadin-login-overlay-wrapper") @@ -23,7 +25,7 @@ public class LoginView extends LoginOverlay implements BeforeEnterObserver { public LoginView(AuthenticatedUser authenticatedUser) { this.authenticatedUser = authenticatedUser; setAction("login"); - var image = new Image("icons/icon.png", "icon"); + var image = new Image(FRONTEND_ICON, "icon"); image.setWidth("100px"); image.setHeight("100px"); setTitle(new Span(image)); diff --git a/src/main/java/com/esp/espflow/views/readflash/ReadFlashView.java b/src/main/java/com/esp/espflow/views/readflash/ReadFlashView.java index f09a399..e1756ff 100644 --- a/src/main/java/com/esp/espflow/views/readflash/ReadFlashView.java +++ b/src/main/java/com/esp/espflow/views/readflash/ReadFlashView.java @@ -140,6 +140,7 @@ public class ReadFlashView extends Div implements ResponsiveHeaderDiv, BeforeEnt * Show initial information */ private final InitialInformationReadFlashViewDialog initialInformationReadFlashViewDialog; + private final WizardFlashEspView wizardFlashEspView; @PostConstruct public void init() { @@ -695,77 +696,11 @@ protected void onAttach(AttachEvent attachEvent) { ui.access(() -> this.buttonRefreshDevices.setEnabled(value)); } catch (UIDetachedException ex) {} }); - super.add(this.initialInformationReadFlashViewDialog); - - -// RadioButtonGroup mode = new RadioButtonGroup<>("Header theme"); -// mode.setItems("Light", "Dark"); -// mode.addValueChangeListener(e -> getChildren().forEach(component -> { -// if (component instanceof Sidebar) { -// if (e.getValue().equals("Dark")) { -// ((Sidebar) component).addHeaderThemeName(Lumo.DARK); -// } else { -// ((Sidebar) component).removeHeaderThemeName(Lumo.DARK); -// } -// } -// })); - //addComponentAsFirst(mode); - -// Sidebar sidebar = new Sidebar( -// "New event", -// "Fill in the blibber-blabber below to create a sensational event that will leave everyone flibber-gasted!", -// createForm() -// ); - // add(sidebar); - -// Button button = new Button("Open sidebar", e -> { -// sidebar.open(); -// Animated.animate(sidebar, Animation.FADE_IN); -// }); - //addComponentAtIndex(1, button); -// sidebar.getCancelButton().addClickListener(event -> { -// sidebar.close(); -// Animated.animate(sidebar, Animation.FADE_OUT); -// }); + super.add(this.wizardFlashEspView); - } - - getUI().ifPresent(ui -> { - ui.getPage().fetchCurrentURL(url -> { - if (Objects.nonNull(url)) { - String ref = url.getRef(); - if (Objects.isNull(ref)) { - this.initialInformationReadFlashViewDialog.open(); - } - if (url.toString().contains("setting")) { - //this.initialInformationFlashEspViewDialog.open(); - //Abrir los settings aqui - //final SettingsDialogView settingsDialogView = new SettingsDialogView(); - //super.add(settingsDialogView); - //settingsDialogView.open(); - } - } - }); - }); - - } - - private Component[] createForm() { - TextField title = new TextField("Title"); - - TextArea description = new TextArea("Description"); - MultiSelectComboBox guests = new MultiSelectComboBox<>("Guests"); - guests.setItems( - "JOHN_SMITH", "EMILY_JOHNSON", "MICHAEL_DAVIS", "SOPHIA_BROWN", - "DANIEL_WILSON", "OLIVIA_MARTINEZ", "DAVID_THOMPSON" - ); - - RadioButtonGroup visibility = new RadioButtonGroup<>("Visibility"); - visibility.setItems("Private", "Public"); - visibility.setValue("Private"); + } - return new Component[]{title, description, guests, visibility}; } } diff --git a/src/main/java/com/esp/espflow/views/readflash/SettingsDialogViewCopy.java b/src/main/java/com/esp/espflow/views/readflash/WizardFlashEspView.java similarity index 72% rename from src/main/java/com/esp/espflow/views/readflash/SettingsDialogViewCopy.java rename to src/main/java/com/esp/espflow/views/readflash/WizardFlashEspView.java index d444ff8..c6fb14b 100644 --- a/src/main/java/com/esp/espflow/views/readflash/SettingsDialogViewCopy.java +++ b/src/main/java/com/esp/espflow/views/readflash/WizardFlashEspView.java @@ -4,7 +4,9 @@ import com.esp.espflow.util.EspFlowConstants; import com.esp.espflow.util.svgfactory.SvgFactory; import com.esp.espflow.views.Layout; -import com.esp.espflow.views.settings.SettingsDialogView; +import com.esp.espflow.views.Layout.JustifyContent; +import com.esp.espflow.views.flashesp.InitialInformationFlashEspViewDialog; +import com.esp.espflow.views.settings.DialogUtilsReplaceUri; import com.vaadin.componentfactory.ToggleButton; import com.vaadin.flow.component.AttachEvent; import com.vaadin.flow.component.Component; @@ -22,6 +24,7 @@ import com.vaadin.flow.component.html.H2; import com.vaadin.flow.component.html.H4; import com.vaadin.flow.component.html.Hr; +import com.vaadin.flow.component.html.Image; import com.vaadin.flow.component.html.Main; import com.vaadin.flow.component.html.Nav; import com.vaadin.flow.component.html.Paragraph; @@ -38,15 +41,12 @@ import com.vaadin.flow.component.textfield.TextField; import com.vaadin.flow.component.upload.Upload; import com.vaadin.flow.dom.Style.Overflow; -import com.vaadin.flow.router.BeforeEvent; -import com.vaadin.flow.router.HasUrlParameter; -import com.vaadin.flow.router.RouteConfiguration; -import com.vaadin.flow.router.RouterLayout; +import com.vaadin.flow.spring.annotation.SpringComponent; +import com.vaadin.flow.spring.annotation.UIScope; import com.vaadin.flow.theme.lumo.LumoUtility; import com.vaadin.flow.theme.lumo.LumoUtility.AlignItems; import com.vaadin.flow.theme.lumo.LumoUtility.BoxSizing; import com.vaadin.flow.theme.lumo.LumoUtility.Display; -import com.vaadin.flow.theme.lumo.LumoUtility.JustifyContent; import com.vaadin.flow.theme.lumo.LumoUtility.MaxWidth; import com.vaadin.flow.theme.lumo.LumoUtility.Padding; import com.vaadin.flow.theme.lumo.LumoUtility.Width; @@ -56,43 +56,51 @@ import org.vaadin.lineawesome.LineAwesomeIcon; import java.util.Objects; +import java.util.function.Predicate; import java.util.stream.Stream; +import static com.esp.espflow.util.EspFlowConstants.BOX_SHADOW_PROPERTY; +import static com.esp.espflow.util.EspFlowConstants.BOX_SHADOW_VALUE; +import static com.esp.espflow.util.EspFlowConstants.FRONTEND_ICON; + /** + * No modal * @author rub'n */ -//@UIScope -//@SpringComponent +@UIScope +@SpringComponent @Log4j2 -//@Route(value = "wizard-flash-view") -//@RoutePrefix(value = "wizard") @RolesAllowed("ADMIN") -public class SettingsDialogViewCopy extends Dialog implements RouterLayout, HasUrlParameter { +public class WizardFlashEspView extends Dialog { + private static final String SETTINGS = "settings"; private static final String PASSWORD = "password"; private static final String CONTACT_INFORMATION = "contact-information"; private static final String PUBLIC_INFORMATION = "public-information"; private static final String NOTIFICATION = "notifications"; + private static final String SIZE = "16px"; + + private final Button publicInformationButton = new Button("esptool.py home path"); + private final Button contactInformationButton = new Button("Manage settings..."); + private final Button updates = new Button("Check updates..."); + private final Button passwordButton = new Button("Password"); + private final Button notificationsButton = new Button("Notifications"); private final Layout mainLayout = new Layout(); - public SettingsDialogViewCopy() { + public WizardFlashEspView() { + + } + + private void initConfiguration(String ref) { super.setMaxWidth("680px"); super.setMaxHeight("500px"); super.setHeight("500px"); - //super.setHeaderTitle("Settings"); - super.setModal(true); - final Button closeButton = new Button(new Icon("lumo", "cross"), (event) -> { - super.close(); - getUI().ifPresent(ui -> { - ui.getPage().fetchCurrentURL(url -> { - ui.getPage().getHistory().replaceState(null, url.getPath()); - }); - }); - }); + + this.setBackGroundOnClick(publicInformationButton); /* - * Allows that when closing the dialog, we remove the portion of the uri after the and leaving the original path. + * Allows that when closing the dialog, we remove the portion aka fragment of the uri after the and leaving the original path. */ super.addOpenedChangeListener(event -> { if (!event.getSource().isOpened()) { @@ -104,17 +112,9 @@ public SettingsDialogViewCopy() { } }); - var row1 = this.rowStepAvatar("1", "1", new H4("First step")); - var row2 = this.rowStepAvatar("2", "2", new H4("Second step")); - var row3 = this.rowStepAvatar("3", "3", new H4("Thrid step")); - row3.remove(row3.getComponentAt(2)); - - Div divHeader = new Div(row1, row2, row3); - divHeader.addClassNames(Display.FLEX, LumoUtility.FlexDirection.ROW, - Width.FULL, JustifyContent.CENTER); - - super.getHeader().add(divHeader); super.setCloseOnOutsideClick(true); + this.configureHeader(); + this.configureFooter(); final Main main = new Main(); main.setId("main-settings"); @@ -123,12 +123,46 @@ public SettingsDialogViewCopy() { final Hr hr = new Hr(); hr.addClassName("hr-header-settings"); - main.add(this.createLinks(), this.createForm()); + main.add(this.createLinks(), this.createForm(ref)); super.add(hr, main); super.addClassName("settings-content-dialog"); } + private void configureHeader() { + var row1 = this.rowStepAvatar("1", "1", new H4("Welcome")); + var row2 = this.rowStepAvatar("2", "2", new H4("Port scanning")); + var row3 = this.rowStepAvatar("3", "3", new H4("Execute flash_id")); + row3.remove(row3.getComponentAt(2)); + + Div divHeader = new Div(row1, row2, row3); + divHeader.addClassNames(Display.FLEX, LumoUtility.FlexDirection.ROW, + Width.FULL, LumoUtility.JustifyContent.CENTER); + + super.getHeader().add(divHeader); + } + + private void configureFooter() { + final Button next = new Button("Next", (event) -> { + getUI().ifPresent(ui -> { + ui.getPage().fetchCurrentURL(url -> { + ui.getPage().getHistory().replaceState(null, url.getPath()); + }); + }); + }); + next.addThemeVariants(ButtonVariant.LUMO_PRIMARY); + + final Button previous = new Button("Previous", (event) -> { + getUI().ifPresent(ui -> { + ui.getPage().fetchCurrentURL(url -> { + ui.getPage().getHistory().replaceState(null, url.getPath()); + }); + }); + }); + + super.getFooter().add(previous, next); + } + private HorizontalLayout rowStepAvatar(final String numberStep, final String tooltip, final H4 header) { final Avatar avatar = new Avatar(numberStep); @@ -141,14 +175,48 @@ private HorizontalLayout rowStepAvatar(final String numberStep, hr.setWidth("50px"); final var row = new HorizontalLayout(avatar, header, hr); row.setSpacing(true); - row.addClassNames(AlignItems.CENTER, JustifyContent.START); + row.addClassNames(AlignItems.CENTER, LumoUtility.JustifyContent.START); row.setVerticalComponentAlignment(Alignment.CENTER, hr); return row; } - public Component createForm() { - //Not the first time - this.mainLayout.add(createPublicInformation()); + public Component createForm(String ref) { + + String newLocation = DialogUtilsReplaceUri.INSTANCE.parseUriToCreateTheContentForm(ref); + + switch (newLocation) { + case PUBLIC_INFORMATION -> { + this.mainLayout.add(createPublicInformation()); + super.open(); + } + case CONTACT_INFORMATION -> { + this.mainLayout.add(createContactInformation()); + this.setBackGroundOnClick(contactInformationButton); + super.open(); + } + case PASSWORD -> { + this.mainLayout.add(createPassword()); + this.setBackGroundOnClick(passwordButton); + super.open(); + } + case NOTIFICATION -> { + this.mainLayout.add(createNotifications()); + this.setBackGroundOnClick(notificationsButton); + super.open(); + } + case SETTINGS -> { + this.mainLayout.add(createPublicInformation()); + this.setBackGroundOnClick(publicInformationButton); + super.open(); + } + case StringUtils.EMPTY -> { + this.mainLayout.add(createPublicInformation()); + this.setBackGroundOnClick(publicInformationButton); + } + default -> { + //Do nothing + } + } this.mainLayout.addClassNames(BoxSizing.BORDER, MaxWidth.SCREEN_SMALL, Padding.LARGE); this.mainLayout.setFlexDirection(Layout.FlexDirection.COLUMN); return mainLayout; @@ -186,7 +254,9 @@ public Component createPublicInformation() { TextField firstName = new TextField("First name"); TextField lastName = new TextField("Last name"); - Layout layout = new Layout(title, description, avatarLayout, username, firstName, lastName); + InitialInformationFlashEspViewDialog welcome = new InitialInformationFlashEspViewDialog(); + + Layout layout = new Layout(welcome); // Viewport < 1024px layout.setFlexDirection(Layout.FlexDirection.COLUMN); // Viewport > 1024px @@ -288,32 +358,25 @@ public Component createNotifications() { } public Component createLinks() { - final Button publicInformationButton = new Button("esptool.py home path"); - final Button contactInformationButton = new Button("Manage settings..."); - final Button updates = new Button("Check updates..."); - final Button passwordButton = new Button("Password"); - final Button notificationsButton = new Button("Notifications"); - publicInformationButton.setPrefixComponent(VaadinIcon.INFO.create()); publicInformationButton.addClickListener(event -> { this.mainLayout.removeAll(); this.mainLayout.add(createPublicInformation()); - this.setBackGroundOnClick(publicInformationButton, contactInformationButton, - passwordButton, notificationsButton); + this.setBackGroundOnClick(publicInformationButton); getUI().ifPresent(ui -> { ui.getPage().fetchCurrentURL(url -> { - String baseUrl = RouteConfiguration.forSessionScope().getUrl(SettingsDialogView.class); - String urlWithParameters = url.getPath().concat(baseUrl); + String ref = StringUtils.defaultString(url.getRef()); + + final String pathWithUrlParameters = DialogUtilsReplaceUri.INSTANCE.replaceOrConcatFragment(url.getPath(), ref, PUBLIC_INFORMATION); - ui.getPage().getHistory().replaceState(null, urlWithParameters); + ui.getPage().getHistory().replaceState(null, pathWithUrlParameters); }); }); - }); contactInformationButton.setPrefixComponent(VaadinIcon.ARCHIVE.create()); @@ -321,16 +384,16 @@ public Component createLinks() { this.mainLayout.removeAll(); this.mainLayout.add(createContactInformation()); - this.setBackGroundOnClick(contactInformationButton, publicInformationButton, - passwordButton, notificationsButton); + this.setBackGroundOnClick(contactInformationButton); getUI().ifPresent(ui -> { ui.getPage().fetchCurrentURL(url -> { - String baseUrl = RouteConfiguration.forSessionScope().getUrl(SettingsDialogView.class); - String urlWithParameters = url.getPath().concat(baseUrl); + String ref = StringUtils.defaultString(url.getRef()); + + final String pathWithUrlParameters = DialogUtilsReplaceUri.INSTANCE.replaceOrConcatFragment(url.getPath(), ref, CONTACT_INFORMATION); - ui.getPage().getHistory().replaceState(null, urlWithParameters); + ui.getPage().getHistory().replaceState(null, pathWithUrlParameters); }); }); @@ -342,16 +405,16 @@ public Component createLinks() { this.mainLayout.removeAll(); this.mainLayout.add(createPassword()); - this.setBackGroundOnClick(passwordButton, contactInformationButton, publicInformationButton, - notificationsButton); + this.setBackGroundOnClick(passwordButton); getUI().ifPresent(ui -> { ui.getPage().fetchCurrentURL(url -> { - String baseUrl = RouteConfiguration.forSessionScope().getUrl(SettingsDialogView.class); - String urlWithParameters = url.getPath().concat(baseUrl); + String ref = StringUtils.defaultString(url.getRef()); - ui.getPage().getHistory().replaceState(null, urlWithParameters); + final String pathWithUrlParameters = DialogUtilsReplaceUri.INSTANCE.replaceOrConcatFragment(url.getPath(), ref, PASSWORD); + + ui.getPage().getHistory().replaceState(null, pathWithUrlParameters); }); }); @@ -359,21 +422,22 @@ public Component createLinks() { }); notificationsButton.setPrefixComponent(SvgFactory - .createIconFromSvg("bell.svg", "16px", null)); + .createIconFromSvg("bell.svg", SIZE, null)); notificationsButton.addClickListener(event -> { this.mainLayout.removeAll(); this.mainLayout.add(new Scroller(createNotifications())); - this.setBackGroundOnClick(notificationsButton, contactInformationButton, passwordButton, publicInformationButton); + this.setBackGroundOnClick(notificationsButton); getUI().ifPresent(ui -> { ui.getPage().fetchCurrentURL(url -> { - String baseUrl = RouteConfiguration.forSessionScope().getUrl(SettingsDialogView.class); - String urlWithParameters = url.getPath().concat(baseUrl); + String ref = StringUtils.defaultString(url.getRef()); + + final String pathWithUrlParameters = DialogUtilsReplaceUri.INSTANCE.replaceOrConcatFragment(url.getPath(), ref, NOTIFICATION); - ui.getPage().getHistory().replaceState(null, urlWithParameters); + ui.getPage().getHistory().replaceState(null, pathWithUrlParameters); }); }); @@ -387,7 +451,12 @@ public Component createLinks() { button.addThemeVariants(ButtonVariant.LUMO_TERTIARY); }); - final Div div = new Div(publicInformationButton, contactInformationButton, passwordButton, notificationsButton, updates); + final Image image = new Image(FRONTEND_ICON, "icon"); + image.getStyle().set(BOX_SHADOW_PROPERTY, BOX_SHADOW_VALUE); + image.setWidth("180px"); + image.setHeight("200px"); + + final Div div = new Div(image); div.addClassNames(Display.FLEX, LumoUtility.FlexDirection.COLUMN, LumoUtility.Margin.Vertical.XLARGE, Padding.Horizontal.LARGE); @@ -398,24 +467,23 @@ public Component createLinks() { } /** - * @param button that only the background will be set - * @param removeBackgroundColorForThisButtons to remove the background + * @param buttonToChange that only the background will be set */ - private void setBackGroundOnClick(Button button, Button... removeBackgroundColorForThisButtons) { - var backgroundColor = button.getStyle().get("background-color"); + private void setBackGroundOnClick(Button buttonToChange) { + final String backgroundColorStyle = "background-color"; + + String backgroundColor = buttonToChange.getStyle().get(backgroundColorStyle); + if (Objects.isNull(backgroundColor)) { - button.getStyle().setBackgroundColor("var(--lumo-primary-color-10pct)"); + buttonToChange.getStyle().setBackgroundColor("var(--lumo-primary-color-10pct)"); } - Stream.of(removeBackgroundColorForThisButtons) - .forEach(buttonItem -> { - buttonItem.getStyle().remove("background-color"); - }); + final Predicate