From 50c015026dd14b243629879d514e69637bfa131a Mon Sep 17 00:00:00 2001 From: AlitaBernachot Date: Mon, 11 Sep 2023 11:39:49 +0200 Subject: [PATCH 01/10] fix(layers-composable): don't provide current max time to layer when it is 'value' mode --- src/composables/layers/layers.composable.ts | 5 ++++- .../state-persistor/state-persistor-layer.mapper.spec.ts | 6 ------ 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/src/composables/layers/layers.composable.ts b/src/composables/layers/layers.composable.ts index 42361d1b..a28b86d3 100644 --- a/src/composables/layers/layers.composable.ts +++ b/src/composables/layers/layers.composable.ts @@ -4,6 +4,7 @@ import { Layer, LayerId, LAYER_CURRENT_TIME_SEPARATOR, + LayerTimeMode, } from '@/stores/map.store.model' import { useMapStore } from '@/stores/map.store' import { useThemeStore } from '@/stores/config.store' @@ -49,7 +50,9 @@ export default function useLayers() { layer.time?.minDefValue ?? layer.time?.minValue } - if (!layer.currentTimeMaxValue) { + const isRange = layer.time?.mode === LayerTimeMode.RANGE + + if (!layer.currentTimeMaxValue && isRange) { layer.currentTimeMaxValue = layer.time?.maxDefValue ?? layer.time?.maxValue } diff --git a/src/services/state-persistor/state-persistor-layer.mapper.spec.ts b/src/services/state-persistor/state-persistor-layer.mapper.spec.ts index a259a610..9fe66f60 100644 --- a/src/services/state-persistor/state-persistor-layer.mapper.spec.ts +++ b/src/services/state-persistor/state-persistor-layer.mapper.spec.ts @@ -82,7 +82,6 @@ describe('StorageLayerMapper', () => { opacity: 1, previousOpacity: 1, currentTimeMinValue: undefined, - currentTimeMaxValue: undefined, }, { id: 360, @@ -93,7 +92,6 @@ describe('StorageLayerMapper', () => { opacity: 1, previousOpacity: 1, currentTimeMinValue: undefined, - currentTimeMaxValue: undefined, }, ]) }) @@ -110,7 +108,6 @@ describe('StorageLayerMapper', () => { opacity: 1, previousOpacity: 1, currentTimeMinValue: undefined, - currentTimeMaxValue: undefined, }, undefined, { @@ -122,7 +119,6 @@ describe('StorageLayerMapper', () => { opacity: 1, previousOpacity: 1, currentTimeMinValue: undefined, - currentTimeMaxValue: undefined, }, ] ) @@ -139,7 +135,6 @@ describe('StorageLayerMapper', () => { opacity: 1, previousOpacity: 1, currentTimeMinValue: undefined, - currentTimeMaxValue: undefined, }, undefined, ]) @@ -161,7 +156,6 @@ describe('StorageLayerMapper', () => { previousOpacity: 1, url: 'https://map.geoportail.lu/httpsproxy?url=www.mysuperserver.com%2Fmytiles', currentTimeMinValue: undefined, - currentTimeMaxValue: undefined, }, ]) }) From af24dbe281fef181bddf8805e120e469d8780920 Mon Sep 17 00:00:00 2001 From: AlitaBernachot Date: Mon, 11 Sep 2023 16:32:32 +0200 Subject: [PATCH 02/10] feat(time-layer): add new component for date slider, range mode --- cypress/e2e/permalink/layers.cy.ts | 70 +++++++++++++- public/assets/locales/client.de.json | 4 +- public/assets/locales/client.en.json | 4 +- public/assets/locales/client.fr.json | 4 +- public/assets/locales/client.lb.json | 4 +- src/__fixtures__/themes.api.fixture.ts | 51 ++++++++++ src/assets/main.css | 55 ++++++++++- .../slider-range/slider-range-thumb.vue | 92 +++++++++++++++++++ .../slider-range/slider-range-track.vue | 46 ++++++++++ .../common/slider-range/slider-range.vue | 51 ++++++++++ .../layer-time/layer-time-slider.vue | 67 +++++++++++--- 11 files changed, 422 insertions(+), 26 deletions(-) create mode 100644 src/components/common/slider-range/slider-range-thumb.vue create mode 100644 src/components/common/slider-range/slider-range-track.vue create mode 100644 src/components/common/slider-range/slider-range.vue diff --git a/cypress/e2e/permalink/layers.cy.ts b/cypress/e2e/permalink/layers.cy.ts index 6dcd3742..f91c13b2 100644 --- a/cypress/e2e/permalink/layers.cy.ts +++ b/cypress/e2e/permalink/layers.cy.ts @@ -48,10 +48,10 @@ describe('Permalink/State persistor - Layers', () => { cy.get('[data-cy="myLayers"] input.lux-time-datepicker') .eq(2) .should('have.value', '2014-08-31') - cy.get('[data-cy="myLayers"] input.lux-time-slidebar') + cy.get('[data-cy="myLayers"] input.lux-slidebar') .eq(0) .should('have.value', '9') - cy.get('[data-cy="myLayers"] .lux-time-slider-start-date') + cy.get('[data-cy="myLayers"] .lux-time-start-date') .eq(0) .should('have.text', '8-2019') }) @@ -127,12 +127,74 @@ describe('Permalink/State persistor - Layers', () => { '/?version=3&lang=fr&layers=1860&time=2019-01-01T00%253A00%253A00Z%252F' ) cy.get('[data-cy="myLayersButton"]').click() - cy.get('[data-cy="myLayers"] input.lux-time-slidebar').eq(0).type('2') - cy.get('[data-cy="myLayers"] input.lux-time-slidebar') + cy.get('[data-cy="myLayers"] input.lux-slidebar').eq(0).type('2') + cy.get('[data-cy="myLayers"] input.lux-slidebar') .eq(0) .trigger('change') cy.url().should('contains', '&time=2022-08-01T00%253A00%253A00Z') }) }) + + describe('When updating layer time with slider widget with range mode', () => { + it('increases the layer time (date start) in the url', () => { + cy.visit( + '/?version=3&lang=fr&layers=99999&time=2007-08-01T00%253A00%253A00Z%252F2019-01-01T00%253A00%253A00Z' + ) + cy.get('[data-cy="myLayersButton"]').click() + cy.get('[data-cy="myLayers"] .lux-slidebar-thumb').eq(0).focus() + cy.get('[data-cy="myLayers"] .lux-slidebar-thumb') + .eq(0) + .type('{rightArrow}') + cy.url().should( + 'contains', + '&time=2010-08-01T00%253A00%253A00Z%252F2019-01-01T00%253A00%253A00Z&' + ) + }) + + it('decreases the layer time (date start) in the url', () => { + cy.visit( + '/?version=3&lang=fr&layers=99999&time=2007-08-01T00%253A00%253A00Z%252F2019-01-01T00%253A00%253A00Z' + ) + cy.get('[data-cy="myLayersButton"]').click() + cy.get('[data-cy="myLayers"] .lux-slidebar-thumb').eq(0).focus() + cy.get('[data-cy="myLayers"] .lux-slidebar-thumb') + .eq(0) + .type('{leftArrow}') + cy.url().should( + 'contains', + '&time=2004-08-01T00%253A00%253A00Z%252F2019-01-01T00%253A00%253A00Z&' + ) + }) + + it('increases the layer time (date end) in the url', () => { + cy.visit( + '/?version=3&lang=fr&layers=99999&time=2007-08-01T00%253A00%253A00Z%252F2019-01-01T00%253A00%253A00Z' + ) + cy.get('[data-cy="myLayersButton"]').click() + cy.get('[data-cy="myLayers"] .lux-slidebar-thumb').eq(1).focus() + cy.get('[data-cy="myLayers"] .lux-slidebar-thumb') + .eq(1) + .type('{rightArrow}') + cy.url().should( + 'contains', + '&time=2007-08-01T00%253A00%253A00Z%252F2019-08-01T00%253A00%253A00Z&' + ) + }) + + it('decreases the layer time (date end) in the url', () => { + cy.visit( + '/?version=3&lang=fr&layers=99999&time=2007-08-01T00%253A00%253A00Z%252F2019-01-01T00%253A00%253A00Z' + ) + cy.get('[data-cy="myLayersButton"]').click() + cy.get('[data-cy="myLayers"] .lux-slidebar-thumb').eq(1).focus() + cy.get('[data-cy="myLayers"] .lux-slidebar-thumb') + .eq(1) + .type('{leftArrow}') + cy.url().should( + 'contains', + '&time=2007-08-01T00%253A00%253A00Z%252F2018-08-01T00%253A00%253A00Z&' + ) + }) + }) }) }) diff --git a/public/assets/locales/client.de.json b/public/assets/locales/client.de.json index f550f226..ad7e1dea 100644 --- a/public/assets/locales/client.de.json +++ b/public/assets/locales/client.de.json @@ -4302,5 +4302,7 @@ "f_dc_connectors_available": "freie DC Ladepunkte", "f_ac_max_power": "Ladeleistung AC Watt", "f_ac_connectors_total": "AC Ladepunkte", - "f_ac_connectors_available": "freie AC Ladepunkte" + "f_ac_connectors_available": "freie AC Ladepunkte", + "Modifier la date de début": "", + "Modifier la date de fin": "" } diff --git a/public/assets/locales/client.en.json b/public/assets/locales/client.en.json index 6e3c4976..902207b3 100644 --- a/public/assets/locales/client.en.json +++ b/public/assets/locales/client.en.json @@ -4055,5 +4055,7 @@ "f_dc_connectors_available": "DC charge points available", "f_ac_max_power": "Power output AC Watt", "f_ac_connectors_total": "AC charge points", - "f_ac_connectors_available": "AC charge points available" + "f_ac_connectors_available": "AC charge points available", + "Modifier la date de début": "", + "Modifier la date de fin": "" } diff --git a/public/assets/locales/client.fr.json b/public/assets/locales/client.fr.json index 2a1a3fa2..3508886a 100644 --- a/public/assets/locales/client.fr.json +++ b/public/assets/locales/client.fr.json @@ -4304,5 +4304,7 @@ "f_dc_connectors_available": "Points de charge CC disponibles", "f_ac_max_power": "Puissance CA Watt", "f_ac_connectors_total": "Points de charge CA", - "f_ac_connectors_available": "Points de charge CA disponibles" + "f_ac_connectors_available": "Points de charge CA disponibles", + "Modifier la date de début": "Modifier la date de début", + "Modifier la date de fin": "Modifier la date de fin" } diff --git a/public/assets/locales/client.lb.json b/public/assets/locales/client.lb.json index 42918102..a71c44b7 100644 --- a/public/assets/locales/client.lb.json +++ b/public/assets/locales/client.lb.json @@ -4062,5 +4062,7 @@ "f_dc_connectors_available": "fräi DC Luetpunkte", "f_ac_max_power": "Ladeleistung AC Watt", "f_ac_connectors_total": "AC Luetpunkte", - "f_ac_connectors_available": "fräi AC Luetpunkte" + "f_ac_connectors_available": "fräi AC Luetpunkte", + "Modifier la date de début": "", + "Modifier la date de fin": "" } diff --git a/src/__fixtures__/themes.api.fixture.ts b/src/__fixtures__/themes.api.fixture.ts index be469cbc..2dcc988c 100644 --- a/src/__fixtures__/themes.api.fixture.ts +++ b/src/__fixtures__/themes.api.fixture.ts @@ -5976,6 +5976,57 @@ export const themesApiFixture = (): ConfigModel => ({ "mode": "value", "widget": "slider" } + }, + { + "id": 99999, + "name": "layer_slider_range", + "metadata": { + "time_config": "{\"default_time\":\"2022-08\",\"time_links\":{\"2001-08\":\"ortho_2001\",\"2004-08\":\"ortho_2004\",\"2007-08\":\"ortho_2007\",\"2010-08\":\"ortho_2010\",\"2013-08\":\"ortho_2013\",\"2016-08\":\"ortho_2016\",\"2017-08\":\"ortho_2017\",\"2018-08\":\"ortho_2018\",\"2019-01\":\"ortho_2019_winter\",\"2019-08\":\"ortho_2019\",\"2020-08\":\"ortho_2020\",\"2021-08\":\"ortho_2021\",\"2022-08\":\"ortho_2022\"}}", + "time_layers": { + "2001-08-01T00:00:00Z": "ortho_2001", + "2004-08-01T00:00:00Z": "ortho_2004", + "2007-08-01T00:00:00Z": "ortho_2007", + "2010-08-01T00:00:00Z": "ortho_2010", + "2013-08-01T00:00:00Z": "ortho_2013", + "2016-08-01T00:00:00Z": "ortho_2016", + "2017-08-01T00:00:00Z": "ortho_2017", + "2018-08-01T00:00:00Z": "ortho_2018", + "2019-01-01T00:00:00Z": "ortho_2019_winter", + "2019-08-01T00:00:00Z": "ortho_2019", + "2020-08-01T00:00:00Z": "ortho_2020", + "2021-08-01T00:00:00Z": "ortho_2021", + "2022-08-01T00:00:00Z": "ortho_2022" + } + }, + "dimensions": {}, + "type": "WMTS", + "url": "http://wmts.geoportail.lu/mapproxy_4_v3/wmts/1.0.0/WMTSCapabilities.xml", + "layer": "layer_slider_range", + "imageType": "image/jpeg", + "time": { + "minValue": "2001-08-01T00:00:00Z", + "maxValue": "2022-08-01T00:00:00Z", + "values": [ + "2001-08-01T00:00:00Z", + "2004-08-01T00:00:00Z", + "2007-08-01T00:00:00Z", + "2010-08-01T00:00:00Z", + "2013-08-01T00:00:00Z", + "2016-08-01T00:00:00Z", + "2017-08-01T00:00:00Z", + "2018-08-01T00:00:00Z", + "2019-01-01T00:00:00Z", + "2019-08-01T00:00:00Z", + "2020-08-01T00:00:00Z", + "2021-08-01T00:00:00Z", + "2022-08-01T00:00:00Z" + ], + "resolution": "month", + "minDefValue": "2022-08-01T00:00:00Z", + "maxDefValue": null, + "mode": "range", + "widget": "slider" + } } ], "metadata": {}, diff --git a/src/assets/main.css b/src/assets/main.css index 7afbc429..fceedd6a 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -213,14 +213,63 @@ color: var(--alert-warning-tertiary); } + .lux-time-displayed-dates { + @apply flex w-full; + } + + .lux-slidebar-thumb { + @apply bg-white h-5 w-[0.55rem] rounded-full border-tertiary absolute top-0 z-[2]; + box-shadow: 0.1rem 0.1rem 0.1rem rgba(0, 0, 49, 0.2), + 0 0 0.1rem rgba(0, 0, 75, 0.2); + border: 0.1rem solid rgba(0, 0, 30, 0.2); + } + .lux-time-slider input[type='range']::-webkit-slider-thumb { - @apply bg-white h-5 w-2 rounded-full border-tertiary; + @apply bg-white h-5 w-[0.55rem] rounded-full border-tertiary cursor-pointer; -webkit-appearance: none; box-shadow: 0.1rem 0.1rem 0.1rem rgba(0, 0, 49, 0.2), 0 0 0.1rem rgba(0, 0, 75, 0.2); border: 0.1rem solid rgba(0, 0, 30, 0.2); } + .lux-time-slider input[type='range']::-moz-range-thumb { + @apply bg-white h-5 w-[0.55rem] rounded-full border-tertiary cursor-pointer; + box-shadow: 0.1rem 0.1rem 0.1rem rgba(0, 0, 49, 0.2), + 0 0 0.1rem rgba(0, 0, 75, 0.2); + border: 0.1rem solid rgba(0, 0, 30, 0.2); + -moz-appearance: none; + } + + .lux-slidebar-thumb:focus, + .lux-slidebar-thumb:hover { + outline: 2px solid rgb(66, 66, 66); + box-shadow: 0.3rem 0.3rem 0.3rem rgba(0, 0, 49, 0.2), + 0 0 0.3rem rgba(0, 0, 75, 0.2); + } + + .lux-slidebar, + .lux-slidebar-track-full, + .lux-slidebar-track-selection { + @apply mt-2 mb-2 ml-0 mr-0 w-full h-1 bg-[#d3e5d7] rounded-sm appearance-none; + } + + .lux-slidebar-fake { + @apply relative h-5; + } + + .lux-slidebar-track { + @apply relative w-full; + } + + .lux-slidebar-track-full { + @apply top-0 absolute w-full z-0; + } + + .lux-slidebar-track-selection { + @apply top-0 absolute w-full z-[1]; + background-color: #94ac9a; + } + .lux-time-slider-label { @apply mr-1 min-w-[1.75rem] inline-block; } @@ -228,10 +277,6 @@ .lux-time-datepicker { @apply border-[#767676] border-[1px] pl-1; } - - .lux-time-slidebar { - @apply mt-2 mb-2 ml-0 mr-0 w-full h-1 bg-[#d3e5d7] rounded-sm appearance-none cursor-pointer; - } } .fa-solid { diff --git a/src/components/common/slider-range/slider-range-thumb.vue b/src/components/common/slider-range/slider-range-thumb.vue new file mode 100644 index 00000000..eafa8093 --- /dev/null +++ b/src/components/common/slider-range/slider-range-thumb.vue @@ -0,0 +1,92 @@ + + + diff --git a/src/components/common/slider-range/slider-range-track.vue b/src/components/common/slider-range/slider-range-track.vue new file mode 100644 index 00000000..7fc70fa9 --- /dev/null +++ b/src/components/common/slider-range/slider-range-track.vue @@ -0,0 +1,46 @@ + + + diff --git a/src/components/common/slider-range/slider-range.vue b/src/components/common/slider-range/slider-range.vue new file mode 100644 index 00000000..e5d5afb6 --- /dev/null +++ b/src/components/common/slider-range/slider-range.vue @@ -0,0 +1,51 @@ + + + diff --git a/src/components/layer-manager/layer-time/layer-time-slider.vue b/src/components/layer-manager/layer-time/layer-time-slider.vue index 03919fa0..1b6d023f 100644 --- a/src/components/layer-manager/layer-time/layer-time-slider.vue +++ b/src/components/layer-manager/layer-time/layer-time-slider.vue @@ -1,21 +1,30 @@