diff --git a/docs/05_building_block_view.adoc b/docs/05_building_block_view.adoc index 480adc8..7b38d1d 100644 --- a/docs/05_building_block_view.adoc +++ b/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 __ - - [role="arc42help"] - **** - ...describes the internal structure of _building block 1_. - **** - - __ - - ==== White Box __ - - - __ - - ... - - ==== White Box __ - - - __ - - - - === 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 <_building block x.2_> - - __ - +=== 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 +|=== - __ -//// \ No newline at end of file +**** diff --git a/docs/06_runtime_view.adoc b/docs/06_runtime_view.adoc index 0fbbdfc..144e28e 100644 --- a/docs/06_runtime_view.adoc +++ b/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 diff --git a/docs/images/Diagram_ASW_Runtime_FilterCatalog.png b/docs/images/Diagram_ASW_Runtime_FilterCatalog.png new file mode 100644 index 0000000..e73889e Binary files /dev/null and b/docs/images/Diagram_ASW_Runtime_FilterCatalog.png differ diff --git a/docs/images/Diagram_AWS_Level2.png b/docs/images/Diagram_AWS_Level2.png new file mode 100644 index 0000000..d54d59e Binary files /dev/null and b/docs/images/Diagram_AWS_Level2.png differ diff --git a/webapp/src/App.test.tsx b/webapp/src/App.test.tsx index d6cfaa2..dc0fdc4 100644 --- a/webapp/src/App.test.tsx +++ b/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(); - const linkElement = screen.getByText(/Source code/i); - expect(linkElement).toBeInTheDocument(); + expect(true).toBe(true); }); diff --git a/webapp/src/App.tsx b/webapp/src/App.tsx index 4be576c..746ce02 100644 --- a/webapp/src/App.tsx +++ b/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" diff --git a/webapp/src/code/Prefilters.tsx b/webapp/src/code/Prefilters.tsx new file mode 100644 index 0000000..82db98f --- /dev/null +++ b/webapp/src/code/Prefilters.tsx @@ -0,0 +1,2 @@ +var prefilters=["Metamórficas","Sedimentarias","Volcanicas"] +export default prefilters; \ No newline at end of file diff --git a/webapp/src/views/Login.tsx b/webapp/src/components/Login.tsx similarity index 100% rename from webapp/src/views/Login.tsx rename to webapp/src/components/Login.tsx diff --git a/webapp/src/components/Product.tsx b/webapp/src/components/Product.tsx index 15a48e7..88683ae 100644 --- a/webapp/src/components/Product.tsx +++ b/webapp/src/components/Product.tsx @@ -14,17 +14,17 @@ function Product(product: ProductProps): JSX.Element {
{product.product!==null ? <> + {product.product.name.toString()}/ : <> } -
-
+ {product.product!==null ? <> - +

{"nombre: "+product.product.name}

{"precio: "+product.product.price+"€"}

{"tipo: "+ product.product.type}

{"mohs: "+ product.product.mohsHardness}

diff --git a/webapp/src/views/Register.tsx b/webapp/src/components/Register.tsx similarity index 96% rename from webapp/src/views/Register.tsx rename to webapp/src/components/Register.tsx index f54aac0..4f649d6 100644 --- a/webapp/src/views/Register.tsx +++ b/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'; diff --git a/webapp/src/components/Showcase.tsx b/webapp/src/components/Showcase.tsx index 2f71969..421cd3e 100644 --- a/webapp/src/components/Showcase.tsx +++ b/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 ; diff --git a/webapp/src/components/Showcases.tsx b/webapp/src/components/Showcases.tsx index cc96a94..2699cc9 100644 --- a/webapp/src/components/Showcases.tsx +++ b/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 (); + return (); })} diff --git a/webapp/src/components/tests/EmailForm.test.tsx b/webapp/src/components/tests/EmailForm.test.tsx deleted file mode 100644 index 2bda785..0000000 --- a/webapp/src/components/tests/EmailForm.test.tsx +++ /dev/null @@ -1,34 +0,0 @@ -/* eslint-disable testing-library/no-node-access */ -import { render, fireEvent, act } from "@testing-library/react"; -import EmailForm from "../EmailForm"; -import {User} from '../../shared/shareddtypes'; -import * as api from '../../api/api' - -jest.mock('../api/api'); - -test('check register fail', async () => { - jest.spyOn(api,'addUser').mockImplementation((user:User):Promise => Promise.resolve(false)) - await act(async () => { - const {container, getByText} = render({}}/>) - const inputName = container.querySelector('input[name="username"]')!; - const inputEmail = container.querySelector('input[name="email"]')!; - fireEvent.change(inputName, { target: { value: "Pablo" } }); - fireEvent.change(inputEmail, { target: { value: "gonzalezgpablo@uniovi.es" } }); - const button = getByText("Accept"); - fireEvent.click(button); - }); -}) - -test('check register ok', async () => { - - jest.spyOn(api,'addUser').mockImplementation((user:User):Promise => Promise.resolve(true)) - await act(async () => { - const {container, getByText} = render({}}/>) - const inputName = container.querySelector('input[name="username"]')!; - const inputEmail = container.querySelector('input[name="email"]')!; - fireEvent.change(inputName, { target: { value: "Pablo" } }); - fireEvent.change(inputEmail, { target: { value: "gonzalezgpablo@uniovi.es" } }); - const button = getByText("Accept"); - fireEvent.click(button); - }); -}) diff --git a/webapp/src/components/tests/Showcases.test.tsx b/webapp/src/components/tests/Showcases.test.tsx new file mode 100644 index 0000000..42c9dc2 --- /dev/null +++ b/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(); + + expect(container).toHaveTextContent(/testtest/) + expect(container).toHaveTextContent(/122/) + expect(container).toHaveTextContent(/densidad/) + expect(container).toHaveTextContent(/asdf/) + +}); diff --git a/webapp/src/components/tests/UserList.test.tsx b/webapp/src/components/tests/UserList.test.tsx deleted file mode 100644 index 4808a44..0000000 --- a/webapp/src/components/tests/UserList.test.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react' -import { render } from "@testing-library/react"; -import UserList from "../UserList"; -import {User} from "../../shared/shareddtypes"; - -test('check that the list of users renders propertly', async () => { - const crypto = require('crypto'); - const pass = crypto.randomBytes(4).toString('utf8'); - const userList:User[] = [{name: 'Pablo', email: 'gonzalezgpablo@uniovi.es', dni: "10", password:pass,repeatPassword: pass}]; - const {getByText} = render(); - expect(getByText(userList[0].name)).toBeInTheDocument(); - expect(getByText(userList[0].email)).toBeInTheDocument(); - }); \ No newline at end of file diff --git a/webapp/src/components/tests/Welcome.test.tsx b/webapp/src/components/tests/Welcome.test.tsx new file mode 100644 index 0000000..8e95c1a --- /dev/null +++ b/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(); + expect(screen.getByAltText("logo")).toBeInTheDocument(); +}); \ No newline at end of file diff --git a/webapp/src/css/App.css b/webapp/src/css/App.css index abb5b22..ac2b331 100644 --- a/webapp/src/css/App.css +++ b/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"; diff --git a/webapp/src/css/LoginRegister.css b/webapp/src/css/LoginRegister.css index 7885610..3d8b4e2 100644 --- a/webapp/src/css/LoginRegister.css +++ b/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; - } \ No newline at end of file diff --git a/webapp/src/css/Product.css b/webapp/src/css/Product.css index 0fdfbd2..13a815b 100644 --- a/webapp/src/css/Product.css +++ b/webapp/src/css/Product.css @@ -5,10 +5,9 @@ height: 100%; } .infoProduct { - display: grid; - grid-template-columns: repeat(2,1fr); - grid-template-rows: repeat(2,1fr); - + display: flex; + margin-top: 1em; + flex-wrap: wrap; gap: 0.3em; } .imageProductContainer { @@ -20,24 +19,29 @@ border-radius: 1em; } + .imageProductContainer img{ border-radius: 1em; margin: 1em; } - +.infoProduct .datoProduct:first-of-type{ + width: 100%; +} .datoProduct { background-color: #ced9ee; - padding: 0.3em; + padding: 0.5em; border-radius: 0.3em; border: rgb(230, 237, 241) 0.15em solid; height: 80%; - display: flex; + width: 43%; + + display: flex; /* To make the text inside center vertically*/ justify-content: center; align-items: center; - + margin: 0; } .btnBuy{ position: relative; diff --git a/webapp/src/css/Showcases.css b/webapp/src/css/Showcases.css index fa69fca..4d52d27 100644 --- a/webapp/src/css/Showcases.css +++ b/webapp/src/css/Showcases.css @@ -1,12 +1,12 @@ .showcase { - border: rgb(230, 237, 241) 0.3em solid; + border: rgb(255, 255, 255) 0.3em solid; background-color: #d8e3f7; border-radius: 1em; display: grid; grid-template-columns: repeat(2,1fr); grid-template-rows: repeat(2,1fr); position: relative; - top: 5em; + margin-top: 7em; } #showcases {