function advancedSearch ( ) {
return {
gopen : false ,
bopen : false ,
dopen : false ,
copen : false ,
loading : false ,
submitDisabled : true ,
g : { } ,
b : { } ,
d : { } ,
c : { } ,
tagName ( type , id ) {
if ( type === 'b' ) {
return this . b . find ( i => i . id == id ) . label ;
} else if ( type === 'c' ) {
return this . c . find ( i => i . id == id ) . code ;
} else if ( type === 'g' ) {
try {
return this . g . find ( i => i . id == id ) . label ;
} catch ( err ) {
return ;
}
} else if ( type === 'd' ) {
try {
return this . d . find ( i => i . id == id ) . code ;
} catch ( err ) {
return ;
}
}
} ,
gid : null ,
bid : [ ] ,
did : null ,
cid : [ ] ,
date : { } ,
search ( ) {
generateRequest ( this . did , this . cid , this . date . from , this . date . to , this . bid ) ;
} ,
// Triggers when an entry is selected from any of the dropdowns
selectEntry ( element , entry ) {
const selType = element . id . split ( '-' ) [ 1 ] ;
console . debug ( selType ) ;
if ( selType === 'group' ) {
element . parentElement . querySelectorAll ( 'a' ) . forEach ( el => el . classList . remove ( 'is-active' ) ) ;
element . classList . add ( 'is-active' ) ;
// update variables;
this . bid = [ ] ;
this . gid = entry ;
this . gopen = false ;
} else if ( selType === 'body' ) {
// toggle
element . classList . toggle ( 'is-active' ) ;
// update variables;
this . bid . indexOf ( entry ) === - 1 ? this . bid . push ( entry ) : this . bid = this . bid . filter ( function ( id ) { return id !== entry } ) ;
this . bopen = false ;
// add tag
} else if ( selType === 'desc' ) {
// highlight
element . parentElement . querySelectorAll ( 'a' ) . forEach ( el => el . classList . remove ( 'is-active' ) ) ;
element . classList . add ( 'is-active' ) ;
// update variables;
this . cid = [ ] ;
this . did = entry ;
console . debug ( this . did ) ;
this . dopen = false ;
} else if ( selType === 'crit' ) {
// toggle
element . classList . toggle ( 'is-active' ) ;
// update variables;
this . cid . indexOf ( entry ) === - 1 ? this . cid . push ( entry ) : this . cid = this . cid . filter ( function ( id ) { return id !== entry } ) ;
this . copen = false ;
// add tag
}
this . submitDisabled = ! ( this . bid . length > 0 && this . cid . length > 0 ) ;
} ,
getDropdownData ( dropdown ) {
this . loading = true ;
let url = BASE _URL ;
switch ( dropdown ) {
case 'g' :
url += '/interface/dropdowns/watergroups' ;
break ;
case 'b' :
url += '/interface/dropdowns/waterbodies?group_id=' + this . gid ;
break ;
case 'd' :
url += '/interface/dropdowns/descriptors?body_id=' + this . bid ;
break ;
case 'c' :
url += '/interface/dropdowns/criterias?desc_id=' + this . did ;
break ;
}
fetch ( url )
. then ( res => res . json ( ) )
. then ( data => {
this . isLoading = false ;
eval ( 'this.' + dropdown + '=data' ) ;
console . debug ( data ) ;
} ) ;
} ,
loadCal ( ) {
const calendars = bulmaCalendar . attach ( '[type=date]' , { dateFormat : 'dd/MM/yyyy' , isRange : true ,
minDate : '01/01/1990' } ) ;
// Loop on each calendar initialized
calendars . forEach ( calendar => {
calendar . on ( 'save' , data => {
this . date = {
from : calendar . startDate . toLocaleDateString ( ) ,
to : calendar . endDate . toLocaleDateString ( )
}
} ) ;
} ) ;
}
} ;
}
// function makeRequestsGrid() {
// window.requestsGrid = new gridjs.Grid({
// columns: ['UUID', 'Criterias',
// {
// name: 'Requested At',
// },
// {
// name: 'Status',
// },
// {
// name: 'Actions',
// formatter: (cell, row) => {
// if (cell == 'f') {
// return "";
// }
// return gridjs.h('button', {
// className: 'py-2 mb-4 px-4 border rounded-md text-white bg-blue-600',
// onClick: () => downloadOneFile(row.cells[0].data)
// }, 'Download');
// }
// }],
// search: false,
// server: {
// url: BASE_URL + '/actions/requests/',
// then: data => data.map(reqs => [reqs.uuid, reqs.criterias, reqs.requested_at, reqs.status, reqs.downloadable])
// }
// }).render(document.getElementById('grid-requests'));
//
// setInterval(function() {
// requestsGrid.forceRender();
// }, 20000);
// }
function refreshRequestGrid ( ) {
requestsGrid . forceRender ( ) ;
}
function downloadOneFile ( fileUUID ) {
const url = BASE _URL + '/actions/data/download?uuid=' + fileUUID ;
fetch ( url , {
"credentials" : "include" ,
"headers" : {
"Accept" : "application/zip" ,
"Accept-Language" : "en-US,en;q=0.5" ,
"Sec-Fetch-Dest" : "empty" ,
"Sec-Fetch-Mode" : "cors" ,
"Pragma" : "no-cache" ,
"Cache-Control" : "no-cache"
} ,
"method" : "GET" ,
"mode" : "cors" }
)
. then ( res => { return res . blob ( ) ; } )
. then ( data => {
var a = document . createElement ( "a" ) ;
a . href = window . URL . createObjectURL ( data ) ;
a . download = fileUUID ;
a . click ( ) ;
} ) ;
}
/ * *
* Submit a request to the server and returns the entry inserted
* @ param { number } desc
* @ param { number } crit
* @ return { json }
* /
function generateRequest ( desc , crit , from , to , bodyId = null ) {
console . debug ( 'requesting data' ) ;
const url = BASE _URL + ` /actions/data/search?bodyId= ${ bodyId } &dateFrom= ${ from } &dateTo= ${ to } &critId= ${ crit } ` ;
fetch ( url )
. then ( res => {
return res . json ( ) ;
} ) . then ( data => {
db . requests . add ( {
uuid : data . uuid ,
parameters : data . parameters ,
status : data . status
} ) . then ( d => {
alert ( 'Request complete. Check the request tab' ) ;
requestsGrid . forceRender ( ) ;
} ) ;
} ) ;
}
/ * *
* Function to request data for a specific entity such as station or cruise
* @ param { number } desc - The descriptor id
* @ param { number } crit - The criteria id
* @ param { string } from - The start date for which the data is to be requested
* @ param { string } to - The end date for which the data is to be requested
* @ param { string } entityGroup - The entity group ( e . g . cruise station , argo , wfd station )
* @ param { string } entityId - The entity feature id ( e . g . station id )
* @ return { null }
* /
function requestEntityData ( desc , crit , from , to , entityGroup , entityId ) {
const url = BASE _URL + ` /actions/data/search?entityGroup= ${ entityGroup } &entityId= ${ entityId } &dateFrom= ${ from } &dateTo= ${ to } &critId= ${ crit } ` ;
fetch ( url )
. then ( res => {
return res . json ( ) ;
} ) . then ( data => {
db . requests . add ( {
uuid : data . uuid ,
parameters : data . parameters ,
status : data . status
} ) . then ( d => {
alert ( 'Request complete. Check the request tab' ) ;
requestsGrid . forceRender ( ) ;
} ) ;
} ) ;
}
/ * *
* Function to request data for a specific entity that has an external source
* @ param { number } desc - The descriptor id
* @ param { number } crit - The criteria id
* @ param { string } from - The start date for which the data is to be requested
* @ param { string } to - The end date for which the data is to be requested
* @ param { string } entityGroup - The entity group ( e . g . cruise station , argo , wfd station )
* @ param { string } entityId - The entity feature id ( e . g . station id )
* @ return { null }
* /
function requestExternalData ( desc , crit , from , to , entityGroup , entityId ) {
console . debug ( 'requesting external data' ) ;
const url = BASE _URL + ` /src/data/request_external_data.php?entityGroup= ${ entityGroup } &entityId= ${ entityId } &dateFrom= ${ from } &dateTo= ${ to } &critId= ${ crit } ` ;
fetch ( url )
. then ( res => {
return res . blob ( ) ;
} ) . then ( data => {
const url = window . URL . createObjectURL ( data ) ;
const a = document . createElement ( 'a' ) ;
a . href = url ;
a . download = ` external_data- ${ entityId } .json ` ;
a . click ( ) ;
} ) ;
}
function clearRequests ( ) {
let url = BASE _URL + ` /actions/requests/ ` ;
if ( confirm ( 'Clear requests list?' ) ) {
fetch ( url , {
method : 'DELETE'
} )
. then ( response => {
if ( response . ok )
requestsGrid . forceRender ( ) ;
} ) ;
} else {
console . log ( 'Cancel' ) ;
}
}
function moreInfo ( ) {
return {
entityGroup : selectedEntityGroup ,
entityId : selectedEntityId || Alpine . store ( 'entity' ) . id ,
dopen : false ,
copen : false ,
loading : false ,
isGrid : Alpine . store ( 'entity' ) . hasOwnProperty ( 'cellcode' ) ,
d : { } ,
c : { } ,
tagName ( type , id ) {
if ( id == null )
return ;
if ( type === 'd' ) {
return this . d . find ( i => i . id == id ) . code ;
} else if ( type === 'c' ) {
return this . c . find ( i => i . id == id ) . code ;
}
} ,
did : null ,
cid : [ ] ,
date : { } ,
search ( ) {
this . drawDataChart ( ) ;
// check if entity has an external source
if ( this . $store . entity . hasOwnProperty ( 'ctStationCode' ) ) {
requestExternalData ( this . did , this . cid , this . date . from , this . date . to , this . entityGroup , this . entityId ) ;
} else {
requestEntityData ( this . did , this . cid , this . date . from , this . date . to , this . entityGroup , this . entityId ) ;
}
} ,
selectEntry ( element , entry ) {
console . debug ( element . text . substr ( 0 , element . text . indexOf ( ' ' ) ) ) ;
if ( element . id . split ( '-' ) [ 1 ] === 'desc' ) {
// highlight
element . parentElement . querySelectorAll ( 'a' ) . forEach ( el => el . classList . remove ( 'is-active' ) ) ;
element . classList . add ( 'is-active' ) ;
// update variables;
this . cid = [ ] ;
this . did = entry ;
this . dopen = false ;
} else if ( element . id . split ( '-' ) [ 1 ] === 'crit' ) {
// toggle
element . classList . toggle ( 'is-active' ) ;
// update variables;
this . cid . indexOf ( entry ) === - 1 ? this . cid . push ( entry ) : this . cid = this . cid . filter ( function ( id ) { return id !== entry } ) ;
this . copen = false ;
// add tag
}
} ,
getDropdownData ( dropdown ) {
this . loading = true ;
let url = BASE _URL ;
let gridCode ;
if ( this . isGrid ) {
gridCode = Alpine . store ( 'entity' ) . cellcode . substr ( 0 , 4 ) ;
}
switch ( dropdown ) {
case 'd' :
url += '/interface/dropdowns/descriptors?entityid=' + this . entityId + '&cellcode=' + gridCode ;
break ;
case 'c' :
url += '/interface/dropdowns/criterias?descriptor_id=' + this . did + '&cellcode=' + gridCode ;
break ;
}
fetch ( url )
. then ( res => res . json ( ) )
. then ( data => {
this . isLoading = false ;
eval ( 'this.' + dropdown + '=data' ) ;
} ) ;
} ,
loadCal ( ) {
const calendars = bulmaCalendar . attach ( '[type=date]' , { dateFormat : 'dd/MM/yyyy' , isRange : true } ) ;
// Loop on each calendar initialized
calendars . forEach ( calendar => {
calendar . on ( 'save' , data => {
this . date = {
from : calendar . startDate . toLocaleDateString ( ) ,
to : calendar . endDate . toLocaleDateString ( )
}
} ) ;
} ) ;
} ,
populateFeatureGrid ( grid ) {
const features = Alpine . store ( 'entity' ) ;
console . debug ( features ) ;
const featureCols = Object . getOwnPropertyNames ( Alpine . store ( 'entity' ) ) . filter ( name => aliasMap . has ( name ) ) ;
const featureVals = featureCols . map ( col => { return { feature : aliasMap . get ( col ) , value : features [ col ] } } ) ;
console . debug ( featureVals ) ;
new gridjs . Grid ( {
data : featureVals
} ) . render ( grid ) ;
} ,
drawDataChart ( ) {
if ( this . entityGroup != 'POSEIDON' )
return ;
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 => {
this . isLoading = false ;
console . debug ( data ) ;
} ) ;
const config = {
type : 'line' ,
data : data ,
options : {
responsive : true ,
plugins : {
legend : {
position : 'top' ,
} ,
title : {
display : true ,
text : 'Chart.js Line Chart'
}
}
} ,
} ;
}
} ;
}
function mruInfo ( ) {
return {
dopen : false ,
copen : false ,
loading : false ,
d : { } ,
c : { } ,
tagName ( type , id ) {
if ( id == null )
return ;
if ( type === 'd' ) {
return this . d . find ( i => i . id == id ) . code ;
} else if ( type === 'c' ) {
return this . c . find ( i => i . id == id ) . code ;
}
} ,
bid : Alpine . store ( 'mru' ) . objectid ,
did : null ,
cid : [ ] ,
date : { } ,
search ( ) {
generateRequest ( this . did , this . cid , this . date . from , this . date . to , this . bid ) ;
} ,
selectEntry ( element , entry ) {
console . debug ( element . text . substr ( 0 , element . text . indexOf ( ' ' ) ) ) ;
if ( element . id . split ( '-' ) [ 1 ] === 'desc' ) {
// highlight
element . parentElement . querySelectorAll ( 'a' ) . forEach ( el => el . classList . remove ( 'is-active' ) ) ;
element . classList . add ( 'is-active' ) ;
// update variables;
this . cid = [ ] ;
this . did = entry ;
this . dopen = false ;
} else if ( element . id . split ( '-' ) [ 1 ] === 'crit' ) {
// toggle
element . classList . toggle ( 'is-active' ) ;
// update variables;
this . cid . indexOf ( entry ) === - 1 ? this . cid . push ( entry ) : this . cid = this . cid . filter ( function ( id ) { return id !== entry } ) ;
this . copen = false ;
// add tag
}
} ,
getDropdownData ( dropdown ) {
this . loading = true ;
let url = BASE _URL ;
switch ( dropdown ) {
case 'd' :
url += '/interface/dropdowns/descriptors?bodyid=' + this . bid ;
break ;
case 'c' :
url += '/interface/dropdowns/criterias?descriptor_id=' + this . did ;
break ;
}
fetch ( url )
. then ( res => res . json ( ) )
. then ( data => {
this . isLoading = false ;
eval ( 'this.' + dropdown + '=data' ) ;
} ) ;
} ,
loadCal ( ) {
const calendars = bulmaCalendar . attach ( '[type=date]' , { dateFormat : 'dd/MM/yyyy' , isRange : true } ) ;
// Loop on each calendar initialized
calendars . forEach ( calendar => {
calendar . on ( 'save' , data => {
this . date = {
from : calendar . startDate . toLocaleDateString ( ) ,
to : calendar . endDate . toLocaleDateString ( )
}
} ) ;
} ) ;
} ,
populateFeatureGrid ( grid ) {
console . debug ( grid ) ;
const features = Alpine . store ( 'mru' ) ;
const featureCols = Object . getOwnPropertyNames ( Alpine . store ( 'mru' ) ) . filter ( name => aliasMap . has ( name ) ) ;
const featureVals = featureCols . map ( col => { return { feature : aliasMap . get ( col ) , value : features [ col ] } } ) ;
console . debug ( featureVals ) ;
new gridjs . Grid ( {
data : featureVals
} ) . render ( grid ) ;
}
} ;
}