fix data request problem

public/js/extras.js

@@ -25,7 +25,7 @@ async function fetchGeoJson(layerCode) {
   try {
     const response = await fetch(url);
     const data = await response.json();
-    console.debug(data);
+    console.debug('geojson data: ', data);
     return data;
   } catch (error) {
     console.error(error);
@@ -121,6 +121,7 @@ function hashCode(str) { // java String#hashCode
 // zoom to feature (for data sources)
 function zoomToFeature(e) {
   let featureId = e.target.feature.properties.id;
+  console.debug('feature zoomed: ', e.target);
 
   try {
     selectedEntityGroup = e.target.feature.id.split('.')[0];
@@ -295,7 +296,6 @@ function getHabitat(layerCode) {
 
 
 function moreInfoPopup(props) {
-  Alpine.store('entity', props);
   let title;
   if (props.hasOwnProperty('code')) {
     title = `${props.code} — ${props.name}`;
@@ -304,11 +304,14 @@ function moreInfoPopup(props) {
   }
   console.debug(props);
   // if (typeof props.code == 'undefined' && typeof props.name == 'undefined')
-  if (typeof props.tspr !== 'undefined')
+  if (typeof props.tspr !== 'undefined') {
     title = `POSEIDON — ${props.pid}`;
+    props.entityGroup = 'POSEIDON';
+  }
   if (typeof props.ctStationCode !== 'undefined')
     title = `WFD — ${props.ctStationCode}`;
 
+  Alpine.store('entity', props);
   getPagePartial('more-info').then(content => {
     new L.control.window(mapL, {
       title: title,

public/js/more-info.js

@@ -1,6 +1,7 @@
 function moreInfo() {
   return {
-    entityGroup: selectedEntityGroup,
+    lineChart: {},
+    entityGroup: Alpine.store('entity').entityGroup,
     entityId: selectedEntityId || Alpine.store('entity').id,
     dopen: false,
     copen: false,
@@ -96,33 +97,131 @@ function moreInfo() {
       }).render(grid);
     },
     drawDataChart() {
-      Alpine.store('loading', true);
-      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');
+      // Alpine.store('loading', true);
+      // if (this.entityGroup != 'POSEIDON')
+        // return;
+      console.debug('fetching...');
+      console.debug(Alpine.store('entity').params);
       const url = `/data/external/POSEIDON/${Alpine.store('entity').tspr}_${Alpine.store('entity').type}_${Alpine.store('entity').pid}`;
       fetch(url)
         .then(res => res.json())
         .then(data => {
           Alpine.store('loading', false);
-          console.debug(data);
+          console.debug("data poseidon: ", data);
+          let chartData = [];
+          for (var i = 0; i < data.length; i++) {
+            var item = data[i];
+            chartData.push({
+              x: new Date(item.dt),
+              y: item.val
             });
-
-      const config = {
+          }
+          this.lineChart = new Chart(
+            ctx,
+            {
               type: 'line',
-        data: data,
-        options: {
-          responsive: true,
-          plugins: {
-            legend: {
-              position: 'top',
+              data: {
+                labels: chartData.map(row => row.x),
+                datasets: [
+                  {
+                    label: 'PARAM',
+                    data: chartData.map(row => row.y)
+                  }
+                ]
               },
-            title: {
-              display: true,
-              text: 'Chart.js Line Chart'
+              options: {
+                scales: {
+                  xAxes: [{
+                    type: 'time',
+                    time: {
+                      unit: 'day'
                     }
+                  }]
                 }
+            }}
+
+          );
+      });
     },
-      };
+    addCheckbox(type, index) {
+      var label = document.createElement('label');
+      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 getRandomColor() {
+  var letters = '0123456789ABCDEF';
+  var color = '#';
+  for (var i = 0; i < 6; i++) {
+    color += letters[Math.floor(Math.random() * 16)];
+  }
+  return color;
+}

src/Data/DataRequest.php

@@ -1,7 +1,7 @@
 <?php
-// namespace MSFD\Data;
+namespace MSFD\Data;
 use MSFD\Services\PgSql;
-require_once(__DIR__.'/../Services/RepoAPI.php');
+use MSFD\Services\RepoAPI;
 /**
 * this class generates request objects to be used in the requests table on the frontend
 *

src/Data/actions/download_one_file.php

@@ -1,6 +1,6 @@
 <?php
-require_once(__DIR__ . '/../data_request.php');
-use MSFD\Services\DataRequest;
+// require_once(__DIR__ . '/../DataRequest.php');
+use MSFD\Data\DataRequest;
 
 $user_id = $_SESSION['user_id'];
 $file_uuid = $_GET["uuid"];
@@ -8,3 +8,4 @@ $request = new DataRequest($_GET, $user_id);
 $request->get_requested_file($file_uuid);
 
 
+

src/Services/PoseidonAPI.php

@@ -1,6 +1,7 @@
 <?php
 namespace MSFD\Services;
 use MSFD\Config;
+
 require_once(__DIR__.'/API.php');
 
 
@@ -15,7 +16,7 @@ class PoseidonAPI extends API {
 
     public function __construct()
     {
-        $url = Constants::getAPIbaseURL($this->apiName);
+        $url = Config::getAPIbaseURL($this->apiName);
         parent::__construct($url);
 
         $this->username = "y3wvvYKquktkZZALk49utvYeJPikNQFRWzE7A4Wx";
@@ -43,7 +44,6 @@ class PoseidonAPI extends API {
             "type" => "MO"
         );
 
-        $test = http_build_query($data);
         $this->headers["Authorization"] = "Bearer {$this->accessToken}";
         $this->headers["Accept"] = "application/json";
 
@@ -52,11 +52,15 @@ class PoseidonAPI extends API {
 
     public function getPlatformData($platform) {
         $endpoint = "api/data/{$platform}/";
+        $params = "ATMS"; // debugging
+        $data = array(
+            "param__pname__in" => implode(',', $params),
+        );
 
         $this->headers["Authorization"] = "Bearer {$this->accessToken}";
         $this->headers["Accept"] = "application/json";
         
-        return json_decode($this->get($endpoint));
+        return json_decode($this->get($endpoint, $data));
     }
 
 
@@ -65,5 +69,17 @@ class PoseidonAPI extends API {
         $this->isPost = false;
     }
 
+
+    public function getParameterInfo($params) {
+        $data = array(
+            "pname__in" => implode(',', $params)
+        );
+
+        $endpoint = "parameters/";
+
+        return json_decode($this->get($endpoint, $data));
+    }
+
+
 }
 

src/Services/RepoAPI.php

@@ -13,7 +13,7 @@ class RepoAPI extends API {
 
     public function __construct()
     {
-        $url = Constants::getAPIbaseURL($this->apiName);
+        $url = Config::getAPIbaseURL($this->apiName);
         parent::__construct($url);
     }
 

src/Views/more-info.php

@@ -1,13 +1,12 @@
-<?php
-
-?>
+<div x-data="moreInfo()">
+  <fieldset id="checkbox-container" class="field"></fieldset>
+  <div 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>
-<fieldset class="is-panel-block"
-x-data="moreInfo()"
->
-
+<fieldset class="is-panel-block">
   <div x-ref="grid" x-init="populateFeatureGrid($el)"></div>
-<div class="dropdown" :class="dopen ? 'is-active' : ''">
+  <div class="dropdown" :class="dopen ? 'is-active' : ''">
     <div class="dropdown-trigger">
       <button class="button" aria-haspopup="true" aria-controls="dropdown-menu" @click="dopen = ! dopen; getDropdownData('d')">
         <span>Descriptors</span>
@@ -24,8 +23,8 @@ x-data="moreInfo()"
           </template>
       </div>
     </div>
-</div>
-<div class="dropdown" :class="copen ? 'is-active' : ''">
+  </div>
+  <div class="dropdown" :class="copen ? 'is-active' : ''">
     <div class="dropdown-trigger">
       <button class="button" aria-haspopup="true" aria-controls="dropdown-menu" @click="copen = ! copen; getDropdownData('c')">
         <span>Criterias</span>
@@ -42,22 +41,41 @@ x-data="moreInfo()"
           </template>
       </div>
     </div>
-</div>
-<div id="tags-selection-d" class="tags">
+  </div>
+  <div id="tags-selection-d" class="tags">
       <span class="tag" x-text="tagName('d', did)"></span>
-</div>
-<div id="tags-selection" class="tags">
+  </div>
+  <div id="tags-selection" class="tags">
       <template x-for="id in cid">
           <span class="tag" x-text="tagName('c', id)"></span>
       </template>
-</div>
+  </div>
 
-<div x-init="loadCal">
-<input type="date" id="start" name="trip-start"
+  <div x-init="loadCal">
+  <input type="date" id="start" name="trip-start"
          value=""
          min="2017-01-01">
-</div>
-<div>
+  </div>
+  <div>
       <button @click="search()">Request Data...</button>
-</div>
+  </div>
 </fieldset>
+</div>
+<style>
+.chart-wrapper {
+    position: relative;
+}
+
+.chart-wrapper > canvas {
+    position: absolute;
+    left: 0;
+    top: 0;
+    pointer-events:none;
+}
+
+.chart-area-wrapper {
+    width: 15000px;
+    overflow-x: scroll;
+}
+
+</style>