Created first version of page 'Astro details'

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

@@ -0,0 +1,72 @@
+// DEBUG... COMENTAR DEPOIS
+_log.info('service called...');
+
+//const astroType = _req.getString("astroType");
+//_log.info(astroType)
+const aroundAstroUid = _req.getString("aroundAstroUid");
+_log.info("AroundAstroUid: ", aroundAstroUid);
+
+/*
+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);
+}
+*/
+/*
+if (aroundAstroUid && aroundAstroUid != "") {
+  filterWhere = " AND around.uid = CAST(? AS UUID) ";
+  filterParams.add(aroundAstroUid);
+}
+_log.info("Filter params:", filterParams);
+
+const dbAstros = _db.query(`
+  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
+	  --,around.uid as "around_astro_uid"
+    --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 
+  WHERE 
+    astro.active = TRUE
+    AND astro_type.active = TRUE
+    ${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'))
+  )
+}
+
+// DEBUG...COMENTAR DEPOIS!
+//_log.info( 'Server return...', astros );
+
+_out.json(astros)
+*/
+// DEBUG...COMENTAR DEPOIS!
+_log.info('service ended!');

server/services/astro/get.js

@@ -0,0 +1,68 @@
+// DEBUG... COMENTAR DEPOIS
+//_log.info("service called...");
+
+const astroUid = _req.getString("uid");
+
+if (astroUid && astroUid != "") {
+  const dbAstro = _db.queryFirst(`
+    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,
+      around.uid as "around_astro_uid",
+      around.name as "around_astro_name",
+      astro.periapsis,
+      astro.apoapsis
+      --,astro.image 
+    FROM astro
+      INNER JOIN astro_type
+        ON astro.type_id = astro_type.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 astro.uid = CAST(? AS UUID)
+  `, astroUid);
+  
+  if (dbAstro == null) {
+      _header.status(404);
+      _exec.stop();
+  }
+  const astro = 
+          _val.map()
+                .set("uid", dbAstro.getString("uid"))
+                .set("name", dbAstro.getString("name"))
+                .set(
+                  "type",
+                  _val.map()
+                        .set("name", dbAstro.getString("astro_type") )
+                        .set("code", dbAstro.getString("astro_type_code")))
+                .set("equatorialRadius", dbAstro.getDouble("equatorial_radius"))
+                .set("rotationVelocity", dbAstro.getDouble("rotation_velocity"))
+                .set(
+                  "aroundAstro",
+                  _val.map()
+                        .set("uid", dbAstro.getString("around_astro_uid"))
+                        .set("name", dbAstro.getString("around_astro_name")))
+                .set("periapsis", dbAstro.getDouble("periapsis"))
+                .set("apoapsis", dbAstro.getDouble("apoapsis"))
+  ;
+  
+  // DEBUG...COMENTAR DEPOIS!
+  //_log.info('Server return...', astro);
+
+  _out.json(astro);
+
+  // DEBUG...COMENTAR DEPOIS!
+  //_log.info('service ended!');
+}
+else {
+  _header.status(400);
+  _exec.stop();
+}

server/services/astro/image.get.js

@@ -2,11 +2,12 @@ const dbAstro = _db.get('astro', _req.getString('uid'))
 
 if (dbAstro) {
   const dbAstroImageName = dbAstro.getString('image')
-  _log.info( dbAstroImageName );
-  const storageAstroImageFile = _storage.database(
-    'astro',
-    'image',
-    dbAstroImageName
+  //_log.info( dbAstroImageName );
+  const storageAstroImageFile = 
+    _storage.database(
+      'astro',
+      'image',
+      dbAstroImageName
   )
   switch (storageAstroImageFile.extension()){
     case 'jpg':

server/services/astro/list.get.js

@@ -1,23 +1,24 @@
 // DEBUG... COMENTAR DEPOIS
 //_log.info('service called...');
 
-const astroType = _req.getString(`astroType`)
+const astroType = _req.getString("astroType");
+// DEBUG... COMENTAR DEPOIS
 //_log.info(astroType)
 
-const page = _req.getInt('page', 1)
-let offset = (page - 1) * 8
+const page = _req.getInt("page", 1);
+let offset = (page - 1) * 8;
 if (offset < 0) {
-    offset = 0
+    offset = 0;
 }
 
-
-let filterWhere = ""
+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)
 }
+// DEBUG... COMENTAR DEPOIS
+//_log.info("Filter params:", filterParams);
 
 const dbAstros = _db.query(`
   SELECT 
@@ -28,7 +29,7 @@ const dbAstros = _db.query(`
     --astro_type.id AS "astro_type_code",
     --astro.equatorial_radius,
     --astro.rotation_velocity,
-    --astro.around_astro_id,
+    --,astro.around_astro_id
     --astro.periapsis,
     --astro.apoapsis,
     --astro.image 
@@ -43,8 +44,6 @@ const dbAstros = _db.query(`
   OFFSET ${offset}
 `, filterParams);
 
-
-
 const astros = _val.list()
 for (const dbAstro of dbAstros) {
   astros.add(

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

@@ -57,4 +57,4 @@ function Filter({onAstroTypeChange}) {
   );
 }
 
-export default Filter;
+export default Filter;

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

@@ -0,0 +1,50 @@
+import React, { useState, useEffect } from "react";
+import { Spin } 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( 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

@@ -0,0 +1,5 @@
+@import "../../../styles/variables.less";
+
+.other-astros {
+  padding-left: 20px;
+}

website/src/pages/AstroDetails/index.jsx

@@ -1,20 +1,112 @@
-import React from 'react';
+import React, { useState, useEffect } from "react";
+import { useParams } from "react-router-dom";
+import { Spin, Image, notification, Descriptions, Divider, Popover, 
+ // Avatar, List 
+} from "antd";
 
-//import { useParams } from 'react-router-dom';
 import Cluar from '../../common/Cluar';
+import _service from "@netuno/service-client";
 
 import './index.less';
+import OtherAstros from "./OtherAstros";
 
 function AstroDetails() {
+  const servicePrefix = _service.config().prefix;
+  const { uid } = useParams(null);
+  const [loading, setLoading] = useState(true);
+  const [astroInfo, setAstroInfo] = useState([]);
+
+  useEffect(() => {
+    _service({
+      url: "/astro",
+      data: { uid },
+      success: (response) => {
+        setAstroInfo(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 (
+      <section className="content">
+        <div className="astro-details">
+          <Spin size="large"/>
+        </div>
+      </section>
+    );
+  }
+  if (astroInfo == null) {
+    console.log("astro == null")
+    return (
+      <section className="content">
+        <div className="astro-details">
+          <p>N&atilde;o foi poss&iacute;vel carregar os detalhes do astro.</p>
+        </div>
+      </section>
+    );
+  }
+  //const astroType =  astroInfo.type;
+  const cluarLanguage = Cluar.currentLanguage().locale;
+  
+  const astroBase = [
+    {label: 'Tipo de astro', children: astroInfo.name, key: '1'}
+    ,{label: 'Raio equatorial (km)', children: astroInfo.equatorialRadius.toLocaleString(cluarLanguage), key: '2'} 
+    ,{label: 'Velocidade rotação (km/s)', children: astroInfo.rotationVelocity.toLocaleString(cluarLanguage), key: '3'} 
+  ];
+  const aroundAstro = astroInfo.aroundAstro;
+  if (aroundAstro && aroundAstro.uid != "") {
+    astroBase.push(
+      {
+        label: 'Orbita em torno', 
+        children: <a href={`/pt/astro/${aroundAstro.uid}`}>{aroundAstro.name}</a>, 
+        //span: 3,
+        key: '4'
+      }
+    );
+    astroBase.push({
+      label: 
+        <Popover 
+          content={<p>
+            É o ponto da órbita de um corpo celeste em que ele se encontra <b>mais próximo</b> do astro em torno do qual gravita.
+          </p>}>Periastro (km)
+        </Popover>, 
+      children: astroInfo.periapsis.toLocaleString(cluarLanguage),
+      key: '5'
+    })
+    astroBase.push({
+      label: 
+        <Popover 
+          content={<p>
+            É o ponto da órbita de um corpo celeste em que ele se encontra <b>mais distante</b> do astro em torno do qual gravita.
+          </p>}>Apoastro (km)
+        </Popover>, 
+      children: astroInfo.apoapsis.toLocaleString(cluarLanguage),
+      key: '6'
+    })
+  }
+  
   return (
-    <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>
-    </div>
+    <section className="content">
+      <div className="astro-details">
+        <Image
+          width={200}
+          src={`${servicePrefix}/astro/image?uid=${astroInfo.uid}`}
+          alt={`"Imagem do ${astroInfo.name}"`}
+        />
+        <Divider orientation="left"><h1>{astroInfo.name}</h1></Divider>
+        <Descriptions items={astroBase} />
+        {/*<OtherAstros />*/}
+      </div>
+    </section>
   );
-};
+}
 
 export default AstroDetails;

website/src/pages/AstroDetails/index.less

@@ -1,3 +1,22 @@
+@import "../../styles/variables.less";
+
 .astro-details {
-    text-align: center;
+  text-align: left;
+
+  > .ant-divider {
+    font-size: 1.2em;
+    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-content {
+    color:@primary-color;
+    font-size: 1.2em;
+  }
 }