fix(30) add ability to save and load a json file

closes(30)

package.json

@@ -1,12 +1,16 @@
 {
   "name": "geoview-pluginform",
   "version": "0.1.0",
+  "homepage": "https://pewillia.github.io/GeoView-Plugins-Config",
   "private": true,
-  "dependencies": {
+  "dependencies": { 
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.2",
-    "@rjsf/core": "^3.2.1",
-    "@rjsf/material-ui": "^3.2.1",
+    "@rjsf/core": "^5.13.0",
+    "@rjsf/material-ui": "^5.13.0",
+    "@rjsf/mui": "^5.13.0",
+    "@rjsf/utils": "^5.13.0",
+    "@rjsf/validator-ajv8": "^5.13.0",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
@@ -17,15 +21,20 @@
     "react-router-dom": "^6.2.1",
     "react-scripts": "5.0.0",
     "web-vitals": "^2.1.2",
-    "yup": "^0.32.11"
+    "yup": "^0.32.11",
+    "file-saver": "2.0.5",
+    "reactjs-popup": "2.0.5",
+    "react-jsonschema-form-pagination": "0.4.0",
+    "rjsf-tabs": "0.0.1"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "lint": "eslint src",
-    "postlint": "echo ✅ lint valid"
+    "postlint": "echo ✅ lint valid",
+    "deploy": "gh-pages -d build"
   },
   "eslintConfig": {
     "extends": [
@@ -46,10 +55,12 @@
     ]
   },
   "devDependencies": {
+     "geoview-core-types": "github:Canadian-Geospatial-Platform/GeoView#types",
     "eslint": "^8.6.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.28.0",
+    "gh-pages": "^5.0.0",
     "json-server": "^0.17.0",
     "prettier": "^2.5.1"
   }

public/counter.js

@@ -0,0 +1,19 @@
+// counter.js
+// import React from "react";
+(function () {
+    class counter {
+    translations = {
+      en: {
+        testMessage: "Hello",
+      },
+      fr: {
+        testMessage: "Bonjour",
+      },
+    };
+  }
+
+
+    // export this package
+    window.packages = window.packages || {};
+    window.packages.counter = counter;
+})();

public/datat(52)my_config2.json

@@ -0,0 +1 @@
+{"map":{"basemapOptions":{"id":"transport","shaded":true,"labeled":true},"interaction":"dynamic","viewSettings":{"center":[-106,60],"enableRotation":true,"extent":[2,2,2,2],"projection":3978,"rotation":0,"zoom":12},"extraOptions":{}},"theme":"dark","appBar":{"about":{}},"navBar":["zoom","fullscreen","fullextent"],"components":["app-bar","nav-bar","overview-map","north-arrow"],"corePackages":["basemap-panel","layers-panel","details-panel","geolocator-panel"],"externalPackages":{"keys":"https://geocore.api.geo.ca"},"serviceUrls":{"keys":"https://geocore.api.geo.ca"},"suportedLanguages":["en-CA","fr-CA"]}

public/energy.json

@@ -0,0 +1,36 @@
+{
+  "map": {
+    "interaction": "static",
+    "viewSettings": {
+      "zoom": 4,
+      "center": [-100, 60],
+      "projection": 3857
+    },
+    "basemapOptions": {
+      "basemapId": "transport",
+      "shaded": false,
+      "labeled": true
+    },
+    "listOfGeoviewLayerConfig": [
+
+      {
+        "geoviewLayerId": "esriDynamicLYR2",
+        "geoviewLayerName": {
+          "en": "Energy",
+          "fr": "Energy"
+        },
+        "metadataAccessPath": {
+          "en": "https://maps-cartes.ec.gc.ca/arcgis/rest/services/CESI/MapServer",
+          "fr": "https://maps-cartes.ec.gc.ca/arcgis/rest/services/CESI/MapServer"
+        },
+        "geoviewLayerType": "esriDynamic",
+        "listOfLayerEntryConfig": [{ "layerId": "0" }, { "layerId": "6" }]
+      }
+
+    ]
+  },
+  "theme": "dark",
+  "components": ["footer-bar"],
+  "corePackages": [],
+  "suportedLanguages": ["en"]
+}

public/firstnation.json

@@ -0,0 +1,34 @@
+{
+  "map": {
+    "interaction": "static",
+    "viewSettings": {
+      "zoom": 4,
+      "center": [-100, 60],
+      "projection": 3857
+    },
+    "basemapOptions": {
+      "basemapId": "transport",
+      "shaded": false,
+      "labeled": true
+    },
+    "listOfGeoviewLayerConfig": [
+      {
+        "geoviewLayerId": "wmsLYR1",
+        "geoviewLayerName": {
+          "en": "Première Nation / First Nation",
+          "fr": "Première Nation / First Nation"
+        },
+        "metadataAccessPath": {
+          "en": "https://services.aadnc-aandc.gc.ca/geomatics/services/Donnees_Ouvertes-Open_Data/Premiere_Nation_First_Nation/MapServer/WMSServer",
+          "fr": "https://services.aadnc-aandc.gc.ca/geomatics/services/Donnees_Ouvertes-Open_Data/Premiere_Nation_First_Nation/MapServer/WMSServer"
+        },
+        "geoviewLayerType": "ogcWms",
+        "listOfLayerEntryConfig": [{ "layerId": "0" }]
+      }
+    ]
+  },
+  "theme": "dark",
+  "components": ["footer-bar"],
+  "corePackages": [],
+  "suportedLanguages": ["en"]
+}

public/index.html

@@ -10,12 +10,15 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+
+
 
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="manifest.json" />
+   <!-- <link rel="manifest" href="manifest.json" />
+     -->
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -24,12 +27,71 @@
       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
+
+         <script src="https://canadian-geospatial-platform.github.io/geoview/public/cgpv-main.js"></script>
+  
     -->
     <title>NRCan Internal Application</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
+     <script src="https://canadian-geospatial-platform.github.io/geoview/public/cgpv-main.js"></script>
+   //  <script src="./counter.js"></script>
+      </head>
+  <body id ="body">
+     <div id="root">
+      </div>
+
+    <div id="mapTwo"></div>
+
+  <Popup id="popup-root">
+  </Popup>
+  <script >
+  // cgpv.init(function () {});
+  //  cgpv.init(function () { //console.log(counter.js);
+ //  cgpv.api.addPlugin("counter", window.packages["counter"], {
+ //   mapId: "llwp-map",
+ // });
+//});
+   </script>
+   <script >
+  function openpopup(){ console.log("in openpopup");
+      document.getElementById('pop').click();    window.cgpv.init();
+  }</script>
+   <script >function open_file(){
+      document.getElementById('file-selector').click();
+  } </script>
+   <input type="file" id="file-selector" display:none hidden>
+<script>
+  const fileSelector = document.getElementById('file-selector');
+  fileSelector.addEventListener('change', (event) => {
+    var fileList = event.target.files;
+    console.log(fileList);
+  });
+</script>
+<script>
+// When the user clicks on <div>, open the popup
+function myFunction() {
+  console.log("inside myfunction");
+  //var popup = document.getElementById("myPopup");
+// var x = document.getElementById("myPopup").style.display = "block";
+//var x = document.getElementById("mapTwo").style.display;
+let x=window.getComputedStyle(document.getElementById("mapTwo"));
+console.log("inside myfunction2  style=",x);
+var y = window.getComputedStyle(document.getElementById("myPopup1"));
+//var x = document.getElementById("myPopup").style.display;
+   console.log("inside myfunction3 style=",y);
+    if (x.style.display === "none") {
+    x.style.display = "block";
+  } else {
+    x.style.display = "none";
+  }
+
+
+ // popup.classList.toggle("show");
+   console.log("after myfunction");
+}
+</script>
+
+</script>
+   <!--<button  onclick = cgpv.init()> Draw map </button> -->
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
@@ -40,5 +102,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+
   </body>
 </html>

public/my-config - Copy.json

@@ -0,0 +1,73 @@
+{
+  "map": {
+    "interaction": "static",
+    "viewSettings": {
+      "zoom": 4,
+      "center": [-100, 60],
+      "projection": 3857
+    },
+    "basemapOptions": {
+      "basemapId": "transport",
+      "shaded": false,
+      "labeled": true
+    },
+    "listOfGeoviewLayerConfig": [
+      {
+        "geoviewLayerId": "wmsLYR1",
+        "geoviewLayerName": {
+          "en": "Première Nation / First Nation",
+          "fr": "Première Nation / First Nation"
+        },
+        "metadataAccessPath": {
+          "en": "https://services.aadnc-aandc.gc.ca/geomatics/services/Donnees_Ouvertes-Open_Data/Premiere_Nation_First_Nation/MapServer/WMSServer",
+          "fr": "https://services.aadnc-aandc.gc.ca/geomatics/services/Donnees_Ouvertes-Open_Data/Premiere_Nation_First_Nation/MapServer/WMSServer"
+        },
+        "geoviewLayerType": "ogcWms",
+        "listOfLayerEntryConfig": [{ "layerId": "0" }]
+      },
+      {
+        "geoviewLayerId": "esriDynamicLYR2",
+        "geoviewLayerName": {
+          "en": "Energy",
+          "fr": "Energy"
+        },
+        "metadataAccessPath": {
+          "en": "https://maps-cartes.ec.gc.ca/arcgis/rest/services/CESI/MapServer",
+          "fr": "https://maps-cartes.ec.gc.ca/arcgis/rest/services/CESI/MapServer"
+        },
+        "geoviewLayerType": "esriDynamic",
+        "listOfLayerEntryConfig": [{ "layerId": "0" }, { "layerId": "6" }]
+      },
+      {
+        "geoviewLayerId": "geojsonLYR4",
+        "geoviewLayerName": {
+          "en": "GeoJSON Line",
+          "fr": "GeoJSON Line"
+        },
+        "metadataAccessPath": {
+          "en": "./geojson/metadata.json",
+          "fr": "./geojson/metadata.json"
+        },
+        "geoviewLayerType": "GeoJSON",
+        "listOfLayerEntryConfig": [{ "layerId": "points.json" }, { "layerId": "lines.json" }, { "layerId": "polygons.json" }]
+      },
+      {
+        "geoviewLayerId": "wmsLYR7",
+        "geoviewLayerName": {
+          "en": "Geomet",
+          "fr": "Geomet"
+        },
+        "metadataAccessPath": {
+          "en": "https://geo.weather.gc.ca/geomet",
+          "fr": "https://geo.weather.gc.ca/geomet"
+        },
+        "geoviewLayerType": "ogcWms",
+        "listOfLayerEntryConfig": [{ "layerId": "RAQDPS-FW.CE_PM2.5-DIFF-YAvg" }]
+      }
+    ]
+  },
+  "theme": "dark",
+  "components": ["footer-bar"],
+  "corePackages": [],
+  "suportedLanguages": ["en"]
+}