diff --git a/public/js/more-info.js b/public/js/more-info.js index e59d840..c1101a1 100644 --- a/public/js/more-info.js +++ b/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 = []; - for (var i = 0; i < data.length; i++) { - var item = data[i]; - chartData.push({ - x: new Date(item.dt), - y: item.val - }); - } - 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: { + let chartData = {}; + const labels = data.map(item => new Date(item.dt).toLocaleDateString('el-GR')); + const values = data.map(item => item.val); + console.debug(labels); + console.debug(values); + chartData = { + labels: labels, + datasets: [{ + label: 'param', + data: values + }] + }; + console.debug(chartData); + this.lineChart = new Chart(ctx, { + type: 'line', + data: chartData, + options: { + scales: { xAxes: [{ - type: 'time', - time: { - unit: 'day' - } + type: 'time', + time: { + displayFormats: { + day: 'DD MMM YYYY' + }, + unit: 'day', + stepSize: 20 + } }] - } - }} - - ); - }); - }, - 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 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'; diff --git a/public/js/tools/leaflet/L.Control.Window.js b/public/js/tools/leaflet/L.Control.Window.js index e48ffe5..44dcef6 100644 --- a/public/js/tools/leaflet/L.Control.Window.js +++ b/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; }, diff --git a/public/js/tools/leaflet/L.TileLayer.BetterWMS.js b/public/js/tools/leaflet/L.TileLayer.BetterWMS.js index 1bcff3c..9ad869f 100644 --- a/public/js/tools/leaflet/L.TileLayer.BetterWMS.js +++ b/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); } }); diff --git a/src/Services/API.php b/src/Services/API.php index 1668af9..e506380 100644 --- a/src/Services/API.php +++ b/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)); diff --git a/src/Services/PoseidonAPI.php b/src/Services/PoseidonAPI.php index d97bf9a..43e37c6 100644 --- a/src/Services/PoseidonAPI.php +++ b/src/Services/PoseidonAPI.php @@ -52,14 +52,14 @@ 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), ); $this->headers["Authorization"] = "Bearer {$this->accessToken}"; $this->headers["Accept"] = "application/json"; - + return json_decode($this->get($endpoint, $data)); } diff --git a/src/Services/WfdAPI.php b/src/Services/WfdAPI.php index 5348dd1..c0d5d22 100644 --- a/src/Services/WfdAPI.php +++ b/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"; diff --git a/src/Views/more-info.php b/src/Views/more-info.php index 90439b3..45921ed 100644 --- a/src/Views/more-info.php +++ b/src/Views/more-info.php @@ -1,6 +1,13 @@
-
-
+
+ +
+

You may request the whole entity (cruise/station etc.) without selecting search criteria or be more specific by doing so.

diff --git a/src/Views/tabpanel.php b/src/Views/tabpanel.php index a50e4e7..49bd161 100644 --- a/src/Views/tabpanel.php +++ b/src/Views/tabpanel.php @@ -33,6 +33,12 @@
  • + + Statistics + +
    • +
  • + Admin Panel @@ -49,6 +55,8 @@ + +