@osimatic/helpers-js 1.0.2

package/form_helper.js

@@ -0,0 +1,237 @@
+class FormHelper {
+	static logRequestFailure(status, exception) {
+		console.log('request failure. Status: '+status+' ; Exception: '+exception);
+	}
+
+	static resetSelectOption(form, selectName) {
+		form.find('select[name="'+selectName+'"] option').prop('disabled', false).prop('selected', false);
+	}
+	static setSelectedSelectOption(form, selectName, optionValue) {
+		form.find('select[name="'+selectName+'"] option[value="'+optionValue+'"]').prop('selected', true);
+	}
+	static setSelectedSelectOptions(form, selectName, optionValues) {
+		$.each(optionValues, function(idx, id) {
+			FormHelper.setSelectedSelectOption(form, selectName, id);
+		});
+	}
+	static disableSelectOption(form, selectName, optionValue) {
+		form.find('select[name="'+selectName+'"] option[value="'+optionValue+'"]').prop('disabled', true);
+	}
+	static disableSelectOptions(form, selectName, optionValues) {
+		$.each(optionValues, function(idx, id) {
+			FormHelper.disableSelectOption(form, selectName, id);
+		});
+	}
+	static countSelectOptions(form, selectName) {
+		return form.find('select[name="'+selectName+'"] option:not([disabled])').length;
+	}
+
+	static getFormData(form) {
+		// var formElement = document.getElementById("myFormElement");
+		return new FormData(form[0]);
+	}
+
+	static getDataFromFormData(formData) {
+		var data = {};
+		for(let pair of formData.entries()) {
+			//console.log(pair[0]+ ', '+ pair[1]);
+			data[pair[0]] = pair[1];
+		}
+		return data;
+	}
+
+	static getFormDataQueryString(form) {
+		return form.serialize();
+		// cette soluce marche pas pour les clés sous forme de tableau : ids[]=1&ids[]=2
+		/*
+		return form.serializeArray().reduce(function(obj, item) {
+			obj[item.name] = item.value;
+			return obj;
+		}, {});
+		*/
+	}
+
+
+	static populateForm(form, data) {
+		form.find('[name="employees_display_type"][value="NONE"]').prop('checked', true); //todo à retirer
+		
+		$.each(data, function(key, value) {
+			if (value == null) {
+				return;
+			}
+
+			if (typeof value == 'object') {
+				var select = form.find('[name="'+key+'[]"]');
+				select.find('option').prop('selected', false);
+				select.data('default_id', value.join(','));
+				$.each(value, function(key, val) {
+					select.find('option[value="'+val+'"]').prop('selected', true);
+				});
+				return;
+			}
+
+			var input = form.find('[name="'+key+'"]');
+
+			if (input.prop('type') == 'radio' || input.prop('type') == 'checkbox') {
+				input.prop('checked', false);
+				input.filter('[value="'+value+'"]').prop('checked', true);
+				return;
+			}
+
+			input.val(value);
+			// console.log(form.find('[name="'+key+'"]').length);
+		});
+	}
+
+	static getCheckedValues(inputs) {
+		return inputs.map(function() {
+			if (this.checked) {
+				return this.value;
+			}
+		}).get();
+	}
+
+	static setCheckedValues(inputs, defaultValues) {
+		$.each(defaultValues, function(idx, value) {
+			inputs.parent().find('[value="'+value+'"]').prop('checked', true);
+		});
+	}
+
+	static getInputListValues(inputs) {
+		return inputs.map(function() {
+			return this.value;
+		}).get().filter(word => word.length > 0);
+	}
+
+	static getLinesOfTextarea(textarea) {
+		return textarea.val().replace(/(\r\n|\n|\r)/g, "\n").split("\n").filter(word => word.length > 0);
+	}
+
+
+	// ------------------------------------------------------------
+	// Champs
+	// ------------------------------------------------------------
+
+	static initTypeFields(form) {
+		//if ( $('[type="date"]').prop('type') != 'date' ) {
+		//	$('[type="date"]').datepicker();
+		//}
+		if (!Modernizr.inputtypes.date) {
+			// $.fn.datepicker.defaults.language = 'fr';
+			// $.datepicker.setDefaults( $.datepicker.regional["fr"]);
+			form.find('input[type="date"]')
+				.css('max-width', '120px')
+				// 28/06/2021 : désactivation du datepicker car safari le gere en natif
+				/*
+				.datepicker({
+					dateFormat: 'yy-mm-dd',
+					changeMonth: true,
+					changeYear: true,
+					showOn: "both",
+					buttonImage: ROOT_PATH+'images/icons/calendar-alt.png',
+					buttonImageOnly: true,
+				})
+				*/
+			;
+			//form.find('input[type="date"]').datepicker({dateFormat: 'yy-mm-dd', minDate: "-10Y", maxDate: "+3Y"});
+			// $("#date_conf").datepicker("option", $.datepicker.regional["fr"]);
+			// $("#date_conf").datepicker("option", "dateFormat", "yy-mm-dd");
+		}
+		if (!Modernizr.inputtypes.time) {
+			form.find('input[type="time"]')
+				.css('max-width', '100px')
+				.attr('placeholder', 'hh:mm')
+			;
+			form.find('input[type="time"][step="1"]').attr('placeholder', 'hh:mm:ss');
+		}
+
+		// Show/Hide password
+		let linkTogglePassword = $('<span class="input-group-text"><i class="fas fa-eye toggle_password"></i></span>');
+		linkTogglePassword.find('i').click(function(e) {
+			e.preventDefault();
+			let input = $(this).closest('.input-group').find('input');
+			let passwordHidden = input.attr('type') === 'password';
+			input.attr('type', passwordHidden ? 'text' : 'password');
+			$(this).removeClass('fa-eye fa-eye-slash').addClass(passwordHidden ? 'fa-eye-slash' : 'fa-eye');
+		});
+		form.find('input[type="password"]').wrap('<div class="input-group password"></div>').after(linkTogglePassword);
+	}
+
+	// ------------------------------------------------------------
+	// Messages
+	// ------------------------------------------------------------
+
+	static hideFormErrors(form) {
+		form.find('div.form_errors').remove();
+		return form;
+	}
+
+	static getFormErrorText(errors) {
+		var errorLabels = '';
+		for (var property in errors) {
+			if (typeof errors[property] != 'function') {
+				errorLabels += '<span>' + errors[property] + '</span><br>';
+			}
+		}
+		return errorLabels;
+	}
+
+	static getFormErrorTextBis(errors) {
+		var errorLabels = '';
+		for (var property in errors) {
+			// console.log(property);
+			if (typeof errors[property] != 'function') {
+				if (typeof errors[property]['error_description'] === 'undefined') {
+					errorLabels += '<span>' + errors[property] + '</span><br>';
+				} else {
+					errorLabels += '<span>' + errors[property]['error_description'] + '</span><br>';
+				}
+			}
+		}
+		return errorLabels;
+	}
+
+	static displayFormErrors(form, btnSubmit, errors) {
+		this.displayFormErrorsFromText(form, this.getFormErrorTextBis(errors));
+		if (btnSubmit != null) {
+			if (btnSubmit.buttonLoader != null) {
+				btnSubmit.buttonLoader('reset');
+			} else {
+				btnSubmit.attr('disabled', false).button('reset');
+			}
+		}
+	}
+
+	static displayFormErrorsFromXhr(form, btnSubmit, xhr) {
+		this.displayFormErrors(form, btnSubmit, xhr.responseJSON);
+	}
+
+	static displayFormErrorsFromText(form, errorLabels) {
+		var errorDiv = '<div class="alert alert-danger form_errors">'+errorLabels+'</div>';
+		var errorsParentDiv = form;
+
+		if (form.find('.form_errors_content').length) {
+			form.find('.form_errors_content').append(errorDiv);
+			return;
+		}
+
+		if (form.find('.modal-body').length) {
+			errorsParentDiv = form.find('.modal-body');
+		}
+
+		var firstFormGroup = errorsParentDiv.find('.form-group:first');
+		if (firstFormGroup.length) {
+			if (firstFormGroup.parent().parent().hasClass('row')) {
+				firstFormGroup.parent().parent().before(errorDiv);
+			}
+			else {
+				errorsParentDiv.find('.form-group:first').before(errorDiv);
+			}
+			return;
+		}
+
+		errorsParentDiv.prepend(errorDiv);
+	}
+}
+
+exports.FormHelper = FormHelper;

package/google_charts.js

@@ -0,0 +1,344 @@
+
+// google.load("visualization", "1", {packages:["corechart"]});
+google.charts.load('current', {'packages':['bar','line','corechart']});
+// google.charts.load('current', {packages:['corechart']});
+
+google.charts.setOnLoadCallback(drawAllCharts);
+
+class GoogleCharts
+{
+	static drawCharts(chartsList, onComplete) {
+		// on supprime du tableau la liste des graphiques dont l'id div n'a pas été trouvé (le graphique ne pourra pas être généré)
+		chartsList = chartsList.filter(chartData => typeof chartData.div_id != 'undefined' && $('#'+chartData.div_id).length);
+
+		var nbChartsCompleted = 0;
+		chartsList.forEach(chartData => {
+			//console.log(chartData);
+			GoogleCharts.draw(
+				$('#'+chartData.div_id),
+				chartData.chart_type,
+				chartData.title,
+				chartData.abscissa_label,
+				chartData.abscissa_data,
+				chartData.ordinate_label,
+				chartData.ordinate_data,
+				chartData.colors,
+				chartData.ordinate_format,
+				chartData.height,
+				chartData.width,
+				chart => {
+					nbChartsCompleted++;
+					// si tous les graphiques ont été chargés, on appelle le callback onComplete transmis en paramètre
+					if (chartsList.length === nbChartsCompleted && typeof onComplete == 'function') {
+						onComplete();
+					}
+				},
+			);
+		});
+	}
+
+	static draw(div, typeGraph, titre, libelleAbs, tabDataAbsParam, listeLibelleOrd, listeTabDataOrd, tabColor, formatData, height, width, onComplete) {
+		if (typeof div == 'undefined' || !div.length) {
+			return;
+		}
+
+		height = height || null;
+		width = width || null;
+
+		var htmlDomDiv = div[0];
+
+		var afficherLibelleOrd = false;
+
+		var isStacked = false;
+		if (typeGraph === 'stacked_bar_chart') {
+			typeGraph = 'bar_chart';
+			isStacked = true;
+		}
+		if (typeGraph === 'stacked_column_chart') {
+			typeGraph = 'column_chart';
+			isStacked = true;
+		}
+		if (typeGraph === 'stacked_combo_chart') {
+			typeGraph = 'combo_chart';
+			isStacked = true;
+		}
+
+		var isDualChart = false;
+		if (typeGraph === 'dual_column_chart') {
+			typeGraph = 'column_chart';
+			isDualChart = true;
+		}
+		if (typeGraph === 'dual_bar_chart') {
+			typeGraph = 'bar_chart';
+			isDualChart = true;
+		}
+
+		var data = null;
+		if (typeGraph === 'pie_chart') {
+			//data = google.visualization.arrayToDataTable(tabDataAbsParam);
+
+			data = new google.visualization.DataTable();
+			data.addColumn('string', libelleAbs);
+			data.addColumn('number', '');
+
+			var numRow = 0;
+			$.each(tabDataAbsParam, function(idx, value) {
+				data.addRows(1);
+				data.setCell(numRow, 0, idx);
+				data.setCell(numRow, 1, value);
+				numRow++;
+			});
+		}
+		else {
+			// Déclaration du tableau de données
+			data = new google.visualization.DataTable();
+			data.addColumn('string', libelleAbs);
+			$.each(listeLibelleOrd, function(idx, libelleOrd) {
+				data.addColumn('number', libelleOrd);
+			});
+
+			// Remplissage des données
+			var nbCells = 0;
+			var numRow = 0;
+			$.each(tabDataAbsParam, function(idx, dataAbs) {
+				// dataOrd = tabDataOrd[idx];
+				// data.addRow([dataAbs, dataOrd]);
+				data.addRows(1);
+
+				data.setCell(numRow, 0, dataAbs);
+
+				var numCell = 1;
+				$.each(listeTabDataOrd, function(idx2, tabDataOrd) {
+					data.setCell(numRow, numCell, tabDataOrd[idx]);
+					//data.setCell(numRow, numCell, Math.round(tabDataOrd[idx], 2));
+					numCell++;
+				});
+
+				nbCells = numCell;
+				numRow++;
+			});
+			nbCells -= 2;
+		}
+
+		// console.log(data);
+		// console.log('drawGraph : '+div+' ; type : '+typeGraph);
+
+		// Options générales
+		var options = {
+			colors: tabColor,
+			fontName: 'Trebuchet MS',
+			fontSize: 12,
+			hAxis: {maxAlternation: 1},
+			vAxis: {minValue: 0, textPosition: 'out'},
+			//gridlines: {color: '#333', count: 1}
+		};
+
+		if (formatData != null) {
+			options.vAxis.format = formatData;
+		}
+
+		// Options sur le titre du graphique
+		options.title = titre;
+		if (typeGraph === 'pie_chart') {
+			// options.titlePosition = 'none';
+		}
+		else {
+			options.titlePosition = 'none';
+		}
+
+		// Options sur la taille du graphique
+		if (typeGraph === 'bar_chart') {
+			options.chartArea = {left:120, top:30};
+			//options.chartArea = {left:"auto", top:"auto"};
+			//options.chartArea = {};
+			if (height != null) {
+				options.chartArea.height = (height - 60);
+				//options.chartArea.height = '100%';
+			}
+			options.chartArea.width = "85%";
+			//options.chartArea.width = "100%";
+		}
+		else {
+			options.chartArea = {left:"auto", top:"auto"};
+			if (height != null) {
+				options.chartArea.height = height+"%";
+			}
+			else {
+				options.chartArea.height = "80%";
+			}
+			options.chartArea.width = "85%";
+		}
+		// options.chartArea = {};
+		// options.chartArea.height = "100%";
+		// options.chartArea.width = "100%";
+
+		//options.width = width;
+		//options.width = "100%";
+		if (typeof height != 'undefined' && height != null) {
+			options.height = height;
+		}
+		//console.log(div);
+		//console.log(div.width());
+		//options.width = div.width();
+
+		// Options sur la légende
+		options.legend = {};
+		if (typeGraph === 'pie_chart') {
+			options.legend.position = 'right';
+		}
+		else if (typeGraph === 'bar_chart') {
+			options.legend.position = 'bottom';
+		}
+		else {
+			options.legend.position = 'top';
+		}
+
+		// Options sur l'affichage des labels en absisse / ordonnée
+		if (typeGraph === 'bar_chart') {
+			// options.hAxis.title = libelleOrd;
+			options.vAxis.title = libelleAbs;
+		}
+		else {
+			options.hAxis.title = libelleAbs;
+			// options.vAxis.title = libelleOrd;
+		}
+
+		// Options sur les graphiques "dual bar chart / dual column chart"
+		if (isDualChart) {
+			options.series = {};
+			options.axes = {};
+			if (typeGraph === 'column_chart') {
+				options.axes.y = {};
+				options.vAxes = {};
+			}
+			else {
+				options.axes.x = {};
+				options.hAxes = {};
+			}
+			$.each(listeLibelleOrd, function(idx, libelleOrd) {
+				// console.log(idx);
+				if (idx <= 1) {
+					// key = 'series_'+idx;
+					var key = idx;
+					// options.series[idx] = {axis: key, targetAxisIndex: key};
+					options.series[idx] = {axis: key, targetAxisIndex: idx};
+					if (typeGraph === 'column_chart') {
+						options.axes.y[key] = {label: libelleOrd};
+						if (idx === 1) {
+							options.axes.y[key].side = 'right';
+						}
+						if (formatData != null) {
+							options.vAxes[key] = {format: formatData};
+						}
+					}
+					else {
+						options.axes.x[key] = {label: libelleOrd};
+						if (idx === 1) {
+							options.axes.x[key].side = 'top';
+						}
+						if (formatData != null) {
+							options.hAxes[key] = {format: formatData};
+						}
+					}
+				}
+			});
+			// console.log(options.series);
+			// console.log(options.vAxes);
+		}
+
+		// Options sur les graphiques "combo chart"
+		if (typeGraph === 'combo_chart') {
+			options.seriesType = "bars";
+			options.series = {};
+			options.series[nbCells] = {type: "line"};
+		}
+
+		// Options sur le style des lignes pour les "line chart"
+		if (typeGraph === 'line_chart') {
+			options.series = [{lineWidth: 3}, {lineWidth: 1.5}];
+			options.curveType = 'function';
+		}
+
+		// Options sur le style pour les "pie chart"
+		if (typeGraph === 'pie_chart') {
+			options.is3D = false;
+			options.pieResidueSliceLabel = 'Autre';
+		}
+
+		if (typeGraph === 'bar_chart') {
+			options.bars = 'horizontal';
+		}
+
+		if (isStacked) {
+			options.isStacked = true;
+		}
+
+		// console.log(options);
+
+		// Création du graphique
+		var chart = null;
+		if (typeGraph === 'column_chart') {
+			// chart = new google.visualization.ColumnChart(htmlDomDiv);
+			chart = new google.charts.Bar(htmlDomDiv);
+		}
+		else if (typeGraph === 'bar_chart') {
+			// chart = new google.visualization.BarChart(htmlDomDiv);
+			chart = new google.charts.Bar(htmlDomDiv);
+		}
+		else if (typeGraph === 'line_chart') {
+			// chart = new google.visualization.LineChart(htmlDomDiv);
+			chart = new google.charts.Line(htmlDomDiv);
+		}
+		else if (typeGraph === 'combo_chart') {
+			chart = new google.visualization.ComboChart(htmlDomDiv);
+		}
+		else if (typeGraph === 'pie_chart') {
+			chart = new google.visualization.PieChart(htmlDomDiv);
+		}
+
+		div.removeClass('loading');
+
+		if (chart === null) {
+			console.log('erreur graphique');
+			div.addClass('graphique_error');
+			htmlDomDiv.innerHTML = 'Une erreur s\'est produite lors du chargement du graphique.';
+			return;
+		}
+
+		//div.addClass('graphique');
+		div.addClass('chart');
+		htmlDomDiv.innerHTML = '';
+
+		// htmlDomDiv.style.display = 'block';
+		let tabPaneDiv = div;
+		if (!div.hasClass('tab-pane')) {
+			tabPaneDiv = div.closest('.tab-pane');
+		}
+
+		var hasClassActive = tabPaneDiv.hasClass('active');
+		if (!hasClassActive) {
+			tabPaneDiv.addClass('active');
+		}
+
+		google.visualization.events.addListener(chart, 'ready', function () {
+			//console.log('ready');
+			//console.log(chart);
+			// htmlDomDiv.style.display = 'none';
+			// div.hide();
+			if (!hasClassActive) {
+				tabPaneDiv.removeClass('active');
+			}
+
+			if (typeof onComplete == 'function') {
+				onComplete(chart);
+			}
+		});
+
+		// console.log($("ul li.ui-state-active").index()
+		//console.log(options);
+
+		chart.draw(data, options);
+	}
+
+}
+