✨ [feat/rework-scania] #78 add sub menu for instantaneous data

Signed-off-by: JAGFx <[email protected]>
JAGFx · May 21, 2022 · 7f8cb75 · 7f8cb75
1 parent 6efbf7a
commit 7f8cb75
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 10 deletions.
diff --git a/src/assets/scss/dashboard/scania-next-gen/_bars.scss b/src/assets/scss/dashboard/scania-next-gen/_bars.scss
@@ -12,7 +12,7 @@
 	//margin: .5rem 0;
 
 	.icon {
-		font-size: 1.2rem;
+		font-size: 2rem;
 		line-height: 0;
 		margin: 0 .5rem 0 0;
 	}
@@ -43,14 +43,24 @@
 	}
 
 	.labels {
-			font-size: .5rem;
+			font-size: 1rem;
 			text-align: center;
 			//border-radius: 1rem;
 			font-weight: bold;
 			//margin-top: -0.3rem;
+
+		span {
+			width: 2rem;
+			text-align: center;
+
+			&:first-child{ text-align: left }
+			&:last-child{ text-align: right }
+		}
 	}
 
 	.raw {
+		justify-content: flex-end;
+
 		.value {
 			color: $cGreen;
 			margin-right: .2rem;
@@ -61,7 +71,7 @@
 		}
 
 		.value, .unit{
-			font-size: 1rem;
+			font-size: 1.5rem;
 			height: 1rem;
 			line-height: 1rem;
 		}

diff --git a/src/assets/scss/dashboard/scania-next-gen/_menu.scss b/src/assets/scss/dashboard/scania-next-gen/_menu.scss
@@ -11,7 +11,7 @@
 	width: 13.5rem;
 	height: 14.5rem;
 	margin: .5rem;
-	overflow: hidden;
+	//overflow: hidden;
 	display: flex;
 	justify-content: center;
 	align-items: center;
@@ -42,4 +42,36 @@
 			.unit { margin-left: .5rem; }
 		}
 	}
+
+	&.instantaneousData {
+		position: relative;
+
+		h4 {
+			font-size: 1.2rem;
+			position: absolute;
+			top: -.5rem;
+		}
+
+		.subMenuIndicator {
+			position: absolute;
+
+			width: .5rem;
+			left: 12.8rem;
+
+			.square {
+				background: $cGrey;
+				width: .5rem;
+				height: .5rem;
+				margin-bottom: .1rem;
+
+				&.active {
+					background: $cWhite;
+				}
+
+				&:last-child{
+					margin-bottom: 0;
+				}
+			}
+		}
+	}
 }
diff --git a/...components/dashboards/scania-next-gen/display/menu/ScaniaNextGenInstantaneousDataMenu.vue b/...components/dashboards/scania-next-gen/display/menu/ScaniaNextGenInstantaneousDataMenu.vue
@@ -1,6 +1,8 @@
 <template>
-  <div class="menu h-100">
+  <div class="menu h-100 instantaneousData" @click="onClickArea">
+    <h4 v-if="subMenu === 'battery'">Battery voltage</h4>
     <ScaniaNextGenBar
+      v-if="subMenu === 'battery'"
       v-bind="{
         min: 20,
         max: 36,
@@ -11,7 +13,9 @@
     >
       <i class="icon icon-scania-battery_red" />
     </ScaniaNextGenBar>
+    <h4 v-if="subMenu === 'pressure'">Brake pressure</h4>
     <ScaniaNextGenBar
+      v-if="subMenu === 'pressure'"
       class="py-1"
       v-bind="{
         min: 0,
@@ -22,7 +26,9 @@
     >
       <i class="icon icon-scania-parking-break_red" />
     </ScaniaNextGenBar>
+    <h4 v-if="subMenu === 'adBlue'">Ad blue</h4>
     <ScaniaNextGenBar
+      v-if="subMenu === 'adBlue'"
       v-bind="{
         min: 0,
         max: 100,
@@ -34,16 +40,38 @@
     >
       <i class="icon icon-scania-ad-blue-low_yellow" />
     </ScaniaNextGenBar>
+    <div class="subMenuIndicator">
+      <div class="square" :class="{ active: subMenu === 'battery' }"></div>
+      <div class="square" :class="{ active: subMenu === 'pressure' }"></div>
+      <div class="square" :class="{ active: subMenu === 'adBlue' }"></div>
+    </div>
   </div>
 </template>
 
 <script>
 import ScaniaNextGenBar from '@/components/dashboards/scania-next-gen/display/ScaniaNextGenBar';
 import TelemetryMixin from '@/mixins/TelemetryMixin';
 
+const subMenuAvailable = ['battery', 'pressure', 'adBlue'];
+
 export default {
   name: 'ScaniaNextGenInstantaneousDataMenu',
   components: { ScaniaNextGenBar },
-  mixins: [TelemetryMixin]
+  mixins: [TelemetryMixin],
+  data() {
+    return {
+      subMenu: subMenuAvailable[0]
+    };
+  },
+  methods: {
+    onClickArea() {
+      const subMenuSize = subMenuAvailable.length - 1;
+      const currentSubMenuIndex = subMenuAvailable.indexOf(this.subMenu);
+      const nextSubMenu =
+        currentSubMenuIndex + 1 > subMenuSize ? 0 : currentSubMenuIndex + 1;
+
+      this.subMenu = subMenuAvailable[nextSubMenu];
+    }
+  }
 };
 </script>
diff --git a/src/components/dashboards/scania-next-gen/symbols/ScaniaNextGenGeneralWarningSymbols.vue b/src/components/dashboards/scania-next-gen/symbols/ScaniaNextGenGeneralWarningSymbols.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
-    <Debug
-      >{{ telemetry2.truck.ignitionIsTurnedOn }}<br />
-      {{ telemetry2.truck.ignitionStart }}</Debug
-    >
+    <!--    <Debug-->
+    <!--      >{{ telemetry2.truck.ignitionIsTurnedOn }}<br />-->
+    <!--      {{ telemetry2.truck.ignitionStart }}</Debug-->
+    <!--    >-->
     <div class="symbols indicator left">
       <div class="symbol green">
         <i