From a37ba5628fb753f35b3f71f7cd7583bdb322393d Mon Sep 17 00:00:00 2001 From: Mike VanDenburgh Date: Tue, 29 Nov 2022 16:39:00 -0500 Subject: [PATCH 01/10] Accept query params in site evaluations REST function --- vue/src/client/services/ApiService.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/vue/src/client/services/ApiService.ts b/vue/src/client/services/ApiService.ts index d4bd76b57..a8b714781 100644 --- a/vue/src/client/services/ApiService.ts +++ b/vue/src/client/services/ApiService.ts @@ -25,10 +25,13 @@ export class ApiService { * @returns SiteEvaluationList * @throws ApiError */ - public static getSiteEvaluations(): CancelablePromise { + public static getSiteEvaluations( + query?: Record + ): CancelablePromise { return __request(OpenAPI, { method: "GET", url: "/api/evaluations", + query, }); } From a1f9e7db40d2c2c25a987b0413a855f27f9b6216 Mon Sep 17 00:00:00 2001 From: Mike VanDenburgh Date: Tue, 29 Nov 2022 16:44:46 -0500 Subject: [PATCH 02/10] Return performer as a vector tile attribute --- django/src/rdwatch/views/tile.py | 1 + 1 file changed, 1 insertion(+) diff --git a/django/src/rdwatch/views/tile.py b/django/src/rdwatch/views/tile.py index bf7f750a5..5efb1ac70 100644 --- a/django/src/rdwatch/views/tile.py +++ b/django/src/rdwatch/views/tile.py @@ -86,6 +86,7 @@ def vector_tile( order_by="timestamp", # type: ignore ), ), + performer=F("siteeval__configuration__performer__slug"), ) ) ( From f65fec3fbe8f1cf1a93f204eb3491d61606708ac Mon Sep 17 00:00:00 2001 From: Mike VanDenburgh Date: Tue, 29 Nov 2022 19:04:40 -0500 Subject: [PATCH 03/10] Return list of performers in vector tile endpoint --- django/src/rdwatch/serializers/site_evaluation.py | 1 + django/src/rdwatch/views/site_evaluation.py | 4 ++++ 2 files changed, 5 insertions(+) diff --git a/django/src/rdwatch/serializers/site_evaluation.py b/django/src/rdwatch/serializers/site_evaluation.py index 77d6a226f..7e86affec 100644 --- a/django/src/rdwatch/serializers/site_evaluation.py +++ b/django/src/rdwatch/serializers/site_evaluation.py @@ -35,6 +35,7 @@ class SiteEvaluationListSerializer(serializers.Serializer): count = serializers.IntegerField() timerange = TimeRangeSerializer() bbox = BoundingBoxSerializer() + performers = serializers.ListField() results = SiteEvaluationSerializer(many=True) next = serializers.CharField() previous = serializers.CharField() diff --git a/django/src/rdwatch/views/site_evaluation.py b/django/src/rdwatch/views/site_evaluation.py index e3a1ffca1..15b52506e 100644 --- a/django/src/rdwatch/views/site_evaluation.py +++ b/django/src/rdwatch/views/site_evaluation.py @@ -62,6 +62,10 @@ def site_evaluations(request: HttpRequest): bbox=BoundingBox(Collect("geom")), ) + overview["performers"] = SiteEvaluation.objects.values_list( + "configuration__performer__slug", flat=True + ).distinct() + # Pagination assert api_settings.PAGE_SIZE, "PAGE_SIZE must be set." paginator = Paginator(queryset, api_settings.PAGE_SIZE) From 8642f6c8e51b88cf3087f43f6342a882b0fa80c0 Mon Sep 17 00:00:00 2001 From: Mike VanDenburgh Date: Tue, 29 Nov 2022 19:00:42 -0500 Subject: [PATCH 04/10] Regenerate openapi types --- vue/src/client/models/SiteEvaluationList.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/vue/src/client/models/SiteEvaluationList.ts b/vue/src/client/models/SiteEvaluationList.ts index b5a36ece9..997c9b05f 100644 --- a/vue/src/client/models/SiteEvaluationList.ts +++ b/vue/src/client/models/SiteEvaluationList.ts @@ -14,6 +14,7 @@ export type SiteEvaluationList = { ymin: number; ymax: number; }; + performers: Array; results: Array<{ id: number; site: string; @@ -35,4 +36,6 @@ export type SiteEvaluationList = { ymax: number; }; }>; + next: string; + previous: string; }; From 2e9b197b4f2b6937d733b15da7d314c624ec04dc Mon Sep 17 00:00:00 2001 From: Mike VanDenburgh Date: Tue, 29 Nov 2022 16:45:28 -0500 Subject: [PATCH 05/10] Add `filters` object to store --- vue/src/store.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/vue/src/store.ts b/vue/src/store.ts index e1964c14b..3d90ae551 100644 --- a/vue/src/store.ts +++ b/vue/src/store.ts @@ -8,4 +8,5 @@ export const state = reactive({ xmax: 180, ymax: 90, }, + filters: {}, }); From 2e1a2937100efc427bf76e32cca21e582c4fe3df Mon Sep 17 00:00:00 2001 From: Mike VanDenburgh Date: Tue, 29 Nov 2022 16:45:48 -0500 Subject: [PATCH 06/10] Add type annotation for the store --- vue/src/store.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/vue/src/store.ts b/vue/src/store.ts index 3d90ae551..4522880af 100644 --- a/vue/src/store.ts +++ b/vue/src/store.ts @@ -1,6 +1,10 @@ import { reactive } from "vue"; -export const state = reactive({ +export const state = reactive<{ + timestamp: number; + bbox: { xmin: number; ymin: number; xmax: number; ymax: number }; + filters: Record; +}>({ timestamp: Math.floor(Date.now() / 1000), bbox: { xmin: -180, From d4144f972a7ef8a79d631bf459bef87586ef198a Mon Sep 17 00:00:00 2001 From: Mike VanDenburgh Date: Tue, 29 Nov 2022 16:59:09 -0500 Subject: [PATCH 07/10] Accept arbitrary filters for MapLibre polygons --- vue/src/components/MapLibre.vue | 24 +++++++++---------- vue/src/mapstyle/index.ts | 7 ++++-- vue/src/mapstyle/rdwatchtiles.ts | 41 +++++++++++++++++++++----------- 3 files changed, 44 insertions(+), 28 deletions(-) diff --git a/vue/src/components/MapLibre.vue b/vue/src/components/MapLibre.vue index f451738ab..1fd88ce07 100644 --- a/vue/src/components/MapLibre.vue +++ b/vue/src/components/MapLibre.vue @@ -37,7 +37,7 @@ onMounted(() => { map.value = markRaw( new Map({ container: mapContainer.value, - style: style(state.timestamp), + style: style(state.timestamp, state.filters), bounds: [ [state.bbox.xmin, state.bbox.ymin], [state.bbox.xmax, state.bbox.ymax], @@ -51,17 +51,17 @@ onUnmounted(() => { map.value?.remove(); }); -watch( - () => state.timestamp, - (val) => { - const siteFilter = buildSiteFilter(val); - const observationFilter = buildObservationFilter(val); - setFilter("sites-outline", siteFilter); - setFilter("observations-fill", observationFilter); - setFilter("observations-outline", observationFilter); - setFilter("observations-text", observationFilter); - } -); +watch([() => state.timestamp, () => state.filters], () => { + const siteFilter = buildSiteFilter(state.timestamp); + const observationFilter = buildObservationFilter( + state.timestamp, + state.filters + ); + setFilter("sites-outline", siteFilter); + setFilter("observations-fill", observationFilter); + setFilter("observations-outline", observationFilter); + setFilter("observations-text", observationFilter); +}); watch( () => state.bbox, diff --git a/vue/src/mapstyle/index.ts b/vue/src/mapstyle/index.ts index 41f196bc8..8153d8f9c 100644 --- a/vue/src/mapstyle/index.ts +++ b/vue/src/mapstyle/index.ts @@ -12,7 +12,10 @@ import { } from "./rdwatchtiles"; import type { StyleSpecification } from "maplibre-gl"; -export const style = (timestamp: number): StyleSpecification => ({ +export const style = ( + timestamp: number, + filters: Record +): StyleSpecification => ({ version: 8, sources: { ...naturalearthSources, @@ -29,6 +32,6 @@ export const style = (timestamp: number): StyleSpecification => ({ }, ...naturalearthLayers, ...openmaptilesLayers, - ...rdwatchtilesLayers(timestamp), + ...rdwatchtilesLayers(timestamp, filters), ], }); diff --git a/vue/src/mapstyle/rdwatchtiles.ts b/vue/src/mapstyle/rdwatchtiles.ts index ee48d297d..4dd00501f 100644 --- a/vue/src/mapstyle/rdwatchtiles.ts +++ b/vue/src/mapstyle/rdwatchtiles.ts @@ -10,16 +10,26 @@ import type { } from "maplibre-gl"; export const buildObservationFilter = ( - timestamp: number -): FilterSpecification => [ - "all", - ["<=", ["get", "timemin"], timestamp], - [ - "any", - [">", ["get", "timemax"], timestamp], - ["==", ["get", "timemin"], ["get", "timemax"]], - ], -]; + timestamp: number, + filters: Record +): FilterSpecification => { + const filter: FilterSpecification = [ + "all", + ["<=", ["get", "timemin"], timestamp], + [ + "any", + [">", ["get", "timemax"], timestamp], + ["==", ["get", "timemin"], ["get", "timemax"]], + ], + ]; + + // Add any filters set in the UI + Object.entries(filters).forEach(([key, value]) => { + filter.push(["==", ["get", key], value]); + }); + + return filter; +}; export const buildSiteFilter = (timestamp: number): FilterSpecification => [ "<=", @@ -48,7 +58,10 @@ const source: SourceSpecification = { }; export const sources = { rdwatchtiles: source }; -export const layers = (timestamp: number): LayerSpecification[] => [ +export const layers = ( + timestamp: number, + filters: Record +): LayerSpecification[] => [ { id: "sites-outline", type: "line", @@ -69,7 +82,7 @@ export const layers = (timestamp: number): LayerSpecification[] => [ "fill-color": observationColor, "fill-opacity": 0.05, }, - filter: buildObservationFilter(timestamp), + filter: buildObservationFilter(timestamp, filters), }, { id: "observations-outline", @@ -80,7 +93,7 @@ export const layers = (timestamp: number): LayerSpecification[] => [ "line-color": observationColor, "line-width": 2, }, - filter: buildObservationFilter(timestamp), + filter: buildObservationFilter(timestamp, filters), }, { id: "observations-text", @@ -106,6 +119,6 @@ export const layers = (timestamp: number): LayerSpecification[] => [ paint: { "text-color": observationColor, }, - filter: buildObservationFilter(timestamp), + filter: buildObservationFilter(timestamp, filters), }, ]; From 3ef9515f972477bfe3f7bcf434a14954b783b6b6 Mon Sep 17 00:00:00 2001 From: Mike VanDenburgh Date: Tue, 29 Nov 2022 19:00:26 -0500 Subject: [PATCH 08/10] Install DaisyUI --- vue/package-lock.json | 136 ++++++++++++++++++++++++++++++++++++++++ vue/package.json | 1 + vue/tailwind.config.cjs | 5 +- 3 files changed, 141 insertions(+), 1 deletion(-) diff --git a/vue/package-lock.json b/vue/package-lock.json index c87614af0..f5292883e 100644 --- a/vue/package-lock.json +++ b/vue/package-lock.json @@ -19,6 +19,7 @@ "@vitejs/plugin-vue": "^3.0.0", "@vue/test-utils": "^2.0.2", "autoprefixer": "^10.4.7", + "daisyui": "^2.42.1", "eslint": "^8.20.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-vue": "^9.2.0", @@ -1184,6 +1185,19 @@ "node": ">=6" } }, + "node_modules/color": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz", + "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1", + "color-string": "^1.9.0" + }, + "engines": { + "node": ">=12.5.0" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -1202,6 +1216,16 @@ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "dev": true }, + "node_modules/color-string": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz", + "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==", + "dev": true, + "dependencies": { + "color-name": "^1.0.0", + "simple-swizzle": "^0.2.2" + } + }, "node_modules/colord": { "version": "2.9.2", "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.2.tgz", @@ -1262,6 +1286,16 @@ "node": ">=12.22" } }, + "node_modules/css-selector-tokenizer": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz", + "integrity": "sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==", + "dev": true, + "dependencies": { + "cssesc": "^3.0.0", + "fastparse": "^1.1.2" + } + }, "node_modules/csscolorparser": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz", @@ -1284,6 +1318,22 @@ "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz", "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==" }, + "node_modules/daisyui": { + "version": "2.42.1", + "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-2.42.1.tgz", + "integrity": "sha512-IVeEvP8gvOzHR47fMrOp2YocQJMRmYskhdt7OsuhKJNn+YzLRGOpVpY7AGXt/56pYeYy7h03THHXRTW5cVU9rQ==", + "dev": true, + "dependencies": { + "color": "^4.2", + "css-selector-tokenizer": "^0.8.0", + "postcss-js": "^4.0.0", + "tailwindcss": "^3" + }, + "peerDependencies": { + "autoprefixer": "^10.0.2", + "postcss": "^8.1.6" + } + }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -2180,6 +2230,12 @@ "node": ">= 4.9.1" } }, + "node_modules/fastparse": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz", + "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==", + "dev": true + }, "node_modules/fastq": { "version": "1.13.0", "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz", @@ -3912,6 +3968,21 @@ "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==", "dev": true }, + "node_modules/simple-swizzle": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz", + "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==", + "dev": true, + "dependencies": { + "is-arrayish": "^0.3.1" + } + }, + "node_modules/simple-swizzle/node_modules/is-arrayish": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz", + "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==", + "dev": true + }, "node_modules/slash": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", @@ -5646,6 +5717,16 @@ "is-regexp": "^2.0.0" } }, + "color": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz", + "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==", + "dev": true, + "requires": { + "color-convert": "^2.0.1", + "color-string": "^1.9.0" + } + }, "color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -5661,6 +5742,16 @@ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "dev": true }, + "color-string": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz", + "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==", + "dev": true, + "requires": { + "color-name": "^1.0.0", + "simple-swizzle": "^0.2.2" + } + }, "colord": { "version": "2.9.2", "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.2.tgz", @@ -5709,6 +5800,16 @@ "integrity": "sha512-/9lCvYZaUbBGvYUgYGFJ4dcYiyqdhSjG7IPVluoV8A1ILjkF7ilmhp1OGUz8n+nmBcu0RNrQAzgD8B6FJbrt2w==", "dev": true }, + "css-selector-tokenizer": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz", + "integrity": "sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==", + "dev": true, + "requires": { + "cssesc": "^3.0.0", + "fastparse": "^1.1.2" + } + }, "csscolorparser": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz", @@ -5725,6 +5826,18 @@ "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz", "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==" }, + "daisyui": { + "version": "2.42.1", + "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-2.42.1.tgz", + "integrity": "sha512-IVeEvP8gvOzHR47fMrOp2YocQJMRmYskhdt7OsuhKJNn+YzLRGOpVpY7AGXt/56pYeYy7h03THHXRTW5cVU9rQ==", + "dev": true, + "requires": { + "color": "^4.2", + "css-selector-tokenizer": "^0.8.0", + "postcss-js": "^4.0.0", + "tailwindcss": "^3" + } + }, "debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -6304,6 +6417,12 @@ "integrity": "sha512-tFfWHjnuUfKE186Tfgr+jtaFc0mZTApEgKDOeyN+FwOqRkO/zK/3h1AiRd8u8CY53owL3CUmGr/oI9p/RdyLTA==", "dev": true }, + "fastparse": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz", + "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==", + "dev": true + }, "fastq": { "version": "1.13.0", "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz", @@ -7538,6 +7657,23 @@ "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==", "dev": true }, + "simple-swizzle": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz", + "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==", + "dev": true, + "requires": { + "is-arrayish": "^0.3.1" + }, + "dependencies": { + "is-arrayish": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz", + "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==", + "dev": true + } + } + }, "slash": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", diff --git a/vue/package.json b/vue/package.json index 6c1683f13..47144bf87 100644 --- a/vue/package.json +++ b/vue/package.json @@ -32,6 +32,7 @@ "@vitejs/plugin-vue": "^3.0.0", "@vue/test-utils": "^2.0.2", "autoprefixer": "^10.4.7", + "daisyui": "^2.42.1", "eslint": "^8.20.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-vue": "^9.2.0", diff --git a/vue/tailwind.config.cjs b/vue/tailwind.config.cjs index 244d3a242..6708b4cb5 100644 --- a/vue/tailwind.config.cjs +++ b/vue/tailwind.config.cjs @@ -6,5 +6,8 @@ module.exports = { mono: ["Iosevka", "monospace"], }, }, - plugins: [], + plugins: [require("daisyui")], + daisyui: { + themes: ['lofi'], + }, }; From 3cd4311c74e983f87eb3680b89d2d69f3320136d Mon Sep 17 00:00:00 2001 From: Mike VanDenburgh Date: Tue, 29 Nov 2022 19:05:16 -0500 Subject: [PATCH 09/10] Add UI for filtering by performer --- vue/src/components/SideBar.vue | 25 +++++++++++--- .../components/filters/PerformerFilter.vue | 33 +++++++++++++++++++ vue/src/components/filters/index.ts | 3 ++ 3 files changed, 56 insertions(+), 5 deletions(-) create mode 100644 vue/src/components/filters/PerformerFilter.vue create mode 100644 vue/src/components/filters/index.ts diff --git a/vue/src/components/SideBar.vue b/vue/src/components/SideBar.vue index 4943effc6..c92699b8f 100644 --- a/vue/src/components/SideBar.vue +++ b/vue/src/components/SideBar.vue @@ -2,6 +2,7 @@ import EvaluationList from "./EvaluationList.vue"; import TimeSlider from "./TimeSlider.vue"; import { state } from "../store"; +import { filters } from "./filters"; import { ApiService } from "../client"; import { ref, watch, watchEffect } from "vue"; import type { SiteEvaluationList } from "../client"; @@ -25,12 +26,23 @@ watch(openedEvaluation, (val) => { state.bbox = val !== undefined ? val.bbox : evaluations.value.bbox; } }); + +async function filterEvaluations(field: string, value: string) { + const query = { + [field]: value, + }; + evaluations.value = await ApiService.getSiteEvaluations(query); + timemin.value = evaluations.value.timerange.min; + state.bbox = evaluations.value.bbox; + state.filters = query; +}