Change sidebar for box analysis: Re-arranged & renamed sub-modes

Author: adriangronau

frontend/src/components/Sidebar.vue

@@ -89,12 +89,12 @@
 
                 <div class="field" style="margin-top: 10px">
                     <b-checkbox v-model="computedBoxAnalysisHelper1">
-                        {{ $t('boxAnalysis.start') }}
+                        {{ $t('boxAnalysis.all') }}
                     </b-checkbox>
                 </div>
                 <div class="field">
                     <b-checkbox v-model="computedBoxAnalysisHelper2">
-                        {{ $t('boxAnalysis.contains') }}
+                        {{ $t('boxAnalysis.start') }}
                     </b-checkbox>
                 </div>
                 <div class="field">
@@ -203,8 +203,10 @@ export default {
 </script>
 
 <style lang="scss">
+    $sidebar-width: 304px;
+
     .sidebar {
-        width: 370px;//240px;
+        width: $sidebar-width;
         flex-shrink: 0;
         background-color: #fafafa;//#eaeaea;
         border-right: 1px solid rgba(0, 0, 0, 0.1);

frontend/src/constants.ts

@@ -22,8 +22,8 @@ let subViewModes = {
     SURFACE_QUALITY_SINGLE: 1,
     RELATIVE_SPEED_AGGREGATED: 0,
     RELATIVE_SPEED_SINGLE: 1,
-    BOX_ANALYSIS_START: 0,
-    BOX_ANALYSIS_CONTAINS: 1,
+    BOX_ANALYSIS_ALL: 0,
+    BOX_ANALYSIS_START: 1,
     BOX_ANALYSIS_STOP: 2,
 }
 

frontend/src/locales/de.json

@@ -73,9 +73,9 @@
         "singleRides": "Einzelne Fahrten"
     },
     "boxAnalysis": {
-        "start": "Startpunkt in Box",
-        "contains": "Verläuft durch Box",
-        "end": "Endpunkt in Box",
+        "all": "Alle Fahrten in Box",
+        "start": "Nur mit Startpunkt in Box",
+        "end": "Nur mit Endpunkt in Box",
         "draw": {
             "polygonStart": "Klicke um eine neue Form zu zeichnen.",
             "polygonContinue": "Klicke um den nächsten Punkt der Form zu zeichnen.",

frontend/src/locales/en.json

@@ -73,9 +73,9 @@
         "singleRides": "Single Rides"
     },
     "boxAnalysis": {
-        "start": "Starting in Box",
-        "contains": "Going through Box",
-        "end": "Ending in Box",
+        "all": "All Rides in Box",
+        "start": "Only with Start Point in Box",
+        "end": "Only with End Point in Box",
         "draw": {
             "polygonStart": "Click to start drawing shape.",
             "polygonContinue": "Click to continue drawing shape.",

frontend/src/viewModes/boxAnalysis/BoxAnalysisView.vue

@@ -25,8 +25,8 @@ export default {
             config: Config,
             polygon: null,
             polygonResult: [],
+            polygonResultAll: null,
             polygonResultStart: null,
-            polygonResultIntersect: null,
             polygonResultEnd: null,
             polygonResultLoaded: false,
             polygonTool: null,
@@ -65,8 +65,8 @@ export default {
                 if (e.layerType !== 'polygon') return;
 
                 this.polygonResult = [];
+                this.polygonResultAll = null;
                 this.polygonResultStart = null;
-                this.polygonResultIntersect = null;
                 this.polygonResultEnd = null;
                 this.mapLayer.clearLayers();
                 this.mapLayer.addLayer(e.layer);
@@ -82,17 +82,17 @@ export default {
             this.mapLayer.on('click', () => {
                 this.polygon = null;
                 this.polygonResult = [];
+                this.polygonResultAll = null;
                 this.polygonResultStart = null;
-                this.polygonResultIntersect = null;
                 this.polygonResultEnd = null;
                 this.mapLayer.clearLayers();
                 this.polygonTool.enable();
             });
         },
         loadRides() {
             let modes = [];
-            if (this.subViewMode & 1 << 0 && this.polygonResultStart === null) modes.push("containsStart");
-            if (this.subViewMode & 1 << 1 && this.polygonResultIntersect === null) modes.push("contains");
+            if (this.subViewMode & 1 << 0 && this.polygonResultAll === null) modes.push("contains");
+            if (this.subViewMode & 1 << 1 && this.polygonResultStart === null) modes.push("containsStart");
             if (this.subViewMode & 1 << 2 && this.polygonResultEnd === null) modes.push("containsEnd");
 
             if (modes.length > 0) this.apiWorker.postMessage(["polygon", this.polygon, modes]);
@@ -103,8 +103,8 @@ export default {
                     this.$emit('on-progress', message.data[1], message.data[2])
                     break;
                 case "polygon":
+                    if (message.data[2] === "contains") this.polygonResultAll = message.data[1];
                     if (message.data[2] === "containsStart") this.polygonResultStart = message.data[1];
-                    if (message.data[2] === "contains") this.polygonResultIntersect = message.data[1];
                     if (message.data[2] === "containsEnd") this.polygonResultEnd = message.data[1];
                     this.mergeResults();
                     break;
@@ -127,8 +127,8 @@ export default {
                 }
             }
 
-            iterationFn(1 << 0, this.polygonResultStart);
-            iterationFn(1 << 1, this.polygonResultIntersect);
+            iterationFn(1 << 0, this.polygonResultAll);
+            iterationFn(1 << 1, this.polygonResultStart);
             iterationFn(1 << 2, this.polygonResultEnd);
 
             this.polygonResult = {

frontend/src/views/Map.vue

@@ -241,10 +241,12 @@ export default {
 </script>
 
 <style lang="scss">
+    $sidebar-width: 304px;
+
     .viewmode-container {
         border-top: none;
         min-height: calc(100vh - 57px) !important;
-        width: calc(100vw - 371px);
+        width: calc(100vw - #{$sidebar-width} - 1px);
     }
 
     .vue2leaflet-map {
@@ -344,7 +346,7 @@ export default {
     .statistics-container {
         position: fixed;
         max-height: 100%;
-        width: calc(100vw - 371px);
+        width: calc(100vw - #{$sidebar-width} - 1px);
         overflow-y: scroll;
         z-index: 1000;
         background: #f3f3f3;