Improved page 'Astro details'

server/services/astro/around-list.get.js

@@ -1,10 +1,14 @@
 // DEBUG... COMENTAR DEPOIS
-_log.info('service called...');
+//_log.info('service called...');
 
 //const astroType = _req.getString("astroType");
 //_log.info(astroType)
 const aroundAstroUid = _req.getString("aroundAstroUid");
-_log.info("AroundAstroUid: ", aroundAstroUid);
+//_log.info("AroundAstroUid: ", aroundAstroUid);
+
+//DEBUG - simulate slow server - DONT FORGET TO COMMENT
+//_log.info("Slow server...");
+//_exec.sleep(3000);
 
 /*
 const page = _req.getInt("page", 1);
@@ -26,47 +30,53 @@ if (aroundAstroUid && aroundAstroUid != "") {
   filterParams.add(aroundAstroUid);
 }
 _log.info("Filter params:", filterParams);
-
+*/
 const dbAstros = _db.query(`
   SELECT 
-    astro.uid,
+    astro.uid
     --astro.id,
-    astro.name
+    ,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
 	  --,around.uid as "around_astro_uid"
-    --astro.periapsis,
-    --astro.apoapsis,
+    ,astro.periapsis
+    ,astro.apoapsis
     --astro.image 
   FROM astro
     INNER JOIN astro_type
       ON astro.type_id = astro_type.id
-        LEFT JOIN ( SELECT id,uid FROM astro ) AS around
-		      ON astro.around_astro_id = around.id 
+        LEFT JOIN ( SELECT id,uid,name FROM astro ) AS around
+          ON astro.around_astro_id = around.id 
   WHERE 
     astro.active = TRUE
     AND astro_type.active = TRUE
+    AND around.uid = ?::uuid
+`,aroundAstroUid);
+/*    
     ${filterWhere}
   --LIMIT 8
   --OFFSET ${offset}
 `, filterParams);
-
+*/
 const astros = _val.list()
 for (const dbAstro of dbAstros) {
   astros.add(
       _val.map()
             .set('id', dbAstro.getString('uid'))
             .set('name', dbAstro.getString('name'))
+            .set('type', dbAstro.getString('astro_type'))
+            .set('periapsis', dbAstro.getString('periapsis'))
+            .set('apoapsis', dbAstro.getString('apoapsis'))
   )
 }
 
 // DEBUG...COMENTAR DEPOIS!
 //_log.info( 'Server return...', astros );
 
-_out.json(astros)
-*/
+_out.json(astros);
+
 // DEBUG...COMENTAR DEPOIS!
 _log.info('service ended!');

server/services/astro/get.js

@@ -27,7 +27,7 @@ if (astroUid && astroUid != "") {
     WHERE 
       astro.active = TRUE
       AND astro_type.active = TRUE
-      AND astro.uid = CAST(? AS UUID)
+      AND astro.uid = ?::uuid
   `, astroUid);
   
   if (dbAstro == null) {

server/services/astro/list.get.js

@@ -14,7 +14,7 @@ if (offset < 0) {
 let filterWhere = "";
 const filterParams = _val.list()
 if (astroType != "" && astroType != "all") {
-    filterWhere = " AND astro_type.uid = CAST(? AS UUID) ";
+    filterWhere = " AND astro_type.uid = ?::uuid ";
     filterParams.add(astroType);
 }
 // DEBUG... COMENTAR DEPOIS

server/setup/_schema-form-02-astro.js

@@ -226,11 +226,11 @@ _form.createComponentIfNotExists(
 	.set("name", "rotation_velocity")
 	.set("notnull", false)
 	.set("primarykey", false)
-	.set("properties", "{\"MASK\":{\"default\":\"#.##0,00\",\"type\":\"STRING\",\"value\":\"#.##0,00\"},\"MASK_REVERSE\":{\"default\":\"true\",\"type\":\"BOOLEAN\",\"value\":\"true\"},\"MASK_SELECTONFOCUS\":{\"default\":\"false\",\"type\":\"BOOLEAN\",\"value\":\"false\"}}")
+	.set("properties", "{\"MASK\":{\"default\":\"\",\"type\":\"STRING\",\"value\":\"\"},\"MASK_REVERSE\":{\"default\":\"false\",\"type\":\"BOOLEAN\",\"value\":\"false\"},\"MASK_SELECTONFOCUS\":{\"default\":\"false\",\"type\":\"BOOLEAN\",\"value\":\"false\"}}")
 	.set("rowspan", 0)
 	.set("tdheight", 0)
 	.set("tdwidth", 0)
-	.set("type", "textfloat")
+	.set("type", "text")
 	.set("uid", "5777bc24-062b-4bd7-a279-bf64150d9357")
 	.set("user_id", 0)
 	.set("whenedit", true)

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

@@ -14,6 +14,10 @@ function Filter({onAstroTypeChange}) {
       },
       fail: (e) => {
         console.log("Service Error", e);
+        notification.error({
+          message:"Erro",
+          description:"Não foi possível encontrar os tipos de astro."
+        });
       },
     });
   }, []);

website/src/pages/AstroDetails/OtherAstros/index.jsx

@@ -1,50 +1,63 @@
 import React, { useState, useEffect } from "react";
-import { Spin } from "antd";
+import { Spin, message, notification } from "antd";
 import _service from "@netuno/service-client";
 
 import './index.less';
 
 function OtherAstros({aroundAstroUid}) {
-  const servicePrefix = _service.config().prefix;
-  const [list, setList] = useState([]);
-  const [loading, setLoading] = useState(true);
-      
-  /*
-  useEffect( () => {
-    setLoading(true);
-    _service({
-      url: "/astro/list",
-      data: {aroundAstroUid},
-      success: (response) => {
-        setList([response.json]);
-        setLoading(false);
-      },
-      fail: (e) => {
-        console.error("Service Error", e);
-        notification.error({
-          message:"Erro",
-          description:"Não foi possível encontrar o astro."
-        });
-        setLoading(false);
-      },
-    });
-  }, []);
-  */
-  /*
-  if( loading ){
-    return( <Spin size="large"/> );
+  if (aroundAstroUid) {
+    //console.log("OtherAstros called!");
+    //console.log(aroundAstroUid);
+  
+    //const servicePrefix = _service.config().prefix;
+    const [list, setList] = useState([]);
+    const [loading, setLoading] = useState(true);
+    
+    useEffect(() => {
+      setLoading(true);
+      _service({
+        url: "/astro/around-list",
+        data:{aroundAstroUid},
+        success: (response) => {
+          setList(response.json);
+          setLoading(false);
+        },
+        fail: (e) => {
+          console.log("Service Error", e);
+          notification.error({
+            message:"Erro",
+            description:"Não foi possível encontrar o astro."
+          });
+          setLoading(false);
+        },
+      });
+    }, []);
+    if (loading) {
+      return( <Spin size="large"/> );
+    }
+    console.log("List value:", list);
+    if( list.length > 0 ){ 
+      return ( 
+        <div className="other-astros">
+          <h1>Astros na sua orbita:</h1>
+          <div className="other-astros-list">
+            <ul>{
+              list.map((astro) => { 
+                return (
+                  <>
+                    <li>
+                      <a href={`/pt/astro/${astro.uid}`}>
+                        {`${astro.name} (${astro.type})`}
+                      </a>
+                    </li>
+                  </>
+                );
+              })
+            }</ul>
+          </div>
+        </div>
+      );
+    }
   }
-  */
-  //if( list.length > 0 ){ 
-    return ( <>
-      <h1>Astros na sua orbita:</h1>
-      <div className="other-astros-list">
-        <ul>
-          <li>Outros astros...</li>
-        </ul>
-      </div>
-    </>);
-  //}
 }
-
 export default OtherAstros;

website/src/pages/AstroDetails/OtherAstros/index.less

@@ -2,4 +2,9 @@
 
 .other-astros {
   padding-left: 20px;
+
+  .other-astros-list{
+    font-size: 1.4em;
+    padding-left: 20px;
+  }
 }

website/src/pages/AstroDetails/index.jsx

@@ -38,13 +38,15 @@ function AstroDetails() {
     return (
       <section className="content">
         <div className="astro-details">
-          <Spin size="large"/>
+          <div className="spin">
+            <Spin size="large"/>
+          </div>
         </div>
       </section>
     );
   }
   if (astroInfo == null) {
-    console.log("astro == null")
+    //console.log("astro == null")
     return (
       <section className="content">
         <div className="astro-details">
@@ -103,7 +105,7 @@ function AstroDetails() {
         />
         <Divider orientation="left"><h1>{astroInfo.name}</h1></Divider>
         <Descriptions items={astroBase} />
-        {/*<OtherAstros />*/}
+        <OtherAstros aroundAstroUid={astroInfo.uid} />
       </div>
     </section>
   );

website/src/pages/AstroDetails/index.less

@@ -4,19 +4,24 @@
   text-align: left;
 
   > .ant-divider {
-    font-size: 1.2em;
+    font-size: 1.3em;
     border-block-start-color: @primary-color;
     color: @primary-color;    
   }
 
-  .ant-descriptions-item-label {
-    font-weight:bold;
-    color:@primary-color;
-    font-size: 1.2em;
-  }
+  .ant-descriptions-item {
+    &-label {
+      font-weight:bold;
+      color:@primary-color;
+      font-size: 1.4em;
+    }
 
-  .ant-descriptions-item-content {
-    color:@primary-color;
-    font-size: 1.2em;
+    &-content {
+      color:@primary-color;
+      font-size: 1.4em;
+    }
+  }
+  .spin {
+    text-align:center;
   }
 }