Merge pull request #342 from AntoineCAMILLE/day-color-selector

Day color selector

public/css/style.css

@@ -156,12 +156,37 @@ body[data-page=result] {
 
 #select-container {
   padding-left: 10px;
+  margin-top: 10px;
 }
 
 .dot {
   height: 13px;
   width: 13px;
-  background-color: #bbb;
   border-radius: 50%;
   display: inline-block;
 }
+
+.color-selector {
+  display: inline-block;
+  width: 20%;
+  padding-left: 5px;
+}
+
+.color-selector > div {
+  text-align: center;
+}
+
+#color-select-container {
+  margin-top: 10px;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+#color-select-container > .color-selector:first-child, #color-select-container > br + .color-selector {
+  padding-left: 0;
+}
+
+#select-container .select2-container {
+  max-height: 200px;
+  overflow-y: auto;
+}

public/index.html.erb

@@ -37,7 +37,7 @@
 
   <script src="https://unpkg.com/i18next@21.6.6/dist/umd/i18next.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/i18next-browser-languagedetector/6.0.0/i18nextBrowserLanguageDetector.min.js"></script>
-  <script src="js/translations.js?v=20220121"></script>
+  <script src="js/translations.js?v=20220203"></script>
   <script src="js/jquery-1.12.3.min.js"></script>
   <script src="js/papaparse.min.js"></script>
   <script src="js/Chart.Core.min.js"></script>

public/js/leaflet-addons.js

@@ -34,6 +34,7 @@ L.Control.ClustersControl = L.Control.extend({
         that.options.onSwitch();
       }
       $('.cluster-icon').toggleClass('fa-circle-o');
+      $('.cluster-icon').toggleClass('fa-certificate');
       button.title = $('.cluster-icon').hasClass('fa-circle-o') ? buttonTitleEnabled : buttonTitleDisabled;
     };
 

public/js/result.js

@@ -7,6 +7,7 @@ const DEFAULT_ZOOM = 5;
 var map;
 var queryParams;
 var layers = {}
+var dayMap = [ 'mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun' ]
 const colorByVehicle = {};
 
 function forEachLayers(callback) {
@@ -87,6 +88,7 @@ function setup(body) {
       showLayersOnMap(layerNames);
       fitBounds(layerNames);
     });
+    createColorsSelectsByDay();
     $('#checkbox-container input').each((i, checkbox) => {
       checkbox.addEventListener('change', () => {
         const layerNames = $('#vehicle-select').select2('data').map(option => option.id);
@@ -101,6 +103,8 @@ function setup(body) {
 function resetPage() {
   $('#checkbox-container').empty();
   $("#select-container").empty();
+  $("#color-select-container").empty();
+
   forEachLayers(function(layerName) {
     const layerInfos = layers[layerName];
     Object.keys(layerInfos).forEach(key => {
@@ -184,7 +188,7 @@ function initialize() {
 
 $(document).ready(initialize);
 
-function formatSelect2(state) {
+function formatVehicleSelect2(state) {
   if (state.loading) {
     return state.text;
   }
@@ -199,6 +203,156 @@ function formatSelect2(state) {
   return container;
 }
 
+const layersStore = {};
+
+function hideDay(day) {
+  const layerNames = ['points', 'polylines', 'partitionsWorkDay', 'clusters'];
+  if (!layersStore[day]) {
+    layersStore[day] = [];
+  }
+  Object.keys(layers).forEach(vehicle => {
+    layerNames.forEach(layerName => {
+      const mainLayer = layerName === layerNames[3] ? layers[vehicle][layerName] : layers[vehicle][layerName].getLayers()[0];
+      mainLayer.eachLayer(layer => {
+        if (layer.feature.properties.work_day === day || (layerName === layerNames[1] && (layer.feature.properties.day - 1) % 7 === dayMap.findIndex(d => d === day))) {
+          layersStore[day].push({ vehicle: vehicle, layerName: layerName, layer: layer });
+          mainLayer.removeLayer(layer);
+        }
+      });
+    });
+  });
+  refreshClusters();
+}
+
+function resetHiddenLayers(day) {
+  if (!layersStore[day]) {
+    return;
+  }
+  layersStore[day].forEach(info => {
+    if (info.layerName === 'clusters') {
+      return layers[info.vehicle][info.layerName].addLayer(info.layer);
+    }
+    layers[info.vehicle][info.layerName].getLayers()[0].addLayer(info.layer);
+  });
+  layersStore[day] = [];
+}
+
+function formatColorSelect2(state) {
+  if (state.loading) {
+    return state.text;
+  }
+  const container = document.createElement('span');
+  if (state.text === 'hidden') {
+    const icon = document.createElement('i');
+    icon.classList.add('far');
+    icon.classList.add('fa-eye-slash');
+    container.appendChild(icon);
+  } else {
+    const dot = document.createElement('span')
+    dot.classList.add('dot')
+    dot.style = state.text === 'default' ? 'border: 1px solid grey;' : `background-color: ${state.text};`;
+    container.appendChild(dot);
+  }
+  if (state.text === 'hidden' || state.text === 'default') {
+    container.title = i18next.t('select2_' + state.text + '_title');
+  }
+  return container;
+}
+
+function resetColorForDay(day) {
+  Object.keys(layers).forEach(layerName => {
+    layers[layerName].partitionsWorkDay.getLayers()[0].eachLayer(layer => {
+      if (layer.feature.properties.work_day === day) {
+        layer.setStyle({color: layer.feature.properties.color});
+        layers[layerName].partitionsWorkDay.removeLayer(layer);
+      }
+    });
+    layers[layerName].points.getLayers()[0].eachLayer(layer => {
+      if (layer.feature.properties.work_day === day) {
+        layer.setIcon( L.divIcon({html: '<span class="circle" style="background-color: '+ layer.feature.properties.color + ';"/>'}) )
+      }
+    });
+    layers[layerName].polylines.getLayers()[0].eachLayer(layer => {
+      if ((layer.feature.properties.day - 1) % 7 === dayMap.findIndex(d => d === day)) {
+        layer.setStyle({color: layer.feature.properties.color});
+      }
+    });
+  });
+  refreshClusters();
+}
+
+function setColorForDay(color, day) {
+  Object.keys(layers).forEach(layerName => {
+    layers[layerName].partitionsWorkDay.getLayers()[0].eachLayer(layer => {
+      if (layer.feature.properties.work_day === day) {
+        layer.setStyle({color});
+      }
+    });
+    layers[layerName].points.getLayers()[0].eachLayer(layer => {
+      if (layer.feature.properties.work_day === day) {
+        layer.setIcon( L.divIcon({html: '<span class="circle" style="background-color: '+ color + ';"/>'}) )
+      }
+    });
+    layers[layerName].polylines.getLayers()[0].eachLayer(layer => {
+      if (layer.feature.properties.day % 7 === dayMap.findIndex(d => d === day)) {
+        layer.setStyle({color});
+      }
+    });
+  });
+}
+
+function refreshClusters() {
+  Object.keys(layers).forEach(layerName => {
+    if (map.hasLayer(layers[layerName].clusters)) {
+      layers[layerName].clusters.refreshClusters();
+    }
+  });
+}
+
+function createColorsSelectsByDay() {
+  const colorSelectContainer = document.getElementById('color-select-container');
+  dayMap.forEach((day, idx) => {
+    if (day !== undefined) {
+      const container = document.createElement('div');
+      const select = document.getElementById('color-select-template').cloneNode(true);
+      const div = document.createElement('div');
+      const id = day + '-select';
+
+      div.textContent = day;
+      select.id = id;
+      container.appendChild(div);
+      container.appendChild(select);
+      container.classList.add('color-selector');
+
+      if (colorSelectContainer.childNodes.length === 4) {
+        colorSelectContainer.appendChild(document.createElement('br'));
+      }
+
+      colorSelectContainer.appendChild(container);
+
+      const $select = $('#' + id);
+      $select.select2({
+        placeholder: i18next.t('select2_placeholder'),
+        minimumResultsForSearch: -1,
+        width: '90%',
+        templateResult: formatColorSelect2,
+        templateSelection: formatColorSelect2
+      }).on('change.select2', () => {
+        const option = $select.select2('data')[0].id;
+        if (option === 'hidden' ) {
+          return hideDay(day);
+        }
+        resetHiddenLayers(day);
+        if (option === 'default') {
+          return resetColorForDay(day);
+        }
+        setColorForDay(option, day);
+        refreshClusters();
+      });
+    }
+  });
+}
+
 function createSelect2(vehicleNames, onChange) {
   const select = document.createElement('select');
   select.setAttribute('multiple', '');
@@ -218,8 +372,8 @@ function createSelect2(vehicleNames, onChange) {
     placeholder: i18next.t('select2_placeholder'),
     allowClear: true,
     width: '90%',
-    templateResult: formatSelect2,
-    templateSelection: formatSelect2
+    templateResult: formatVehicleSelect2,
+    templateSelection: formatVehicleSelect2
   }).on('change.select2', () => {
     onChange($select.select2('data').map(option => option.id));
   });

public/js/translations.js

@@ -31,7 +31,9 @@ var fr = {
     missing_file: 'Veuillez renseigner un fichier clients et un fichier véhicles.',
     error_file: 'Une erreur est survenue en lisant le fichier {{filename}} : ',
     customers: 'clients',
-    vehicles: 'véhicules'
+    vehicles: 'véhicules',
+    select2_hidden_title: 'Cacher',
+    select2_default_title: 'Défaut'
   }
 };
 
@@ -68,7 +70,9 @@ var en = {
     missing_file: 'Please fill in a customer file and a vehicle file.',
     error_file: 'An error occurred while reading the file {{filename}}:',
     customers: 'customers',
-    vehicles: 'vehicles'
+    vehicles: 'vehicles',
+    select2_hidden_title: 'Hide',
+    select2_default_title: 'Default'
   }
 };
 
@@ -105,7 +109,9 @@ var es = {
     missing_file: 'Por favor, rellene una ficha de cliente y una ficha de vehículo.',
     error_file: 'Se ha producido un error al leer el archivo {{filename}}:',
     customers: 'clientes',
-    vehicle: 'vehículos'
+    vehicle: 'vehículos',
+    select2_hidden_title: 'Ocultar',
+    select2_default_title: 'Fallo'
   }
 };
 

public/pickup_delivery.html.erb

@@ -102,7 +102,7 @@
 
   <script src="https://unpkg.com/i18next@21.6.6/dist/umd/i18next.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/i18next-browser-languagedetector/6.0.0/i18nextBrowserLanguageDetector.min.js"></script>
-  <script src="js/translations.js?v=20220121"></script>
+  <script src="js/translations.js?v=20220203"></script>
   <script src="js/jquery-1.12.3.min.js"></script>
   <script src="js/papaparse.min.js"></script>
   <script src="js/Chart.Core.min.js"></script>