Skip to content

Commit

Permalink
🚧 #80
Browse files Browse the repository at this point in the history
  • Loading branch information
@rucko24
rucko24 committed Nov 18, 2024
1 parent 6c892f4 commit 0237209
Show file tree
Hide file tree
Showing 3 changed files with 54 additions and 17 deletions.
68 changes: 51 additions & 17 deletions src/main/java/com/esp/espflow/views/flashesp/WizardFlashEspDialog.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
import com.esp.espflow.entity.dto.WizardFlashEspDto;
import com.esp.espflow.service.respository.impl.WizardFlashEspService;
import com.esp.espflow.util.EspFlowConstants;
import com.esp.espflow.util.svgfactory.SvgFactory;
import com.esp.espflow.views.Layout;
import com.infraleap.animatecss.Animated;
import com.infraleap.animatecss.Animated.Animation;
Expand All @@ -23,6 +24,7 @@
import com.vaadin.flow.component.html.Main;
import com.vaadin.flow.component.html.Nav;
import com.vaadin.flow.component.html.Paragraph;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.orderedlayout.FlexComponent.Alignment;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.Scroller;
Expand All @@ -33,6 +35,7 @@
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.BorderRadius;
import com.vaadin.flow.theme.lumo.LumoUtility.BoxSizing;
import com.vaadin.flow.theme.lumo.LumoUtility.Display;
import com.vaadin.flow.theme.lumo.LumoUtility.Margin.Bottom;
Expand Down Expand Up @@ -254,13 +257,14 @@ public Component createNavWithEspLogoWelcome() {

final Image image = new Image(FRONTEND_ICON, "icon");
image.getStyle().set(BOX_SHADOW_PROPERTY, BOX_SHADOW_VALUE);
image.getStyle().setCursor(EspFlowConstants.CURSOR_POINTER);
image.addClassName(BorderRadius.LARGE);
image.setWidth("180px");
image.setHeight("200px");
var tooltip = Tooltip.forComponent(image);
tooltip.setPosition(Tooltip.TooltipPosition.TOP);
tooltip.setText(ESPFLOW_SOURCE_CODE);
image.addClickListener(e -> getUI().ifPresent(ui -> ui.getPage().open(ESPFLOW_SOURCE_CODE)));
image.getStyle().setCursor(EspFlowConstants.CURSOR_POINTER);
Animated.animate(image, Animation.FADE_IN, Modifier.SLOW);

final Div div = new Div(image);
Expand Down Expand Up @@ -304,9 +308,12 @@ public Component createWelcomeContent() {
* @return A {@link Component}
*/
public Component createFlashIdContent() {
final H2 portScanningTitle = new H2("Port scanning");
portScanningTitle.addClassNames(LumoUtility.FontSize.XLARGE, LumoUtility.Margin.Top.MEDIUM);
portScanningTitle.setId(portScanningTitle.getText().replace(" ", "-").toLowerCase());
final H2 titlePortScanning = new H2("Port scanning");
titlePortScanning.addClassNames(LumoUtility.FontSize.XLARGE, LumoUtility.Margin.Top.MEDIUM);
titlePortScanning.setId(titlePortScanning.getText().replace(" ", "-").toLowerCase());

final Button scanButton = new Button(VaadinIcon.REFRESH.create());
var rowScanningPort = new HorizontalLayout(scanButton, titlePortScanning);

final Paragraph descriptionComboSelectionPort = new Paragraph();
descriptionComboSelectionPort.getElement().setProperty(INNER_HTML,"To run the port scan, first we use the refresh button, it will search the system ports, and when selecting a port the <strong>flash_id</strong> command is executed.");
Expand All @@ -316,9 +323,12 @@ public Component createFlashIdContent() {
comboImage.setWidth("80%");
comboImage.getStyle().set(BOX_SHADOW_PROPERTY, BOX_SHADOW_VALUE);

final H2 playButtonTitle = new H2("Using the play button");
playButtonTitle.addClassNames(LumoUtility.FontSize.XLARGE, LumoUtility.Margin.Top.MEDIUM);
playButtonTitle.setId(playButtonTitle.getText().replace(" ", "-").toLowerCase());
final H2 titlePlayButton = new H2("Using the play button");
titlePlayButton.addClassNames(LumoUtility.FontSize.XLARGE, LumoUtility.Margin.Top.MEDIUM);
titlePlayButton.setId(titlePlayButton.getText().replace(" ", "-").toLowerCase());

final Button playButton = new Button(VaadinIcon.PLAY.create());
var rowPlayButtonTitle = new HorizontalLayout(playButton, titlePlayButton);

final Paragraph descriptionButtonPlay = new Paragraph();
descriptionButtonPlay.getElement().setProperty(INNER_HTML, "The play button will be used to scan the previous port, without the need to use the drop-down, executing the <strong>flash_id</strong> command as well.");
Expand All @@ -328,25 +338,48 @@ public Component createFlashIdContent() {
playButtonImage.setWidth("80%");
playButtonImage.getStyle().set(BOX_SHADOW_PROPERTY, BOX_SHADOW_VALUE);

Stream.of(playButtonImage, comboImage)
.forEach(image -> image.getStyle().setAlignSelf(AlignSelf.CENTER));
final Hr separator = this.createSeparator();

final Hr separator = new Hr();
separator.setWidthFull();
separator.addClassNames(Top.XLARGE, Bottom.MEDIUM);
final H2 titlePermissionDenied = new H2("Permission denied: '/dev/ttyUSB2'");
titlePermissionDenied.addClassNames(LumoUtility.FontSize.XLARGE, LumoUtility.Margin.Top.MEDIUM);
titlePermissionDenied.setId(titlePermissionDenied.getText().replace(" ", "-").toLowerCase());
final Button writePasswordButton = new Button(SvgFactory.createIconFromSvg("unlock-black.svg","30px",null));
var rowPermisson = new HorizontalLayout(writePasswordButton, titlePermissionDenied);

final Hr separatorChangePermissions = this.createSeparator();

final Paragraph descriptionPermissionDeniedPort = new Paragraph();
descriptionPermissionDeniedPort.getElement().setProperty(INNER_HTML, "If when executing the <strong>flash_id</strong> we have permissions problems, we can execute the lock button to enter the user credentials, <strong>no password will be saved or sent anywhere<strong>.");
descriptionPermissionDeniedPort.addClassNames(LumoUtility.FontSize.SMALL, LumoUtility.TextColor.SECONDARY);

final Layout layout = new Layout(portScanningTitle, descriptionComboSelectionPort, comboImage, separator, playButtonTitle, descriptionButtonPlay, playButtonImage);

final Image changePermissionsImage = new Image(FRONTEND_IMAGES_CUSTOM + "change-permissions.png", "change-permissions");
changePermissionsImage.setWidth("80%");
changePermissionsImage.getStyle().set(BOX_SHADOW_PROPERTY, BOX_SHADOW_VALUE);

Animated.animate(comboImage, Animation.FADE_IN, Modifier.SLOW);
Stream.of(comboImage, playButtonImage, changePermissionsImage)
.forEach(image -> image.getStyle().setAlignSelf(AlignSelf.CENTER));

final Layout layout = new Layout(rowScanningPort, descriptionComboSelectionPort, comboImage, separator, rowPlayButtonTitle, descriptionButtonPlay, playButtonImage, separatorChangePermissions, rowPermisson, descriptionPermissionDeniedPort, changePermissionsImage);
layout.setFlexDirection(Layout.FlexDirection.COLUMN);
layout.setColumnGap(Layout.Gap.MEDIUM);
layout.setColumnSpan(Layout.ColumnSpan.COLUMN_SPAN_FULL, portScanningTitle, playButtonTitle, separator,
descriptionComboSelectionPort, comboImage, descriptionButtonPlay, playButtonImage);
layout.setColumnSpan(Layout.ColumnSpan.COLUMN_SPAN_FULL, rowScanningPort, rowPlayButtonTitle, separator,
descriptionComboSelectionPort, comboImage, descriptionButtonPlay, playButtonImage, separatorChangePermissions, changePermissionsImage, rowPermisson, descriptionPermissionDeniedPort);

final Scroller scroller = new Scroller(layout);
scroller.setScrollDirection(ScrollDirection.VERTICAL);

return scroller;
}

private Hr createSeparator() {
final Hr separator = new Hr();
separator.setWidthFull();
separator.addClassNames(Top.XLARGE, Bottom.MEDIUM);
return separator;
}

/**
* The content for write_flash step
*
Expand All @@ -358,12 +391,13 @@ public Component writeFlashContent() {
selectingTheFirmwareTitle.setId(selectingTheFirmwareTitle.getText().replace(" ", "-").toLowerCase());

final Paragraph description = new Paragraph();
description.getElement().setProperty(INNER_HTML, "Here we must select the firmware, as in the following animation, the port must be <strong>selected</strong> with permissions, and the <strong>firmware</strong>");
description.getElement().setProperty(INNER_HTML, "Here we must select the firmware, as in the following animation, the port must be <strong>selected</strong> with permissions, and the <strong>firmware.</strong>");
description.addClassNames(LumoUtility.FontSize.SMALL, LumoUtility.TextColor.SECONDARY);

final Image writeFlashImage = new Image(FRONTEND_IMAGES_CUSTOM + "write_flash.gif", "combo");
writeFlashImage.setWidthFull();
writeFlashImage.setWidth("90%");
writeFlashImage.getStyle().set(BOX_SHADOW_PROPERTY, BOX_SHADOW_VALUE);
Animated.animate(writeFlashImage, Animation.FADE_IN, Modifier.SLOW);

Stream.of(writeFlashImage)
.forEach(image -> image.getStyle().setAlignSelf(AlignSelf.CENTER));
Expand Down
3 changes: 3 additions & 0 deletions src/main/java/com/esp/espflow/views/login/LoginView.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@
import com.vaadin.flow.router.PageTitle;
import com.vaadin.flow.router.Route;

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;

@PageTitle("Login")
Expand All @@ -28,6 +30,7 @@ public LoginView(AuthenticatedUser authenticatedUser) {
var image = new Image(FRONTEND_ICON, "icon");
image.setWidth("100px");
image.setHeight("100px");
image.getStyle().set(BOX_SHADOW_PROPERTY, BOX_SHADOW_VALUE);
setTitle(new Span(image));

LoginI18n i18n = LoginI18n.createDefault();
Expand Down
Binary file added ...sources/META-INF/resources/frontend/images/custom-images/change-permissions.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 0237209

Please sign in to comment.