fix popup window DOM persistence, add statistics tab, improve poseidon charts

public/js/more-info.js

@@ -3,6 +3,7 @@ function moreInfo() {
     lineChart: {},
     entityGroup: Alpine.store('entity').entityGroup,
     entityId: selectedEntityId || Alpine.store('entity').id,
+    params: (this.entityGroup === 'POSEIDON' ? Alpine.store('entity').params.split(' ') : []),
     dopen: false,
     copen: false,
     loading: false,
@@ -97,11 +98,11 @@ function moreInfo() {
       }).render(grid);
     },
     drawDataChart() {
+      delete this.lineChart;
+      delete ctx;
       if (this.entityGroup !== 'POSEIDON')
          return;
-      Alpine.store('entity').params.split(' ').forEach((param, idx) => {
+
-        this.addCheckbox(param, idx);
-      });
       console.debug('drawing poseidon chart...');
       this.lineChart = {};
       var ctx = document.getElementById('data-chart').getContext('2d');
@@ -114,108 +115,94 @@ function moreInfo() {
         .then(data => {
           Alpine.store('loading', false);
           console.debug("data poseidon: ", data);
-          let chartData = [];
+          let chartData = {};
-          for (var i = 0; i < data.length; i++) {
+            const labels = data.map(item => new Date(item.dt).toLocaleDateString('el-GR'));
-            var item = data[i];
+            const values = data.map(item => item.val);
-            chartData.push({
+            console.debug(labels);
-              x: new Date(item.dt),
+            console.debug(values);
-              y: item.val
+            chartData = {
-            });
+               labels: labels,
-          }
+            datasets: [{
-          this.lineChart = new Chart(
+            label: 'param',
-            ctx,
+            data: values
-            {
+          }]
+        };
+          console.debug(chartData);
+          this.lineChart = new Chart(ctx, {
             type: 'line',
-              data: {
+            data: chartData,
-                labels: chartData.map(row => row.x),
-                datasets: [
-                  {
-                    label: 'PARAM',
-                    data: chartData.map(row => row.y)
-                  }
-                ]
-              },
             options: {
               scales: {
                   xAxes: [{
                       type: 'time',
                       time: {
-                      unit: 'day'
+                          displayFormats: {
-                    }
+                              day: 'DD MMM YYYY'
-                  }]
-                }
-            }}
-
-          );
-      });
                           },
-    addCheckbox(type, index) {
+                          unit: 'day',
-      var label = document.createElement('label');
+                          stepSize: 20
-      var checkbox = document.createElement('input');
-      checkbox.type = 'checkbox';
-      checkbox.checked = (index === 0);
-      checkbox.addEventListener('change', function() {
-        this.lineChart.data.datasets[index].hidden = !checkbox.checked;
-        this.lineChart.update();
-      });
-      label.appendChild(checkbox);
-      label.appendChild(document.createTextNode(type));
-      document.getElementById('checkbox-container').appendChild(label);
                       }
-
+                  }]
-  };
               }
-
-
-
-function poseidonChart(data) {
-
-var typeGroups = {};
-for (var i = 0; i < data.length; i++) {
-  var item = data[i];
-  if (!typeGroups[item.type]) {
-    typeGroups[item.type] = [];
             }
-  typeGroups[item.type].push({
-    x: item.date,
-    y: item.value
           });
-}
-
-var datasets = [];
-var index = 0;
-for (var type in typeGroups) {
-  datasets.push({
-    label: type,
-    data: typeGroups[type],
-    borderColor: getRandomColor(),
-    fill: false,
-    hidden: false
       });
-  addCheckbox(type, index++);
-}
-
-var ctx = document.getElementById('myChart').getContext('2d');
-var myChart = new Chart(ctx, {
-  type: 'line',
-  data: {
-    datasets: datasets
-  },
-  options: {
-    scales: {
-      xAxes: [{
-        type: 'time',
-        time: {
-          unit: 'week'
-        }
-      }]
     }
+  };
 }
-});}
-
 
 
 
+// function poseidonChart(data) {
+//   var typeGroups = {};
+//   for (var i = 0; i < data.length; i++) {
+//     var item = data[i];
+//     if (!typeGroups[item.type]) {
+//       typeGroups[item.type] = [];
+//     }
+//     typeGroups[item.type].push({
+//       x: item.date,
+//       y: item.value
+//     });
+//   }
+//
+//   console.debug(typeGroups);
+//   this.params = typeGroups.type;
+//   var datasets = [];
+//   var index = 0;
+//   for (var type in typeGroups) {
+//     datasets.push({
+//       label: type,
+//       data: typeGroups[type],
+//       borderColor: getRandomColor(),
+//       fill: false,
+//       hidden: false
+//     });
+//     addCheckbox(type, index++);
+//   }
+//
+//   var ctx = document.getElementById('myChart').getContext('2d');
+//   var myChart = new Chart(ctx, {
+//     type: 'line',
+//     data: {
+//       datasets: datasets
+//     },
+//     options: {
+//       scales: {
+//         xAxes: [{
+//           type: 'time',
+//           time: {
+//             unit: 'week'
+//           }
+//         }]
+//       }
+//     }
+//   });
+// }
+//
+//
+//
+//
 
 function getRandomColor() {
   var letters = '0123456789ABCDEF';

public/js/tools/leaflet/L.Control.Window.js

@@ -114,6 +114,7 @@ L.Control.Window = L.Control.extend({
             var close = this._closeButton;
             L.DomEvent.off(close, 'click', this.close, this);
         }
+        this._source.remove();
         return this;
     },
     mapResized : function(){
@@ -181,6 +182,7 @@ L.Control.Window = L.Control.extend({
 
         L.DomUtil.removeClass(this._wrapper, 'visible');
         this.fire('hide');
+        this._container.remove(); // fixes DOM element persistence
         return this;
     },
 

public/js/tools/leaflet/L.TileLayer.BetterWMS.js

@@ -73,11 +73,6 @@ L.TileLayer.BetterWMS = L.TileLayer.WMS.extend({
     } else {
       mruPopup(properties);
     }
-    // Otherwise show the content in a popup, or something.
-    // L.popup({ maxWidth: 800})
-    //   .setLatLng(latlng)
-    //   .setContent('placeholder')
-    //   .openOn(this._map);
   }
 });
 

src/Services/API.php

@@ -25,7 +25,6 @@ class API
 
         // Initialize cURL
         if ($this->isBasicAuth) {
-
             curl_setopt($this->curl, CURLOPT_USERPWD, "$this->username:$this->password");
             curl_setopt($this->curl, CURLOPT_HTTPAUTH, CURLAUTH_BASIC);
         }
@@ -40,6 +39,7 @@ class API
             curl_setopt($this->curl, CURLOPT_HTTPHEADER, $this::convert_headers($this->headers));
         }
 
+
         if (!empty($data)) {
             // Set the HTTP method to GET
             curl_setopt($this->curl, CURLOPT_URL, $url . "?" . http_build_query($data));

src/Services/PoseidonAPI.php

@@ -52,7 +52,7 @@ class PoseidonAPI extends API {
 
     public function getPlatformData($platform) {
         $endpoint = "api/data/{$platform}/";
-        $params = "ATMS"; // debugging
+        $params = ["ATMS"]; // debugging
         $data = array(
             "param__pname__in" => implode(',', $params),
         );

src/Services/WfdAPI.php

@@ -14,7 +14,7 @@ class WfdAPI extends API {
 
     public function __construct()
     {
-        $url = Constants::getAPIbaseURL($this->apiName);
+        $url = Config::getAPIbaseURL($this->apiName);
         parent::__construct($url);
 
         $this->username = "ct_api_user";

src/Views/more-info.php

@@ -1,6 +1,13 @@
 <div x-data="moreInfo()">
-  <fieldset id="checkbox-container" class="field"></fieldset>
+  <fieldset id="checkbox-container" class="field">
-  <div id="chart-wrapper" x-init="drawDataChart()">
+    <template x-for="param in params" :key="param">
+        <label class="checkbox" :for="$id('param-input')">
+          <input type="checkbox" id="$id('param-input')" :value="param">
+          <span x-text="param"></span>
+        </label>
+    </template>
+  </fieldset>
+  <div x-if="entityGroup === 'POSEIDON'" id="chart-wrapper" x-init="drawDataChart()">
     <canvas id="data-chart" ></canvas>
   </div>
 <p class="px-4">You may request the whole entity (cruise/station etc.) without selecting search criteria or be more specific by doing so.</p>

src/Views/tabpanel.php

@@ -33,6 +33,12 @@
     </li>
     <li :class="isActiveTab(4) ? 'is-active' : ''">
       <a @click="setActiveTab(4)">
+        <span class="icon is-small"><i class="fas fa-chart-column" aria-hidden="true"></i></span>
+        <span>Statistics</span>
+      </a>
+    </li>
+    <li :class="isActiveTab(5) ? 'is-active' : ''">
+      <a @click="setActiveTab(5)">
         <span class="icon is-small"><i class="fas fa-screwdriver-wrench" aria-hidden="true"></i></span>
         <span>Admin Panel</span>
       </a>
@@ -49,6 +55,8 @@
         <?php include('main-map.php'); ?>
         <?php include('main-metadata.php'); ?>
         <?php include('main-about.php'); ?>
+        <?php include('main-statistics.php'); ?>
+        <?php include('main-admin.php'); ?>
     </main>
 </div>
     <?php include('spinner.php'); ?>