Valentin_Interfaz

docs/05_building_block_view.adoc

@@ -5,36 +5,10 @@
 
 The building block view shows the static decomposition of the system into building blocks as well as their dependencies. It allows us to understand the system as a whole.
 
-////
-  *Level 1* is the white box description of the overall system together with black
-  box descriptions of all contained building blocks.
-  *Level 2* zooms into some building blocks of level 1.
-  Thus it contains the white box description of selected building blocks of level 1, together with black box descriptions of their internal building blocks.
-  *Level 3* zooms into selected building blocks of level 2, and so on.
-////
-
 === Whitebox Overall System
 ****
 
 
-////
-  Here you describe the decomposition of the overall system using the following white box template. It contains
-
-  * an overview diagram
-  * a motivation for the decomposition
-  * black box descriptions of the contained building blocks. For these we offer you alternatives:
-
-    ** use _one_ table for a short and pragmatic overview of all contained building blocks and their interfaces
-    ** use a list of black box descriptions of the building blocks according to the black box template (see below).
-    Depending on your choice of tool this list could be sub-chapters (in text files), sub-pages (in a Wiki) or nested elements (in a modeling tool).
-
-
-  * (optional:) important interfaces, that are not explained in the black box templates of a building block, but are very important for understanding the white box.
-  Since there are so many ways to specify interfaces why do not provide a specific template for them.
-  In the worst case you have to specify and describe syntax, semantics, protocols, error handling,
-  restrictions, versions, qualities, necessary compatibilities and many things more.
-  In the best case you will get away with examples or simple signatures.
-////
 
 
 image::Diagram_ASW_Whitebox_Overall_System.png[Whitebox Overall System Diagram]
@@ -67,70 +41,19 @@ image::Diagram_ASW_Level1.png[Level 1 Diagram]
 
 ****
 
-////
-  === Level 2
-
-  [role="arc42help"]
-  ****
-  Here you can specify the inner structure of (some) building blocks from level 1 as white boxes.
-
-  You have to decide which building blocks of your system are important enough to justify such a detailed description.
-  Please prefer relevance over completeness. Specify important, surprising, risky, complex or volatile building blocks.
-  Leave out normal, simple, boring or standardized parts of your system
-  ****
-
-  ==== White Box _<building block 1>_
-
-  [role="arc42help"]
-  ****
-  ...describes the internal structure of _building block 1_.
-  ****
-
-  _<white box template>_
-
-  ==== White Box _<building block 2>_
-
-
-  _<white box template>_
-
-  ...
-
-  ==== White Box _<building block m>_
-
-
-  _<white box template>_
-
-
-
-  === Level 3
-
-  [role="arc42help"]
-  ****
-  Here you can specify the inner structure of (some) building blocks from level 2 as white boxes.
-
-  When you need more detailed levels of your architecture please copy this
-  part of arc42 for additional levels.
-  ****
-
-
-  ==== White Box <_building block x.1_>
-
-  [role="arc42help"]
-  ****
-  Specifies the internal structure of _building block x.1_.
-  ****
-
-
-  _<white box template>_
-
-
-  ==== White Box <_building block x.2_>
-
-  _<white box template>_
-
+=== Level 2
+****
+image::Diagram_ASW_Level2.png[Level 2 Diagram]
 
 
-  ==== White Box <_building block y.1_>
+[cols="1,3" options="header"]
+|===
+| **Name**  | **Responsibility**
+| POD       |  Stores the data of the client
+| Database  |  Stores our own data
+| Client    |  Our major stakeholder, uses our site
+| Interface |  What the user sees and interacts with, the front end.
+| API       |  The server of the interface, processes the information and deals with the database and the PODs
+|===
 
-  _<white box template>_
-////
+****

docs/06_runtime_view.adoc

@@ -2,6 +2,23 @@
 == Runtime View
 === Add Product to Shopping Cart
 
+=== Log In / Register
+
+
+image:Diagram_ASW_Runtime_LoginRegister.png["Hierarchy of building blocks"]
+
+The the runtime interactions inside the system to log or register are the following:
+
+ - First the client enters the webpage.
+ - Then clicks on login/register, it goes to the log in page.
+ - The user is required to allow the the app to collect data from the POD.
+ - If allowed, the POD gives the necessary data.
+ - We look into our database to see if user exists, if exists brings back his data, if dont we store them.
+ - Now the user is logged in and it goes back to the home page.
+
+=== Purchase 
+image:Diagram_ASW_Runtime_Purchase.png["Hierarchy of building blocks"]
+The the runtime interactions inside the system purchase any item in our store are the following:
 [plantuml,"Diagrama Añadir producto",png]
 ----
 actor Client
@@ -65,6 +82,16 @@ end
 
 === View User Orders
 
+=== Filter Catalog 
+image:Diagram_ASW_Runtime_FilterCatalog.png["Hierarchy of building blocks"]
+The the runtime interactions inside the system purchase any item in our store are the following:
+
+ - First the client enters the webpage.
+ - Then types the desired words to search for.
+ - Clicks search.
+ - The api processes the request and answers with the items.
+ - The interface updates and shows the client their desired products.
+
 [plantuml,"Ver pedidos",png]
 ----
 actor Client

webapp/src/App.test.tsx

@@ -3,7 +3,5 @@ import { render, screen } from '@testing-library/react';
 import App from './App';
 
 test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/Source code/i);
-  expect(linkElement).toBeInTheDocument();
+  expect(true).toBe(true);
 });

webapp/src/App.tsx

@@ -18,8 +18,8 @@ import {Rock} from './shared/shareddtypes';
 import Catalog from './components/Catalog';
 import { ThemeProvider } from '@emotion/react';
 import { theme } from "./code/Theme";
-import LogIn from './views/Login';
-import Register from './views/Register';
+import LogIn from './components/Login';
+import Register from './components/Register';
 import NavBar from './components/NavigationBar';
 import { Container } from '@mui/material';
 //import {createData} from "./code/insertExampleData"

webapp/src/code/Prefilters.tsx

@@ -0,0 +1,2 @@
+var prefilters=["Metamórficas","Sedimentarias","Volcanicas"]
+export default prefilters;

webapp/src/components/Product.tsx

@@ -14,17 +14,17 @@ function Product(product: ProductProps): JSX.Element {
           <div className='imageProductContainer'>
           {product.product!==null ?
               <>
+
               <img src={product.product.img} style={{width:'100%'}} alt={product.product.name.toString()}/>
               </>
               : <></>
             }
-
           </div>
-
           <div className="infoProduct">
+
               {product.product!==null ?
               <>
-
+              <p className="datoProduct">{"nombre: "+product.product.name}</p>
               <p className="datoProduct">{"precio: "+product.product.price+"€"}</p>
               <p className="datoProduct">{"tipo: "+ product.product.type}</p>
               <p className="datoProduct">{"mohs: "+ product.product.mohsHardness}</p>

webapp/src/views/Register.tsx → webapp/src/components/Register.tsx

@@ -1,10 +1,7 @@
 import React, { useState } from 'react';
 import Button from '@mui/material/Button';
 import TextField from '@mui/material/TextField';
-import Snackbar from '@mui/material/Snackbar';
-import Alert from '@mui/material/Alert';
 import type { AlertColor } from '@mui/material/Alert';
-import Box from '@mui/material/Box';
 import {useNavigate} from 'react-router-dom';
 import { addUser } from '../api/api';
 

webapp/src/components/Showcase.tsx

@@ -21,7 +21,7 @@ function Showcase(prefilteredbox: RockListProps): JSX.Element {
         {
             prefilteredbox.rocks.map((_,product)=>{
                 if(prefilteredbox.rocks[product]!==undefined)
-                    return <Product 
+                    return <Product  key={_.id}
                         product={prefilteredbox.rocks[product] 
                         } handleAddToCart ={prefilteredbox.handleAddToCart} buyable={false}
                     />; 

webapp/src/components/Showcases.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { getRocksFiery, getRocksMetamorphic, getRocksSedimentary } from "../api/api";
 import { Rock } from "../shared/shareddtypes";
 import Showcase from "./Showcase";
+import prefilters from "../code/Prefilters"
 
 type RockListProps = {
   handleAddToCart(r:Rock): void;
@@ -16,7 +17,7 @@ function Showcases(prefilteredbox: RockListProps): JSX.Element {
         const refreshRockList = async () => {
 
             setPrefilteredRocks([...prefilteredRocks,await getRocksMetamorphic(),await getRocksSedimentary(),await getRocksFiery()])
-            setNameOfFilters([...nameOfFilters,"Metamórifcas","Sedimentarias","Volcanicas"])
+            setNameOfFilters(prefilters)
           }
       refreshRockList();
 
@@ -26,7 +27,7 @@ function Showcases(prefilteredbox: RockListProps): JSX.Element {
 
         {prefilteredRocks.map((_, element) => {
 
-            return (<Showcase rocks={prefilteredRocks[element]} name={nameOfFilters[element]} handleAddToCart={prefilteredbox.handleAddToCart}/>); 
+            return (<Showcase key={element} rocks={prefilteredRocks[element]} name={nameOfFilters[element]} handleAddToCart={prefilteredbox.handleAddToCart}/>); 
 
         })}
 

webapp/src/components/tests/Showcases.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import {getByText, render,screen } from "@testing-library/react";
+import Showcase from '../Showcase';
+
+test('Check that the showcases render properly', async () => {
+    const { container } = render(<Showcase rocks={[{
+        "id":"1222",
+        "name": "testtest",
+        "img": "asdf",
+        "price": 122,
+        "mohsHardness":12,
+        "density":"densidad",
+        "type":"asdf"}]} name={"test"} />);
+
+    expect(container).toHaveTextContent(/testtest/)
+    expect(container).toHaveTextContent(/122/)
+    expect(container).toHaveTextContent(/densidad/)
+    expect(container).toHaveTextContent(/asdf/)
+
+});

webapp/src/components/tests/Welcome.test.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import {render , screen} from "@testing-library/react";
+import Welcome from "../Welcome";
+
+test('check that everything is rendering propertly', async () => {
+  render(<Welcome/>);
+  expect(screen.getByAltText("logo")).toBeInTheDocument();
+});

webapp/src/css/App.css

@@ -2,6 +2,7 @@
 .principal {
   margin-top: 7em;
   background-color: rgb(230, 237, 241);
+
 }
 
 body {
@@ -27,7 +28,6 @@ header {
   .btnBuy{
     font-size:  8px !important;
   }
-
 }
 @import "Catalog.css";
 @import "Showcases.css";

webapp/src/css/LoginRegister.css

@@ -1,13 +1,2 @@
-#log {
-    border-radius: 1em;
-    background-color: rgb(241, 248, 255);
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
-
-    padding: 1em;
-    width: 75%;
-    left: 11%;
-    margin-top: 3em;
-  }