change everything

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 (<svg
@@ -33,14 +22,21 @@ function ChevronUpIcon(props: JSX.IntrinsicElements['svg']) {
     </svg>) as JSX.Element;
 };
 
+
 export default function AccordionTest() {
-    const [stations] = createResource(stationsRequest, fetchStations);
+    const [stations, {setStationsRequest}] = useStationsContext();
 
     return (
         <Show when={stations()}>
             <h1>Find Stations</h1>
+            <button onClick={() => (setStationsRequest({
+                Latitude: 42.36,
+                Longitude: -71.05625,
+                Distance: 100,
+                CountLimit: 100,
+            }))}>test</button>
             <ErrorBoundary fallback={<p>pretty list broke</p>}>
-                <div class="w-full max-w-md p-2 mx-auto bg-black/90 rounded-2xl shadow-2xl">
+                <div class="w-full max-w-md p-2 mx-auto bg-black/90 rounded-2xl shadow-2xl max-h-screen overflow-scroll">
                     <Accordion class="space-y-2" defaultValue={stations()[0]} toggleable>
                         <For each={stations()} fallback={<div>Loading...</div>}>
                             {(station) => (<AccordionItem value={station}>

lightning/src/components/BadassMap.tsx

@@ -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 (<MapGL
-        mapLib={maplibre}
-        options={{
-            container: 'solid-map-gl will override me',
-            style: StyleJson,
-            maxPitch: 85,
-            antialias: true,
-            renderWorldCopies: false,
-        } as MapOptions}
-        viewport={viewport()}
-        onViewportChange={(evt: Viewport) => setViewport(evt)}
-        transitionType="flyTo"
-    >
-
-        <MapScatLayer />
-        <MapArcLayer data={arcData()}/>
-        <MapControls />
-
-    </MapGL >) as JSX.Element;
-};

lightning/src/components/MapArcLayer.tsx

@@ -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 (<Layer customLayer={
-        new MapboxLayer({
-            id: 'deckgl-arc',
-            type: ArcLayer,
-            data: props.data,
-            getSourcePosition: (d: any) => d.source,
-            getTargetPosition: (d: any) => d.target,
-            getSourceColor: [200, 0, 0],
-            getTargetColor: [0, 230, 0],
-            getWidth: 6,
-        } as any)} />) as JSX.Element;
-};

lightning/src/components/MapControls.tsx

@@ -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 (<>
-
-        <Control
-            type="navigation"
-            position="top-right"
-            options={{
-                showCompass: true,
-                showZoom: true,
-                visualizePitch: true,
-            } as NavigationOptions}
-        />
-
-        <Control
-            type="geolocate"
-            position="top-right"
-            options={{
-                positionOptions: {
-                    enableHighAccuracy: false,
-                    timeout: 6000,
-                    maximumAge: 0,
-                },
-                fitBoundsOptions: { maxZoom: 15 },
-                trackUserLocation: false,
-                showAccuracyCircle: false,
-                showUserLocation: true,
-            } as GeolocateOptions}
-        />
-
-        <Control
-            type="attribution"
-            position="bottom-right"
-            options={{
-                compact: false,
-                customAttribution: 'OpenStreetMap',
-            } as AttributionOptions}
-        />
-
-        <Control
-            type="scale"
-            position="bottom-left"
-            options={{
-                maxWidth: 100,
-                unit: 'imperial',
-            } as ScaleOptions}
-        />
-
-    </>) as JSX.Element;
-};

lightning/src/components/MapScatLayer.tsx

@@ -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 (<Layer customLayer={
-        new MapboxLayer({
-            id: 'deckgl-scatterplot',
-            type: ScatterplotLayer,
-            data: scatData(),
-            getPosition: (d: any) => d.coordinates,
-            getRadius: 30,
-            getFillColor: [255, 140, 0],
-            getLineColor: [0, 0, 0,],
-        } as any)} />) as JSX.Element;
-};

lightning/src/components/MapScenegraphLayer.tsx

@@ -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 (<Layer customLayer={new MapboxLayer({
-        id: 'deckgl-scenegraph',
-        type: ScenegraphLayer,
-        data: props.data,
-        pickable: true,
-        scenegraph: 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BoxAnimated/glTF-Binary/BoxAnimated.glb',
-        getPosition: d => d.coordinates,
-        getOrientation: d => [0, Math.random() * 180, 90],
-        _animations: {
-            '*': { speed: 5 }
-        },
-        sizeScale: 500,
-        _lighting: 'pbr',
-    } as any)} />) as JSX.Element;
-};

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<StationRequest>(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 (
+        <StationsContext.Provider value={[stations, { setStationsRequest }]}>
+            {props.children}
+        </StationsContext.Provider>
+    );
+};
+
+
+export const useStationsContext = () => useContext(StationsContext);

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<Viewport>();
+
+    return (
+        <MapGL
+            mapLib={maplibre}
+            options={{
+                container: 'solid-map-gl will override me',
+                style: StyleJson,
+                maxPitch: 85,
+                antialias: true,
+                renderWorldCopies: false,
+            } as MapOptions}
+            viewport={viewport()}
+            onViewportChange={(evt: Viewport) => setViewport(evt)}
+            transitionType="flyTo"
+        >
+
+            <MapScatLayer />
+            <MapArcLayer />
+            <MapControls />
+
+        </MapGL >
+    ) as JSX.Element;
+};

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 (
+        <Layer customLayer={
+            new MapboxLayer({
+                id: 'deckgl-arc',
+                type: ArcLayer,
+                data: props.data,
+                getSourcePosition: (d: any) => d.source,
+                getTargetPosition: (d: any) => d.target,
+                getSourceColor: [200, 0, 0],
+                getTargetColor: [0, 230, 0],
+                getWidth: 6,
+            } as any)} />
+    ) as JSX.Element;
+};

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 (
+        <>
+
+            <Control
+                type="navigation"
+                position="top-right"
+                options={{
+                    showCompass: true,
+                    showZoom: true,
+                    visualizePitch: true,
+                } as NavigationOptions}
+            />
+
+            <Control
+                type="geolocate"
+                position="top-right"
+                options={{
+                    positionOptions: {
+                        enableHighAccuracy: false,
+                        timeout: 6000,
+                        maximumAge: 0,
+                    },
+                    fitBoundsOptions: { maxZoom: 15 },
+                    trackUserLocation: false,
+                    showAccuracyCircle: false,
+                    showUserLocation: true,
+                } as GeolocateOptions}
+            />
+
+            <Control
+                type="attribution"
+                position="bottom-right"
+                options={{
+                    compact: false,
+                    customAttribution: 'OpenStreetMap',
+                } as AttributionOptions}
+            />
+
+            <Control
+                type="scale"
+                position="bottom-left"
+                options={{
+                    maxWidth: 100,
+                    unit: 'imperial',
+                } as ScaleOptions}
+            />
+
+        </>
+    ) as JSX.Element;
+};

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 (
+        <Show when={stations()}>
+            <Layer customLayer={
+                new MapboxLayer({
+                    id: 'deckgl-scatterplot',
+                    type: ScatterplotLayer,
+                    data: pls(),
+                    getPosition: (d: any) => d.coordinates,
+                    getRadius: 90,
+                    getFillColor: [255, 140, 0],
+                    getLineColor: [0, 0, 0,],
+                } as any)} />
+        </Show>
+    ) as JSX.Element;
+};

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 (
+        <Layer customLayer={new MapboxLayer({
+            id: 'deckgl-scenegraph',
+            type: ScenegraphLayer,
+            data: props.data,
+            pickable: true,
+            scenegraph: 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BoxAnimated/glTF-Binary/BoxAnimated.glb',
+            getPosition: d => d.coordinates,
+            getOrientation: d => [0, Math.random() * 180, 90],
+            _animations: {
+                '*': { speed: 5 }
+            },
+            sizeScale: 500,
+            _lighting: 'pbr',
+        } as any)} />
+    ) as JSX.Element;
+};

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[];

lightning/src/root.tsx

@@ -1,65 +1,16 @@
 // @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<ScatData[]>([
-    { 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<ArcData[]>([
-    { 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<Viewport>();
 
 
 export default function Root() {
-    return (<Html lang="en">
+    return (
+        <Html lang="en">
             <Head>
                 <Title>Ride the Lightning</Title>
                 <Meta charset="utf-8" />
@@ -68,15 +19,19 @@ export default function Root() {
 
             <Body>
                 <ErrorBoundary>
+                    <StationsProvider>
                         <A href="/">Map</A>
+                        <A href="/stations">Stations</A>
                         <A href="/about">About</A>
                         <Routes>
                             <FileRoutes />
                         </Routes>
                         <BadassMap />
+                    </StationsProvider>
                 </ErrorBoundary>
                 <Scripts />
             </Body>
 
-    </Html>) as JSX.Element;
+        </Html>
+    ) as JSX.Element;
 };

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 (<>
         <Title>Ride the Lightning</Title>
-        <Suspense>
-            <AccordionTest />
-        </Suspense>
     </>) as JSX.Element;
 };

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 (<>
+        <Title>Ride the Lightning</Title>
+        <Suspense>
+            <AccordionTest />
+        </Suspense>
+    </>) as JSX.Element;
+};

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], },
+};