CINXE.COM
Online Virtual Flora of Wisconsin Taxon Profile
<!DOCTYPE html> <html lang="en"> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css"> <link href="/css/external/animate.min.css?ver=4.1.1" rel="stylesheet" type="text/css" /> <link href="/css/external/quasar.prod.css?ver=2.14.1" rel="stylesheet" type="text/css" /> <script src="/js/external/vue.global.prod.js?ver=2023-11-30" type="text/javascript"></script> <script src="/js/external/vue-demi.js?ver=2023-11-30" type="text/javascript"></script> <script src="/js/external/pinia.js?ver=2.1.7" type="text/javascript"></script> <script src="/js/external/all.min.js" type="text/javascript"></script> <script type="text/javascript"> const DEFAULT_LANG = 'en'; const CLIENT_ROOT = ''; const SOLR_MODE = false; const MAX_UPLOAD_FILESIZE = 8; const ADMIN_EMAIL = 'mfeist@wisc.edu'; const EMAIL_CONFIGURED = false; const VALID_USER = false; const SYMB_UID = 0; const USER_DISPLAY_NAME = ''; const TAXONOMIC_RANKS = JSON.parse('[10,30,60,100,140,180,220,230,240]'); const SPATIAL_INITIAL_ZOOM = 6.7266666666667; const SPATIAL_INITIAL_CENTER = [-89.86383393738733,44.98621945221015]; const SPATIAL_POINT_FILL_COLOR = 'E69E67'; const SPATIAL_POINT_BORDER_COLOR = '000000'; const SPATIAL_POINT_BORDER_WIDTH = 1; const SPATIAL_POINT_POINT_RADIUS = 4; const SPATIAL_POINT_SELECTIONS_BORDER_COLOR = '10D8E6'; const SPATIAL_POINT_SELECTIONS_BORDER_WIDTH = 2; const SPATIAL_SHAPES_FILL_COLOR = 'FFFFFF'; const SPATIAL_SHAPES_BORDER_COLOR = '3399CC'; const SPATIAL_SHAPES_BORDER_WIDTH = 2; const SPATIAL_SHAPES_POINT_RADIUS = 5; const SPATIAL_SHAPES_OPACITY = '0.4'; const SPATIAL_SHAPES_SELECTIONS_BORDER_COLOR = '0099FF'; const SPATIAL_SHAPES_SELECTIONS_FILL_COLOR = 'FFFFFF'; const SPATIAL_SHAPES_SELECTIONS_BORDER_WIDTH = 5; const SPATIAL_SHAPES_SELECTIONS_OPACITY = '0.5'; const SPATIAL_DRAGDROP_FILL_COLOR = 'AAAAAA'; const SPATIAL_DRAGDROP_BORDER_COLOR = '000000'; const SPATIAL_DRAGDROP_BORDER_WIDTH = 2; const SPATIAL_DRAGDROP_POINT_RADIUS = 5; const SPATIAL_DRAGDROP_OPACITY = '0.3'; const SPATIAL_DRAGDROP_RASTER_COLOR_SCALE = 'earth'; const http = new XMLHttpRequest(); let abortController; const profileApiUrl = CLIENT_ROOT + '/api/profile/profileController.php'; const proxyApiUrl = CLIENT_ROOT + '/api/proxy.php'; const checklistApiUrl = CLIENT_ROOT + '/api/checklists/checklistController.php'; const collectionApiUrl = CLIENT_ROOT + '/api/collections/collectionController.php'; const occurrenceTaxonomyApiUrl = CLIENT_ROOT + '/api/collections/occTaxonomyController.php'; const languageApiUrl = CLIENT_ROOT + '/api/misc/languageController.php'; const taxonomyApiUrl = CLIENT_ROOT + '/api/taxa/taxaController.php'; const taxaProfileApiUrl = CLIENT_ROOT + '/api/taxa/taxaProfileController.php'; const imageApiUrl = CLIENT_ROOT + '/api/images/imageController.php'; const mediaApiUrl = CLIENT_ROOT + '/api/media/mediaController.php'; const glossaryApiUrl = CLIENT_ROOT + '/api/glossary/glossaryController.php'; </script> <script src="/js/shared.js?ver=20230214" type="text/javascript"></script> <head> <title>Online Virtual Flora of Wisconsin Taxon Profile</title> <link href="/css/base.css?ver=20230929" rel="stylesheet" type="text/css" /> <link href="/css/main.css?ver=20230929" rel="stylesheet" type="text/css" /> <script src="/js/external/all.min.js" type="text/javascript"></script> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-74355153-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-74355153-1'); </script> <script type="text/javascript"> const taxonVal = Vue.ref('8657'); const clVal = Vue.ref(0); const isEditor = Vue.ref(false); </script> </head> <body> <div id="mainContainer"> <div id="bannerContainer"> <div style="width:850px;margin-left:auto;margin-right:auto;"> <img src="/content/imglib/layout/wiscflora_banner6.png" /> </div> </div> <div id="topNavigation"> <q-toolbar class="q-pa-md horizontalDropDown"> <template v-if="windowWidth < 1440"> <q-btn class="horizontalDropDownIconButton q-ml-md" flat round dense icon="menu"> <q-menu> <q-list dense> <template v-for="item in navBarData"> <template v-if="item.subItems && item.subItems.length"> <q-item clickable> <q-item-section>{{ item.label }}</q-item-section> <q-menu v-model="navBarToggle[item.id]" transition-duration="100" anchor="top end" self="top start"> <q-list dense> <template v-for="subitem in item.subItems"> <q-item clickable v-close-popup :href="subitem.url" :target="(subitem.newTab?'_blank':'_self')"> <q-item-section>{{ subitem.label }}</q-item-section> </q-item> </template> </q-list> </q-menu> </q-item> </template> <template v-else> <q-item clickable v-close-popup :href="item.url" :target="(item.newTab?'_blank':'_self')"> <q-item-section>{{ item.label }}</q-item-section> </q-item> </template> </template> </q-list> </q-menu> </q-btn> </template> <template v-if="windowWidth >= 1440"> <template v-for="item in navBarData"> <template v-if="item.subItems && item.subItems.length"> <q-btn class="horizontalDropDownButton text-capitalize" :href="item.url" :target="(item.newTab?'_blank':'_self')" :label="item.label" v-model="navBarToggle[item.id]" @mouseover="navbarToggleOn(item.id)" @mouseleave="navbarToggleOff(item.id)" stretch flat no-wrap> <q-menu v-model="navBarToggle[item.id]" transition-duration="100" anchor="bottom start" self="top start" square> <q-list dense @mouseover="navbarToggleOn(item.id)" @mouseleave="navbarToggleOff(item.id)"> <template v-for="subitem in item.subItems"> <q-item class="horizontalDropDownButton text-capitalize" :href="subitem.url" :target="(subitem.newTab?'_blank':'_self')" clickable v-close-popup> <q-item-section> <q-item-label>{{ subitem.label }}</q-item-label> </q-item-section> </q-item> </template> </q-list> </q-menu> </q-btn> </template> <template v-else> <q-btn class="horizontalDropDownButton text-capitalize" :href="item.url" :target="(item.newTab?'_blank':'_self')" :label="item.label" stretch flat no-wrap></q-btn> </template> </template> </template> <q-space></q-space> <template v-if="userDisplayName"> <q-breadcrumbs-el class="header-username-text">Welcome {{ userDisplayName }}!</q-breadcrumbs-el> <q-btn class="horizontalDropDownButton text-capitalize" href="/profile/viewprofile.php" label="My Profile" stretch flat no-wrap></q-btn> <q-btn class="horizontalDropDownButton text-capitalize" @click="logout();" label="Logout" stretch flat no-wrap></q-btn> </template> <template v-else> <q-btn class="horizontalDropDownButton text-capitalize" href="/profile/index.php?refurl=/taxa/index.php?taxon=8657" label="Log In" stretch flat no-wrap></q-btn> <q-btn class="horizontalDropDownButton text-capitalize" href="/profile/newprofile.php" label="New Account" stretch flat no-wrap></q-btn> </template> <q-btn class="horizontalDropDownButton text-capitalize" href="/sitemap.php" label="Sitemap" stretch flat no-wrap></q-btn> </q-toolbar> </div> <script> document.addEventListener("DOMContentLoaded", () => { const dropDownNavBar = Vue.createApp({ setup() { const navBarData = Vue.ref([ {url: CLIENT_ROOT + '/index.php', label: 'Home'}, { label: 'Advanced Searches', subItems: [ {url: CLIENT_ROOT + '/collections/index.php', label: 'SEARCH for Species & Specimen Records'}, {url: CLIENT_ROOT + '/imagelib/index.php', label: 'BROWSE the Flora & Image Library'}, {url: CLIENT_ROOT + '/spatial/index.php', label: 'Map Search', newTab: true} ] }, { label: 'Checklists', subItems: [ {url: CLIENT_ROOT + '/projects/index.php?proj=7', label: 'County Floras'}, {url: CLIENT_ROOT + '/projects/index.php?proj=8', label: 'Wildflowers by Color'}, {url: CLIENT_ROOT + '/projects/index.php?proj=9', label: 'Wildflowers by Month'}, {url: CLIENT_ROOT + '/projects/index.php?proj=11', label: 'Largest Plant Families'}, {url: CLIENT_ROOT + '/projects/index.php?proj=20', label: 'BCW Botany Blitzes'}, {url: CLIENT_ROOT + '/projects/index.php?proj=25', label: 'WIS/BCW Botany Forays'} ] }, { label: 'Floristic Projects', subItems: [ {url: CLIENT_ROOT + '/projects/index.php?proj=14', label: 'Brule River State Forest'}, {url: CLIENT_ROOT + '/projects/index.php?proj=15', label: 'Ridgeway Pine Relict SNA'}, {url: CLIENT_ROOT + '/projects/index.php?proj=23', label: 'Amsterdam Sloughs State Wildlife Area'}, {url: CLIENT_ROOT + '/projects/index.php?proj=21', label: 'Crex Meadows State Wildlife Area'}, {url: CLIENT_ROOT + '/projects/index.php?proj=24', label: 'Fish Lake State Wildlife Area'}, {url: CLIENT_ROOT + '/projects/index.php?proj=19', label: 'Navarino Cedar Swamp State Natural Area'} ] }, { label: 'Resources', subItems: [ {url: CLIENT_ROOT + '/resources/Keys_pdfs/KEYS_Asteraceae_of_Wisconsin.pdf', label: 'Asteraceae of Wisconsin', newTab: true}, {url: 'https://herbarium.wisc.edu/research/publications/', label: 'Atlas of the Wisconsin Prairie and Savanna Flora', newTab: true}, {url: CLIENT_ROOT + '/resources/Keys_pdfs/KEYS_Fern_Allies_of_Wisconsin.pdf', label: 'Fern Allies of Wisconsin', newTab: true}, {url: CLIENT_ROOT + '/resources/Keys_pdfs/KEYS_Ferns_of_Wisconsin.pdf', label: 'Ferns of Wisconsin', newTab: true}, {url: CLIENT_ROOT + '/resources/Keys_pdfs/KEYS_Gymnosperms_of_Wisconsin.pdf', label: 'Gymnosperms of Wisconsin', newTab: true} ] }, { label: 'For Further Information', subItems: [ {url: CLIENT_ROOT + '/collections/misc/collstats.php', label: 'About the Consortium of Wisconsin Herbaria'}, {url: 'https://herbarium.wisc.edu', label: 'WI State Herbarium', newTab: true}, {url: CLIENT_ROOT + '/misc/links.php', label: 'Links'} ] } ]); let navBarTimeout = null; const navBarToggle = Vue.ref({}); const userDisplayName = USER_DISPLAY_NAME; const windowWidth = Vue.ref(0); function handleResize() { windowWidth.value = window.innerWidth; } function logout() { const url = profileApiUrl + '?action=logout'; fetch(url) .then(() => { window.location.href = CLIENT_ROOT + '/index.php'; }) } function setNavBarData() { navBarData.value.forEach((dataObj, index) => { if(dataObj.hasOwnProperty('subItems')){ dataObj['id'] = index; navBarToggle[index] = false; } }); } Vue.onMounted(() => { setNavBarData(); window.addEventListener('resize', handleResize); handleResize(); }); return { navBarData, navBarToggle, navBarTimeout, userDisplayName, windowWidth, setNavBarData, handleResize, logout }; }, methods: { navbarToggleOff(id) { this.navBarTimeout = setTimeout(() => { this.navBarToggle[Number(id)] = false; }, 400); }, navbarToggleOn(id) { clearTimeout(this.navBarTimeout); for(let i in this.navBarToggle){ if(this.navBarToggle.hasOwnProperty(i) && Number(i) !== Number(id)){ this.navBarToggle[Number(i)] = false; } } this.navBarToggle[Number(id)] = true; } } }); dropDownNavBar.use(Quasar, { config: {} }); dropDownNavBar.mount('#topNavigation'); }); </script> <div id="inner-table"></div> <div class="footer"> <div style="display:block;color: white; text-align: center;"> © <a href="http://herbarium.wisc.edu/" title="Wisconsin State Herbarium home">Wisconsin State Herbarium, UW-Madison</a><br> Department of Botany <span><span>•<span style="display:inline-block"></span></span></span> 430 Lincoln Drive <span><span>•<span style="display:inline-block"></span></span></span> Madison, WI 53706 • Phone: 608-262-2792 <br>Direct comments to <a href="#"></a><a href="mailto:wisconsin.state.herbarium@gmail.com">wisconsin.state.herbarium@gmail.com</a> <br> </div> </div> </div> <script src="/js/external/quasar.umd.prod.js?ver=2.14.0" type="text/javascript"></script> <script> const { useQuasar, QSpinnerHourglass } = Quasar; </script> <script src="/components/taxonomy/taxaProfileEditButton.js?ver=20230715" type="text/javascript"></script> <script src="/components/taxonomy/taxaProfileScinameHeader.js?ver=20230715" type="text/javascript"></script> <script src="/components/taxonomy/taxaProfileNotFound.js?ver=20230715" type="text/javascript"></script> <script src="/components/taxonomy/taxaProfileTaxonNotes.js" type="text/javascript"></script> <script src="/components/taxonomy/taxaProfileTaxonFamily.js" type="text/javascript"></script> <script src="/components/taxonomy/taxaProfileTaxonVernaculars.js?ver=20230630" type="text/javascript"></script> <script src="/components/taxonomy/taxaProfileTaxonSynonyms.js?ver=20230630" type="text/javascript"></script> <script src="/components/taxonomy/taxaProfileCentralmage.js?ver=20230817" type="text/javascript"></script> <script src="/components/taxonomy/taxaProfileDescriptionTabs.js" type="text/javascript"></script> <script src="/components/taxonomy/taxaProfileTaxonMap.js?ver=20230817" type="text/javascript"></script> <script src="/components/taxonomy/taxaProfileTaxonImageLink.js?ver=20230817" type="text/javascript"></script> <script src="/components/taxonomy/taxaProfileTaxonOccurrenceLink.js?ver=20230817" type="text/javascript"></script> <script src="/components/taxonomy/taxaProfileSubtaxaPanel.js?ver=20230817" type="text/javascript"></script> <script src="/components/taxonomy/taxaProfileMediaPanel.js?ver=20230718" type="text/javascript"></script> <script src="/components/taxonomy/taxaProfileImageCarousel.js?ver=20230720" type="text/javascript"></script> <script> const taxonProfilePage = Vue.createApp({ template: ` <template v-if="loading"> <div class="fill-viewport"></div> </template> <template v-if="!loading"> <template v-if="taxon"> <div class="profile-split-row"> <div class="profile-column"> <taxa-profile-sciname-header :taxon="taxon" :style-class="styleClass"></taxa-profile-sciname-header> <taxa-profile-taxon-family :taxon="taxon"></taxa-profile-taxon-family> <taxa-profile-taxon-notes :taxon="taxon"></taxa-profile-taxon-notes> <taxa-profile-taxon-vernaculars :vernaculars="taxon.vernaculars"></taxa-profile-taxon-vernaculars> <taxa-profile-taxon-synonyms :synonyms="taxon.synonyms"></taxa-profile-taxon-synonyms> </div> <template v-if="isEditor"> <taxa-profile-edit-button :tid="taxon.tid"></taxa-profile-edit-button> </template> </div> <div class="profile-split-row"> <div class="left-column profile-column"> <taxa-profile-central-image :taxon="taxon" :central-image="centralImage" :is-editor="isEditor" @update:set-image-carousel="showImageCarousel"></taxa-profile-central-image> </div> <div class="right-column profile-column"> <taxa-profile-description-tabs :description-arr="descriptionArr" :glossary-arr="glossaryArr"></taxa-profile-description-tabs> </div> </div> <div class="row justify-between items-center q-mt-md"> <div> <taxa-profile-taxon-occurrence-link :taxon="taxon"></taxa-profile-taxon-occurrence-link> </div> <template v-if="taxon.imageCnt > 100"> <div> <taxa-profile-taxon-image-link :taxon="taxon"></taxa-profile-taxon-image-link> </div> </template> <div> <taxa-profile-taxon-map :taxon="taxon"></taxa-profile-taxon-map> </div> </div> <template v-if="taxon.rankId > 180 && fieldImageArr.length > 0"> <div class="profile-center-row"> <div class="expansion-container"> <q-card> <div class="q-pt-sm q-pl-md q-mb-md text-h6 text-weight-bold image-sideways-scroller-label"> Field Images </div> <q-scroll-area class="q-px-md img-sideways-scroller"> <div class="row no-wrap q-gutter-md"> <div v-for="image in fieldImageArr" :key="image" class="img-thumb q-mb-sm"> <a @click="showFieldImageCarousel(image.url);" class="cursor-pointer"> <q-img :src="image.url" fit="contain" height="240px" :title="image.caption" :alt="image.sciname"></q-img> </a> <div class="photographer"> <a :href="(clientRoot + '/taxa/index.php?taxon=' + image.tid)"> <span>{{ image.photographer }}</span> </a> </div> </div> </div> </q-scroll-area> </q-card> </div> </div> </template> <template v-if="taxon.rankId > 180 && specimenImageArr.length > 0"> <div class="profile-center-row"> <div class="expansion-container"> <q-card> <div class="q-pt-sm q-pl-md q-mb-md text-h6 text-weight-bold image-sideways-scroller-label"> Specimen Images </div> <q-scroll-area class="q-px-md img-sideways-scroller"> <div class="row no-wrap q-gutter-md"> <div v-for="image in specimenImageArr" :key="image" class="img-thumb q-mb-sm"> <a @click="showSpecimenImageCarousel(image.url);" class="cursor-pointer"> <q-img :src="image.url" fit="contain" height="240px" :title="image.caption" :alt="image.sciname"></q-img> </a> <div class="photographer"> <a :href="(clientRoot + '/collections/individual/index.php?occid=' + image.occid)" target="_blank"> <template v-if="image.catalognumber || image.othercatalognumbers"> {{ image.catalognumber ? image.catalognumber : '' }}{{ image.catalognumber && image.othercatalognumbers ? '/' : '' }}{{ image.othercatalognumbers ? image.othercatalognumbers : '' }} </template> <template v-else> [See Full Record] </template> </a> </div> </div> </div> </q-scroll-area> </q-card> </div> </div> </template> <div class="profile-center-row"> <taxa-profile-subtaxa-panel :subtaxa-arr="subtaxaArr" :subtaxa-label="subtaxaLabel" :subtaxa-expansion-label="subtaxaExpansionLabel" :is-editor="isEditor" :collapsible="false"></taxa-profile-subtaxa-panel> </div> </template> <template v-else> <taxa-profile-not-found :taxon-value="taxonValue" :fuzzy-matches="fuzzyMatches"></taxa-profile-not-found> </template> <template v-if="taxon.rankId > 180"> <q-dialog v-model="fieldImageCarousel" persistent full-width full-height> <taxa-profile-image-carousel :image-arr="fieldImageArr" :image-index="fieldImageCarouselSlide" @update:show-image-carousel="toggleFieldImageCarousel" @update:current-image="updateFieldImageCarousel"></taxa-profile-image-carousel> </q-dialog> <q-dialog v-model="specimenImageCarousel" persistent full-width full-height> <taxa-profile-image-carousel :image-arr="specimenImageArr" :image-index="specimenImageCarouselSlide" @update:show-image-carousel="toggleSpecimenImageCarousel" @update:current-image="updateSpecimenImageCarousel"></taxa-profile-image-carousel> </q-dialog> </template> </template> `, data() { return { audioArr: Vue.ref({}), centralImage: Vue.ref(null), clientRoot: Vue.ref(CLIENT_ROOT), clValue: clVal, descriptionArr: Vue.ref([]), fieldImageArr: Vue.ref([]), fieldImageCarousel: Vue.ref(false), fieldImageCarouselSlide: Vue.ref(null), glossaryArr: Vue.ref([]), isEditor: isEditor, fuzzyMatches: Vue.ref([]), loading: Vue.ref(true), specimenImageArr: Vue.ref([]), specimenImageCarousel: Vue.ref(false), specimenImageCarouselSlide: Vue.ref(null), subtaxaArr: Vue.ref([]), subtaxaExpansionLabel: Vue.ref(''), subtaxaLabel: Vue.ref(''), styleClass: Vue.ref(null), taxon: Vue.ref(null), taxonValue: taxonVal } }, components: { 'taxa-profile-edit-button': taxaProfileEditButton, 'taxa-profile-sciname-header': taxaProfileScinameHeader, 'taxa-profile-not-found': taxaProfileNotFound, 'taxa-profile-taxon-notes': taxaProfileTaxonNotes, 'taxa-profile-taxon-family': taxaProfileTaxonFamily, 'taxa-profile-taxon-vernaculars': taxaProfileTaxonVernaculars, 'taxa-profile-taxon-synonyms': taxaProfileTaxonSynonyms, 'taxa-profile-central-image': taxaProfileCentralImage, 'taxa-profile-description-tabs': taxaProfileDescriptionTabs, 'taxa-profile-taxon-map': taxaProfileTaxonMap, 'taxa-profile-taxon-image-link': taxaProfileTaxonImageLink, 'taxa-profile-taxon-occurrence-link': taxaProfileTaxonOccurrenceLink, 'taxa-profile-subtaxa-panel': taxaProfileSubtaxaPanel, 'taxa-profile-media-panel': taxaProfileMediaPanel, 'taxa-profile-image-carousel': taxaProfileImageCarousel }, setup () { const $q = useQuasar(); return { showLoading(){ $q.loading.show({ spinner: QSpinnerHourglass, spinnerColor: 'primary', spinnerSize: 140, backgroundColor: 'grey', message: 'Loading...', messageColor: 'primary', customClass: 'text-h4' }) }, hideLoading(){ $q.loading.hide(); } } }, mounted() { this.showLoading(); this.setTaxon(); }, methods: { processDescriptions(descArr){ if(descArr.length > 0){ descArr.forEach((desc) => { if((!desc['source'] || desc['source'] === '') && (desc['sourceurl'] && desc['sourceurl'] !== '')){ desc['source'] = desc['sourceurl']; } desc['stmts'].forEach((stmt) => { if(stmt['statement'] && stmt['statement'] !== ''){ if(stmt['statement'].startsWith('<p>')){ stmt['statement'] = stmt['statement'].slice(3); } if(stmt['statement'].endsWith('</p>')){ stmt['statement'] = stmt['statement'].substring(0, stmt['statement'].length - 4); } if(Number(stmt['displayheader']) === 1 && stmt['heading'] && stmt['heading'] !== ''){ const headingText = '<span class="desc-statement-heading">' + stmt['heading'] + '</span>: '; stmt['statement'] = headingText + stmt['statement']; } } }); }); } this.descriptionArr = descArr; }, processImages(){ this.taxon['images'].forEach((image) => { if(Number(image['occid']) > 0){ image['anchorUrl'] = CLIENT_ROOT + '/collections/individual/index.php?occid=' + image['occid']; if(image['basisofrecord'].includes('Observation')){ this.fieldImageArr.push(image); } else{ this.specimenImageArr.push(image); } } else{ image['anchorUrl'] = CLIENT_ROOT + '/imagelib/imgdetails.php?imgid=' + image['id']; this.fieldImageArr.push(image); } }); if(this.fieldImageArr.length > 0){ this.centralImage = this.fieldImageArr[0]; } else{ this.centralImage = this.specimenImageArr[0]; } this.loading = false; this.hideLoading(); }, processSubtaxa(){ if(this.taxon['clName']){ this.subtaxaLabel = 'Subtaxa within ' + this.taxon['clName']; } else{ this.subtaxaLabel = 'Subtaxa'; } this.subtaxaExpansionLabel = 'View All ' + this.subtaxaLabel; for(let i in this.taxon['sppArr']){ if(this.taxon['sppArr'].hasOwnProperty(i)){ const subTaxon = this.taxon['sppArr'][i]; this.subtaxaArr.push(subTaxon); } } }, setGlossary(){ const formData = new FormData(); formData.append('tid', this.taxon['tid']); formData.append('action', 'getTaxonGlossary'); fetch(glossaryApiUrl, { method: 'POST', body: formData }) .then((response) => { if(response.status === 200){ response.json().then((resObj) => { this.glossaryArr = resObj; }); } }); }, setStyleClass(){ if(Number(this.taxon['rankId']) > 180){ this.styleClass = 'species'; } else if(Number(this.taxon['rankId']) === 180){ this.styleClass = 'genus'; } else{ this.styleClass = 'higher'; } }, setTaxon(){ const formData = new FormData(); formData.append('taxonStr', this.taxonValue); formData.append('clid', this.clValue); formData.append('action', 'setTaxon'); fetch(taxaProfileApiUrl, { method: 'POST', body: formData }) .then((response) => { if(response.status === 200){ response.json().then((resObj) => { if(resObj.hasOwnProperty('submittedTid')){ this.taxon = resObj; this.setStyleClass(); this.setTaxonDescriptions(); this.setGlossary(); this.processSubtaxa(); if(Number(this.taxon['rankId']) > 180){ this.setTaxonFieldImages(100); } else{ this.setTaxonFieldImages(1); } } else if(this.taxonValue !== ''){ const formData = new FormData(); formData.append('sciname', this.taxonValue); formData.append('lev', '2'); formData.append('action', 'getSciNameFuzzyMatches'); fetch(taxonomyApiUrl, { method: 'POST', body: formData }) .then((response) => { if(response.status === 200){ response.json().then((matches) => { this.fuzzyMatches = matches; }); } }); } else{ window.location.href = CLIENT_ROOT + '/index.php'; } }); } }); }, setTaxonDescriptions(){ const formData = new FormData(); formData.append('tid', this.taxon['tid']); formData.append('action', 'getTaxonDescriptions'); fetch(taxonomyApiUrl, { method: 'POST', body: formData }) .then((response) => { if(response.status === 200){ response.json().then((resObj) => { this.processDescriptions(resObj); }); } }); }, setTaxonFieldImages(limit){ const formData = new FormData(); formData.append('tid', this.taxon['tid']); formData.append('mediatypa', 'taxon'); formData.append('limit', limit); formData.append('action', 'getTaxonMedia'); fetch(taxaProfileApiUrl, { method: 'POST', body: formData }) .then((response) => { if(response.status === 200){ response.json().then((resObj) => { this.taxon['images'] = resObj['images']; if(Number(this.taxon['rankId']) > 180){ this.setTaxonSpecimenImages(); } else{ this.processImages(); } }); } }); }, setTaxonSpecimenImages(){ const formData = new FormData(); formData.append('tid', this.taxon['tid']); formData.append('mediatypa', 'occurrence'); formData.append('limit', '100'); formData.append('action', 'getTaxonMedia'); fetch(taxaProfileApiUrl, { method: 'POST', body: formData }) .then((response) => { if(response.status === 200){ response.json().then((resObj) => { this.taxon['images'] = this.taxon['images'].concat(resObj['images']);; this.processImages(); }); } }); }, showFieldImageCarousel(index){ this.fieldImageCarouselSlide = index; this.fieldImageCarousel = true; }, showSpecimenImageCarousel(index){ this.specimenImageCarouselSlide = index; this.specimenImageCarousel = true; }, toggleFieldImageCarousel(val){ this.fieldImageCarousel = val; }, toggleSpecimenImageCarousel(val){ this.specimenImageCarousel = val; }, updateFieldImageCarousel(val){ this.fieldImageCarouselSlide = val; }, updateSpecimenImageCarousel(val){ this.specimenImageCarouselSlide = val; } } }); taxonProfilePage.use(Quasar, { config: {} }); taxonProfilePage.mount('#inner-table'); </script> </body> </html>