💄 #78 add warning and error message

Signed-off-by: JAGFx <[email protected]>
JAGFx · Feb 11, 2022 · 289fc7c · 289fc7c
1 parent 133e4cc
commit 289fc7c
Show file tree

Hide file tree

Showing 16 changed files with 384 additions and 163 deletions.
diff --git a/lib/sdk/scs_sdk_plugin_parsed_data.json b/lib/sdk/scs_sdk_plugin_parsed_data.json
@@ -610,7 +610,7 @@
 			"enabled" : false
 		},
 		"liftAxle" :      {
-			"enabled" :   false,
+			"enabled" :   true,
 			"indicator" : {
 				"enabled" : false
 			}
@@ -1049,7 +1049,7 @@
 			"total" :   0.04498915374279022
 		},
 		"liftAxle" :     {
-			"enabled" :   false,
+			"enabled" :   true,
 			"indicator" : {
 				"enabled" : false
 			}

diff --git a/src/assets/scss/dashboard/_scania.scss b/src/assets/scss/dashboard/_scania.scss
@@ -11,7 +11,7 @@
 .scania-dash {
 	@import "scania/display";
 	@import "scania/menu";
-	@import "scania/scania-bar";
+	@import "scania/bar";
 	@import "scania/symbols";
 
 	.flex-area {

diff --git a/...ts/scss/dashboard/scania/_scania-bar.scss → src/assets/scss/dashboard/scania/_bar.scss b/...ts/scss/dashboard/scania/_scania-bar.scss → src/assets/scss/dashboard/scania/_bar.scss
@@ -9,10 +9,12 @@
 @import "variable";
 
 .scania-bar {
+	margin: 1rem 0;
+
 	.icon {
 		font-size: 3.5rem;
 		line-height: 0;
-		margin-left: 1rem;
+		margin: 0 .5rem;
 	}
 
 	.line {
@@ -28,8 +30,8 @@
 		.square {
 			background: #fff;
 			color: transparent;
-			height: .7rem;
-			width: 1.8rem;
+			height: 1rem;
+			width: 1.85rem;
 			margin: .15rem;
 
 			&:first-child { margin-left: 0 }
@@ -39,7 +41,7 @@
 
 	.labels {
 		.start, .middle, .end {
-			font-size: 1.3rem;
+			font-size: 1.5rem;
 			background: $cGrey;
 			width: 3rem;
 			text-align: center;
@@ -60,7 +62,7 @@
 		}
 
 		.value, .unit{
-			font-size: 1.6rem;
+			font-size: 2rem;
 			height: 1.5rem;
 			line-height: 1.2rem;
 		}

diff --git a/src/assets/scss/dashboard/scania/_display-message.scss b/src/assets/scss/dashboard/scania/_display-message.scss
@@ -0,0 +1,21 @@
+/**
+ * @author:	Emmanuel SMITH <[email protected]>
+ * project:	ets2-dashboard-skin
+ * file: 	_display-message.scss
+ * Date: 	11/02/2022
+ * Time: 	21:28
+ */
+
+@import "variable";
+
+.display-message {
+	color: $cGrey;
+	font-size: 2.5rem;
+	width:         437px;
+	max-width:     437px;
+	height:        346px;
+	border-bottom: 3px solid $cGreyLight;
+
+	&.warning { background: $cYellow; }
+	&.error { background: $cRed }
+}
diff --git a/src/assets/scss/dashboard/scania/_display.scss b/src/assets/scss/dashboard/scania/_display.scss
@@ -12,6 +12,9 @@
 	position: fixed;
 	top: 149px;
 	left: 709px;
+	width: 27.2rem;
+
+	@import "display-message";
 
 	.gearbox-info{
 		background: $cGrey;
@@ -82,7 +85,6 @@
 		background-position: center;
 		cursor:           pointer;
 		opacity:          1;
-		z-index:          35;
 		height: 346px;
 		border-bottom: 3px solid $cGreyLight;
 	}
@@ -93,13 +95,49 @@
 		z-index: 2;
 		border-bottom: 3px solid $cGreyLight;
 
-		.truck-fuelWarning {
+		.item {
 			width: 4.5rem;
 			height: 4.5rem;
 			line-height: 0;
 			font-size: 3rem;
+		}
+
+		.truck-fuelWarning {
 			color: $cYellow;
 		}
+
+		.message {
+			position: relative;
+			z-index: 40;
+			border-radius: 0 0 1rem 0;
+			font-size: 3.5rem;
+			color: $cGrey;
+
+			&:before{
+				position: absolute;
+				content: "";
+				background: $cYellow;
+				height: 0.5rem;
+				top: -0.4rem;
+				width: 100%;
+			}
+
+			&.warning {
+				background: $cYellow;
+
+				&:before{
+					background: $cYellow;
+				}
+			}
+
+			&.error {
+				background: $cRed;
+
+				&:before{
+					background: $cRed;
+				}
+			}
+		}
 	}
 
 	.programmable-field-2 {

diff --git a/src/assets/scss/dashboard/scania/_menu.scss b/src/assets/scss/dashboard/scania/_menu.scss
@@ -15,8 +15,6 @@
 	max-width:     437px;
 	height:        346px;
 	border-bottom: 3px solid $cGreyLight;
-	opacity:       1;
-	z-index:       30;
 
 	.menuSelectorItem {
 		i {
@@ -47,11 +45,9 @@
 
 	.drivingAssistanceMenu {
 		background-color: $cGrey;
-		opacity:          1;
 		z-index:          19;
 		position:         relative;
 
-
 		.item {
 			font-size: 2.5rem;
 			padding:   0 1rem;
@@ -74,7 +70,6 @@
 
 	.vehicleInformationsMenu {
 		background-image: url("/img/dashboard/scania/dashMenu.png");
-		opacity:          1;
 		z-index:          19;
 		position:         relative;
 
@@ -89,11 +84,10 @@
 	.instantaneousData {
 		background-color: $cGrey;
 		//background-image: url("/img/dashboard/scania/dashMenu2.png");
-		opacity:          1;
 		z-index:          19;
 
 		.unit {
 			color: #FFF;
 		}
 	}
-}
+}
diff --git a/src/components/dashboards/scania/ScaniaBar.vue b/src/components/dashboards/scania/ScaniaBar.vue
@@ -27,9 +27,9 @@
     </div>
     <div
       v-if="displayValue && displayValuePosition === 'right'"
-      class="raw d-flex justify-content-center align-items-center mr-2"
+      class="raw d-flex justify-content-center align-items-center"
     >
-      <span class="value">{{ getValue() }}</span>
+      <span class="unit">{{ unit }}</span>
     </div>
   </div>
 </template>
@@ -91,7 +91,7 @@ export default {
         return 8;
       }
 
-      return this.displayIcon ? 8 : 10;
+      return this.displayIcon ? 6 : 8;
     },
     percentage() {
       return (this.value * this.maxWidth()) / this.max;

diff --git a/src/components/dashboards/scania/display/ScaniaDisplay.vue b/src/components/dashboards/scania/display/ScaniaDisplay.vue
@@ -73,20 +73,35 @@
 
     <!-- <editor-folder> Menu -->
     <div
-      v-if="!menuDisplay"
+      v-if="!menuDisplay && !hasAWarningMessage"
       class="displayMenuOff w-100"
       @click="menuDisplay = true"
     ></div>
-    <ScaniaMainMenu v-if="menuDisplay" @quit-menu="menuDisplay = false" />
+    <ScaniaMainMenu
+      v-if="menuDisplay && !hasAWarningMessage"
+      @quit-menu="menuDisplay = false"
+    />
+    <ScaniaDisplayMessage v-if="hasAWarningMessage" />
     <!-- </editor-folder> Menu -->
 
     <!-- <editor-folder> Box warning symbol -->
     <div
       class="box-warning-symbol d-flex justify-content-start align-items-center w-100"
     >
-      <div class="truck-fuelWarning flex-area">
+      <div
+        v-if="telemetry.truck.fuel.warning.enabled"
+        class="truck-fuelWarning flex-area item"
+      >
         <i class="icon-scania-fuel_yellow" />
       </div>
+      <div
+        v-for="warningMessage in warningMessages"
+        :key="warningMessage.id"
+        class="flex-area item message"
+        :class="warningMessage.type"
+      >
+        <i :class="warningMessage.icon" />
+      </div>
     </div>
     <!-- </editor-folder> Box warning symbol -->
 
@@ -130,17 +145,25 @@
 </template>
 
 <script>
+import ScaniaDisplayMessage from '@/components/dashboards/scania/display/ScaniaDisplayMessage';
 import ScaniaMainMenu from '@/components/dashboards/scania/display/ScaniaMainMenu';
 import TelemetryMixin from '@/mixins/TelemetryMixin';
+import { mapGetters } from 'vuex';
 
 export default {
   name: 'ScaniaDisplay',
-  components: { ScaniaMainMenu },
+  components: { ScaniaMainMenu, ScaniaDisplayMessage },
   mixins: [TelemetryMixin],
   data() {
     return {
       menuDisplay: false
     };
+  },
+  computed: {
+    ...mapGetters({
+      warningMessages: 'dashboard/getScaniaMessages',
+      hasAWarningMessage: 'dashboard/hasScaniaMessage'
+    })
   }
 };
 </script>
diff --git a/src/components/dashboards/scania/display/ScaniaDisplayMessage.vue b/src/components/dashboards/scania/display/ScaniaDisplayMessage.vue
@@ -0,0 +1,21 @@
+<template>
+  <div
+    class="display-message d-flex justify-content-start align-items-start flex-column p-3"
+    :class="scaniaMessage.type"
+  >
+    {{ scaniaMessage.message }}
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'ScaniaDisplayMessage',
+  computed: {
+    ...mapGetters({
+      scaniaMessage: 'dashboard/getLatestScaniaMessage'
+    })
+  }
+};
+</script>