<template>
<div class="row">
<autocomplete :options="parent.baseLayers" v-model="parent.selectedBaseLayer" :label="$t('Base layer')"
style="width:250px;" :searchable="false" :clearable="false" />
<autocomplete :options="dataSources" v-model="parent.selectedDataSource" :label="$t('Data source')"
@update:model-value="selectedDataSourceUpdated" :clearable="false" style="width:250px;" />
<autocomplete v-if="shapes.length > 0" :options="shapes" :searchable="false" v-model="parent.selectedShape"
:label="$t('Shape')" style="width:250px;" />
<autocomplete :options="indicators" v-model="parent.selectedIndicator" :label="$t('Indicator')"
style="width:250px;" />
<q-btn v-if="parent.selectedIndicator" flat no-caps :label="$t('Frequencies')"
@click="parent.showFrequencies" />
<q-checkbox v-if="parent.selectedIndicator" class="q-pa-none q-ml-sm" style="background-color: white"
v-model="parent.showPoints" :label="$t('Points')" left-label dense />
<q-checkbox v-if="parent.showPoints && parent.selectedIndicator" class="q-ml-sm" v-model="parent.clustered"
:label="$t('Clustered')" left-label dense />
<autocomplete :options="nutsLevels" v-model="parent.nutsLevel" :label="$t('NUTS level')" style="width:140px;"
:searchable="false" />
<q-select :options="srids" v-model="parent.srid" :label="$t('Projection')" style="width:130px;" dense
optionsDense />
<q-checkbox v-model="parent.trackPosition" :label="$t('Track position')" left-label dense class="q-ml-sm" />
<q-checkbox v-model="parent.showEditableSource" :label="$t('Custom geometries')" left-label dense
class="q-ml-sm" />
<autocomplete :options="sourceTitles" v-model="parent.selectedTitle" @update:model-value="selectedTitleUpdated"
style="width:300px; " :label="$t('Catalog')" />
<autocomplete v-if="depths.length > 0" :options="depths" v-model="selectedDepth" :clearable="false"
:searchable="false" @update:model-value="selectedDepthUpdated" style="width:300px" :label="$t('Depth')" />
<q-btn size="sm" padding="xs" flat v-if="parent.selectedCatalog && parent.selectedCatalog.value < this.max"
icon="arrow_back" @click="back" />
<autocomplete :label="$t('Date')" :options="parent.sources" v-model="parent.selectedCatalog" :searchable="false"
:clearable="false" style="width:240px;" />
<q-btn size="sm" padding="xs" flat v-if="parent.selectedCatalog && parent.selectedCatalog.value > 1"
icon="arrow_forward" @click="forward" />
<span class="text-subtitle2 q-mt-sm">{{ $t('Opacity') }}</span>
<q-slider v-model="parent.opacity" label :min="0.0" :max="1." :step="0.05" dense />
<q-checkbox v-model="parent.info" :label="$t('Info')" left-label dense class="q-ml-sm" />
</div>
</template>
<script lang='js'>
/**
* Toolbar for various advance operation on the map.
*
* @component
* @name OedceToolbar
* @example
* <OedceToolbar />
*/
import Autocomplete from "./autocomplete.vue";
export default {
name: "OedceToolbar",
components: {
Autocomplete
},
props: {
parent: {}
},
data() {
return {
depths: [],
dataSources: [],
sourceTitles: [],
selectedDepth: null,
indicators: [],
max: 0,
metadata: null,
srids: [],
nutsLevels: [
{ value: 0, label: "0" },
{ value: 1, label: "1" },
{ value: 2, label: "2" },
{ value: 3, label: "3" },
],
shapes: []
}
},
/**
* Lifecycle hook: Called after the component has been created.
* Sets the options to the data.
* Sets the srids to the store's srids.
* Sets the indicators to the store's indicators.
* Sets the dataSources to the store's dataSources.
* Calls the selectedDataSourceUpdated method.
*/
async mounted() {
//this.options = this.data;
this.srids = this.$store.catalogs.srids;
this.indicators = this.$store.catalogs.indicators;
this.dataSources = this.$store.catalogs.dataSources;
this.sourceTitles = await this.get("Home/GetTitles");
this.selectedDataSourceUpdated();
},
methods: {
/**
* Moves to the previous catalog.
*/
back() {
this.parent.selectedCatalog = this.parent.sources[this.parent.selectedCatalog.value];
},
/**
* Moves to the next catalog.
*/
forward() {
this.parent.selectedCatalog = this.parent.sources[this.parent.selectedCatalog.value - 2];
},
/**
* Updates the selected title.
*/
async selectedTitleUpdated() {
if (!this.parent.selectedTitle) {
this.parent.selectedDepth = null;
this.depths = [];
this.parent.selectedCatalog = null;
} else {
if (this.parent.selectedTitle.depth_list == null) {
this.depths = [];
this.selectedDepth = null;
} else {
this.depths = this.parent.selectedTitle.depth_list.split(",").map(x => { return { value: x.trim(), label: x.trim() } });
if (this.depths.length > 0)
this.selectedDepth = this.depths[0];
else
this.selectedDepth = null;
}
}
this.selectedDepthUpdated();
},
/**
* Updates the selected depth.
*/
async selectedDepthUpdated() {
if (this.parent.selectedTitle == null) return;
this.parent.sources = await this.api(this.axios.API.get, "Home/GetAssets", { params: { titleId: this.parent.selectedTitle.value, depth: this.selectedDepth ? this.selectedDepth.value : null, srid: this.parent.srid } });
this.max = this.parent.sources.length;
this.parent.selectedCatalog = this.parent.sources[0];
//this.selectedCatalogUpdated();
},
/**
* Updates the selected data source.
*/
async selectedDataSourceUpdated() {
this.parent.selectedShape = null;
if (!this.parent.selectedDataSource) {
this.shapes = [];
this.indicators = [];
} else {
let shapes = await this.get("Home/GetShapesForDataSource", { dataSourceId: this.parent.selectedDataSource.value }
);
if (shapes == "") {
this.shapes = [];
} else {
this.shapes = shapes;
}
let indicators = await this.get("Home/GetIndicatorsForDataSource", { dataSourceId: this.parent.selectedDataSource.value }
);
if (indicators == "") {
this.indicators = [];
} else {
this.indicators = indicators;
}
};
},
}
}
</script>
<style scoped>
.q-slider {
width: 150px;
margin-left: 20px;
margin-top: 10px;
}
</style>