Valentin_Interfaz

restapi/.env

@@ -0,0 +1,3 @@
+DB_CONN_STRING="mongodb+srv://dede_es1a:[email protected]/myFirstDatabase?retryWrites=true&w=majority"
+DB_NAME="dede-es1a"
+DB_COLLECTION_NAME="myFirstDatabase"

restapi/api.ts

@@ -6,15 +6,40 @@ import {findUsers, addUser, deleteUser, loginUser, logout} from './controllers/U
 const User = require("./models/User");
 const Rock = require("./models/Rock");
 
+
 const api:Router = express.Router()
 const mongoose = require("mongoose");
 
-//Methods for control users from the app
-api.get("/users/list", findUsers);
-
-api.post("/users/add", addUser);
-
-api.post("/users/delete", deleteUser);
+interface User {
+    name: string;
+    email: string;
+}
+
+//This is not a restapi as it mantains state but it is here for
+//simplicity. A database should be used instead.
+let users: Array<User> = [];
+
+api.get(
+    "/users/list",
+    async (req: Request, res: Response): Promise<Response> => {
+        return res.status(200).send(users);
+    }
+);
+
+
+api.post(
+  "/users/add",[
+    check('name').isLength({ min: 1 }).trim().escape(),
+    check('email').isEmail().normalizeEmail(),
+  ],
+  async (req: Request, res: Response): Promise<Response> => {
+    let name = req.body.name;
+    let email = req.body.email;
+    let user: User = {name:name,email:email}
+    users.push(user);
+    return res.sendStatus(200);
+  }
+);
 
 api.post("/users/login", loginUser);
 

webapp/src/App.tsx

@@ -2,7 +2,6 @@ import { useState, useEffect } from 'react';
 import Welcome from './components/Welcome';
 import  {getRocas} from './api/api';
 import './css/App.css';
-
 import { Route, Routes, Navigate, BrowserRouter as Router } from "react-router-dom";
 import {Rock} from './shared/shareddtypes';
 import Catalog from './components/Catalog';
@@ -11,6 +10,8 @@ import { theme } from "./code/Theme";
 import LogIn from './views/Login';
 import Register from './views/Register';
 import NavBar from './components/NavigationBar';
+import { Container } from '@mui/material';
+//import {createData} from "./code/insertExampleData"
 
 
 //import {createData} from "./code/insertExampleData"
@@ -27,19 +28,22 @@ function App(): JSX.Element {
   },[]);
   return (
     <ThemeProvider theme={theme}>
-
+      <Container maxWidth="xl" className="principal">
       <NavBar/>
       <Router>
+
         <Routes>
           <Route path="/home" element={<Welcome/>} />
           <Route path="/" element={<Navigate replace to="/home" />} />
           <Route path="/catalog" element={<Catalog rocks={rocks}/>}/>
           <Route path = '/login' element = {<LogIn/>}/>
           <Route path = '/register' element = {<Register/>}/>
         </Routes>
+
       </Router>
-
+      </Container>
     </ThemeProvider>
+
   );
 }
 

webapp/src/components/Product.tsx

@@ -24,18 +24,16 @@ function Product(product: ProductProps): JSX.Element {
               {product.product!==null ?
               <>
 
-              <ListItemText primary={"precio: "+product.product.price+"€"} className="datoProduct"/>
-              <ListItemText primary={"tipo: "+ product.product.type} className="datoProduct"/>
-              <ListItemText primary={"mohs: "+ product.product.mohsHardness} className="datoProduct"/>
-              <ListItemText primary={"densidad: "+product.product.density} className="datoProduct"/>
+              <p className="datoProduct">{"precio: "+product.product.price+"€"}</p>
+              <p className="datoProduct">{"tipo: "+ product.product.type}</p>
+              <p className="datoProduct">{"mohs: "+ product.product.mohsHardness}</p>
+              <p className="datoProduct">{"densidad: "+product.product.density}</p>
               </>
               : <></>
             }
 
           </div>
-          <Grid item xs={12} hidden={!product.buyable}>
-            <Button variant="contained" color="primary" style={{width:'100%'}}>Comprar</Button>
-          </Grid>
+          <Button variant="contained" className='btnBuy' color="primary" style={{width:'100%'}}>Comprar</Button>
       </div>
   );
 }

webapp/src/components/Showcase.tsx

@@ -1,4 +1,4 @@
-import { ListItemText } from '@mui/material';
+import { AppBar, ListItemText } from '@mui/material';
 import { useState } from 'react';
 import {Rock} from '../shared/shareddtypes';
 import Product from './Product';
@@ -16,7 +16,9 @@ function Showcase(prefilteredbox: RockListProps): JSX.Element {
   return (
     <>
     <div>
-        <ListItemText className="titleOfShowcase" primary={prefilteredbox.name}/>
+        <AppBar position='relative' className="titleOfShowcase">
+          <p> {prefilteredbox.name}</p>
+        </AppBar>
         <div className="showcase">
         {
             prefilteredbox.rocks.map((_,product)=>{
@@ -26,6 +28,7 @@ function Showcase(prefilteredbox: RockListProps): JSX.Element {
             })
         }
         </div>
+
     </div>
     </>
   );

webapp/src/components/Welcome.tsx

@@ -9,15 +9,13 @@ function Welcome(): JSX.Element {
 
   return (
     <>
+      <div id="App-logo-container">
+        <img src={logo} className="App-logo" alt="logo" />
+      </div>
 
-      <Container maxWidth="sm" className="principal">
-        <Grid item xs={12} >
-          <Box className="logoClass"><img src={logo} className="App-logo" alt="logo" /></Box>
-        </Grid>
-        <div id="showcases">
+      <div id="showcases">
         <Showcases />
-        </div>
-      </Container>
+      </div>
     </>
   );
 }

webapp/src/components/solid-pods/GetPodAddress.tsx

@@ -1,9 +1,9 @@
-import React, {useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 
 import Grid from "@mui/material/Grid"
 import Box from "@mui/material/Box"
 
-import {VCARD } from "@inrupt/vocab-common-rdf";
+import { FOAF, VCARD } from "@inrupt/vocab-common-rdf";
 import {getSolidDataset, getStringNoLocale, getThing, Thing, getUrl} from "@inrupt/solid-client";
 
 type PODProps = {

webapp/src/components/solid-pods/LoginPod.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { SessionProvider, useSession } from "@inrupt/solid-ui-react";
 import LoginForm from "./LoginForm"
 import ProfileViewer from "./ProfileViewer"

webapp/src/components/solid-pods/ProfileViewer.tsx

@@ -1,6 +1,6 @@
-import { useSession, CombinedDataProvider, LogoutButton, Text } from "@inrupt/solid-ui-react";
-import { Button, Card, CardContent, Container, Typography } from "@material-ui/core";
-import { FOAF } from "@inrupt/lit-generated-vocab-common";
+import { useSession, CombinedDataProvider, Image, LogoutButton, Text } from "@inrupt/solid-ui-react";
+import { Button, Card, CardActionArea, CardContent, Container, Typography } from "@material-ui/core";
+import { FOAF, VCARD } from "@inrupt/lit-generated-vocab-common";
 import GetPodAddress from './GetPodAddress';
 
 const ProfileViewer = () => {

webapp/src/css/App.css

@@ -1,55 +1,7 @@
-.App {
-  text-align: center;
-  background-color: #acb7be;
-}
-
-body {
-  text-align: center;
-}
 
-header {
-  text-align: left;
-}
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
 .principal {
-  padding-top: 5px;
-}
-.titulo {
-  font-size: 38px;
-  padding-top: 25px;
-}
-.logoClass {
-  padding-top: 0.5em;
-}
-.appBar {
-  background-color: brown;
-}
-.App-header {
-  background-color: #acb7be;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: rgb(192, 157, 40);
-}
-
-.App-link {
-  color: #e0c66f;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+  margin-top: 7em;
+  background-color: rgb(230, 237, 241);
 }
 
 body {
@@ -60,10 +12,25 @@ header {
   background-color: #f3af2f;
 }
 
-#logoRock {
-  width: 20%;
+@media only screen and (max-width: 1000px) {
+  body {
+    font-size: 12px;
+  }
+  .btnBuy{
+    font-size:  12px !important;
+  }
+}
+@media only screen and (max-width: 800px) {
+  body {
+    font-size: 8px;
+  }
+  .btnBuy{
+    font-size:  8px !important;
+  }
+
 }
-
 @import "Catalog.css";
 @import "Showcases.css";
 @import "Product.css";
+@import "LoginRegister.css";
+@import "SpinningLogo.css";

webapp/src/css/Catalog.css

@@ -1,19 +1,8 @@
-
 #catalog {
-  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;
+  display: grid;
+  grid-template-columns: repeat(4,1fr);
+  padding-bottom: 5em;
+
 }
 
-
-
-
-#catalog .product{
-    margin-bottom: 6em; /* Superior margin for products inside de catalog */
-}

webapp/src/css/Product.css

@@ -2,30 +2,44 @@
   padding: 1em;
   margin-bottom: 3em;
   text-align: center;
-  text-rendering: optimizeSpeed;
+  height: 100%;
 }
 .infoProduct {
-  width: 100%;
-  height: 75%;
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: repeat(2,1fr);
+  grid-template-rows: repeat(2,1fr);
+
+  gap: 0.3em;
 }
 .imageProductContainer {
-  height: 7em;
+  height: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
 
-  border: #f3af2f 0.2em dashed;
-  border-radius: 0.3em;
+  border-radius: 1em;
+
+}
+.imageProductContainer  img{
+  border-radius: 1em;
+  margin: 1em;
+
+
 }
+
+
 .datoProduct {
   background-color: #ced9ee;
   padding: 0.3em;
   border-radius: 0.3em;
   border: rgb(230, 237, 241) 0.15em solid;
-
+  height: 80%;
   display: flex;
   justify-content: center;
   align-items: center;
+
 }
+.btnBuy{
+  position: relative;
+  top:2em !important;
+}