diff --git a/src/main/java/edu/group5/app/control/HeaderController.java b/src/main/java/edu/group5/app/control/HeaderController.java index a02e945..5e432ac 100644 --- a/src/main/java/edu/group5/app/control/HeaderController.java +++ b/src/main/java/edu/group5/app/control/HeaderController.java @@ -19,4 +19,9 @@ public void handleCausesBtn() { public void handleAboutBtn() { System.out.println("About button pressed"); } + + public void handleProfileBtn() { + System.out.println("profileSection"); + controller.showUserPage(); + } } diff --git a/src/main/java/edu/group5/app/control/MainController.java b/src/main/java/edu/group5/app/control/MainController.java index 9aa4bc5..06bc732 100644 --- a/src/main/java/edu/group5/app/control/MainController.java +++ b/src/main/java/edu/group5/app/control/MainController.java @@ -27,4 +27,8 @@ public void showBrowsePage() { } public void showAboutUsPage() {} + + public void showUserPage() { + view.showUserPage(); + } } diff --git a/src/main/java/edu/group5/app/view/Header.java b/src/main/java/edu/group5/app/view/Header.java index 1191d2f..1edc5e4 100644 --- a/src/main/java/edu/group5/app/view/Header.java +++ b/src/main/java/edu/group5/app/view/Header.java @@ -63,7 +63,7 @@ private StackPane getProfileSection() { StackPane profileSection = new StackPane(); profileSection.setId("profile-section"); profileSection.setAlignment(Pos.CENTER); - profileSection.setOnMouseClicked(e -> System.out.println("profileSection")); + profileSection.setOnMouseClicked(e -> controller.handleProfileBtn()); profileSection.setStyle("-fx-cursor: hand;"); ImageView avatar = new ImageView( diff --git a/src/main/java/edu/group5/app/view/MainView.java b/src/main/java/edu/group5/app/view/MainView.java index 3796f89..dc0dec1 100644 --- a/src/main/java/edu/group5/app/view/MainView.java +++ b/src/main/java/edu/group5/app/view/MainView.java @@ -3,11 +3,13 @@ import edu.group5.app.control.*; import edu.group5.app.control.donationpage.DonationPageController; import edu.group5.app.control.donationpage.PaymentCompleteController; +import edu.group5.app.model.user.Customer; import edu.group5.app.view.donationpage.DonationPageView; import edu.group5.app.view.donationpage.PaymentCompletePageView; import edu.group5.app.view.homepage.HomePageView; import edu.group5.app.view.loginpage.LoginPageView; import edu.group5.app.view.loginpage.SignInPageView; +import edu.group5.app.view.userpage.UserPageView; import javafx.scene.Scene; import javafx.scene.layout.BorderPane; @@ -52,4 +54,15 @@ public void showPaymentCompletePage() { } public void showAboutUsPage() {} + + public void showUserPage() { + Customer testCustomer = new Customer( + 1, + "Jinwoo", + "Son", + "aurafarmer@gmail.com", + "hashedpassword" + ); + root.setCenter(new UserPageView(headerController, testCustomer)); + } } diff --git a/src/main/java/edu/group5/app/view/userpage/UserPageView.java b/src/main/java/edu/group5/app/view/userpage/UserPageView.java new file mode 100644 index 0000000..547b812 --- /dev/null +++ b/src/main/java/edu/group5/app/view/userpage/UserPageView.java @@ -0,0 +1,75 @@ +package edu.group5.app.view.userpage; + +import edu.group5.app.control.HeaderController; +import edu.group5.app.model.user.Customer; +import edu.group5.app.view.Header; +import javafx.geometry.Insets; +import javafx.geometry.Pos; +import javafx.scene.control.Label; +import javafx.scene.image.Image; +import javafx.scene.image.ImageView; +import javafx.scene.layout.BorderPane; +import javafx.scene.layout.HBox; +import javafx.scene.layout.Pane; +import javafx.scene.layout.VBox; +import javafx.scene.text.Text; + + +public class UserPageView extends BorderPane { + private final Customer customer; + + public UserPageView(HeaderController headerController, Customer customer) { + this.customer = customer; + getStylesheets().add(getClass().getResource("/userpage/userpage.css").toExternalForm()); + + Header headerView = new Header(headerController); + setTop(headerView); + + VBox content = new VBox(30); + content.setPadding(new Insets(40)); + content.getChildren().addAll(createProfileSection(), createCausesSection(), createDonationsSection()); + setCenter(content); + } + private HBox createProfileSection() { + ImageView avatar = new ImageView(new Image(getClass().getResourceAsStream("/userpage/account_circle.png"))); + avatar.setFitWidth(150); + avatar.setFitHeight(150); + avatar.setPreserveRatio(true); + avatar.setId("avatar"); + + Text name = new Text(customer.getFirstName() + " " + customer.getLastName()); + name.setId("profile-name"); + + Label email = new Label(customer.getEmail()); + email.getStyleClass().add("profile-info"); + + Label location = new Label("Trondheim, Norway"); + location.getStyleClass().add("profile-info"); + + VBox info = new VBox(10, name, email, location); + info.setAlignment(Pos.CENTER_LEFT); + + HBox profile = new HBox(40, avatar, info); + profile.setAlignment(Pos.CENTER_LEFT); + return profile; + } + private VBox createCausesSection() { + Text title = new Text("YOUR SUPPORTED CAUSES"); + title.getStyleClass().add("section-title"); + + Pane causesPlaceholder = new Pane(); + causesPlaceholder.getStyleClass().add("section-box"); + + return new VBox(10, title, causesPlaceholder); + } + private VBox createDonationsSection() { + Text title = new Text("PREVIOUS DONATIONS"); + title.getStyleClass().add("section-title"); + + Pane donationsPlaceholder = new Pane(); + donationsPlaceholder.getStyleClass().add("section-box"); + + return new VBox(10, title, donationsPlaceholder); + } + +} diff --git a/src/main/resources/userpage/account_circle.png b/src/main/resources/userpage/account_circle.png new file mode 100644 index 0000000..f53f825 Binary files /dev/null and b/src/main/resources/userpage/account_circle.png differ diff --git a/src/main/resources/userpage/userpage.css b/src/main/resources/userpage/userpage.css new file mode 100644 index 0000000..6253079 --- /dev/null +++ b/src/main/resources/userpage/userpage.css @@ -0,0 +1,19 @@ +#profile-name { + -fx-font-size: 28px; + -fx-font-weight: bold; +} +.profile-info { + -fx-font-size: 16px; + -fx-text-fill: #444; +} +.section-title { + -fx-font-size: 14px; + -fx-font-weight: bold; + -fx-fill: #888; +} +.section-box { + -fx-background-color: #ddd; + -fx-pref-height: 120px; + -fx-pref-width: 700px; + -fx-background-radius: 6; +} \ No newline at end of file