Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Explorer pages: Update UI + handle null data #111

Merged
merged 1 commit into from
Aug 24, 2024
Merged

Explorer pages: Update UI + handle null data #111

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 7 additions & 14 deletions components/DvpnMap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,6 @@ const DvpnMap = ({ nodes }) => {
offsetMap[key].push(node);
});

// Apply circular offsets
const finalOffsets = {};
for (const key in offsetMap) {
const nodesAtLocation = offsetMap[key];
Expand All @@ -66,17 +65,16 @@ const DvpnMap = ({ nodes }) => {
return null;
}

// Function to style each country based on the node count
const getCountryStyle = (feature) => {
const country = feature.properties.ISO_A2;
const count = nodes.filter(node => node.ipinfocountry === country).length;

return {
fillColor: count > 3 ? '#0e038c' :
count > 2 ? '#1500ff' :
count > 1 ? '#007bff' :
count > 0 ? '#7fd0f5' :
'#f7f7f7', // Default color for zero nodes
count > 2 ? '#1500ff' :
count > 1 ? '#007bff' :
count > 0 ? '#7fd0f5' :
'#f7f7f7',
weight: 2,
opacity: 1,
color: 'white',
Expand All @@ -85,7 +83,6 @@ const DvpnMap = ({ nodes }) => {
};
};

// Function to create a tooltip with the node count only for countries with nodes
const onEachCountry = (feature, layer) => {
const country = feature.properties.ISO_A2;
const count = nodes.filter(node => node.ipinfocountry === country).length;
Expand All @@ -107,16 +104,13 @@ const DvpnMap = ({ nodes }) => {
zoom={2}
minZoom={2}
maxZoom={10}
style={{ height: '100%', width: '100%', padding: '20px', borderRadius: '20px', border: '2px solid gray', boxShadow: '0 0px 25px black'}}
// className="leaflet-container"
// maxBounds={[[-90, -180], [90, 180]]}
// maxBoundsViscosity={1.0}
style={{ height: '100%', width: '100%', padding: '20px', borderRadius: '20px', border: '2px solid gray', boxShadow: '0 0px 25px black' }}
>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
/>
{/* <TileLayer
{/* <TileLayer
url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png" // CartoDB Dark theme URL
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors | Map tiles by <a href="https://carto.com/attributions">CartoDB</a>'
noWrap={true}
Expand All @@ -127,7 +121,6 @@ const DvpnMap = ({ nodes }) => {
noWrap={true}
/> */}

{/* Add GeoJSON layer for the choropleth */}
<GeoJSON
data={geojsonData}
style={getCountryStyle}
Expand All @@ -153,6 +146,7 @@ const DvpnMap = ({ nodes }) => {
);
})}
</MapContainer>

<style jsx>{`
@keyframes pulse {
0% {
Expand Down Expand Up @@ -205,4 +199,3 @@ const DvpnMap = ({ nodes }) => {
};

export default DvpnMap;

2 changes: 1 addition & 1 deletion components/DwifiMap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export default function DwifiMap() {
};

socket.onmessage = function (event) {
console.log('Received:', event.data);
console.log('Received:');
};

socket.onerror = function (event) {
Expand Down
21 changes: 19 additions & 2 deletions components/NodesData.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -413,7 +413,23 @@ const NodesData = () => {
</tr>
</thead>
<tbody>
{filteredNodesData.map((node) => (
{nodesdata.length === 0 ? (
<tr className="table-row" style={{ height: "60px" }}>
<td
colSpan="8"
style={{
textAlign: "center",
border: "solid 1px #FFFFFF66",
padding: "16px"
}}
>
<div className="flex justify-center items-center py-2 px-4">
No Nodes Available
</div>
</td>
</tr>
) : (
filteredNodesData.map((node) => (
<tr
key={node.id}
className={`table-row cursor-pointer ${
Expand Down Expand Up @@ -473,7 +489,8 @@ const NodesData = () => {
</td>
{/* <td style={{paddingTop:'20px'}}>{node.lastPinged}</td> */}
</tr>
))}
))
)}
</tbody>
</table>
</div>
Expand Down
4 changes: 2 additions & 2 deletions components/nodedataDwifi.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,7 +181,7 @@ const NodeDwifiStream = () => {
onClick={() => setShowSortOptions(!showSortOptions)}
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-12 rounded"
>
Sort By: {sortBy || 'Select'}
{sortBy || 'Sort By'}
</button>
{showSortOptions && (
<div className="absolute right-0 mt-2 w-48 bg-blue-500 rounded-md shadow-lg z-10">
Expand Down Expand Up @@ -240,7 +240,7 @@ const NodeDwifiStream = () => {
<th style={{ border: "solid 1px #FFFFFF66" }}>
<div className="flex gap-4 justify-center items-center pt-4 pb-4 px-4">
<img src="/dwifi4.png" className="w-10 h-10" />
<div>Price_per_min</div>
<div>Price/min</div>
</div>
</th>
<th style={{ border: "solid 1px #FFFFFF66" }}>
Expand Down
55 changes: 38 additions & 17 deletions pages/dwifi.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,43 +13,67 @@ const Dwifi = () => {
<div className="bg-black">
<div className="mx-auto py-20"
style={{
backgroundImage: 'radial-gradient(circle at left, rgba(86, 150, 255, 0.6) 4%, #0162FF80 10%, black 30%), url("/explorer2.png")',
backgroundImage: 'radial-gradient(circle at 0% 7%, rgba(86, 150, 255, 0.6) 4%, #0162FF80 10%, black 30%), url("/explorer2.png")',
backgroundSize: 'cover',
backgroundBlendMode: 'overlay',
}}
>
<div className="flex flex-col items-start justify-start lg:h-full mt-10 lg:ml-0 lg:mr-0 md:ml-0 md:mr-0 ml-4 mr-4 mb-36 lg:mb-0 px-20 ">
<div className="flex flex-col lg:flex-row items-start justify-between lg:h-full mt-10 lg:ml-0 lg:mr-0 md:ml-0 md:mr-0 ml-4 mr-4 mb-36 lg:mb-0 px-4 lg:px-20">
<div className="flex flex-col items-start justify-start">
<motion.h1
initial={{ y: 100, opacity: 0 }}
animate={{ y: 0, opacity: 1, transition: { duration: 1 } }}
className="text-6xl font-semibold text-gray-300 mb-8 w-3/5"
className="text-4xl md:text-5xl lg:text-6xl font-semibold text-gray-300 mb-8 lg:w-4/5"
>
Decentralized Connectivity
with Erebrus ÐWi-Fi
Decentralized Connectivity with Erebrus ÐWi-Fi
</motion.h1>
<motion.h1
initial={{ y: 100, opacity: 0 }}
animate={{ y: 0, opacity: 1, transition: { duration: 1 } }}
className="text-2xl text-white mb-8"
className="text-xl md:text-2xl text-white mb-8 w-full"
>
<p>
Secure and fast Wi-Fi Everywhere
</p>
<p>Secure and fast Wi-Fi Everywhere</p>
</motion.h1>
<motion.div
initial={{ y: 100, opacity: 0 }}
animate={{ y: 0, opacity: 1, transition: { duration: 1 } }}
className="text-black font-bold py-3 px-10 rounded-full bg-white text-lg"
// style={{backgroundImage: 'linear-gradient(#FFFFFF00, #0099FF)'}}
>
<Link href="https://discord.com/invite/5uaFhNpRF6" target="_blank"
rel="noopener noreferrer">
<Link href="https://discord.com/invite/5uaFhNpRF6" target="_blank" rel="noopener noreferrer">
Run Your Node
</Link>
</motion.div>
</div>

{/* Animated Image */}
<div className="hidden lg:block lg:w-1/3">
<img
src="/gradient-vpn-illustration.png"
alt="Decorative GIF"
className="w-full h-auto opacity-90 shadow-lg"
style={{
animation: 'scaleUpDown 2s infinite'
}}
/>
</div>

<style jsx>{`
@keyframes scaleUpDown {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
`}</style>

</div>
</div>
<div className="bg-[#20253A] pt-16 px-20">
<div className=" bg-gradient-to-b from-black to-[#20253A] lg:px-20 pt-16 px-20">
<div className="text-2xl font-semibold text-gray-300 mb-8 ">
Erebrus Decentralized Wi-Fi (ÐWi-Fi) Network Nodes Overview
</div>
Expand All @@ -58,10 +82,7 @@ const Dwifi = () => {
Discover the Erebrus decentralized Wi-Fi network with our interactive map. View real-time details about Wi-Fi hotspots, including their location, performance, and usage stats. This dashboard helps you find secure and fast Wi-Fi connections globally. </p>
</div>
</div>
<div className="map-page" style={{ height: '100vh', width: '100vw' }}>

<div className="map-controls" style={{ position: 'absolute', top: 10, left: 10, zIndex: 1000 }}>
</div>
<div className="map-page" style={{ height: '100vh'}}>
<div className="map-container" style={{ height: '100%', width: '100%' }}>
<DwifiMap />
</div>
Expand Down
111 changes: 72 additions & 39 deletions pages/explorer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useEffect, useState} from "react";
import React, { useEffect, useState } from "react";
import Link from "next/link";
import NodesData from "../components/NodesData";
import dynamic from 'next/dynamic';
Expand All @@ -13,75 +13,108 @@ const Explorer = () => {

useEffect(() => {
async function fetchNodes() {
const response = await fetch(`${EREBRUS_GATEWAY_URL}api/v1.0/nodes/all`);
const data = await response.json();
setNodes(data.payload);
try {
const response = await fetch(`${EREBRUS_GATEWAY_URL}api/v1.0/nodes/all`);
const data = await response.json();
if (data && Array.isArray(data.payload)) {
setNodes(data.payload);
} else {
setNodes([]);
console.warn("Received invalid data payload from API.");
}
} catch (error) {
console.error("Error fetching nodes data:", error);
setNodes([]);
}
}
fetchNodes();
}, []);

return (
<div className="bg-[#040819] ">
<div className="mx-auto py-20 "
style={{
backgroundImage: 'radial-gradient(circle at left, rgba(86, 150, 255, 0.6) 4%, #0162FF80 10%, black 30%), url("/explorer4.png") ',
backgroundSize: 'cover',
backgroundBlendMode: 'overlay',
}}
>
<div className="flex flex-col items-start justify-start lg:h-full mt-10 lg:ml-0 lg:mr-0 md:ml-0 md:mr-0 ml-4 mr-4 mb-36 lg:mb-0 px-20 ">
return (
<div className="bg-[#040819]">
<div className="mx-auto relative flex flex-col lg:flex-row items-center lg:items-start lg:justify-between p-4 lg:p-10"
style={{
backgroundImage: 'radial-gradient(circle at 0% 7%, rgba(86, 150, 255, 0.6) 4%, #0162FF80 10%, black 30%), url("/explorer4.png")',
backgroundSize: 'cover',
backgroundBlendMode: 'overlay',
}}
>
<div className="flex flex-col items-center lg:items-start lg:w-2/3 lg:pr-10 text-left">
<motion.h1
initial={{ y: 100, opacity: 0 }}
animate={{ y: 0, opacity: 1, transition: { duration: 1 } }}
className="text-6xl font-semibold text-gray-300 mb-8 w-3/5"
className="text-6xl font-semibold text-gray-300 mb-8 px-4"
>
Decentralized Access with
<br />
Erebrus ÐVPN
</motion.h1>
<motion.h1
initial={{ y: 100, opacity: 0 }}
animate={{ y: 0, opacity: 1, transition: { duration: 1 } }}
className="text-2xl text-white mb-8"
className="text-2xl text-white mb-8 px-4"
>
<p>
Unrestricted Uncensored Web Access
Unrestricted Uncensored Web Access
</p>
</motion.h1>
<motion.div
initial={{ y: 100, opacity: 0 }}
animate={{ y: 0, opacity: 1, transition: { duration: 1 } }}
className="text-black font-bold py-3 px-10 rounded-full bg-white text-lg"
// style={{backgroundImage: 'linear-gradient(#FFFFFF00, #0099FF)'}}
className="text-black font-bold py-3 px-10 rounded-full bg-white text-lg inline-block"
>
<Link href="https://discord.com/invite/5uaFhNpRF6" target="_blank"
rel="noopener noreferrer">
<Link href="https://discord.com/invite/5uaFhNpRF6" target="_blank" rel="noopener noreferrer">
Run Your Node
</Link>
</motion.div>
</div>

<div className="hidden lg:block lg:w-1/3 relative">
<img
src="/gradient-vpn-illustration.png"
alt="Decorative GIF"
className="w-full h-auto opacity-90 shadow-lg"
style={{
animation: 'scaleUpDown 2s infinite'
}}
/>
</div>
</div>
{/* <img src="/mapRegions.png"/> */}
<div className="bg-[#20253A] pt-16 px-20">
<div className="text-2xl font-semibold text-gray-300 mb-8 "
>
Erebrus Decentralized VPN (ÐVPN) Network Nodes Overview
</div>
<div className="text-white"
>
<p>
Explore the Erebrus decentralized VPN network with our interactive map. View detailed information on active nodes, including their location, network performance, and status. This map provides real-time insights into the global distribution and operation of our secure and private VPN infrastructure.
</p>
</div>

<div className="pt-16 px-4 lg:px-20 bg-gradient-to-b from-black to-[#20253A]">
<div className="text-2xl font-semibold text-gray-300 mb-8">
Erebrus Decentralized VPN (ÐVPN) Network Nodes Overview
</div>
<div className="map-page" style={{ height: '100vh', width: '100vw' }}>
<div className="map-container" style={{ height: '100%', width: '100%' }}>
<DvpnMap nodes={nodes} />
</div>
<div className="text-white">
<p>
Explore the Erebrus decentralized VPN network with our interactive map. View detailed information on active nodes, including their location, network performance, and status. This map provides real-time insights into the global distribution and operation of our secure and private VPN infrastructure.
</p>
</div>
</div>

<NodesData />
<div className="map-page" style={{ height: '100vh' }}>
<div className="map-container" style={{ height: '100%', width: '100%' }}>
<DvpnMap nodes={nodes} />
</div>
</div>
)

<NodesData />

<style jsx>{`
@keyframes scaleUpDown {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
`}</style>
</div>
);
}

export default Explorer;
Binary file added public/gradient-vpn-illustration.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.