Skip to content
Snippets Groups Projects
Commit d11e8eb2 authored by Klaas Kliffen's avatar Klaas Kliffen :satellite:
Browse files

Start of clean-up

parent d28f9538
No related branches found
No related tags found
1 merge request!109Clean up GUI part I
Hide whitespace changes
Inline Side-by-side
src/components/basket/EmptyBasketButton.js
+ 28
− 29
View file @ d11e8eb2
import React, { useContext, useState } from "react";
import { useHistory } from "react-router-dom";
import { Button, Modal } from "react-bootstrap";
import { GlobalContext } from "../../contexts/GlobalContext";
import { useHistory } from "react-router-dom";
import { BasketContext } from "../../contexts/BasketContext";
import { getTrashIcon, getOKIcon } from "../../utils/styling";
import { saveBasket } from "./SaveBasketButton"
import { GlobalContext } from "../../contexts/GlobalContext";
import { getOKIcon, getTrashIcon } from "../../utils/styling";
export default function EmptyBasketButton(props) {
const { api_host, isAuthenticated, isTokenValid, loginAgain } = useContext(GlobalContext);
......@@ -17,7 +16,7 @@ export default function EmptyBasketButton(props) {
let history = useHistory()
function emptyBasket(basketContext , api_host, isTokenValid, loginAgain, history){
function emptyBasket(basketContext) {
basketContext.clear()
setHasChanged(true)
setShow(false)
......@@ -25,35 +24,35 @@ export default function EmptyBasketButton(props) {
}
if (isAuthenticated) {
if (isAuthenticated) {
//alert(basketContext.datasets)
if (basketContext.datasets.length>0) {
if (basketContext.datasets.length > 0) {
return (
<>
<Button
type="button"
variant="primary"
onClick={handleShow}
{...props}>
{getTrashIcon('white')} Empty Basket
</Button>
<Button
type="button"
variant="primary"
onClick={handleShow}
{...props}>
{getTrashIcon('white')} Empty Basket
</Button>
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>{getTrashIcon('black')}{' '}Empty Basket</Modal.Title>
</Modal.Header>
<Modal.Body><h5>Are you sure you want to empty the basket?</h5>
<i>(don't forget to click 'Save Basket' afterward)</i>
</Modal.Body>
<Modal.Footer>
<Button variant="success"
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>{getTrashIcon('black')}{' '}Empty Basket</Modal.Title>
</Modal.Header>
<Modal.Body><h5>Are you sure you want to empty the basket?</h5>
<i>(don't forget to click 'Save Basket' afterward)</i>
</Modal.Body>
<Modal.Footer>
<Button variant="success"
onClick={() => emptyBasket(basketContext, api_host, isTokenValid, loginAgain, history)}
>
{getOKIcon()}{' '}OK
</Button>
>
{getOKIcon()}{' '}OK
</Button>
</Modal.Footer>
</Modal>
</Modal.Footer>
</Modal>
</>
)
......@@ -61,7 +60,7 @@ export default function EmptyBasketButton(props) {
return null
}
}
else{
else {
return null
}
}
src/components/basket/MyBasketButton.js
+ 5
− 5
View file @ d11e8eb2
import React, { useContext, useEffect } from "react";
import { Button, Badge } from 'react-bootstrap';
import { GlobalContext } from "../../contexts/GlobalContext";
import { Badge, Button } from 'react-bootstrap';
import { BasketContext } from "../../contexts/BasketContext";
import { GlobalContext } from "../../contexts/GlobalContext";
import { getShoppingIcon } from "../../utils/styling";
import { loadBasket } from "./LoadBasket";
export default function MyBasketButton(props) {
const { api_host, isAuthenticated } = useContext(GlobalContext);
const basketContext = useContext(BasketContext);
const { datasets, hasChanged } = useContext(BasketContext);
const { hasChanged } = useContext(BasketContext);
useEffect(() => {
loadBasket(basketContext, api_host, isAuthenticated)
},[isAuthenticated])
}, [isAuthenticated, api_host, isAuthenticated]);
if (isAuthenticated) {
try {
......@@ -41,4 +41,4 @@ export default function MyBasketButton(props) {
// do not show shopping basket when not authenticated
return null
}
}
\ No newline at end of file
}
src/components/basket/MyBasketPage.js
+ 35
− 47
View file @ d11e8eb2
import React, { useState, useEffect, useContext } from "react";
import { Table, Container, Alert } from "react-bootstrap";
import React, { useContext, useEffect, useState } from "react";
import { Container, Table } from "react-bootstrap";
import { BasketContext } from "../../contexts/BasketContext";
import { GlobalContext } from "../../contexts/GlobalContext";
import { QueryContext } from "../../contexts/QueryContext";
import { renderHeaderApertif, renderRowApertif } from "../services/layout/ApertifResultsLayout";
import { renderHeaderAstronVO, renderRowAstronVO } from "../services/layout/AstronVOLayout";
import { renderHeaderIVOA, renderRowIVOA } from "../services/layout/IVOALayout";
import AddToBasket from "./AddToBasketCheckBox";
import APIButton from "./APIButton"
import EmptyBasketButton from "./EmptyBasketButton"
import { renderRowApertif, renderHeaderApertif } from "../services/layout/ApertifResultsLayout"
import { renderRowAstronVO, renderHeaderAstronVO } from "../services/layout/AstronVOLayout"
import { renderRowIVOA, renderHeaderIVOA } from "../services/layout/IVOALayout"
import APIButton from "./APIButton";
import EmptyBasketButton from "./EmptyBasketButton";
function renderRow(item) {
switch(item.archive) {
switch (item.archive) {
case 'apertif':
return <div>
<Table className="mt-3" size="sm" responsive>
<thead>
<tr className="bg-light">
{renderHeaderApertif()}
</tr>
<tr className="bg-light">
{renderHeaderApertif()}
</tr>
</thead>
<tbody>
{renderRowApertif((item.record))}
......@@ -35,9 +31,9 @@ function renderRow(item) {
return <div>
<Table className="mt-3" size="sm" responsive>
<thead>
<tr className="bg-light">
{renderHeaderAstronVO()}
</tr>
<tr className="bg-light">
{renderHeaderAstronVO()}
</tr>
</thead>
<tbody>
{renderRowAstronVO((item.record))}
......@@ -50,9 +46,9 @@ function renderRow(item) {
return <div>
<Table className="mt-3" size="sm" responsive>
<thead>
<tr className="bg-light">
{renderHeaderIVOA()}
</tr>
<tr className="bg-light">
{renderHeaderIVOA()}
</tr>
</thead>
<tbody>
{renderRowIVOA((item.record))}
......@@ -78,7 +74,7 @@ function renderBasketPage(items) {
return <><tr>
<td>
<AddToBasket id={id} item={item} label=""/>
<AddToBasket id={id} item={item} label="" />
</td>
<td>{archive}</td>
<td>{renderRow(item)}</td>
......@@ -87,44 +83,36 @@ function renderBasketPage(items) {
return (
<>
<Container fluid>
&nbsp;
<h3>Data Shopping Basket &nbsp;&nbsp; <EmptyBasketButton/> <APIButton/></h3>
<Table className="mt-3" responsive>
<thead>
<tr className="bg-light">
<th>Basket</th>
<th>Source</th>
<th>Item</th>
</tr>
</thead>
<tbody>
{my_list}
</tbody>
</Table>
</Container>
<Container fluid>
&nbsp;
<h3>Data Shopping Basket &nbsp;&nbsp; <EmptyBasketButton /> <APIButton /></h3>
<Table className="mt-3" responsive>
<thead>
<tr className="bg-light">
<th>Basket</th>
<th>Source</th>
<th>Item</th>
</tr>
</thead>
<tbody>
{my_list}
</tbody>
</Table>
</Container>
</>
);
}
export default function MyBasketPage() {
const { api_host, isAuthenticated } = useContext(GlobalContext);
const basketContext = useContext(BasketContext);
const { refresh } = useContext(BasketContext);
const { preview } = useContext(QueryContext);
// work on a local copy of datasets, to be able (un)(re)select items before saving
const [items, setItems] = useState(basketContext.datasets);
useEffect(() => {
//alert('refresh')
setItems(basketContext.datasets)
},[refresh])
}, [refresh, basketContext.datasets])
return renderBasketPage(items)
}
src/components/basket/SaveBasketButton.js
+ 30
− 30
View file @ d11e8eb2
import axios from "axios";
import React, { useContext } from "react";
import { useHistory } from "react-router-dom";
import { Button } from "react-bootstrap";
import { GlobalContext } from "../../contexts/GlobalContext";
import { useHistory } from "react-router-dom";
import { BasketContext } from "../../contexts/BasketContext";
import axios from "axios";
import { GlobalContext } from "../../contexts/GlobalContext";
import { getShoppingIcon } from "../../utils/styling";
export function saveBasket(basketContext, api_host, isTokenValid, loginAgain, history){
const payload = {shopping_cart: basketContext.datasets};
console.log('saveBasket() '+payload)
export function saveBasket(basketContext, api_host, isTokenValid, loginAgain, history) {
const payload = { shopping_cart: basketContext.datasets };
console.log('saveBasket() ' + payload)
const profileUrl = api_host + "accounts/user-profiles/";
// check if he token is still valid
let token_is_valid = isTokenValid()
console.log('token valid: '+token_is_valid)
console.log('token valid: ' + token_is_valid)
// if the token is not valid, then refresh it by logging in again
if (token_is_valid < 0) {
......@@ -37,7 +37,7 @@ export function saveBasket(basketContext, api_host, isTokenValid, loginAgain, hi
// send the payload to the userProfile
axios
.patch(userProfileUrl, payload, {withCredentials: true})
.patch(userProfileUrl, payload, { withCredentials: true })
.then((response) => {
console.log("patch", response);
basketContext.setHasChanged(false)
......@@ -52,29 +52,29 @@ export function saveBasket(basketContext, api_host, isTokenValid, loginAgain, hi
}
export default function SaveBasketButton(props) {
const { api_host, isAuthenticated, isTokenValid, loginAgain } = useContext(GlobalContext);
const basketContext = useContext(BasketContext);
const { hasChanged, setHasChanged } = useContext(BasketContext);
const { api_host, isAuthenticated, isTokenValid, loginAgain } = useContext(GlobalContext);
const basketContext = useContext(BasketContext);
const { hasChanged } = useContext(BasketContext);
let history = useHistory()
let history = useHistory()
// only show the 'save basket' button when a user is logged in and something in the basket has changed
if (isAuthenticated) {
if (hasChanged) {
return (
<Button
type="button"
variant="primary"
onClick={() => saveBasket(basketContext , api_host, isTokenValid, loginAgain, history)}
{...props}>
{getShoppingIcon("save_cart")} Save Basket</Button>
)
} else {
return null
}
}
else{
return null
// only show the 'save basket' button when a user is logged in and something in the basket has changed
if (isAuthenticated) {
if (hasChanged) {
return (
<Button
type="button"
variant="primary"
onClick={() => saveBasket(basketContext, api_host, isTokenValid, loginAgain, history)}
{...props}>
{getShoppingIcon("save_cart")} Save Basket</Button>
)
} else {
return null
}
}
else {
return null
}
}
}
src/components/services/aladin/FilterCard.js
+ 6
− 7
View file @ d11e8eb2
import React, { useContext } from "react";
import {Card } from 'react-bootstrap'
import { Card } from 'react-bootstrap';
import { AladinAdvancedContext } from "../../../contexts/AladinAdvancedContext";
import YearFilterButton from './YearFilterButton'
import SearchButton from './SearchButton'
import PlanetListCard from './PlanetListCard'
import PlanetListCard from './PlanetListCard';
import SearchButton from './SearchButton';
import YearFilterButton from './YearFilterButton';
export default function FilterCard(props) {
const { filteredDataItems, setFilteredDataItems, fetchedData } = useContext(AladinAdvancedContext);
const { filteredDataItems } = useContext(AladinAdvancedContext);
return (
<div className="App">
......@@ -21,11 +21,10 @@ export default function FilterCard(props) {
<tr><td><SearchButton default="search planet name" /></td></tr>
</tbody>
</table>
<PlanetListCard/>
<PlanetListCard />
</Card.Body>
</Card>
</div>
);
}
src/routes/Routes.js
+ 9
− 15
View file @ d11e8eb2
import React, { useContext } from "react";
import { Route, Switch } from "react-router-dom";
import { BrowserRouter as Router } from "react-router-dom";
import ArchiveDetails from "../components/archives/ArchiveDetails";
import { Archives } from "../components/archives/Archives";
import MyBasketPage from "../components/basket/MyBasketPage";
import NavBar from "../components/NavBar";
import QueryCatalogs from "../components/query/QueryCatalogs";
import QueryIVOARegistry from "../components/query/QueryIVOARegistry";
import QueryMultipleArchives from "../components/query/QueryMultipleArchives";
import { GlobalContext } from "../contexts/GlobalContext";
import { BrowserRouter as Router } from "react-router-dom";
import MyBasketPage from "../components/basket/MyBasketPage";
import NavBar from "../components/NavBar";
import AladinAdvancedPage from '../components/services/aladin/AladinAdvancedPage';
import AladinSimplePage from '../components/services/aladin/AladinSimplePage';
import Batch from "../components/services/Batch";
import Interactive from "../components/services/Interactive";
import Jobs from "../components/services/Jobs";
import Rucio from "../components/services/Rucio";
import SampPage from '../components/services/samp/SampPage';
import SubmitJob from "../components/services/SubmitJob";
import { AladinAdvancedContextProvider } from "../contexts/AladinAdvancedContext";
import { AladinSimpleContextProvider } from "../contexts/AladinSimpleContext";
import { GlobalContext } from "../contexts/GlobalContext";
import { IVOAContextProvider } from "../contexts/IVOAContext";
import AladinAdvancedPage from '../components/services/aladin/AladinAdvancedPage';
import AladinSimplePage from '../components/services/aladin/AladinSimplePage';
import SampPage from '../components/services/samp/SampPage';
import { createBrowserHistory } from "history";
import Jobs from "../components/services/Jobs";
import { COMMIT_DATE, COMMIT_URL } from "../utils/version";
export default function Routes() {
......@@ -50,7 +44,7 @@ export default function Routes() {
<Interactive />
</Route>
<Route exect path="/jobs">
<Route exact path="/jobs">
<Jobs />
</Route>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment