wandering-eye/src/lib/Result/IpResult.svelte

<script lang="ts">
	import Accordion from '$lib/Accordion/Accordion.svelte'
	import AccordionItem from '$lib/Accordion/AccordionItem.svelte'
	import LinkWithIcon from '$lib/LinkWithIcon.svelte'
	import OpenStreetMap from '$lib/OpenStreetMap.svelte'
	import PieChart from '$lib/PieChart.svelte'
	import type { Ip } from './ip'
	export let ip: Ip
	$: whois = ip.lookup.whois
	$: geo = ip.lookup.geo
	$: check = ip.lookup.check
	export let close = false
	export let id = ''

	let ownerSectionHasMap = false

	$: email =
		whois.contactAbuse?.OrgAbuseEmail ??
		whois.contactAbuse?.RAbuseEmail ??
		whois.contactAbuse?.['abuse-mailbox'] ??
		whois['Contact Admin']?.['abuse-mailbox']

	let address: string
	$: {
		address =
			whois.organisation?.address ??
			whois.organisation?.Address ??
			whois.contactAbuse?.address ??
			''

		if (whois.organisation?.City) address += ` ${whois.organisation.City}`
		if (whois.organisation?.StateProv)
			address += ` ${whois.organisation.StateProv}`
		if (whois.organisation?.Country) address += ` ${whois.organisation.Country}`
	}
</script>

<Accordion {id} name={ip.ip}>
	<AccordionItem id="{id}info" name="info" open={!close}>
		{#if whois.range}
			<p class="range">{whois.range}</p>
		{/if}
		{#if whois.route ?? whois.cidr}
			<p class="block">{whois.route ?? whois.cidr}</p>
		{/if}
	</AccordionItem>
	<AccordionItem id="{id}owner" name="owner" open={!close} noPadding>
		<div class="owner-map" class:two-columns={ownerSectionHasMap}>
			<div class="details">
				{#if whois.organisation?.['org-name'] ?? whois.organisation?.OrgName}
					<p class="org-name">
						{whois.organisation?.['org-name'] ?? whois.organisation?.OrgName}
					</p>
				{/if}
				{#if whois.asn}
					<p class="org-asn">{whois.asn}</p>
				{/if}
				{#if address}
					<p class="address">{address}</p>
				{/if}
				<LinkWithIcon icon="mail" href="mailto:{email}">{email}</LinkWithIcon>
			</div>
			<OpenStreetMap bind:visible={ownerSectionHasMap} query={address} />
		</div>
	</AccordionItem>
	{#if geo}
		<AccordionItem id="{id}geo" name="geolocation" noPadding>
			<div class="map">
				<OpenStreetMap ll={geo.ll} />
			</div>
		</AccordionItem>
	{/if}
	{#if check}
		<AccordionItem id="{id}check" name="abuse check" open={!close} noPadding>
			<div
				class="abuse-check"
				class:two-columns={check.abuseConfidenceScore != 0}
			>
				{#if check.abuseConfidenceScore != 0}
					<div class="graphic">
						<PieChart percentage={check.abuseConfidenceScore / 100} />
					</div>
				{/if}
				<div class="details">
					<p>
						Data from <a href="https://abuseipdb.com/check/{check.ipAddress}"
							>AbuseIPDB</a
						>
					</p>
					<p>
						Confidence of Abuse score: {check.abuseConfidenceScore}% ({check.totalReports}
						reports on this IP in the last 60 days)
					</p>
				</div>
			</div>
		</AccordionItem>
		{#if check.hostnames?.length > 1}
			<AccordionItem id="{id}hostnames" name="known hostnames" open={!close}>
				<ul>
					{#each check.hostnames as hostname}
						<li>
							<a href="/lookup?q={encodeURIComponent(hostname)}">{hostname}</a>
						</li>
					{/each}
				</ul>
			</AccordionItem>
		{/if}
	{/if}
</Accordion>

<style lang="postcss">
	.org-name {
		font-size: 1.5rem;
		font-weight: 500;
		margin-bottom: 0em;
	}
	.org-asn {
		margin: 0.5em 0;
		font-size: 0.75rem;
	}
	.abuse-check {
		display: grid;
	}
	.abuse-check .graphic {
		padding: 0.5rem;
		display: grid;
		place-items: center;
	}
	.owner-map {
		display: grid;
	}
	.owner-map :global(.map-wrapper) {
		grid-row: 1;
	}
	.owner-map :global(.map-wrapper.loaded) {
		min-height: 15rem;
	}
	.details {
		align-self: center;
		margin: 1rem 0.5rem;
	}
	@container accordion-item (min-width: 28rem) {
		.two-columns {
			grid-template-columns: 1fr 1fr;
		}
		.abuse-check.two-columns {
			grid-template-columns: 8rem 1fr;
		}
		.owner-map :global(.map-wrapper) {
			grid-column: 2;
		}
	}
</style>