From b21215b235df522e40a29774f42fdadd30ed7455 Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Mon, 28 Nov 2022 19:31:32 +0100 Subject: [PATCH] wip #5026 @2 --- Michelin/index.html | 23 ++++- Michelin/l10n.js | 6 +- Michelin/script.js | 228 +++++++++++++++++++++++++++++++++++++++++ Michelin/style.css | 4 + Michelin/style.css.map | 2 +- Michelin/style.less | 8 +- 6 files changed, 260 insertions(+), 11 deletions(-) diff --git a/Michelin/index.html b/Michelin/index.html index 3046181..d84843c 100644 --- a/Michelin/index.html +++ b/Michelin/index.html @@ -16,20 +16,35 @@ + + +
-
+
+ +
+ diff --git a/Michelin/l10n.js b/Michelin/l10n.js index 57235cc..8118afb 100644 --- a/Michelin/l10n.js +++ b/Michelin/l10n.js @@ -1,9 +1,7 @@ - - function getTranslation(str, locale) { str = str.trim(); if (locale === undefined) { - locale = currentLocale; + locale = $('html').attr('lang'); } if (str === undefined) { return; @@ -184,6 +182,6 @@ function ucFirst(str, forceLower) { } } -$(function(){ +$(function () { setTranslations('en'); }); \ No newline at end of file diff --git a/Michelin/script.js b/Michelin/script.js index e69de29..4954f32 100644 --- a/Michelin/script.js +++ b/Michelin/script.js @@ -0,0 +1,228 @@ +var FORMDATA = {}; +var products = []; +var p = {front: [], rear: [], frontrear: []}; +var universes = {}; + +$(function () { + $.each(DATA, function (k, v) { + var product = v; + products.push(product); + + if (universes[v.Univers] === undefined) { + universes[v.Univers] = v.Univers; + } + if (v.Position === 'Front') { + p.front.push(product); + } else if (v.Position === 'Rear') { + p.rear.push(product); + } else if (v.Position === 'Front/Rear') { + p.front.push(product); + p.rear.push(product); + p.frontrear.push(product); + } else { + return; + } + }); + + $(document).on('change', 'select,input', function () { + updateForm(); + }); + updateForm(); + +}); + +function updateForm() { + STEP = 1; + FORMDATA = $('form').serializeObject(); + $('header').find('.tyre,.set').hide(); + $('form').html(''); + // Universe + createSelect('universe', universes, getTranslation("Select a universe")); + if (FORMDATA.universe === undefined) { + return; + } + STEP++; + createSelectList('set', {set: getTranslation('Set'), tyre: getTranslation('Tyre')}); + if (FORMDATA.set === undefined) { + return; + } + STEP++; + $('header').find('.' + FORMDATA.set).show(); + if (FORMDATA.set === 'tyre') { + updateTyreForm(); + } else { + updateSetForm(); + } + updateSteps(); +} + +function updateTyreForm() { + createSelect('position', { + front: getTranslation('Front'), rear: getTranslation('Rear'), frontrear: getTranslation('Front/Rear') + }); + if (FORMDATA.position === undefined) { + return; + } + STEP++; + + var prodList = filterProdList(FORMDATA.universe, FORMDATA.position) + var widths = getValuesOfProductList(prodList, 'Largeur', true); + + createSelect('width', widths); + if (FORMDATA.width === undefined) { + return; + } + STEP++; + prodList = filterList(prodList, 'Largeur', FORMDATA.width); + var ratios = getValuesOfProductList(prodList, 'Ratio', true); + createSelect('ratio', ratios); + if (FORMDATA.ratio === undefined) { + return; + } + STEP++; + prodList = filterList(prodList, 'Ratio', FORMDATA.ratio); + var diameters = getValuesOfProductList(prodList, 'Diamètre', true); + createSelect('diameter', diameters); + if (FORMDATA.diameter === undefined) { + return; + } + STEP++; + prodList = filterList(prodList, 'Diamètre', FORMDATA.diameter); + console.log(prodList); +} + +function getValuesOfProductList(list, key, sort) { + var array = []; + $.each(list, function (k, v) { + var value = v[key]; + if (sort) { + value = parseInt(value); + } + if (array.indexOf(value) === -1) { + array.push(value); + } + }); + + if (sort) { + array.sort(function (a, b) { + return a - b; + }); + } + + var res = {}; + $.each(array, function (k, v) { + res[v.toString()] = v.toString(); + }); + return res; +} + +function filterList(list, key, value) { + var res = []; + $.each(list, function (k, v) { + if (v[key] !== value) { + return; + } + res.push(v); + }); + return res; +} + +function filterProdList(universe, position) { + var res = []; + var baselist = p[position]; + $.each(baselist, function (k, v) { + if (v.Univers !== universe) { + return; + } + res.push(v); + }); + return res; +} + +function updateSetForm() { + +} + + +function updateSteps() { + +} + +function createSelect(name, options, placeholder) { + if (placeholder === undefined) { + placeholder = getTranslation('Select...'); + } + let value = FORMDATA[name]; + + + var s = $(''); + $.each(options, function (k, v) { + s.append(''); + }); + $('form').append(s); +} + +function createSelectList(name, options, value) { + return createSelect(name, options, value); +} + +(function ($) { + $.fn.serializeObject = function () { + + var self = this, json = {}, push_counters = {}, patterns = { + "validate": /^[a-zA-Z][a-zA-Z0-9_]*(?:\[(?:\d*|[a-zA-Z0-9_]+)\])*$/, + "key": /[a-zA-Z0-9_]+|(?=\[\])/g, + "push": /^$/, + "fixed": /^\d+$/, + "named": /^[a-zA-Z0-9_]+$/ + }; + + + this.build = function (base, key, value) { + base[key] = value; + return base; + }; + + this.push_counter = function (key) { + if (push_counters[key] === undefined) { + push_counters[key] = 0; + } + return push_counters[key]++; + }; + + $.each($(this).serializeArray(), function () { + + // Skip invalid keys + if (!patterns.validate.test(this.name)) { + return; + } + + var k, keys = this.name.match(patterns.key), merge = this.value, reverse_key = this.name; + + while ((k = keys.pop()) !== undefined) { + + // Adjust reverse_key + reverse_key = reverse_key.replace(new RegExp("\\[" + k + "\\]$"), ''); + + // Push + if (k.match(patterns.push)) { + merge = self.build([], self.push_counter(reverse_key), merge); + } + + // Fixed + else if (k.match(patterns.fixed)) { + merge = self.build([], k, merge); + } + + // Named + else if (k.match(patterns.named)) { + merge = self.build({}, k, merge); + } + } + + json = $.extend(true, json, merge); + }); + + return json; + }; +})(jQuery); \ No newline at end of file diff --git a/Michelin/style.css b/Michelin/style.css index af6b746..6aebd4f 100644 --- a/Michelin/style.css +++ b/Michelin/style.css @@ -15,4 +15,8 @@ h2 { height: 60px; padding: 18px 30px; } +header ul.tyre, +header ul.set { + display: none; +} /*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/Michelin/style.css.map b/Michelin/style.css.map index ae6ade0..0022905 100644 --- a/Michelin/style.css.map +++ b/Michelin/style.css.map @@ -1 +1 @@ -{"version":3,"sources":["style.less"],"names":[],"mappings":"AAAA;EACE,UAAA;EACA,SAAA;EACA,sBAAA;;AAGF;EACE,aAAa,6CAAb;EACA,WAAA;EACA,yBAAA;EACA,eAAA;;AAGF;EACE,eAAA;EACA,gBAAA;EACA,YAAA;EACA,kBAAA","file":"style.css"} \ No newline at end of file +{"version":3,"sources":["style.less"],"names":[],"mappings":"AAAA;EACE,UAAA;EACA,SAAA;EACA,sBAAA;;AAGF;EACE,aAAa,6CAAb;EACA,WAAA;EACA,yBAAA;EACA,eAAA;;AAGF;EACE,eAAA;EACA,gBAAA;EACA,YAAA;EACA,kBAAA;;AAKE,MADF,GACG;AAAO,MADV,GACW;EACP,aAAA","file":"style.css"} \ No newline at end of file diff --git a/Michelin/style.less b/Michelin/style.less index 84e6020..1f75bac 100644 --- a/Michelin/style.less +++ b/Michelin/style.less @@ -18,6 +18,10 @@ h2 { padding: 18px 30px; } -header{ - +header { + ul { + &.tyre, &.set { + display: none; + } + } } \ No newline at end of file -- 2.39.5