Merge pull request #2 from Sygic/jakubh/hazmat-integration-STR-6404

Hazmat integration
Sygic · Jan 24, 2024 · a5c1271 · a5c1271
2 parents f2b5150 + a18f6c9
commit a5c1271
Show file tree

Hide file tree

Showing 11 changed files with 394 additions and 37 deletions.
diff --git a/geotabdrive-sygic-addin/src/app/scripts/main.js b/geotabdrive-sygic-addin/src/app/scripts/main.js
@@ -118,23 +118,59 @@ geotab.addin.sygic = function (api, state) {
   })();
 
   let dimensionsFormTemplate = `
-  <% for (const key in obj) { %>
-    <% if (obj.hasOwnProperty(key)) { %>
-      <%  let dimension_label = obj[key].label; %>
-      <%  let value = obj[key].value; %>
-      <label for='sygic-truck-<%= key %>' class='form-input'>
-      <%= dimension_label %>
-      <input type='number' step=0.1 name='sygic-truck-<%= key %>' value='<%= value %>' class='form-input' />
+  <% for (const key in dimensions) { %>
+    <% if (dimensions.hasOwnProperty(key)) { %>
+      <%  let dimension_label = dimensions[key].label; %>
+      <%  let value = dimensions[key].value; %>
+      <div class='geotabField'>
+      <label for='sygic-truck-dimensions-<%= key %>' class='form-input'>
+        <%= dimension_label %>
+        <input type='number' step=0.1 name='sygic-truck-dimensions-<%= key %>' value='<%= value %>' class='form-input' />
       </label>
+      </div>
   <% }} %>
+  
+  <div data-name='hazmat-fields'>
+    <% _.each(hazmats, hazmat => { %>
+      <%  let name = 'sygic-truck-hazmat-' + hazmat.key; %>
+    
+      <div class='geotabField' <% if (!hazmat.visible) { %> hidden='hidden' <% } %>>
+        <% if (hazmat.key === 'adr_tunnel') { %>
+            <label for=<%= name %> ><%= hazmat.label %>
+              <select name=<%= name %> style='float: right'>
+                <option></option>
+                <% _.each(hazmat.options, option => { %>
+                  <option value=<%= option %> <% if (hazmat.value === option) { %> selected='selected' <% } %>  ><%= option %></option>
+                <% }) %>                   
+              </select>
+            </label>
+        <% } else { %>
+            <label for=<%= name %> class='form-input'><%= hazmat.label %>
+              <input type='checkbox' step=0.1 name=<%= name %> class='sygic-checkbox' <% if (hazmat.value) { %> checked <% } style="text-align:center; vertical-align:middle" %> />
+            </label>
+        <% } %>
+      </div>
+    <% }) %>
+  </div>
   `;
+
   let dimensionsDataTemplate = `
-  <% for (const key in obj) { %>
-    <% if (obj.hasOwnProperty(key)) { %>
-      <%  let dimension_label = obj[key].label; %>
-      <%  let value = obj[key].value; %>
+  <% for (const key in dimensions) { %>
+    <% if (dimensions.hasOwnProperty(key)) { %>
+      <%  let dimension_label = dimensions[key].label; %>
+      <%  let value = dimensions[key].value; %>
     <tr><th><%= dimension_label %></th><td><%= value %></td></tr> 
   <% }} %>
+  
+  <% _.each(hazmats, hazmat => { %>
+    <% if (hazmat.visible) { %>
+      <% if (hazmat.key === 'adr_tunnel') { %>
+        <tr><th><%= hazmat.label %></th><td><%=  hazmat.value %></td></tr> 
+      <% } else { %>
+        <tr><th><%= hazmat.label %></th><td> <% if (hazmat.value) { %>On<% } else { %>Off<% } %> </td></tr> 
+      <% } %>
+    <% } %>
+  <% }) %>
   `;
 
   // the root container
@@ -143,20 +179,31 @@ geotab.addin.sygic = function (api, state) {
   function showDimensions(viewModel) {
     let summaryTemplate = _.template(dimensionsDataTemplate);
     let formTemplate = _.template(dimensionsFormTemplate);
-    let summaryTemplateObject = {};
+    let summaryDimensionsTemplateObject = {};
 
     for (const key in viewModel) {
       const valueObject = viewModel[key];
-      summaryTemplateObject[key] = {
+      if (key === 'hazmat') {
+        continue;
+      }
+      summaryDimensionsTemplateObject[key] = {
         value: valueObject.value,
         label: valueObject.label,
       };
     }
 
+    let hazmatTemplateObject = Object.keys(viewModel.hazmat.value).map(key => ({
+      value: viewModel.hazmat.value[key].value,
+      key: key,
+      label: viewModel.hazmat.value[key].label,
+      visible:  viewModel.hazmat.value[key].visible,
+      options:  viewModel.hazmat.value[key].options,
+    }));
+
     document.getElementById('sygic-dimensions-summary-content').innerHTML =
-      summaryTemplate(summaryTemplateObject);
+      summaryTemplate({dimensions: summaryDimensionsTemplateObject, hazmats: hazmatTemplateObject});
     document.getElementById('sygic-dimensions-form-content').innerHTML =
-      formTemplate(summaryTemplateObject);
+      formTemplate({dimensions: summaryDimensionsTemplateObject, hazmats: hazmatTemplateObject});
   }
 
   function toggleDimensionsBox() {

diff --git a/geotabdrive-sygic-addin/src/app/styles/main.css b/geotabdrive-sygic-addin/src/app/styles/main.css
@@ -32,6 +32,24 @@
     padding: 16px;
 }
 
+.sygic-checkbox {
+    float: right;
+    height:1em;
+    width: 1em;
+}
+
+.geotabField {
+    border-radius: 0.4em;
+    margin: 4px 0;
+    padding: 0.5em 2%;
+    float: left;
+    width: 94%
+}
+
+.geotabField:hover:not(.alert-error) {
+    background-color: #f4f4f4
+}
+
 /*
 
 //THIS IS COPIED FROM HERE: https://github.com/Geotab/sdk/blob/master/src/software/js-samples/css/geotab.css

diff --git a/geotabdrive-sygic-addin/src/app/translations/de.json b/geotabdrive-sygic-addin/src/app/translations/de.json
@@ -7,6 +7,20 @@
   "Total weight": "Gesamtgewicht",
   "Axle weight": "Achsgewicht",
   "Total length": "Gesamtlänge",
+  "Max speed": "Höchstgeschwindigkeit",
+  "General Hazmat": "Allgemeines Gefahrgut",
+  "Explosive": "Explosiv",
+  "Flammable gas": "Entflammbares Gas",
+  "Flammable liquid": "Entflammbare Flüssigkeit",
+  "Flammable solid": "Entflammbarer Feststoff",
+  "Oxidizer": "Oxidationsmittel",
+  "Poison": "Gift",
+  "Radioactive material": "Radioaktives Material",
+  "Corrosive material": "Ätzendes Material",
+  "Miscellaneous": "Verschiedenes",
+  "Poison inhalation": "Giftig beim Einatmen",
+  "Harmful to water": "Wassergefährdende Stoffe",
+  "ADR tunnel": "ADR-Tunnelcodes",
   "Vehicle": "Fahrzeug",
   "My Plans": "Meine Routenpläne",
   "stop": "Stopp",

diff --git a/geotabdrive-sygic-addin/src/app/translations/en.json b/geotabdrive-sygic-addin/src/app/translations/en.json
@@ -7,6 +7,20 @@
     "Total weight": "Total weight",
     "Axle weight": "Axle weight",
     "Total length": "Total length",
+    "Max speed": "Max speed",
+    "General Hazmat": "General Hazmat",
+    "Explosive": "Explosive",
+    "Flammable gas": "Flammable gas",
+    "Flammable liquid": "Flammable liquid",
+    "Flammable solid": "Flammable solid",
+    "Oxidizer": "Oxidizer",
+    "Poison": "Poison",
+    "Radioactive material": "Radioactive material",
+    "Corrosive material": "Corrosive material",
+    "Miscellaneous": "Miscellaneous",
+    "Poison inhalation": "Poison inhalation",
+    "Harmful to water": "Harmful to water",
+    "ADR tunnel": "ADR tunnel",
     "Vehicle": "Vehicle",
     "My Plans": "My Plans",
     "stop": "stop",

diff --git a/geotabdrive-sygic-addin/src/app/translations/es.json b/geotabdrive-sygic-addin/src/app/translations/es.json
@@ -7,6 +7,20 @@
   "Total weight": "Peso total",
   "Axle weight": "Peso del eje",
   "Total length": "Longitud total",
+  "Max speed": "Velocidad máx",
+  "General Hazmat": "Materiales peligrosos generales",
+  "Explosive": "Explosiva",
+  "Flammable gas": "Gas inflamable",
+  "Flammable liquid": "Líquido inflamable",
+  "Flammable solid": "Sólido inflamable",
+  "Oxidizer": "Oxidante",
+  "Poison": "Veneno",
+  "Radioactive material": "Material radioactivo",
+  "Corrosive material": "Material corrosivo",
+  "Miscellaneous": "Varios",
+  "Poison inhalation": "Veneno por inhalación",
+  "Harmful to water": "Contaminante del agua",
+  "ADR tunnel": "Códigos de túnel ADR",
   "Vehicle": "Vehículo",
   "My Plans": "Mis rutas",
   "stop": "punto",

diff --git a/geotabdrive-sygic-addin/src/app/translations/fr.json b/geotabdrive-sygic-addin/src/app/translations/fr.json
@@ -7,6 +7,20 @@
   "Total weight": "Poids total",
   "Axle weight": "Poids à l'essieu",
   "Total length": "Longueur totale",
+  "Max speed": "Vitesse max",
+  "General Hazmat": "Matières généralement considérées comme dangereuses",
+  "Explosive": "Explosifs",
+  "Flammable gas": "Gaz inflammable",
+  "Flammable liquid": "Liquide inflammable",
+  "Flammable solid": "Solide inflammable",
+  "Oxidizer": "Oxydant",
+  "Poison": "Poison",
+  "Radioactive material": "Matières radioactives",
+  "Corrosive material": "Matières corrosives",
+  "Miscellaneous": "Divers",
+  "Poison inhalation": "Poison volatil",
+  "Harmful to water": "Effets nocifs sur l'eau",
+  "ADR tunnel": "Codes ADR des tunnels",
   "Vehicle": "Véhicule",
   "My Plans": "Mes plans (Plans d'itinéraire)",
   "stop": "arrêt",

diff --git a/geotabdrive-sygic-addin/src/app/translations/it.json b/geotabdrive-sygic-addin/src/app/translations/it.json
@@ -8,6 +8,20 @@
   "Axle weight": "Peso dell'asse",
   "Total length": "Lunghezza totale",
   "Vehicle": "Veicolo",
+  "Max speed": "Velocità max",
+  "General Hazmat": "Materiali pericolosi generici",
+  "Explosive": "Esplosivo",
+  "Flammable gas": "Gas infiammabile",
+  "Flammable liquid": "Liquido infiammabile",
+  "Flammable solid": "Materiale infiammabile",
+  "Oxidizer": "Ossidante",
+  "Poison": "Tossico",
+  "Radioactive material": "Materiale radioattivo",
+  "Corrosive material": "Materiale corrosivo",
+  "Miscellaneous": "Vario",
+  "Poison inhalation": "Inalazione tossica",
+  "Harmful to water": "Nocivo per l'ambiente acquatico",
+  "ADR tunnel": "Codici gallerie ADR",
   "My Plans": "I miei piani di percorso",
   "stop": "fermata",
   "stops": "fermate",

diff --git a/geotabdrive-sygic-addin/src/app/translations/pl.json b/geotabdrive-sygic-addin/src/app/translations/pl.json
@@ -7,6 +7,20 @@
   "Total weight": "Waga całkowita",
   "Axle weight": "Masa osi",
   "Total length": "Długość całkowita",
+  "Max speed": "Maksymalna prędkość",
+  "General Hazmat": "Ogólne materiały niebezpieczne",
+  "Explosive": "Materiały wybuchowe",
+  "Flammable gas": "Gaz palny",
+  "Flammable liquid": "Ciecz palna",
+  "Flammable solid": "Palne ciało stałe",
+  "Oxidizer": "Utleniacz",
+  "Poison": "Trucizna",
+  "Radioactive material": "Materiał radioaktywny",
+  "Corrosive material": "Materiał żrący",
+  "Miscellaneous": "Inne",
+  "Poison inhalation": "Trujące opary",
+  "Harmful to water": "Niebezpieczne dla wody",
+  "ADR tunnel": "Kody ADR tuneli",
   "Vehicle": "Pojazd",
   "My Plans": "Moje Trasy",
   "stop": "postój",

diff --git a/mygeotab-sygic-page/src/app/scripts/main.js b/mygeotab-sygic-page/src/app/scripts/main.js
@@ -43,14 +43,37 @@ geotab.addin.mygeotabSygicPage = function (api, state) {
     <div class='g-row hidden sygic-vehicle-dimensions-form'>
       <fieldset class='geotabFieldset sygic-vehicle-dimensions-fieldset' style='background-color: transparent'>
         <% _.each(vehicle_dimensions, dimension => { %>
-            <%  let name = 'sygic-truck-' + dimension.key; %>
-            <%  let value = dimension.value; %>
-            <%  let label = dimension.label; %>
-          <div class='geotabField'>
-            <label for=<%= name %>><%= label %></label>
-            <input type='number' step=0.1 name=<%= name %> class='geotabFormEditField' value=<%= value %> />
-          </div>
+            <%  if (dimension.key != 'hazmat') { %>
+              <%  let name = 'sygic-truck-dimensions-' + dimension.key; %>
+              <%  let value = dimension.value; %>
+              <%  let label = dimension.label; %>
+              <div class='geotabField'>
+                <label for=<%= name %>><%= label %></label>
+                <input type='number' step=0.1 name=<%= name %> class='geotabFormEditField' value=<%= value %> />
+              </div>
+            <%  } %>
         <% }) %>
+        <div data-name='hazmat-fields'>
+            <% _.each(vehicle_hazmat, hazmat => { %>
+              <%  let name = 'sygic-truck-hazmat-' + hazmat.key; %>
+              <% if (hazmat.key === 'adr_tunnel') { %>
+                 <div class='geotabField' <% if (!hazmat.visible) { %> hidden='hidden' <% } %> >
+                  <label for=<%= name %>><%= hazmat.label %></label>
+                  <select name=<%= name %> class='geotabFormEditField' >
+                    <option></option>
+                    <% _.each(hazmat.options, option => { %>
+                      <option value=<%= option %> <% if (hazmat.value === option) { %> selected='selected' <% } %>  ><%= option %></option>
+                    <% }) %>                   
+                  </select>
+                </div>
+              <% } else { %>
+                <div class='geotabField'  <% if (!hazmat.visible) { %> hidden='hidden' <% } %> >
+                  <label for=<%= name %>><%= hazmat.label %></label>
+                  <input type='checkbox' step=0.1 name=<%= name %> class='geotabFormEditField' <% if (hazmat.value) { %> checked <% } %> />
+                </div>
+              <% } %>
+            <% }) %>
+        </div>
         <button class='geotabButton sygic-vehicle-dimensions-save' ><%= apply_changes %></button>
       </fieldset>
     </div>
@@ -66,8 +89,10 @@ geotab.addin.mygeotabSygicPage = function (api, state) {
     for (const key in viewModel) {
       if (viewModel.hasOwnProperty(key)) {
         const model = viewModel[key];
-        if (iterator++ > 0) dimensionDetailsString += ', ';
-        dimensionDetailsString += `${model.label}: ${model.value}`;
+        if (model.value !== undefined && typeof model.value !== 'object') {
+          if (iterator++ > 0) dimensionDetailsString += ', ';
+          dimensionDetailsString += `${model.label}: ${model.value}`;
+        }
       }
     }
     return dimensionDetailsString;
@@ -94,11 +119,23 @@ geotab.addin.mygeotabSygicPage = function (api, state) {
         dimensionDetailsString = 'Dimensions unset';
       }
 
+      let dimensionsTemplateObject = Object.keys(viewModel).map(key => {
+        if (key !== 'hazmat') {
+          return {
+            value: viewModel[key].value,
+            key: key,
+            label: viewModel[key].label,
+          };
+        }
+        return null;
+      }).filter(Boolean);
 
-      let dimensionsTemplateObject = Object.keys(viewModel).map(key => ({
-        value: viewModel[key].value,
-        key: key,
-        label: viewModel[key].label
+      let hazmatTemplateObject = Object.keys(viewModel.hazmat.value).map(key => ({
+          value: viewModel.hazmat.value[key].value,
+          key: key,
+          label: viewModel.hazmat.value[key].label,
+          visible:  viewModel.hazmat.value[key].visible,
+          options:  viewModel.hazmat.value[key].options,
       }));
 
       let vehicle_groups_string = device.groups.map((c) => c.name).join(', ');
@@ -107,6 +144,7 @@ geotab.addin.mygeotabSygicPage = function (api, state) {
         vehicle_dimensions_string: dimensionDetailsString,
         vehicle_groups_string: vehicle_groups_string,
         vehicle_dimensions: dimensionsTemplateObject,
+        vehicle_hazmat: hazmatTemplateObject,
         user: user,
         apply_changes: state.translate('Apply Changes'),
       });

diff --git a/mygeotab-sygic-page/src/app/translations/en.json b/mygeotab-sygic-page/src/app/translations/en.json
@@ -6,6 +6,7 @@
   "Total weight": "Total weight",
   "Axle weight": "Axle weight",
   "Total length": "Total length",
+  "Max speed": "Max speed",
   "Vehicle": "Vehicle",
   "My Plans": "My Plans",
   "stop": "stop",