From c90c623dc0ec7d68aa07a4f2d9ebdb6edc3b58fc Mon Sep 17 00:00:00 2001 From: Adam <24621027+adoyle0@users.noreply.github.com> Date: Mon, 24 Apr 2023 10:49:44 -0400 Subject: [PATCH] change everything --- lightning/src/components/AccordionTest.tsx | 28 +++--- lightning/src/components/BadassMap.tsx | 38 -------- lightning/src/components/MapArcLayer.tsx | 20 ---- lightning/src/components/MapControls.tsx | 60 ------------ lightning/src/components/MapScatLayer.tsx | 21 ---- .../src/components/MapScenegraphLayer.tsx | 23 ----- lightning/src/components/StationsContext.tsx | 74 ++++++++++++++ lightning/src/components/map/BadassMap.tsx | 42 ++++++++ lightning/src/components/map/MapArcLayer.tsx | 26 +++++ lightning/src/components/map/MapControls.tsx | 57 +++++++++++ lightning/src/components/map/MapScatLayer.tsx | 45 +++++++++ .../src/components/map/MapScenegraphLayer.tsx | 25 +++++ lightning/src/lib/fetchStations.tsx | 4 - lightning/src/root.tsx | 97 +++++-------------- lightning/src/routes/index.tsx | 7 +- lightning/src/routes/stations.tsx | 15 +++ lightning/src/scrap.tsx | 9 ++ 17 files changed, 332 insertions(+), 259 deletions(-) delete mode 100644 lightning/src/components/BadassMap.tsx delete mode 100644 lightning/src/components/MapArcLayer.tsx delete mode 100644 lightning/src/components/MapControls.tsx delete mode 100644 lightning/src/components/MapScatLayer.tsx delete mode 100644 lightning/src/components/MapScenegraphLayer.tsx create mode 100644 lightning/src/components/StationsContext.tsx create mode 100644 lightning/src/components/map/BadassMap.tsx create mode 100644 lightning/src/components/map/MapArcLayer.tsx create mode 100644 lightning/src/components/map/MapControls.tsx create mode 100644 lightning/src/components/map/MapScatLayer.tsx create mode 100644 lightning/src/components/map/MapScenegraphLayer.tsx create mode 100644 lightning/src/routes/stations.tsx create mode 100644 lightning/src/scrap.tsx diff --git a/lightning/src/components/AccordionTest.tsx b/lightning/src/components/AccordionTest.tsx index 25d7be0..9ddc918 100644 --- a/lightning/src/components/AccordionTest.tsx +++ b/lightning/src/components/AccordionTest.tsx @@ -1,20 +1,9 @@ -import { - Accordion, - AccordionButton, - AccordionHeader, - AccordionItem, - AccordionPanel, -} from 'solid-headless'; -import { - createResource, - ErrorBoundary, - For, - Show, -} from 'solid-js'; +import { Accordion, AccordionButton, AccordionHeader, AccordionItem, AccordionPanel, } from 'solid-headless'; +import { ErrorBoundary, For, Show, } from 'solid-js'; import type { JSX } from 'solid-js'; -import { stationsRequest, fetchStations } from '~/lib/fetchStations'; +import { useStationsContext } from './StationsContext'; function ChevronUpIcon(props: JSX.IntrinsicElements['svg']) { return () as JSX.Element; }; + export default function AccordionTest() { - const [stations] = createResource(stationsRequest, fetchStations); + const [stations, {setStationsRequest}] = useStationsContext(); return (

Find Stations

+ pretty list broke

}> -
+
Loading...
}> {(station) => ( diff --git a/lightning/src/components/BadassMap.tsx b/lightning/src/components/BadassMap.tsx deleted file mode 100644 index 52c2ce6..0000000 --- a/lightning/src/components/BadassMap.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import MapGL, { Viewport } from 'solid-map-gl'; -import * as maplibre from 'maplibre-gl'; -import MapControls from './MapControls'; - -import type { JSX } from 'solid-js'; -import type { MapOptions } from 'maplibre-gl'; - -// deck.gl -import { unstable_clientOnly } from 'solid-start'; -const MapScatLayer = unstable_clientOnly(() => import('~/components/MapScatLayer')); -const MapArcLayer = unstable_clientOnly(() => import('~/components/MapArcLayer')); - -import { arcData, scatData, viewport, setViewport } from '~/root'; -import 'maplibre-gl/dist/maplibre-gl.css'; -import StyleJson from '~/style/style.json'; - - -export default function BadassMap() { - return ( setViewport(evt)} - transitionType="flyTo" - > - - - - - - ) as JSX.Element; -}; diff --git a/lightning/src/components/MapArcLayer.tsx b/lightning/src/components/MapArcLayer.tsx deleted file mode 100644 index 6e7a625..0000000 --- a/lightning/src/components/MapArcLayer.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { MapboxLayer } from '@deck.gl/mapbox/typed'; -import { ArcLayer } from '@deck.gl/layers/typed'; -import { Layer } from 'solid-map-gl'; - -import type { JSX } from 'solid-js'; - - -export default function MapArcLayer(props: any) { - return ( d.source, - getTargetPosition: (d: any) => d.target, - getSourceColor: [200, 0, 0], - getTargetColor: [0, 230, 0], - getWidth: 6, - } as any)} />) as JSX.Element; -}; diff --git a/lightning/src/components/MapControls.tsx b/lightning/src/components/MapControls.tsx deleted file mode 100644 index 70e1859..0000000 --- a/lightning/src/components/MapControls.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import { Control } from 'solid-map-gl'; - -import type { JSX } from 'solid-js'; -import type { - NavigationOptions, - GeolocateOptions, - AttributionOptions, - ScaleOptions, -} from 'maplibre-gl'; - - -export default function MapControls() { - return (<> - - - - - - - - - - ) as JSX.Element; -}; diff --git a/lightning/src/components/MapScatLayer.tsx b/lightning/src/components/MapScatLayer.tsx deleted file mode 100644 index 9568ff0..0000000 --- a/lightning/src/components/MapScatLayer.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { ScatterplotLayer } from '@deck.gl/layers/typed'; -import { MapboxLayer } from '@deck.gl/mapbox/typed'; -import { Layer } from 'solid-map-gl'; - -import type { JSX } from 'solid-js'; - -import { scatData } from '~/root'; - - -export default function MapScatLayer(props: any) { - return ( d.coordinates, - getRadius: 30, - getFillColor: [255, 140, 0], - getLineColor: [0, 0, 0,], - } as any)} />) as JSX.Element; -}; diff --git a/lightning/src/components/MapScenegraphLayer.tsx b/lightning/src/components/MapScenegraphLayer.tsx deleted file mode 100644 index dc40425..0000000 --- a/lightning/src/components/MapScenegraphLayer.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { ScenegraphLayer } from '@deck.gl/mesh-layers/typed'; -import { MapboxLayer } from '@deck.gl/mapbox/typed'; -import { Layer } from 'solid-map-gl'; - -import type { JSX } from 'solid-js'; - - -export default function MapScenegraphLayer(props: any) { - return ( d.coordinates, - getOrientation: d => [0, Math.random() * 180, 90], - _animations: { - '*': { speed: 5 } - }, - sizeScale: 500, - _lighting: 'pbr', - } as any)} />) as JSX.Element; -}; diff --git a/lightning/src/components/StationsContext.tsx b/lightning/src/components/StationsContext.tsx new file mode 100644 index 0000000..b928fca --- /dev/null +++ b/lightning/src/components/StationsContext.tsx @@ -0,0 +1,74 @@ +import { createSignal, createContext, createResource, useContext } from "solid-js"; + + +type ChargingStation = { + Name: string + PhoneNumer: string + IntersectionDirections: string + AccessTime: string + Connectors: string[] + Network: string + Pricing: string + RestrictedAccess: boolean + CntLevel2Chargers: number + CntLevel3Chargers: number +}; + +type Location = { + StreetAddress: string + City: string + State: string + Country: string + Zip: string + GeocodeStatus: string + Coordinates: string + CoordinateString: string + Stations: ChargingStation[] +}; + +type StationRequest = { + Latitude: number + Longitude: number + Distance: number + CountLimit: number +}; + +type StationResponse = { + Dist: number + Loc: Location +}; + +export const StationsContext = createContext(); + + +export function StationsProvider(props: any) { + const TEST_PACKET: StationRequest = { + Latitude: 42.36, + Longitude: -71.05625, + Distance: 10, + CountLimit: 10, + }; + + const [stationsRequest, setStationsRequest] = createSignal(TEST_PACKET) + + async function fetchStations() { + const response = await fetch('https://kevinfwu.com/getnearest', { + method: 'POST', + cache: 'default', + body: JSON.stringify(stationsRequest()), + headers: { 'Content-Type': 'application/json' } + }); + return await response.json() as StationResponse[]; + }; + + const [stations] = createResource(stationsRequest, fetchStations); + + return ( + + {props.children} + + ); +}; + + +export const useStationsContext = () => useContext(StationsContext); diff --git a/lightning/src/components/map/BadassMap.tsx b/lightning/src/components/map/BadassMap.tsx new file mode 100644 index 0000000..8989489 --- /dev/null +++ b/lightning/src/components/map/BadassMap.tsx @@ -0,0 +1,42 @@ +import MapGL, { Viewport } from 'solid-map-gl'; +import * as maplibre from 'maplibre-gl'; +import MapControls from './MapControls'; + +import { createSignal } from 'solid-js'; + +import type { MapOptions } from 'maplibre-gl'; +import type { JSX } from 'solid-js'; + +// deck.gl +import { unstable_clientOnly } from 'solid-start'; +const MapScatLayer = unstable_clientOnly(() => import('~/components/map/MapScatLayer')); +const MapArcLayer = unstable_clientOnly(() => import('~/components/map/MapArcLayer')); + +import 'maplibre-gl/dist/maplibre-gl.css'; +import StyleJson from '~/style/style.json'; + +export default function BadassMap(props: any) { + const [viewport, setViewport] = createSignal(); + + return ( + setViewport(evt)} + transitionType="flyTo" + > + + + + + + + ) as JSX.Element; +}; diff --git a/lightning/src/components/map/MapArcLayer.tsx b/lightning/src/components/map/MapArcLayer.tsx new file mode 100644 index 0000000..87454b9 --- /dev/null +++ b/lightning/src/components/map/MapArcLayer.tsx @@ -0,0 +1,26 @@ +import { MapboxLayer } from '@deck.gl/mapbox/typed'; +import { ArcLayer } from '@deck.gl/layers/typed'; +import { Layer } from 'solid-map-gl'; + +import type { JSX } from 'solid-js'; + +type ArcData = { + source: number[], + target: number[] +} + +export default function MapArcLayer(props: any) { + return ( + d.source, + getTargetPosition: (d: any) => d.target, + getSourceColor: [200, 0, 0], + getTargetColor: [0, 230, 0], + getWidth: 6, + } as any)} /> + ) as JSX.Element; +}; diff --git a/lightning/src/components/map/MapControls.tsx b/lightning/src/components/map/MapControls.tsx new file mode 100644 index 0000000..40daa96 --- /dev/null +++ b/lightning/src/components/map/MapControls.tsx @@ -0,0 +1,57 @@ +import { Control } from 'solid-map-gl'; + +import type { JSX } from 'solid-js'; +import type { NavigationOptions, GeolocateOptions, AttributionOptions, ScaleOptions, } from 'maplibre-gl'; + + +export default function MapControls() { + return ( + <> + + + + + + + + + + + ) as JSX.Element; +}; diff --git a/lightning/src/components/map/MapScatLayer.tsx b/lightning/src/components/map/MapScatLayer.tsx new file mode 100644 index 0000000..2df08f7 --- /dev/null +++ b/lightning/src/components/map/MapScatLayer.tsx @@ -0,0 +1,45 @@ +import { ScatterplotLayer } from '@deck.gl/layers/typed'; +import { MapboxLayer } from '@deck.gl/mapbox/typed'; +import { Layer } from 'solid-map-gl'; +import { createEffect, createMemo, createSignal, Show } from 'solid-js'; + +import type { JSX } from 'solid-js'; + +import { StationsContext, useStationsContext } from '~/components/StationsContext'; + +type ScatData = { + coordinates: number[] +} + + +export default function MapScatLayer(props: any) { + const [stations] = useStationsContext(); + + const [scats, setScats] = createSignal([]); + + function getCoords(stations) { + let buf: ScatData[] = []; + for (const station of stations()) { + buf.push({ coordinates: [station.Loc.Coordinates[1], station.Loc.Coordinates[0]] }) + }; + console.log(buf) + return buf; + }; + const pls = createMemo(() => setScats(getCoords(stations))); + console.log(scats()); + + return ( + + d.coordinates, + getRadius: 90, + getFillColor: [255, 140, 0], + getLineColor: [0, 0, 0,], + } as any)} /> + + ) as JSX.Element; +}; diff --git a/lightning/src/components/map/MapScenegraphLayer.tsx b/lightning/src/components/map/MapScenegraphLayer.tsx new file mode 100644 index 0000000..afba419 --- /dev/null +++ b/lightning/src/components/map/MapScenegraphLayer.tsx @@ -0,0 +1,25 @@ +import { ScenegraphLayer } from '@deck.gl/mesh-layers/typed'; +import { MapboxLayer } from '@deck.gl/mapbox/typed'; +import { Layer } from 'solid-map-gl'; + +import type { JSX } from 'solid-js'; + + +export default function MapScenegraphLayer(props: any) { + return ( + d.coordinates, + getOrientation: d => [0, Math.random() * 180, 90], + _animations: { + '*': { speed: 5 } + }, + sizeScale: 500, + _lighting: 'pbr', + } as any)} /> + ) as JSX.Element; +}; diff --git a/lightning/src/lib/fetchStations.tsx b/lightning/src/lib/fetchStations.tsx index d9f6ddc..c721670 100644 --- a/lightning/src/lib/fetchStations.tsx +++ b/lightning/src/lib/fetchStations.tsx @@ -56,15 +56,11 @@ export async function fetchStations() { headers: { 'Content-Type': 'application/json' } }); let resJson = await response.json(); - console.log('Response JSON: ', resJson); let buf = []; for (let station of resJson) { buf.push({coordinates: [station.Loc.Coordinates[1], station.Loc.Coordinates[0]]}) }; - console.log('Scat before: ', scatData()); - console.log('Buffer: ', buf); setScatData(buf); - console.log('Scat after: ', scatData()); //console.log(getCoords(resJson)); return resJson as StationResponse[]; diff --git a/lightning/src/root.tsx b/lightning/src/root.tsx index ae8f082..a0b67ee 100644 --- a/lightning/src/root.tsx +++ b/lightning/src/root.tsx @@ -1,82 +1,37 @@ // @refresh reload -import { - A, - Body, - ErrorBoundary, - FileRoutes, - Head, - Html, - Meta, - Routes, - Scripts, - Title -} from "solid-start"; -import { createSignal, } from "solid-js"; +import { A, Body, ErrorBoundary, FileRoutes, Head, Html, Meta, Routes, Scripts, Title } from "solid-start"; import "./root.css"; -import BadassMap from './components/BadassMap'; +import BadassMap from './components/map/BadassMap'; +import { StationsProvider } from "./components/StationsContext"; -import type { Viewport } from "solid-map-gl"; import type { JSX } from "solid-js"; -import { createStore } from "solid-js/store"; - - -type ArcData = { - source: number[], - target: number[] -} - -const TEST = { - FAN: { LngLatLike: { lng: -71.05625, lat: 42.36, }, coords: [-71.05625, 42.36] }, - GDT: { LngLatLike: { lng: -71.056922, lat: 42.360919 }, coords: [-71.056922, 42.360919], }, - BBC: { LngLatLike: { lng: -71.103, lat: 42.3145 }, coords: [-71.103, 42.3145], }, - GAR: { LngLatLike: { lng: -71.062228, lat: 42.366303 }, coords: [-71.062228, 42.366303], }, - PRH: { LngLatLike: { lng: -71.053678, lat: 42.363722 }, coords: [-71.053678, 42.363722], }, - NSE: { LngLatLike: { lng: -74.0112660425065, lat: 40.70689167578798 }, coords: [-74.0112660425065, 40.70689167578798], }, -}; - -type ScatData = { - coordinates: number[] -} -export const [scatData, setScatData] = createSignal([ - { coordinates: TEST.FAN.coords }, - { coordinates: TEST.GDT.coords }, - { coordinates: TEST.BBC.coords }, - { coordinates: TEST.GAR.coords }, - { coordinates: TEST.PRH.coords }, - { coordinates: TEST.NSE.coords }, -]); - -export const [arcData, setArcData] = createSignal([ - { source: TEST.FAN.coords, target: TEST.GDT.coords }, - { source: TEST.FAN.coords, target: TEST.BBC.coords }, - { source: TEST.FAN.coords, target: TEST.GAR.coords }, - { source: TEST.FAN.coords, target: TEST.PRH.coords }, -]); - -export const [USER_LOC] = createSignal(TEST.FAN.LngLatLike); -export const [viewport, setViewport] = createSignal(); export default function Root() { - return ( - - Ride the Lightning - - - + return ( + + + Ride the Lightning + + + - - - Map - About - - - - - - - + + + + Map + Stations + About + + + + + + + + - ) as JSX.Element; + + ) as JSX.Element; }; diff --git a/lightning/src/routes/index.tsx b/lightning/src/routes/index.tsx index 39b5842..69ea31c 100644 --- a/lightning/src/routes/index.tsx +++ b/lightning/src/routes/index.tsx @@ -1,15 +1,10 @@ import { Title, } from 'solid-start'; -import { Suspense } from 'solid-js'; - -import AccordionTest from '~/components/AccordionTest'; import type { JSX } from 'solid-js'; + export default function Home() { return (<> Ride the Lightning - - - ) as JSX.Element; }; diff --git a/lightning/src/routes/stations.tsx b/lightning/src/routes/stations.tsx new file mode 100644 index 0000000..8715b3b --- /dev/null +++ b/lightning/src/routes/stations.tsx @@ -0,0 +1,15 @@ +import { Title, } from 'solid-start'; +import { Suspense } from 'solid-js'; + +import AccordionTest from '~/components/AccordionTest'; + +import type { JSX } from 'solid-js'; + +export default function Stations() { + return (<> + Ride the Lightning + + + + ) as JSX.Element; +}; diff --git a/lightning/src/scrap.tsx b/lightning/src/scrap.tsx new file mode 100644 index 0000000..b30dea0 --- /dev/null +++ b/lightning/src/scrap.tsx @@ -0,0 +1,9 @@ + +const TEST = { + FAN: { LngLatLike: { lng: -71.05625, lat: 42.36, }, coords: [-71.05625, 42.36] }, + GDT: { LngLatLike: { lng: -71.056922, lat: 42.360919 }, coords: [-71.056922, 42.360919], }, + BBC: { LngLatLike: { lng: -71.103, lat: 42.3145 }, coords: [-71.103, 42.3145], }, + GAR: { LngLatLike: { lng: -71.062228, lat: 42.366303 }, coords: [-71.062228, 42.366303], }, + PRH: { LngLatLike: { lng: -71.053678, lat: 42.363722 }, coords: [-71.053678, 42.363722], }, + NSE: { LngLatLike: { lng: -74.0112660425065, lat: 40.70689167578798 }, coords: [-74.0112660425065, 40.70689167578798], }, +};