Completed the sandbox implementation

Canadian-Geospatial-Platform · May 6, 2024 · 2ab05dd · 2ab05dd
1 parent 96abc1a
commit 2ab05dd
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 8 deletions.
diff --git a/packages/geoview-core/public/templates/config-sandbox.html b/packages/geoview-core/public/templates/config-sandbox.html
@@ -23,7 +23,7 @@
         background: #282a3a;
         border-radius: 2px;
         padding: 20px 10px;
-        height: 600px;
+        height: 500px;
         overflow-y: auto;
       }
 
@@ -92,7 +92,7 @@ <h1><strong>Sandbox Configuration</strong></h1>
                 <div class="line-numbers" id="inputLineNumbers">
                   <span></span>
                 </div>
-                <textarea id="configGeoview" name="configuration" rows="30" cols="110">
+                <textarea id="configGeoview" name="configuration" cols="110">
                   {
                     'map': {
                       'interaction': 'dynamic',
@@ -139,11 +139,12 @@ <h1><strong>Sandbox Configuration</strong></h1>
               </div>
             </td>
             <td>
+              <span id="validationMessage" style="margin:10px;">File not validated...</span>
               <div class="editor">
                 <div class="line-numbers" id="outputLineNumbers">
                   <span></span>
                 </div>
-                <textarea id="configOutput" name="configuration" rows="30" cols="110">
+                <textarea id="configOutput" name="configuration" cols="110">
                 </textarea>
               </div>
             </td>
@@ -160,7 +161,24 @@ <h1><strong>Sandbox Configuration</strong></h1>
       <button id="createMap" style="margin:10px;">Create Map</button>
       <button id="deleteMap" style="margin:10px;">Delete map</button>
       <br />
-      <span id="validationMessage" style="margin:10px;">File not validated...</span>
+    </div>
+    <div class="editor" style="height:60px">
+      <div class="line-numbers" id="inputLineNumbers">
+        <span></span>
+      </div>
+      <div>
+        <textarea id="configUrlGeoview" name="Urlconfiguration" cols="210">
+          p=3857&z=4&c=-100,40&l=en&t=dark&b={basemapId:transport,shaded:false,labeled:true}&i=dynamic&cc=overview-map&keys=12acd145-626a-49eb-b850-0a59c9bc7506,ccc75c12-5acc-4a6a-959f-ef6f621147b9
+        </textarea>
+      </div>
+    </div>
+    <div>
+      <button id="validateUrlConfig" style="margin:10px;">Validate</button>
+      <select id="urlLanguage">
+        <option value="en">English</option>
+        <option value="fr">Français</option>
+      </select>
+      <br />
     </div>
     <div class="map-title-holder">
       <h4 id="HLCONF1">Sanbox Map</h4>
@@ -181,8 +199,10 @@ <h4 id="HLCONF1">Sanbox Map</h4>
       const isValid = false;
       const configAreaString = document.getElementById('configGeoview').value.replaceAll('                ', '');
       document.getElementById('configGeoview').value = configAreaString;
+      const configUrlAreaString = document.getElementById('configUrlGeoview').value.replaceAll('          ', '');
+      document.getElementById('configUrlGeoview').value = configUrlAreaString;
 
-      // Validate Button============================================================================================================
+      // Config Validate Button============================================================================================================
       const validateJSONButton = document.getElementById('validateConfig');
 
       // add an event listener when a button is clicked
@@ -194,8 +214,44 @@ <h4 id="HLCONF1">Sanbox Map</h4>
         const configOutput = document.getElementById('configOutput');
 
         // get config and test if JSON is valid
-        // const mapConfig = cgpv.api.configApi.getMapConfig(configArea.value, langue);
-        const returnedValue = cgpv.api.configApi.getConfigFromUrl('p=3857&z=4&c=-100,40&l=en&t=dark&b={basemapId:transport,shaded:false,labeled:true}&i=dynamic&cc=overview-map&keys=12acd145-626a-49eb-b850-0a59c9bc7506,ccc75c12-5acc-4a6a-959f-ef6f621147b9');
+        const mapConfig = cgpv.api.configApi.getMapConfig(configArea.value, langue);
+        configOutput.value = mapConfig.getIndentedJsonString();
+
+        // Generate line numbers
+        (() => {
+          const textarea = document.getElementById('configOutput');
+          const lineNumbersContainer = document.getElementById('outputLineNumbers');
+          const lines = textarea.value.split('\n').length;
+          const lineNumbers = Array.from({ length: lines }, (_, index) => '').join('<span />');
+          lineNumbersContainer.innerHTML = lineNumbers;
+        })();
+
+        // set class and message
+        message.classList.add('config-json-valid');
+        message.classList.remove('config-error');
+        if (mapConfig.isValid) {
+          message.innerHTML = 'File is valid, see console for details...';
+          document.getElementById('createMap').disabled = true;
+        } else {
+          message.innerHTML = 'File is invalid, see console for details...';
+        }
+      });
+
+      // Config Url Validate Button========================================================================================================
+      const validateURLButton = document.getElementById('validateUrlConfig');
+
+      // add an event listener when the button is clicked
+      validateURLButton.addEventListener('click', function (e) {
+        // get message element
+        const message = document.getElementById('validationMessage');
+        const langue = document.getElementById('urlLanguage').value;
+        const configArea = document.getElementById('configGeoview');
+        const configUrlArea = document.getElementById('configUrlGeoview');
+        const configOutput = document.getElementById('configOutput');
+
+        configArea.value = configUrlArea.value;
+        // get config and test if URL Config is valid
+        const returnedValue = cgpv.api.configApi.getConfigFromUrl(configUrlArea.value);
         returnedValue.then((mapConfig) => {
           configOutput.value = mapConfig.getIndentedJsonString();
 

diff --git a/packages/geoview-core/src/api/config/config-api.ts b/packages/geoview-core/src/api/config/config-api.ts
@@ -164,7 +164,6 @@ export class ConfigApi {
   }
 
   /**
-   * @static
    * Get the default values that are applied to the map feature configuration when the user doesn't provide a value for a field
    * that is covered by a default value.
    * @param {TypeDisplayLanguage} language The language of the map feature config we want to produce.