framework_driver task implementation (not finished yet)
parent
b40acb630d
commit
5c84416fe0
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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) => {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
`;
|
||||
},
|
||||
};
|
||||
|
|
@ -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
|
||||
Loading…
Reference in New Issue