diff --git a/src/components/MyShoppingBasket.js b/src/components/MyShoppingBasket.js
new file mode 100644
index 0000000000000000000000000000000000000000..30f1161b47a1dee35f84f1762c66a20d395d6763
--- /dev/null
+++ b/src/components/MyShoppingBasket.js
@@ -0,0 +1,16 @@
+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
diff --git a/src/components/NavBar.js b/src/components/NavBar.js
index 35e23b07845771a4001d38f6f46bbc9eaf318506..c636e4a96d1664c46d6c553b69f353e9046cfdd4 100644
--- a/src/components/NavBar.js
+++ b/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>
diff --git a/src/components/archives/DataProductCategories.js b/src/components/archives/DataProductCategories.js
index beb3cf92a1c894cb2d095d3c24b3631774c58837..b76583e2f0e74edcd87369425d689dbce78cec55 100644
--- a/src/components/archives/DataProductCategories.js
+++ b/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>
);
diff --git a/src/components/basket/addtobasket.js b/src/components/basket/addtobasket.js
index 95d0844ad52a3b3122529de910a3d97417cf5a08..43b593747f2ede503d4109381f5449cb814917a8 100644
--- a/src/components/basket/addtobasket.js
+++ b/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 (
diff --git a/src/components/basket/savebasket.js b/src/components/basket/savebasket.js
index 60ea735c38f1391ba152612d22c61eaa4564408b..a4cb60dbc56e6fdac2602154b3eb5e08641d9fe4 100644
--- a/src/components/basket/savebasket.js
+++ b/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{
diff --git a/src/components/query/ApertifResults.js b/src/components/query/ApertifResults.js
index e5b08f4f090fff002a60f5eb603c140180e056ba..a6ec4f308542b2d5f3a4acf2b913c117ee41f4ee 100644
--- a/src/components/query/ApertifResults.js
+++ b/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>
diff --git a/src/components/query/HandlePreview.js b/src/components/query/HandlePreview.js
index be37a2b0f5d9aff1195fb26db726f19626b5af2d..8b52bf11b3327eee266f2f2c165d62da187dadb0 100644
--- a/src/components/query/HandlePreview.js
+++ b/src/components/query/HandlePreview.js
@@ -1,6 +1,7 @@
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>
))
}
diff --git a/src/components/query/QueryIVOARegistry.js b/src/components/query/QueryIVOARegistry.js
index ad404fdf1299b4e2b1f2c332eee2d98da83a0a77..bf12abd1c6c51662599e5d84476790661efe7f00 100644
--- a/src/components/query/QueryIVOARegistry.js
+++ b/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) => {
diff --git a/src/components/query/samp/SampGrid.js b/src/components/query/samp/SampGrid.js
index 2be08d96d2ab5bee91afef9771bcc82e4b7b03ab..84ede83d8223da0e5300060a5f668ee5436c6926 100644
--- a/src/components/query/samp/SampGrid.js
+++ b/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>
diff --git a/src/routes/Routes.js b/src/routes/Routes.js
index b29b34a92052cb4f37a52a06e38d44fd6f86e82e..a76bb1dce2b77c31436def405d778e536c7f75b7 100644
--- a/src/routes/Routes.js
+++ b/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>
);
}
diff --git a/src/utils/styling.js b/src/utils/styling.js
new file mode 100644
index 0000000000000000000000000000000000000000..e1942a4e6ef01b9e76a241d738e078b9d718c6b2
--- /dev/null
+++ b/src/utils/styling.js
@@ -0,0 +1,54 @@
+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