wip #5026 @2

diff --git a/Michelin/index.html b/Michelin/index.html
index 3046181909eb63f4bfe6a4e8cd8b7a455beb919a..d84843c3600f05ae799a537861cf4bbc2987a052 100644 (file)
--- a/Michelin/index.html
+++ b/Michelin/index.html
@@ -16,20 +16,35 @@
     <ul>
         <li>1. <span data-l10n="Universe"></span></li>
         <li>2. <span data-l10n="Set or tire"></span></li>
+    </ul>
+    <ul class="set">
         <li>3. <span data-l10n="Front width"></span></li>
-        <li>4. <span data-l10n="Ratio"></span></li>
-        <li>5. <span data-l10n="Diameter"></span></li>
-        <li>6. <span data-l10n="Range"></span></li>
+        <li>4. <span data-l10n="Front ratio"></span></li>
+        <li>5. <span data-l10n="Front diameter"></span></li>
+        <li>6. <span data-l10n="Rear width"></span></li>
+        <li>7. <span data-l10n="Rear ratio"></span></li>
+        <li>8. <span data-l10n="Rear diameter"></span></li>
+    </ul>
+    <ul class="tyre">
+        <li>3. <span data-l10n="Position"></span></li>
+        <li>4. <span data-l10n="Width"></span></li>
+        <li>5. <span data-l10n="Ratio"></span></li>
+        <li>6. <span data-l10n="Diameter"></span></li>
+    </ul>
+    <ul>
         <li><span data-l10n="Results"></span></li>
     </ul>
 </header>
 <div data-l10n="No product found"></div>
 <main>
-    <section></section>
+    <form>
+
+    </form>
 </main>
 <script src="../../jquery.js"></script>
 <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
 <script src="jquery.multi-select.js"></script>
+<script src="data-en.js"></script>
 <script src="locales.js"></script>
 <script src="l10n.js"></script>
 <script src="script.js"></script>

diff --git a/Michelin/l10n.js b/Michelin/l10n.js
index 57235ccb967774230ebcd5c9f2a526eaffaa9a51..8118afbcf102f0f9972e08d26ff13f9abe6e8f58 100644 (file)
--- 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 e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..4954f327be3472fa0e2197e3d0c76d125b3c3779 100644 (file)
--- 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 = $('<select name="' + name + '"><option>' + placeholder + '</option></select>');
+    $.each(options, function (k, v) {
+        s.append('<option value="' + k + '"' + (k == value ? ' selected' : '') + '>' + v + '</option>');
+    });
+    $('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 af6b746e7582700ab8167ebe1eb439976431dbc7..6aebd4ff6b8ac1a246e8790bdfdaaf080faf8979 100644 (file)
--- 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 ae6ade0bde5e780ecc83aef10723506d9e3ebe8b..0022905c34a4be2214a6f08bd4c3a1d98b97a266 100644 (file)
--- 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 84e602082c4efbc7fbf31e624ec63892ac9a2860..1f75bacc558879cdfc2a9ea1b500a5893e8ffd12 100644 (file)
--- 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