Divide abstract optinally in preamble and body [GRIDV-74]

spatial/static/spatial/js/gridmap.js

@@ -38,6 +38,10 @@ let WMSLayersDateBucket = {};
 let map = undefined;
 let popup = undefined;
 
+/**
+ * Handles moving forwards/backwards in time for the current layer type (Warning status, day degrees etc)
+ * @param {Integer} dayIndex the index in the time array (0 = first day in time series)
+ */
 async function switchLayer(dayIndex)
 {
     currentTimestamp = timestamps[dayIndex];
@@ -63,11 +67,19 @@ async function switchLayer(dayIndex)
     setCurrentDate(dayIndex);
 }
 
+/**
+ * Given the timeseries index, figure out which date it is and display in the time slider
+ * @param {Integer} layerIndex 
+ */
 function setCurrentDate(layerIndex)
 {
     document.getElementById("currentDate").innerHTML=moment(parseInt(timestamps[layerIndex])).format("YYYY-MM-DD");
 }
 
+/**
+ * 
+ * @returns The OpenLayers object for the currently visible layer
+ */
 function getCurrentVisibleOLLayer()
 {
     // The WMS layer returned from mapserver is found
@@ -95,7 +107,11 @@ function getLayersForCurrentTimestamp()
 
 }
 
-
+/**
+ * Loads map and data, and sets up the initial view of the map
+ * @param {*} inputModelId model Id, e.g. PSILARTEMP
+ * @param {*} mapAttribution background map source information (displayed in the map)
+ */
 async function initGridMap(inputModelId, mapAttribution) {
     modelId = inputModelId;
     var backgroundLayer = new ol.layer.Tile({
@@ -121,7 +137,15 @@ async function initGridMap(inputModelId, mapAttribution) {
     document.getElementById("modelTitle").innerHTML = capabilities.Service.Title;
     if(capabilities.Service.Abstract != undefined)
     {
-        document.getElementById("modelAbstract").innerHTML = capabilities.Service.Abstract.replaceAll("\n\n","");
+        // TODO: Check for sections ("preamble" and "body")
+        let el = new DOMParser().parseFromString(capabilities.Service.Abstract.replaceAll("\n\n",""),"text/html");
+        let preamble = el.getElementById("preamble") != null ? el.getElementById("preamble") : el;
+        document.getElementById("modelAbstractPreamble").innerHTML = new XMLSerializer().serializeToString(preamble);
+        let body = el.getElementById("body") != null ? el.getElementById("body") : null;
+        if(body != null)
+        {
+            document.getElementById("modelAbstractBody").innerHTML = new XMLSerializer().serializeToString(body);
+        }
     }
     //console.info(capabilities);
 

spatial/templates/spatial/gridmap.html

@@ -24,22 +24,25 @@
 {% endblock %}
 
 {% block content %}
-		<!-- Start map container -->
-		<div class="col-md-12" id="mapContainer" style="position: relative; height: 800px;">
-            <div class="slidecontainer" style="position: absolute; left: 20px; bottom: 20px; background-color: white; z-index: 1000;padding: 15px; border-radius: 15px;">
-                {% trans "Current date" %}: <span id="currentDate"></span> <br/>
-                <input type="range" min="0" max="0" value="0" step="1" id="layerDateRange" onchange="switchLayer(parseInt(this.value));"><br/>
-            </div>
-			<div class="form-group" id="paramselector" style="position: absolute; right: 20px; bottom: 20px; background-color: white; z-index: 1000;padding: 15px; border-radius: 15px;">
-			</div>
-			<div id="layerLegend" style="position: absolute; right: 20px; top: 20px; background-color: white; z-index: 1000;padding: 15px; border-radius: 15px;">
-				
-			</div>
-        </div>
-		<div id="popup" title="{% trans "Location details" %}"></div>
-		<div class="col-md-12">
-			<h2 id="modelTitle"></h2>
-			<div id="modelAbstract"></div>
+	<div class="col-md-12">
+		<h2 id="modelTitle"></h2>
+		<div id="modelAbstractPreamble"></div>
+	</div>
+	<!-- Start map container -->
+	<div class="col-md-12" id="mapContainer" style="position: relative; height: 800px; padding-top: 15px; padding-bottom: 15px;">
+		<div class="slidecontainer" style="position: absolute; left: 20px; bottom: 20px; background-color: white; z-index: 1000;padding: 15px; border-radius: 15px;">
+			{% trans "Current date" %}: <span id="currentDate"></span> <br/>
+			<input type="range" min="0" max="0" value="0" step="1" id="layerDateRange" onchange="switchLayer(parseInt(this.value));"><br/>
 		</div>
+		<div class="form-group" id="paramselector" style="position: absolute; right: 20px; bottom: 20px; background-color: white; z-index: 1000;padding: 15px; border-radius: 15px;">
+		</div>
+		<div id="layerLegend" style="position: absolute; right: 20px; top: 20px; background-color: white; z-index: 1000;padding: 15px; border-radius: 15px;">
+			
+		</div>
+	</div>
+	<div id="popup" title="{% trans "Location details" %}"></div>
+	<div class="col-md-12">
+		<div id="modelAbstractBody"></div>
+	</div>
        
 {% endblock %}
\ No newline at end of file