Create page 'Astros' that list all astros.

server/services/astro/image.get.js

@@ -1,8 +1,8 @@
 const dbAstro = _db.get('astro', _req.getString('uid'))
-_log.info( dbAstro );
 
 if (dbAstro) {
   const dbAstroImageName = dbAstro.getString('image')
+  _log.info( dbAstroImageName );
   const storageAstroImageFile = _storage.database(
     'astro',
     'image',

server/services/astro/list.get.js

@@ -1,25 +1,63 @@
 // DEBUG... COMENTAR DEPOIS
-_log.info('service called...');
+//_log.info('service called...');
+
+const astroType = _req.getString(`astroType`)
+//_log.info(astroType)
+
+const page = _req.getInt('page', 1)
+let offset = (page - 1) * 8
+if (offset < 0) {
+    offset = 0
+}
+
+
+let filterWhere = ""
+const filterParams = _val.list()
+if (astroType != "" && astroType != "all") {
+    filterWhere = " AND astro_type.uid = CAST(? AS UUID) ";
+    filterParams.add(astroType);
+    //_log.info("Params", filterParams)
+}
 
 const dbAstros = _db.query(`
-  SELECT * 
+  SELECT 
+    astro.uid,
+    --astro.id,
+    astro.name
+    --,astro_type.name AS "astro_type",
+    --astro_type.id AS "astro_type_code",
+    --astro.equatorial_radius,
+    --astro.rotation_velocity,
+    --astro.around_astro_id,
+    --astro.periapsis,
+    --astro.apoapsis,
+    --astro.image 
   FROM astro
-  WHERE active = true
-`);
+    INNER JOIN astro_type
+      ON astro.type_id = astro_type.id
+  WHERE 
+    astro.active = TRUE
+    AND astro_type.active = TRUE
+    ${filterWhere}
+  LIMIT 8
+  OFFSET ${offset}
+`, filterParams);
+
+
 
-const astros = _val.list();
-for (const astro of dbAstros) {
+const astros = _val.list()
+for (const dbAstro of dbAstros) {
   astros.add(
       _val.map()
-            .set('id', astro.getString('uid'))
-            .set('name', astro.getString('name'))    
+            .set('id', dbAstro.getString('uid'))
+            .set('name', dbAstro.getString('name'))
   )
 }
 
 // DEBUG...COMENTAR DEPOIS!
-_log.info( 'DB return...', astros );
+//_log.info( 'Server return...', astros );
 
 _out.json(astros)
 
 // DEBUG...COMENTAR DEPOIS!
-_log.info('service ended!');
+//_log.info('service ended!');

server/services/astro/type.get.js

@@ -1,8 +1,8 @@
 // DEBUG... COMENTAR DEPOIS
-_log.info('service called...');
+//_log.info('service called...');
 
 const dbAstroTypes = _db.query(`
-  SELECT uid, name 
+  SELECT id, uid, name 
   FROM astro_type
   WHERE active = TRUE
 `);
@@ -23,4 +23,4 @@ for (const type of dbAstroTypes) {
 _out.json(astroTypes);
 
 // DEBUG...COMENTAR DEPOIS!
-_log.info('service ended!');
+//_log.info('service ended!');

website/src/App.jsx

@@ -73,7 +73,7 @@ function App() {
               <Routes>
                 <Route path="/" exact element={<Navigate to={`/${Cluar.currentLanguage().locale}/`} />} />
                 {routes}
-                <Route path={`/${Cluar.currentLanguage().locale}/astros/:uid`} 
+                <Route path={`/${Cluar.currentLanguage().locale}/astro/:uid`} 
                   element={<AstroDetails />} 
                 />
                 <Route path="*" element={<NotFound />} />

website/src/base/Header/index.less

@@ -71,14 +71,16 @@
         display: flex;
         width: 150px !important;
 
-        .ant-menu-submenu-title:hover {
-            color: @header-menu-color-hover !important;
+        .ant-menu-submenu-title{
+            
+            &:hover {
+                color:@header-menu-color-hover !important;
+            }
         }
-
         li {
             margin-bottom: 20px !important;
             display: inline;
-
+            font-size: 1.5em;
             &:hover {
                 border-color: @header-menu-color-hover !important;
             }
@@ -88,7 +90,7 @@
     .menu {
         width: 100%;
         line-height: @header-line-height !important;
-
+        
         @media only screen and (max-width: @header-mobile-width) {
             display: none;
         }
@@ -100,7 +102,7 @@
             border-bottom: none;
             border-right: none;
             justify-content: flex-end;
-
+            
             li {
                 border: 0 !important;
                 background-color: transparent !important;
@@ -123,14 +125,14 @@
 
                 a {
                     color: @header-menu-color;
-                    font-size: 1em;
+                    font-size: 1.5em;
                 }
             }
         }
 
         &-languages {
             margin-left: 0 !important;
-
+            
             @media screen and (max-width: @header-mobile-width) {
                 margin-right: 32px;
                 margin-left: auto !important;
@@ -162,15 +164,16 @@
             display: none;
         }
     }
-
-    .menu-level-1 {
+    //.menu-level-1 {
         /* SAMPLE OF MENU CUSTOM LEVEL */
-    }
+    //}
+    
 }
 
 .ant-menu-sub,
 .ant-menu-submenu-popup {
     border-radius: 2px !important;
+    
 }
 
 .header-burger-open {

website/src/components/Content/index.less

@@ -6,6 +6,8 @@
     margin: 50px auto;
     padding: 0 60px;
     display: flex;
+    color: @primary-color;
+
     @media only screen and (max-width: 800px) {
         padding: 0 20px;
         margin: 20px auto;
@@ -38,6 +40,8 @@
             font-size: 2em;
             font-weight: normal;
             letter-spacing: .01em;
+            color: @primary-color;
+            text-align: center;
         }
         
         > div {
@@ -47,7 +51,7 @@
             }
         }
     }
-
+    /*
     &__text {
 
     }
@@ -64,7 +68,7 @@
     &__image-bottom {
 
     }
-
+    */
     &__text-service {
         > h1 {
             font-size: 2em;
@@ -112,4 +116,4 @@
             }
         }
     }
-}
+}

website/src/components/functionality/AstroList/Filter/index.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Button, Space } from "antd";
+import { Button,  Row, Col } from "antd";
 import "./index.less";
 import _service from "@netuno/service-client";
 
@@ -17,34 +17,43 @@ function Filter({onAstroTypeChange}) {
       },
     });
   }, []);
-  
+  /*
+  import { Segmented } from 'antd';
+   <Segmented block options={[123, 456, 'longtext-longtext-longtext-longtext']} />
+);
+  */
   return (
-    <div className="astro-list__filter">
-      <Space wrap>
-        <Button 
+    <Row className="astro-list__filter" 
+      gutter={[16, {xs: 8, sm: 16, md: 24, lg: 32}]}
+    >
+      <Col>
+        <Button
           type={selected == "all" ? "primary" : "default"}
           onClick={() => {
             setSelected("all");
             if (onAstroTypeChange) {
-                onAstroTypeChange("all");
+              onAstroTypeChange("");
             }
           }}
         >Todos</Button>
-        {list.map((item) => {
-          return (
+      </Col>
+      {list.map((item) => {
+        return (
+          <Col>
             <Button
-              type={selected == item.id ? "primary" : "default"}
+              type={selected == item.code ? "primary" : "default"}
               onClick={() => {
                 setSelected(item.code);
                 if (onAstroTypeChange) {
-                  onAstroTypeChange(item.code);
+                  onAstroTypeChange(item.uid);
                 }
               }}
             >{item.name}</Button>
+          </Col>
           );
-        })}
-      </Space>
-    </div>
+        }
+      )}
+    </Row>
   );
 }
 

website/src/components/functionality/AstroList/Filter/index.less

@@ -1,147 +1,17 @@
 @import "../../../../styles/variables.less";
 
-.establishment-list__results {
-  display: flex;
+.astro-list__filter {
+  margin-top: 30px;
+  margin-bottom: 30px;
   justify-content: center;
-  margin-right: auto;
-  margin-left: auto;
-  // margin-top: 1rem;
-  //width: @site-width;
-  max-width: calc(@site-max-width + 16px);
-  text-align: center;
-  padding: 0 5px 0 5px;
-  
-  .ant-card {
-    clip-path: polygon(0 3.5%, 100% 0, 100% 100%, 0% 100%);
-    padding-top: 0;
-    border: 2px solid @primary-color;
-    border-radius: 0;
-    background-color: @primary-color;
-    margin-left: auto;
-    margin-right: auto;
-    margin-bottom: 1rem;
-    color: white;
 
-    @media only screen and (min-width: @header-mobile-width) {
-      margin-left: 0;
-      margin-right: 0;
-    }
-
-    .ant-card-meta-title {
-      font-size: 1.5rem;
-      color: white;
-      font-family: Poppins;
-      margin:0;
-    }
-    .ant-card-meta-description {
-      color: white;
-    }
-    .shadow {
-      position: relative;
-      top: -25px;
-    
-
-      background-image: linear-gradient(
-        to bottom,
-        rgba(255, 0, 0, 0),
-        @primary-color
-      );
-      width: 100%;
-      z-index: 200;
-      color: transparent;
-    }
-    .ant-card-body {
-      width: 100%;
-
-      padding: 0;
-      p {
-        position: relative;
-        display: flex;
-        top: -10px;
-        text-align: center;
-        justify-content: center;
-      }
-    }
-    img {
-      clip-path: polygon(0 7%, 100% 1%, 100% 100%, 0% 100%);
-      border: 2px solid @primary-color;
-      border-radius: 0;
-      height: 200px;
-    }
-    P {
-      margin: 0;
-    }
-    .end {
-      display: flex;
-      justify-content: center;
-      .anticon {
-        color: white;
-        font-size: 1.2rem;
-        margin-top: 4%;
-      }
-      h5 {
-        position: relative;
-        top: 10px;
-
-        color: white;
-        margin: 0;
-      }
-    }
-    .whats {
-      display: flex;
-      justify-content: center;
-      .anticon {
-        position: relative;
-        color: rgb(52, 175, 35);
-        font-size: 2rem;
-        top: -5px;
-        /*.span {
-        }*/
-      }
-      a {
-      
-        font-family: Poppins;
-        color: white;
-        margin-left: 5px;
-        margin-right: 10px;
-        margin-top: 0;
-        text-decoration: none;
-      }
-    }
-    .insta {
-      display: flex;
-      justify-content: center;
-      .anticon {
-        color: white;
-        font-size: 2rem;
-        background: #f09433;
-        background: -moz-linear-gradient(
-          45deg,
-          #f09433 0%,
-          #e6683c 25%,
-          #dc2743 50%,
-          #cc2366 75%,
-          #bc1888 100%
-        );
-        background: -webkit-linear-gradient(
-          45deg,
-          #f09433 0%,
-          #e6683c 25%,
-          #dc2743 50%,
-          #cc2366 75%,
-          #bc1888 100%
-        );
+  .ant-btn-default {
+    color: @secondary-color;
+    background: @primary-color;
+  }
 
-        // filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
-        border-radius: 10px;
-        height: 2rem;
-      }
-      h4 {
-        font-family: Poppins;
-        color: white;
-        margin-top: 3%;
-        margin-left: 5px;
-      }
-    }
+  .ant-btn-primary {
+    color: @primary-color;
+    background: @secondary-color;
   }
 }

website/src/components/functionality/AstroList/Result/index.jsx

@@ -55,7 +55,7 @@ function Result({astroType}) {
   return (
     <>
     <Row className="astro-list__result"
-      gutter={[10,10]}
+      gutter={[20,20]}
     >
       {list.map((item) => {
         return (
@@ -63,24 +63,27 @@ function Result({astroType}) {
             xs={24}
             sm={12}
             md={8}
-            lg={8}
-            xl={8}
+            lg={6}
+            xl={6}
           >
-            <Card 
-              hoverable
-              style={{
-              }}
-              cover={
-                <img
-                  src={`${servicePrefix}/astro/image?uid=${item.uid}`}
-                  alt="Imagem do Astro"
+            <Link to={`/pt/astro/${item.id}`}>
+              <Card 
+                hoverable
+                style={{}}
+                cover={
+                    <img
+                      src={`${servicePrefix}/astro/image?uid=${item.id}`}
+                      alt="Imagem do Astro"
+                    />
+                }
+              >
+                <div className="shadow"><br/></div>
+                <Meta 
+                  title={item.name} 
+                  description={<p>(Mais Detalhes)</p>}
                 />
-              }
-            >
-              <div className="shadow">Shadow</div>
-              <p><Meta title={item.name}/></p>
-              <Link to={`/pt/astro/${item.uid}`}>Mais Detalhes</Link>
-            </Card>
+              </Card>
+            </Link>
           </Col>
         );
       })}

website/src/components/functionality/AstroList/Result/index.less

@@ -11,6 +11,10 @@
   text-align: center;
   padding: 0 5px 0 5px;
   
+  > a a:hover{
+    text-decoration: none;
+  }
+
   .ant-card {
     padding-top: 0;
     border: 2px solid @primary-color;
@@ -19,27 +23,50 @@
     margin-left: auto;
     margin-right: auto;
     margin-bottom: 1rem;
-    color: white;
+    color: @secondary-color;
 
     @media only screen and (min-width: @header-mobile-width) {
       margin-left: 0;
       margin-right: 0;
     }
 
-    .ant-card-meta-title {
-      font-size: 1.5rem;
-      color: white;
-      font-family: Poppins;
-      margin:0;
+    .ant-card-body {
+      width: 100%;
+      padding: 0;
+      /*
+      p {
+        position: relative;
+        display: flex;
+        top: -10px;
+        text-align: center;
+        justify-content: center;
+      }*/
     }
-    .ant-card-meta-description {
-      color: white;
+
+    .ant-card-meta {
+      
+      
+      &-title{
+        font-size: 1.8rem;
+        color: @secondary-color;  
+        margin:-10px;
+      }
+      
+      &-description {
+        margin-top: -10px;
+        margin-bottom: 10px;
+        //> a {
+          font-size: 1.2rem;
+          color: @secondary-color
+        //}
+      }  
     }
+    
     .shadow {
       position: relative;
       top: -25px;
-    
-
+      bottom: 10px;
+      //color: @primary-color;
       background-image: linear-gradient(
         to bottom,
         rgba(255, 0, 0, 0),
@@ -49,98 +76,17 @@
       z-index: 200;
       color: transparent;
     }
-    .ant-card-body {
-      width: 100%;
-
-      padding: 0;
-      p {
-        position: relative;
-        display: flex;
-        top: -10px;
-        text-align: center;
-        justify-content: center;
-      }
-    }
+    
     img {
-      clip-path: polygon(0 7%, 100% 1%, 100% 100%, 0% 100%);
+      //clip-path: polygon(0 7%, 100% 1%, 100% 100%, 0% 100%);
       border: 2px solid @primary-color;
       border-radius: 0;
-      height: 200px;
-    }
-    P {
-      margin: 0;
-    }
-    .end {
-      display: flex;
-      justify-content: center;
-      .anticon {
-        color: white;
-        font-size: 1.2rem;
-        margin-top: 4%;
-      }
-      h5 {
-        position: relative;
-        top: 10px;
-
-        color: white;
-        margin: 0;
-      }
-    }
-    .whats {
-      display: flex;
-      justify-content: center;
-      .anticon {
-        position: relative;
-        color: rgb(52, 175, 35);
-        font-size: 2rem;
-        top: -5px;
-        /*.span {
-        }*/
-      }
-      a {
-      
-        font-family: Poppins;
-        color: white;
-        margin-left: 5px;
-        margin-right: 10px;
-        margin-top: 0;
-        text-decoration: none;
-      }
-    }
-    .insta {
-      display: flex;
-      justify-content: center;
-      .anticon {
-        color: white;
-        font-size: 2rem;
-        background: #f09433;
-        background: -moz-linear-gradient(
-          45deg,
-          #f09433 0%,
-          #e6683c 25%,
-          #dc2743 50%,
-          #cc2366 75%,
-          #bc1888 100%
-        );
-        background: -webkit-linear-gradient(
-          45deg,
-          #f09433 0%,
-          #e6683c 25%,
-          #dc2743 50%,
-          #cc2366 75%,
-          #bc1888 100%
-        );
-
-        // filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
-        border-radius: 10px;
-        height: 2rem;
-      }
-      h4 {
-        font-family: Poppins;
-        color: white;
-        margin-top: 3%;
-        margin-left: 5px;
-      }
+      height: 250px;
     }
   }
+}
+
+.ant-btn-default {
+  color: @secondary-color;
+  background: @primary-color;
 }

website/src/components/functionality/AstroList/index.jsx

@@ -9,14 +9,14 @@ import "./index.less";
 function AstroList() {
   const [astroType, setAstroType] = useState("all");
   return (
-    <section>
+    <section className="content astro-list">
       <Row>
-        <Col span className="astro-list">
-          <h1>Astros</h1>
-          <Filter onAstroTypeChange={(astroType) => setAstroType(astroType)} />
-          <Result astroType={astroType} />
+        <Col span={24}>
+          <p>Escolha o tipo de <b>astro</b> que procura e clique na imagem para ver mais detalhes. </p>
         </Col>
-      </Row>
+      </Row>      
+      <Filter onAstroTypeChange={(astroType) => setAstroType(astroType)} />
+      <Result astroType={astroType} />
     </section>
   );
 }

website/src/components/functionality/AstroList/index.less

@@ -5,4 +5,6 @@
   flex-direction: column;
   align-items: center; 
   justify-content: center;
+  text-align: center;
+  color: @primary-color;
 }

website/src/pages/AstroDetails/index.jsx

@@ -1,19 +1,19 @@
 import React from 'react';
 
-import { useParams } from 'react-router-dom';
-//import Cluar from '../../common/Cluar';
+//import { useParams } from 'react-router-dom';
+import Cluar from '../../common/Cluar';
 
 import './index.less';
 
 function AstroDetails() {
   return (
-    <main className="astro-details">
+    <div className="content astro-details">
       <h1>Sorry...</h1>
       <h2>
         {Cluar.currentLanguage().locale === 'pt' && <>Página em construção.</>}
         {Cluar.currentLanguage().locale === 'en' && <>Page under construction.</>}
       </h2>
-    </main>
+    </div>
   );
 };
 

website/src/pages/NotFound/index.jsx

@@ -1,18 +1,18 @@
 import React from 'react';
-
 import Cluar from '../../common/Cluar';
-
 import './index.less';
 
 function NotFound() {
   return (
-    <main className="page--notfound">
-      <h1>404</h1>
-      <h2>
-        {Cluar.currentLanguage().locale === 'pt' && <>Página não encontrada.</>}
-        {Cluar.currentLanguage().locale === 'en' && <>Page not found.</>}
-      </h2>
-    </main>
+    <section className="content">
+      <div className='page--notfound'>      
+        <h1>
+          {Cluar.currentLanguage().locale === 'pt' && <>Página não encontrada.</>}
+          {Cluar.currentLanguage().locale === 'en' && <>Page not found.</>}
+        </h1>
+        <img src="/images/404-error-no-text.jpg"/>
+      </div>
+    </section>
   );
 };
 

website/src/pages/NotFound/index.less

@@ -1,3 +1,9 @@
 .page--notfound {
     text-align: center;
+    > * {
+        padding: 10px 10px;
+    }
+    > img {
+        max-width:100%;
+    }
 }