From 7128b375f26ac048173ad7abf1323c06362758a7 Mon Sep 17 00:00:00 2001 From: Cyrus Hiatt Date: Thu, 16 Jan 2025 15:47:21 -0800 Subject: [PATCH 1/7] Comment out popup - need to make optional --- .../components/MapComponent.vue | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/afrc/src/afrc/Search/components/InteractiveMap/components/MapComponent.vue b/afrc/src/afrc/Search/components/InteractiveMap/components/MapComponent.vue index 8d6f06f..6af5d03 100644 --- a/afrc/src/afrc/Search/components/InteractiveMap/components/MapComponent.vue +++ b/afrc/src/afrc/Search/components/InteractiveMap/components/MapComponent.vue @@ -104,7 +104,7 @@ const resourceOverlaysClickHandlers: { [key: string]: (e: MapMouseEvent) => void; } = {}; -const popupInstance: Ref = ref(null); +// const popupInstance: Ref = ref(null); const clickedFeatures: Ref = ref([]); const clickedCoordinates: Ref<[number, number]> = ref([0, 0]); const popupContainerRerenderKey = ref(0); @@ -143,15 +143,15 @@ watch( }, ); -watch(clickedFeatures, () => { - if (popupInstance.value) { - popupInstance.value.remove(); - } - popupInstance.value = new maplibregl.Popup() - .setLngLat(clickedCoordinates.value) - .setDOMContent(popupContainer.value!.$el) - .addTo(map.value!); -}); +// watch(clickedFeatures, () => { +// if (popupInstance.value) { +// popupInstance.value.remove(); +// } +// popupInstance.value = new maplibregl.Popup() +// .setLngLat(clickedCoordinates.value) +// .setDOMContent(popupContainer.value!.$el) +// .addTo(map.value!); +// }); onMounted(() => { createMap(); From 539fc9c89c2fc2e48c05aec71888f3709b05cfd9 Mon Sep 17 00:00:00 2001 From: Cyrus Hiatt Date: Thu, 16 Jan 2025 15:47:57 -0800 Subject: [PATCH 2/7] Add endpoint for resource json --- afrc/src/afrc/Search/api.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/afrc/src/afrc/Search/api.ts b/afrc/src/afrc/Search/api.ts index 2654d2f..04fbb54 100644 --- a/afrc/src/afrc/Search/api.ts +++ b/afrc/src/afrc/Search/api.ts @@ -60,5 +60,10 @@ export const createRequest = (url: string) => { }; }; +export const fetchResourceData = (resourceId: string) => { + const url = `${arches.urls["api_resources"](resourceId)}?format=json&v=beta` + return createRequest(url)(); +}; + export const fetchSettings = createRequest(arches.urls["api-settings"]); export const fetchMapData = createRequest(arches.urls["api-map-data"]); From 1135d9a2a545b1afeeebb57e3962db697d5239c9 Mon Sep 17 00:00:00 2001 From: Cyrus Hiatt Date: Thu, 16 Jan 2025 15:48:13 -0800 Subject: [PATCH 3/7] Remove unused file --- afrc/src/afrc/Search/components/MapView.vue | 19 ------------------- 1 file changed, 19 deletions(-) delete mode 100644 afrc/src/afrc/Search/components/MapView.vue diff --git a/afrc/src/afrc/Search/components/MapView.vue b/afrc/src/afrc/Search/components/MapView.vue deleted file mode 100644 index aaa40b4..0000000 --- a/afrc/src/afrc/Search/components/MapView.vue +++ /dev/null @@ -1,19 +0,0 @@ - - - - - From bff6ff7b47085b56a93ed013dd5416bc7f07253e Mon Sep 17 00:00:00 2001 From: Cyrus Hiatt Date: Thu, 16 Jan 2025 15:50:53 -0800 Subject: [PATCH 4/7] Set min so that details panel does not squish search results --- afrc/src/afrc/Search/SearchPage.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/afrc/src/afrc/Search/SearchPage.vue b/afrc/src/afrc/Search/SearchPage.vue index cb74c6f..8537204 100644 --- a/afrc/src/afrc/Search/SearchPage.vue +++ b/afrc/src/afrc/Search/SearchPage.vue @@ -260,6 +260,7 @@ section.afrc-search-results-panel { flex-grow: 1; margin: 15px; overflow-y: auto; + min-width: 350px; } .search-result-list { display: flex; From 60e55886406aed253f8512b2180f3a9ca71d1e00 Mon Sep 17 00:00:00 2001 From: Cyrus Hiatt Date: Thu, 16 Jan 2025 15:51:34 -0800 Subject: [PATCH 5/7] Add search details component --- afrc/src/afrc/Search/SearchPage.vue | 9 +- .../Search/components/SearchItemDetails.vue | 144 ++++++++++++++++++ .../Search/components/SearchResultItem.vue | 17 ++- 3 files changed, 164 insertions(+), 6 deletions(-) create mode 100644 afrc/src/afrc/Search/components/SearchItemDetails.vue diff --git a/afrc/src/afrc/Search/SearchPage.vue b/afrc/src/afrc/Search/SearchPage.vue index 8537204..0d69d24 100644 --- a/afrc/src/afrc/Search/SearchPage.vue +++ b/afrc/src/afrc/Search/SearchPage.vue @@ -12,6 +12,7 @@ import arches from "arches"; import SimpleSearchFilter from "@/afrc/Search/components/SimpleSearchFilter.vue"; import SearchResultItem from "@/afrc/Search/components/SearchResultItem.vue"; +import SearchItemDetails from "@/afrc/Search/components/SearchItemDetails.vue"; import InteractiveMap from "@/afrc/Search/components/InteractiveMap/InteractiveMap.vue"; import { fetchMapData } from "@/afrc/Search/api.ts"; import type { GenericObject } from "@/afrc/Search/types"; @@ -21,6 +22,7 @@ let query = getQueryObject(null); let queryString = ref(JSON.stringify(query)); let searchResults = ref([]); let resultsCount = ref("calculating..."); +let resultSelected = ref(""); const showMap = ref(false); const basemaps: Ref = ref([]); const overlays: Ref = ref([]); @@ -31,6 +33,7 @@ const toast = useToast(); const { $gettext } = useGettext(); provide("resultsSelected", resultsSelected); +provide("resultSelected", resultSelected); watch(queryString, () => { doQuery(); @@ -181,7 +184,11 @@ onMounted(async () => { /> - +
+ +
+import { onMounted, inject, ref, watch } from "vue"; +import { fetchResourceData } from "@/afrc/Search/api.ts"; +import type { Ref } from "vue"; +import Button from "primevue/button"; +import Carousel from 'primevue/carousel'; + +const resultSelected = inject("resultSelected") as Ref; +const resultsSelected = inject("resultsSelected") as Ref; + +let displayname = ref("") +let displaydescription = ref("") +let images = ref([]) + + + +onMounted(async () => { + getData(); +}); + +watch(resultSelected, () => { + getData() +}); + +async function getData() { + const resp = await fetchResourceData(resultSelected.value); + displayname.value = resp.displayname; + displaydescription.value = resp.displaydescription; + images.value = [ + 'http://www.minisimmonssurfboards.com/wp-content/uploads/2012/07/mini_simmons_round_tail.jpg', + 'https://www.minisimmonssurfboards.com/wp-content/uploads/2013/08/DOC-Mini-Simmons-1.jpg', + 'https://www.minisimmonssurfboards.com/wp-content/uploads/2013/06/20130606-222901.jpg', + 'https://www.surfboardsbygrantnewby.com/wp-content/uploads/2020/12/Traditional-Mini-Simmons.jpg', + 'https://i0.wp.com/www.minisimmonssurfboards.com/wp-content/uploads/2015/11/5_mandala_doubleRainbow_PinotNoir_1024x1024.jpg?resize=600%2C800', + 'https://3.bp.blogspot.com/-O0s9gHdDs-c/TW0i1DgLfBI/AAAAAAAAEMc/p3gwEQ9fziE/s1600/mini-simmons.jpg', + ]; +} + +function clearResult() { + resultSelected.value = ""; + resultsSelected.value = []; +} + + + + + + \ No newline at end of file diff --git a/afrc/src/afrc/Search/components/SearchResultItem.vue b/afrc/src/afrc/Search/components/SearchResultItem.vue index fba9f7c..b4c8597 100644 --- a/afrc/src/afrc/Search/components/SearchResultItem.vue +++ b/afrc/src/afrc/Search/components/SearchResultItem.vue @@ -7,6 +7,7 @@ import Button from "primevue/button"; import arches from "arches"; const resultsSelected = inject("resultsSelected") as Ref; +const resultSelected = inject("resultSelected") as Ref; const props = defineProps({ searchResult: { @@ -15,13 +16,19 @@ const props = defineProps({ }, }); +function highlightResult(resourceid: string) { + if (!resultSelected.value) { + resultsSelected.value = []; + resultsSelected.value = [resourceid]; + } +} + function selectResult(resourceid: string) { + resultSelected.value = ""; + resultSelected.value = resourceid; resultsSelected.value = [resourceid]; } -function clearResult() { - resultsSelected.value = []; -}