feat/api-error-handling

app_vue/package.json

@@ -14,6 +14,7 @@
     "pre-commit": "lint-staged"
   },
   "dependencies": {
+    "@vue-leaflet/vue-leaflet": "^0.10.1",
     "axios": "^1.5.0",
     "husky": "^8.0.3",
     "leaflet": "1.9.3",
@@ -22,13 +23,14 @@
     "ol-contextmenu": "^5.2.1",
     "ol-ext": "^4.0.11",
     "pinia": "^2.1.6",
+    "uuid": "^9.0.0",
     "vue": "^3.3.4",
     "vue-axios": "^3.5.2",
     "vue-feather": "^2.0.0",
     "vue-router": "^4.2.4",
     "vue3-openlayers": "^1.2.0",
-    "vuetify": "^3.3.14",
-    "@vue-leaflet/vue-leaflet": "^0.10.1"
+    "vuedraggable": "^4.1.0",
+    "vuetify": "^3.3.14"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.2",

app_vue/src/assets/base.scss

@@ -16,4 +16,11 @@
 a {
   color: inherit;
   text-decoration: none;
+}
+
+li {
+  display: flex;
+  align-items: center;
+  list-style: none;
+  margin: 16px 0;
 }

app_vue/src/assets/stylesheets/_functions.scss

@@ -15,6 +15,14 @@
   padding-top: 22px;
 }
 
+.padding-b-16 {
+  padding-bottom: 16px;
+}
+
+.padding-t-16 {
+  padding-top: 16px;
+}
+
 .padding-b-12 {
   padding-bottom: 12px;
 }
@@ -31,6 +39,10 @@
   padding-top: 8px;
 }
 
+.margin-b-0 {
+  margin-bottom: 0;
+}
+
 
 // colors
 .color-gray-grey {
@@ -39,4 +51,26 @@
 
 .color-cyan-blue {
   color: #2196F3;
+}
+
+.color-green {
+  color: #009E08;
+}
+
+.color-red {
+  color: #C92828;
+}
+
+// text 
+.font-body {
+  @include fontBody;
+}
+
+// misc
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.transform-rotate-270 {
+  transform: rotate(270deg);
 }

app_vue/src/assets/stylesheets/_variables.scss

@@ -1,25 +1,7 @@
 $font-face: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica', 'Arial', 'sans-serif';
 
 //color variables
-$white: #FFF;
-$whiteSoft: #F8F8F8;
-$whiteMute: #F2F2F2;
-
-$black: #181818;
-$blackSoft: #222222;
-$blackMute: #282828;
-$blackQuiet: #333333;
-
-$dividerLight1: rgba(60, 60, 60, 0.29);
-$dividerLight2: rgba(60, 60, 60, 0.12);
-$dividerDark1: rgba(84, 84, 84, 0.65);
-$dividerDark2: #141414;
-
-$bubbleGreen: #89f693;
-$bubbleGreenLight: #b8fabe;
-$bubbleGreenDark: #265F46;
-
-$textDark1: rgba(235, 235, 235, 0.64);
-$textLight1: rgba(60, 60, 60, 0.66);
-
-$zIndexFront: 999;
+$black: #191A1C;
+$grey: #8D8D8D;
+$lightergrey: #D9D9D9;
+$cyanBlue: #2196F3;

app_vue/src/components/sensorMap.vue

@@ -1,32 +1,29 @@
 <script setup>
-  import { reactive, ref, onMounted } from 'vue'
+  import { reactive, ref, onMounted, watch } from 'vue'
   import SensorMapMarker from '@/components/sensorMapMarker.vue';
   import 'leaflet/dist/leaflet.css'
-  import { LMap, LTileLayer, LMarker, LControlZoom } from '@vue-leaflet/vue-leaflet'
+  import { LMap, LTileLayer, LMarker, LControlZoom, LPolyline } from '@vue-leaflet/vue-leaflet'
   import { useDevice, DEVICE_SIZE } from '@/utils/screenSizeHelper';
   import { useSensorStore } from '@/stores/sensors_store';
+  import { useRouteStore } from '@/stores/route_store';
   import { storeToRefs } from 'pinia';
 
-  const props = defineProps({
-    alertThreshold: {
-      type: Number
-    },
-    filterThresholdMaximum: {
-      type: Number
-    },
-    filterThresholdMinimum: {
-      type: Number
-    }
-  })
-
-  const center = ref([43.7, -79.42]);
+  const center = ref([43.7, -79.42]); // TODO: update to possibly be user's current location
   const zoom = ref(10);
   const sensorStore = useSensorStore();
   const { sensors } = storeToRefs(sensorStore);
   const state = reactive({
     location: 'bottomright',
     device: useDevice()
   });
+  const polyLineLatLngs = ref([]);
+
+  const routeStore = useRouteStore();
+  const { getSensorRouteLatLong } = storeToRefs(routeStore);
+
+  watch(getSensorRouteLatLong, () => {
+    polyLineLatLngs.value = routeStore.getSensorRouteLatLong;
+  }, { deep: true })
 
   onMounted(() => {
     positionZoom();
@@ -47,30 +44,41 @@
   <div v-if="sensors" class="sensor-map-container">
     <l-map ref="map" v-model:zoom="zoom" :use-global-leaflet="false" :center="center" :options="{zoomControl: false}">
       <l-control-zoom :position="state.location"/>
+      <!-- alternative maps (for aesthetic): -->
+      <!-- favourite: https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png -->
+      <!-- another one: https://tiles.stadiamaps.com/tiles/osm_bright/{z}/{x}/{y}{r}.png -->
       <l-tile-layer
         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
         layer-type="base"
         name="OpenStreetMap"
       ></l-tile-layer>
+      <l-polyline :lat-lngs="polyLineLatLngs"></l-polyline>
 
       <l-marker
         v-for="sensor in sensors"
         :key="sensor.id"
         :lat-lng="[sensor.lat, sensor.long]"
       >
-        <SensorMapMarker 
-          :sensor="sensor"
-          :alertThreshold="props.alertThreshold"
-          :filterThresholdMaximum="props.filterThresholdMaximum"
-          :filterThresholdMinimum="props.filterThresholdMinimum">
+        <SensorMapMarker :sensor="sensor">
         </SensorMapMarker>
       </l-marker>
     </l-map>
   </div>
 </template>
 
 <style lang="scss" scoped>
-  // leaflet css override
+  // leaflet css override for mobile views
+
+  :deep .leaflet-pane .leaflet-layer { // handles map opacity level
+    opacity: 0.70 !important;
+  }
+  :deep .leaflet-popup-content {
+    margin: 13px 0 13px 0;
+
+    @include smallScreens {
+      margin: 20px;
+    }
+  }
   :deep .leaflet-popup-content-wrapper {
     width: 300px;
     height: 300px;