Merge branch 'map-page' into develop_v2

app/frontend/package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.4.2",
+    "@fortawesome/fontawesome-svg-core": "^6.6.0",
     "@vueuse/core": "^10.5.0",
     "esri-leaflet": "^3.0.12",
     "leaflet": "^1.9.4",
@@ -42,4 +43,4 @@
     "start-server-and-test": "^2.0.0",
     "vite": "^4.4.9"
   }
-}
+}

app/frontend/src/components/SubmitButton.vue

@@ -4,13 +4,13 @@
     <v-btn :prepend-icon="mdiNumeric3CircleOutline" :disabled="true" width="100%">
       submit
     </v-btn>
-    <v-btn icon density="compact" size="small" class="ma-2">
+    <v-btn icon density="compact" size="small" class="ma-2" style="position: relative; left: 250px; top: -35px;">
       <v-icon :icon="mdiInformation" color="info">
       </v-icon>
       <v-dialog activator="parent" max-width="340">
         <template v-slot:default="{ isActive }">
           <v-card v-if="!canSubmit" color="primary" class="drawer-handle" max-width="300">
-            <v-card-title>Submit once you:</v-card-title>
+            <v-card-title>You can submit once you:</v-card-title>
             <v-card-text>
               <div v-if="!authStore.isLoggedIn">Log in</div>
               <div v-if="modelsStore.selectedModel == null">Select a dataset</div>

app/frontend/src/stores/domains.js

@@ -1,19 +1,21 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
+import hucImg from '@/assets/huc-image.png'
+import boxDrag from '@/assets/box-drag.png'
 
 export const useDomainsStore = defineStore('domains', () => {
   const domains = ref([
     {
       id: 1,
       name: 'Select using HUC12',
-      img: 'https://picsum.photos/400',
+      img: hucImg,
       enabled: true,
       info: 'Select a HUC12 boundary from the map that you want to use for subsetting.'
     },
     {
       id: 2,
       name: 'Draw a box',
-      img: 'https://picsum.photos/300',
+      img: boxDrag,
       enabled: false,
       info: 'Draw a box on the map to define the domain.'
     }

app/frontend/src/views/MapView.vue

@@ -2,23 +2,6 @@
   <v-overlay :model-value="!mapStore.mapLoaded" class="align-center justify-center">
     <v-progress-circular indeterminate :size="128"></v-progress-circular>
   </v-overlay>
-  <v-card v-show="!showModelSelect && !showDomainSelect" location="left" style="z-index: 9999"
-    :style="{ transform: translateFilter(), position: 'absolute' }" class="v-flex pa-2" max-width="300"
-    color="surface-variant">
-    <v-btn @click="toggleModelSelectDrawer" v-if="!showModelSelect"
-      :color="!modelsStore.selectedModel ? 'primary' : 'secondary'" width="100%">
-      <v-icon class="ma-1"
-        :icon="modelsStore.selectedModel ? mdiCheckCircleOutline : mdiNumeric1CircleOutline"></v-icon>
-      <span v-if="modelsStore.selectedModel">{{ modelsStore.selectedModel.shortName }}</span>
-      <span v-else>Select Data</span>
-    </v-btn>
-    <v-btn @click="toggleDomainSelectDrawer" :color="!hucsAreSelected ? 'primary' : 'secondary'" width="100%">
-      <v-icon class="ma-1" :icon="hucsAreSelected ? mdiCheckCircleOutline : mdiNumeric2CircleOutline"></v-icon>
-      <span v-if="!domainStore.selectedDomain">Define Domain</span>
-      <span v-else>{{ selectedDomain.name }}</span>
-    </v-btn>
-    <SubmitButton />
-  </v-card>
   <v-container v-if="!mdAndDown" fluid>
     <v-row fill-height style="height: calc(100vh - 165px)">
       <v-col v-if="showModelSelect || showDomainSelect" :cols="3" class="pa-0">
@@ -43,6 +26,23 @@
       </v-col>
     </v-row>
   </v-container>
+  <v-card v-show="!showModelSelect && !showDomainSelect" location="left" :style="getCardStyle()" class="v-flex pa-2"
+    max-width="300" color="surface-variant" max-height="145">
+    <v-btn @click="toggleModelSelectDrawer" v-if="!showModelSelect"
+      :color="!modelsStore.selectedModel ? 'primary' : 'secondary'" width="100%" class="mb-2">
+      <v-icon class="ma-1"
+        :icon="modelsStore.selectedModel ? mdiCheckCircleOutline : mdiNumeric1CircleOutline"></v-icon>
+      <span v-if="modelsStore.selectedModel">{{ modelsStore.selectedModel.shortName }}</span>
+      <span v-else>Select Data</span>
+    </v-btn>
+    <v-btn @click="toggleDomainSelectDrawer" :color="!hucsAreSelected ? 'primary' : 'secondary'" width="100%"
+      class="mb-2">
+      <v-icon class="ma-1" :icon="hucsAreSelected ? mdiCheckCircleOutline : mdiNumeric2CircleOutline"></v-icon>
+      <span v-if="!domainStore.selectedDomain">Define Domain</span>
+      <span v-else>{{ selectedDomain.name }}</span>
+    </v-btn>
+    <SubmitButton />
+  </v-card>
 </template>
 
 <script setup>
@@ -104,5 +104,20 @@ const translateFilter = () => {
   }
 }
 
+const getCardStyle = () => {
+  if (!mdAndDown.value) {
+    return { transform: translateFilter(), position: 'absolute', 'z-index': '9999' }
+  }
+  return {
+    position: 'absolute',
+    'z-index': '9999',
+    'top': '35vh',
+    'left': '5vw',
+    'width': '100%',
+    'padding': '0',
+    'margin': '0'
+  }
+}
+
 
 </script>