Render weather data table

ipmd/static/ipmd/js/ipmdlib.js

@@ -89,8 +89,330 @@ function getDateArray(timestart, interval, length)
     currentTime = moment(timestart);
     for(let i=0;i< length; i++)
     {
-        dateArray.push(currentTime.format("YYYY-MM-DD"));
+        dateArray.push(currentTime.valueOf());
         currentTime.add(interval,'seconds');
     }
     return dateArray;
-}
+}
\ No newline at end of file
+
+function getWeatherParameter(weatherParameterId){
+    for(let i=0;i<weatherParameterList.length;i++)
+    {
+        if(weatherParameterList[i].id == weatherParameterId)
+        {
+            return weatherParameterList[i];
+        }
+    }
+    return null;
+}
+
+const weatherParameterList = [
+    {
+        "id": 1001,
+        "name": "Instantaneous temperature at 2m",
+        "description": null,
+        "unit": "Celcius",
+        "aggregationType": "AVG"
+    },
+    {
+        "id": 1002,
+        "name": "Mean air temperature at 2m",
+        "description": null,
+        "unit": "Celcius",
+        "aggregationType": "AVG"
+    },
+    {
+        "id": 1003,
+        "name": "Minimum air temperature at 2m",
+        "description": null,
+        "unit": "Celcius",
+        "aggregationType": "MIN"
+    },
+    {
+        "id": 1004,
+        "name": "Maximum air temperature at 2m",
+        "description": null,
+        "unit": "Celcius",
+        "aggregationType": "MAX"
+    },
+    {
+        "id": 1021,
+        "name": "Instantaneous temperature in canopy",
+        "description": null,
+        "unit": "Celcius",
+        "aggregationType": "AVG"
+    },
+    {
+        "id": 1022,
+        "name": "Mean air temperature in canopy",
+        "description": null,
+        "unit": "Celcius",
+        "aggregationType": "AVG"
+    },
+    {
+        "id": 1023,
+        "name": "Minimum air temperature in canopy",
+        "description": null,
+        "unit": "Celcius",
+        "aggregationType": "MIN"
+    },
+    {
+        "id": 1024,
+        "name": "Maximum air temperature in canopy",
+        "description": null,
+        "unit": "Celcius",
+        "aggregationType": "MAX"
+    },
+    {
+        "id": 1101,
+        "name": "Instantaneous temperature at -5cm (Celcius)",
+        "description": null,
+        "unit": "Celcius",
+        "aggregationType": "AVG"
+    },
+    {
+        "id": 1102,
+        "name": "Mean temperature at -5cm",
+        "description": null,
+        "unit": "Celcius",
+        "aggregationType": "AVG"
+    },
+    {
+        "id": 1111,
+        "name": "Instantaneous temperature at -10cm (Celcius)",
+        "description": null,
+        "unit": "Celcius",
+        "aggregationType": "AVG"
+    },
+    {
+        "id": 1112,
+        "name": "Mean temperature at -10cm",
+        "description": null,
+        "unit": "Celcius",
+        "aggregationType": "AVG"
+    },
+    {
+        "id": 1121,
+        "name": "Instantaneous temperature at -20cm (Celcius)",
+        "description": null,
+        "unit": "Celcius",
+        "aggregationType": "AVG"
+    },
+    {
+        "id": 1122,
+        "name": "Mean temperature at -20cm",
+        "description": null,
+        "unit": "Celcius",
+        "aggregationType": "AVG"
+    },
+    {
+        "id": 1131,
+        "name": "Instantaneous temperature at -30cm (Celcius)",
+        "description": null,
+        "unit": "Celcius",
+        "aggregationType": "AVG"
+    },
+    {
+        "id": 1132,
+        "name": "Mean temperature at -30cm",
+        "description": null,
+        "unit": "Celcius",
+        "aggregationType": "AVG"
+    },
+    {
+        "id": 1141,
+        "name": "Instantaneous temperature at -40cm (Celcius)",
+        "description": null,
+        "unit": "Celcius",
+        "aggregationType": "AVG"
+    },
+    {
+        "id": 1142,
+        "name": "Mean temperature at -40cm",
+        "description": null,
+        "unit": "Celcius",
+        "aggregationType": "AVG"
+    },
+    {
+        "id": 1151,
+        "name": "Instantaneous temperature at -50cm (Celcius)",
+        "description": null,
+        "unit": "Celcius",
+        "aggregationType": "AVG"
+    },
+    {
+        "id": 1152,
+        "name": "Mean temperature at -50cm",
+        "description": null,
+        "unit": "Celcius",
+        "aggregationType": "AVG"
+    },
+    {
+        "id": 1901,
+        "name": "Dew point temperature",
+        "description": null,
+        "unit": "Celcius",
+        "aggregationType": "AVG"
+    },
+    {
+        "id": 2001,
+        "name": "Precipitation",
+        "description": null,
+        "unit": "mm",
+        "aggregationType": "SUM"
+    },
+    {
+        "id": 3001,
+        "name": "Instantaneous RH at 2m (%)",
+        "description": null,
+        "unit": "%",
+        "aggregationType": "AVG"
+    },
+    {
+        "id": 3002,
+        "name": "Mean RH at 2m",
+        "description": null,
+        "unit": "%",
+        "aggregationType": "AVG"
+    },
+    {
+        "id": 3003,
+        "name": "Minimum RH at 2m",
+        "description": null,
+        "unit": "%",
+        "aggregationType": "MIN"
+    },
+    {
+        "id": 3004,
+        "name": "Maximum RH at 2m",
+        "description": null,
+        "unit": "%",
+        "aggregationType": "MAX"
+    },
+    {
+        "id": 3021,
+        "name": "Instantaneous RH in canopy",
+        "description": null,
+        "unit": "%",
+        "aggregationType": "AVG"
+    },
+    {
+        "id": 3022,
+        "name": "Mean RH in canopy",
+        "description": null,
+        "unit": "%",
+        "aggregationType": "AVG"
+    },
+    {
+        "id": 3023,
+        "name": "Minimum RH in canopy",
+        "description": null,
+        "unit": "%",
+        "aggregationType": "MIN"
+    },
+    {
+        "id": 3024,
+        "name": "Maximum RH in canopy",
+        "description": null,
+        "unit": "%",
+        "aggregationType": "MAX"
+    },
+    {
+        "id": 3101,
+        "name": "Leaf wetness in 2m (minutes/hour)",
+        "description": null,
+        "unit": "minutes/hour",
+        "aggregationType": "SUM"
+    },
+    {
+        "id": 3102,
+        "name": "Leaf wetness in canopy",
+        "description": null,
+        "unit": "minutes/hour",
+        "aggregationType": "SUM"
+    },
+    {
+        "id": 3103,
+        "name": "Leaf wetness in grass",
+        "description": null,
+        "unit": "minutes/hour",
+        "aggregationType": "SUM"
+    },
+    {
+        "id": 4001,
+        "name": "Wind direction at 2m (degrees 0-360)",
+        "description": null,
+        "unit": "degrees",
+        "aggregationType": "AVG"
+    },
+    {
+        "id": 4002,
+        "name": "Instantaneous wind speed at 2m",
+        "description": null,
+        "unit": "m/s",
+        "aggregationType": "AVG"
+    },
+    {
+        "id": 4003,
+        "name": "Mean wind speed at 2m",
+        "description": null,
+        "unit": "m/s",
+        "aggregationType": "AVG"
+    },
+    {
+        "id": 4004,
+        "name": "Max wind speed at 2m",
+        "description": null,
+        "unit": "m/s",
+        "aggregationType": "MAX"
+    },
+    {
+        "id": 4005,
+        "name": "Min wind speed at 2m",
+        "description": null,
+        "unit": "m/s",
+        "aggregationType": "MIN"
+    },
+    {
+        "id": 4011,
+        "name": "Wind direction at 10m (degrees 0-360)",
+        "description": null,
+        "unit": "degrees",
+        "aggregationType": "AVG"
+    },
+    {
+        "id": 4012,
+        "name": "Instantaneous wind speed at 10m",
+        "description": null,
+        "unit": "m/s",
+        "aggregationType": "AVG"
+    },
+    {
+        "id": 4013,
+        "name": "Mean wind speed at 10m",
+        "description": null,
+        "unit": "m/s",
+        "aggregationType": "AVG"
+    },
+    {
+        "id": 4014,
+        "name": "Max wind speed at 10m",
+        "description": null,
+        "unit": "m/s",
+        "aggregationType": "MAX"
+    },
+    {
+        "id": 4015,
+        "name": "Min wind speed at 10m",
+        "description": null,
+        "unit": "m/s",
+        "aggregationType": "MIN"
+    },
+    {
+        "id": 5001,
+        "name": "Solar radiation (Q0) (W/sqm)",
+        "description": null,
+        "unit": "W/sqm",
+        "aggregationType": "SUM"
+    }
+];
\ No newline at end of file

ipmd/templates/ipmd/saddlegallmidgeform.html

@@ -33,7 +33,9 @@
     </div>
     <button class="btn btn-primary" type="button" onclick="submitData();">Submit</button>
     <div>
-        <canvas id="myChart"></canvas>
+        <canvas id="resultChart"></canvas>
+    </div>
+    <div id="weatherData" class="table-responsive">
     </div>
     <pre id="modelDescription"></pre>
 </div>
@@ -42,6 +44,7 @@
 <script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 <script type="text/javascript" src="{% static "js/3rdparty/moment.min.js" %}"></script>
+<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment"></script>
 <script type="text/javascript" src="{% static "ipmd/js/ipmdlib.js" %}"></script>
 <script type="text/javascript">
     // Page globals
@@ -50,6 +53,8 @@
     var editor = undefined;
     const selectList = document.getElementById("weatherStationId");
 
+    var weatherData = undefined;
+
     async function initPage() {
         modelMetaData = await getModelMetadata("adas.dss","HAPDMA");
         document.getElementById("modelDescription").innerHTML= await modelMetaData["description"];
@@ -65,7 +70,7 @@
         let fullSchema = JSON.parse(modelMetaData["execution"]["input_schema"]);
         if(fullSchema["properties"]["weatherData"] !== undefined)
         {
-            console.info("Adding weather stations");
+            //console.info("Adding weather stations");
             // Pull weather stations from web service, render list
             weatherDatasource = await getWeatherDatasource("no.nibio.lmt");
             stationList = await getWeatherStationList(weatherDatasource);
@@ -78,8 +83,13 @@
                 selectList.add(new Option(stationList[i].name, stationList[i].id))
             }
             document.getElementById("weatherStations").style.display = "block";
-            //console.info(weatherDatasource);
+            console.info(weatherDatasource);
         }
+
+        // TODO: Remove this auto-mock!!
+        editor.getValue().optionalData.startDate="2023-08-01";
+        editor.getValue().optionalData.endDate="2023-08-10";
+        submitData();
     }
 
     initPage();
@@ -104,7 +114,7 @@
             console.info("Need to get weather data!");
             let weatherStationId = selectList.options[selectList.selectedIndex].value;
 
-            let weatherData = await getLocationWeatherData(
+            weatherData = await getLocationWeatherData(
                 weatherDatasource.endpoint,
                 weatherStationId,
                 (function (){
@@ -119,6 +129,7 @@
                 inputData.optionalData.endDate,
             );
             inputData["weatherData"] = weatherData;
+            console.info(weatherData);
         }
         // Ready to call server?
         //console.info(JSON.stringify(inputData));
@@ -133,7 +144,7 @@
         let chartData = [];
         // Generate dates
         let dates = getDateArray(result.timeStart, 86400, result.locationResult[0].length);
-        //console.info(dates);
+        console.info(dates);
         for(let i=0; i< result.resultParameters.length;i++)
         {
             let dataset = {label:result.resultParameters[i], data: []}
@@ -144,17 +155,52 @@
             chartData.push(dataset);
         }
 
-        const ctx = document.getElementById('myChart');
+        const ctx = document.getElementById('resultChart');
 
         new Chart(ctx, {
             type: "line",
+            options: {
+                scales: {
+                    x: {
+                        type: "time",
+                        time: {
+                            //unit: "day",
+                            diplayFormats: {
+                                day: "YYYY-MM-DD" // This doesn't seem to have any effect
+                            }
+                        }
+                    }
+                }
+            },
             data: {
                 datasets: chartData
             }
         })
+        renderWeatherData(weatherData, document.getElementById("weatherData"), "table table-striped")
+    }
+
+    function renderWeatherData(weatherData, container, tableClass){
+        let dates = getDateArray(weatherData.timeStart, weatherData.interval, weatherData.locationWeatherData[0].length);
+        let html = "<table" + (tableClass != undefined ? " class=\"" + tableClass + "\"" : "") + "><thead><tr><th>Time</th>";
+        weatherData.weatherParameters.forEach(function(weatherParameterId){
+                        html +="<th>" + getWeatherParameter(weatherParameterId).name + "</th>";
+                    });
+        
+        html += "</tr></thead>"
+        html += "<tbody>";
+        for(let i=0;i< weatherData.locationWeatherData[0].length;i++)
+        {
+            html += "<tr><td>" + moment(dates[i]).format("YYYY-MM-DD HH:mm:ss") + "</td>";
+                weatherData.locationWeatherData[0].data[i].forEach(function(val){html+="<td>" + val + "</td>";})
+            html += "</tr>";
+        }
+        html += "</tbody>";
+        html += "</table>";
+        container.innerHTML = html;
+
     }
 
-    // Prototype result!!!
+    // Mock result!!! Waiting for ADAS to fix CORS issue
     const mockResult={
         "timeStart": "2023-06-30T22:00:00+00:00",
         "timeEnd": "2023-08-10T22:00:00+00:00",