feat: add qr-code for iCalendar export

This commit is contained in:
Maël Gangloff
2024-08-18 17:28:45 +02:00
parent d5a36ed19f
commit 8a5ade89a9
7 changed files with 151 additions and 107 deletions

View File

@@ -10,12 +10,6 @@ import {getLayoutedElements} from "./getLayoutedElements";
import {watchlistToNodes} from "./watchlistToNodes";
import {watchlistToEdges} from "./watchlistToEdges";
export type DiagramConfig = {
tld?: boolean
nameserver?: boolean
entities?: boolean
}
export function ViewDiagramWatchlistButton({token}: { token: string }) {
const [open, setOpen] = useState(false)
@@ -24,9 +18,11 @@ export function ViewDiagramWatchlistButton({token}: { token: string }) {
const [edges, setEdges, onEdgesChange] = useEdgesState([])
useEffect(() => {
setNodes([])
setEdges([])
setNodes([])
}, [])
useEffect(() => {
if (!open) return
setLoading(true)
getWatchlist(token).then(w => {
@@ -58,19 +54,22 @@ export function ViewDiagramWatchlistButton({token}: { token: string }) {
}
onOk={() => setOpen(false)}
onCancel={() => setOpen(false)}
width='85vw'
width='90vw'
height='100%'
>
<Flex style={{width: '80vw', height: '80vh'}}>
<Flex style={{width: '85vw', height: '85vh'}}>
<ReactFlow
fitView
colorMode='system'
defaultEdges={[]}
defaultNodes={[]}
nodesConnectable={false}
edgesReconnectable={false}
nodes={nodes}
edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
style={{width: '100%', height: '100vh'}}
style={{width: '100%', height: '100%'}}
>
<MiniMap/>
<Controls/>

View File

@@ -40,9 +40,10 @@ export const tldToEdge = (d: Domain) => ({
label: t`Registry`
})
export function watchlistToEdges(watchlist: Watchlist) {
const entitiesEdges = watchlist.domains.map(d => domainEntitiesToEdges(d)).flat()
export function watchlistToEdges(watchlist: Watchlist, withRegistrar = false, withTld = false) {
const entitiesEdges = watchlist.domains.map(d => domainEntitiesToEdges(d, withRegistrar)).flat()
const nameserversEdges = watchlist.domains.map(domainNSToEdges).flat()
const tldEdge = watchlist.domains.map(tldToEdge)
return [...entitiesEdges, ...nameserversEdges]
return [...entitiesEdges, ...nameserversEdges, ...(withTld ? tldEdge : [])]
}

View File

@@ -20,6 +20,7 @@ export const domainEntitiesToNode = (d: Domain, withRegistrar = false) => d.enti
return {
id: e.entity.handle,
type: e.roles.includes('registrant') || e.roles.includes('registrar') ? 'input' : 'output',
data: {label},
style: {
width: 200
@@ -30,6 +31,7 @@ export const domainEntitiesToNode = (d: Domain, withRegistrar = false) => d.enti
export const tldToNode = (tld: Tld) => ({
id: tld.tld,
data: {label: t`.${tld.tld} Registry`},
type: 'input',
style: {
width: 200
}
@@ -38,17 +40,18 @@ export const tldToNode = (tld: Tld) => ({
export const nsToNode = (ns: Nameserver) => ({
id: ns.ldhName,
data: {label: ns.ldhName},
type: 'output',
style: {
width: 200
}
})
export function watchlistToNodes(watchlist: Watchlist) {
export function watchlistToNodes(watchlist: Watchlist, withRegistrar = false, withTld = false) {
const domains = watchlist.domains.map(domainToNode)
const entities = [...new Set(watchlist.domains.map(d => domainEntitiesToNode(d)).flat())]
const entities = [...new Set(watchlist.domains.map(d => domainEntitiesToNode(d, withRegistrar)).flat())]
const tlds = [...new Set(watchlist.domains.map(d => d.tld))].map(tldToNode)
const nameservers = [...new Set(watchlist.domains.map(d => d.nameservers))].flat().map(nsToNode)
const nameservers = [...new Set(watchlist.domains.map(d => d.nameservers))].flat().map(nsToNode, withRegistrar)
return [...domains, ...entities, ...nameservers]
return [...domains, ...entities, ...nameservers, ...(withTld ? tlds : [])]
}