Browse Source

fix data request problem

master
o.moresis 2 years ago
parent
commit
6a8fbc6e06
  1. 9
      public/js/extras.js
  2. 143
      public/js/more-info.js
  3. 4
      src/Data/DataRequest.php
  4. 5
      src/Data/actions/download_one_file.php
  5. 22
      src/Services/PoseidonAPI.php
  6. 2
      src/Services/RepoAPI.php
  7. 128
      src/Views/more-info.php

9
public/js/extras.js

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

143
public/js/more-info.js

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

4
src/Data/DataRequest.php

@ -1,7 +1,7 @@
<?php <?php
// namespace MSFD\Data; namespace MSFD\Data;
use MSFD\Services\PgSql; 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 * this class generates request objects to be used in the requests table on the frontend
* *

5
src/Data/actions/download_one_file.php

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

22
src/Services/PoseidonAPI.php

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

2
src/Services/RepoAPI.php

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

128
src/Views/more-info.php

@ -1,63 +1,81 @@
<?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> <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" <fieldset class="is-panel-block">
x-data="moreInfo()" <div x-ref="grid" x-init="populateFeatureGrid($el)"></div>
> <div class="dropdown" :class="dopen ? 'is-active' : ''">
<div class="dropdown-trigger">
<div x-ref="grid" x-init="populateFeatureGrid($el)"></div> <button class="button" aria-haspopup="true" aria-controls="dropdown-menu" @click="dopen = ! dopen; getDropdownData('d')">
<div class="dropdown" :class="dopen ? 'is-active' : ''"> <span>Descriptors</span>
<div class="dropdown-trigger"> <span class="icon is-small">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu" @click="dopen = ! dopen; getDropdownData('d')"> <i class="fas fa-angle-down" aria-hidden="true"></i>
<span>Descriptors</span> </span>
<span class="icon is-small"> </button>
<i class="fas fa-angle-down" aria-hidden="true"></i> </div>
</span> <div class="dropdown-menu" id="dropdown-descriptor" role="menu" @select="selectEntry($event.detail.el, $event.detail.id)">
</button> <div class="dropdown-content" x-model="did" x-ref="dinput" >
<template x-for="descriptor in d" :key="descriptor.code">
<a href="#" class="dropdown-item" x-text="descriptor.label" :id="'sel-desc-' + descriptor.id" @click="$dispatch('select', { el: $el, id: descriptor.id })">
</a>
</template>
</div>
</div>
</div> </div>
<div class="dropdown-menu" id="dropdown-descriptor" role="menu" @select="selectEntry($event.detail.el, $event.detail.id)"> <div class="dropdown" :class="copen ? 'is-active' : ''">
<div class="dropdown-content" x-model="did" x-ref="dinput" > <div class="dropdown-trigger">
<template x-for="descriptor in d" :key="descriptor.code"> <button class="button" aria-haspopup="true" aria-controls="dropdown-menu" @click="copen = ! copen; getDropdownData('c')">
<a href="#" class="dropdown-item" x-text="descriptor.label" :id="'sel-desc-' + descriptor.id" @click="$dispatch('select', { el: $el, id: descriptor.id })"> <span>Criterias</span>
</a> <span class="icon is-small">
</template> <i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-criteria" role="menu">
<div class="dropdown-content" x-model="cid" x-ref="cinput" @select="selectEntry($event.detail.el, $event.detail.id)">
<template x-for="criteria in c" :key="criteria.code">
<a href="#" class="dropdown-item" x-text="criteria.label" :id="'sel-crit-' + criteria.id" @click="$dispatch('select', { el: $el, id: criteria.id })">
</a>
</template>
</div>
</div> </div>
</div> </div>
</div> <div id="tags-selection-d" class="tags">
<div class="dropdown" :class="copen ? 'is-active' : ''"> <span class="tag" x-text="tagName('d', did)"></span>
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu" @click="copen = ! copen; getDropdownData('c')">
<span>Criterias</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div> </div>
<div class="dropdown-menu" id="dropdown-criteria" role="menu"> <div id="tags-selection" class="tags">
<div class="dropdown-content" x-model="cid" x-ref="cinput" @select="selectEntry($event.detail.el, $event.detail.id)"> <template x-for="id in cid">
<template x-for="criteria in c" :key="criteria.code"> <span class="tag" x-text="tagName('c', id)"></span>
<a href="#" class="dropdown-item" x-text="criteria.label" :id="'sel-crit-' + criteria.id" @click="$dispatch('select', { el: $el, id: criteria.id })"> </template>
</a>
</template>
</div>
</div> </div>
</div>
<div id="tags-selection-d" class="tags">
<span class="tag" x-text="tagName('d', did)"></span>
</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 x-init="loadCal"> <div x-init="loadCal">
<input type="date" id="start" name="trip-start" <input type="date" id="start" name="trip-start"
value="" value=""
min="2017-01-01"> min="2017-01-01">
</div> </div>
<div> <div>
<button @click="search()">Request Data...</button> <button @click="search()">Request Data...</button>
</div> </div>
</fieldset> </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>

Loading…
Cancel
Save