framework_driver task implementation (not finished yet)

uebung_entities
michael 2025-02-02 00:51:31 +01:00
parent b40acb630d
commit 5c84416fe0
4 changed files with 44 additions and 12 deletions

View File

@ -32,9 +32,9 @@
</head>
<body>
<header>
<a id="view-products" href="#">Products</a>
<a id="view-cart" href="#">Cart</a>
<a id="view-user" href="#">User</a>
<a id="products-tab" href="#">Products</a>
<a id="cart-tab" href="#">Cart</a>
<a id="user-tab" href="#">User</a>
</header>
<main id="main"></main>
<script src="./src/view.js"></script>

View File

@ -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) => {

View File

@ -6,12 +6,12 @@ const View = {
main.innerHTML = `
<h1>Products</h1>
<ul>
${products.map(product => View.renderSingleProduct(product)).join('')}
${products.map(product => View.renderProductInList(product)).join('')}
</ul>
`;
},
renderSingleProduct(product) {
renderProductInList(product) {
return `
<li>
<a href="#" data-id="${product.id}" class="product-link">
@ -48,4 +48,18 @@ const View = {
<button id="back-button">Back to Products</button>
`;
},
renderUserRegister() {
const main = document.getElementById('main');
main.innerHTML = `
<div class="form-container" id="user-form-container">
<h2>Create User</h2>
<form id="user-form">
<input type="text" id="user-name" name="name" placeholder="Enter your name" required>
<input type="text" id="user-email" name="email" placeholder="Enter your email" required>
<input type="password" id="user-password" name="password" placeholder="Enter your password" required>
<button type="submit">Create Account</button>
</form>
`;
},
};

View File

@ -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.
entities." -- Robert C. Martin, Clean Architecture
# Aufgabe