diff --git a/client/src/components/windows/manage_links/LinksStatusWidget.tsx b/client/src/components/windows/manage_links/LinksStatusWidget.tsx index 20b3fe9..e47fc4e 100644 --- a/client/src/components/windows/manage_links/LinksStatusWidget.tsx +++ b/client/src/components/windows/manage_links/LinksStatusWidget.tsx @@ -1,10 +1,10 @@ -import { Box, Typography } from '@material-ui/core'; +import { Box, LinearProgress, Typography } from '@material-ui/core'; import React, { useCallback, useEffect, useReducer, useState } from 'react'; import { $enum } from 'ts-enum-util'; import { ItemType, QueryElemProperty, QueryResponseType } from '../../../api'; import { queryItems } from '../../../lib/backend/queries'; import { QueryElem, QueryLeafBy, QueryLeafOp } from '../../../lib/query/Query'; -import { ExternalStore, StoreURLIdentifiers } from '../../common/StoreLinkIcon'; +import StoreLinkIcon, { ExternalStore, StoreURLIdentifiers } from '../../common/StoreLinkIcon'; var _ = require('lodash'); @@ -93,19 +93,46 @@ export default function LinksStatusWidget(props: { return s in linkedCounts; } - return <> - {$enum(ExternalStore).getValues().map((s: ExternalStore) => { - return - {totalCounts && storeReady(s) && - - {s}:
- {linkedCounts[s].songs} / {totalCounts.songs} songs linked
- {linkedCounts[s].artists} / {totalCounts.artists} artists linked
- {linkedCounts[s].albums} / {totalCounts.albums} albums linked
-
-
-
} -
- })} - + return + + {$enum(ExternalStore).getValues().map((s: ExternalStore) => { + if (!totalCounts) { return <>; } + if (!storeReady(s)) { return <>; } + let tot = totalCounts; + let lin = linkedCounts[s]; + let perc = { + songs: Math.round((lin.songs || 0) / (tot.songs || 1) * 100), + artists: Math.round((lin.artists || 0) / (tot.artists || 1) * 100), + albums: Math.round((lin.albums || 0) / (tot.albums || 1) * 100), + } + return <> + {totalCounts && storeReady(s) && <> + + + + + + + + + + + + + + + + + + + } + ; + })} +
+ + + {s} + + Linked artists:{lin.artists} / {tot.artists}
Linked albums:{lin.albums} / {tot.albums}
Linked songs:{lin.songs} / {tot.songs}
 
+
} \ No newline at end of file