Merge branch 'dev-nico' into 'master'

add shopping basket to Apertif

See merge request astron-sdc/esap-gui!12

src/components/MyShoppingBasket.js

+import React, { useContext } from "react";
+import { Button } from 'react-bootstrap';
+import { GlobalContext } from "../contexts/GlobalContext";
+import { BasketContext } from "../contexts/BasketContext";
+import { getShoppingIcon } from "../utils/styling";
+
+export default function MyShoppingBasket(props) {
+    const { api_host, isAuthenticated } = useContext(GlobalContext);
+    const basketContext = useContext(BasketContext);
+
+    if (isAuthenticated) {
+        return <Button> {getShoppingIcon("cart")} </Button>
+    } else {
+        return null
+    }
+}
\ No newline at end of file

src/components/NavBar.js

@@ -2,6 +2,7 @@ import React, { useContext } from "react";
 import { Navbar, Nav } from "react-bootstrap";
 import { NavLink } from "react-router-dom";
 import AuthControl from "./auth/authControl";
+import MyShoppingBasket from "./MyShoppingBasket"
 import { QueryContext } from "../contexts/QueryContext";
 import { GlobalContext } from "../contexts/GlobalContext";
 
@@ -30,7 +31,9 @@ export default function NavBar() {
           </Nav.Link>
         ))}
       </Nav>
-
+        <Nav>
+            <MyShoppingBasket />
+        </Nav>
       <Nav>
         <AuthControl />
       </Nav>

src/components/archives/DataProductCategories.js

@@ -4,6 +4,7 @@ import { ListGroup, Card, Button, Row, Col } from "react-bootstrap";
 import { GlobalContext } from "../../contexts/GlobalContext";
 import { QueryContext } from "../../contexts/QueryContext";
 import axios from "axios";
+import { getQueryIcon } from "../../utils/styling";
 
 export default function DataProductCategories({ archive }) {
   const { api_host } = useContext(GlobalContext);
@@ -51,7 +52,7 @@ export default function DataProductCategories({ archive }) {
                       setCollection(category.collection);
                       history.push(query_url);}}
                   >
-                    Browse Catalog & Run Queries
+                      {getQueryIcon()} Query this Dataset
                   </Button>
 
                 );

src/components/basket/addtobasket.js

@@ -24,7 +24,8 @@ export default function AddtoBasket(props) {
   }
 
   // fake authentication when in 'development' mode.
-  let authenticated = isAuthenticated || (process.env.NODE_ENV === "development")
+  // let authenticated = isAuthenticated || (process.env.NODE_ENV === "development")
+  let authenticated = isAuthenticated
 
   if (authenticated){
     return (

src/components/basket/savebasket.js

@@ -3,7 +3,7 @@ import { Button } from "react-bootstrap";
 import { GlobalContext } from "../../contexts/GlobalContext";
 import { BasketContext } from "../../contexts/BasketContext";
 import axios from "axios";
-
+import { getShoppingIcon } from "../../utils/styling";
 
 export default function SaveBasket(props) {
   const { api_host, isAuthenticated } = useContext(GlobalContext);
@@ -35,7 +35,8 @@ export default function SaveBasket(props) {
   }
 
   // fake authentication when in 'development' mode.
-  let authenticated = isAuthenticated || (process.env.NODE_ENV === "development")
+  //let authenticated = isAuthenticated || (process.env.NODE_ENV === "development")
+  let authenticated = isAuthenticated
 
   if(authenticated) {
 
@@ -44,8 +45,8 @@ export default function SaveBasket(props) {
           type="button"
           variant="primary"
           onClick={() => saveBasket(basketContext.datasets)}
-          {...props}
-        >Save Data Selection</Button>
+          {...props}>
+            {getShoppingIcon("save_cart")} Save Basket</Button>
     );
   }
   else{

src/components/query/ApertifResults.js

@@ -3,15 +3,25 @@ import { Table, Alert } from "react-bootstrap";
 import axios from "axios";
 import { QueryContext } from "../../contexts/QueryContext";
 import { GlobalContext } from "../../contexts/GlobalContext";
+import { BasketContext } from "../../contexts/BasketContext";
 import LoadingSpinner from "../LoadingSpinner";
 import Paginate from "../Paginate";
 import HandlePreview from "./HandlePreview";
 import Preview from "./Preview";
+import SaveBasket from "../basket/savebasket";
+import AddToBasket from "../basket/addtobasket";
+
+function SAMPBasketItem(record){
+    return {
+        archive: "apertif",
+        record: record,
+    };
+}
 
 export default function ApertifResults({ catalog }) {
   const { queryMap, preview } = useContext(QueryContext);
   const { api_host } = useContext(GlobalContext);
-  const [page, setPage] = useState(queryMap.get(catalog).page);
+  const [page, setPage] = useState(queryMap.get(catalog).page);const { isAuthenticated } = useContext(GlobalContext);
 
   useEffect(() => {
     queryMap.set(catalog, {
@@ -61,14 +71,11 @@ export default function ApertifResults({ catalog }) {
           numAdjacent={3}
           numPages={numPages}
         />
+        <SaveBasket />
         <Table className="mt-3" responsive>
           <thead>
             <tr className="bg-light">
-              {/* <th>
-              <InputGroup>
-                <InputGroup.Checkbox />
-              </InputGroup>
-            </th> */}
+              <th>Basket</th>
               <th>Name</th>
               <th>RA</th>
               <th>Dec</th>
@@ -85,11 +92,9 @@ export default function ApertifResults({ catalog }) {
               return (
                 <>
                 <tr key={result.PID}>
-                  {/* <th>
-                  <InputGroup>
-                    <InputGroup.Checkbox />
-                  </InputGroup>
-                </th> */}
+                  <td>
+                    <AddToBasket id={result.id}  item={SAMPBasketItem(result)} />
+                  </td>
                   <td>{result.name}</td>
                   <td>{Number(result.RA).toFixed(1)}</td>
                   <td>{Number(result.dec).toFixed(1)}</td>

src/components/query/HandlePreview.js

 import React, { useContext } from 'react';
 import { Button } from 'react-bootstrap';
 import { QueryContext } from '../../contexts/QueryContext';
+import { getThumbnailIcon } from "../../utils/styling";
 
 export default function HandlePreview({ result }) {
     const { preview, setPreview, setDS9, setURL } = useContext(QueryContext);
@@ -24,7 +25,7 @@ export default function HandlePreview({ result }) {
                             setURL(result.thumbnail);
                         }}
                     >
-                        View Thumbnail
+                        {getThumbnailIcon()}  View Thumbnail
                     </Button>
                 ))
             }

src/components/query/QueryIVOARegistry.js

@@ -10,6 +10,7 @@ import parseQueryForm from "../../utils/form/parseQueryForm";
 import { IVOAContext } from "../../contexts/IVOAContext";
 import parseVOServiceForm from "../../utils/form/parseVOServiceForm";
 import VOServiceResults from "./VOServiceResults";
+import { getQueryIcon } from "../../utils/styling";
 
 export default function QueryIVOARegistry() {
   // queryMap is a map of dictionaries, where each dictionary consists of
@@ -203,7 +204,7 @@ export default function QueryIVOARegistry() {
           {...uiSchemaProp}
         >
           <div>
-            <Button type="submit">Query VO Registry</Button>
+            <Button type="submit">{getQueryIcon()} Query VO Registry</Button>
           </div>
         </Form>
         {Array.from(queryMap.keys()).map((catalog) => {

src/components/query/samp/SampGrid.js

@@ -22,7 +22,7 @@ export default function SampResults(props) {
             <thead>
 
             <tr className="bg-light">
-                <th>Select</th>
+                <th>Basket</th>
                 {fieldnames.map((field) => {
                     return (
                         <th key={field}>{field}</th>

src/routes/Routes.js

@@ -56,7 +56,7 @@ export default function Routes() {
           </BasketContextProvider>
         </Route>
       </Switch>
-      <footer><small>esap-gui version 28 may 2021</small></footer>
+      <footer><small>esap-gui version 1 jun 2021</small></footer>
     </Router>
   );
 }

src/utils/styling.js

+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import {
+    faShoppingCart,
+    faCartArrowDown,
+    faCartPlus,
+    faImage,
+    faRunning,
+    faBinoculars,
+    faSearchPlus }
+    from '@fortawesome/free-solid-svg-icons'
+
+
+export const getShoppingIcon = (type) => {
+    let icon = undefined
+    let color = "darkgreen"
+    let size = 'md'
+
+    if (type === 'cart') {
+        icon = faShoppingCart
+        size = "md"
+        color = "white"
+    }
+
+    if (type === 'save_cart') {
+        icon = faCartArrowDown
+        size = "md"
+        color = "white"
+    }
+
+    if (type === 'plus_cart') {
+        icon = faCartPlus
+        size = "md"
+        color = "white"
+    }
+
+    return <FontAwesomeIcon size={size} icon={icon} color={color}/>
+}
+
+export const getThumbnailIcon = () => {
+    let icon = faImage
+    let color = "white"
+    let size = 'md'
+
+    return <FontAwesomeIcon size={size} icon={icon} color={color}/>
+}
+
+export const getQueryIcon = () => {
+    let icon = faSearchPlus
+    let color = "white"
+    let size = 'md'
+
+    return <FontAwesomeIcon size={size} icon={icon} color={color}/>
+}
\ No newline at end of file