diff --git a/src/framework_driver/ui/index.html b/src/framework_driver/ui/index.html index 815b4df..f467aa7 100644 --- a/src/framework_driver/ui/index.html +++ b/src/framework_driver/ui/index.html @@ -32,9 +32,9 @@
- Products - Cart - User + Products + Cart + User
diff --git a/src/framework_driver/ui/src/controller.js b/src/framework_driver/ui/src/controller.js index 298a58e..fa38609 100644 --- a/src/framework_driver/ui/src/controller.js +++ b/src/framework_driver/ui/src/controller.js @@ -1,5 +1,11 @@ // Controller: Handles user interactions const Controller = { + + async createUser(name, email, password){ + //TODO: use model to send request to backend + alert('User Creation functionality not implemented.'); + }, + async showProducts() { const products = await Model.fetchProducts(); View.renderProducts(products); @@ -19,24 +25,34 @@ const Controller = { const product = await Model.fetchProduct(productId); View.renderProduct(product); document.getElementById('back-button').addEventListener('click', () => { - Controller.showProducts(); + Controller.showProducts(); + }); + }, + + showUserRegister(){ + View.renderUserRegister(); + document.getElementById('user-form').addEventListener('submit', () => { + const name = document.getElementById('user-name').value; + const email = document.getElementById('user-email').value; + const password = document.getElementById('user-password').value; + Controller.createUser(name, email, password); }); }, addEventListeners() { - document.getElementById('view-products').addEventListener('click', (event) => { + document.getElementById('products-tab').addEventListener('click', (event) => { event.preventDefault(); Controller.showProducts(); }); - document.getElementById('view-cart').addEventListener('click', (event) => { + document.getElementById('cart-tab').addEventListener('click', (event) => { event.preventDefault(); Controller.showCart(); }); - document.getElementById('view-user').addEventListener('click', (event) => { + document.getElementById('user-tab').addEventListener('click', (event) => { event.preventDefault(); - alert('User profile functionality not implemented.'); + Controller.showUserRegister(); }); document.querySelectorAll('.product-link').forEach((link) => { diff --git a/src/framework_driver/ui/src/view.js b/src/framework_driver/ui/src/view.js index b4e5ead..b94da9b 100644 --- a/src/framework_driver/ui/src/view.js +++ b/src/framework_driver/ui/src/view.js @@ -6,12 +6,12 @@ const View = { main.innerHTML = `

Products

`; }, - renderSingleProduct(product) { + renderProductInList(product) { return `
  • @@ -48,4 +48,18 @@ const View = { `; }, + + renderUserRegister() { + const main = document.getElementById('main'); + main.innerHTML = ` +
    +

    Create User

    +
    + + + + +
    + `; + }, }; \ No newline at end of file diff --git a/src/interface_adapters/README.md b/src/interface_adapters/README.md index f73bae9..2108b1b 100644 --- a/src/interface_adapters/README.md +++ b/src/interface_adapters/README.md @@ -1,5 +1,5 @@ # INTERFACE ADAPTERS -The software in the interface adapters layer is a set of adapters that convert data from +"The software in the interface adapters layer is a set of adapters that convert data from the format most convenient for the use cases and entities, to the format most convenient for some external agency such as the database or the web. It is this layer, for example, that will wholly contain the MVC architecture of a GUI. The @@ -14,4 +14,6 @@ restricted to this layer—and in particular to the parts of this layer that hav the database. Also in this layer is any other adapter necessary to convert data from some external form, such as an external service, to the internal form used by the use cases and -entities. \ No newline at end of file +entities." -- Robert C. Martin, Clean Architecture + +# Aufgabe \ No newline at end of file