Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

GSLUX-569: Time layers permalink (parent GSLUX-594) #70

Merged
merged 11 commits into from
Sep 8, 2023
Merged

GSLUX-569: Time layers permalink (parent GSLUX-594) #70

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
948e928
feat(permalink): add time layer
AlitaBernachot Aug 10, 2023
290ee31
fix(i18n): correction fr translation and configure '|' as the new sep…
AlitaBernachot Aug 31, 2023
3b8a55d
fix(map-composable): add strictequal when comparing layers
AlitaBernachot Sep 1, 2023
4e5a46e
feat(time-layer): add time layers in catalog fixture
AlitaBernachot Aug 31, 2023
0049717
fix(layer-manager): extract bg layer from ul list for accessibility
AlitaBernachot Aug 31, 2023
c46ee84
fix(url-storage): add missing decodeUri when reading value
AlitaBernachot Sep 1, 2023
fc747d4
feat(time-layer): add new components slider and datepicker
AlitaBernachot Aug 31, 2023
0c338fe
test: update UTs according to evols in layer item component
AlitaBernachot Sep 6, 2023
096c1d9
fix(layer-composable): ignore undefined date end value in array
AlitaBernachot Sep 8, 2023
4e28788
fix(layer-time-datepicker): emitted event was not sending the new value
AlitaBernachot Sep 8, 2023
95d07b8
test: add missing e2e for datepicker when value mode
AlitaBernachot Sep 8, 2023
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
10 changes: 5 additions & 5 deletions cypress/e2e/layers-selection.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ describe('Catalogue', () => {

it('adds selected layers to the map and to the layer manager', () => {
cy.get('[data-cy="myLayersButton"]').click()
cy.get('[data-cy="myLayers"] > li').should('have.length', 3)
cy.get('[data-cy="myLayers"] > ul > li').should('have.length', 2)
})

it('displays title with updated number of layers', () => {
Expand All @@ -40,7 +40,7 @@ describe('Catalogue', () => {
cy.get('[data-cy="myLayers"]').find('button').eq(2).click()
cy.get('[data-cy="myLayers"]')
.find('button')
.eq(5)
.eq(4)
.click()
.should(() => {
expect(localStorage.getItem('opacities')).to.eq('1-0')
Expand All @@ -49,7 +49,7 @@ describe('Catalogue', () => {
cy.url().should('contains', 'opacities=1-0')
cy.get('[data-cy="myLayers"]')
.find('button')
.eq(5)
.eq(4)
.should('have.class', 'fa-eye-slash')
})
})
Expand All @@ -72,7 +72,7 @@ describe('Catalogue', () => {
})

cy.get('[data-cy="myLayersButton"]').click()
cy.get('[data-cy="myLayers"] > li').should('have.length', 3)
cy.get('[data-cy="myLayers"] > ul > li').should('have.length', 2)
})
})
})
Expand Down Expand Up @@ -104,6 +104,6 @@ describe('Remote layers', () => {
cy.get(
'[data-cy="layerLabel-WMS||http://wmts1.geoportail.lu/opendata/service||ortho_2001"]'
).click()
cy.get('[data-cy="myLayers"] > li').should('have.length', 2)
cy.get('[data-cy="myLayers"] > ul > li').should('have.length', 1)
})
})
78 changes: 77 additions & 1 deletion cypress/e2e/permalink/layers.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
describe('Permalink/State persistor - Layers', () => {
describe('Restore layers from url', () => {
describe('When layer opacities have values', () => {
it('updates the url with the right opacity', () => {
it('updates the input opacity with the right opacity', () => {
cy.visit(
'/?lang=lb&X=762744&Y=6414661&version=3&zoom=11&layers=346-354-269&opacities=0.5-1-0.7&bgLayer=orthogr_2013_global'
)
Expand Down Expand Up @@ -32,5 +32,81 @@ describe('Permalink/State persistor - Layers', () => {
})
})
})

describe('When layer times param have values', () => {
it('updates the layer items in the layer manager with the dates', () => {
cy.visit(
'/?version=3&layers=1860-1858-1859&opacities=1-1-1&time=2019-08-01T00%253A00%253A00Z%252F--2014-08-31T12%253A43%253A47Z%252F2020-12-31T23%253A59%253A59Z--2014-10-14T00%253A00%253A00Z%252F2020-12-31T00%253A00%253A00Z'
)
cy.get('[data-cy="myLayersButton"]').click()
cy.get('[data-cy="myLayers"] input.lux-time-datepicker')
.eq(0)
.should('have.value', '2014-10-14')
cy.get('[data-cy="myLayers"] input.lux-time-datepicker')
.eq(1)
.should('have.value', '2020-12-31')
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')
.eq(0)
.should('have.value', '9')
cy.get('[data-cy="myLayers"] .lux-time-slider-start-date')
.eq(0)
.should('have.text', '8-2019')
})
})
})

describe('Save layers to url', () => {
describe('When updating layer time with datepicker widget', () => {
it('updates the layer time (date start) in the url', () => {
cy.visit(
'/?version=3&lang=fr&layers=1859&time=2014-10-14T00%253A00%253A00Z%252F2020-12-31T00%253A00%253A00Z'
)
cy.get('[data-cy="myLayersButton"]').click()
cy.get('[data-cy="myLayers"] input.lux-time-datepicker')
.eq(0)
.type('2014-09-02')
cy.get('[data-cy="myLayers"] input.lux-time-datepicker')
.eq(0)
.trigger('change')
cy.url().should(
'contains',
'&time=2014-09-02T00%253A00%253A00Z%252F2020-12-31T00%253A00%253A00Z'
)
})

it('updates the layer time (date end) in the url', () => {
cy.visit(
'/?version=3&lang=fr&layers=1859&time=2014-10-14T00%253A00%253A00Z%252F2020-12-31T00%253A00%253A00Z'
)
cy.get('[data-cy="myLayersButton"]').click()
cy.get('[data-cy="myLayers"] input.lux-time-datepicker')
.eq(1)
.type('2020-12-29')
cy.get('[data-cy="myLayers"] input.lux-time-datepicker')
.eq(1)
.trigger('change')
cy.url().should(
'contains',
'&time=2014-10-14T00%253A00%253A00Z%252F2020-12-29T00%253A00%253A00Z'
)
})
})

describe('When updating layer time with slider widget', () => {
it('updates the layer time (date start) in the url', () => {
cy.visit(
'/?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')
.eq(0)
.trigger('change')
cy.url().should('contains', '&time=2022-08-01T00%253A00%253A00Z%252F')
})
})
})
})
27 changes: 27 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
"dependencies": {
"@camptocamp/ogc-client": "^0.3.4",
"file-saver": "^2.0.5",
"luxon": "^3.4.1",
"ol": "^6.5.0",
"pinia": "^2.0.26",
"sortablejs": "^1.15.0",
Expand All @@ -42,6 +43,7 @@
"@pinia/testing": "^0.0.14",
"@rushstack/eslint-patch": "^1.1.4",
"@types/jsdom": "^20.0.1",
"@types/luxon": "^3.3.1",
"@types/node": "^18.11.9",
"@types/proj4": "^2.5.2",
"@types/sortablejs": "^1.15.0",
Expand Down
2 changes: 1 addition & 1 deletion public/assets/locales/client.fr.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1752,7 +1752,7 @@
"Click to continue drawing the polygon.": "Cliquez pour continuer le dessin du poligone.",
"Click to continue drawing<br>Double-click or click last point to finish": "Cliquer pour continuer le dessin<br />Double cliquer ou cliquer sur le dernier point pour finir le dessin",
"Click to continue drawing<br>Double-click or click starting point to finish": "Cliquer pour continuer le dessin<br />Double cliquer ou cliquer sur le dernier point de départ pour finir le dessin",
"Date:": "Date:",
"Date:": "Date :",
"Does not match any criterion": "Ne correspond à aucun critère",
"Double-click or click last point to finish.": "Double cliquer ou cliquer sur le dernier point pour terminer.",
"Double-click or click starting point to finish.": "Double cliquer ou cliquer sur le premier point pour terminer.",
Expand Down
131 changes: 131 additions & 0 deletions src/__fixtures__/themes.api.fixture.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5850,6 +5850,137 @@ export const themesApiFixture = (): ConfigModel => ({
},
"mixed": true
},
{
"id": 1861,
"name": "time_layers",
"children": [
{
"id": 1857,
"name": "starkregen",
"metadata": {},
"dimensions": {},
"type": "WMS",
"layers": "starkregen",
"imageType": "image/png",
"childLayers": [
{
"name": "starkregen__0"
}
]
},
{
"id": 1858,
"name": "parz",
"metadata": {
"time_config": "{\"time_override\": {\"timepositions\": [\"2014-08-31T12:43:47.000Z/2020-12-31T23:59:59.000Z/P1M\"]}}"
},
"dimensions": {},
"type": "WMS",
"layers": "parzelle",
"imageType": "image/png",
"childLayers": [
{}
],
"time": {
"minValue": "2014-08-31T12:43:47Z",
"maxValue": "2020-12-31T23:59:59Z",
"interval": [
0,
1,
0,
0
],
"resolution": "second",
"minDefValue": "2014-08-31T12:43:47Z",
"maxDefValue": null,
"mode": "value",
"widget": "datepicker"
}
},
{
"id": 1859,
"name": "layer_datepicker_range",
"metadata": {
"time_config": "{\"time_override\": {\"timepositions\": [\"2014-08-31T12:43:47.000Z/2020-12-31T23:59:59.000Z/P1M\"]}}"
},
"dimensions": {},
"type": "WMS",
"layers": "layer_datepicker_range",
"imageType": "image/png",
"childLayers": [
{}
],
"time": {
"minValue": "2014-08-31T12:43:47Z",
"maxValue": "2020-12-31T23:59:59Z",
"interval": [
0,
1,
0,
0
],
"resolution": "second",
"minDefValue": "2014-08-31T12:43:47Z",
"maxDefValue": null,
"mode": "range",
"widget": "datepicker"
}
},
{
"id": 1860,
"name": "act_ortho_time",
"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": "act_ortho_time",
"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": "value",
"widget": "slider"
}
}
],
"metadata": {},
"mixed": true
},
{
"id": 484,
"name": "eau_new_Hydrografie",
Expand Down
20 changes: 20 additions & 0 deletions src/assets/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,6 +212,26 @@
border-color: var(--alert-warning-secondary);
color: var(--alert-warning-tertiary);
}

.lux-time-slider input[type='range']::-webkit-slider-thumb {
@apply bg-white h-5 w-2 rounded-full border-tertiary;
-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-label {
@apply mr-1 min-w-[1.75rem] inline-block;
}

.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 {
Expand Down
Loading
Loading