✨ [feat/scania-next-gen] #78 add programmable fields

JAGFx · May 7, 2022 · 9b9da87 · 9b9da87
1 parent 1c0ca1d
commit 9b9da87
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 2 deletions.
diff --git a/src/assets/scss/dashboard/_scania-next-gen.scss b/src/assets/scss/dashboard/_scania-next-gen.scss
@@ -11,6 +11,8 @@
 	@import "scania-next-gen/menu";
 	@import "scania-next-gen/bars";
 
+	color: $cWhite;
+
 	.flex-area {
 		display: flex;
 		justify-content: center;

diff --git a/src/assets/scss/dashboard/scania-next-gen/_display.scss b/src/assets/scss/dashboard/scania-next-gen/_display.scss
@@ -162,7 +162,36 @@
 		min-height: 3.7rem;
 		max-height: 3.7rem;
 		width: 19rem;
-		//background: #00E070;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		.field {
+			//background: #00E070;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			width: 100%;
+			height: 100%;
+			padding: .5rem;
+
+			.icon {
+				font-size: 1.2rem;
+				margin-right: .5rem;
+			}
+
+			.data {
+				.value {
+					font-size: 1.1rem;
+					color: $cGreen;
+					margin-right: .2rem;
+				}
+
+				.unit {
+					font-size: .9rem;
+				}
+			}
+		}
 	}
 
 	.squareArea {

diff --git a/src/components/dashboards/scania-next-gen/display/ScaniaNextGenDisplay.vue b/src/components/dashboards/scania-next-gen/display/ScaniaNextGenDisplay.vue
@@ -38,7 +38,42 @@
     </div>
     <component :is="currentMenu" v-if="currentMenu !== null" />
     <div v-else class="menu h-100 default"></div>
-    <div class="programmable-field">programmable-field-bottom</div>
+    <div class="programmable-field">
+      <div class="field">
+        <i class="icon icon-scania-cruise_control_white" />
+        <div class="data">
+          <span class="value">{{
+            telemetry2.truck.cruiseControlSpeed.toFixed(0)
+          }}</span>
+          <span class="unit">{{ $unitReadable('unit_speed') }}</span>
+        </div>
+      </div>
+      <div class="field">
+        <i class="icon icon-scania-downhill-spee-control_yellow_white" />
+        <div class="data">
+          <span class="value">-</span>
+          <span class="unit">{{ $unitReadable('unit_speed') }}</span>
+        </div>
+      </div>
+      <div class="field">
+        <i class="icon icon-scania-fuel_yellow" />
+        <div class="data">
+          <span class="value">{{
+            telemetry2.truck.fuelLevelPercentage.toFixed(0)
+          }}</span>
+          <span class="unit">%</span>
+        </div>
+      </div>
+      <div class="field">
+        <i class="icon icon-scania-ad-blue-low_yellow" />
+        <div class="data">
+          <span class="value">{{
+            telemetry2.truck.adBlueLevelPercentage.toFixed(0)
+          }}</span>
+          <span class="unit">%</span>
+        </div>
+      </div>
+    </div>
     <div class="squareArea shifter">
       <div>{{ telemetry2.truck.gearDisplayedWithoutShifterType }}</div>
       <div>{{ telemetry2.truck.shifterTypeLetter }}</div>

diff --git a/src/model/telemetry-truck.model.js b/src/model/telemetry-truck.model.js
@@ -80,6 +80,12 @@ export default class TelemetryTruck {
       ? unit_volume(telemetryStore.telemetry.truck.fuel.value, true, false)
       : 0;
   }
+  get fuelLevelPercentage() {
+    return this.fuelCapacity > 0
+      ? (this.fuelLevel / this.fuelCapacity) * 100
+      : 0;
+  }
+
   get fuelCapacity() {
     return unit_volume(
       telemetryStore.telemetry.truck.fuel.capacity,
@@ -107,6 +113,12 @@ export default class TelemetryTruck {
       false
     );
   }
+  get adBlueLevelPercentage() {
+    return this.adBlueCapacity > 0
+      ? (this.adBlueLevel / this.adBlueCapacity) * 100
+      : 0;
+  }
+
   get adBlueCapacity() {
     return unit_volume(
       telemetryStore.telemetry.truck.adBlue.capacity,