Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions client/api/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,14 @@ const index = {
});
},

getDataDuree(): Promise<any> {
const runtimeConfig = useRuntimeConfig();
return useFetch(`/data/duree`, {
method: 'GET',
baseURL: runtimeConfig.public.apiSecheresseUrl,
});
},

getArretesRestrictions(date: string, area?: string): Promise<any> {
const runtimeConfig = useRuntimeConfig();
return useFetch(`/arretes_restrictions?date=${date}&${area ? area : ''}`, {
Expand Down
23 changes: 21 additions & 2 deletions client/components/carte/Map.vue
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ const departementCode = route.query.depCode;
const showRestrictionsBtn = ref(true);
const showError = ref(false);
const refDataStore = useRefDataStore();
const depsSelected = ref([]);

const initialState = [[-7.075195, 41.211722], [11.403809, 51.248163]];

Expand Down Expand Up @@ -100,7 +101,7 @@ onMounted(() => {
break;
}
}
map.value?.addSource('cadastre', {
map.value?.addSource('decoupage-administratif', {
type: 'vector',
url:
`https://openmaptiles.data.gouv.fr/data/decoupage-administratif.json`,
Expand Down Expand Up @@ -203,6 +204,10 @@ const updateContourFilter = () => {
map.value?.setFilter('zones-contour', ['all', ['==', 'type', selectedTypeEau.value], ['==', 'id', zoneSelected.value]]);
};

const updateDepartementsContourFilter = () => {
map.value?.setFilter('departements-contour', ['in', 'code', ...depsSelected.value.map((d: any) => d.code)]);
};

const closeModal = () => {
modalOpened.value = false;
};
Expand Down Expand Up @@ -256,7 +261,7 @@ const addSourceAndLayerZones = (pmtilesUrl: string) => {
map.value?.addLayer({
id: 'departements-data',
type: 'line',
source: 'cadastre',
source: 'decoupage-administratif',
'source-layer': 'departements',
layout: {
'line-join': 'round',
Expand All @@ -268,6 +273,18 @@ const addSourceAndLayerZones = (pmtilesUrl: string) => {
},
}, firstSymbolId);

map.value?.addLayer({
id: 'departements-contour',
type: 'line',
source: 'decoupage-administratif',
'source-layer': 'departements',
filter: ['all', ['in', 'code', ...depsSelected.value.map((d: any) => d.code)]],
paint: {
'line-color': '#000091',
'line-width': 2,
},
}, firstSymbolId);

map.value?.addLayer({
id: 'zones-contour',
type: 'line',
Expand Down Expand Up @@ -357,6 +374,8 @@ watch(() => props.area, () => {
padding: 30,
});
}
depsSelected.value = deps;
updateDepartementsContourFilter();
});
</script>

Expand Down
122 changes: 122 additions & 0 deletions client/components/carte/commune/Filter.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
<script setup lang="ts">
import { BassinVersant } from '../../../dto/bassinVersant.dto';
import { Region } from '../../../dto/region.dto';
import { Departement } from '../../../dto/departement.dto';
import { useRefDataStore } from '../../../store/refData';
import moment from 'moment';

const emit = defineEmits<{
filterChange: any;
}>();

const refDataStore = useRefDataStore();
const dateMin = ref('2013-01');
const currentDate = moment();
const tmp = moment();
tmp.subtract(1, 'year');
const dateDebut = ref(tmp.format('YYYY-MM'));
const dateFin = ref(currentDate.format('YYYY-MM'));
const area = ref('');
const computeDisabled = ref(false);

const areaOptions = ref([]);

const loadData = (() => {
const areaText = areaOptions.value.find(a => a.value === area.value)?.text
emit('filterChange', {
dateDebut: dateDebut.value,
dateFin: dateFin.value,
area: area.value,
areaText: areaText,
});
computeDisabled.value = true;
});

watch(() => refDataStore.departements, () => {
areaOptions.value = [{
text: 'France entière',
value: '',
}];
areaOptions.value.push({
text: 'Bassins Versants',
disabled: true,
});
refDataStore.bassinsVersants.forEach((b: BassinVersant) => {
areaOptions.value.push({
text: b.nom,
value: `bassinVersant=${b.id}`,
});
});
areaOptions.value.push({
text: 'Régions',
disabled: true,
});
refDataStore.regions.forEach((r: Region) => {
areaOptions.value.push({
text: r.nom,
value: `region=${r.id}`,
});
});
areaOptions.value.push({
text: 'Départements',
disabled: true,
});
refDataStore.departements.forEach((d: Departement) => {
areaOptions.value.push({
text: d.nom,
value: `departement=${d.id}`,
});
});
}, {
immediate: true,
});
</script>

<template>
<div class="fr-grid-row fr-grid-row--gutters">
<div class="fr-col-3">
<DsfrSelect label="Territoire"
v-model="area"
@update:modelValue="computeDisabled = false"
:options="areaOptions" />
</div>
<div class="fr-col-3">
<DsfrInput
id="dateDebut"
v-model="dateDebut"
@update:modelValue="computeDisabled = false"
label="Date début"
label-visible
type="month"
name="dateDebutCarte"
:min="dateMin"
:max="dateFin"
/>
</div>
<div class="fr-col-3">
<DsfrInput
id="dateFin"
v-model="dateFin"
@update:modelValue="computeDisabled = false"
label="Date fin"
label-visible
type="month"
name="dateCarte"
:min="dateDebut"
:max="currentDate.format('YYYY-MM')"
/>
</div>
<div class="fr-col-3">
<DsfrButton :disabled="computeDisabled"
@click="loadData()">
Calculer
</DsfrButton>
</div>
</div>
</template>

<style lang="scss" scoped>
.fr-grid-row {
align-items: end;
}
</style>
Loading