Merge pull request #591 from AmericanWhitewater/feature/migrate-to-mo…

…dernized-gauge-api

transition existing vue app to new modernized gauge API

Caddyfile

@@ -0,0 +1,4 @@
+# Proxy for wh2o-vue
+rivers.americanwhitewater.local {
+	reverse_proxy localhost:8080
+}

package.json

@@ -4,9 +4,7 @@
   "private": true,
   "author": "American Whitewater",
   "scripts": {
-    "serve": "vue-cli-service serve --public localhost:9669 --port 9669",
-    "dev": "vue-cli-service serve",
-    "dev:laravel": "vue-cli-service serve --public localhost:9669 --port 9669",
+    "serve": "vue-cli-service serve --public https://rivers.americanwhitewater.local --port 8080",
     "build": "vue-cli-service build",
     "test:unit": "vue-cli-service test:unit",
     "lint": "vue-cli-service lint",
@@ -25,6 +23,8 @@
     "@mapbox/mapbox-gl-draw": "^1.1.2",
     "@mapbox/mapbox-gl-draw-static-mode": "^1.0.1",
     "@tinymce/tinymce-vue": "^3.2.8",
+    "@trpc/client": "^11.0.0-next-beta.264",
+    "@trpc/server": "^11.0.0-next-beta.264",
     "@turf/along": "^6.0.1",
     "@turf/bbox": "^6.0.1",
     "@turf/bbox-polygon": "^6.0.1",
@@ -47,6 +47,7 @@
     "carbon-components": "^10.58.5",
     "chart.js": "^2.9.3",
     "core-js": "^3.6.5",
+    "decimal.js": "^10.4.3",
     "dotenv": "^10.0.0",
     "geojson-rbush": "^3.1.2",
     "graph-data-structure": "^1.12.0",
@@ -62,6 +63,7 @@
     "screenfull": "^5.0.2",
     "scroll-into-view-if-needed": "^2.2.24",
     "tinymce": "^5.10.7",
+    "trpc-transformer": "^2.4.1",
     "typescript": "^4.0.5",
     "v-year-calendar": "^1.0.2",
     "vue": "^2.6.11",

src/app/assets/scss/abstracts/_mixins.scss

@@ -17,12 +17,4 @@
   @include carbon--breakpoint('lg') {
     height: calc(100vh - 75px);
   }
-}
-
-@mixin flow-border($color) {
-  border-left: 0.5rem solid $color;
-
-  &:hover {
-    border-left: 1.5rem solid $color;
-  }
-}
+}

src/app/assets/scss/abstracts/_variables.scss

@@ -6,9 +6,21 @@ $flow-low: #FF8785;
 $flow-medium: #59E78D;
 
 //this will make the colors easy to scale across the application.
-$high-runnable: lighten($flow-medium, 15%);
+$high-runnable: darken($flow-medium, 15%);
 $med-runnable: $flow-medium;
-$low-runnable: darken($flow-medium, 15%);
+$low-runnable: lighten($flow-medium, 15%);
+$flow-warning: #ffcc00;
+
+// maps flow classes to their color
+$flow-map: (
+  "above-recommended": $flow-high,
+  "high-runnable": $high-runnable,
+  "medium-runnable": $med-runnable,
+  "migration-runnable": $med-runnable, // TODO: a temporary solution for handling legacy data
+  "low-runnable": $low-runnable,
+  "below-recommended": $flow-low,
+  "stale": #dfe3e6 // use ui-03 for unknown/stale
+);
 
 // high contrast/accessibility flow colors
 $bw-flow-high:#AEB8B8;

src/app/environment/index.js

@@ -17,9 +17,12 @@ const {
   VUE_APP_SATELLITE_MAP_LAYER_ID,
   VUE_APP_TOPO_MAP_LAYER_ID,
   VUE_APP_BASE_URL,
+  VUE_APP_REACH_API_URL,
+  VUE_APP_GAUGE_API_URL,
   VUE_APP_CLIENT_ID,
   VUE_APP_CLIENT_SECRET,
   VUE_APP_API_BASE_URL,
+  VUE_APP_TRPC_API_URL,
   STATIC_ASSET_URL,
   NODE_ENV = '',
   VUE_APP_LINK_BASE_URL
@@ -34,11 +37,14 @@ const appBaseUrl = VUE_APP_BASE_URL
 const assetBaseUrl = STATIC_ASSET_URL || VUE_APP_API_BASE_URL
 const clientId = VUE_APP_CLIENT_ID
 const clientSecret = VUE_APP_CLIENT_SECRET
+const reachApiUrl = VUE_APP_REACH_API_URL
+const gaugeApiUrl = VUE_APP_GAUGE_API_URL
 const mapboxAccessToken = VUE_APP_MAPBOX_ACCESS_TOKEN
 const nwiTileServer = VUE_APP_NWI_TILE_SERVER
 const cmsBaseUrl = VUE_APP_WP_API_URL
 const laravelDeploy = Boolean(VUE_APP_LARAVEL_DEPLOY)
 const baseUrl = VUE_APP_LINK_BASE_URL
+const trpcApiUrl = VUE_APP_TRPC_API_URL
 
 export {
   environment,
@@ -53,6 +59,9 @@ export {
   clientSecret,
   laravelDeploy,
   baseUrl,
+  reachApiUrl,
+  gaugeApiUrl,
   satelliteMapLayerId,
-  topoMapLayerId
+  topoMapLayerId,
+  trpcApiUrl
 }

src/app/global/lib/gages/index.js

@@ -87,20 +87,4 @@ export function rangeToClass(minRange, maxRange) {
     case "L":
       return "below-recommended";
   }
-}
-// copied from scss file :(
-export function classToColor(c) {
-  switch (c) {
-    case "below-recommended":
-      return "#FF8785";
-    case "low-runnable":
-      return "#1fd561";
-    case "runnable":
-      return "#59E78D";
-    case "high-runnable":
-      return "#9cf1bb";
-    case "above-recommended":
-      return "#68DFE9";
-  }
-  return "";
-}
+}

src/app/global/mixins/gauge-helpers.js

@@ -57,5 +57,9 @@ export const gaugeHelpers = {
       }
       return output;
     },
-  }
+
+    metricLabel(metricId) {
+      return this.metrics.find(m => m.id.toString() === metricId.toString())?.unit
+    }  
+  },
 };

src/app/global/mixins/index.js

@@ -14,4 +14,5 @@ export * from "./estimate-read-time";
 export { default as poiClasses } from "./poi-classes";
 export * from "./global-mixins";
 export * from "./image-helpers";
-export * from "./gauge-helpers";
+export * from "./gauge-helpers";
+export * from "./reach-api-helper";