Dev

components/Cards/button.js

@@ -0,0 +1,26 @@
+import React, { useState, useContext } from "react";
+import { LayerContext } from "../../context";
+import { BarchartComponent } from "../Graphs/barchart";
+import { DataCardComponent } from "../Graphs/dataCard";
+import { Dropdown, Breadcrumb, HiHome } from "flowbite-react";
+import { MdHelp, MdFormatPaint, MdPlaylistAdd } from "react-icons/md";
+
+function ButtonsComponent() {
+  const { state, dispatch } = useContext(LayerContext);
+  return (
+    <div className="w-64 p-2 flex flex-col gap-2 overflow-y-auto bg-yellow-100 shadow-xl">
+      <div className="block h-48 border-b bg-red-100 text-xs shadow-x2">
+        <BarchartComponent className="w-60 p-2 flex flex-col gap-2" />
+      </div>
+      <div className="block h-48 border-b bg-red-100 text-xs shadow-x2">
+        <DataCardComponent className="w-60 p-2 flex flex-col gap-2"/>
+      </div>
+
+      <div className="block h-48 border-b pt-1 bg-red-100 text-xs shadow-x2"></div>
+      <div className="block h-48 border-b pt-1 bg-red-100 text-xs shadow-x2"></div>
+      <div className="block h-48 border-b pt-1 bg-red-100 text-xs shadow-x2"></div>
+    </div>
+  );
+}
+
+export default ButtonsComponent;

components/Cards/dummymap.js

@@ -0,0 +1,25 @@
+import React, { useState, useContext } from "react";
+import { LayerContext } from "../../context";
+
+
+function DummyMapComponent() {
+  const { state, dispatch } = useContext(LayerContext);
+  let layers = state.layers;
+
+  function handleLayerSwitch (event) {
+    console.log(event.target.value);
+  };
+
+  return (
+    <div className="h-3/4 flex-shrink bg-slate-200">
+        {layers.map((layer) => (
+          <div key={layer.id} className="label">
+            <span className="label-text">{layer.title} is {JSON.stringify(layer.visible)} and {layer.opacity}%</span>   
+          </div>
+        ))}
+
+    </div>
+  );
+}
+
+export default DummyMapComponent;

components/Cards/footer.js

@@ -0,0 +1,14 @@
+import React, { useState, useContext } from "react";
+import { layers } from "../Data/layerLists";
+
+function FooterComponent() {
+  // const { state, dispatch } = useContext(Context);
+
+  return (
+    <div className="p-4 justify-items-stretch col-span-4 bg-base-100 shadow-xl">
+        foot
+    </div>
+  );
+}
+
+export default FooterComponent;

components/Cards/selection.js

@@ -0,0 +1,107 @@
+import React, { useState, useContext } from "react";
+import { LayerContext } from "../../context";
+import Draggable from 'react-draggable';
+import { MdDragHandle, MdFormatPaint, MdPlaylistAdd } from "react-icons/md";
+
+function SelectionComponent() {
+  const { state, dispatch } = useContext(LayerContext);
+  let layers = state.layers;
+
+  function handleLayerSwitch(event) {
+    dispatch({
+      type: "TOGGLE_VISIBILITY",
+      payload: event.target.value,
+    });
+  }
+
+  const handleOpacity = (event, layerid) => {
+    // let payload = {
+    //   name: layername,
+    //   opacity: event.target.value
+    // }
+    // console.log("the whole things", payload);
+    // console.log("the layer", layername);
+    dispatch({
+      type: "TOGGLE_OPACITY",
+      payload: {
+        id: layerid,
+        opacity: event.target.value
+      },
+    });
+  }
+
+  return (
+    <div className="w-64 bg-purple-100 shadow-xl">
+      <div className="flex flex-row justify-between items-center px-4 mt-2 mb-2 py-2">
+        <h1 className="font-semibold text-xl">List of Layers</h1>
+        <div className="flex-none w-4 h-4">
+          <div className="rounded-full bg-black-400 hover:bg-blue-200 w-8 h-8 flex items-center justify-center cursor-pointer"> 
+            <MdPlaylistAdd className="w-6 h-6"/>
+          </div>
+        </div>
+      </div>
+      <div className="flex flex-col overflow-y-auto p-2">
+        {/* {layers.map((layer) => (
+            <div key={layer.id}>
+              <label className="label cursor-pointer justify-start">
+                <input
+                  type="checkbox"
+                  value={layer.name}
+                  onChange={handleLayerSwitch}
+                  checked={layer.visible}
+                  className="checkbox checkbox-primary"
+                />
+                <span className="label-text p-2">
+                  {layer.name} is {JSON.stringify(layer.visible)}
+                </span>
+              </label>
+            </div>
+          ))} */}
+        {layers.map((layer) => (
+          // <Draggable
+          //   axis="y"
+          //   handle=".handle"
+          //   grid={[25, 53]}
+          // >
+          <div key={layer.id} className="block border-b px-1">
+            <div className="border-l-2 border-transparent hover:bg-blue-200 space-y-2">
+              <div className="flex flex-row items-center space-x-2">
+                <div className="bg-red-250">
+                  <input
+                    type="checkbox"
+                    value={layer.id}
+                    onChange={handleLayerSwitch}
+                    checked={layer.visible}
+                    className="checkbox checkbox-primary"
+                  />
+                </div>
+                <div className="flex-grow text-sm truncate">{layer.title}</div>
+                <div className="cursor-pointer">
+                  <MdFormatPaint />
+                </div>
+                <div className="handle cursor-grab focus:cursor-grabbing">
+                  <MdDragHandle />
+                </div>
+              </div>
+
+              <div className="flex flex-row items-center space-x-1">
+                <input
+                  type="range"
+                  min="0"
+                  max="100"
+                  value={layer.opacity}
+                  onChange={(e) => handleOpacity(e, layer.id)}
+                  className="w-full cursor-pointer"
+                />
+                <span className="text-xs"> {layer.opacity}%</span>
+              </div>
+            </div>
+          </div>
+          // </Draggable>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default SelectionComponent;

components/Container/index.tsx → components/Container/Container.tsx

@@ -5,15 +5,18 @@ type ContainerProps = {
   children: React.ReactNode;
 };
 
-export default function Container({ title, children }: ContainerProps) {
+export function Container({ title, children }: ContainerProps) {
   return (
-    <>
+    <div className="h-screen w-screen">
       <Head>
         <title>{title}</title>
         <meta name="description" content="Next WebGIS" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
       {children}
-    </>
+    </div>
   );
-}
+}
+
+
+export default Container;

components/Container/index.module.css

@@ -0,0 +1,3 @@
+.dashboardContainer {
+    @apply container p-8 bg-amber-300 h-screen w-screen 
+}

components/DashboardLayout/DashboardLayout.js

@@ -1,15 +1,32 @@
-import { useState } from "react";
-import Sidebar from "../Sidebar/Sidebar";
+import { useState, useEffect, useReducer, createContext } from "react";
+import { MapProvider } from "react-map-gl";
 
-export default function DashboardLayout() {
-  const [isOpened, setOpened] = useState(false);
-  const toggleDrawer = () => {
-    setOpened((prev) => !prev);
-  };
+import MaplibreComponent from "../maps/maplibre";
+import SelectionComponent from "../Cards/selection";
+import ButtonsComponent from "../Cards/button";
+import DummyMapComponent from "../Cards/dummymap";
+import FooterComponent from "../Cards/footer";
+import SidebarComponent from "../Sidebar/sidebar";
+
+export function DashboardLayout() {
+  const [selectedLayers, setSelectedLayers] = useState([]);
+  const [cardData, setCardData] = useState("Select to Display");
 
   return (
-    <div className="container mx-auto">
-      <Sidebar isOpened={isOpened} />
-    </div>
+    <>
+      <MapProvider>
+        <div className="h-screen flex flex-row justify-start p-1 gap-1">
+          <ButtonsComponent />
+          <div className="flex-auto w-3/5 flex flex-col bg-blue-200">
+            <MaplibreComponent />
+            {/* <div className="flex-auto resize-y"/> */}
+          </div>
+          <SelectionComponent />
+          <SidebarComponent />
+        </div>
+      </MapProvider>
+    </>
   );
 }
+
+export default DashboardLayout;

components/Data/layerLists.js

@@ -0,0 +1,40 @@
+const layers = [
+  { order: 1, 
+    id: "public.stops",
+    type: "vector",
+    title: "UK Bus Stops",
+    url: "http://localhost/tiles/public.stops/{z}/{x}/{y}.pbf", 
+    visible: true,
+    styleType: "circle", 
+    opacity: 100 
+  },
+  { order: 2, 
+    id: "public.hv_lv_lines",
+    type: "vector",
+    title: "HV and LV Lines",
+    url: "http://localhost/tiles/public.hv_lv_lines/{z}/{x}/{y}.pbf", 
+    visible: true,
+    styleType: "line", 
+    opacity: 100 
+  },
+  { order: 3, 
+    id: "public.off_gas_postcodes",
+    type: "vector",
+    title: "Off Gas Postcodes",
+    url: "http://localhost/tiles/public.off_gas_postcodes/{z}/{x}/{y}.pbf", 
+    visible: true,
+    styleType: "fill", 
+    opacity: 70 
+  },
+  // { order: 4, 
+  //   id: "scottish_index_of_multiple_deprivation",
+  //   type: "vector",
+  //   title: "scottish_index_of_multiple_deprivation",
+  //   url: "https://tq9cdmx7si.execute-api.eu-west-2.amazonaws.com/dev/maps/tegolamap/scottish_index_of_multiple_deprivation/{z}/{x}/{y}.pbf", 
+  //   visible: true,
+  //   styleType: "fill", 
+  //   opacity: 70 
+  // },
+];
+
+export { layers };

components/Data/layerLists.js.backup

@@ -0,0 +1,9 @@
+const layers = [
+  { id: 1, name: "Postcodes", visible: true, opacity: 100 },
+  { id: 2, name: "Power", visible: true, opacity: 100 },
+  { id: 3, name: "Lakes", visible: true, opacity: 50 },
+  { id: 4, name: "Roads", visible: false, opacity: 20 },
+  { id: 5, name: "Houses", visible: false, opacity: 90 },
+];
+
+export { layers };

components/Graphs/barchart.js

@@ -0,0 +1,42 @@
+import React, { useState, useContext } from "react";
+import ReactDOM from 'react-dom';
+import { VictoryBar, VictoryChart, VictoryAxis } from 'victory';
+
+
+const data = [
+    {quarter: 1, earnings: 13000},
+    {quarter: 2, earnings: 16500},
+    {quarter: 3, earnings: 14250},
+    {quarter: 4, earnings: 19000}
+  ];
+
+
+export function BarchartComponent(){
+    return(
+    <div className="bg-red-100 w-50 h-50">
+        <VictoryChart domainPadding={20}>
+            <VictoryAxis
+            // tickValues specifies both the number of ticks and where
+            // they are placed on the axis
+            tickValues={[1, 2, 3, 4]}
+            tickFormat={["Quarter 1", "Quarter 2", "Quarter 3", "Quarter 4"]}
+            />
+            <VictoryAxis
+            dependentAxis
+            // tickFormat specifies how ticks should be displayed
+            tickFormat={(x) => (`$${x / 1000}k`)}
+            />
+            <VictoryBar
+            data={data}
+            // data accessor for x values
+            x="quarter"
+            // data accessor for y values
+            y="earnings"
+            />
+        </VictoryChart>
+
+    </div>
+    );
+}
+
+export default BarchartComponent;

components/Graphs/dataCard.js

@@ -0,0 +1,26 @@
+import React, { useState, useContext } from "react";
+import { Map, useMap } from "react-map-gl";
+import { LayerContext } from "../../context";
+
+export function DataCardComponent() {
+  const { state, dispatch } = useContext(LayerContext);
+  let data = state.data;
+  const layer_properties = data.properties;
+
+  return (
+    <div className="bg-red-100 w-50 h-50 h-full flex flex-col justify-center items-center text-black text-center ">
+      <div className="flex text-sm">
+        {" "}
+        {layer_properties ? layer_properties.commonname : ""}{" "}
+      </div>
+      <div className="flex text-lg">
+        {" "}
+        {layer_properties
+          ? layer_properties.naptancode
+          : "Select to Display"}{" "}
+      </div>
+    </div>
+  );
+}
+
+export default DataCardComponent;