resolved conflicts

button-inc · Oct 10, 2023 · 7fae215 · 7fae215
2 parents bbaabf0 + 639d0bf
commit 7fae215
Show file tree

Hide file tree

Showing 8 changed files with 8,602 additions and 453 deletions.
diff --git a/app_vue/package-lock.json b/app_vue/package-lock.json
diff --git a/app_vue/package.json b/app_vue/package.json
@@ -58,6 +58,7 @@
     "sass": "^1.66.1",
     "sass-loader": "^13.3.2",
     "vite": "^4.4.9",
+    "vite-svg-loader": "^4.0.0",
     "vue-tsc": "^1.8.8"
   },
   "lint-staged": {

diff --git a/app_vue/src/assets/stylesheets/_mixins.scss b/app_vue/src/assets/stylesheets/_mixins.scss
@@ -92,7 +92,7 @@
 // Media queries
 $extraSmallScreenWidth: 300px;
 $smallScreenWidth: 500px;
-$mediumScreenWidth: 814px;
+$mediumScreenWidth: 768px;
 $largeScreenWidth: 1200px;
 $extraLargeScreenWidth: 1600px;
 
@@ -131,3 +131,24 @@ $extraLargeScreenWidth: 1600px;
       @content;
   }
 }
+
+//Animations
+@mixin slide-fade-animation($translateY: -10px, $timingLeave: .2s, $timingEnter: .3s) {
+  .slide-fade-leave-to {
+    transform: translateY($translateY);
+    opacity: 0;
+  }
+  .slide-fade-leave-active {
+    transition: all $timingLeave ease;
+  }
+  .slide-fade-enter-from {
+    transform: translateY($translateY);
+    opacity: 0;
+  }
+  .slide-fade-enter-to {
+    opacity: 1;
+  }
+  .slide-fade-enter-active {
+    transition: all $timingEnter ease;
+  }
+}
diff --git a/app_vue/src/components/sensorMap.vue b/app_vue/src/components/sensorMap.vue
@@ -169,7 +169,7 @@ onDeactivated(() => {
 // leaflet css override for mobile views
 :deep img.low-opacity {
   // class from sensorMapMaker that handles filtered out bins opacity
-  opacity: 0.2;
+  opacity: 0.47;
 }
 :deep .leaflet-pane .leaflet-layer {
   // handles map opacity level

diff --git a/app_vue/src/components/sensorRouteBlock.vue b/app_vue/src/components/sensorRouteBlock.vue
@@ -49,7 +49,7 @@ function draggedRoute() {
   routeStore.googUpdateRouteStats();
 }
 
-function exportRouteClicked() {
+function exportToCSV() {
   let csv = '';
   const duration = routeStore.getRouteDuration || '';
   const distance = routeStore.getRouteDistance || 0;
@@ -191,7 +191,7 @@ function exportRouteClicked() {
               <v-btn
                 class="pa-0 route-display__export"
                 variant="plain"
-                @click="exportRouteClicked"
+                @click="exportToCSV"
               >
                 Export route
                 <vue-feather type="upload"></vue-feather>

diff --git a/app_vue/src/components/sensorSideBarFilters.vue b/app_vue/src/components/sensorSideBarFilters.vue
@@ -9,6 +9,7 @@ const thresholdRange = ref([0, 100]);
 
 // route store
 const routeStore = useRouteStore();
+const { getShouldDisplayRoute } = storeToRefs(routeStore);
 
 // sensor store
 const sensorStore = useSensorStore();
@@ -40,6 +41,10 @@ const state = reactive({
   }
 });
 
+watch(getShouldDisplayRoute, () => {
+  state.isCollapsed = routeStore.getShouldDisplayRoute;
+});
+
 // watching for store state updates and updating component variables
 watch(getRoutableSensors, () => {
   state.totalSensorsShown = sensorStore.getRoutableSensors.length || 0;
@@ -187,83 +192,88 @@ function getFilterCount() {
       </v-btn>
     </div>
 
-    <section
-      v-if="!state.isCollapsed"
-      class="filter-list__fields"
+    <transition
+      name="slide-fade"
+      mode="out-in"
     >
-      <div class="filter-list__fill-level">
-        <div class="filter-list__label color-gray-grey">Fill Level</div>
-        <v-range-slider
-          class="filter-list__slider"
-          v-model="state.selectedFillRange"
-          strict
-          :color="telusUi.green"
-          :track-color="telusUi.green"
-          :ticks="[0, 50, 100]"
-          show-ticks="always"
-          tick-size="0"
-          :step="1"
-          :max="thresholdRange[1]"
-          :min="thresholdRange[0]"
-          :thumb-label="state.showFillLabel"
-          @mouseup="state.showFillLabel = false"
-          @mousedown="state.showFillLabel = true"
-          @update:modelValue="updateFillRangeFilter"
-        >
-          <template v-slot:thumb-label="{ modelValue }">{{ modelValue }}%</template>
-        </v-range-slider>
-      </div>
-
-      <v-autocomplete
-        class="filter-list__dropdown"
-        v-model="state.selectedGroup"
-        label="Group"
-        chips
-        multiple
-        :items="state.group"
-        @update:modelValue="updateGroupFilter"
-      ></v-autocomplete>
-
-      <v-autocomplete
-        class="filter-list__dropdown"
-        v-model="state.selectedMaterialType"
-        label="Material Type"
-        chips
-        multiple
-        :items="state.materialType"
-        @update:modelValue="updateMaterialTypeFilter"
-      ></v-autocomplete>
-
-      <v-autocomplete
-        class="filter-list__dropdown"
-        v-model="state.selectedAssetTag"
-        label="Asset Tag"
-        chips
-        multiple
-        :items="state.assetTag"
-        @update:modelValue="updateAssetTagFilter"
-      ></v-autocomplete>
-
-      <v-autocomplete
-        class="filter-list__dropdown"
-        v-model="state.selectedBinVolume"
-        label="Bin Volume"
-        chips
-        multiple
-        :items="state.binVolume"
-        @update:modelValue="updateBinVolumeFilter"
-      ></v-autocomplete>
-
-      <v-autocomplete
-        class="filter-list__dropdown"
-        v-model="state.selectedBinType"
-        label="Bin Type"
-        chips
-        multiple
-        :items="state.binType"
-        @update:modelValue="updateBinTypeFilter"
-      ></v-autocomplete>
-    </section>
+      <section
+        v-if="!state.isCollapsed"
+        class="filter-list__fields"
+      >
+        <div class="filter-list__fill-level">
+          <div class="filter-list__label color-gray-grey">Fill Level</div>
+          <v-range-slider
+            class="filter-list__slider"
+            v-model="state.selectedFillRange"
+            strict
+            :color="telusUi.green"
+            :track-color="telusUi.green"
+            :ticks="[0, 50, 100]"
+            show-ticks="always"
+            tick-size="0"
+            :step="1"
+            :max="thresholdRange[1]"
+            :min="thresholdRange[0]"
+            :thumb-label="state.showFillLabel"
+            @mouseup="state.showFillLabel = false"
+            @mousedown="state.showFillLabel = true"
+            @update:modelValue="updateFillRangeFilter"
+          >
+            <template v-slot:thumb-label="{ modelValue }">{{ modelValue }}%</template>
+          </v-range-slider>
+        </div>
+
+        <v-autocomplete
+          class="filter-list__dropdown"
+          v-model="state.selectedGroup"
+          label="Group"
+          chips
+          multiple
+          :items="state.group"
+          @update:modelValue="updateGroupFilter"
+        ></v-autocomplete>
+
+        <v-autocomplete
+          class="filter-list__dropdown"
+          v-model="state.selectedMaterialType"
+          label="Material Type"
+          chips
+          multiple
+          :items="state.materialType"
+          @update:modelValue="updateMaterialTypeFilter"
+        ></v-autocomplete>
+
+        <v-autocomplete
+          class="filter-list__dropdown"
+          v-model="state.selectedAssetTag"
+          label="Asset Tag"
+          chips
+          multiple
+          :items="state.assetTag"
+          @update:modelValue="updateAssetTagFilter"
+        ></v-autocomplete>
+
+        <v-autocomplete
+          class="filter-list__dropdown"
+          v-model="state.selectedBinVolume"
+          label="Bin Volume"
+          chips
+          multiple
+          :items="state.binVolume"
+          @update:modelValue="updateBinVolumeFilter"
+        ></v-autocomplete>
+
+        <v-autocomplete
+          class="filter-list__dropdown"
+          v-model="state.selectedBinType"
+          label="Bin Type"
+          chips
+          multiple
+          :items="state.binType"
+          @update:modelValue="updateBinTypeFilter"
+        ></v-autocomplete>
+      </section>
+    </transition>
 
     <div class="mb-6">
       <span class="font-weight-bold">Result: {{ state.totalSensorsShown }} bin{{ state.totalSensorsShown > 1 ? 's' : '' }}</span>
@@ -302,6 +312,7 @@ function getFilterCount() {
 
 .filter-list {
   width: 100%;
+  @include slide-fade-animation;
 
   &__fields {
     margin-bottom: 20px;

diff --git a/app_vue/src/components/sensorSidebar.vue b/app_vue/src/components/sensorSidebar.vue
@@ -37,22 +37,6 @@ function positionSidebar() {
         <SensorSideBarFilters></SensorSideBarFilters>
 
         <SensorSideBarRoutes></SensorSideBarRoutes>
-
-        <!-- Map Updated button -->
-        <v-btn
-          class="map-updated"
-          variant="plain"
-          disabled
-        >
-          <vue-feather
-            class="map-updated__icon"
-            type="refresh-ccw"
-          ></vue-feather>
-          <div>
-            <span class="map-updated__text">Map updated:</span>
-            <span>Just now</span>
-          </div>
-        </v-btn>
       </div>
     </v-navigation-drawer>
   </div>

diff --git a/app_vue/vite.config.js b/app_vue/vite.config.js
@@ -1,5 +1,5 @@
 import { fileURLToPath, URL } from 'node:url';
-
+import svgLoader from 'vite-svg-loader';
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 
@@ -8,7 +8,7 @@ export default defineConfig({
   define: {
     'process.env': process.env
   },
-  plugins: [vue()],
+  plugins: [vue(), svgLoader()],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))