From 00fa622e3f9c3dd60f08428f39761428417ed7c8 Mon Sep 17 00:00:00 2001
From: JAGFx <contact@jagfx.fr>
Date: Tue, 10 May 2022 20:34:19 +0200
Subject: [PATCH] :bug: [feat/scania-next-gen] #78 add mask for menu and some
 adjustment

---
 doc/TRANSLATION_CHANGES.md                    |   5 +
 .../dashboard/scania-next-gen/menu-area.svg   |   8 +
 .../dashboard/scania-next-gen/_display.scss   |  20 +-
 .../display/ScaniaNextGenDisplay.vue          |  15 +-
 src/components/menu/MenuTabSkins.vue          |   8 +-
 .../skin-manuals/SkinManualScaniaNextGen.vue  | 189 ++++++++++++++++++
 src/data/skins.json                           |   4 +-
 src/translations/fr-FR.yaml                   |   4 +-
 8 files changed, 235 insertions(+), 18 deletions(-)
 create mode 100644 public/img/dashboard/scania-next-gen/menu-area.svg
 create mode 100644 src/components/menu/skin-manuals/SkinManualScaniaNextGen.vue

diff --git a/doc/TRANSLATION_CHANGES.md b/doc/TRANSLATION_CHANGES.md
index f4df40d6..71693236 100644
--- a/doc/TRANSLATION_CHANGES.md
+++ b/doc/TRANSLATION_CHANGES.md
@@ -2,6 +2,11 @@
 
 ## Next release
 
+### Added 
+
+- Standard mode
+- In standard performance mode the vehicle is adapted for driving to suit most situations.
+
 ## From v1.7.1
 
 ### Added
diff --git a/public/img/dashboard/scania-next-gen/menu-area.svg b/public/img/dashboard/scania-next-gen/menu-area.svg
new file mode 100644
index 00000000..cca6e100
--- /dev/null
+++ b/public/img/dashboard/scania-next-gen/menu-area.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1790 1080" style="enable-background:new 0 0 1790 1080;" xml:space="preserve">
+<path d="M1784.3,1024.1c0,0-136.4,55.9-152.8,55.9s-1457.4,0-1483.1,0s-149.1-55.9-149.1-55.9s242.2-189.2,242.2-495.6
+	c0-365.8-208.7-514.2-208.7-514.2S70.6,3,134.9,2.8c306.7-0.8,1218.6-1.9,1525.5-1c64.3,0.2,102.1,7.8,102.1,7.8
+	s-224.1,160.6-224.1,518.9C1538.4,821.6,1784.3,1024.1,1784.3,1024.1z"/>
+</svg>
diff --git a/src/assets/scss/dashboard/scania-next-gen/_display.scss b/src/assets/scss/dashboard/scania-next-gen/_display.scss
index 1b565f62..8bdc6308 100644
--- a/src/assets/scss/dashboard/scania-next-gen/_display.scss
+++ b/src/assets/scss/dashboard/scania-next-gen/_display.scss
@@ -3,14 +3,14 @@
 .display {
 	position: absolute;
 	width: 30rem;
-	height: 17.35rem;
-	left: 30.25rem;
-	top: 15.45rem;
+	height: 18.05rem;
+	left: 30.35rem;
+	top: 14.75rem;
+	padding-top: 1rem;
 	
 	// Fixme: Some blur apear for an unknown reason
-	//mask-image: url("/img/dashboard/scania-next-gen/menu-area.png");
-	//mask-size: contain;
-	//mask-repeat: no-repeat;
+	mask-image: url("/img/dashboard/scania-next-gen/menu-area.svg");
+	mask-repeat: no-repeat;
 	
 	display: flex;
 	align-items: center;
@@ -21,9 +21,12 @@
 	&.starting {
 		background:      url("/img/dashboard/scania-next-gen/6482891_619566292.png") no-repeat center;
 		background-size: 10rem;
+		background-position-y: 1rem;
+		
 	}
 	&.on {
 		background: url("/img/dashboard/scania-next-gen/menu-on.png");
+		background-position-y: 1rem;
 	}
 	
 	.menu-selector {
@@ -198,7 +201,6 @@
 		position: absolute;
 		width: 3.3rem;
 		height: 3.5rem;
-		top: 6.3rem;
 		right: 3.8rem;
 		display: flex;
 		justify-content: center;
@@ -208,14 +210,14 @@
 		line-height: 1.5rem;
 		
 		&.shifter {
-			top: 6.3rem;
+			top: 7.3rem;
 			right: 4.2rem;
 			font-size: 1.4rem;
 			line-height: 1.5rem;
 		}
 		
 		&.driveMode{
-			top: 6.3rem;
+			top: 7.3rem;
 			left: 4.2rem;
 		}
 	}
diff --git a/src/components/dashboards/scania-next-gen/display/ScaniaNextGenDisplay.vue b/src/components/dashboards/scania-next-gen/display/ScaniaNextGenDisplay.vue
index 05eab83d..576b7836 100644
--- a/src/components/dashboards/scania-next-gen/display/ScaniaNextGenDisplay.vue
+++ b/src/components/dashboards/scania-next-gen/display/ScaniaNextGenDisplay.vue
@@ -1,8 +1,10 @@
 <template>
-  <div class="display on">
+  <div v-if="telemetry2.truck.ignitionIsTurnedOn" class="display on">
     <div class="squareArea driveMode">
       <div><i class="icon icon-scania-next-gen-standard-mode_white" /></div>
-      <div><i class="icon icon-scania-cruise_control_white" /></div>
+      <div v-if="telemetry2.symbols.cruiseControlIsEnabled">
+        <i class="icon icon-scania-cruise_control_white" />
+      </div>
     </div>
     <div class="menu-selector w-100">
       <div class="button tiny left white">
@@ -42,9 +44,12 @@
       <div class="field">
         <i class="icon icon-scania-cruise_control_white" />
         <div class="data">
-          <span class="value">{{
-            telemetry2.truck.cruiseControlSpeed.toFixed(0)
-          }}</span>
+          <span
+            v-if="telemetry2.symbols.cruiseControlIsEnabled"
+            class="value"
+            >{{ telemetry2.truck.cruiseControlSpeed.toFixed(0) }}</span
+          >
+          <span v-else class="value">-</span>
           <span class="unit">{{ $unitReadable('unit_speed') }}</span>
         </div>
       </div>
diff --git a/src/components/menu/MenuTabSkins.vue b/src/components/menu/MenuTabSkins.vue
index 129f12fa..e36fe06f 100644
--- a/src/components/menu/MenuTabSkins.vue
+++ b/src/components/menu/MenuTabSkins.vue
@@ -83,12 +83,14 @@
 
 <script>
 import SkinManualScania from '@/components/menu/skin-manuals/SkinManualScania';
+import SkinManualScaniaNextGen from '@/components/menu/skin-manuals/SkinManualScaniaNextGen';
 import SkinsMixin from '@/mixins/SkinsMixin';
 
 export default {
   name: 'MenuTabSkins',
   components: {
-    SkinManualScania
+    SkinManualScania,
+    SkinManualScaniaNextGen
   },
   mixins: [SkinsMixin],
   data() {
@@ -103,6 +105,10 @@ export default {
           this.manual = 'SkinManualScania';
           break;
 
+        case 'ScaniaNextGen':
+          this.manual = 'SkinManualScaniaNextGen';
+          break;
+
         default:
           this.manual = null;
           break;
diff --git a/src/components/menu/skin-manuals/SkinManualScaniaNextGen.vue b/src/components/menu/skin-manuals/SkinManualScaniaNextGen.vue
new file mode 100644
index 00000000..9cf8860b
--- /dev/null
+++ b/src/components/menu/skin-manuals/SkinManualScaniaNextGen.vue
@@ -0,0 +1,189 @@
+<template>
+  <div class="overlay manual">
+    <b-overlay :show="true" variant="dark" no-wrap>
+      <template #overlay>
+        <transition mode="out-in" name="slide-fade">
+          <div class="manual-wrapper">
+            <table class="table table-striped table-dark symbols">
+              <thead>
+                <th>{{ $t('Symbol') }}</th>
+                <th>{{ $t('Label') }}</th>
+              </thead>
+              <tbody>
+                <!-- <editor-folder> General warning symbols  -->
+                <tr>
+                  <td colspan="2" class="category">
+                    {{ $t('General warning symbols') }}
+                  </td>
+                </tr>
+                <SkinManualLine
+                  color="green"
+                  :icons="['icon-scania-direction-indicator-left_green']"
+                  :label="'Left direction indicator'"
+                />
+                <SkinManualLine
+                  color="green"
+                  :icons="['icon-scania-direction-indicator-right_green']"
+                  :label="'Right direction indicator'"
+                />
+                <SkinManualLine
+                  color="blue"
+                  :icons="['icon-scania-main-beam_blue']"
+                  :label="'Main beam is on'"
+                />
+                <!-- </editor-folder> General warning symbols  -->
+
+                <!-- <editor-folder> Menu symbols  -->
+                <tr>
+                  <td colspan="2" class="category">{{ $t('Menu symbols') }}</td>
+                </tr>
+                <!--                <SkinManualLine-->
+                <!--                  color="yellow"-->
+                <!--                  :icons="['icon-scania-fuel_yellow']"-->
+                <!--                  :label="'The fuel level is low'"-->
+                <!--                />-->
+                <SkinManualLine
+                  :icons="['icon-scania-cruise_control_white']"
+                  :label="'Cruise control'"
+                />
+                <SkinManualLine
+                  :icons="['icon-scania-downhill-spee-control_yellow_white']"
+                  :label="'Downhill speed control'"
+                  :implemented="false"
+                />
+                <!--                <SkinManualLine-->
+                <!--                  :icons="[-->
+                <!--                    'icon-scania-driver-card-tachograph_white',-->
+                <!--                    'icon-scania-accrued-rest-time-tachograph_white'-->
+                <!--                  ]"-->
+                <!--                  :label="'Accrued rest time'"-->
+                <!--                />-->
+                <SkinManualLine
+                  :icons="['icon-scania-ad-blue-low_yellow']"
+                  :label="'Ad Blue'"
+                />
+                <SkinManualLine
+                  :icons="['icon-scania-battery_red']"
+                  :label="'Battery'"
+                />
+                <SkinManualLine
+                  :icons="['icon-scania-next-gen-trip-information']"
+                  :label="'Cruise control, trip computer and driving time information'"
+                  :description="'Here, you can set and read off the trip computer; see current operating information and read driving time information from the digital tachograph.'"
+                />
+                <SkinManualLine
+                  :icons="['icon-scania-next-gen-instantaneous-data']"
+                  :label="'Instantaneous data'"
+                  :description="'Here you can view information about current consumption and current levels.'"
+                />
+                <SkinManualLine
+                  :icons="['icon-scania-menu-settings']"
+                  :label="'Settings'"
+                  :implemented="false"
+                />
+                <SkinManualLine
+                  :icons="['icon-scania-next-gen-vehicle-information']"
+                  :label="'Vehicle information'"
+                  :implemented="false"
+                  :description="'The vehicle information menu can be used to view cargo weights, status of the differential locks and tyre pressures. Which functions are shown depends on the vehicle’s equipment.'"
+                />
+                <SkinManualLine
+                  :icons="[' icon-scania-next-gen-standard-mode_white']"
+                  :label="'Standard mode'"
+                  description="In standard performance mode the vehicle is adapted for driving to suit most situations."
+                  :implemented="false"
+                />
+                <!-- </editor-folder> Menu symbols  -->
+
+                <!-- <editor-folder> Others symbols  -->
+                <tr>
+                  <td colspan="2" class="category">
+                    {{ $t('Others symbols') }}
+                  </td>
+                </tr>
+                <SkinManualLine
+                  color="red"
+                  :icons="['icon-scania-warning_red']"
+                  :label="'A fault occurred'"
+                />
+                <SkinManualLine
+                  color="red"
+                  :icons="['icon-scania-parking-break_red']"
+                  :label="'The parking brake is applied'"
+                />
+                <SkinManualLine
+                  color="red"
+                  :icons="['icon-scania-break-pressure_red_yellow']"
+                  :label="'Vehicle EBS fault'"
+                  :description="'Low brake pressure in parking and trailer brake circuit.'"
+                />
+                <!--                <SkinManualLine-->
+                <!--                  color="red"-->
+                <!--                  :icons="['icon-scania-driver-safty-belt_red']"-->
+                <!--                  :label="'The driver’s safety belt is not fastened'"-->
+                <!--                  :implemented="false"-->
+                <!--                />-->
+                <SkinManualLine
+                  color="yellow"
+                  :icons="['icon-scania-warning_yellow']"
+                  :label="'A warning occurred'"
+                />
+                <SkinManualLine
+                  color="yellow"
+                  :icons="['icon-scania-engine-failure_yellow']"
+                  :label="'Engine failure'"
+                  :description="'Risk that the level of contaminants in the exhaust gases emitted by the vehicle will be too high. In some cases the engine output is limited and in some cases the vehicle speed is also limited.'"
+                />
+                <SkinManualLine
+                  color="yellow"
+                  :icons="['icon-scania-differential-lock_yellow']"
+                  :label="'Differential lock is engaged'"
+                />
+                <SkinManualLine
+                  color="yellow"
+                  :icons="['icon-scania-tractor-tag-axle-raised_yellow']"
+                  :label="'The tag axle on the tractor is raised'"
+                />
+                <SkinManualLine
+                  color="yellow"
+                  :icons="['icon-scania-trailer-tag-axle-raised_yellow']"
+                  :label="'The tag axle on the trailer is raised'"
+                />
+                <SkinManualLine
+                  color="green"
+                  :icons="['icon-scania-retarder_green']"
+                  :label="'The retarder is activated'"
+                />
+                <!-- </editor-folder> Others symbols  -->
+
+                <!-- <editor-folder> Bodybuilder symbols  -->
+                <tr>
+                  <td colspan="2" class="category">
+                    {{ $t('Bodybuilder symbols') }}
+                  </td>
+                </tr>
+                <SkinManualLine
+                  color="blue"
+                  :icons="['icon-scania-rotating-beacon_blue']"
+                  :label="'The rotating beacon is activated'"
+                />
+                <!-- </editor-folder> Bodybuilder symbols  -->
+              </tbody>
+            </table>
+          </div>
+        </transition>
+      </template>
+    </b-overlay>
+  </div>
+</template>
+
+<script>
+import SkinManualLine from '@/components/menu/skin-manuals/SkinManualLine';
+
+export default {
+  name: 'SkinManualScaniaNextGen',
+  components: {
+    SkinManualLine
+  }
+};
+</script>
diff --git a/src/data/skins.json b/src/data/skins.json
index 91bebaf4..ffb76bc6 100644
--- a/src/data/skins.json
+++ b/src/data/skins.json
@@ -162,8 +162,8 @@
 		},
 		{
 			"id" :          "ScaniaNextGen",
-			"disabled" :    true,
-			"manual" :        false,
+			"disabled" :    false,
+			"manual" :        true,
 			"title" :       "Scania Next Gen, Klauzzy",
 			"description" : "Scania Next Gen Dashboard",
 			"author" :      {
diff --git a/src/translations/fr-FR.yaml b/src/translations/fr-FR.yaml
index 2ff6c467..9f30d630 100644
--- a/src/translations/fr-FR.yaml
+++ b/src/translations/fr-FR.yaml
@@ -339,4 +339,6 @@ App: Application
 Default menu: Menu par défaut
 Set the default menu for the Scania dashboard skin. It is displayed when you use this dashboard.: Définissez le menu par défaut de l'habillage du tableau de bord Scania. Il s'affiche lorsque vous utilisez ce tableau de bord
 Nothing: Rien
-Navigation: Navigation
\ No newline at end of file
+Navigation: Navigation
+Standard mode: Mode normal
+In standard performance mode the vehicle is adapted for driving to suit most situations.: En mode de performance standard, le véhicule est adapté à la conduite pour convenir à la plupart des situations.
\ No newline at end of file